网页设计与制作教程与实训.ppt

《网页设计与制作教程与实训.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作教程与实训.ppt（76页珍藏版）》请在金锄头文库上搜索。

1、网页设计与制作教程与实训网页设计与制作教程与实训2.1 Dreamweaver 8简介Dreamweaver8利用 Dreamweaver8 中的可视化编辑功能，快速地创建页面而无需编写任何代码。查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。在 Macromedia Fireworks 或其他图形应用程序中创建和编辑图像，然后将它们直接导入Dreamweaver8，添加 Macromedia Flash 对象。从而优化您的开发工作流程。在于能够进行多任务工作，是一种更富于工作效率的操作系统。它在操作方法、界面风格具有更加时尚化。Dreamweaver 8新增功能1.【样式呈现】

2、工具栏2.插入Flash 视频内容3.支持ColdFusionMX74.支持PHP55.CSS样式：CSS 布局可视化、 新的标准 CSS 面板、 改善的 CSS 呈现功能2.2 Dreamweaver 8 的工作界面2.3 常用面板的使用2.3.1 使用插入栏【插入】栏包括图像、表格、层等对象按钮，单击这些按钮可以为网页添加相应的元素。默认的插入栏为标准插入栏。单击插入栏左侧的下三角按钮，可以更换为其他工具栏。2.3.2 使用属性面板 属性面板并不是将所有的对象和属性加载到面板上，而是根据用户选择的不同对象来动态地显示对象的属性。制作网页时，可以根据需要随时打开或关闭，或者通过拖动属性面板的

3、标题栏将其移到合适的位置。2.3.3 使用文件面板1.启动【文件】面板2.设置站点参数 3. 定义站点主页的操作方法有如下两种。 在【文件】面板中，从弹出菜单(当前站点、服务器或驱动器显示在该菜单中)中选择一个站点。右击要设为主页的文件，从弹出的快捷菜单中选择【设成首页】命令。 在【我的站点的站点定义为】对话框中，打开【高级】选项卡，在【分类】列表框中选择【站点地图布局】，通过【主页】文本框后的【浏览文件】图标选择一个文件作为主页。 2.3.4 资源面板 资源包括存储在站点中的各种元素，如图像或影片文件。【资源】面板提供了两种查看资源的方式。 【站点】列表显示站点的所有资源。 【收藏】列表仅显

4、示明确选择的资源。2.5 站点的基本操作2.5.1 定义站点1.创建本地站点2.设置远程站点2.5 站点的基本操作2.5.2 编辑站点1、编辑站点在创建站点之后，可以对站点属性进行编辑，具体操作方法如下。(1) 选择【站点】|【管理站点】命令，如图所示的【管理站点】对话框。(2) 从列表中选择要编辑的站点名称。单击【编辑】按钮，即可打开对话框，对该本地站点进行编辑。(3) 编辑完毕，单击【确定】按钮，可以返回【管理站点】对话框。单击【完成】按钮，完成编辑操作。2.5 站点的基本操作2.5.2 编辑站点2、 删除站点如果不再需要利用Dreamweaver 8对某个本地站点进行操作，同样可将其从站

5、点列表中删除。具体操作步骤如下。(1) 【管理站点】对话框中，单击【删除】按钮。(2) 系统会弹出一个提示对话框，询问用户是否要删除本地站点，单击【是】按钮，即可删除选中的本地站点，返回【管理站点】对话框，单击【完成】按钮，完成操作。提示：该操作实际上是删除提示：该操作实际上是删除了了Dreamweaver同本地同本地站点之间的关系，但是实际站点之间的关系，但是实际上本地站点的内容，包括文上本地站点的内容，包括文件夹和文档等，都依然保存件夹和文档等，都依然保存在磁盘相应的位置上，用户在磁盘相应的位置上，用户可以重新创建指向其位置的可以重新创建指向其位置的新站点，重新对其进行管理。新站点，重新对

6、其进行管理。2.5 站点的基本操作2.5.2 编辑站点3、复制站点在【管理站点】对话框中选择要复制的站点，单击【复制】按钮，即可将该站点复制，新复制出的站点名称将会出现在【管理站点】对话框的站点列表中。该名称采用原站点名称后添加【我的站点复制】字样的形式。】如有需要，可以选中新复制的站点，然后单击【编辑】按钮，对之进行编辑，例如修改站点名称等。在【管理站点】对话框中单击【完成】按钮，完成对该站点复制的操作。2.5 站点的基本操作2.5.3 操作站点文件利用【站点】窗口，可以对本地站点的文件夹和文件进行创建、删除和复制等操作。1. 创建文件和文件夹 提示：如果要修改文件的名称或文件夹的名称，可以

7、单击文件的名称或文件夹的名称，或按下F2键，激活文字编辑状态，然后输入想要的名称即可。2. 文件的移动和复制 与大多数文件管理器一样，用户可以利用剪切、复制和粘贴操作来实现文件或文件夹的移动和复制。 提示：移动或复制文件，由于文件的位置发生了变化，其中的链接信息(特别是相对链接)可能发生了相应的变化。Dreamweaver8会打开如图2.37所示的对话框，提示是否要更新被移动或复制的文件中的链接信息。如果需要更新，则从列表中选择要更新的文件，单击【更新】按钮，则更新文件中的链接信息。3. 删除文件 要从本地文件列表中删除文件，可以按照以下方法进行。(1) 选中要删除的文件或文件夹。(2) 在【

8、编辑】菜单中，选择【删除】命令，或是按下Del键。(3) 这时系统会出现一个提示对话框，询问用户是否真的要删除文件或文件夹，单击【是】按钮，即可将文件或文件夹从本地站点中删除。提示：与站点的删除操作不同，对文件或文件夹的删除操作，会从磁盘上真正地删除相应的文件或文件夹。1.1 与网页制作相关的术语 1.1.1 1.1.1 网站与网页网站与网页网站与网页网站与网页 当当我我们们在在浏浏览览器器中中输输入入一一个个已已知知网网址址后后，即即可可打打开开一一个个页页面面，让让我我们们了了解解有有关关这这个个网网址址的的一一些些信信息息和和内内容容，这这个个页页面面就就是是我我们们通通常常所所说说的的

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

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

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

12、.1.2 2 服务器（服务器（服务器（服务器（ServerServer）与浏览器（与浏览器（与浏览器（与浏览器（BrowserBrowser） 服服务务器器是是局局域域网网的的核核心心设设备备,它它管管理理着着局局域域网网中中的的各各种种资资源源,它它的的基基本本功功能能是是网网络络通通信信服服务务、管管理理和和提提供供网网络络共共享享资资源源，以以及及进进行行网网络络管管理理。服服务务器器实实质质是是一一台台配配置置较较高高的的计计算算机机。不不同同的的电电脑脑操操作作系系统统，有有不不同同的的适适用用服服务务器器软软件件，如如：微微软软视视窗窗windows XP Professional

13、操操作作系系统统适适用用的的服服务务器器软软件件IIS5.1网站上动态的数据，必须要通过网站服务器的服务才能运作。网站上动态的数据，必须要通过网站服务器的服务才能运作。 用用于于查查看看Web站站点点的的软软件件被被称称作作浏浏览览器器。它它是是WWW的的窗窗口口,用用户户可可以以利利用用浏浏览览器器从从一一个个文文档档跳跳转转到到另另一一个个文文档档实实现现对对整整个个网网站站的的浏浏览览,也也可可以以下下载载并并解解释释HTML文文档档中中所所描描述述的的动动画画、声声音音、文文本本、图图形形、图图像像，并并能能实实现现电电子子邮邮件件查查看看、下下载载文文件件、FTD等等功功能能。它它有

14、有多多种种版版本本,如如微微软软英英特特尔尔版版本本、苹苹果果电电脑脑版版本本等等，大大多多数数浏浏览览者者（目目前前已已经经超超过过90）使使用用Microsoft Internet Explorer(简简称称IE)浏浏览览器器.还还有有一一些些其其他他的的浏浏览览器器，不不同同版版本本的的浏浏览览器功能大体一样，主要区别在于各功能区在版面上的排列不同。器功能大体一样，主要区别在于各功能区在版面上的排列不同。1.1. 1.1. 3 3 远程站点远程站点远程站点远程站点(Remote Site)(Remote Site)和本地站点和本地站点和本地站点和本地站点（Local Local Site

15、Site） 远远程程站站点点是是指指服服务务器器上上组组成成的的Web站站点点。本本地地站站点点是是指指与与远远程程站点上的文件对应的本地磁盘上的文件。站点上的文件对应的本地磁盘上的文件。 在制作网页时，首先要定义一个在制作网页时，首先要定义一个本地站点本地站点。作为一个网站，里。作为一个网站，里面有很多网页文件、图片、面有很多网页文件、图片、Flash动画等，如果不进行管理归档，分动画等，如果不进行管理归档，分散在硬盘的各个地方散在硬盘的各个地方,就无法方便地进行网页发布。就无法方便地进行网页发布。定义本地站点定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里就是在硬盘

16、上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。一般在设计网页之前，先要以设面，以便进行网页的制作和管理。一般在设计网页之前，先要以设计的网页的名称新建一个文件夹，把它放在电脑中常用来存储文件计的网页的名称新建一个文件夹，把它放在电脑中常用来存储文件的磁盘中，如的磁盘中，如“我的网页我的网页”、“个人网页个人网页”等的文件夹里，也可以等的文件夹里，也可以根据自己的习惯放置文件。根据自己的习惯放置文件。1.1 与网页制作相关的术语 1.1.1.1.4 4 统一资源定位器统一资源定位器统一资源定位器统一资源定位器URLURL URL即即Uniform Resource

17、 Locator（统一资源定位器）统一资源定位器）的缩写。用来指明主机或文件在的缩写。用来指明主机或文件在Internet上的位置，一个上的位置，一个URL就就是一个资源是一个资源在在Internet上的具体位置，上的具体位置，URL由由Internet资源类型、资源类型、服务器地址、端口及路径组成，服务器地址、端口及路径组成，如：如：http:/ 与网页制作相关的术语 1. 文字文字 文文字字是是网网页页最最基基本本的的构构成成要要素素，一一个个网网页页上上大大部部分分是是由由文文字字构构成成的的，由由于于文文字字所所表表达达内内容容比比较较清清楚楚、直直接接,而而且且相相对对占占用用网网页

18、页版版面面面面积积较较小小，使使网网页页所所表表达达的的信信息息量量加加大大，所所以以网网上上用用来来表表达达内内容容或或链链接接的的大大部部分分是是文文字字。文文字字也也称称文文本本，网网页页有有90左左右右是是由由文文本本组组成成。首首页页上上的的文文本本基基本本上上都都是是用用来来链接用的。链接用的。1.3 网页界面的构成要素2. 图像图像 图图形形和和图图像像也也是是网网页页主主要要的的构构成成要要素素，它它有有动动态态和和静静态态之之分分，和和文文字字的的功功能能一一样样，也也是是基基本本上上用用来来链链接接用用的的，它它比比文文字字看看上上去去更更加加直直观观，更更让让人人容容易易

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

20、色为主的图像，使用色为主的图像，使用GIF格式。格式。1.3 网页界面的构成要素1.3 网页界面的构成要素 3. 超链接超链接 超超链链接接由由两两个个端端点点及及一一个个方方向向构构成成。通通常常开开始始的的位位置置称称为为源源端端点点，目目标标位位置置称称作作目目标标端端点点。链链接接就就是是由由源源端端点点指指向向目目标标端端点点的的一一种种跳跳转转。目目标标端端点点可可以以是是一一个个页页面面、一一幅幅图图像像、一一段段声声音音、或或者者是是页页面面中中的的某某个个位位置置。利利用用超超链链接接可可以以实实现现文文档档间间或或文文档档中中的跳转。的跳转。 根据源端点的不同，可以将超链接

21、分为两种：超文本根据源端点的不同，可以将超链接分为两种：超文本（Hypertext）和超链接和超链接（Hyperlink）。）。超文本超文本就是源端点的文就是源端点的文本的链接。而本的链接。而超链接超链接是利用文本以外的对象作为源端点所创建的是利用文本以外的对象作为源端点所创建的链接，如图像、表单等。链接，如图像、表单等。 1.3 网页界面的构成要素4. 交互功能交互功能 交交互互功功能能，即即网网上上提提供供的的聊聊天天、论论坛坛、留留言言本本、邮邮件件发发送送及及接接收收的的互互动动功功能能。这这也也是是互互连连网网的的一一大大优优势势所所在在，它它给给人人提提供供了了一一个个快快捷捷交交

22、流流的的平平台台，给给人人的的生生活活带带来来了了许许多多便利。便利。1.3 网页界面的构成要素 5. 多媒体（多媒体（Multimedia） 多多媒媒体体就就是是指指各各种种各各样样的的信信息息载载体体在在计计算算机机中中的的应应用用，是是一一种种文文字字、声声音音、图图像像、动动画画和和视视频频影影像像成成分分的的交交互互组组合合。网网页页中中的的多多媒媒体体主主要要指指采采用用音音频频和和视视频频功功能能的的软软硬硬件件技技术术，包包括括数数字字音音响响、全全动动态态图图像像、超超媒媒体体连连接接等等，主主要要是是对对声声音音、图图像像具具有有编编辑辑处处理理的的功功能能，即即网网页页上

23、上提提供供的的音音频频和和视视频频下下载载及及播播放放功功能能，包包括括Flash动动画画、声声音音与与影影片片文文件件的的播播放放。它它必必须须通通过过网网络络媒媒体体播播放放器器来来实实现现，有有多多种种网网络络媒媒体体播播放放器器。如如常常用用的的有有Windows Media Player和和 Realone Player等等播放器。播放器。1.4 网站开发的流程 设计开发一个网站要考虑很多因素，设计开发一个网站要考虑很多因素，如如站点的定位、站点的定位、确定网站的目录和链接结构、确定网站的目录和链接结构、首页的设计制作首页的设计制作及网站的测试、发布和维护及网站的测试、发布和维护等，

24、这些因素的考虑，是一个环环相扣的过等，这些因素的考虑，是一个环环相扣的过程，要想设计制作一个成功的网站，对每一程，要想设计制作一个成功的网站，对每一个环节的把握都十分重要。个环节的把握都十分重要。 1.4.1 确定网站的目的和主题确定网站的目的和主题 1. 确定网站主题 2. 为网站命名1.4 网站开发的流程 1.4.2 1.4.2 定位网站定位网站定位网站定位网站CICI形象形象形象形象 CICI形形象象是是借借用用的的广广告告术术语语。( (CICI是是英英文文corporate corporate identityidentity的的缩缩写写) )，意意思思是是通通过过视视觉觉来来统统一

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

26、的的CICI形形象象设设计计。网网站站的的CICI形形象象设设计计和和企企业业的的CICI形形象象设设计计的的内内容容相相似似，主主要要包括：包括：1.4 网站开发的流程1.4 网站开发的流程1.4.2 定位网站定位网站CI形象形象 1. 设计网站的标志设计网站的标志(logo) 即即网网标标。和和商商品品的的商商标标、企企业业的的标标志志一一样样，网网标标是是站站点点特特色色和和内内涵涵的的集集中中体体现现，看看见见它它就就让让人人联联想想到到它它所所代代表表的的站站点点。如如新新浪浪网网的的 网标就体现出新浪网的快捷、准确、精华的特色。网标就体现出新浪网的快捷、准确、精华的特色。 标标志志

27、图图形形可可以以只只由由中中文文、英英文文字字母母构构成成，也也可可以以只只由由符符号号、图图案案（动动物物、植植物物、人人物物、几几何何）构构成成，还还可可以以由由文文字字和和图图形形构构成成。如如：soim是是用用soim的的英英文文做做为为标标志志，新新浪浪用用字字母母sina和和眼眼睛睛作作为为标标志志。标标志志的设计创意来自网站的名称和内容。的设计创意来自网站的名称和内容。 1）以以用用与与网网站站名名称称相相关关的的人人物物，动动物物，花花草草等等作作为为设设计计的的主主体体对对象象，通通过过抽抽象象、概概括括、变变形形等等手手法法，使使之之艺艺术术化化、标标志志化化，如如迪迪斯斯

28、尼尼的的米米老鼠、搜狐的卡通狐狸等。老鼠、搜狐的卡通狐狸等。 2）专专业业性性较较强强的的网网站站，可可以以以以本本专专业业有有代代表表的的物物品品作作为为设设计计的的主主体体对象。如中国银行的古钱标志、奔驰汽车的方向盘标志等。对象。如中国银行的古钱标志、奔驰汽车的方向盘标志等。 3) 最最常常用用和和最最简简单单的的方方式式，是是用用网网站站的的英英文文名名称称的的字字体体作作为为设设计计的的主主体体对对象象，用用不不同同的的字字体体、字字母母的的变变形形及及字字母母的的组组合合，使使之之艺艺术术化化、标志化。标志化。LOGO的国际标准规范：88*31 这是互联网上最普遍的LOGO规格，本站

29、所收集的均是这种大小120*60 这种规格用于一般大小的LOGO120*90 这种规格用于大型LOGO。1.4.2 定位网站定位网站CI形象形象 2. 设计网站的标准色彩设计网站的标准色彩 网站给人的第一印象来自视觉的冲击感，确定网站的标准色彩是相当重要的一步。不同的色彩搭配会产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩。如：IBM的深蓝色、肯德基的红色条型、Windows视窗标志上的红、蓝、黄、绿色块等，都会给我们不同的视觉感受。1.4 网站开发的流程一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。标准色彩要用于网站的标志，标题，主菜单

30、和主色块。给人以整体统一的感觉。至于其它色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。 一般来说，适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。1.4 网站开发的流程 1.4.2 定位网站定位网站CI形象形象 3. 3. 设计网站的宣传标语设计网站的宣传标语设计网站的宣传标语设计网站的宣传标语 网网站站的的宣宣传传标标语语，就就是是把把网网站站的的精精神神、目目标标用用一一句句话话或或一一个个词词来来高高度度概概括括。类类似似生生活活中中的的广广告告语语。如如雀雀巢巢的的“味味道道好好极极了了”、麦麦斯斯威威尔尔的的“好好东东西西和和好好朋朋友友一一起起分分享享”、I

31、ntelIntel的的“给给你你一一个奔腾的心个奔腾的心”等。等。 网网站站的的标标志志、色色彩彩、字字体体和和标标语语，是是一一个个网网站站树树立立CICI形形象象的的关关键键，也也是是一一个个网网站站档档次次高高低低的的直直接接体体现现，所所以以，定定位位网网站站的的CICI形形象象，最最好好要要有艺术设计人员参与。有艺术设计人员参与。 1.4 网站开发的流程1.4.3 资料收集、制作与整理资料收集、制作与整理 网网站站资资料料主主要要包包括括文文本本、图图像像两两大大类类，大大部部分分在在放放入入网网页页前前都都需需要要做做适适当当的的修修改改和和处处理理。另另外外，依依据据网网站站的的

32、主主题题亮亮点点，还还可可能能准准备备如如声声音音、Flash影影片片、图图像像等等需需要要在在网网页页中中展展示示的的内内容容。搜搜集集资资料料时时范范围要广泛，在进行网页设计时再整理与筛选。围要广泛，在进行网页设计时再整理与筛选。1.4 网站开发的流程1.4.4 1.4.4 规划网站的目录结构和链接结构规划网站的目录结构和链接结构规划网站的目录结构和链接结构规划网站的目录结构和链接结构 站点确定后，接下来就要规划网站的结构，网站的结构分目目录录结结构构和链链接接结结构构。确定网站的结构目的是便于网站的使用和维护。 网网站站的的目目录录是是指指在在建建立立网网站站定定义义站站点点时时创创建建

33、的的目目录录，如有类似“我的网页”的根目录和“我的家”的子目录。目录的结构是一个很容易忽略的问题，目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护、内容未来的扩充和移植有着重要的影响。如建立E:/我的网页我的家文字、图片、链接等较清晰的目录，就便于网站的管理和维护。 网网站站的的链链接接结结构构是是指指页页面面之之间间相相互互链链接接的的拓拓扑扑结结构构，它它建建立立在在目目录录结结构构基基础础之之上上，但但可可以以跨跨越越目目录录。形象地说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是

34、分布在一个平面上，而是存在于一个立体的空间中。确立网站的链接结构的目的是用最少的链接，使得浏览最有效率。1.4 网站开发的流程1.4.4 规划网站的目录结构和链接结构规划网站的目录结构和链接结构 一一般般来来说说，确确定定网网站站的的目目录录结结构构有有两两种种基基本本方式：方式： 1.4 网站开发的流程1.4.4 规划网站的目录结构和链接结构规划网站的目录结构和链接结构 一般来说，确定网站的链接结构有两种基本方式：一般来说，确定网站的链接结构有两种基本方式： 1) 树树状状链链接接结结构构（一一对对一一）。类类似似DOS的的目目录录结结构构，首首页页链链接接指指向向一一级级页页面面，一一级级

35、页页面面链链接接指指向向二二级级页页面面。立立体体结结构构看看起起来来就就象象蒲蒲公公英英。这这样样的的链链接接结结构构浏浏览览时时，一一级级级级进进入入，一一级级级级退退出出。优优点点是是条条理理清清晰晰，访访问问者者明明确确知知道道自自己己在在什什么么位位置置，不不会会“迷迷”路路。缺缺点点是是浏浏览览效效率率低低，一一个个栏栏目目下下的的子子页页面面到另一个栏目下的子页面，必须绕经首页。如到另一个栏目下的子页面，必须绕经首页。如: 校园动态校园动态-教师活动教师活动-学生活动学生活动 首页首页 教学园地教学园地-教师成果教师成果-学生作品学生作品1.4 网站开发的流程 1.4.4 1.4

36、.4 规划网站的目录结构和链接结构规划网站的目录结构和链接结构规划网站的目录结构和链接结构规划网站的目录结构和链接结构 2) 星星状状链链接接结结构构（一一对对多多）。类似网络服务器的链接，每个页面相互之间都建立有链接。立体结构象东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置、看了多少内容。如: 校园动态校园动态-教师活动教师活动-学生活动学生活动 首页首页 教学园地教学园地-教师成果教师成果-学生作品学生作品 这两种基本结构都只是理想方式，在实际的网站设计中，一般要将这两种结构混合起来使用。1.4 网站

37、开发的流程1.4.5 首页的设计与制作首页的设计与制作 确确立立好好了了网网站站的的结结构构，就就可可以以对对网网站站的的首首页页进进行行设设计计了了，首首页页的的设设计计是是一一个个网网站站成成功功与与否否的的关关键键。用用户户往往往往看看到到第第一一页页就就已已经经对对站站点点有有一一个个整整体体的的感感觉觉，是是不不是是能能够够促促使使他他们们继继续续点点击击进进入入或或者者使使他他们们的的视视线线留留在在站站点点上上，首首页页设设计计的的好好坏坏是是至至关关重重要要的的,所所以以,首首页页的的设设计计和和制制作作是是一一定定要要重重视视和和花花费费精精力力的的,一一般般首首页页设设计计

38、和和制制作作占占整整个个制制作作时时间间的的40%左左右右,这这样样可可以以避避免免出出现现全全部部制制作作好好以以后后再再修改带来的麻烦。修改带来的麻烦。 首首页页，从从根根本本上上说说就就是是全全站站内内容容的的目目录录，是是一一个个索索引引,但但不不是是一一个个简简单单的的目目录录的的罗罗列列，如如何何设设计计好好一一个个首首页呢？一般的步骤是：页呢？一般的步骤是：1.4 网站开发的流程1.4.5 首页的设计与制作首页的设计与制作 1. 1. 确定首页的功能模块确定首页的功能模块确定首页的功能模块确定首页的功能模块 首首页页的的内内容容模模块块是是指指你你需需要要在在首首页页上上实实现现

39、的的主主要要内内容容和和功功能能。一一般般的的站站点点都都需需要要这这样样一一些些模模块块：网网站站名名称称 (logo)、 广广 告告 条条 (banner)、 主主 菜菜 单单 (menu)、 新新 闻闻(whats new)、搜搜索索(search)、 友友情情链链接接(links)、邮邮件件列列表表(maillist)、计计数数器器(count)、版版权权(copyright). 选选择择哪哪些些模模块块，实实现现哪哪些些功功能能，是是否否需需要要添添加加其其他他模模块块都是首页设计首先需要确定的。都是首页设计首先需要确定的。1.4 网站开发的流程1.4.5 首页的设计与制作首页的设计

40、与制作 2. 2. 设计首页的版面设计首页的版面设计首页的版面设计首页的版面 在在功功能能模模块块确确定定后后，开开始始设设计计首首页页的的版版面面。就就象象搭搭积积木木一一样样，每每个个模模块块是是一一个个单单位位积积木木，如如何何拼拼搭搭出出一一座座漂漂亮亮的的房房子子，就就要要看设计师的创意和想象力了。看设计师的创意和想象力了。 设设计计版版面面的的最最好好方方法法是是先先勾勾勒勒出出理理想想中中的草图，然后再用网页制作软件来实现。的草图，然后再用网页制作软件来实现。1.4.5 首页的设计与制作首页的设计与制作常用到的版面布局形式有：常用到的版面布局形式有： “T”字型结构布局。字型结构

41、布局。所谓所谓“T”结构。就是指页面顶部为结构。就是指页面顶部为横条网站标志和广告条，下方左面为横条网站标志和广告条，下方左面为主菜单，右面显示内容的布局，因为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文菜单条背景较深，整体效果类似英文字母字母“T”,所以我们称之为所以我们称之为“T”形形布局。这是网页设计中用的最广泛的布局。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页一种布局方式。这种布局的优点是页面结构清晰、主次分明，是较容易学面结构清晰、主次分明，是较容易学习和掌握的布局方法。缺点是规矩、习和掌握的布局方法。缺点是规矩、呆板，如果细节色彩上再处理不好呆板

42、，如果细节色彩上再处理不好（没有对比），就会让人觉得无味。（没有对比），就会让人觉得无味。 http:/ “口口”字型布局。字型布局。就是页面一般上下各就是页面一般上下各有一个广告条，左面有一个广告条，左面是主菜单，右面放友是主菜单，右面放友情连接等，中间是主情连接等，中间是主要内容。这种布局的要内容。这种布局的优点是充分利用版面，优点是充分利用版面，信息量大。缺点是页信息量大。缺点是页面拥挤，不够灵活。面拥挤，不够灵活。也有将四边空出，只也有将四边空出，只用中间的窗口型进行用中间的窗口型进行设计，如网易壁纸站。设计，如网易壁纸站。http:/ “三三”字字型型布布局局。这这种种布布局局多多用

43、用于于国国外外站站点点，国国内内用用的的不不多多。特特点点是是页页面面上上横横向向两两条条色色块块，将将页页面面整整体体分分割割为为四四部部分分，色色块块中大多放广告条。中大多放广告条。 对称对比布局。对称对比布局。顾顾名名思思义义，采采取取左左右右或或者者上上下下对对称称的的布布局局，一一半半深深色色，一一半半浅浅色色，一一般般用用于于设设计计型型站站点点。优优点点是是视视觉觉冲冲击击力力强强，缺缺点点是是将将两两部部分分有有机机的的结结合比较困难。合比较困难。 POP布局。布局。 POP引引自自广广告告术术语语，就就是是指指页页面面布布局局象象一一张张宣宣传传海海报报，以以一一张张精精美美

44、图图片片作作为为页页面面的的设设计计中中心心。常常用用于于时时尚尚类类站站点点，如如ELLE.com等等。优优点点是是显显而而易易见见、漂漂亮亮、吸吸引人。缺点是速度慢。引人。缺点是速度慢。1.4 网站开发的流程1.4.6 网站测试与发布网站测试与发布 1. 1. 网站测试项目及方法网站测试项目及方法网站测试项目及方法网站测试项目及方法 整整个个站站点点编编辑辑制制作作完完成成后后,最最终终需需要要在在服服务务器器上上发发布布.但但在在此此之之前前必必须须对对站站点点进进行行测测试试.测测试试以以后后,根根据据空空间间商商所所提提供供的资料的资料,将本地站点发布到服务器上将本地站点发布到服务器

45、上,并进行最后的测试并进行最后的测试. 在在创创建建一一个个Web站站点点时时,测测试试是是绝绝对对需需要要的的,我我们们无无法法掌掌握握用用户户的的浏浏览览器器版版本本、类类型型，用用尽尽可可能能多多的的浏浏览览器器和和系系统统中中浏浏览览自自己己的的页页面面是是很很关关键键的的。在在进进行行调调整整之之前前，必必须须对对颜颜色色、灰灰度度系系数数、页页面面偏偏移移和和容容量量的的变变化化进进行行观观察察。可可以以从从Dreamweaver MX2004中中进进行行一一个个比比较较基基础础、初初级级的的测测试试类类型型，那那就就是是代代码码测测试试。浏浏览览器器通通常常忽忽略略了了它它们们所

46、所不不理理解解的的标标记记和和属属性性,但但这这些些标标记记有有可可能能产产生生意意想想不不到到的的不不好好的的效效果果,所所以以,要首先检查目标浏览器的兼容性，步骤如下：要首先检查目标浏览器的兼容性，步骤如下：1.4 网站开发的流程1.4.6 网站测试与发布网站测试与发布 1. 网站测试项目及方法网站测试项目及方法 对站点进行测试，还必须从以下几个方面来完成。对站点进行测试，还必须从以下几个方面来完成。 1）检检查查目目标标浏浏览览器器的的兼兼容容性性。应应在在尽尽可可能能多多的的不不同同的的浏浏览览器器和和平平台台上上预预览览页页面面，查查看看布布局局、颜颜色色、字字体体大大小小和和默默认

47、认浏浏览览器器窗窗口口大大小小等等方方面面的的区别。这些区别在目标浏览器检查中是无法预见的。区别。这些区别在目标浏览器检查中是无法预见的。 2）检检查查站站点点是是否否有有断断开开的的链链接接，并并修修复复断断开开的的链链接接。由由于于其其它它站站点点也也在在重重新新设设计计、重重新新组组织织，所所以以所所链链接接的的页页面面可可能能已已被被移移动动或或删删除除，可可运运行链接检查报告对链接进行测试。行链接检查报告对链接进行测试。 3）监监测测页页面面的的文文件件大大小小以以及及下下载载这这些些页页面面所所占占用用的的时时间间。由由大大型型表表格格组组成成的的页页面面，在在某某些些浏浏览览器器

48、中中， 在在整整张张表表完完全全载载入入之之前前，访访问问者者将将什什么么也也看看不不到到。所所以以，应应考考虑虑将将大大型型表表格格分分为为几几部部分分，或或者者将将少少量量内内容容放放在在表表以外的页面顶部，这样在下栽表的同时，用户就可以查看这些内容。以外的页面顶部，这样在下栽表的同时，用户就可以查看这些内容。 1.4 网站开发的流程 1.4.6 1.4.6 网站测试与发布网站测试与发布网站测试与发布网站测试与发布 2. 2. 网站的发布网站的发布网站的发布网站的发布 将将网网页页设设计计完完成成并并测测试试成成功功之之后后，接接下下来来就就是是要要将将它它正正式式发发布布到到Intern

49、et上上。如如果果没没有有商商业业用用途途，仅仅仅仅只只是是为为了了娱娱乐乐，最最好好的的方方法法就就是是上上网网申申请请一一个个免免费费网网页页空空间间，这这样样既既不不花钱，又能看到自己的成果。花钱，又能看到自己的成果。 申请免费的个人主页空间之前，需要注意以下几点：申请免费的个人主页空间之前，需要注意以下几点： 1）网网站站空空间间的的容容量量。免免费费网网站站空空间间可可能能提提供供5MB到到20MB不不等等容容量量，要要先先衡衡量量一一下下自己的网页大小，再进行申请。自己的网页大小，再进行申请。 2）义义务务性性广广告告。申申请请免免费费网网页页空空间间，有有时时不不可可避避免免要要

50、附附带带提提供供方方的的广广告告，一一般般来来说说都都是是当当开开通通网网站站时时才才会会自自动动打打开开广广告告小小窗窗口口，有有些些是是在在网网站站顶顶部部自自动动生生成成广广告告栏栏，大大都都不不会会影响网站的浏览。影响网站的浏览。 3）文文件件上上传传的的方方式式。每每个个系系统统所所允允许许的的上上传传方方式式可可能能会会不不同同，虽虽然然现现在在大大部部分分的的网网站站均均使使用用FTP方方式式来来上上传传文文件件，也也可可以以使使用用cuteftp或或者者是是Dreamweaver MX2004来来实实现现上上传传。在在各各大大搜搜索索引引擎擎中中输输入入“免免费费空空间间”，即

51、即可可找找到到无无数数条条相相关关信信息息，选选择择合合适适的的网网站站，即即可可申申请一个免费主页空间。请一个免费主页空间。 但但是是免免费费主主页页空空间间有有很很多多缺缺点点，如如太太多多人人使使用用，空空间间小小，频频带带窄窄，易易堵堵塞塞，而而且且多多数数需需要要义义务务性性广广告告，随随时时会会被被取取消消服服务务。因因此此，在在经经济济允允许许的的条条件件下下，可可以以申申请请收收费费空空间间。提供收费空间的网站很多，价格也比较合适。提供收费空间的网站很多，价格也比较合适。 申请好网页空间后，接下来就要将整个网站上传到服务器。申请好网页空间后，接下来就要将整个网站上传到服务器。1

52、.4 网站开发的流程 1.4.7 网站维护与推广网站维护与推广 网网站站建建好好后后，要要推推广广它它，首首先先可可以以利利用用Email通通知知亲亲朋朋好好友友，最最好好在在Email中中加加入入简简介介和和网网址址，既既简简单单又又快快速速。为为了了增增加加站站点点的的访访问问量量，可可以以到到搜搜索索引引擎擎中中登登记记主主页页,但但目目前前这这是是收收费费服服务务，如如果果要要申申请请服服务务，可可以以直直接接到到相相关关网网站站上上查查询询，依依照照网网站站登登记记步步骤骤一一步一步进行下去即可。步一步进行下去即可。网站推广的基本方法主要有以下几种。1.搜索引擎注册2. 建立链接3.

53、利用公告栏和新闻组 4.发布网络广告 5.发送电子邮件 6.提供免费服务 7.使用传统的促销媒介 1.5 网站设计的要求 1.5.1 1.5.1 主题主题引人注目引人注目引人注目引人注目 只只有有题题材材引引人人注注目目，才才有有可可能能吸吸引引更更多多的的浏浏览览者者，并并给给他他们们留留系系深深刻刻的的印印象象，使使之之能能继继续续浏浏览览网网站站的的内内容容。所所以以在在选选择择题题材材时要根据我们前面学习的方法来选择，慎之又慎。时要根据我们前面学习的方法来选择，慎之又慎。 1.5.2 栏目布局合理栏目布局合理栏目布局合理栏目布局合理 设设计计制制作作网网页页时时最最容容易易犯犯的的错错

54、误误就就是是确确定定好好题题材材后后立立刻刻开开始始制制作作，这这样样往往往往会会出出现现网网站站结结构构不不清清晰晰、目目录录庞庞杂杂、内内容容放放置置无无规规律律等等不不足足，造造成成浏浏览览者者看看不不明明白白，扩扩充充和和维维护护网网站站也也困困难难的的后后果果。建建立立网网站站就就如如同同写写文文章章，首首先先要要拟拟好好提提纲纲，文文章章才才能能主主题题明明确确、层层次次清清晰晰；也也类类似似造造高高楼楼，首首先先要要设设计计好好框框架架图图纸纸，才才能能使使楼楼房房结结构构合合理理。所所以以，在在制制作作网网页页前前，一一定定还还要要确确定定好好栏栏目目内内容容及及设设计计好好版

55、版面布局。面布局。1.5 网站设计的要求 1 1栏目布局合理栏目布局合理栏目布局合理栏目布局合理 栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在确定栏目栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在确定栏目的时候，既要仔细考虑，又要合理安排。网站栏目确定和安排要做到以下几点：的时候，既要仔细考虑，又要合理安排。网站栏目确定和安排要做到以下几点： (1)确定栏目要紧扣主题确定栏目要紧扣主题 即即将将网网站站主主题题按按一一定定的的方方法法分分类类并并将将它它们们作作为为网网站站的的主主栏栏目目。如如以以动动画画题题材材为为主主的的网网页页可可以以将将栏

56、栏目目分分为为动动物物动动画画、标标志志动动画画、三三维维动动画画、卡卡通通动动画画等等，在在首首页页上上标标明明最最近近更更新新的的动动画画。要要使使主主题题栏栏目目个个数数在在总总栏栏目目中中要要占占绝绝对对优优势势，这这样样的的网网站站显显得得专专业业、主主题题突突出出，容容易易给给人人留留下下深深刻印象。刻印象。 (2)要设一个最近更新或网站指南的栏目要设一个最近更新或网站指南的栏目 首首页页设设立立一一个个“最最近近更更新新”的的栏栏目目，以以便便照照顾顾常常来来的的访访客客，使使主主页页更更具具人人性性化化。如如果果主主页页内内容容庞庞大大(超超过过15MB)、层层次次较较多多，又

57、又没没有有站站内内的的搜搜索索引引擎擎，就就需需要要设设置置“本本站站指指南南”栏栏目目，这这样可以帮助初访者快速找到他们想要的内容。样可以帮助初访者快速找到他们想要的内容。 (3)要设定一个可以双向交流的栏目要设定一个可以双向交流的栏目 设设定定如如论论坛坛、留留言言本本、邮邮件件列列表表等等双双向向交交流流的的栏栏目目，可可以以让让浏浏览览者者留留下下他他们们的的信信息息，这这样可使站点更具有亲和力。样可使站点更具有亲和力。 (4) 要设一个下载或常见问题回答栏目要设一个下载或常见问题回答栏目 网络的特点是信息共享。如果用户看到一个站点有大量的优秀的有价值的资料，他肯定网络的特点是信息共享

58、。如果用户看到一个站点有大量的优秀的有价值的资料，他肯定希望能一次性下载，而不是一页一页浏览存盘。如果在主页上设置一个资料下载栏目，会给浏览希望能一次性下载，而不是一页一页浏览存盘。如果在主页上设置一个资料下载栏目，会给浏览者带来很大的方便；另外，如果我们的站点经常收到浏览着关于某方面问题的来信，最好在网页者带来很大的方便；另外，如果我们的站点经常收到浏览着关于某方面问题的来信，最好在网页再设立一个常见问题回答的栏目，以便我们不断学习和更新网页。再设立一个常见问题回答的栏目，以便我们不断学习和更新网页。 1.5 网站设计的要求2. 2. 版面布局的设计版面布局的设计版面布局的设计版面布局的设计

59、 版版面面指指的的是是浏浏览览器器看看到到的的完完整整的的一一个个页页面面（可可以以包包含含框框架架和和层层）。因因为为每每个个用用户户的的显显示示器器分分辨辨率率不不同同，所所以以同同一一个个页页面面的的大大小小可可能能出出现现640*480像像素素、800*600像素、像素、1024*768像素等不同尺寸。像素等不同尺寸。 布布局局，就就是是以以最最适适合合浏浏览览的的方方式式将将图图片片和和文文字字排排放放在在页页面面的的不不同同位位置置，布布局局要要符符合合站站点点整整体体的的创创意意，同同时时它它也也是是一一个个创创意意的的问问题题，但但要要比比站站点点整整体体的的创创意意容易、更有

60、规律。版面布局的步骤是：容易、更有规律。版面布局的步骤是： (1) 草案草案 新新建建页页面面就就象象一一张张白白纸纸，没没有有任任何何表表格格、框框架架和和约约定定俗俗成成的的东东西西，我我们们可可以以尽尽可可能能的的发发挥挥想想象象力力，将将想想到到的的“景景象象”画画上上去去，尽尽量量多多画画几几个个方方案案，最最后后选定一个满意的作为继续创作的脚本。选定一个满意的作为继续创作的脚本。 (2) 粗略布局粗略布局 在在草草案案的的基基础础上上，将将确确定定需需要要放放置置的的功功能能模模块块安安排排到到页页面面上上。安安排排页页面面时时，一一定定要要遵遵循循突突出出重重点点、平平衡衡协协调

61、调的的原原则则，即即将将网网站站标标志志、主主菜菜单单等等最最重重要要的的模模块块放在最显眼、最突出的位置，然后再考虑次要模块的放置。放在最显眼、最突出的位置，然后再考虑次要模块的放置。 (3) 定案定案 即将粗略布局精细化，具体化。即将粗略布局精细化，具体化。 1.5 网站设计的要求 在布局过程中，常遵循的法则有：在布局过程中，常遵循的法则有： 平平衡衡和和对对称称。对对称称指指上上下下左左右右对对照照分分布布的的形形式式，主主要要强强调调秩秩序序感感，能能达达到到安安定定平平实实、和和谐谐的的效效果果；平平衡衡指指上上下下左左右右虽虽然然不不完完全全对对称称，但但却却能能达达到到视视觉觉上

62、的均衡，也能达到一种视觉稳定的效果，但比完全对称的形式显活泼。上的均衡，也能达到一种视觉稳定的效果，但比完全对称的形式显活泼。 对对比比。所所谓谓对对比比，目目的的是是为为了了强强调调和和突突出出，不不仅仅要要在在构构成成元元素素的的性性质质（图图形形和和文文字字）、色色彩彩搭搭配配上上来来对对比比表表现现，也也要要在在内内容容上上的的古古与与今今、新新与与旧旧存存在在对对比比。 凝凝视视。所所谓谓凝凝视视，就就是是利利用用页页面面中中人人物物视视线线，使使浏浏览览者者仿仿照照跟跟随随的的心心理理，以达到注视页面的效果，一般多用明星凝视状。以达到注视页面的效果，一般多用明星凝视状。 空空白白。

63、空空白白有有两两种种作作用用，一一方方面面对对其其它它网网站站表表示示突突出出；另另一一方方面面也也表表示网页品位的优越感，这种表现方法对体现网页的格调十分有效。示网页品位的优越感，这种表现方法对体现网页的格调十分有效。 图图片片。即即尽尽量量用用图图片片来来解解说说，对对不不能能用用语语言言说说服服、或或用用语语言言无无法法表表达达的情感，就要用图片来解说的内容，可以传达给浏览者的更多的信息。的情感，就要用图片来解说的内容，可以传达给浏览者的更多的信息。 上上述述的的设设计计法法则则，如如果果能能领领会会并并活活用用到到页页面面布布局局里里，页页面面视视觉觉效效果果就就会会更更好好。如如：网

64、网页页的的白白色色背背景景太太虚虚，则则可可以以加加些些色色块块；版版面面零零散散，可可以以用用线线条条和和符符号号来来串串联联；左左面面文文字字过过多多，右右面面则则可可以以插插一一张张图图片片保保持持平平衡衡；表表格格太太规规矩矩，可可以以改用导角等等。改用导角等等。1.5 网站设计的要求2栏目布局合理栏目布局合理2) 版面布局的设计版面布局的设计 以以上上只只是是常常见见的的布布局局形形式式，要要想想设设计计出出别别具具一一格格的的布布局局形形式式，还还要要经经过过长长期期的的实实践践学学习习不不断断提提高高视视觉觉感感受受能能力力后后才才能能实实现现。版版面面在在布布局局过过程程中中，

65、还还应应注注意意做做到到以以下下几几点：点： 要加强页面的视觉效果；要加强页面的视觉效果； 要加强文案的可视度和可读性；要加强文案的可视度和可读性； 要统一整个页面的风格；要统一整个页面的风格； 要具有新鲜感和个性化。要具有新鲜感和个性化。 1.5 网站设计的要求 1.5.3 网站的结构清晰网站的结构清晰网站的结构清晰网站的结构清晰 指网站的目录结构和链接结构清晰明了。要使网站的目录结构清晰，一般做法是：指网站的目录结构和链接结构清晰明了。要使网站的目录结构清晰，一般做法是： 1）不不要要将将所所有有文文件件都都存存放放在在根根目目录录下下。不不要要为为了了方方便便，将将所所有有文文件件都都放

66、放在在根根目目录录下下。这这样样做做的的不不利利影影响响是是一一方方面面造造成成文文件件管管理理混混乱乱，使使我我们们常常常常搞搞不不清清哪哪些些文文件件需需要要编编辑辑和和更更新新、哪哪些些无无用用的的文文件件可可以以删删除除、哪哪些些是是相相关关联联的的文文件件，很很影影响响工工作作效效率率；另另一一方方面面造造成成上上传传速速度度慢慢，服服务务器器一一般般都都会会为为根根目目录录建建立立一一个个文文件件索索引引。当当所所有有文文件件都都放放在在根根目目录录下下，那那么么即即使使只只上上传传更更新新一一个个文文件件，服服务务器器也也需需要要将将所所有有文文件件再再检检索索一一遍遍，建建立立

67、新新的的索索引引文文件件。这这样样很很明明显显文文件件量量越越大，等待的时间也将越长。所以，要尽可能减少根目录的文件存放数。大，等待的时间也将越长。所以，要尽可能减少根目录的文件存放数。 2）要要按按栏栏目目内内容容建建立立子子目目录录。子子目目录录的的建建立立，首首先先要要按按主主菜菜单单栏栏目目建建立立。如如:网网页页教教程程类类站站点点可可以以根根据据技技术术类类别别分分别别建建立立相相应应的的目目录录，象象Flash、Dhtml、Javascript等等；企企业业站站点点可可以以按按公公司司简简介介、产产品品介介绍绍、价价格格，、在在线线定定单单、反反馈馈联联系系等等建建立立相相应应目

68、目录录。其其它它的的次次要要栏栏目目，若若友友情情连连接接内内容容较较多多、需需要要经经常常更更新新的的可可以以建建立立独独立立的的子子目目录录。而而一一些些相相关关性性强强、不不需需要要经经常常更更新新的的栏栏目目，如如：关关于于本本站站、关关于于站站长长、站站点点经经历历等等可可以以合合并并放放在在一一个个统统一一目目录录下下。为为了了便便于于维维护护和和管管理理，所所有有程程序序一一般般都都存存放放在在特特定定的的目目录录，如如：CGI程程序序放放在在cgi-bin目目录录；所所有有需需要要下下载的内容也最好放在一个目录下。载的内容也最好放在一个目录下。 3）在在每每个个主主目目录录下下

69、都都建建立立独独立立的的images目目录录。一一个个站站点点根根目目录录下下都都有有一一个个默默认认的的images目目录录,主主页页制制作作时时，不不要要将将所所有有图图片片都都存存放放在在这这个个目目录录里里,如如果果这这样样,我我们们将将某某个个主主栏栏目目打打包包供供浏浏览览者者下下载载，或或者者将将某某个个栏栏目目删删除除时时，图图片片的的管管理理会会相相当当麻麻烦烦。为为了了方方便便管管理理,为为每每个个主主栏栏目目建建立立一一个个独独立立的的images目目录录是是很很必必要要的的,而而根根目目录录下下的的images目目录录只只是是用用来来放放首首页页和和一一些些次次要要栏目

70、的图片。栏目的图片。 4）目录的层次不要太深。）目录的层次不要太深。为了维护管理方便为了维护管理方便,目录的层次一般不要超过目录的层次一般不要超过3层。层。按照文件类型进行分类管理。即将不同类型的文件存放在不同的文件夹中。该方法通过文件的类型对文件进行管理（如图所示）。 对于文件类型复杂、文件数量众多，信息量大的网站，一种方法，可以对文件的类型进行进一步细分存储管理；另一种方法，可以按照不同的主题进行分类存储。关于某个主题的所有文件被存放在一个文件夹中，然后再进一步细分文件的类型。（如图所示） 1.5 网站设计的要求 其它需要注意的有：其它需要注意的有：其它需要注意的有：其它需要注意的有： 不

71、不要要使使用用中中文文目目录录.网网络络无无国国界界，使使用用中中文文目目录可能对网址的正确显示造成困难；录可能对网址的正确显示造成困难； 不不要要使使用用过过长长的的目目录录.尽尽管管服服务务器器支支持持长长文文件件名，但是太长的目录名不便于记忆；名，但是太长的目录名不便于记忆； 尽量使用意义明确的目录尽量使用意义明确的目录.上面的例子中，我上面的例子中，我们可以用们可以用Flash、Dhtml、Javascript来建立目录，也可以来建立目录，也可以用以上三种方法建立目录，但是更明确、更便于记忆和用以上三种方法建立目录，但是更明确、更便于记忆和管理的还是应用前者。管理的还是应用前者。 1.

72、5 网站设计的要求 要要使使网网站站的的链链接接结结构构清清晰晰明明了了，一一般般做做法法是是：首首页页和和一一级级页页面面之之间间用用星星状状链链接接结结构构，一一级级和和二二级级页页面面之之间间用用树树状状链链接接结结构构。如：一个新闻站点的页面结构如下：如：一个新闻站点的页面结构如下： 一级页面一级页面 二级页面二级页面 财经新闻页财经新闻页 - 财经新闻财经新闻1，财经新闻，财经新闻2. / | 首页首页 - 娱乐新闻页娱乐新闻页 - 娱乐新闻娱乐新闻1，娱乐新闻，娱乐新闻2. | IT新闻页新闻页 - IT新闻新闻1，IT新闻新闻2. 其其中中，首首页页、财财经经新新闻闻页页、娱娱乐

73、乐新新闻闻页页、IT新新闻闻页页之之间间是是星星状状链链接接，可可以以互互相相点点击击，直直接接到到达达。而而财财经经新新闻闻页页和和它它的的子子页页面面之之间间是是树树状状连连接接，浏浏览览财财经经新新闻闻1后后，我我们们必必须须回回到到财财经经新新闻闻页页，才才能能浏浏览览IT新新闻闻2.所所以以,如如果果为为了了免免去去返返回回一一级级页页面面的的麻麻烦烦，可可将将二二级级页页面面直直接接用用新新开开窗窗口口(POP up windows)打打开开，浏浏览览结结束束后后关关闭即可。闭即可。1.5 网站设计的要求 以以上上我我们们都都是是用用的的三三级级页页面面举举例例。如如果果站站点点内

74、内容容庞庞大大、分分类类明明细细，需需要要超超过过三三级级页页面面，那那么么一一定定要要在在页页面面里里显显示示导导航航条条，帮助浏览者明确自己所处的位置。帮助浏览者明确自己所处的位置。 另另外外，随随着着电电子子商商务务的的推推广广，网网站站竞竞争争的的越越来来越越激激烈烈，对对链链接接结结构构设设计计的的要要求求已已经经不不仅仅仅仅局局限限于于可可以以方方便便快快速速的的浏浏览览，而而且且更更加加注注重重个个性性化化和和相相关关性性。如如在在一一个个爱爱婴婴主主题题网网站站里里，在在八八个个月月婴婴儿儿的的营营养养问问题题的的页页面面上上，需需要要加加入入八八个个月月婴婴儿儿的的健健康康问

75、问题题链链接接、智智力力培培养养链链接接,或或者者是是有有关关奶奶粉粉宣宣传传的的链链接接、一一本本图图书书、一一个个玩玩具具的的链链接接等等,因因为为父父母母不不可可能能到到每每个个栏栏目目下下去去寻寻找找关关于于八八个个月月婴婴儿的所有信息，他们可能在找到需要的问题后就离开网站了。儿的所有信息，他们可能在找到需要的问题后就离开网站了。 所所以以清清晰晰明明了了的的网网站站结结构构，可可以以帮帮助助我我们们留留住住访访问问者者，实实现网页设计的目的。现网页设计的目的。 1.5 网站设计的要求 1.5.4 1.5.4 色彩搭配悦目色彩搭配悦目色彩搭配悦目色彩搭配悦目 2. 2. 网页色彩搭配的

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

77、选用用一一类类色色。就就是是用用一一个个感感觉觉的的色色彩彩，例例如如淡淡蓝蓝、淡黄、淡绿；或者土黄、土灰、土蓝。这样，使人有一个整体感。淡黄、淡绿；或者土黄、土灰、土蓝。这样，使人有一个整体感。 （4） 用用黑黑色色和和一一种种彩彩色色。比比如如大大红红的的字字体体配配黑黑色色的的边边框框感觉就会很醒目。感觉就会很醒目。1.5 网站设计的要求 网页色彩搭配的技巧网页色彩搭配的技巧网页色彩搭配的技巧网页色彩搭配的技巧 在网页配色中，忌讳的是：在网页配色中，忌讳的是： （1） 网网页页上上出出现现的的颜颜色色不不要要太太多多，尽尽量量控控制制在在三三种种色彩以内。色彩以内。 （2） 背背景景和和前前文文的的对对比比尽尽量量要要大大，不不要要用用花花纹纹繁繁复复的图案作背景，以便突出主要文字内容。的图案作背景，以便突出主要文字内容。 在在The Open Road网网站站上上提提供供了了一一张张网网页页基基本本配配色色表，是非常有价值的资料，设计网页时可以参考。表，是非常有价值的资料，设计网页时可以参考。