第二节  设 计 网 站

一、网页的版式设计

网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型10种。

（一）骨骼型

网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。

（二）满版型

满版型页面以图像充满整版。这种网页主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。

（三）分割型

分割型页面把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。可以调整图片和文案所占的面积，来调节对比的强弱。例如，如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。

（四）中轴型

中轴型页面沿浏览器窗口的中轴将图片或文字进行水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。

（五）曲线型

曲线型页面将图片、文字在页面上做曲线的分割或编排，产生韵律与节奏。

（六）倾斜型

倾斜型页面将页面主题形象或多幅图片、文字进行倾斜编排，形成不稳定感或强烈的动感，引人注目。

（七）对称型

对称型的页面给人稳定、严谨、庄重、理性的感受。

（八）焦点型

焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。焦点型分3种情况。

① 中心。以对比强烈的图片或文字置于页面的视觉中心。

② 向心。视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。

③ 离心。视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。

（九）三角型

三角型网页的各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。

（十）自由型

自由型的页面具有活泼、轻快的风格。

二、网页的导航设计

导航栏能让我们在浏览网页时很容易地到达不同的页面，是网页元素非常重要的部分。网页导航在一个网站中起着重要作用，它不仅能让访客在网站简单迅速地找到他们想要搜寻的内容，而且还可以引导浏览者在网站尝试搜寻其他内容。

（一）设计网页导航的基本准则

① 组织良好的链接。确保你的链接按照重要性有序排列。浏览者能在不同分类中轻松找到他们想搜索的内容。例如，主链接都可以在页面的上方，如“我们的服务”“产品简介”“资源”等。其他有趣的链接置于页面的右侧，整个网页操作大众化而又贯穿着连续性。

② 清晰且鲜明。一旦你决定做链接，就需要考虑把它们置于最优位置。导航必须突出且鲜明，把你设计的链接置于页面顶部或左侧这些最抢眼的位置上。同时，把一些主要的链接置于页面顶部，这样浏览者不用滚动鼠标就可以一目了然。图片的链接应和谐地融入网站设计。避免将链接放置在页面的底部，这样的话，浏览者只有下翻到页底才能看到这些链接。你可以将重要链接同时置于顶部和底部，以引起访客注意。

③ 连贯性。导航必须清晰且连贯。在网站每一页的相同位置都应设有相同顺序的重要链接。不要因为不同页面链接的顺序问题让你的浏览者感到困惑。

④ 易于理解。确保链接言简意赅。通常你不会有很大的空间来设置长链接，确保空间的有效利用。访客需要一目了然地点击链接的位置，因此，链接的设置应易于理解，否则没人会点击你的链接，这将有悖于设计网页链接的初衷。

⑤ DHTML菜单。对于一大堆的分类栏和子栏，需要导航菜单来帮助你组织链接。网上有很多粘贴脚本，可以借助它们创建强大的导航系统。

（二）几种常用的导航

① 顶部水平栏导航。顶部水平栏导航是当前两种最流行的网站导航菜单设计模式之一。

顶部水平栏导航一般具有以下特征：导航项是文字链接、按钮形状，或者选项卡形状；导航位置在邻近网站logo的地方，通常位于折叠之上。

② 竖直/侧边栏导航。侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，在主内容区之前。根据一份针对读者习惯的导航模式可用性研究报告，左边的竖直导航栏比右边的竖直导航表现要好。

③ 出式菜单和下拉菜单导航。出式菜单（与竖直/侧边栏导航一起使用）和下拉菜单（一般与顶部水平栏导航一起使用）是构建健壮的导航系统的好方法。

三、HTML语言

（一）HTML语言简介

超级文本标记语言（英文缩写：HTML）是标准通用标记语言下的一个应用，也是一种规范、一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如文字如何处理、画面如何安排、图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释并显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释。

四、Dreamweaver CS6简介

Dreamweaver在网页设计领域具有强大的功能，而且其Web站点架设可以方便地实现管理与维护，简单地发布站点至网络网站空间，实施远端维护等操作，故它不能简单地定位为网页设计软件。在所见即所得的工作环境中，Dreamweaver可轻松地创建表格、层和框架，对网页内容和资料进行完美编排；可以通过简单的图像转换、动态行为、时间轴和层的结合来制作具有各种视觉特效的网页。

（一）Dreamweaver CS6工作界面介绍

接下来让我们先来了解下Dreamweaver CS6软件的基础。

① 启动Dreamweaver CS6。在桌面左下角单击“开始”按钮，在弹出的“开始”菜单中执行“所有程序→Dreamweaver CS6”命令，或者双击桌面的Dreamweaver CS6快捷方式图标即可启动Dreamweaver CS6。

② 认识Dreamweaver CS6的工作界面。

（二）Dreamweaver CS6主要组成部分简介

①【插入】工具栏。Dreamweaver CS6的【插入】工具栏中包含了8个标签，如图5-23所示。单击【插入】工具栏中的不同标签可以进行切换，每一个标签中包括了若干的插入对象按钮。单击【插入】工具栏中的对象按钮或者将按钮拖曳到编辑窗口内，即可将相应的对象添加到网页文件中，并可在网页中编辑添加的对象。

②【文档】工具栏。【文档】工具栏中包含了代码视图、拆分视图、设计视图、实时视图、实时代码、文档标题、文件管理、浏览器预览、可视化选项等按钮。

【文档】工具栏中的前3个按钮用于切换视图模式。单击按钮可以进入代码视图，这是一个用于编写和编辑HTML、JavaScript、服务器语言代码（如ASP或ColdFusion标记语言）以及其他类型代码的手工编码环境。单击按钮可以进入代码视图与设计视图。在该视图中，窗口被分成上、下两部分，顶部窗口用于编写HTML代码，底部窗口用于可视化编辑网页。单击按钮可以进入设计视图，这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver中显示的文档处于可视化编辑状态，页面效果类似于在浏览器中查看页面时看到的内容。

③ 状态栏。在Dreamweaver CS6状态栏中可以显示当前光标所在位置的HTML标记，通过此标记可以确定所编辑的网页内容。状态栏上还可以显示当前网页的编辑窗口大小、当前网页文件的大小与网页的传输速度。

④【属性】面板。【属性】面板用于显示或修改当前所选对象的属性。在页面中选择不同的对象时，【属性】面板中将显示出不同对象的属性。例如选择了文字，在【属性】面板中显示的是文字的属性；如果选择了图像，则【属性】面板中将显示图像的属性。另外，还可以直接在【属性】面板中修改所选对象的属性，修改后的效果可以在编辑窗口中反映出来。

在【属性】面板的右下角单击三角形的切换按钮，可以将【属性】面板切换为常用属性或全部属性模式。

⑤ 面板组。面板组是指组合在一起的面板集合，它为我们编辑网页提供了既直观又快速的操作方法，是设计制作网页时不可缺少的工具。

单击【窗口】菜单下的相应命令，可以打开或关闭面板。当我们打开一个面板时，与其成组的面板会同时出现。

单击面板组中的标签，可以在不同的面板之间切换。另外，将光标指向面板标签，按住鼠标左键向外拖动，可以把该面板从面板组中分离出来；分离出来的面板组还可以再放回去，只需拖动面板标签到面板组中即可。