网页设计与制作

第1章网站规划
在建立网站之前，需了解网站的开发流程，按照项目管理模式对网站进行必要的规划、开发、测试和发布使用。

一般流程如下：
1.建设网站前进行必要的市场分析。

2.明确建设网站的目的及功能定位。

3.制定网站技术解决方案。

4.根据网站的目的确定网站内容、网站结构和网站功能。

5.进行网页设计，并根据技术方案实施网站建设。

6.做出经费预算。

7.网站测试。

8.网站发布及推广。

9.网站维护。

第2章网站基础知识
网站（Website），是指在因特网上根据一定的规定，使用HTML等工具制作的用于展示特定内容的相关网页的集合。

网站的组成
●域名（Domain Name），是由一串用点分隔的字母组成的Internet上某
一台计算机或计算机组的名称。

●空间，常见网站空间有虚拟主机、虚拟空间、独立服务器、VPS。

●程序，即建设与修改网站所使用的编程语言，换成源码就是一堆按一定
格式书写的文字和符号。

●网页
网页（Web page），是网站中的任意一个页面，通常是HTML格式，文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等。

●基本构成元素：文字、图像、超级链接。

●阅读方式：浏览器。

●类型：以不同的后缀代表不同类型的网页文件。

通常分为静态页面、动
态页面。

动态网页（active web page）：指网页内容可根据用户的不同请求从而返回其
对应的数据，一般情况下动态网页通过数据库进行架构，一般文件名均以开发语言做后缀，如php、asp等。

也可以说凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。

静态网页：指全部由HTML标记页面，页面的内容和显示效果基本不发生变化，所有的内容包含在网页文件中。

一般文件名均以htm、html、shtml等为后
缀。

术语
WWW（World Wide Web），亦称作“Web”、“WWW”、“'W3'”，中文名字为“万维网”，"环球网"等，常简称为Web。

分为Web客户端和Web服务器程序。

WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。

在这个系统中，每个有用的事物，称为一样“资源”；并且由一个全局“统一资源标识符”（URL）标识；这些资源通过超文本传输协议（Hypertext Transfer Protocol）传送给用户，而后者通过点击链接来获得资源。

URL（Uniform Resource Locator），统一资源定位符，是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。

互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

动态网页的URL是不固定的；而静态网页的URL是固定的。

HTTP (Hypertext transfer protocol) ，超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。

第3章网站配色
216网页安全色
216网页安全色：指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板），这些颜色在任何显示设备上的显示效果都是相同的。

网页安全色是当
红色（R）、绿色（G）、
蓝色（B）颜色数字信号值为（DAC Count）：0,51,102,153,204和255。

网页文字及配色
文字是网页的主体。

文字的优势主要体现在信息量大、所用存储空间非常小，利于网页的快速打开，信息的直观呈现。

要求：字体不超过三种（标题、正文、导航），文本字号形成对比——突出（网页标题）、层次（栏目标题）、分明（正文，字体偏小，适于文字信息量大的内容）
规定：字号影响文字的清晰度，分辨率1024*768，正文：12号、宋体字；分辨率高于1024，正文：13-14号、宋体字；文章标题字号偏大，一般要使用平滑（消除锯齿）的字体。

文字与背景色彩搭配：
1)文字能见度：
2)错误色彩搭配：
3)前进色：红、黄、橙、白
●背景色柔和、淡雅——深色文字
●深色背景——浅色文字
●不深不浅——根据色彩选择适合的颜色（色相、明度、饱和度）
文字色彩可以与网站主题相呼应，协调主色调、副主色调等。

文字色彩有划分层次的作用，网页上相同色彩的文字都属于同一层次。

文字与图片的配色
遵循三个原则：
1.文字周围的背景尽量单纯化。

2.图片与文字对比尽量明显，易于识别。

（通常浅色图片配深色文字，深
色图片配浅色和高亮度的文字）
3.文字与背景图片对比较弱不易识别时，可用其他色彩衬托文字的方式强
化文字与图片间的对比。

网页中的图像
图像给人的视觉效果要比文字强烈得多。

灵活应用图像，在网页中可以起到点缀的效果。

但是应用不当，会使网页变得凌乱不堪。

Web页上的图像文件大部
分都是使用JPG和GIF格式。

因为他们除了具有压缩比例高外，还具有跨平台特性。

图像在网页中的应用主要有以下几种形式。

1.图像标题
一般在网页中都要有标题，用以提示浏览者这个网站是做什么的，起到了导航的作用，应用图像标题可以使网页更加美观，
2.背景
图像的另一个重要应用是作为网页的背景。

网页背景千变万化，特别是一些个人网站，应用图片背景比较多。

3.网页主图
网页上除了用小图像美化网页外，通常还会在网页上用一些较大的图片来突出网页主题，占满网页的整个空间。

特别是主页中用主图的比较多，或者直接用图片取代文字作为超级链接按钮，可以使网页更加美观。

网页图像分类
网页图像分为静态图像和动态图像。

●动态图像：
1.gif动画：适于短小动画，画面数少，图像简单。

【89a】
2.flash动画（.swf）：
3.flv视频（.flv）：体积小，压缩率高，适于传播但画面不够清晰。

●静态图像：
1.JPG：优秀的图画品质，较为合理的文件大小，不支持透明格式。

2.GIF：256色，压缩后损失图像色彩但不影响图像失真；支持透明格式。

【87a】
3.PNG：支持透明背景，支持48位色彩的图像模式；平滑的透明边缘；
品质好，体积小。

网页上图片注意事项
1.良好的视觉吸引力，“阅读最省力原则”
2.图片要清晰，不能模糊、变形，太大的图片要进行分割。

3.图片的主体含义要简单明了，图片上的文字要清晰容易识别。

4.采用的图片颜色要符合网页整体色彩。

关于色彩
由光谱可以得出6个基础色相，增加过渡色可形成12色相环和24色相环。

●同类色：指在同一色相中不同的颜色变化。

●邻近色：在色环上任一颜色同其毗邻之色。

●补色：在色环上彼此相距180°的两个色相互为补色。

色彩对比
网页色彩搭配主要从色彩冷暖、面积、色相、明度、纯度。

1.色相对比
●色相对比：两种以上色彩组合时，由于色相差别而形成的色彩对比效果。

●对比强弱关系可以从色相环上的距离（角度）入手，距离越小对比越弱；
反之亦然。

●有彩色间的对比，按弱→强关系分为：
⏹同类色相对比（无色相差、
色相距离在45°，基于明
度和纯度的对比）——单
调
⏹邻近色相对比（色相距
离在90°左右）——较
为丰富、耐看
⏹对比色相对比（色相距离在130°左右）——鲜明、强烈（配色时需
要考虑主色与次色
间的关系、色彩面
积，降低视觉疲劳）
⏹互补色对比（色相距
离在180°左右）——
色彩对比很强（易产
生不安定感，配色时
需考虑色彩面积、色彩的分散度）
______________________________________________________________________________________________________________
2. 明度对比 明度对比：指色彩明暗度的对 比，也称作黑白度对比，即黑、白、 灰效果。

3. 纯度对比 纯度对比分为高、中、低纯度。

纯度对比表现出色彩艳丽效果，也是决定色 调感觉的关键。

特点：增强用色的鲜艳感，即通常说的明确感。

表现：艳丽、生动、活泼 无彩色对比，如黑与白、深灰与浅灰。

表现：大方、稳重、高雅、朴素
4. 冷暖对比  暖色系：颜色接近红、橙、黄。

 冷色系：颜色偏向蓝、青。

 中色系：绿色和紫色
5. 面积对比 同一视觉范围内色彩的面积不同会产生不同的对比效果。

网页色彩的搭配
网页的色调：网页中的色彩，总存在某种内容联系组成一个统一的整体，从 而形成画面色彩的趋势。

-可编辑修改-


______________________________________________________________________________________________________________
 主色调——页面色彩的主要色调。

显示站点整体内容和风格；其他配色面积 一般不大于该视觉面积。

 辅色调——烘托主色调，支持主色调，协助主色调营造整体视觉氛围（面积 次之）。

 突出颜色——强调色，用于突出主题效果，一般多用于按钮、标签之类。

 背景色——协调、衬托整体
-可编辑修改-


______________________________________________________________________________________________________________
第4章 软件介绍
软件界面
常见问题
1. 窗口不显示插入工具栏。

[方法]Ctrl+F2；或者菜单命令[窗口-插入]，勾选。

2. 找不到属性窗口。

[方法]Ctrl+F3；或者菜单命令[窗口-属性]，勾选。

3. 文件面板显示根节点不是命名的站点名称。

[方法]文件面板-管理站点；或者菜单命令[站点-管理站点]。

4. 窗口显示的信息不完整，感觉窗口小了。

[方法]检查计算机的屏幕分辨率，分辨率不低于 1024*768。

-可编辑修改-


______________________________________________________________________________________________________________
第5章 站点建立
制作网站之前除了准备网站资料、规划网站结构、设计网站布局以外，最好 创建一个本地站点，易于管理和上传。

特别是制作动态网站，本地站点的创建必 不可少。

站点的建立应注意以下情况：
1. 站点的路径结构中不能含有中文，即文件夹、文件的命名都不含有中文， 且命名有规律易查找。

2. 习惯上在站点根文件夹下建立用于存放图片的子文件夹，如果网站中用 到其他较多媒体类文件也可以建立相应的文件夹存放，但目录层次不易 过深。

3. 创建网站的素材不能放在站点根文件夹中，站点文件夹中存入的图片、 音频、视频或者动画只能是真正在网页中应用到的元素，一般在制作页 面的过程中都会提示保存到站点文件夹下。

创建站点的视频演示
创建站点的命令
菜单命令：[站点-新建站点] 文件面板：[管理站点-新建]
创建站点的关键步骤说明
-可编辑修改-


______________________________________________________________________________________________________________
1. 新建站点对话框中，[基本]选项卡相当于一个建立站点的向导，引导设计者 一步步地完成基本的站点设置，[高级]选项卡用于站点属性的详细设置。

2. 初学者可先在[基本]选项卡中完成站点的基本设置，再进入[高级]选项卡做进 一步设置，如“默认图像文件夹”，应注意：1）设置了默认图像文件夹后， 制作页面时每次插入图像都会自动将应用到的图片自动存放到该文件夹中； 2）不能将所有下载或处理过的图像素材都拷贝到该文件夹中，造成不必要 的存储负担。

3. 新建站点的名称可以包含中文、符号或字母，但站点路径不能包含中文和符 号。

创建站点的关联操作
站点编辑：进行站点定义的补充设置或者重新设置。

站点删除：删除无关站点或者冗余站点。

站点导出：导出站点信息，并以.ste 为扩展名的存储一个站点定义文件，该 文件一般存储在站点根文件夹内。

站点导入：将站点根文件夹内的站点定义文件导入（扩展名.ste），导入中 注意站点根文件夹和站点图像文件夹的指向，便于快速、正确的重构站点。

-可编辑修改-


______________________________________________________________________________________________________________
第6章 常用布局方法简介
版面布局基础
1. 网页默认习惯  网站标志放在页面上部  竖排导航时，导航放在页面左侧；横排导航时，放在网站标志或顶部广 告之下  版权信息放在页面底部
2. 第一屏：是指打开一个网站页面不拖动滚动条的情况下能看到的页面部分。

分辨率 800*600 1024*768 第一屏 760* 420 1002*600
页面宽度：<=1002 页面高度：<=3*600
表格
表格是 Dreamweaver 中最常用的布局工具，不但可以精确定位网页在浏览器 中的显示位置，还可以控制网页元素在网页中的精确布局。

创建表格及表格属性设置的视频演示
创建表格的命令 菜单命令：[插入记录-表格] 插入工具栏：[常用-表格 ]
-可编辑修改-


______________________________________________________________________________________________________________
表格的重要属性说明 1. 表格的宽度可以用两种方式表示：像素、百分比。

2. 在布局时，最外围的表格属性（宽度）单位必须用像素，而内部的嵌套表格
宽度单位可以使用像素，也可以用百分比，使用百分较为灵活。

3. 嵌套的表格之间需要紧密相贴，则表格属性中应将“边距”、“间距”和“边
框”值设置为 0。

4. 表格可以嵌套表格，但无法交叉；表格交叉的错误容易出现在代码部分。

基本的表格标签 1. <table>：定义表格 2. <th>：定义表头 3. <tr>：定义表格行 4. <td>：定义表格单元（table data），即数据单元格的内容。

表格标签的可选属性
DTD 指示此属性允许在哪种 DTD 中使用。

S=Strict, T=Transitional, F=Frameset.
属性 align bgcolor border
值
 left  center  right
 rgb(x,x,x)  #xxxxxx  colorname
pixels
描述 不赞成使用。

请使用样式代替。

规定表格相对周围元素的对齐方式。

不赞成使用。

请使用样式代替。

规定表格的背景颜色。

规定表格边框的宽度。

DTD TF TF STF
-可编辑修改-


______________________________________________________________________________________________________________
属性 cellpadding cellspacing
frame （表格外框线）
值
 pixels %  pixels %  above
 below
 border
 box
 hsides
 rhs
 lhs
 void
 vsides
rules （表格内部分割线）
 none  groups
 rows
 cols
 all
summary width
text
%  pixels
描述 规定单元边沿与其内容之间的空白。

DTD STF
规定单元格之间的空白。

STF
只外部的顶部边线
STF
只外部的底部边线
显示表格的边框线
显示表格的整体
显示外部的顶部和底部边线
只显示外部的右侧边线
只显示外部的左侧边线
外部的所有边线全部不显示
只显示外部的左侧和右侧边线
内部所有线框不显示
STF
内部横向和纵向线框不显示
只显示内部的横向线框
只显示内部的纵向线框
显示所有内部线框
规定表格的摘要。

STF
规定表格的宽度。

STF
-可编辑修改-


______________________________________________________________________________________________________________
表格标签的标准属性
id, class, title, style, dir, lang, xml:lang
表格的其他操作 1. 导入或导出表格数据
1) 菜单命令：[插入记录-表格对象-导入表格式数据]，其中导入的数据要具 有制表符、逗号、分号、引号或者其他定界符。

2) 或者菜单命令：[文件-导入]，可选择“表格式数据”或者 Excel 文档。

3) 菜单命令：[文件-导出] 。

2. 表格的排序 1) 菜单命令：[命令-排序表格]
典型案例
-可编辑修改-


______________________________________________________________________________________________________________
表格布局
由于最初表格并不是用于布局设计，而是由于显示数据的，所以对于初学者 来说，要想使用表格设计出布局合理的页面，往往会适得其反。

为了简化利用表 格布局页面，Dreamweaver 中就特意提供了一种布局模式，在该模式下使用布局 工具，设计者可以轻松地在页面中画出布局表格以及单元格，然后对其进行修改、 移动等，并且可以方便地设置布局表格和单元格的属性，布局表格可以有一定的 固定宽度，也可以占据整个浏览器窗口。

设置布局模式的参数及命令 菜单命令：[编辑—首选参数]，在左侧的[分类]栏中选中[布局模式]选项，即 可为布局模式中的表格和单元格边框设置不同的颜色。

插入工具栏：[布局-扩展] 或者菜单命令：[查看-表格模式-布局模式] 或者 ALlt+F6 组合键
在布局模式中创建表格和单元格 在布局模式中可以在文档中随意地绘制表格，在布局模式下点击插入工具栏
中的 图标，鼠标在文档窗口即可拖动绘制布局表格；点击 标即可绘制布局单元格。

图标，拖动鼠
需要注意以下几个问题：
1. 不能在布局单元格中绘制表格。

-可编辑修改-


2.布局表格可以嵌套，布局单元格不可以嵌套，布局表格和布局单元格均不
可以交叠，即在绘制布局表格和布局单元格时，不能直接在布局表格的旁边插入其他布局表格和布局单元格，只能在布局表格内或表格的下方添加其他布局表格和布局单元格。

布局表格和布局表格之间不能相互重叠，创建相邻的布局表格时（小于8像素），Dreamweaver会自动将它们对齐，如果在绘制布局表格是按下Atl键，可以取消Dreamweaver的自动对齐功能。

3.移动布局表格和单元格：可使用Dreamweaver提供的网格线作为辅助向导，
[查看-网格-显示网格]命令显示网格线，或者按下Ctrl+shift+G快捷键。

移动表格的方法是：单击布局表格标签，然后拖动表格到合适的位置即可；如果同时按住Shift键，每次可以移动10个像素的距离，注意只有嵌套表格才可以移动。

调整布局表格尺寸的方法是:单击布局表格标签，表格将出现8个控制柄，然后拖动控制柄到合适的位置即可。

调整和移动单元格的方法：单击布局单元格的边框进行拖动，或者按下Ctrl 键的同时单击布局单元格进行拖动，当到达合适的位置时，释放鼠标即可。

如果要改变单元格的大小，可以先选中该单元格，然后拖动控制柄到满意的尺寸即可。

布局表格需注意的属性设置：
按钮：清除表格中的所有间隔
按钮：清除嵌套表格，只有当存在嵌套表格时，该
模板
在制作具有几十个甚至几百个风格基本相似的网站时，如果每次都重新设定网页结构以及相同栏目下的导航条、各类图标就会显得非常麻烦，如果借助Dreamweaver中的模版功能就可以简化操作。

创建模板及模板设置的视频演示
创建模板的命令
1.将现有的网页文档创建为模板（方法一）：
a)菜单命令：[文件-另存为]，选择相应的站点名称。

b)在该站点根文件夹下新建子文件夹Templates，将保存路径切换到该文件
夹下。

c)保存类型：模板文件（*.dwt），输入模板名称并保存。

2.新建空模板（方法二）：
a)[文件-新建-空模板-HTML模板]
模板的重要说明
1.模版实际是扩展名为.dwt的文档，必须存放在站点根目录的Templates文件
夹中，才能被站点识别。

2.模板中应该至少包含一个可编辑区域，否则模板无效，无法编辑该模板的页
面。

两种创建方法的区别
1.模版文件夹不是原本就有的，如果是使用方法二的方式创建，则Templates
文件夹会自动生成；而如果使用方法一的方式创建，则需要手动创建
Templates文件夹。

2.其中一个重要区别在代码部分，方法二将在head标签内把title标签包含在一
个可编辑区域内，那么之后由模板创建的各个页面都可以设置不同的页面标题；而方法一则需要在代码视图手动输入可编辑区域的代码，将title标签至于可编辑区域中，否则以后创建的各个页面都只能是统一的一个页面标题，无法灵活设置。

3.另一个重要区别体现在CSS的使用上。

根据之上的区别，如果将模板中的
CSS定义也置于可编辑区域，则由模板创建的页面的CSS定义也将带来多样的变化。

模板的其他操作
1.从模板创建文件
菜单命令：[新建-模板中的页]，选择站点及其模板文件
2.从当前模板中分离
菜单命令：[修改-模板-从模板中分离]
3.将一般页面套用到模板
菜单命令：[修改-模板-应用模板到页]
4.修改模板并更新站点
当已经利用模板创建了多个网页时，又想更改模板中的某些网页元素，可以直接在模板中更改，按Ctrl+S键保存，弹出[更新模板文件]对话框，单击[更新]按钮打开[更新页面]对话框自动更新，当保存模板的同时也更新了基于模板建立的所有网页。

模板中的区域类型
模板中有些区域是不能编辑的，称为锁定区；有些区域则是可以编辑的，称为可编辑区域。

Dreamweaver提供了4种模板区域类型，即：可编辑区域、重复区域、可选区域和可编辑标签属性。

●可编辑区域是基于模板的文档中的未锁定区域。

⏹操作：插入工具栏[常用-可编辑区域]
⏹或者菜单命令[插入记录-模板对象-可编辑区域]
⏹或者组合键Ctrl+Alt+V。

●重复区域（Repeating Region）是文档中重复显示的部分，属于不可编辑
区域。

在模板中定义重复区域，可以让用户在网页中创建可扩展的列表，
并可保持模板中表格的设计不变。

重复区域分为重复区和重复表
（Repeating Table），可以将整个表格或者一个单元格定义为重复区域，但是不可以一次将多个单元格定义为重复区域；如果要在重复区域中编
辑不同的内容，必须在重复区域中插入可编辑区域。

⏹操作：首先在文档窗口中选择想要设置为重复区域的文本或内容，
执行菜单命令[插入记录-模板对象-重复区域]
⏹或者插入工具栏：[常用-重复区域]按钮
●可选区域是在创建模板时定义的用于显示和隐藏特别标签的区域。

在使
用模板创建网页时，对于可选区域的内容（如文本、图片等），可以选择显示或者不显示。

使用可选区域可以控制不一定在基于模板的文档中显示的内容。

使用可选区域，在这些区域中用户无法编辑内容。

可选区域的模板选项卡在单词if之后。

根据模板中设置的条件，可以定义该区域在它们所创建的页面中是否可见。

⏹操作：先在模板文档中选择需要将其设置为可编辑区域的文本或内
容，然后单击插入工具栏[常用-模板下拉箭头按钮，从弹出的下拉菜
单中选择[可选区域]命令]
⏹设置：选中可选区域，在属性面板上点击“编辑”命令，在“高级”
选项卡中为区域设置现有参数或者表达式，指定区域是否可见。

●可编辑标签属性，是指允许基于模板的文档中可进行修改的属性的标签
定义。

可编辑标签属性提供4种类型：文本、布尔值、颜色和URL。

利用可编辑标签属性这一功能，在设计模板的时候，就可以根据网站的总体规划，解除模板中某些页面元素的某个或某些属性的锁定，使之可以编辑，从而设计出风格大体一致但又有适当变化的一组网页来。

⏹操作：首先在文档窗口中选择想要设置为可编辑标签属性的项目或
内容，菜单命令[修改-模板-令属性可编辑]。

典型案例
框架及浮动框架
我们都知道一个网站是由几个甚至几十个网页组成的，如果网站中的所有网页是同一个布局，并且其中在相同的位置有相同的网页元素时，这时就可以使用另外一种方式来制作网站，那就是框架。

框架网页与表格网页不同，框架网页包括表格网页，正确地说框架网页是由多个表格网页组成而成。

框架网页由框架集和框架两个部分组成。

框架集是在一个文档内定义一组框架结构的HTML网页，即框架集定义了页面显示的框架数、框架的大小、载入框架的网页源和其他可以定义的属性等。

单个框架是指在网页上定义的一个区域，主要指向将载入的网页源。

创建框架及框架属性设置的视频演示
创建框架及框架集的准备工作
1.菜单命令：[查看-可视化助理-框架边框]，勾选“框架边框”，将框架的边框
属性设置为可见。

2.菜单命令：[窗口-框架]，或者组合键Shift+F2。

创建框架的命令
插入工具栏：[布局-框架]，选择框架样式。

如果选择多个框架结构，将逐个按说选拆分框架。

或者菜单命令：[文件-新建-示例中的页-框架集]，选择框架集的样式。

或者菜单命令：[插入-HTML-框架]，从弹出的子菜单中选择框架样式。

框架的重要说明
1.依据框架的拆分方式，可看出框架的层次是嵌套形式的，当有行列组合搭配
的框架结构时，除总框架集外一定还内嵌着其他的框架集，故而在设置框架的行高或者列宽时总是相对于其所在的框架集内而进行设置。

框窗总是按由上而下、由左至右的次序。

2.框架集的特点使得在使用框架方式创建的网站在保存时最好使用菜单命令
[文件-保存全部]，更为快捷和完整。

3.由于框架的窗口结构，在为网页元素设置超级链接时增加了结构中的多个框
架，所以当设置超级链接时必须指明链接目标，使之能在指定的窗口中打开。

4.框架的属性设置中包含框架集和单个框架的属性设置，可借助框架工具面板，
选择框架集或者框架进行属性设置；其中单个框架的属性设置除框架自身属性设置（文件源、滚动、是否调整大小、边界高度、边界宽度、边框、边框颜色）外，也和一般的基本的网页页面一般设置。

框架的操作
添加框架
菜单命令：[修改-框架集]，选择拆分框架的方法。