网站设计与制作流程课件

《网站设计与制作流程课件》由会员分享，可在线阅读，更多相关《网站设计与制作流程课件（41页珍藏版）》请在装配图网上搜索。

1、网站设计与制作流程网站设计与制作流程南方医科大学教育技术中心黄粤锋 huangyf81163 47646 为什么要学习网站建设为什么要学习网站建设? ? 凤凰卫视前主持人，百度凤凰卫视前主持人，百度副总裁梁冬说：传统媒体是副总裁梁冬说：传统媒体是一个人或几个人为几十百千一个人或几个人为几十百千万人提供信息，而网络媒体万人提供信息，而网络媒体却是几十百千万人在为你一却是几十百千万人在为你一个人提供信息！所提供的信个人提供信息！所提供的信息量对比明显。正是看到网息量对比明显。正是看到网络媒体的前景，他毅然的从络媒体的前景，他毅然的从传统媒体翘楚的凤凰卫视，传统媒体翘楚的凤凰卫视，跳槽到了当时还不是

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

3、站建设技术的医学复合型人才将设计与网站建设技术的医学复合型人才将在未来的就业竞争中有更广阔的前景！在未来的就业竞争中有更广阔的前景！ 一、主要内容 网页设计与网站建设概述网页设计与网站建设概述 FLASHFLASH软件运用基础软件运用基础 网页网页FLASHFLASH动画设计动画设计 PHOTOSHOPPHOTOSHOP软件运用基础软件运用基础 PHOTOSHOPPHOTOSHOP在网页制作的运用在网页制作的运用 DreamweaverDreamweaver软件知识软件知识 ASPASP语言基础与动态网页的制作语言基础与动态网页的制作 站点管理与网站维护站点管理与网站维护 第第1章章 概述概述

4、 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 网站功能与定位 网站的功能可以有很多，包括各类宣网站的功能可以有很多，包括各类宣传网站、资料库、信息或商务平台等。传网站、资料库、信息或商务平台等。在设计网站前，要对所要制作的网站在设计网站前，要对所要制作的网站的特点进行分析并选择相应的设计思的特点进行分析并选择相应的设

5、计思路。路。 做网站选材也有误区做网站选材也有误区!（一）以宣传为目的的网站，要求设计（一）以宣传为目的的网站，要求设计美观，能够在网站视觉效果上表达创美观，能够在网站视觉效果上表达创意和使所要宣传的内容一目了然。如意和使所要宣传的内容一目了然。如各类企业的宣传型网站，就需要表现各类企业的宣传型网站，就需要表现该企业的企业文化和特色。这种网站该企业的企业文化和特色。这种网站特点是页面大量运用图片和动画。特点是页面大量运用图片和动画。 如：如：SeptimeSeptime企业网站企业网站、MAKMAK打印耗材企业打印耗材企业 底端采用卡通导航，界面色彩，动态的图片，能有效的提高学生兴趣，吸引学生

6、进入学习底端采用卡通导航，界面色彩，动态的图片，能有效的提高学生兴趣，吸引学生进入学习 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等可视化的网页等可视化的网页编辑工具。利用这些工具人们在可视环境编辑工具。利用这些工具人们在可视环境下编辑制

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

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

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

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

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

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

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

14、反馈表单，留言簿表单，搜索表单和用户注册表单等类型。搜索表单和用户注册表单等类型。八、导航栏：导航栏就是一组超级链接，这组超级八、导航栏：导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。链接的目标就是本站点的主页以及其他重要网页。导航栏的作用就是引导浏览者游历站点，同时首导航栏的作用就是引导浏览者游历站点，同时首页的导航栏，对搜索引擎的收录意义重大。页的导航栏，对搜索引擎的收录意义重大。九、网页中除了以上几种最基本的元素之外，还有九、网页中除了以上几种最基本的元素之外，还有一些其它的常用元素，包括悬停按钮，一些其它的常用元素，包括悬停按钮，JavaJava特效，特效

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

16、reamweaver、 HotDogHotDog 图象处理工具：图象处理工具：PhotoshopPhotoshop、Fireworks MXFireworks MX、 Photo ImpactPhoto Impact 动画制作工具：动画制作工具： FlashFlash、SwishSwish、DirectorDirector。 其中，由其中，由MacromediaMacromedia公司出品公司出品DreamWeaverDreamWeaver、FireworksFireworks、FlashFlash，被人们喻为，被人们喻为“网页制作三剑网页制作三剑客客”。 1.5.1 HTML1.5.1 HT

17、ML基本概念基本概念1. HTML1. HTML的概念：的概念： HTMLHTML是一种描述语言，对是一种描述语言，对WEBWEB页面中显示内页面中显示内容的属性以标签的形式进行描述。客户机上的浏容的属性以标签的形式进行描述。客户机上的浏览器（览器（browserbrowser）对这些描述进行解释将相应页）对这些描述进行解释将相应页面内容正确显示在显示器上。一个面内容正确显示在显示器上。一个WEBWEB页面就是页面就是一个一个HTMLHTML文档文档 。2. HTML2. HTML文档的构成：文档的构成： HTMLHTML文档由三大元素构成：文档由三大元素构成：HTMLHTML元素、元素、HE

18、ADHEAD元素和元素和BODYBODY元素。每个元素又包含各自相应的标元素。每个元素又包含各自相应的标记（属性）。记（属性）。HTMLHTML元素是最外层的元素，里面包元素是最外层的元素，里面包含含HEADHEAD元素和元素和BODYBODY元素。元素。HEADHEAD元素中包含对文档基本信息（文档标题，文档搜索关键字、元素中包含对文档基本信息（文档标题，文档搜索关键字、文档生成器等）描述的标记。文档生成器等）描述的标记。BODYBODY元素是文档的主体部分，包含元素是文档的主体部分，包含有对网页元素（文本、表格、图片、动画、链接等）描述的标记。有对网页元素（文本、表格、图片、动画、链接等）

19、描述的标记。HTMLHTML中标记一般成对。中标记一般成对。如：如： HTML等，但也有一些不成对。等，但也有一些不成对。 HTMLHTML文档的结构形式如下：文档的结构形式如下： HTML VERSION =“-/W3C/DTD HTML 3.2 FINAL/EN” 页面信息的描述页面信息的描述 页面元素的描述页面元素的描述 3. HTML 3. HTML 文档的编辑文档的编辑 HTML HTML 文档是普通文本文档是普通文本 ( ASCII) ( ASCII) 文件文件, , 它可以用任意编缉器它可以用任意编缉器( (如如windowswindows中的记事中的记事本、写字板本、写字板,

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

21、浏览器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元素

22、开始和结束的标志元素开始和结束的标志。 （2 2）DIVDIV层标记层标记 （3 3）文本标记）文本标记 （4 4）段落标记）段落标记 （5 5）表格标记）表格标记 （6 6）图象标记）图象标记 （7 7）下拉表单标记）下拉表单标记 （8 8）链接）链接 （LinkingLinking）标记）标记 （9 9）多媒体标记）多媒体标记 （1010）移动文字标记）移动文字标记 1.6 动态网页技术介绍动态网页的概念 动态网页，与网页上的各种动画、滚动字幕等视动态网页，与网页上的各种动画、滚动字幕等视觉上的觉上的“动态效果动态效果”没有直接关系。没有直接关系。 从网站浏览者的角度来看，无论是动态网页还

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

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

25、ive Server PagesMicrosoft Active Server Pages）是一套微软）是一套微软开发的服务器端脚本环境，开发的服务器端脚本环境， ASP ASP 内含于内含于 IIS 3.0 IIS 3.0 和和 4.0 4.0 之中之中 , , 通过通过 ASP ASP 我们可以结合我们可以结合 HTML HTML 网页、网页、 ASP ASP 指令指令和和 ActiveX ActiveX 元件建立动态、交互且高效的元件建立动态、交互且高效的 WEB WEB 服务器应服务器应用程序。有了用程序。有了 ASP ASP 你就不必担心客户的浏览器是否能运你就不必担心客户的浏览器是

26、否能运行你所编写的代码，因为所有的程序都将在服务器端执行，行你所编写的代码，因为所有的程序都将在服务器端执行，包括所有嵌在普通包括所有嵌在普通 HTML HTML 中的脚本程序。当程序执行完毕中的脚本程序。当程序执行完毕后，服务器仅将执行的结果返回给客户浏览器，这样也就后，服务器仅将执行的结果返回给客户浏览器，这样也就减轻了客户端浏览器的负担，大大提高了交互的速度。减轻了客户端浏览器的负担，大大提高了交互的速度。 ASPASP应用程序可以手工编码制作，也可以通过应用程序可以手工编码制作，也可以通过Dreamweaver Dreamweaver MXMX等可视化工具创作生成。等可视化工具创作生成

27、。 ASPASP的具体内容将在后面的动态网页设计中讲解。的具体内容将在后面的动态网页设计中讲解。 (2)PHP (2)PHP技术技术 (3)JSP技术技术 JSPJSP与与MicrosoftMicrosoft的的ASPASP技术非常相似。两者都提供在技术非常相似。两者都提供在HTMLHTML代码中混合某种程序代码、由语言引擎解释执行程序代码中混合某种程序代码、由语言引擎解释执行程序代码的功能。与代码的功能。与 ASP ASP 一样，一样， JSP JSP 中的中的 Java Java 代码均在服代码均在服务器端执行。因此，在浏览器中使用务器端执行。因此，在浏览器中使用“查看源文件查看源文件”菜

28、单是菜单是无法看到无法看到 JSP JSP 源代码的，只能看到结果源代码的，只能看到结果 HTML HTML 代码。代码。 JSPJSP与与ASPASP虽然有很多相识之处，但两者也有重要区别：虽然有很多相识之处，但两者也有重要区别：第一，第一，ASPASP的编程语言是的编程语言是VBScriptVBScript之类的脚本语言，之类的脚本语言，JSPJSP使使用的是用的是JavaJava；第二，两种语言引擎用完全不同的方式处理；第二，两种语言引擎用完全不同的方式处理页面中嵌入的程序代码。在页面中嵌入的程序代码。在ASPASP下，下，VBScriptVBScript代码被代码被ASPASP引引擎解

29、释执行；在擎解释执行；在JSPJSP下，代码被编译成下，代码被编译成ServletServlet并由并由JavaJava虚虚拟机执行处理代码。拟机执行处理代码。 (4)(4)技术技术 ASP.net ASP.net 是一种建立在通用语言上的是一种建立在通用语言上的程序构架，能被用于一台程序构架，能被用于一台WebWeb服务器来服务器来建立强大的建立强大的WebWeb应用程序。应用程序。ASP.netASP.net提提供许多比现在的供许多比现在的WebWeb开发模式强大的的开发模式强大的的优势。优势。 它是微软继它是微软继ASPASP之后推出的又一标准之后推出的又一标准, ,以其功能强大以其功能

30、强大, , 安全以及系统兼容性安全以及系统兼容性好等特点成为动态网页技术中的新宠。好等特点成为动态网页技术中的新宠。网页初学者应注意的问题 一、网页的文件名问题一、网页的文件名问题 二、网页中的路径问题二、网页中的路径问题 三、网站建设中的版权问题三、网站建设中的版权问题 四、服务器和域名的问题四、服务器和域名的问题一、网页的文件名问题 1、不允许使用中文或空格后缀名。、不允许使用中文或空格后缀名。 Index.htm 2、注意半角或全角。、注意半角或全角。 3、bbs.tcmer Home.tcmer 二、网页中的路径问题 绝对路径绝对路径 ：如如C盘的盘的My Pictures目录下有一个

31、目录下有一个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.jpgpictur

32、estp.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”，其中使用，其中使用“.”来表示上一级目录，来表示上一级目录，“.”表表示上上级的目录，以此类推。示上上级的目录，以此类推。