图2：保存文件
2015-3-28
19
2.页面属性设置
制作网页时，设置页面属性是非常重要 的。页面属性包括：标题、背景图像、 背景颜色、页面边界、链接、编码等。 步骤1：执行【修改】→【页面属性】命 令、单击属性面板中的【页面属性】按 钮、或右击页面空白区从选项中选择 “页面属性”操作，都可以打开“页面 属性”对话框，如图3所示。

2015-3-28 14
5.简单网页的制作
学习内容：按照从易到难的学习原则， 现在从简单网页制作入手，开始学习网 页的制作。一个网站至少有一个主页 （首页）。 学习重点：下面我们就一起来创建一个 简单的动物天堂网站首页，这个页面中 没有采用布局定位等技术，主要是学习 插入文本、水平线、图像、日期、导航 栏、超级链接、背景声音、滚动字幕等 页面元素的方法。
10
2015-3-28
2015-3-28
11



3.网站提供交互性 网站在设计时应采用留言板、反馈表单等与浏览者进 行交互。 4.网站的访问速度 在设计网站时，考虑网站的访问速度是十分必要的。 5.网站链接结构 设计网站链接结构的原则是用最少的链接达到最佳浏 览效率。网站设计者希望浏览者既能方便快速地到达自 己需要的页面，又可清晰地知道自己的位置。 6.网站目录结构 尽量不要将所有文件都存放在根目录下；按栏目内容 分别建立子目录，每个主目录下都创建独立的images文 件夹；目录的层次不宜太深；不要使用中文目录，目录 名不宜过长。 2015-3-28 12
2.网页设计的原则





1.页面的有效性 网页要易读、命名要简洁、长度要适中。通常一个页面内容不 超过100KB，否则传输时速度较慢。 2.页面风格要统一 网站上所有网页中的背景、导航条、图像、文字等要有统一的 风格。 3.合理设计视觉效果 主要体现在网页结构和排版上，要善用表格来对网页中的各个 元素进行布局定位，以突出网页的重点。 4.慎用图像 使用图像时，要保证页面的下载速度和浏览器的兼容性，可为 每幅图像添加文字说明。 5.慎用Java程序 因为目前Java程序的运行速度较慢，所以不要使用大篇幅的 2015-3-28 Java 程序。在网页开发过程中不宜使用过多的新技术。 13
34
2015-3-28
图7：字体选择
2015-3-28
35
注意：
可以根据需要从系统字体中选择不同的 字体类型，这样很容易将页面制作得精 巧，并产生良好的视觉效果。但要注意， 无论对Web页面有何特别要求，都应该尽 量保持统一性，最好不要在页面上使用 过多的字体。 单击插入栏上的“文本”标签，会出现 许多文本格式控制按钮，如图8所示，通 过这些按钮可以方便地设置文本的格式。

2015-3-28 25
背景图像就是网页的“桌面”。 一般而言，背景颜色与前景文字的整体 颜色需要有一个较强的对比，例如背景 图像的颜色为淡色调，则前景文字或图 形要以深色显示，如此才能突出网页； 反之，若背景使用较深的色调，则前景 文字就需使用较浅且较亮的色调。
2015-3-28来自26二、制作简单网页7
2015-3-28
8
2015-3-28
9


5．食品批发商 / 进入该站首页，我们首先感受到的是生机 盎然的景象，色彩鲜艳的各类蔬菜给浏览者以 新鲜的视觉冲击，由此引发购买欲望。它同时 用淡淡的蔬菜图案作背景，时刻宣传公司的主 要业务，同时延长感官上的刺激时间。 通过上述几个网站的分析可以看出，如果 从塑造网上形象的角度考察，以下视觉元素是 不可缺少的。
2015-3-28
3
2．中国瓷器 / 该网站以白色为背景，营造出洁净、 细腻、典雅的氛围，同时与色彩斑斓的 瓷器形成强烈的反差，让人感觉到瓷器 工艺品的精致和美丽。这种颜色搭配是 展现色彩丰富的工艺品的一种和谐方 式。

2015-3-28
4
2015-3-28

这里所说简单网页，是指以文字和图片 为主要内容，没有采用布局定位技术、 HTML高级技术、Javescript脚本语言等 进行修饰的网页。
2015-3-28
27
1.加入文本
文字是网页上不可缺少的元素。文字是 网页的主体，一个网站意念的表达、内 容的体现等均需依靠文字加以传递。 当然，一个纯文字的网页看起来会很单 调，但在设计网页时，必须坚持以文字 为主，图像为辅的原则。

2015-3-28 20
图 3 页 面 属 性 设 置
2015-3-28 21
:
步骤2：设置背景颜色。选择“外观”分类
选项，在其“背景颜色”选项中设置背景 的颜色。在Dreamweaver中，使用网页安全 色调色板可以方便地改变页面的背景颜色， 调色板能够显示216种颜色。 步骤3：设置边界。在“外观”分类选项中， 分别将左、右、上、下边距设置为0。

2015-3-28 32
图6：文字属性面板
2015-3-28 33



如果在属性面板的字体下拉列表中找不到所需 要的字体，则需要对字体列表进行编辑添加， 以满足要求。具体操作步骤如下： 步骤1：选择图6中的“编辑字体列表”选项。 步骤2：弹出如图7所示的对话框。从右下边的 “可用字体”列表框中选择所要的字体。 步骤3：单击 《按钮，将其加入到左边的“选 择的字体”列表框中，再单击》按钮将其加入 到上边的“字体列表”框中。 步骤4：单击【确定】按钮，所选择的字体就 会出现在字体下拉列表框中。

2015-3-28 36
图8：插入栏上的文本标签
2015-3-28
37
2.插入水平线
在设计网页时，可以使用水平线以可视 方式分割文本和其他对象，插入水平线 的操作过程如下： 步骤1：将光标定位在需要插入水平线的 位置。 步骤2：执行【插入】→【HTML】→【水 平线】命令，或单击“HTML”插入栏中的 按钮，会插入一条水平线，“HTML”的插 入栏如图9所示。
2015-3-28
22
步骤4：设置页面标题。选择“标题
/编码”分类选项，在“标题”选项 中输入“动物天堂之门”，如图4所 示。 步骤5：设置各分类选项后，单击 【确定】按钮完成页面属性的设置。
2015-3-28
23
图4：标题设置
2015-3-28
24
注意：
页面标题主要用于识别文档。标题显示 在浏览器的标题栏上，通常会作为收藏 名称出现在收藏夹列表中。页面标题应 短小、含义明确、能够描述该文档的主 要内容。 设置页面标题的另一种方法是：在文档 工具栏的“标题”文本框中直接输入标 题。

4．北美工艺品展 / 从这个网站页面色彩的选择上，我 们可以感受到网页设计者对手工艺品的 认知，其色调选择和色彩搭配，突出了 手工艺品的巧夺天工。蓝色、灰白色、 草绿色、淡黄色都是手工艺品常用的颜 色，形成了站点风格的一致性。

2015-3-28

2015-3-28 16
图1：新建文 档对话框
2015-3-28
17

步骤2：保存页面文件。执行【文件】→ 【保存】命令或按快捷键Ctrl+S，在 “另存为”对话框中浏览找到D:\dwtt文 件夹，在“文件名”中输入default.htm， 如图2所示，单击【保存】按钮。
2015-3-28
18
31
2015-3-28
（2）文字修饰 对文字进行修饰，主要是在其属性面板 中进行的。在属性面板中可以对文字进 行字体、大小、对齐方式等进行设置。 设置字体的步骤为： 步骤1：选中要设置字体的文字。 步骤2：在属性面板中单击“字体”右边 的下三角按钮，弹出如图6所示的下拉列 表框，选择需要的字体。
5
3．古董仿制品 / 这个网站采用灰白底色作衬托，似 乎没有突出人们通常理解的古朴气质， 但它有可能适用于中世纪欧洲的传统灰 白色调。由于东西方文化有较大差异， 因此在设计传播中国文化的网站时，可 能更宜选择那些能体现东方古典风格的 颜色。

2015-3-28 6
1.网站的策划与设计
网站设计的基本原则 1.网站内容要新、专、精 网站的信息内容要有特色，网页内容要便于 阅读，内容设计要有组织，同时网站的内容应 及时更新。 2.网站整体风格要统一 网站的风格是指网站的整体形象给浏览者的 综合感受，是抽象的。风格就是与众不同，通 过网站的结构布局、内容、文字、标志、色调、 交互性等可以概括出一个网站的风格。

2015-3-28 1
下面，我们选择几个英文网站做色彩和站点 风格的分析：

1．利顿茶商/




利顿是历史悠久的茶类品牌，我们在平时常见的利顿红 茶、利顿冰茶都是其产品。在该企业站点中，突出体现的不 是利顿的悠久历史，而是其丰富的产品线、茶叶的历史和有 关人体健康的信息。 该站点的内容组织围绕利顿的产品线进行。利顿产品的 名称、商标、图形、功能和应用领域等信息一览无余，利顿 冰茶通过艺术图片展现在首页的左边，因此，站点所要突出 的是产品的内涵。 通过利顿健康中心，浏览者可以获得大量有关茶的信息， 使他们从潜意识中接受利顿关注消费者健康的理念。其实， 在有关茶的历史中，浏览者可以了解利顿茶品的悠久历史， 客观上起到激发消费欲望的作用。 另外，该站首页使用了利顿品牌所常用的黄色，这既是 2015-3-28 2 在网上扩大品牌效应，也是对公司整体形象的统一应用，从 而构成了企业识别系统（CIS）的重要部分。

2015-3-28 40
图10：水平线属性面板
图11：水平线快速标签编辑器
2015-3-28 41
步骤4：按F12键预览插入水平线后
的页面文件，效果如图12所示。
2015-3-28
42
图12：插入水平线
2015-3-28 43