《网页设计与制作教程与实训》全套ppt电子课件教案-第1章--网页制作基本知识.ppt

《《网页设计与制作教程与实训》全套ppt电子课件教案-第1章--网页制作基本知识.ppt》由会员分享，可在线阅读，更多相关《《网页设计与制作教程与实训》全套ppt电子课件教案-第1章--网页制作基本知识.ppt（84页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益网页设计与制作教程与实训网页设计与制作教程与实训 wangyeshejiyuzhizuojiaochengyushixunwangyeshejiyuzhizuojiaochengyushixunwangyeshejiyuzhizuojiaochengyushixunwangyeshejiyuzhizuojiaochengyushixun 网页设计与制作教程与实训网页设计与制作教程与实

2、训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益第第1 1章章 网页制作基本知识网页制作基本知识n1.1 与网页制作相关的术语与网页制作相关的术语 n1.2 HTML简介简介n1.3 网页界面的构成要素网页界面的构成要素n1.4 网页开发的流程网页开发的流程n1.5 网站设计的要求网站设计的要求 网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，

3、保障用人单位和职工的合法权益 l l网站开发的流程网站开发的流程l l网站设计的要求网站设计的要求本章要点本章要点 网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.1 与网页制作相关的术语与网页制作相关的术语 1 1网站与网页网站与网页网站与网页网站与网页 当当我我们们在在浏浏览览器器中中输输入入一一个个已已知知网网址址后后，即即可可打打开开一一个个页页面面，让让我我们们了了解解有有关关这这个个网网址址的的一一些些信信息息和和内

4、内容容，这这个个页页面面就就是是我我们们通通常常所所说说的的网网页页，而而打打开开网网络络由由网网址址进进入入时时第第一一个个看看到到的的页页面面，我我们们通通常常把把它它称称为为首首页页（home page）或或主主页页，所所有有的的信信息息都都会会清清楚楚地地整整理理在在这这个个页页面面上上，目目的的就就是是为为了了让让用用户户在在使使用用这这个个网网页页时时能能快快速速链链接接到到需需要要的的资资料料，它它既既是是一一个个单单独独的的网网页页，同同一一般般网网页页一一样样可可以以存存放放各各种种信信息息,又又是是一一个个特特殊殊的的网网页页，是是整整个个Web站站点点的的起起始始点点和和

5、汇汇总总点点，是是用用户户开开始始浏浏览览站站点点的的“入入口口处处”。由首页所延伸下去的页面，就是一个个网页。由首页所延伸下去的页面，就是一个个网页。网网页页又又称称Web页页面面，是是网网络络文文件件的的组组成成部部分分，是是可可以以被被浏浏览览器器访访问问的的单单个个HTML超超文文本本文文件件,它它由由文文字字、表表格格、图图片片、声声音音、视视频频以以及及各各种种功功能能按按钮钮等等组组成成，这这些些文文字字、图图片片、按按钮钮往往往往又又是是指指向向别别的的主主页页的的连连接接点点。在在Internet网网上上，这这些些连连接接点点又又叫叫超超级级链链接接。所所有有由由首首页页链链

6、接接出出去去的的网网页页集集合合起起来来就就是是网网站站。即即在在设设计计时时，将将某某个个主主题题明明确确后后，再再按按所所需需的的单单元元、内内容容经经过过安安排排，化化为为各各个个不不同同的的网网页页，在在同同一一个个结结构构及及诉诉求求下下出出现现的的集集合合体体，就就是是网网站站（Web Site）。有有主主题题性性的的网网站站是是要要经经过过规规划划和和构构架架过过的的网网站站。在在互互联联网网上上，Web站站点点由由一一组组相相互互关关联联的的页页面面组组成成，如如果果把把整整个个WWW信信息息世世界界看看作作一个村子，那么一个一个村子，那么一个Web站点可以理解成一个家庭。站点

7、可以理解成一个家庭。网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.1 与网页制作相关的术语与网页制作相关的术语 2 2服务器（服务器（服务器（服务器（ServerServer）与浏览器（）与浏览器（）与浏览器（）与浏览器（BrowserBrowser）服服务务器器是是局局域域网网的的核核心心设设备备,它它管管理理着着局局域域网网中中的的各各种种资资源源,它它的的基基本本功功能能是是网网络络通通信信服服务务、管管理理和和提提供供

8、网网络络共共享享资资源源，以以及及进进行行网网络络管管理理。服服务务器器实实质质是是一一台台配配置置较较高高的的计计算算机机。不不同同的的电电脑脑操操作作系系统统，有有不不同同的的适适用用服服务务器器软软件件，如如：微微软软视视窗窗windows XP Professional操操作作系系统统适适用用的的服服务务器器软软件件IIS5.1网网站站上上动动态态的的数据，必须要通过网站服务器的服务才能运作。数据，必须要通过网站服务器的服务才能运作。用用于于查查看看Web站站点点的的软软件件被被称称作作浏浏览览器器。它它是是WWW的的窗窗口口,用用户户可可以以利利用用浏浏览览器器从从一一个个文文档档跳

9、跳转转到到另另一一个个文文档档实实现现对对整整个个网网站站的的浏浏览览,也也可可以以下下载载并并解解释释HTML文文档档中中所所描描述述的的动动画画、声声音音、文文本本、图图形形、图图像像，并并能能实实现现电电子子邮邮件件查查看看、下下载载文文件件、FTD等等功功能能。它它有有多多种种版版本本,如如微微软软英英特特尔尔版版本本、苹苹果果电电脑脑版版本本等等，大大多多数数浏浏览览者者（目目前前已已经经超超过过90）使使用用Microsoft Internet Explorer(简简称称IE)浏浏览览器器.还还有有一一些些其其他他的的浏浏览览器器，不不同同版版本本的的浏浏览览器器功功能能大大体体一

10、一样样，主主要要区区别别在在于于各各功功能区在版面上的排列不同。能区在版面上的排列不同。网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益 3.3.远程站点远程站点远程站点远程站点(Remote Site)(Remote Site)和本地站点（和本地站点（和本地站点（和本地站点（Local SiteLocal Site）远远程程站站点点是是指指服服务务器器上上组组成成的的Web站站点点。本本地地站站点点是是指指与与远远程程站站点点上的

11、文件对应的本地磁盘上的文件。上的文件对应的本地磁盘上的文件。在制作网页时，首先要定义一个本地站点。作为一个网站，里面有在制作网页时，首先要定义一个本地站点。作为一个网站，里面有很多网页文件、图片、很多网页文件、图片、Flash动画等，如果不进行管理归档，分散在硬盘动画等，如果不进行管理归档，分散在硬盘的各个地方的各个地方,就无法方便地进行网页发布。定义本地站点，就是在硬盘就无法方便地进行网页发布。定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。一般在设计网页之前，先要以设计的网页

12、的名称新建页的制作和管理。一般在设计网页之前，先要以设计的网页的名称新建一个文件夹，把它放在电脑中常用来存储文件的磁盘中，如一个文件夹，把它放在电脑中常用来存储文件的磁盘中，如“我的网页我的网页”、“个人网页个人网页”等的文件夹里，也可以根据自己的习惯放置文件。等的文件夹里，也可以根据自己的习惯放置文件。1.1 与网页制作相关的术语与网页制作相关的术语 网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益 4.4.统一资源定位器统一资源

13、定位器统一资源定位器统一资源定位器URLURL URL即即Uniform Resource Locator（统一资源定位器）的缩写。（统一资源定位器）的缩写。用来指明主机或文件在用来指明主机或文件在Internet上的位置，一个上的位置，一个URL就是一个资源就是一个资源在在Internet上的具体位置，上的具体位置，URL由由Internet资源类型、服务器地址、资源类型、服务器地址、端口及路径组成，如：端口及路径组成，如：http:/ 与网页制作相关的术语与网页制作相关的术语 网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘

14、用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.2 HTML简介简介1.2.1 HTML基本格式及特点基本格式及特点1.2.2 HTML的基本语句的基本语句 1.HTML 标记符标记符 2.“文件头文件头”标记符标记符 3.“文件标题文件标题”标记符标记符 4.“文件体文件体”标记符标记符 5.“标题标题”标记符标记符 6.字体和段落标记符字体和段落标记符 7.图像标记符图像标记符 8.表格标记符表格标记符 9.框架标记符框架标记符 10.层标记符层标记符 11.表单标记符表单标记符 网页设计与制作教程与实训网页设计与制作教程与实训第第1

15、1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益 1.1.文字文字文字文字 文文字字是是网网页页最最基基本本的的构构成成要要素素，一一个个网网页页上上大大部部分分是是由由文文字字构构成成的的，由由于于文文字字所所表表达达内内容容比比较较清清楚楚、直直接接,而而且且相相对对占占用用网网页页版版面面面面积积较较小小，使使网网页页所所表表达达的的信信息息量量加加大大，所所以以网网上上用用来来表表达达内内容容或或链链接接的的大大部部分分是是文文字字。文文字字也也称称文文本本，网网页页有有90左左

16、右右是是由由文文本本组成。首页上的文本基本上都是用来链接用的。组成。首页上的文本基本上都是用来链接用的。1.3 网页界面的构成要素网页界面的构成要素 网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益2.图形图像图形图像 图图形形和和图图像像也也是是网网页页主主要要的的构构成成要要素素，它它有有动动态态和和静静态态之之分分，和和文文字字的的功功能能一一样样，也也是是基基本本上上用用来来链链接接用用的的，它它比比文文字字看看上上去去更更

17、加加直直观观，更更让让人人容容易易理理解解内内容容。图图形形可可提提高高站站点点的的访访问问率率，但但不不能能因因此此而而在在网网页页上上加加入入过过多多的的图图片片，这这样样会会适适得得其其反反，一一方方面面由由于于图图形形占占网网页页空空间间较较大大，使使网网页页信信息息量量相相对对减减少少；另另一一方方面面由由于于图图片片较较多，使网页显示的速度降低，用户浏览网页花费的时间较长。多，使网页显示的速度降低，用户浏览网页花费的时间较长。Web图图形形的的文文件件标标准准格格式式是是JPG、GIF和和PNG，对对颜颜色色具具有有平平滑滑渐渐变变的的图图像像使使用用JPG格格式式，如如大大多多数

18、数照照片片；对对于于以以单单一一颜颜色色为为主主的图像，使用的图像，使用GIF格式。格式。1.3 网页界面的构成要素网页界面的构成要素 网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.3 网页界面的构成要素网页界面的构成要素 3.3.超链接超链接超链接超链接 超超链链接接由由两两个个端端点点及及一一个个方方向向构构成成。通通常常开开始始的的位位置置称称为为源源端端点点，目目标标位位置置称称作作目目标标端端点点。链链接接就就是是由

19、由源源端端点点指指向向目目标标端端点点的的一一种种跳跳转转。目目标标端端点点可可以以是是一一个个页页面面、一一幅幅图图像像、一一段段声声音音、或或者者是是页面中的某个位置。利用超链接可以实现文档间或文档中的跳转。页面中的某个位置。利用超链接可以实现文档间或文档中的跳转。根据源端点的不同，可以将超链接分为两种：超文本根据源端点的不同，可以将超链接分为两种：超文本（Hypertext）和超链接（）和超链接（Hyperlink）。超文本就是源端点的文本）。超文本就是源端点的文本的链接。而超链接是利用文本以外的对象作为源端点所创建的链接，的链接。而超链接是利用文本以外的对象作为源端点所创建的链接，如图

20、像、表单等。如图像、表单等。网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.3 网页界面的构成要素网页界面的构成要素4.4.交互功能交互功能交互功能交互功能 交交互互功功能能，即即网网上上提提供供的的聊聊天天、论论坛坛、留留言言本本、邮邮件件发发送送及及接接收收的的互互动动功功能能。这这也也是是互互连连网网的的一一大大优优势势所所在在，它它给给人人提提供供了了一一个个快快捷捷交交流流的的平平台台，给给人人的的生生活活带带来来了了

21、许许多多便便利。利。网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.3 网页界面的构成要素网页界面的构成要素 5.5.多媒体（多媒体（多媒体（多媒体（MultimediaMultimedia）多多媒媒体体就就是是指指各各种种各各样样的的信信息息载载体体在在计计算算机机中中的的应应用用，是是一一种种文文字字、声声音音、图图像像、动动画画和和视视频频影影像像成成分分的的交交互互组组合合。网网页页中中的的多多媒媒体体主主要要指指采采用

22、用音音频频和和视视频频功功能能的的软软硬硬件件技技术术，包包括括数数字字音音响响、全全动动态态图图像像、超超媒媒体体连连接接等等，主主要要是是对对声声音音、图图像像具具有有编编辑辑处处理理的的功功能能，即即网网页页上上提提供供的的音音频频和和视视频频下下载载及及播播放放功功能能，包包括括Flash动动画画、声声音音与与影影片片文文件件的的播播放放。它它必必须须通通过过网网络络媒媒体体播播放放器器来来实实现现，有有多多种种网网络络媒媒体体播播放放器器。如如常常用用的的有有Windows Media Player和和 Realone Player等播放器。等播放器。网页设计与制作教程与实训网页设计

23、与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.4 网站开发的流程网站开发的流程 设计开发一个网站要考虑很多因素，如设计开发一个网站要考虑很多因素，如站站点的定位、点的定位、确定网站的目录和链接结构、确定网站的目录和链接结构、首页首页的设计制作的设计制作及网站的测试、发布和维护及网站的测试、发布和维护等，这等，这些因素的考虑，是一个环环相扣的过程，要想些因素的考虑，是一个环环相扣的过程，要想设计制作一个成功的网站，对每一个环节的把设计制作一个成功的网站，对每一

24、个环节的把握都十分重要。握都十分重要。网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.4.1 1.4.1 确定网站的目的和主题确定网站的目的和主题确定网站的目的和主题确定网站的目的和主题 设计一个站点，首先要确定网站主题。主题也就是网站的题材。设计一个站点，首先要确定网站主题。主题也就是网站的题材。要选择一个好的主题，就需要注意以下几点：要选择一个好的主题，就需要注意以下几点：1)主题要小而精。主题要小而精。“小小”即定位要小，

25、即定位要小，“精精”即内容要精。即内容要精。2）题材最好是自己擅长或者喜爱的内容。）题材最好是自己擅长或者喜爱的内容。3）题材不要太平或者目标太高。）题材不要太平或者目标太高。给网站起名时应做到以下几点：给网站起名时应做到以下几点：1）名称要正。）名称要正。2）名称要易记。）名称要易记。3）名称要有特色。）名称要有特色。总总之之，定定位位题题材材和和名名称称是是设设计计一一个个网网站站的的第第一一步步，也也是是很很重重要要的一部分。如果能想到一个满意的名称，花费一点时间也是值得的。的一部分。如果能想到一个满意的名称，花费一点时间也是值得的。1.4 网站开发的流程网站开发的流程 网页设计与制作教

26、程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益 1.4.2 1.4.2 定位网站定位网站定位网站定位网站CICI形象形象形象形象 CICI形形象象是是借借用用的的广广告告术术语语。(CI(CI是是英英文文corporate corporate identityidentity的的缩缩写写)，意意思思是是通通过过视视觉觉来来统统一一企企业业的的形形象象。企企业业一一般般都都要要通通过过CICI形形象象的的策策划划来来提提高高知知名名度度，它它是是一

27、一种种营营销销战战略略。如如较较早早地地成成功功导导入入CICI战战略略的的世世界界知知名名公公司司有有可可口口可可乐乐、SONYSONY、三三菱菱、麦麦当当劳劳等等。一一个个网网站站，和和实实体体公公司司一一样样，也也需需要要整整体体的的形形象象包包装装和和定定位位准准确确的的、有有创创意意的的CI CI 设设计计，这这样样对对网网站站的的宣宣传传推推广广有有事事半半功功倍倍的的效效果果。网网站站主主题题和和名名称称定定下下来来之之后后，需需要要思思考考的的就就是是网网站站的的CICI形形象象设设计计。网网站站的的CICI形形象象设计和企业的设计和企业的CICI形象设计的内容相似，主要包括：

28、形象设计的内容相似，主要包括：1.4 网站开发的流程网站开发的流程 网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.4 网站开发的流程网站开发的流程1.4.2 定位网站定位网站CI形象形象 1.设计网站的标志设计网站的标志(logo)即即网网标标。和和商商品品的的商商标标、企企业业的的标标志志一一样样，网网标标是是站站点点特特色色和和内内涵涵的的集集中中体体现现，看看见见它它就就让让人人联联想想到到它它所所代代表表的的站站点点。

29、如如新新浪浪网网的的 网网标标就就体现出新浪网的快捷、准确、精华的特色。体现出新浪网的快捷、准确、精华的特色。标标志志图图形形可可以以只只由由中中文文、英英文文字字母母构构成成，也也可可以以只只由由符符号号、图图案案（动动物物、植植物物、人人物物、几几何何）构构成成，还还可可以以由由文文字字和和图图形形构构成成。如如：soim是是用用soim的的英英文文做做为为标标志志，新新浪浪用用字字母母sina和和眼眼睛睛作作为为标标志志。标标志志的的设设计计创创意意来自网站的名称和内容。来自网站的名称和内容。1）以以用用与与网网站站名名称称相相关关的的人人物物，动动物物，花花草草等等作作为为设设计计的的

30、主主体体对对象象，通通过过抽抽象象、概概括括、变变形形等等手手法法，使使之之艺艺术术化化、标标志志化化，如如迪迪斯斯尼尼的的米米老老鼠鼠、搜狐的卡通狐狸等。搜狐的卡通狐狸等。2）专专业业性性较较强强的的网网站站，可可以以以以本本专专业业有有代代表表的的物物品品作作为为设设计计的的主主体体对对象。如中国银行的古钱标志、奔驰汽车的方向盘标志等。象。如中国银行的古钱标志、奔驰汽车的方向盘标志等。3)最最常常用用和和最最简简单单的的方方式式，是是用用网网站站的的英英文文名名称称的的字字体体作作为为设设计计的的主主体体对象，用不同的字体、字母的变形及字母的组合，使之艺术化、标志化。对象，用不同的字体、字

31、母的变形及字母的组合，使之艺术化、标志化。网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.4.2 1.4.2 定位网站定位网站定位网站定位网站CICI形象形象形象形象 2.设计网站的标准色彩设计网站的标准色彩 网站给人的第一印象来自视觉的冲击感，确定网站的标准色彩是相当重要的一步。不同的色彩搭配会产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩。如：IBM的深蓝色、肯德基的红色条型、Win

32、dows视窗标志上的红、蓝、黄、绿色块等，都会给我们不同的视觉感受。一般来说，一个网站的标准色彩不宜超过三种，太多会使人眼花缭乱。标准色彩要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。标准色之外的其它色彩也可以使用，只是作为点缀和衬托，不能大面积使用，以免影响整体感。1.4 网站开发的流程网站开发的流程 网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.4.2 1.4.2 定位网站定位网站定位网站定位网站CICI形

33、象形象形象形象 3.3.设计网站的标准字体设计网站的标准字体设计网站的标准字体设计网站的标准字体 和标准色彩一样，标标准准字字体体是是指指用用于于标标志志、标标题题、主主菜菜单单的的特特有有字字体体。网页默认的字体是宋体。为了体现站点的特有风格，可以根据需要选择一些特殊的字体。如，为了体现专业性，可以使用粗仿宋体；体现艺术性可以用广告体；体现亲切随意可以用手写体等。也可以根据网站所表达的内涵，选择更贴切的字体。目前常见的中文字体有二三十种，常见的英文字体有近百种，网络上还有许多专用的艺术字体下载，但要找到一种和网页内容相符的字体，也不是一件容易的事。严格的讲，标准字体是要经过设计加工的字体，是

34、独一无二的字体，是不能从任何字库里直接任意选用的字体，所以，标准字体最好是根据网站的内容专门设计的字体，这种字体最好用图片的形式在网页上出现。1.4 网站开发的流程网站开发的流程 网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.4 网站开发的流程网站开发的流程 1.4.2 1.4.2 定位网站定位网站定位网站定位网站CICI形象形象形象形象 4.4.设计网站的宣传标语设计网站的宣传标语设计网站的宣传标语设计网站的宣传标语 网网站

35、站的的宣宣传传标标语语，就就是是把把网网站站的的精精神神、目目标标用用一一句句话话或或一一个个词词来来高高度度概概括括。类类似似生生活活中中的的广广告告语语。如如鹊鹊巢巢的的“味味道道好好极极了了”、麦麦斯斯威威尔尔的的“好好东东西西和和好好朋朋友友一一起起分分享享”、IntelIntel的的“给给你你一一个个奔奔腾腾的的心心”等。等。网网站站的的标标志志、色色彩彩、字字体体和和标标语语，是是一一个个网网站站树树立立CICI形形象象的的关关键键，也也是是一一个个网网站站档档次次高高低低的的直直接接体体现现，所所以以，定定位位网网站站的的CICI形形象象，最最好好要要有有艺艺术术设设计人员参与。

36、计人员参与。网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益 1.4 网站开发的流程网站开发的流程1.4.3 1.4.3 资料收集、制作与整理资料收集、制作与整理资料收集、制作与整理资料收集、制作与整理 网网站站资资料料主主要要包包括括文文本本、图图像像两两大大类类，大大部部分分在在放放入入网网页页前前都都需需要要做做适适当当的的修修改改和和处处理理。另另外外，依依据据网网站站的的主主题题亮亮点点，还还可可能能准准备备如如声声音音、

37、Flash影影片片、图图像像等等需需要要在在网网页页中中展展示示的的内内容容。搜搜集集资资料料时时范范围围要要广广泛泛，在进行网页设计时再整理与筛选。在进行网页设计时再整理与筛选。网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.4 网站开发的流程网站开发的流程1.4.4 1.4.4 规划网站的目录结构和链接结构规划网站的目录结构和链接结构规划网站的目录结构和链接结构规划网站的目录结构和链接结构 站点确定后，接下来就要规划网站的结

38、构，网站的结构分目目录录结构结构和链接结构链接结构。确定网站的结构目的是便于网站的使用和维护。网网站站的的目目录录是是指指在在建建立立网网站站定定义义站站点点时时创创建建的的目目录录，如有类似“我的网页”的根目录和“我的家”的子目录。目录的结构是一个很容易忽略的问题，目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护、内容未来的扩充和移植有着重要的影响。如建立E:/我的网页我的家文字、图片、链接等较清晰的目录，就便于网站的管理和维护。网网站站的的链链接接结结构构是是指指页页面面之之间间相相互互链链接接的的拓拓扑扑结结构构，它它建建立立在在目目录录结结构构基基础础之之上

39、上，但但可可以以跨跨越越目目录录。形象地说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。确立网站的链接结构的目的是用最少的链接，使得浏览最有效率。网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.4 网站开发的流程网站开发的流程1.4.4 1.4.4 规划网站的目录结构和链接结构规划网站的目录结构和链接结构

40、规划网站的目录结构和链接结构规划网站的目录结构和链接结构 一般来说，确定网站的链接结构有两种基本方式：一般来说，确定网站的链接结构有两种基本方式：1)树树状状链链接接结结构构（一一对对一一）。类类似似DOS的的目目录录结结构构，首首页页链链接接指指向向一一级级页页面面，一一级级页页面面链链接接指指向向二二级级页页面面。立立体体结结构构看看起起来来就就象象蒲蒲公公英英。这这样样的的链链接接结结构构浏浏览览时时，一一级级级级进进入入，一一级级级级退退出出。优优点点是是条条理理清清晰晰，访访问问者者明明确确知知道道自自己己在在什什么么位位置置，不不会会“迷迷”路路。缺缺点点是是浏浏览览效效率率低低，

41、一一个个栏栏目目下下的的子子页页面面到到另另一一个个栏栏目目下下的的子页面，必须绕经首页。如子页面，必须绕经首页。如:校园动态校园动态-教师活动教师活动-学生活动学生活动 首页首页黄黄-绿绿-蓝蓝-红红依依次次过过度度渐渐变变，就就可可以以得得到到一一个色彩环。个色彩环。色环的两端是暖色和冷色，当中是中性色。色环的两端是暖色和冷色，当中是中性色。(如下图如下图)红红.橙橙.橙黄橙黄.黄黄.黄绿黄绿.绿绿.青绿青绿.蓝绿蓝绿.蓝蓝.蓝紫蓝紫.紫紫.紫红紫红|_|_|_|_|暖色系暖色系 中性系中性系 冷色系冷色系 中性系中性系 网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页

42、制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.5 网站设计的要求网站设计的要求 4.4.色彩搭配悦目色彩搭配悦目色彩搭配悦目色彩搭配悦目 （2）色彩的心理感觉。）色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。不同的颜色会给浏览者不同的心理感受。红红色色是是一一种种激激奋奋的的色色彩彩。给给人人以以刺刺激激效效果果，能能使使人人产产生生冲冲动动、愤愤怒怒、热热情情、活力的感觉。活力的感觉。绿绿色色介介于于冷冷暖暖两两中中色色彩彩的的中中间间，显显得得和和睦睦、宁宁静静、健健康康、安安全全的

43、的感感觉觉。它它和金黄、淡白搭配，可以产生优雅、舒适的气氛。和金黄、淡白搭配，可以产生优雅、舒适的气氛。橙色橙色也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果 黄色黄色具有快乐、希望、智慧和轻快的个性，它的明度最高。具有快乐、希望、智慧和轻快的个性，它的明度最高。蓝蓝色色是是最最具具凉凉爽爽，清清新新，专专业业的的色色彩彩。它它和和白白色色混混合合，能能体体现现柔柔顺顺、淡淡雅雅、浪漫的气氛浪漫的气氛(象天空的色彩象天空的色彩)白色白色具有洁白、明快、纯真、清洁的感受。具有洁白、明快、纯真、清洁的感受。黑色黑色具有深沉、神秘

44、、寂静、悲哀、压抑的感受。具有深沉、神秘、寂静、悲哀、压抑的感受。灰色灰色具有中庸、平凡、温和、谦让、中立和高雅的感觉。具有中庸、平凡、温和、谦让、中立和高雅的感觉。每每种种色色彩彩在在饱饱和和度度、透透明明度度上上略略微微变变化化就就会会产产生生不不同同的的感感觉觉。以以绿绿色色为为例例，黄绿色有青春、旺盛的视觉意境，而蓝绿色则显得幽静、理智。黄绿色有青春、旺盛的视觉意境，而蓝绿色则显得幽静、理智。网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位

45、和职工的合法权益1.5 网站设计的要求网站设计的要求4.4.色彩搭配悦目色彩搭配悦目色彩搭配悦目色彩搭配悦目 3 3）网页色彩搭配的原理网页色彩搭配的原理网页色彩搭配的原理网页色彩搭配的原理 （1）色彩的鲜明性。色彩的鲜明性。网页的色彩要鲜艳，这样容易引人注目。网页的色彩要鲜艳，这样容易引人注目。（2）色色彩彩的的独独特特性性。要要有有与与众众不不同同的的色色彩彩，使使得得大大家家对对你你的的印印象深刻。象深刻。（3）色色彩彩的的合合适适性性。就就是是说说色色彩彩和和你你表表达达的的内内容容气气氛氛相相适适合合。如用粉色体现女性站点的柔性等。如用粉色体现女性站点的柔性等。（4）色色彩彩的的联联

46、想想性性。不不同同色色彩彩会会产产生生不不同同的的联联想想，蓝蓝色色想想到到天天空空、黑黑色色想想到到黑黑夜夜、红红色色想想到到喜喜事事等等，选选择择色色彩彩一一定定要要和和网网页页的的内内涵相关联涵相关联。网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.5 网站设计的要求网站设计的要求4.4.色彩搭配悦目色彩搭配悦目色彩搭配悦目色彩搭配悦目 4 4）网页色彩搭配的技巧网页色彩搭配的技巧网页色彩搭配的技巧网页色彩搭配的技巧 （1

47、）采采用用一一种种颜颜色色。这这里里是是指指先先选选定定一一种种颜颜色色，然然后后调调整整透透明明度度或或者者饱饱和和度度，(即即将将色色彩彩变变淡淡或或加加深深)，产产生生新新的的色色彩彩，用用于于网网页页。这样的页面看起来色彩统一，有层次感。这样的页面看起来色彩统一，有层次感。（2）选选用用两两种种颜颜色色。即即先先选选定定一一种种颜颜色色，然然后后选选择择它它的的同同类类色色(在在色色相相环环里里邻邻近近的的色色)。这这样样的的搭搭配配，使使整整个个页页面面色色彩彩丰丰富富，但但不不会显花乱。会显花乱。（3）选选用用一一类类色色。就就是是用用一一个个感感觉觉的的色色彩彩，例例如如淡淡蓝蓝

48、、淡淡黄黄、淡绿；或者土黄、土灰、土蓝。这样，使人有一个整体感。淡绿；或者土黄、土灰、土蓝。这样，使人有一个整体感。（4）用用黑黑色色和和一一种种彩彩色色。比比如如大大红红的的字字体体配配黑黑色色的的边边框框感感觉觉就就会很醒目。会很醒目。网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益1.5 网站设计的要求网站设计的要求4.4.色彩搭配悦目色彩搭配悦目色彩搭配悦目色彩搭配悦目 4 4）网页色彩搭配的技巧网页色彩搭配的技巧网页色彩搭

49、配的技巧网页色彩搭配的技巧 在网页配色中，忌讳的是：在网页配色中，忌讳的是：（1）网网页页上上出出现现的的颜颜色色不不要要太太多多，尽尽量量控控制制在在三三种种色色彩彩以内。以内。（2）背背景景和和前前文文的的对对比比尽尽量量要要大大，不不要要用用花花纹纹繁繁复复的的图图案作背景，以便突出主要文字内容。案作背景，以便突出主要文字内容。在在The Open Road网网站站上上提提供供了了一一张张网网页页基基本本配配色色表表，是是非常有价值的资料，设计网页时可以参考。非常有价值的资料，设计网页时可以参考。网页设计与制作教程与实训网页设计与制作教程与实训第第1 1章章 网页制作基本知识网页制作基本

50、知识为了规范事业单位聘用关系，建立和完善适应社会主义市场经济体制的事业单位工作人员聘用制度，保障用人单位和职工的合法权益习习 题题 一、判断题一、判断题一、判断题一、判断题1Web站点由一组页面组成。（站点由一组页面组成。（）2从浏览器中可以浏览已下载的文件。（从浏览器中可以浏览已下载的文件。（）3只要网页中显示出来的字体，计算机字库里一定有这样的字体。（只要网页中显示出来的字体，计算机字库里一定有这样的字体。（）4网页中的图像越多越好。（网页中的图像越多越好。（）5网站的主题就是网站的题材。（网站的主题就是网站的题材。（）6自己喜欢什么，就可以给网站起什么名称。（自己喜欢什么，就可以给网站起