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

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

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

2、ash 视频内容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 资源面板 资源包括存储在站点中的各种元素，如图像或影片文件。【资源】面板提供了两种查看资源的方式。【站点】列表显示站点的所有资源。【收藏】列表仅显示明确选择的资源。,2

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

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

6、该名称采用原站点名称后添加【我的站点复制】字样的形式。】如有需要，可以选中新复制的站点，然后单击【编辑】按钮，对之进行编辑，例如修改站点名称等。在【管理站点】对话框中单击【完成】按钮，完成对该站点复制的操作。,2.5 站点的基本操作,2.5.3 操作站点文件利用【站点】窗口，可以对本地站点的文件夹和文件进行创建、删除和复制等操作。1.创建文件和文件夹,提示：如果要修改文件的名称或文件夹的名称，可以单击文件的名称或文件夹的名称，或按下F2键，激活文字编辑状态，然后输入想要的名称即可。,2.文件的移动和复制 与大多数文件管理器一样，用户可以利用剪切、复制和粘贴操作来实现文件或文件夹的移动和复制。,

7、提示：移动或复制文件，由于文件的位置发生了变化，其中的链接信息(特别是相对链接)可能发生了相应的变化。Dreamweaver8会打开如图2.37所示的对话框，提示是否要更新被移动或复制的文件中的链接信息。如果需要更新，则从列表中选择要更新的文件，单击【更新】按钮，则更新文件中的链接信息。,3.删除文件 要从本地文件列表中删除文件，可以按照以下方法进行。(1)选中要删除的文件或文件夹。(2)在【编辑】菜单中，选择【删除】命令，或是按下Del键。(3)这时系统会出现一个提示对话框，询问用户是否真的要删除文件或文件夹，单击【是】按钮，即可将文件或文件夹从本地站点中删除。,提示：与站点的删除操作不同，

8、对文件或文件夹的删除操作，会从磁盘上真正地删除相应的文件或文件夹。,1.1 与网页制作相关的术语,1.1.1 网站与网页 当我们在浏览器中输入一个已知网址后，即可打开一个页面，让我们了解有关这个网址的一些信息和内容，这个页面就是我们通常所说的网页，而打开网络由网址进入时第一个看到的页面，我们通常把它称为首页（home page）或主页，所有的信息都会清楚地整理在这个页面上，目的就是为了让用户在使用这个网页时能快速链接到需要的资料，它既是一个单独的网页，同一般网页一样可以存放各种信息,又是一个特殊的网页，是整个Web站点的起始点和汇总点，是用户开始浏览站点的“入口处”。由首页所延伸下去的页面，就

9、是一个个网页。网页又称Web页面，是网络文件的组成部分，是可以被浏览器访问的单个HTML超文本文件,它由文字、表格、图片、声音、视频以及各种功能按钮等组成，这些文字、图片、按钮往往又是指向别的主页的连接点。在Internet网上，这些连接点又叫超级链接。所有由首页链接出去的网页集合起来就是网站。即在设计时，将某个主题明确后，再按所需的单元、内容经过安排，化为各个不同的网页，在同一个结构及诉求下出现的集合体，就是网站（Web Site）。有主题性的网站是要经过规划和构架过的网站。在互联网上，Web站点由一组相互关联的页面组成，如果把整个WWW信息世界看作一个村子，那么一个Web站点可以理解成一个

10、家庭。,1.1 与网页制作相关的术语,1.1.2 服务器（Server）与浏览器（Browser）服务器是局域网的核心设备,它管理着局域网中的各种资源,它的基本功能是网络通信服务、管理和提供网络共享资源，以及进行网络管理。服务器实质是一台配置较高的计算机。不同的电脑操作系统，有不同的适用服务器软件，如：微软视窗windows XP Professional操作系统适用的服务器软件IIS5.1网站上动态的数据，必须要通过网站服务器的服务才能运作。用于查看Web站点的软件被称作浏览器。它是WWW的窗口,用户可以利用浏览器从一个文档跳转到另一个文档实现对整个网站的浏览,也可以下载并解释HTML文档中

11、所描述的动画、声音、文本、图形、图像，并能实现电子邮件查看、下载文件、FTD等功能。它有多种版本,如微软英特尔版本、苹果电脑版本等，大多数浏览者（目前已经超过90）使用Microsoft Internet Explorer(简称IE)浏览器.还有一些其他的浏览器，不同版本的浏览器功能大体一样，主要区别在于各功能区在版面上的排列不同。,1.1.3 远程站点(Remote Site)和本地站点（Local Site）远程站点是指服务器上组成的Web站点。本地站点是指与远程站点上的文件对应的本地磁盘上的文件。在制作网页时，首先要定义一个本地站点。作为一个网站，里面有很多网页文件、图片、Flash动画

12、等，如果不进行管理归档，分散在硬盘的各个地方,就无法方便地进行网页发布。定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。一般在设计网页之前，先要以设计的网页的名称新建一个文件夹，把它放在电脑中常用来存储文件的磁盘中，如“我的网页”、“个人网页”等的文件夹里，也可以根据自己的习惯放置文件。,1.1 与网页制作相关的术语,1.1.4 统一资源定位器URL URL即Uniform Resource Locator（统一资源定位器）的缩写。用来指明主机或文件在Internet上的位置，一个URL就是一个资源在Internet上的具体位置，URL由I

13、nternet资源类型、服务器地址、端口及路径组成，如：http:/就是一个典型的URL。它的作用在于提供一个标准方法，以便能够在Internet上找到任何东西。无论是单一的页面，还是庞大复杂的网站，甚至是一个小小的图片，所有的网络资源都能通过URL系统访问到。,1.1 与网页制作相关的术语,1.文字 文字是网页最基本的构成要素，一个网页上大部分是由文字构成的，由于文字所表达内容比较清楚、直接,而且相对占用网页版面面积较小，使网页所表达的信息量加大，所以网上用来表达内容或链接的大部分是文字。文字也称文本，网页有90左右是由文本组成。首页上的文本基本上都是用来链接用的。,1.3 网页界面的构成要

14、素,2.图像 图形和图像也是网页主要的构成要素，它有动态和静态之分，和文字的功能一样，也是基本上用来链接用的，它比文字看上去更加直观，更让人容易理解内容。图形可提高站点的访问率，但不能因此而在网页上加入过多的图片，这样会适得其反，一方面由于图形占网页空间较大，使网页信息量相对减少；另一方面由于图片较多，使网页显示的速度降低，用户浏览网页花费的时间较长。Web图形的文件标准格式是JPG、GIF和PNG，对颜色具有平滑渐变的图像使用JPG格式，如大多数照片；对于以单一颜色为主的图像，使用GIF格式。,1.3 网页界面的构成要素,1.3 网页界面的构成要素,3.超链接 超链接由两个端点及一个方向构成

15、。通常开始的位置称为源端点，目标位置称作目标端点。链接就是由源端点指向目标端点的一种跳转。目标端点可以是一个页面、一幅图像、一段声音、或者是页面中的某个位置。利用超链接可以实现文档间或文档中的跳转。根据源端点的不同，可以将超链接分为两种：超文本（Hypertext）和超链接（Hyperlink）。超文本就是源端点的文本的链接。而超链接是利用文本以外的对象作为源端点所创建的链接，如图像、表单等。,1.3 网页界面的构成要素,4.交互功能 交互功能，即网上提供的聊天、论坛、留言本、邮件发送及接收的互动功能。这也是互连网的一大优势所在，它给人提供了一个快捷交流的平台，给人的生活带来了许多便利。,1.

16、3 网页界面的构成要素,5.多媒体（Multimedia）多媒体就是指各种各样的信息载体在计算机中的应用，是一种文字、声音、图像、动画和视频影像成分的交互组合。网页中的多媒体主要指采用音频和视频功能的软硬件技术，包括数字音响、全动态图像、超媒体连接等，主要是对声音、图像具有编辑处理的功能，即网页上提供的音频和视频下载及播放功能，包括Flash动画、声音与影片文件的播放。它必须通过网络媒体播放器来实现，有多种网络媒体播放器。如常用的有Windows Media Player和 Realone Player等播放器。,1.4 网站开发的流程,设计开发一个网站要考虑很多因素，如站点的定位、确定网站的

17、目录和链接结构、首页的设计制作及网站的测试、发布和维护等，这些因素的考虑，是一个环环相扣的过程，要想设计制作一个成功的网站，对每一个环节的把握都十分重要。,1.4.1 确定网站的目的和主题 1.确定网站主题 2.为网站命名,1.4 网站开发的流程,1.4.2 定位网站CI形象 CI形象是借用的广告术语。(CI是英文corporate identity的缩写)，意思是通过视觉来统一企业的形象。企业一般都要通过CI形象的策划来提高知名度，它是一种营销战略。如较早地成功导入CI战略的世界知名公司有可口可乐、SONY、三菱、麦当劳等。一个网站，和实体公司一样，也需要整体的形象包装和定位准确的、有创意的

18、CI 设计，这样对网站的宣传推广有事半功倍的效果。网站主题和名称定下来之后，需要思考的就是网站的CI形象设计。网站的CI形象设计和企业的CI形象设计的内容相似，主要包括：,1.4 网站开发的流程,1.4 网站开发的流程,1.4.2 定位网站CI形象 1.设计网站的标志(logo)即网标。和商品的商标、企业的标志一样，网标是站点特色和内涵的集中体现，看见它就让人联想到它所代表的站点。如新浪网的 网标就体现出新浪网的快捷、准确、精华的特色。标志图形可以只由中文、英文字母构成，也可以只由符号、图案（动物、植物、人物、几何）构成，还可以由文字和图形构成。如：soim是用soim的英文做为标志，新浪用字

19、母sina和眼睛作为标志。标志的设计创意来自网站的名称和内容。1）以用与网站名称相关的人物，动物，花草等作为设计的主体对象，通过抽象、概括、变形等手法，使之艺术化、标志化，如迪斯尼的米老鼠、搜狐的卡通狐狸等。2）专业性较强的网站，可以以本专业有代表的物品作为设计的主体对象。如中国银行的古钱标志、奔驰汽车的方向盘标志等。3)最常用和最简单的方式，是用网站的英文名称的字体作为设计的主体对象，用不同的字体、字母的变形及字母的组合，使之艺术化、标志化。,LOGO的国际标准规范：88*31 这是互联网上最普遍的LOGO规格，本站所收集的均是这种大小120*60 这种规格用于一般大小的LOGO120*90

20、 这种规格用于大型LOGO。,1.4.2 定位网站CI形象 2.设计网站的标准色彩 网站给人的第一印象来自视觉的冲击感，确定网站的标准色彩是相当重要的一步。不同的色彩搭配会产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩。如：IBM的深蓝色、肯德基的红色条型、Windows视窗标志上的红、蓝、黄、绿色块等，都会给我们不同的视觉感受。,1.4 网站开发的流程,一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。标准色彩要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。一般来说，

21、适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。,1.4 网站开发的流程,1.4.2 定位网站CI形象 3.设计网站的宣传标语 网站的宣传标语，就是把网站的精神、目标用一句话或一个词来高度概括。类似生活中的广告语。如雀巢的“味道好极了”、麦斯威尔的“好东西和好朋友一起分享”、Intel的“给你一个奔腾的心”等。网站的标志、色彩、字体和标语，是一个网站树立CI形象的关键，也是一个网站档次高低的直接体现，所以，定位网站的CI形象，最好要有艺术设计人员参与。,1.4 网站开发的流程,1.4.3 资料收集、制作与整理 网站资料主要包括文本、图像两大类，大部分在放入网页前都需要做适当的

22、修改和处理。另外，依据网站的主题亮点，还可能准备如声音、Flash影片、图像等需要在网页中展示的内容。搜集资料时范围要广泛，在进行网页设计时再整理与筛选。,1.4 网站开发的流程,1.4.4 规划网站的目录结构和链接结构 站点确定后，接下来就要规划网站的结构，网站的结构分目录结构和链接结构。确定网站的结构目的是便于网站的使用和维护。网站的目录是指在建立网站定义站点时创建的目录，如有类似“我的网页”的根目录和“我的家”的子目录。目录的结构是一个很容易忽略的问题，目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护、内容未来的扩充和移植有着重要的影响。如建立E:/我的网页我

23、的家文字、图片、链接等较清晰的目录，就便于网站的管理和维护。网站的链接结构是指页面之间相互链接的拓扑结构，它建立在目录结构基础之上，但可以跨越目录。形象地说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。确立网站的链接结构的目的是用最少的链接，使得浏览最有效率。,1.4 网站开发的流程,1.4.4 规划网站的目录结构和链接结构 一般来说，确定网站的目录结构有两种基本方式：,1.4 网站开发的流程,1.4.4 规划网站的目录结构和链接结构 一般来说，确定网站的链接结构有两种

24、基本方式：1)树状链接结构（一对一）。类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会“迷”路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。如:校园动态-教师活动-学生活动 首页 教学园地-教师成果-学生作品,1.4 网站开发的流程,1.4.4 规划网站的目录结构和链接结构 2)星状链接结构（一对多）。类似网络服务器的链接，每个页面相互之间都建立有链接。立体结构象东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便，随时可

25、以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置、看了多少内容。如:校园动态-教师活动-学生活动 首页 教学园地-教师成果-学生作品 这两种基本结构都只是理想方式，在实际的网站设计中，一般要将这两种结构混合起来使用。,1.4 网站开发的流程,1.4.5 首页的设计与制作 确立好了网站的结构，就可以对网站的首页进行设计了，首页的设计是一个网站成功与否的关键。用户往往看到第一页就已经对站点有一个整体的感觉，是不是能够促使他们继续点击进入或者使他们的视线留在站点上，首页设计的好坏是至关重要的,所以,首页的设计和制作是一定要重视和花费精力的,一般首页设计和制作占整个制作时间

26、的40%左右,这样可以避免出现全部制作好以后再修改带来的麻烦。首页，从根本上说就是全站内容的目录，是一个索引,但不是一个简单的目录的罗列，如何设计好一个首页呢？一般的步骤是：,1.4 网站开发的流程,1.4.5 首页的设计与制作 1.确定首页的功能模块 首页的内容模块是指你需要在首页上实现的主要内容和功能。一般的站点都需要这样一些模块：网站名称(logo)、广告条(banner)、主菜单(menu)、新闻(whats new)、搜索(search)、友情链接(links)、邮件列表(maillist)、计数器(count)、版权(copyright).选择哪些模块，实现哪些功能，是否需要添加其

27、他模块都是首页设计首先需要确定的。,1.4 网站开发的流程,1.4.5 首页的设计与制作 2.设计首页的版面 在功能模块确定后，开始设计首页的版面。就象搭积木一样，每个模块是一个单位积木，如何拼搭出一座漂亮的房子，就要看设计师的创意和想象力了。设计版面的最好方法是先勾勒出理想中的草图，然后再用网页制作软件来实现。,1.4.5 首页的设计与制作,常用到的版面布局形式有：“T”字型结构布局。所谓“T”结构。就是指页面顶部为横条网站标志和广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母“T”,所以我们称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。这

28、种布局的优点是页面结构清晰、主次分明，是较容易学习和掌握的布局方法。缺点是规矩、呆板，如果细节色彩上再处理不好（没有对比），就会让人觉得无味。,http:/,“口”字型布局。就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型进行设计，如网易壁纸站。,http:/,“三”字型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。,对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设

29、计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。,POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，如ELLE.com等。优点是显而易见、漂亮、吸引人。缺点是速度慢。,1.4 网站开发的流程,1.4.6 网站测试与发布 1.网站测试项目及方法 整个站点编辑制作完成后,最终需要在服务器上发布.但在此之前必须对站点进行测试.测试以后,根据空间商所提供的资料,将本地站点发布到服务器上,并进行最后的测试.在创建一个Web站点时,测试是绝对需要的,我们无法掌握用户的浏览器版本、类型，用尽可能多的浏览器和系统中浏览自己的页面是

30、很关键的。在进行调整之前，必须对颜色、灰度系数、页面偏移和容量的变化进行观察。可以从Dreamweaver MX2004中进行一个比较基础、初级的测试类型，那就是代码测试。浏览器通常忽略了它们所不理解的标记和属性,但这些标记有可能产生意想不到的不好的效果,所以,要首先检查目标浏览器的兼容性，步骤如下：,1.4 网站开发的流程,1.4.6 网站测试与发布 1.网站测试项目及方法 对站点进行测试，还必须从以下几个方面来完成。1）检查目标浏览器的兼容性。应在尽可能多的不同的浏览器和平台上预览页面，查看布局、颜色、字体大小和默认浏览器窗口大小等方面的区别。这些区别在目标浏览器检查中是无法预见的。2）检

31、查站点是否有断开的链接，并修复断开的链接。由于其它站点也在重新设计、重新组织，所以所链接的页面可能已被移动或删除，可运行链接检查报告对链接进行测试。3）监测页面的文件大小以及下载这些页面所占用的时间。由大型表格组成的页面，在某些浏览器中，在整张表完全载入之前，访问者将什么也看不到。所以，应考虑将大型表格分为几部分，或者将少量内容放在表以外的页面顶部，这样在下栽表的同时，用户就可以查看这些内容。,1.4 网站开发的流程,1.4.6 网站测试与发布 2.网站的发布 将网页设计完成并测试成功之后，接下来就是要将它正式发布到Internet上。如果没有商业用途，仅仅只是为了娱乐，最好的方法就是上网申请

32、一个免费网页空间，这样既不花钱，又能看到自己的成果。申请免费的个人主页空间之前，需要注意以下几点：1）网站空间的容量。免费网站空间可能提供5MB到20MB不等容量，要先衡量一下自己的网页大小，再进行申请。2）义务性广告。申请免费网页空间，有时不可避免要附带提供方的广告，一般来说都是当开通网站时才会自动打开广告小窗口，有些是在网站顶部自动生成广告栏，大都不会影响网站的浏览。3）文件上传的方式。每个系统所允许的上传方式可能会不同，虽然现在大部分的网站均使用FTP方式来上传文件，也可以使用cuteftp或者是Dreamweaver MX2004来实现上传。在各大搜索引擎中输入“免费空间”，即可找到无

33、数条相关信息，选择合适的网站，即可申请一个免费主页空间。但是免费主页空间有很多缺点，如太多人使用，空间小，频带窄，易堵塞，而且多数需要义务性广告，随时会被取消服务。因此，在经济允许的条件下，可以申请收费空间。提供收费空间的网站很多，价格也比较合适。申请好网页空间后，接下来就要将整个网站上传到服务器。,1.4 网站开发的流程,1.4.7 网站维护与推广 网站建好后，要推广它，首先可以利用Email通知亲朋好友，最好在Email中加入简介和网址，既简单又快速。为了增加站点的访问量，可以到搜索引擎中登记主页,但目前这是收费服务，如果要申请服务，可以直接到相关网站上查询，依照网站登记步骤一步一步进行下

34、去即可。,网站推广的基本方法主要有以下几种。1.搜索引擎注册2.建立链接3.利用公告栏和新闻组 4.发布网络广告 5.发送电子邮件 6.提供免费服务 7.使用传统的促销媒介,1.5 网站设计的要求,1.5.1 主题引人注目 只有题材引人注目，才有可能吸引更多的浏览者，并给他们留系深刻的印象，使之能继续浏览网站的内容。所以在选择题材时要根据我们前面学习的方法来选择，慎之又慎。1.5.2 栏目布局合理 设计制作网页时最容易犯的错误就是确定好题材后立刻开始制作，这样往往会出现网站结构不清晰、目录庞杂、内容放置无规律等不足，造成浏览者看不明白，扩充和维护网站也困难的后果。建立网站就如同写文章，首先要拟

35、好提纲，文章才能主题明确、层次清晰；也类似造高楼，首先要设计好框架图纸，才能使楼房结构合理。所以，在制作网页前，一定还要确定好栏目内容及设计好版面布局。,1.5 网站设计的要求,1栏目布局合理 栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在确定栏目的时候，既要仔细考虑，又要合理安排。网站栏目确定和安排要做到以下几点：(1)确定栏目要紧扣主题 即将网站主题按一定的方法分类并将它们作为网站的主栏目。如以动画题材为主的网页可以将栏目分为动物动画、标志动画、三维动画、卡通动画等，在首页上标明最近更新的动画。要使主题栏目个数在总栏目中要占绝对优势，这样的网站显得专业、主题突出，容易

36、给人留下深刻印象。(2)要设一个最近更新或网站指南的栏目 首页设立一个“最近更新”的栏目，以便照顾常来的访客，使主页更具人性化。如果主页内容庞大(超过15MB)、层次较多，又没有站内的搜索引擎，就需要设置“本站指南”栏目，这样可以帮助初访者快速找到他们想要的内容。(3)要设定一个可以双向交流的栏目 设定如论坛、留言本、邮件列表等双向交流的栏目，可以让浏览者留下他们的信息，这样可使站点更具有亲和力。(4)要设一个下载或常见问题回答栏目 网络的特点是信息共享。如果用户看到一个站点有大量的优秀的有价值的资料，他肯定希望能一次性下载，而不是一页一页浏览存盘。如果在主页上设置一个资料下载栏目，会给浏览者

37、带来很大的方便；另外，如果我们的站点经常收到浏览着关于某方面问题的来信，最好在网页再设立一个常见问题回答的栏目，以便我们不断学习和更新网页。,1.5 网站设计的要求,2.版面布局的设计 版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个用户的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素、800*600像素、1024*768像素等不同尺寸。布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置，布局要符合站点整体的创意，同时它也是一个创意的问题，但要比站点整体的创意容易、更有规律。版面布局的步骤是：(1)草案 新建页面就象一张白纸，没有任何表格、框架和约

38、定俗成的东西，我们可以尽可能的发挥想象力，将想到的“景象”画上去，尽量多画几个方案，最后选定一个满意的作为继续创作的脚本。(2)粗略布局 在草案的基础上，将确定需要放置的功能模块安排到页面上。安排页面时，一定要遵循突出重点、平衡协调的原则，即将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的放置。(3)定案 即将粗略布局精细化，具体化。,1.5 网站设计的要求,在布局过程中，常遵循的法则有：平衡和对称。对称指上下左右对照分布的形式，主要强调秩序感，能达到安定平实、和谐的效果；平衡指上下左右虽然不完全对称，但却能达到视觉上的均衡，也能达到一种视觉稳定的效果，但比完全对

39、称的形式显活泼。对比。所谓对比，目的是为了强调和突出，不仅要在构成元素的性质（图形和文字）、色彩搭配上来对比表现，也要在内容上的古与今、新与旧存在对比。凝视。所谓凝视，就是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。空白。空白有两种作用，一方面对其它网站表示突出；另一方面也表示网页品位的优越感，这种表现方法对体现网页的格调十分有效。图片。即尽量用图片来解说，对不能用语言说服、或用语言无法表达的情感，就要用图片来解说的内容，可以传达给浏览者的更多的信息。上述的设计法则，如果能领会并活用到页面布局里，页面视觉效果就会更好。如：网页的白色背景太虚，则可以加些

40、色块；版面零散，可以用线条和符号来串联；左面文字过多，右面则可以插一张图片保持平衡；表格太规矩，可以改用导角等等。,1.5 网站设计的要求,2栏目布局合理2)版面布局的设计 以上只是常见的布局形式，要想设计出别具一格的布局形式，还要经过长期的实践学习不断提高视觉感受能力后才能实现。版面在布局过程中，还应注意做到以下几点：要加强页面的视觉效果；要加强文案的可视度和可读性；要统一整个页面的风格；要具有新鲜感和个性化。,1.5 网站设计的要求,1.5.3 网站的结构清晰 指网站的目录结构和链接结构清晰明了。要使网站的目录结构清晰，一般做法是：1）不要将所有文件都存放在根目录下。不要为了方便，将所有文

41、件都放在根目录下。这样做的不利影响是一方面造成文件管理混乱，使我们常常搞不清哪些文件需要编辑和更新、哪些无用的文件可以删除、哪些是相关联的文件，很影响工作效率；另一方面造成上传速度慢，服务器一般都会为根目录建立一个文件索引。当所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件。这样很明显文件量越大，等待的时间也将越长。所以，要尽可能减少根目录的文件存放数。2）要按栏目内容建立子目录。子目录的建立，首先要按主菜单栏目建立。如:网页教程类站点可以根据技术类别分别建立相应的目录，象Flash、Dhtml、Javascript等；企业站点可以按公司简

42、介、产品介绍、价格，、在线定单、反馈联系等建立相应目录。其它的次要栏目，若友情连接内容较多、需要经常更新的可以建立独立的子目录。而一些相关性强、不需要经常更新的栏目，如：关于本站、关于站长、站点经历等可以合并放在一个统一目录下。为了便于维护和管理，所有程序一般都存放在特定的目录，如：CGI程序放在cgi-bin目录；所有需要下载的内容也最好放在一个目录下。3）在每个主目录下都建立独立的images目录。一个站点根目录下都有一个默认的images目录,主页制作时，不要将所有图片都存放在这个目录里,如果这样,我们将某个主栏目打包供浏览者下载，或者将某个栏目删除时，图片的管理会相当麻烦。为了方便管理

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

44、无国界，使用中文目录可能对网址的正确显示造成困难；不要使用过长的目录.尽管服务器支持长文件名，但是太长的目录名不便于记忆；尽量使用意义明确的目录.上面的例子中，我们可以用Flash、Dhtml、Javascript来建立目录，也可以用以上三种方法建立目录，但是更明确、更便于记忆和管理的还是应用前者。,1.5 网站设计的要求,要使网站的链接结构清晰明了，一般做法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。如：一个新闻站点的页面结构如下：一级页面 二级页面 财经新闻页-财经新闻1，财经新闻2./|首页-娱乐新闻页-娱乐新闻1，娱乐新闻2.|IT新闻页-IT新闻1，IT新

45、闻2.其中，首页、财经新闻页、娱乐新闻页、IT新闻页之间是星状链接，可以互相点击，直接到达。而财经新闻页和它的子页面之间是树状连接，浏览财经新闻1后，我们必须回到财经新闻页，才能浏览IT新闻2.所以,如果为了免去返回一级页面的麻烦，可将二级页面直接用新开窗口(POP up windows)打开，浏览结束后关闭即可。,1.5 网站设计的要求,以上我们都是用的三级页面举例。如果站点内容庞大、分类明细，需要超过三级页面，那么一定要在页面里显示导航条，帮助浏览者明确自己所处的位置。另外，随着电子商务的推广，网站竞争的越来越激烈，对链接结构设计的要求已经不仅仅局限于可以方便快速的浏览，而且更加注重个性化

46、和相关性。如在一个爱婴主题网站里，在八个月婴儿的营养问题的页面上，需要加入八个月婴儿的健康问题链接、智力培养链接,或者是有关奶粉宣传的链接、一本图书、一个玩具的链接等,因为父母不可能到每个栏目下去寻找关于八个月婴儿的所有信息，他们可能在找到需要的问题后就离开网站了。所以清晰明了的网站结构，可以帮助我们留住访问者，实现网页设计的目的。,1.5 网站设计的要求,1.5.4 色彩搭配悦目 2.网页色彩搭配的技巧（1）采用一种颜色。这里是指先选定一种颜色，然后调整透明度或者饱和度，(即将色彩变淡或加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。（2）选用两种颜色。即先选定一种颜色，然后选择它的同类色(在色相环里邻近的色)。这样的搭配，使整个页面色彩丰富，但不会显花乱。（3）选用一类色。就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿；或者土黄、土灰、土蓝。这样，使人有一个整体感。（4）用黑色和一种彩色。比如大红的字体配黑色的边框感觉就会很醒目。,1.5 网站设计的要求,网页色彩搭配的技巧 在网页配色中，忌讳的是：（1）网页上出现的颜色不要太多，尽量控制在三种色彩以内。（2）背景和前文的对比尽量要大，不要用花纹繁复的图案作背景，以便突出主要文字内容。在The Open Road网站上提供了一张网页基本配色表，是非常有价值的资料，设计网页时可以参考。,