网站设计与制作流程

1、网站设计与制作流程 为什么要学习网站建设为什么要学习网站建设? ? 凤凰卫视前主持人，百度副总凤凰卫视前主持人，百度副总裁梁冬说：传统媒体是一个人裁梁冬说：传统媒体是一个人或几个人为几十百千万人提供或几个人为几十百千万人提供信息，而网络媒体却是几十百信息，而网络媒体却是几十百千万人在为你一个人提供信息！千万人在为你一个人提供信息！所提供的信息量对比明显。正所提供的信息量对比明显。正是看到网络媒体的前景，他毅是看到网络媒体的前景，他毅然的从传统媒体翘楚的凤凰卫然的从传统媒体翘楚的凤凰卫视，跳槽到了当时还不是太出视，跳槽到了当时还不是太出名的百度公司。名的百度公司。 2005年年8月月5日日,百度

2、在美百度在美国国NASDAQ上市上市,股票发股票发行价行价：27美元美元 ,上市当天上市当天升破升破150美元美元! 凭借凭借“竞价排名竞价排名”产品产品的推出，百度的推出，百度2006年全年全年净利润比年净利润比2005年增长年增长533.9%，达到约，达到约3.018亿元人民币。亿元人民币。 随着互联网在人们生活中的地位日渐重随着互联网在人们生活中的地位日渐重要，尤其是校园、医院信息化的普及，我们要，尤其是校园、医院信息化的普及，我们不难想象，掌握网络知识，懂得网页设计与不难想象，掌握网络知识，懂得网页设计与网站建设技术的医学复合型人才将在未来的网站建设技术的医学复合型人才将在未来的就业竞

3、争中有更广阔的前景！就业竞争中有更广阔的前景！ 一、主要内容网页设计与网站建设概述网页设计与网站建设概述 FLASHFLASH软件运用基础软件运用基础 网页网页FLASHFLASH动画设计动画设计PHOTOSHOPPHOTOSHOP软件运用基础软件运用基础PHOTOSHOPPHOTOSHOP在网页制作的运用在网页制作的运用 DreamweaverDreamweaver软件知识软件知识ASPASP语言基础与动态网页的制作语言基础与动态网页的制作 站点管理与网站维护站点管理与网站维护 第第1章章 概述概述 1.1 1.1 网站设计网站设计流程流程1.2 1.2 网页设计的基本方式网页设计的基本方式

4、 1.3 1.3 网页中的常见元素网页中的常见元素 1.4 1.4 网页元素的创作与编辑工具网页元素的创作与编辑工具 1.5 HTML1.5 HTML基础知识基础知识 1.6 1.6 动态网页的支持技术动态网页的支持技术 1.1.1 网站功能与定位 网站的功能可以有很多，包括各类宣网站的功能可以有很多，包括各类宣传网站、资料库、信息或商务平台等。传网站、资料库、信息或商务平台等。在设计网站前，要对所要制作的网站在设计网站前，要对所要制作的网站的特点进行分析并选择相应的设计思的特点进行分析并选择相应的设计思路。路。 做网站选材也有误区做网站选材也有误区!（一）以宣传为目的的网站，要求设计（一）以

5、宣传为目的的网站，要求设计美观，能够在网站视觉效果上表达创美观，能够在网站视觉效果上表达创意和使所要宣传的内容一目了然。如意和使所要宣传的内容一目了然。如各类企业的宣传型网站，就需要表现各类企业的宣传型网站，就需要表现该企业的企业文化和特色。这种网站该企业的企业文化和特色。这种网站特点是页面大量运用图片和动画。特点是页面大量运用图片和动画。 如：如：SeptimeSeptime企业网站企业网站、MAKMAK打印耗材企业打印耗材企业（二）以信息传递为目的的形式（二）以信息传递为目的的形式 主要强调信息量和信息搜索的方便快主要强调信息量和信息搜索的方便快捷，主要以文本为表现形式。捷，主要以文本为表

6、现形式。 如新浪如新浪,搜狐等门户网站等搜狐等门户网站等. ( (三三) )其他功能性网站其他功能性网站 强调网站的功能强调网站的功能, ,具有一定的用户针对性和具有一定的用户针对性和 功能针对性。功能针对性。 如各类商务网站（如各类商务网站（BtoBBtoB，BtoCBtoC等）；等）； taobao ; taobao ; 各类学习网站，网络词典，网络图书馆：各类学习网站，网络词典，网络图书馆： 如；如；底端采用卡通导航，界面色彩，动态的图片，能有效的提高学生兴趣，吸引学生进入学习底端采用卡通导航，界面色彩，动态的图片，能有效的提高学生兴趣，吸引学生进入学习 1.2 网页程序的制作方式 1.

7、2.1 1.2.1 手工编码方式手工编码方式 1.2.2 1.2.2 可视化工具方式可视化工具方式 1.2.3 1.2.3 编码和可视化工具结合方式编码和可视化工具结合方式 1.2.1 手工编码方式 网页是由网页是由HTMLHTML（HYPER TEXT MARKUP LANGUAGEHYPER TEXT MARKUP LANGUAGE）超文）超文本标记语言编码的文本文档，设计制作网页的过程就是本标记语言编码的文本文档，设计制作网页的过程就是生成生成HTMLHTML代码的过程。在代码的过程。在WWWWWW（World Wide Web World Wide Web ）发展）发展的初期人们制作网

8、页是通过直接编写的初期人们制作网页是通过直接编写HTMLHTML代码来实现的。代码来实现的。 手工编码制作网页效率低，调试复杂，对设计人手工编码制作网页效率低，调试复杂，对设计人员的要求高员的要求高 。因此，对大多数设计人员来说比较困。因此，对大多数设计人员来说比较困难。但手工编码可以灵活地制作出丰富的网页效果。难。但手工编码可以灵活地制作出丰富的网页效果。（浏览器（浏览器 查看查看 源文件）源文件） 1.2.2 可视化工具方式随着网页制作技术的发展，出现了如随着网页制作技术的发展，出现了如FrontPageFrontPage、DreamweaverDreamweaver等可视化的网页编等可视

9、化的网页编辑工具。利用这些工具人们在可视环境下编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，由编辑工具自动生成对应辑制作网页元素，由编辑工具自动生成对应的网页代码。的网页代码。利用可视化工具编辑网页操作简单直观，调利用可视化工具编辑网页操作简单直观，调试方便，是大众化的网页编辑方式。但利用可试方便，是大众化的网页编辑方式。但利用可视化工具在制作一些特殊网页效果上有一定的视化工具在制作一些特殊网页效果上有一定的局限性。局限性。 1.2.3 编码和可视化工具结合方式 编码和可视化工具结合是一种比较成熟的网页制作方式。编码和可视化工具结合是一种比较成熟的网页制作方式。图为的代码与设计拆分界

10、面。图为的代码与设计拆分界面。 编码和可视化工具结合具体过程为：一般的编码和可视化工具结合具体过程为：一般的网页元素通过可视化工具编辑制作，一些特殊网页元素通过可视化工具编辑制作，一些特殊的网页效果通过插入代码生成。这种方式效率的网页效果通过插入代码生成。这种方式效率高、调试方便而且可以实现丰富的网页效果，高、调试方便而且可以实现丰富的网页效果，但要求设计人员既要熟悉但要求设计人员既要熟悉HtmlHtml语言又能运用可语言又能运用可视化工具。视化工具。除了上面三种基本网页设计制作方式外，我除了上面三种基本网页设计制作方式外，我们还可以通过修改已有网页代码生成自己的网们还可以通过修改已有网页代码

11、生成自己的网页。页。 1.3 1.3 网页中的常见元素网页中的常见元素 网页中的常见元素主要包括以下几种类网页中的常见元素主要包括以下几种类型：文本、图象、动画、视频音乐、超链接、型：文本、图象、动画、视频音乐、超链接、表格、表单和各类控件等。表格、表单和各类控件等。 一、文本：文字能准确地表达信息的内一、文本：文字能准确地表达信息的内容和含义，且同样信息量的文本字节往往比容和含义，且同样信息量的文本字节往往比图象小，比较适合大信息量的网站。图象小，比较适合大信息量的网站。 二、图像：在网页中使用二、图像：在网页中使用GIF, JPEG(JPG), PNGGIF, JPEG(JPG), PNG

12、三种图三种图象格式，其中使用最广泛的是象格式，其中使用最广泛的是GIFGIF和和JPEGJPEG两种格式。两种格式。 说明：当用户使用所见即所得的网页设计软件在网页上说明：当用户使用所见即所得的网页设计软件在网页上添加其他非添加其他非GIF, JPEG, GIF, JPEG, 或或PNGPNG格式的图片并保存时，这些格式的图片并保存时，这些软件通常会自动将少于软件通常会自动将少于8 8位颜色的图片转化为位颜色的图片转化为GIFGIF格式，或格式，或将多于将多于8 8位颜色的图片转化为位颜色的图片转化为JPEG.JPEG.另外，另外，JPGJPG图片是静态图片是静态图，图，GIFGIF则可以是动

13、态图片。则可以是动态图片。三、动画：主要指由三、动画：主要指由FLASHFLASH软件制作的动画软件制作的动画, ,由于其是准由于其是准流媒体文件流媒体文件, ,加上矢量动画加上矢量动画, ,文件小文件小, ,使其在网络运行具有使其在网络运行具有强大优势强大优势, ,是网页设计者必学的软件。是网页设计者必学的软件。四、声音和视频：用于网络的声音文件的格式非常多，常用的四、声音和视频：用于网络的声音文件的格式非常多，常用的有有MIDIMIDI、WAVWAV、MP3MP3和和AIFAIF等。很多浏览器不要插件也等。很多浏览器不要插件也可以支持可以支持MIDI,WAVMIDI,WAV和和AIFAIF

14、格式的文件，而格式的文件，而MP3MP3和和RMRM格格式的声音文件则需要专门的浏览器播放。视频文件均式的声音文件则需要专门的浏览器播放。视频文件均需插件（如需插件（如REALONEREALONE、MEDIA PLAYERMEDIA PLAYER）支持，用于）支持，用于网络的视频格式主要有网络的视频格式主要有ASFASF、WMVWMV、RMRM等流媒体格式。等流媒体格式。五、超级链接：五、超级链接：从一个网页指向另一个目的端的从一个网页指向另一个目的端的链接。链接。六、表格：在网页中表格用来控制网页中信息的布六、表格：在网页中表格用来控制网页中信息的布局方式。这包括两方面：局方式。这包括两方面

15、： 1 1、是使用行和列的形式来布局文本和图像以及、是使用行和列的形式来布局文本和图像以及其他的列表化数据；其他的列表化数据； 2 2、是可以使用表格来精确控制各种网页元素在、是可以使用表格来精确控制各种网页元素在网页中出现的位置。网页中出现的位置。七、表单：七、表单：用来接受用户在浏览器端的输入，然用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。表单后将这些信息发送到用户设置的目标端。表单由不同功能的表单域组成，最简单的表单也要由不同功能的表单域组成，最简单的表单也要包含一个输入区域和一个提交按钮。包含一个输入区域和一个提交按钮。 根据表单功能与处理方式的不同，通常可以根

16、据表单功能与处理方式的不同，通常可以将表单分为用户反馈表单，留言簿表单，搜将表单分为用户反馈表单，留言簿表单，搜索表单和用户注册表单等类型。索表单和用户注册表单等类型。八、导航栏：导航栏就是一组超级链接，这组超级链接的目标八、导航栏：导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。导航栏的作用就是就是本站点的主页以及其他重要网页。导航栏的作用就是引导浏览者游历站点，同时首页的导航栏，对搜索引擎的引导浏览者游历站点，同时首页的导航栏，对搜索引擎的收录意义重大。收录意义重大。九、网页中除了以上几种最基本的元素之外，还有一些其九、网页中除了以上几种最基本的元素之外，还有一

17、些其它的常用元素，包括悬停按钮，它的常用元素，包括悬停按钮，JavaJava特效，特效，ActiveXActiveX等各等各种特效。它们不仅能点缀网页，使网页更活泼有趣，种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐，电子商务等方面也有着不可忽视的而且在网上娱乐，电子商务等方面也有着不可忽视的作用。作用。 小技巧小技巧:网站内容的搜集方式网站内容的搜集方式 一、文本录入技巧一、文本录入技巧 二、搜索引擎使用技巧二、搜索引擎使用技巧 三、破解网页禁止复制技巧三、破解网页禁止复制技巧 四、四、FLASH及视频下载技巧及视频下载技巧 1.4 1.4 网页元素的创作与编辑工具 网页编辑工

18、具网页编辑工具: FrontPage: FrontPage、 DreamweaverDreamweaver、 HotDogHotDog 图象处理工具：图象处理工具：PhotoshopPhotoshop、Fireworks MXFireworks MX、 Photo ImpactPhoto Impact 动画制作工具：动画制作工具： FlashFlash、SwishSwish、DirectorDirector。 其中，由其中，由MacromediaMacromedia公司出品公司出品DreamWeaverDreamWeaver、FireworksFireworks、FlashFlash，被人们喻

19、为，被人们喻为“网页制作三剑客网页制作三剑客”。 1.5.1 HTML1.5.1 HTML基本概念基本概念1. HTML1. HTML的概念：的概念： HTMLHTML是一种描述语言，对是一种描述语言，对WEBWEB页面中显示内容的属性页面中显示内容的属性以标签的形式进行描述。客户机上的浏览器（以标签的形式进行描述。客户机上的浏览器（browserbrowser）对这些描述进行解释将相应页面内容正确显示在显示器对这些描述进行解释将相应页面内容正确显示在显示器上。一个上。一个WEBWEB页面就是一个页面就是一个HTMLHTML文档文档 。2. HTML2. HTML文档的构成：文档的构成： HT

20、MLHTML文档由三大元素构成：文档由三大元素构成：HTMLHTML元素、元素、HEADHEAD元素元素和和BODYBODY元素。每个元素又包含各自相应的标记（属元素。每个元素又包含各自相应的标记（属性）。性）。HTMLHTML元素是最外层的元素，里面包含元素是最外层的元素，里面包含HEADHEAD元素元素和和BODYBODY元素。元素。HEADHEAD元素中包含对文档基本信息（文档标题，文档搜索关键字、文档元素中包含对文档基本信息（文档标题，文档搜索关键字、文档生成器等）描述的标记。生成器等）描述的标记。BODYBODY元素是文档的主体部分，包含有对网页元素元素是文档的主体部分，包含有对网页

21、元素（文本、表格、图片、动画、链接等）描述的标记。（文本、表格、图片、动画、链接等）描述的标记。HTMLHTML中标记一般成对。中标记一般成对。如：如： HTML等，但也有一些不成对。等，但也有一些不成对。 HTMLHTML文档的结构形式如下：文档的结构形式如下： 页面信息的描述页面信息的描述 页面元素的描述页面元素的描述 3. HTML 3. HTML 文档的编辑文档的编辑 HTML HTML 文档是普通文本文档是普通文本 ( ASCII) ( ASCII) 文件文件, , 它可它可以用任意编缉器以用任意编缉器( (如如windowswindows中的记事本、写字中的记事本、写字板板, Ma

22、cintosh , Macintosh 中的中的BBEditBBEdit等等) )生成。生成。 你也可你也可以使用字处理软件以使用字处理软件, , 不过要记住存文件时要存成不过要记住存文件时要存成“带回车的纯文本带回车的纯文本”。早期网页制作的过程就。早期网页制作的过程就是直接书写是直接书写HTMLHTML代码来定义页面元素的过程。代码来定义页面元素的过程。 1.5.2 HTML 1.5.2 HTML的基本语法结构的基本语法结构1. HTML1. HTML元素的标记元素的标记 HTMLHTML标记标记 HTMLHTML标记是对整个文档属性的描述，即告诉浏览器标记是对整个文档属性的描述，即告诉浏

23、览器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元素开

24、始和结束的标志。元素开始和结束的标志。 （2 2）DIVDIV层标记层标记 （3 3）文本标记）文本标记 （4 4）段落标记）段落标记 （5 5）表格标记）表格标记 （6 6）图象标记）图象标记 （7 7）下拉表单标记）下拉表单标记 （8 8）链接）链接 （LinkingLinking）标记）标记 （9 9）多媒体标记）多媒体标记 （1010）移动文字标记）移动文字标记 1.6 动态网页技术介绍 动态网页是与静态网页相对应的，也就是说，网页动态网页是与静态网页相对应的，也就是说，网页 URL的后缀不是的后缀不是.htm、.html、.shtml、.xml等静态网页的常见等静态网页的常见形式，而

25、是以形式，而是以.asp、.jsp、.php、.perl、.cgi等形式为后缀，等形式为后缀，并且在动态网页网址中有一个标志性的符号并且在动态网页网址中有一个标志性的符号“?”，如，如有这样一个动态网页的地址为有这样一个动态网页的地址为: 这就是一个典型的动态网页这就是一个典型的动态网页URL形式。形式。动态网页的概念 动态网页，与网页上的各种动画、滚动字幕等视觉上动态网页，与网页上的各种动画、滚动字幕等视觉上的的“动态效果动态效果”没有直接关系。没有直接关系。 从网站浏览者的角度来看，无论是动态网页还是静态从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但

26、从网站网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。动态开发、管理、维护的角度来看就有很大的差别。动态网页的一般特点简要归纳如下：网页的一般特点简要归纳如下：（1）以数据库技术为基础，大大降低网站维护的工作量）以数据库技术为基础，大大降低网站维护的工作量;（2）采用动态网页技术的网站可以实现更多交互功能；）采用动态网页技术的网站可以实现更多交互功能；（3）不是独立存在于服务器上的网页文件，当用户请求时服务器才返）不是独立存在于服务器上的网页文件，当用户请求时服务器才返回一个完整的网页回一个完整的网页; 1.6.2 动态网页的分类 网页技术日新月异，为了

27、适应互联网网页技术日新月异，为了适应互联网对网站功能以及安全性越来越高的要对网站功能以及安全性越来越高的要求，包括微软公司在内，推出了几个求，包括微软公司在内，推出了几个动态网页技术，按照程序类型分，可动态网页技术，按照程序类型分，可以分为以分为ASP、JSP、PHP、 CGI 和和ASP.NET等。使用不同标准编写的程等。使用不同标准编写的程序要求服务器上有相应的服务器软件序要求服务器上有相应的服务器软件支持。支持。 (1)asp (1)asp技术技术 ASP ASP （Microsoft Active Server PagesMicrosoft Active Server Pages）是一

28、套微软开发的）是一套微软开发的服务器端脚本环境，服务器端脚本环境， ASP ASP 内含于内含于 IIS 3.0 IIS 3.0 和和 4.0 4.0 之中之中 , , 通过通过 ASP ASP 我们可以结合我们可以结合 HTML HTML 网页、网页、 ASP ASP 指令和指令和 ActiveX ActiveX 元件建立元件建立动态、交互且高效的动态、交互且高效的 WEB WEB 服务器应用程序。有了服务器应用程序。有了 ASP ASP 你就不你就不必担心客户的浏览器是否能运行你所编写的代码，因为所有的程序必担心客户的浏览器是否能运行你所编写的代码，因为所有的程序都将在服务器端执行，包括所

29、有嵌在普通都将在服务器端执行，包括所有嵌在普通 HTML HTML 中的脚本程序。当中的脚本程序。当程序执行完毕后，服务器仅将执行的结果返回给客户浏览器，这程序执行完毕后，服务器仅将执行的结果返回给客户浏览器，这样也就减轻了客户端浏览器的负担，大大提高了交互的速度。样也就减轻了客户端浏览器的负担，大大提高了交互的速度。 ASPASP应用程序可以手工编码制作，也可以通过应用程序可以手工编码制作，也可以通过Dreamweaver MXDreamweaver MX等可视化工具创作生成。等可视化工具创作生成。 ASPASP的具体内容将在后面的动态网页设计中讲解。的具体内容将在后面的动态网页设计中讲解。

30、 (2)PHP (2)PHP技术技术 PHP（Hypertext Preprocesso超文本预处理器）是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的WEB站点。PHP自从诞生以来，以其简单的语法、强大的功能讯速得到了广泛的应用。PHP除了能够操作页面，还能发送HTTP的标题；它不需要特殊的开发环境和IDE；它不仅支持多种数据库，还支持多种通信协议；另外，PHP还具有极强的兼容性。PHP是完全免费的，不用花钱，可以从PHP官方站点( :/ )自由下载。 PHP在大多数Unix平台，GUN/Linux和微软Windows平台上均可以运行。 (3)J

31、SP技术技术 JSPJSP与与MicrosoftMicrosoft的的ASPASP技术非常相似。两者都提供在技术非常相似。两者都提供在HTMLHTML代码代码中混合某种程序代码、由语言引擎解释执行程序代码的功能。与中混合某种程序代码、由语言引擎解释执行程序代码的功能。与 ASP ASP 一样，一样， JSP JSP 中的中的 Java Java 代码均在服务器端执行。因此，在浏览代码均在服务器端执行。因此，在浏览器中使用器中使用“查看源文件查看源文件”菜单是无法看到菜单是无法看到 JSP JSP 源代码的，只能看源代码的，只能看到结果到结果 HTML HTML 代码。代码。 JSPJSP与与ASPASP虽然有很多相识之处，但两者也有重要区别：第一，虽然有很多相识之处，但两者也有重要区别：第一，ASPASP的编程语言是的编程语言是VBScriptVBScript之类的脚本语言，之类的脚本语言，JSPJSP使用的是使用的是JavaJava；第二，两种语言引擎用完全不同的方式处理页面中嵌入的程序代码。第二，两种语言引擎用完全不同的方式处理页面中嵌入的程序代码。在在ASPASP下，下，VBScriptVBScript代码被代码被ASPASP引擎解释执行；在引擎解释执行；在JSPJSP下，代码被编译下，代码