网站设计与制作流程.pptx

网站设计与制作流程网站设计与制作流程南方医科大学教育技术中心黄粤锋 47646 为什么要学习网站建设为什么要学习网站建设?凤凰卫视前主持人，百度凤凰卫视前主持人，百度副总裁梁冬说：传统媒体是副总裁梁冬说：传统媒体是一个人或几个人为几十百千一个人或几个人为几十百千万人提供信息，而网络媒体万人提供信息，而网络媒体却是几十百千万人在为你一却是几十百千万人在为你一个人提供信息！所提供的信个人提供信息！所提供的信息量对比明显。正是看到网息量对比明显。正是看到网络媒体的前景，他毅然的从络媒体的前景，他毅然的从传统媒体翘楚的凤凰卫视，传统媒体翘楚的凤凰卫视，跳槽到了当时还不是太出名跳槽到了当时还不是太出名的百度公司。的百度公司。2005年年8月月5日日,百度在百度在美国美国NASDAQ上市上市,股股票发行价票发行价：27美元美元,上上市当天升破市当天升破150美元美元!凭借凭借“竞价排名竞价排名”产产品的推出，百度品的推出，百度2006年全年净利润比年全年净利润比2005年增长年增长533.9%，达到，达到约约3.018亿元人民币。亿元人民币。随着互联网在人们生活中的地位日渐随着互联网在人们生活中的地位日渐重要，尤其是校园、医院信息化的普及，重要，尤其是校园、医院信息化的普及，我们不难想象，掌握网络知识，懂得网页我们不难想象，掌握网络知识，懂得网页设计与网站建设技术的医学复合型人才将设计与网站建设技术的医学复合型人才将在未来的就业竞争中有更广阔的前景！在未来的就业竞争中有更广阔的前景！一、主要内容网页设计与网站建设概述网页设计与网站建设概述FLASHFLASH软件运用基础软件运用基础网页网页FLASHFLASH动画设计动画设计PHOTOSHOPPHOTOSHOP软件运用基础软件运用基础PHOTOSHOPPHOTOSHOP在网页制作的运用在网页制作的运用DreamweaverDreamweaver软件知识软件知识ASPASP语言基础与动态网页的制作语言基础与动态网页的制作站点管理与网站维护站点管理与网站维护 第第1章章 概述概述 1.1 1.1 网站设计网站设计流程流程1.2 1.2 网页设计的基本方式网页设计的基本方式 1.3 1.3 网页中的常见元素网页中的常见元素 1.4 1.4 网页元素的创作与编辑工具网页元素的创作与编辑工具 1.5 HTML1.5 HTML基础知识基础知识 1.6 1.6 动态网页的支持技术动态网页的支持技术 1.1.1 网站功能与定位网站的功能可以有很多，包括各类宣网站的功能可以有很多，包括各类宣传网站、资料库、信息或商务平台等。传网站、资料库、信息或商务平台等。在设计网站前，要对所要制作的网站在设计网站前，要对所要制作的网站的特点进行分析并选择相应的设计思的特点进行分析并选择相应的设计思路。路。做网站选材也有误区做网站选材也有误区!（一）以宣传为目的的网站，要求设计（一）以宣传为目的的网站，要求设计美观，能够在网站视觉效果上表达创美观，能够在网站视觉效果上表达创意和使所要宣传的内容一目了然。如意和使所要宣传的内容一目了然。如各类企业的宣传型网站，就需要表现各类企业的宣传型网站，就需要表现该企业的企业文化和特色。这种网站该企业的企业文化和特色。这种网站特点是页面大量运用图片和动画。特点是页面大量运用图片和动画。如：如：SeptimeSeptime企业网站企业网站、MAKMAK打印耗材企业打印耗材企业 底端采用卡通导航，界面色彩，动态的图片，能有效的提高学生兴趣，吸引学生进入学习底端采用卡通导航，界面色彩，动态的图片，能有效的提高学生兴趣，吸引学生进入学习 1.2 网页程序的制作方式1.2.1 1.2.1 手工编码方式手工编码方式1.2.2 1.2.2 可视化工具方式可视化工具方式1.2.3 1.2.3 编码和可视化工具结合方式编码和可视化工具结合方式 1.2.1 手工编码方式 1.2.2 可视化工具方式随着网页制作技术的发展，出现了如随着网页制作技术的发展，出现了如FrontPageFrontPage、DreamweaverDreamweaver等可视化的网页等可视化的网页编辑工具。利用这些工具人们在可视环境编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，由编辑工具自动生下编辑制作网页元素，由编辑工具自动生成对应的网页代码。成对应的网页代码。利用可视化工具编辑网页操作简单直观，利用可视化工具编辑网页操作简单直观，调试方便，是大众化的网页编辑方式。但调试方便，是大众化的网页编辑方式。但利用可视化工具在制作一些特殊网页效果利用可视化工具在制作一些特殊网页效果上有一定的局限性。上有一定的局限性。1.2.3 编码和可视化工具结合方式 编编码码和和可可视视化化工工具具结结合合是是一一种种比比较较成成熟熟的的网网页页制制作作方式。图为的代码与设计拆分界面。方式。图为的代码与设计拆分界面。编编码码和和可可视视化化工工具具结结合合具具体体过过程程为为：一一般般的的网网页页元元素素通通过过可可视视化化工工具具编编辑辑制制作作，一一些些特特殊殊的的网网页页效效果果通通过过插插入入代代码码生生成成。这这种种方方式式效效率率高高、调调试试方方便便而而且且可可以以实实现现丰丰富富的的网网页页效效果果，但但要要求求设设计计人人员员既既要要熟熟悉悉HtmlHtml语言又能运用可视化工具。语言又能运用可视化工具。除除了了上上面面三三种种基基本本网网页页设设计计制制作作方方式式外外，我我们们还还可可以以通通过过修修改改已已有有网网页页代代码码生生成成自自己的网页。己的网页。1.3 1.3 网页中的常见元素网页中的常见元素 网页中的常见元素主要包括以下几种类网页中的常见元素主要包括以下几种类型：文本、图象、动画、视频音乐、超链型：文本、图象、动画、视频音乐、超链接、表格、表单和各类控件等。接、表格、表单和各类控件等。一、文本：文字能准确地表达信息的一、文本：文字能准确地表达信息的内容和含义，且同样信息量的文本字节往内容和含义，且同样信息量的文本字节往往比图象小，比较适合大信息量的网站。往比图象小，比较适合大信息量的网站。二、图像：在网页中使用二、图像：在网页中使用GIF,JPEG(JPG),PNGGIF,JPEG(JPG),PNG三种图象格式，其中使用最广泛的是三种图象格式，其中使用最广泛的是GIFGIF和和JPEGJPEG两两种格式。种格式。说明：当用户使用所见即所得的网页设计软件说明：当用户使用所见即所得的网页设计软件在网页上添加其他非在网页上添加其他非GIF,JPEG,GIF,JPEG,或或PNGPNG格式的图格式的图片并保存时，这些软件通常会自动将少于片并保存时，这些软件通常会自动将少于8 8位颜色位颜色的图片转化为的图片转化为GIFGIF格式，或将多于格式，或将多于8 8位颜色的图片位颜色的图片转化为转化为JPEG.JPEG.另外，另外，JPGJPG图片是静态图，图片是静态图，GIFGIF则可以则可以是动态图片。是动态图片。三、动画：主要指由三、动画：主要指由FLASHFLASH软件制作的动画软件制作的动画,由于由于其是准流媒体文件其是准流媒体文件,加上矢量动画加上矢量动画,文件小文件小,使其在使其在网络运行具有强大优势网络运行具有强大优势,是网页设计者必学的软件。是网页设计者必学的软件。四、声音和视频：用于网络的声音文件的格式非常四、声音和视频：用于网络的声音文件的格式非常多，常用的有多，常用的有MIDIMIDI、WAVWAV、MP3MP3和和AIFAIF等。很多等。很多浏览器不要插件也可以支持浏览器不要插件也可以支持MIDI,WAVMIDI,WAV和和AIFAIF格格式的文件，而式的文件，而MP3MP3和和RMRM格式的声音文件则需要格式的声音文件则需要专门的浏览器播放。视频文件均需插件（如专门的浏览器播放。视频文件均需插件（如REALONEREALONE、MEDIA PLAYERMEDIA PLAYER）支持，用于网）支持，用于网络的视频格式主要有络的视频格式主要有ASFASF、WMVWMV、RMRM等流媒体等流媒体格式。格式。五、超级链接：五、超级链接：从一个网页指向另一个目的从一个网页指向另一个目的端的链接。端的链接。六、表格：在网页中表格用来控制网页中信六、表格：在网页中表格用来控制网页中信息的布局方式。这包括两方面：息的布局方式。这包括两方面：1 1、是使用行和列的形式来布局文本和图像、是使用行和列的形式来布局文本和图像以及其他的列表化数据；以及其他的列表化数据；2 2、是可以使用表格来精确控制各种网页元、是可以使用表格来精确控制各种网页元素在网页中出现的位置。素在网页中出现的位置。七七、表表单单：用用来来接接受受用用户户在在浏浏览览器器端端的的输输入入，然然后后将将这这些些信信息息发发送送到到用用户户设设置置的的目目标标端端。表表单单由由不不同同功功能能的的表表单单域域组组成成，最最简简单单的的表表单单也也要要包包含含一一个个输输入入区区域域和和一一个个提提交交按按钮。钮。根根据据表表单单功功能能与与处处理理方方式式的的不不同同，通通常常可可以以将将表表单单分分为为用用户户反反馈馈表表单单，留留言言簿簿表表单单，搜索表单和用户注册表单等类型。搜索表单和用户注册表单等类型。八、导航栏：导航栏就是一组超级链接，这组超级八、导航栏：导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。链接的目标就是本站点的主页以及其他重要网页。导航栏的作用就是引导浏览者游历站点，同时首导航栏的作用就是引导浏览者游历站点，同时首页的导航栏，对搜索引擎的收录意义重大。页的导航栏，对搜索引擎的收录意义重大。九、网页中除了以上几种最基本的元素之外，还有九、网页中除了以上几种最基本的元素之外，还有一些其它的常用元素，包括悬停按钮，一些其它的常用元素，包括悬停按钮，JavaJava特效，特效，ActiveXActiveX等各种特效。它们不仅能点缀网页，使网等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐，电子商务等方页更活泼有趣，而且在网上娱乐，电子商务等方面也有着不可忽视的作用。面也有着不可忽视的作用。小技巧小技巧:网站内容的搜集方式网站内容的搜集方式一、文本录入技巧一、文本录入技巧二、搜索引擎使用技巧二、搜索引擎使用技巧三、破解网页禁止复制技巧三、破解网页禁止复制技巧四、四、FLASH及视频下载技巧及视频下载技巧 1.4 1.4 网页元素的创作与编辑工具 网页编辑工具网页编辑工具:FrontPage:FrontPage、DreamweaverDreamweaver、HotDogHotDog图象处理工具：图象处理工具：PhotoshopPhotoshop、Fireworks MXFireworks MX、Photo ImpactPhoto Impact动画制作工具：动画制作工具：FlashFlash、SwishSwish、DirectorDirector。其中，由其中，由MacromediaMacromedia公司出品公司出品DreamWeaverDreamWeaver、FireworksFireworks、FlashFlash，被人们喻为，被人们喻为“网页制作三剑网页制作三剑客客”。1.5.1 HTML1.5.1 HTML基本概念基本概念1.HTML1.HTML的概念：的概念：HTMLHTML是一种描述语言，对是一种描述语言，对WEBWEB页面中显示内页面中显示内容的属性以标签的形式进行描述。客户机上的浏容的属性以标签的形式进行描述。客户机上的浏览器（览器（browserbrowser）对这些描述进行解释将相应页）对这些描述进行解释将相应页面内容正确显示在显示器上。一个面内容正确显示在显示器上。一个WEBWEB页面就是页面就是一个一个HTMLHTML文档文档 。2.HTML2.HTML文档的构成：文档的构成：HTMLHTML文档由三大元素构成：文档由三大元素构成：HTMLHTML元素、元素、HEADHEAD元素和元素和BODYBODY元素。每个元素又包含各自相应的标元素。每个元素又包含各自相应的标记（属性）。记（属性）。HTMLHTML元素是最外层的元素，里面包元素是最外层的元素，里面包含含HEADHEAD元素和元素和BODYBODY元素。元素。HEADHEAD元素中包含元素中包含对对文档基本信息（文档文档基本信息（文档标题标题，文档搜索关，文档搜索关键键字、字、文档生成器等）描述的文档生成器等）描述的标记标记。BODYBODY元素是文档的主体部分，包含元素是文档的主体部分，包含有有对对网网页页元素（文本、表格、元素（文本、表格、图图片、片、动动画、画、链链接等）描述的接等）描述的标记标记。HTMLHTML中中标记标记一般成一般成对对。如：如：HTML等，但也有一些不成等，但也有一些不成对对。HTMLHTML文档的文档的结结构形式如下：构形式如下：HTML VERSION=“-/W3C/DTD HTML 3.2 FINAL/EN”页页面信息的描述面信息的描述 页页面元素的描述面元素的描述 3.HTML 3.HTML 文档的编辑文档的编辑 HTML HTML 文档是普通文本文档是普通文本 (ASCII)(ASCII)文件文件,它可以用任意编缉器它可以用任意编缉器(如如windowswindows中的记事中的记事本、写字板本、写字板,Macintosh,Macintosh 中的中的BBEditBBEdit等等)生生成。成。你也可以使用字处理软件你也可以使用字处理软件,不过要记不过要记住存文件时要存成住存文件时要存成“带回车的纯文本带回车的纯文本”。早期网页制作的过程就是直接书写早期网页制作的过程就是直接书写HTMLHTML代代码来定义页面元素的过程。码来定义页面元素的过程。1.5.2 HTML 1.5.2 HTML的基本语法结构的基本语法结构1.HTML1.HTML元素的标记元素的标记 HTMLHTML标记标记 HTMLHTML标标记记是是对对整整个个文文档档属属性性的的描描述述，即即告告诉诉浏浏览览器器HTMLHTML文档的开始与结束文档的开始与结束 。2.HEAD2.HEAD元素元素 （1 1）HEADHEAD标标记记 该该标标记记用用来来表表示示HEADHEAD元元素素的的开开始始和和结结束。其格式为：束。其格式为：。（2 2）BASEBASE标记标记 (不成对标记不成对标记)。（3 3）METAMETA标记（不成对标记）标记（不成对标记）（4 4）TITLETITLE标记标记 （5 5）SCRIPTSCRIPT标记标记3 3BODYBODY元素元素(可见对象的描述可见对象的描述)（1 1）BODYBODY标记标记 该标记该标记是是BODYBODY元素开始和元素开始和结结束的束的标标志志。（2 2）DIVDIV层标记层标记 （3 3）文本标记）文本标记 （4 4）段落标记）段落标记 （5 5）表格标记）表格标记 （6 6）图象标记）图象标记 （7 7）下拉表单标记）下拉表单标记 （8 8）链接）链接 （LinkingLinking）标记）标记 （9 9）多媒体标记）多媒体标记 （1010）移动文字标记）移动文字标记 1.6 动态网页技术介绍 1.6.1动态网页的概念 动态网页，与网页上的各种动画、滚动字幕等视动态网页，与网页上的各种动画、滚动字幕等视觉上的觉上的“动态效果动态效果”没有直接关系。没有直接关系。从网站浏览者的角度来看，无论是动态网页还是从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大但从网站开发、管理、维护的角度来看就有很大的差别。动态网页的一般特点简要归纳如下：的差别。动态网页的一般特点简要归纳如下：（1）以数据库技术为基础，大大降低网站维护的工作量）以数据库技术为基础，大大降低网站维护的工作量;（2）采用动态网页技术的网站可以实现更多交互功能；）采用动态网页技术的网站可以实现更多交互功能；（3）不是独立存在于服务器上的网页文件，当用户请求）不是独立存在于服务器上的网页文件，当用户请求时服务器才返回一个完整的网页时服务器才返回一个完整的网页;1.6.2 动态网页的分类网页技术日新月异，为了适应互联网网页技术日新月异，为了适应互联网对网站功能以及安全性越来越高的要对网站功能以及安全性越来越高的要求，包括微软公司在内，推出了几个求，包括微软公司在内，推出了几个动态网页技术，按照程序类型分，可动态网页技术，按照程序类型分，可以分为以分为ASP、JSP、PHP、CGI 和和ASP.NET等。使用不同标准编写的程等。使用不同标准编写的程序要求服务器上有相应的服务器软件序要求服务器上有相应的服务器软件支持。支持。(1)asp(1)asp技术技术 ASP ASP（Microsoft Microsoft Active Active Server Server PagesPages）是是一一套套微微软软开开发发的的服服务务器器端端脚脚本本环环境境，ASP ASP 内内含含于于 IIS IIS 3.0 3.0 和和 4.0 4.0 之之中中 ,通通过过 ASP ASP 我我们们可可以以结结合合 HTML HTML 网网页页、ASP ASP 指指令令和和 ActiveX ActiveX 元元件件建建立立动动态态、交交互互且且高高效效的的 WEB WEB 服服务务器器应应用用程程序序。有有了了 ASP ASP 你你就就不不必必担担心心客客户户的的浏浏览览器器是是否否能能运运行行你你所所编编写写的的代代码码，因因为为所所有有的的程程序序都都将将在在服服务务器器端端执执行行，包包括括所所有有嵌嵌在在普普通通 HTML HTML 中中的的脚脚本本程程序序。当当程程序序执执行行完完毕毕后后，服服务务器器仅仅将将执执行行的的结结果果返返回回给给客客户户浏浏览览器器，这这样样也也就就减减轻轻了了客客户户端端浏浏览览器器的的负负担担，大大大大提提高高了了交交互互的的速速度度。ASPASP应应用用程程序序可可以以手手工工编编码码制制作作，也也可可以以通通过过Dreamweaver Dreamweaver MXMX等可等可视视化工具化工具创创作生成。作生成。ASPASP的具体内容将在后面的的具体内容将在后面的动态动态网网页设计页设计中中讲讲解。解。(2)PHP (2)PHP技术技术 (3)JSP技术技术 JSPJSP与与MicrosoftMicrosoft的的ASPASP技技术术非非常常相相似似。两两者者都都提提供供在在HTMLHTML代代码码中中混混合合某某种种程程序序代代码码、由由语语言言引引擎擎解解释释执执行行程程序序代代码码的的功功能能。与与 ASP ASP 一一样样，JSP JSP 中中的的 Java Java 代代码码均均在在服服务务器器端端执执行行。因因此此，在在浏浏览览器器中中使使用用“查查看看源源文文件件”菜菜单单是是无法看到无法看到 JSP JSP 源代码的，只能看到结果源代码的，只能看到结果 HTML HTML 代码。代码。JSPJSP与与ASPASP虽虽然然有有很很多多相相识识之之处处，但但两两者者也也有有重重要要区区别别：第第一一，ASPASP的的编编程程语语言言是是VBScriptVBScript之之类类的的脚脚本本语语言言，JSPJSP使使用用的的是是JavaJava；第第二二，两两种种语语言言引引擎擎用用完完全全不不同同的的方方式式处处理理页页面面中中嵌嵌入入的的程程序序代代码码。在在ASPASP下下，VBScriptVBScript代代码码被被ASPASP引引擎擎解解释释执执行行；在在JSPJSP下下，代代码码被被编编译译成成ServletServlet并并由由JavaJava虚虚拟机执行处理代码。拟机执行处理代码。(4)(4)技术技术ASP.net ASP.net 是一种建立在通用语言上的是一种建立在通用语言上的程序构架，能被用于一台程序构架，能被用于一台WebWeb服务器来服务器来建立强大的建立强大的WebWeb应用程序。应用程序。ASP.netASP.net提提供许多比现在的供许多比现在的WebWeb开发模式强大的的开发模式强大的的优势。优势。它是微软继它是微软继ASPASP之后推出的又一标准之后推出的又一标准,以其功能强大以其功能强大,安全以及系统兼容性安全以及系统兼容性好等特点成为动态网页技术中的新宠。好等特点成为动态网页技术中的新宠。网页初学者应注意的问题一、网页的文件名问题一、网页的文件名问题二、网页中的路径问题二、网页中的路径问题三、网站建设中的版权问题三、网站建设中的版权问题四、服务器和域名的问题四、服务器和域名的问题一、网页的文件名问题1、不允许使用中文或空格后缀名。、不允许使用中文或空格后缀名。Index.htm2、注意半角或全角。、注意半角或全角。3、H二、网页中的路径问题绝对路径绝对路径：如如C盘的盘的My Pictures目录下有一个目录下有一个tp.jpg图像，那么它的路径就是图像，那么它的路径就是c:My picturestp.jpg，其实这种完整地描述文，其实这种完整地描述文件位置的路径就是绝对路径件位置的路径就是绝对路径。如网页如网页index.htmindex.htm中有一张图片中有一张图片tp.jpgtp.jpg，它们，它们的绝对路径是：的绝对路径是：c:Myc:My picturesindex.htmpicturesindex.htm c:Myc:My picturestp.jpgpicturestp.jpg 如果你使用了绝对路如果你使用了绝对路c:Myc:My picturestp.jpgpicturestp.jpg进行图片链接，那么在本地电脑中将一切正常，进行图片链接，那么在本地电脑中将一切正常，因为在因为在c:Myc:My picturespictures下的确存在下的确存在tp.jpgtp.jpg这个图这个图片。但你将它们上传到网站服务器上后，就不会片。但你将它们上传到网站服务器上后，就不会正常了，因为服务器给你划分的存放空间可能在正常了，因为服务器给你划分的存放空间可能在C C盘其他目录中。盘其他目录中。相对路径：顾名思义就是自己相对与目标位置。相对路径：顾名思义就是自己相对与目标位置。如上例：如上例：index.htmindex.htm中连接的中连接的tp.jpgtp.jpg就可就可以使用以使用MyMy picturestp.jpgpicturestp.jpg来定位文件，来定位文件，这样不论将这些文件放到哪里，只要它们这样不论将这些文件放到哪里，只要它们的相对关系没有变，就不会出错。具体的的相对关系没有变，就不会出错。具体的链接方式是这样的：链接方式是这样的：“.My.My picturesimg.jpgpicturesimg.jpg”，其中使用，其中使用“.”来表示上一级目录，来表示上一级目录，“.”表表示上上级的目录，以此类推。示上上级的目录，以此类推。