全书配套课件：网站设计与开发技术教程

1、网页设计与制作概述 了解有关网页的一些基本概念了解网站的基本结构特性和网页的布局了解网页制作的基本工具和开发语言1.1 互联网与网站基本概念: 网页：网页：是一种网络信息传输的载体，在网站中，供用户阅读的一个个页面，称之为“网页”，又称为Web页。 万维网万维网（World Wide Web）：万维网简称WWW或3W，它也是建立在Internet上的一种网络服务。它遵循HTTP协议 ，通过超文本和超媒体，将Internet上包括文本、声音、图形、图像、影视信号等各种类型的信息聚集在一起。 浏览器浏览器：要想访问网络中的各种资源，还需要一个工具，那就是浏览器，否则无法访问到网络中丰富的资源。 目

2、前常用的浏览器有目前常用的浏览器有:IE、netscape和腾训腾训TT 统一资源定位器统一资源定位器（Universal Resource Locator，简称URL）： Internet上的每一个网页都具有一个唯一的名称标识，通常称之为URL地址。是用来指出某项信息的位置及存取方式，以取得各种服务信息的一种标准方法。 通信协议通信协议：也就是上面举例中的“http”部分，它包括HTTP（超文本传输协议）、FTP（文件传输协议）、Gopher（Gopher协议）和News（新闻组）等。 主机名主机名：指要访问服务器的Internet名称。IP地址：地址：IP地址是一组32位的数字号码，如“2

3、84”，这就是上网主机的地址。 域名：域名： IP地址是一长串的数字号码，这些数字难记又难以理解。为了方便大家理解、记忆，便有了域名的概念。 域名的范围要比主机名要大。一个域名下可以有多个主机名，域名下还可以有子域名。例如，域名www. good-下，有主机server1和server2，其主机全名就是server1.good-和server2.good-。也就是常说的二级域名。 域名前加上传输协议信息及主机类型信息就构成了网址（URL） 文件传输协议文件传输协议（File Transfer Protocol，简称FTP）：）：是一种快速、高效和可靠的信息传输方法。 超文本

4、标记语言超文本标记语言（Hyper Text Markup Language，简称HTML）：它是WWW创建超媒体文本的语言，它也是网页创建中最基本的语言，制作的任何一个网页都是基于HTML文本标识的。 表单表单: 表单是用于填写申请或提交信息的交互页面。如电子邮箱、主页空间、QQ号码等的申请页面，以及论坛、聊天室、留言簿等。 超级链接超级链接:这是网页制作中经常要用到的概念，指的是页面对象之间的连接关系。 导航条：导航条：导航条能十分有效地实现超级链接功能 。 发布：发布：将制作好的网页上传到服务器的过程即是发布，也称为上传或上载。 1.2网站制作流程网站制作流程p搜集资料，规划网站 选择合

5、适的制作工具 制作网页 测试发布 推广宣传 网站维护（1）定位网站的主题和名称 主题必须与Web页面主要推销或展示的产品或服务紧密相关，同时它又必须有相当的吸引力。 对于主题的选择，应注意： 主题要小而精。定位要小，内容要精。 题材最好是你自己擅长或者喜爱的内容。 题材不要太滥或者目标太高。1.规划设计（2）确定网站的栏目和版块 一般的网站栏目安排要注意以下几方面： 要紧扣你的主题 将你的主题按一定的方法分类并将它们作为网站的主栏目，主题突出，容易给人留下深刻印象。 设一个最近更新或网站指南栏目 设定一个可以双向交流的栏目 设一个下载或常见问题回答栏目 （3）确定网站的目录结构n 不要将所有文

6、件都存放在根目录下。n 按栏目内容建立子目录。n 在每个主目录下都建立独立的images目录。n 目录的层次不要太深。 目录的层次建议不要超过3层。n 不要使用中文目录n 不要使用过长的目录n 尽量使用意义明确的目录，便于记忆和管理。 （4）确定网站的链接结构主页面index.htm页面11.htm页面22.htm页面33.htm页面44.htm页面55.htm页面66.htmn 树状链接结构（一对一）。点击“古典音乐”点击“古筝”n 星状链接结构（一对多）。 页面1（1. Htm)主页面（index. Htm)页面3（3. Htm)页面2（2. Htm)点击“影视”点击“古典音乐”n 最好的

7、办法是：最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。页面1（1. Htm)主页面（index. Htm)页面3（3. Htm)页面2（2. Htm)页面6（6. Htm)页面7（7. Htm)页面4（4. Htm)页面5（5. Htm)点击“古典音乐”音乐页面 在程序员进行详细设计的同时，网页美工开始设计网站的整体形象和首页。整体形象设计包括标准字体、Logo、标准色彩、广告语等。首页设计包括版面、色彩、图像、动态效果、图标等风格设计，也包括菜单、标题、版权等模块设计。也可以将自己感兴趣的素材通过图像切割工具将其收集。 模块布局宗旨在于方便访问者浏览，如今

8、的多媒体Web网页具有强大的交互功能，多种媒体方式如文字、图片、动画、声音、超级链接等同时存在。文字是一种简洁有效的媒体，输入方便，处理速度快，在网速较慢的情况下适合用文字进行大面积布局。图片可以给人以较为直观的感受，以及更为感性的认识，其缺点是下载速度慢，在网速慢的情况下不宜大面积运用。（5）设计网站的整体风格n 网页的色彩 网页的色彩是树立网站形象的关键因素之一。在搭配网页色彩时，要注意色彩的鲜明性、独特性、合适性和联想性。各板块采用与网站首页同一色系的颜色，整个板块内部也尽量保持风格一致。可以采用专门的配色软件。 n 网页的文字 注意以下基本原则:l 不要使用超过3种字体类型，否则网页看

9、起来将显得杂乱，没有主题l 不要用太大的字，因为版面空间非常宝贵和有限，粗陋的大字体不能带给浏览者更多的信息l 最好不要使用不停闪烁的文字。l 标题的字体比正文要稍大一些，颜色也应有所区别。n 设计网站的标志(logo) logo是你站点特色和内涵的集中体现，看见logo就让大家联想起你的站点。标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。 下载另存后的文件为：Twins07.swf 在自己的页面中选择“插入”|“媒体”|“Flash”命令中国风格：古色古香，韵味典雅，古典的边框，温雅的颜色。具有个性的网页欣赏：天马星空，随性发挥常见的中国门户网站：庄重大气，有板有眼，方

10、方正正，内敛不张扬。企业类简洁网页：页面清爽，让客户一目了然，大气，颜色多和产品类型有关。欧美风格-科技感：动感的弧形图案，金属质感的图标，以及商业化、科技感的图片。时尚感：前卫、时尚的图片，相关颜色的陪衬科技色多，色调偏冷、页面结构硬朗。日韩风格：渐变颜色，颜色鲜明，使用高分辨率的图片。日韩风格：颜色搭配调和，多种颜色而不觉花哨，色彩丰富饱和而恰到好处。 根据网站内容的整体风格，设计版面布局。设计者可以参考其他优秀的网站，调用自己的各种知识储备，特别是艺术方面的知识。这时设计者用笔在纸上粗略地勾画出布局的轮廓。常见的网页布局结构有： （6）网页版面和布局T型结构同字结构川字结构三字结构单一结

11、构Flash 型2.网页制作工具（1）网页布局工具 Dreamweaver Frontpage（2）网页美化工具 图像处理软件:Photoshop,Fireworks 动画制作软件 :FLASH,Swish、Ulead GIF Animator,Ulead Cool 3D、3D Flash Animator、Xara3D 本章小结 本章介绍了网页设计与制作的基本概念和基本知识、常用的网页制作工具、网站的基本结构和网页布局等内容。通过本章的学习使读者对网页的设计与制作过程有一个概貌性的了解。 HTML常用标签1.什么是HTML（HyperText Markup Language）语言 ？HTML

12、（HyperText Markup Language）语言是一种描述文本的标记性语言。标记是一些字母或单词，并被放在 中，格式为： 显示内容 通过浏览器解释标记的含义，显示文件的内容。当我们第一次启动Dreamweaver 时会自动打开一个空文档，点击按钮切换到“显示代码视图”就可以看到一个网页的HTML语言结构。如下图： 网页的HTML结构网页的标题头部体部网页的代码结构1.文本段落标记2.字体格式： 标记有3个属性分别用于控制字体的颜色、样式和大小。（1）size属性：其值越大显示的文字越大，字号大小有7个等级，默认为3。可以直接使用字号设置字体的大小，也可以使用+1、-2等数值来指定字号

13、的大小，这表示它比默认的3号字体的大1号和小2号，即4号和1号字。例如： 杭州世界动漫节 (2)color属性 color属性用于控制内的文字颜色，默认字体的颜色是黑色。可以使用Color属性来改变字体的颜色，其值可以是颜色的名称或是一组十六进制的数值。例如： 杭州世界动漫节 杭州世界动漫节（3）face属性 用来指定字体的样式。中文默认字体是“宋体”，英文字体是“Time New Roman”，使用face属性设置字体时，可以使用多个字体名称作为face的属性值。当浏览器显示含有多个字体的网页时，浏览器将逐个搜索系统字体以得到匹配。例如： 杭州世界动漫节平行线地址信息3.列表列表n 无序列表

14、无序列表 无序列表的各个项目可以按任意次序排列，项目之无序列表的各个项目可以按任意次序排列，项目之间相互独立。列表的各个项目前使用特定的符号做标间相互独立。列表的各个项目前使用特定的符号做标记。如下图：记。如下图：无序列表必须由标记开始，标记结束。所有的列表项都在标记中。列表中的项目由标记定义，项目的条数由的个数确定。列表项目1列表项目2列表项目3下图是源代码： 有序列表有序列表有序列表是将列表的中的各项进行编号，各个项有序列表是将列表的中的各项进行编号，各个项目之间有一定的逻辑次序。目之间有一定的逻辑次序。有序列表由标记开始，标记结束。所有的列表项都在标记中。列表中的项目由标记定义，项目的条

15、数由的个数确定。列表项目1列表项目2列表项目3源代码如下图：4.使用超链接.链接接到站点中的其他网页链接接到站点中的其他网页 网页在浏览器中打开后，网页中的超文本链接通常显示为蓝颜色，带下划线的文本。下图是一个超链接的示例网页。超链接代码 ，设置格式为：描述文字 链接到互联网中的某一资源链接到互联网中的某一资源 超链接不仅可以链接到指定的站点内的资源，也可以链接到互联网中的任何站点。4 .网页中添加图像网页中添加图像1 在网页中添加图像在网页中添加图像2 使用图像做项目符号使用图像做项目符号 3 图片超链接图片超链接 返回章目录返回章目录1 在网页中添加图像在网页中添加图像图像的格式图像的格式

16、网页中加入图片会使页面更加美观、生动、有吸引力。网页中可以添加的图片文件类型是扩展名为jpg、gif和png的图片文件。图像的位置图像的位置网页中插入的图片即可以是站点中的图片文件，也可以是互联网中任何网站中的图片文件 。添加图像的标记添加图像的标记标记可以实现在网页中加入图片。使用标记加入图片时必须指定标记的src属性值来确定图像文件的位置。在网页“显示代码视图”中的代码如下图：插入图像的宽度像素值 插入图像的高度像素值 固定网页背景图片固定网页背景图片 在标记中的属性bgproperties=fixed的设置，可以使网页内容长度超过一屏时，在网页内容滚动时背景图片静止不动。2 使用图像做项

17、目符号使用图像做项目符号 在网页中常常看到列表项的标记不是黑的实心圆点，也不是黑色方块或者空心圆圈。而是彩色的漂亮图片或具有动态效果的动画。如下图： 其实很简单，在每一行的文本前都插入一个图片文件即可。不用再设置列表标记。在网页“显示代码视图”中的代码如下图： 添加的部分3 图片超链接图片超链接 很多网页中的图片不仅仅是一张图片，当鼠标指针在图片上方悬停时会变成手型，点击图片后会打开其他的网页或资源。实现这样效果的图片就是给插入的图片添加超链接。图2.22图2.23设置图片超链接的源代码为：图片所设置的超链接插入的图片文件5. 表格的基本语法表格的基本语法一个表格的所有内容都在标记中。一个标记

18、中，表格的行数由标记的个数确定，表格的列数由在一个标记中包含的标记的个数确定。单元格的内容由标记定义。标记定义表格开始 标记定义表格第一行  标记定义该行第一个单元格的内容  标记定义该行第二个单元格的内容  标记定义该行第三个单元格的内容 标记结束表格第一行 标记定义表格下一行  标记定义该行第一个单元格的内容  标记定义该行第二个单元格的内容  标记定义该行第三个单元格的内容 标记结束表格下一行标记结束表格定义 表格的嵌套就是在某一单元格内标记中，添加表格标记。效果如图所示：n 设置

19、表格头:通常是黑体居中文字 当在属性面板中选中了“标题”后面的复选框，当前单元格的标记将转变为标记（表头标记）。显示效果为单元格的内容居中对齐，并显示为黑体加粗。效果如图：6.滚动标签 选中文字，在Dreamweaver 8中选择【插入】|【标签】命令，然后选择marquee标签就可以了。例如：csscss.htm文件behavior属性:指定文本的滚动方式，分为三种: Scroll:从一端消失后，在另一端出现并继续滚动。例如(用插入标签的方式） ： 一圈一圈地滚动 Slide:从一端滚动，接触到另一端后停止 。例如： 只滚动一次就停止 Alternate:从一端滚动到另一端后，反向滚动。例如

20、： 来回滚动 BGCOLOR属性：用于设定字幕的背景颜色。背景颜色可用RGB、16进制值的格式或颜色名称来设定。例(用插入标签的方式）： 用颜色名称设定滚动文字背景颜色为红色 用16进制值设定滚动文字背景颜色为红色 用RGB设定滚动文字背景颜色为红色 DIRECTION属性：用于设定文本滚动的方向，可以设定的值有：left，down.up.right。此属性不是必须使用的。例：文字向左边滚动 文字向右边滚动 文字向上滚动 HEIGHT 属性：用于设定滚动字幕的高度，高度可用像素或可视页面的百分比来表示。此属性不是必须使用的。例： 滚动字幕的高度是可视页面的10% 滚动字幕的高度是12像素 WI

21、DTH属性：用于设定字幕的宽度，宽度可用像素或可视页面的百分比来表示。此属性不是必须使用的。例： 滚动字幕的宽度是可视页面的90% 滚动字幕的宽度是200像素 LOOP属性：用于设定滚动字幕的滚动次数。当LOOP的值为INFINITE或是-1时，则文字会无限制地滚动。此属性不是必须使用的。例： 文字滚动无数次 文字滚动5次 7.VBScript代码块标签 例如加入当前时间代码： 综合举例： 选择“查看”|“源文件”命令： 复制：一、网页布局-表格二、超链接三、添加文本四、插入图像五、用框架布局页面静态页面设计一、网页布局1、布局的实质布局布局: 就是在页面上划分出不同的区域，按照设计的原则和方

22、法，把不同的内容放置到不同的位置上，并通过色彩调和出不同的网站基调，使网页内容形成一个有机的整体，充分表达网站主题的过程。布局的方法布局的方法 :表格、层、框架 利用表格布局：利用表格布局： 在插入面板中选择“常用”标签，点击按钮，弹出 “插入表格”对话框，设置相应的参数来插入表格。也可以通过选择“【插入】【表格】”菜单命令打开“插入表格”对话框。“插入表格”对话框 l行数行数：新插入的表格的行数，可以更改数值来确定行数。 l列数列数：新插入的表格的列数，可以更改数值来确定列数，行、列数控制表格划分的区域个数（行列）。l表格宽度表格宽度：表格的宽度可以选择是占页面宽度的百分比（单位为百分比）或

23、者固定尺寸（单位为像素）。l 边框粗细边框粗细：表格的边界宽度，单位为像素，表格的属性设置中将详细讲解边框、填充值和间距值的区别。l 单元格边距：单元格边距：单元格边框和单元格内容的间隔距离。l 单元格间距：单元格间距：单元格和单元格之间的间隔距离。l 页眉：页眉：把表格的第一行或第一列作为标题行或标题列。 作为标题行或标题列的行或列的内容将以粗体的形式显示。l 标题：标题：提供一个显示在表格外的表格标题。l 对齐标题：对齐标题：指定表格标题相对于表格的显示位置。l 摘要：摘要：给出表格的说明。该文本不会显示在用户的浏览器中。1.表格的属性设置（1）“表格Id”是表格的ID，有时动态更改表格属

24、性时要用到它。（2）“行”和“列”是表格中行和列的数目。（3）“宽”和“高”是表格的宽度和高度，以像素为单位或者是按占浏览器窗口宽度的百分比计算的。（4）“填充”是单元格内容和单元格边界之间的像素数。（5）“间距”是相邻的单元格之间的像素数。（6）“对齐”指表格相对于同一段落中其他元素（如文本或图像）的显示位置。居左、居中还是居右。（7）“边框”指表格边框的宽度（以像素为单位）（8）“清除列宽”按钮 和“清除行高”按钮 是清除表格中所有显示指定的行高和列宽值。（9）“将表格宽度转换成像素”和“将表格高度转换成像素”按钮是将表格中列的宽度或高度设置为以像素为单位的当前数值。（10）“将表格宽度转

25、换成百分比”和“将表格高度转换成百分比”按钮是将表格中列的宽度或高度设置为按占文档窗口宽度百分比表示的当前宽度。（ 11）“背景颜色”指定表格的背景颜色。（12）“边框颜色”指定表格的边框颜色。（13）“背景图像”指定表格的背景图像。 选中一个单元格 选中一行 选中一列 选中不相邻的单元格(Ctrl) 插入删除行和列（鼠标右键“表格”选项）2单元格的操作3.单元格属性（1）“合并单元格”按钮 可将所选的多个连续单元格、行或列合并为一个单元格。（2）“拆分单元格”按钮 可将一个单元格分成两个或是更多的单元格。单击该按钮，会打开“拆分单元格”对话框，如图 所示。在该对话框中可以选择将选中的单元格拆

26、分成“行”或“列” （3）“水平”文本框：设置单元格内对象的水平对齐方式。（4）“垂直”文本框：设置单元格内对象的垂直对齐方式。（5）“宽”和“高”文本框：设置单元格的宽度和高度，可以用像素或百分比来表示。（6）“不换行”复选框：设置单元格文本是否换行。如果选择该复选框，则当输入的数据超出单元格宽度时，单元格会自动调整宽度来容纳数据。（7）“标题”复选框：如果选择该复选框，可以将所选单元格的格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体并且居中对齐。（8）“背景”文本框：设置单元格的背景图像。（9）“背景颜色”文本框：设置单元格的背景颜色。（10）“边框”文本框：设置单元格边

27、框的颜色。例：网页模板的设计使用模板提高网页制作效率 模板是网页编辑软件生成具有相似结构和外观的一种网页制作功能。如果希望站点中的网页享有某种特性，例如，相同的布局结构，相似的导航栏等内容，模板是是非常有用的。 模板是由两类区域组成的：锁定区域和可编辑区域。当某个文档从某些模板中创建时，可编辑区域则成为唯一可以被改变的地方。1直接新建模板 在Dreamweaver中可以直接创建模板文件，具体步骤如下： （1）选择“文件”“新建”命令，打开“新建文档”的对话框，在对话框的“常规”选项卡中选择“类别”中的“模板页”中的“HTML模板”选项 2从现有页面生成模板对于已经设计好的网页文档，如果觉得有必

28、要作为模板文档，则将其另存为模板即可，具体操作如下： （1）打开要另存为模板的文档网页，选择“文件”“另存为模板”命令， （2）打开“另存为模板”对话框，在对话框中，在“站点”下列列表中选择相应的站点，在“另存为”文本框中输入模板的名称，单击“保存”按钮，即可将文件保存为模板。 1.执行“插入表格”命令，弹出“表格”对话框，设置行数为“7”，列数为“7”，表格宽度设置为“930”像素，高设置为“130”像素。单击“确定”按钮，插入一个7行7列的表格。 2.设置表格前3行（单击标签）高度为43，后5列宽度为54，即页面头部右上角3.模板制作过程： 3.将第1列前3行单元格合并，设置宽度为215，

29、将第2列前3行单元格合并，设置宽度为481n 4.将第4行单元格合并，并插入宽度为100%的表格，1行6列5.第6行后6列合并，第1列中插入6行1列表格，并设置相应高度6.设置背景图片和背景颜色7.插入背景图片8.将光标至于要创建可编辑区域的位置，选择“插入”“模板对象”“可编辑区域”命令，打开“新建可编辑区域”对话框 。9.利用模板创建页面 选择“文件”“新建”命令，打开“从模板新建”对话框，在“模板”选项卡中选择站点中的模板，点击创建按钮，就可以创建一个模板页面。二、超链接 在一个文档中可以创建几种类型的链接： 链接到其它文档或文件（如图形、影片、PDF 或声音文件）的链接。 命名锚记链接

30、，此类链接跳转至文档内的特定位置。 电子邮件链接，此类链接新建一个收件人地址已经填好的空白电子邮件。 空链接和脚本链接，此类链接使您能够在对象上附加行为，或者创建执行 JavaScript 代码的链接。1.普通超级链接或者可以点击“浏览”按钮为图片添加链接 在默认情况下，被链接的文件在当前窗口或框架内打开。要使被链接的文档显示在其他窗口或新的窗口或框架内，则需设置属性面板中的“目标(R)”选项“目标(R)”的各选项设置如下： _blank。 将链接的文档在一个新的、未命名的浏览器窗口中打开。 _parent。 将链接的文档在该链接所在框架的父框架或父窗口中打开。如果包含链接的框架不是嵌套框架，

31、则所链接的文档在整个浏览器窗口中打开。 _self。 将链接的文档在链接所在的同一框架或窗口中打开，此目标为默认值，即不指定目标，则在同一框架或窗口打开文档。 _top。 将链接的文档在整个浏览器窗口中打开，从而取代当前窗口的所有框架。 2.锚点链接 锚点链接指向的是本网页中或其他网页中的指定位置。从而使浏览者可以快速到达指定的位置，所以锚点链接特别适合各个章节之间的跳转，以及长篇文字的阅读等。锚点链接和其他链接制作不太相同，在使用前必须先定义一个锚点，然后在其他的地方指向这个锚点。（1）设置锚点 在设计视图中，将光标移动到需要设置锚点的地方，或选择需要作为锚点的文本。 选择“插入”“命名锚记

32、”命令，或按下快捷键Ctrl+Alt+A，或单击“常用”插入栏中的“命名锚记”按钮，将打开“命名锚记”对话框 注：如果在设计视图中没有看到锚记，则可以选择在菜单“查看”“可视化助理”“不可见元素”命令来进行查看。（2）创建锚点链接 选择要建立链接的文本或图像。 在“属性面板”的“链接”文本框中输入#号和锚记名称。例如：输入“#1”。 3E-mail链接 E-mail链接也是众多网站上网页的重要内容之一，浏览者只需要在其上单击鼠标，就可以打开邮件发送程序，与企业或个人进行交流。电子邮件链接与其他超级链接稍微有不同，链接地址不再以http开头，而是mailto，设置链接的方式与其他链接一样。 在设

33、计视图中，选择要作为电子邮件链接的文字或将光标置于需要设置电子邮件链接的地方。 选择菜单“插入”“电子邮件链接”命令，或单击“常用”插入栏中的“电子邮件链接”按钮，将打开“电子邮件链接”对话框 “属性”面板窗口如图所示，也可以在文档窗口输入文字，在属性窗口中修改链接的E-mail地址。 4.空链接 相比上面介绍的其他所有超链接种类，空链接最为独特，它是一种没有链接对象的链接。空链接中的目标URL是用“#”来表示的，在制作链接时，只要在“属性”面板的“链接”文本框中录入“#”标记即可 5脚本链接 脚本链接是一种特殊类型的链接，通过单击带有脚本链接的文本或对象，可以运行相应的脚本及函数（如Java

34、Script、VBScript等），从而为浏览者提供许多附加信息。 在文档窗口，选择要创建链接的文本或其他对象。 在“属性”面板中的“链接”文本框中输入“JavaScript：”，接着输入相应的JavaScript代码或函数，如JavaScript:alert(您好,谢谢光临！)三、添加文本 1 输入普通文本： 在Dreamweaver8中输入文本的方法有很多。可以直接在文档窗口中输入文本，也可以从其他文档中剪切并粘贴或导入文本。 2输入特殊字符 单击“插入栏”左侧的下拉按钮，在打开的下拉列表中选择“文本”选项，然后单击最右边的“字符”下拉按钮。 在弹出的下拉菜单中选择合适的特殊字符，如、等。

35、如果没有合适的字符，可以选择“其他字符”选项 3输入空格 因为HTML有规定，连续多个空格将被忽视，只显示一个空格，所以Dreamweaver中不能直接输入多个空格，要想输入多个空格 ： （1）切换中文输入法为全角模式，输入全角的空格。 （2）单击“文本”插入栏中的“字符”下拉菜单按钮，在下拉列表中选择“不换行空格”命令。 （3）在HTML代码中要插入空格的位置输入多个“ ”，在设计视图显示的就是输入了多个空格。4输入日期（1）在设计视图中直接输入日期的文本。（2）单击“常用”插入栏中的“日期”按钮，在弹出的“插入日期”对话框中选择需要的日期格式并单击确定。 选择“存储时自动

36、更新”复选框，则在日期格式插入到文档中后可以对其进行编辑，如果没有选这项，插入后变成纯文本，不好修改。如果希望在每次保存文档时都更新插入的日期，则选择“储存时自动更新”。 如果要更改日期，可以先用鼠标选中该对象，然后单击“属性”面板中的“编辑日期格式”按钮， 5.设置文本格式1标题 在HTML中，一共定义了6级标题，从1级到6级，字体大小依次递减。 （1）选择相应的文本，选择“文本”“段落格式”命令，然后在子菜单中选择相应的标题。 （2）选择相应的文字，在“属性”面板上的“格式”下拉列表中选择相应的标题。 2字体对文本进行字体设置的方法有以下两种： （1）选择要设置字体的文本，然后选择 “文本

37、”“字体”命令，在弹出的子菜单中选择合适的字体类型。 （2）选择要设置字体的文本，单击“属性”面板上的“字体”下拉按钮，在下拉列表中选择合适的字体类型。如果没有找到合适的字体，单击“编辑字体列表”命令，将弹出“编辑字体列表”对话框 3颜色（1）选择要设置颜色的文本，然后选择“文本”“颜色”命令，将弹出“颜色”对话框（windows标准颜色对话框）。（2）选择要设置颜色的文本，单击“属性”面板上的“文本颜色”按钮，打开颜色选择器。 （3）在“属性”面板上点击“页面属性”，或者选择菜单“修改”“页面属性”命令，打开“页面属性”对话框，可以设置文本的字体颜色 4文本大小 选择要设置的文本，在“属性”

38、面板上的“大小”下拉列表中选择合适的文本大小，也可以在文本框中直接输入数值来改变文本大小，如果不想设置，则选择“无”选项，此时，文本就恢复为默认的文本大小。 5文本的样式： 文本的样式，即文本的显示方式，如加粗、倾斜、下划线和删除线等。 设置文本样式的方法是选择要设置的文本，然后选择菜单“文本”“样式”命令 6对齐 对齐可以将几个段落相对于文档窗口进行对齐，有4种对齐方式：左对齐、居中对齐、右对齐、两端对齐。 设置方法同上所述，可以选择菜单“文本”“对齐”命令来实现，也可以在“属性”面板上单击对齐方式的按钮来实现 。7缩进和凸出缩进和凸出有两种设置方法：（1）将光标至于要设置缩进的文本中，选择

39、菜单“文本”“缩进”命令，就可以将文本向右移两个字符的位置。选择“文本”“凸出”命令，则可以将文本向左移两个字符的位置。（2）在“属性”面板中点击缩进和凸出的图标 ，也可以进行设置。8文本列表（1）项目列表的类型 项目列表根据各个项目之间是否有先后次序，可以分为有序列表和无序列表。 无序列表表示各个项目之间没有先后次序，通常用正方形、菱形等符号作为列表项的前缀。而有序列表正好相反，各项目之间具有明确的先后关系，前缀符号常常是阿拉伯数字、罗马数字和英文字母等。 （2）对现有文档进行项目列表 创建无序列表 选择所输入的文本，然后选择菜单“文本”“列表”“项目列表”命令，或者单击“属性”面板下方的“

40、项目列表”按钮。 创建有序列表 选择所输入的文本，然后选择“文本”“列表”“编号列表”命令，或者单击“属性”面板下方的“编号列表”按钮。 （3）设置列表属性 在介绍建立有序列表和无序列表时，默认只有一种前缀，其实还可以通过修改列表属性来改变前缀。 选择“文本”“列表”“属性”命令，打开“列表属性”对话框 列表类型列表类型指定列表属性，而列表项目列表项目指定列表中的个别项目。使用弹出式菜单选择项目、编号、目录或菜单列表。根据所选的“列表类型”，对话框中将出现不同的选项。样式样式确定用于编号列表或项目列表的编号或项目符号的样式。所有列表项目都将具有该样式，除非为列表项目指定新样式。开始计数开始计数

41、设置第一个编号列表项的值。文字变化典型实例 在网页中插入文字并对文字进行修饰的方法，包括色彩变化、大小变化、特殊字符、斜体粗体、段落缩进、对齐效果等。灵活掌握这些方法，对网页制作能起到很大的帮助。四、插入图像1 插入图像对象 在Dreamweaver中向网页文件插入图像，Dreamweaver会自动生成该图像的路径引用，如果要是图像能够正确地在网页中显示，必须保证此图像文件在当前的站点内。如果不在站点内，Dreamweaver会提示是否将此图像复制到当前站点的文件夹中。(1)插入单个图像 选择要插入图像的位置，然后选择“插入”“图像”命令，或者单击“常用”插入栏中的“图像”“图像”按钮 在弹出

42、的“选择图像源文件”对话框中，选择本地的图像文件 (2)插入图像占位符 图像占位符，是最终图像的一个暂时替代品。虽然没有最终的图像，但是可以让设计者很直观的看到设计的整体效果。 插入图像占位符的步骤如下： 选择要插入图像占位符的位置，然后选择“插入”“图像对象”“图像占位符”命令，或者单击“常用”插入栏中的“图像”“图像占位符”按钮，将弹出“图像占位符”对话框. 在“替换文本”文本框中，输入描述此图像占位符的文字，当浏览器不能显示该图像占位符时，就会显示该替换文本。选中该图像占位符，也可以通过属性面板来修改图像占位符的属性，如大小，颜色，替换文本等。(3)插入鼠标经过的图像 鼠标经过的图像实际

43、上是由两幅图像组成的，即原始图像和鼠标经过的图像。原始图像，是首次网页装载是显示的图像；鼠标经过的图像是鼠标移动到原始图像上时，用来替换原始图像的图像。 选择要插入鼠标经过的图像的位置，选择“插入”“图像对象”“鼠标经过图像”命令，或者单击“常用”插入栏中的“图像”“鼠标经过图像”按钮，将弹出“插入鼠标经过图像”对话框。(4)插入导航条 导航条由图像和图像组组成，这些图像显示的内容随用户操作的变化而变化。导航条通常为站点上的页面和文件之间的移动提供一条简洁的途径。导航条项目有4种状态：一般状态、鼠标经过状态、按下状态、按下时鼠标经过状态。 选择要插入导航栏的位置，选择“插入”“图像对象”“导航

44、条”命令，或者单击“常用”插入栏中的“图像”“导航条”按钮，将弹出“插入导航条”对话框 l 在导航条里，每个链接图像即为一个项目，全部导航条项目都显示在“导航条元件”列表框中。单击 “+” 按钮，将增加一个项目，在列表框中选择一个项目，单击“-” 按钮，可以删除选择项目。选中一个项目，单击“向上向下”按钮，可以调整选择的项目在导航条里的排列位置l “项目名称”文本框：为项目起一个名称，英文或数字。l “状态图像”文本框：设置这个项目原始图像，可单击“浏览”按钮，选择源图像文件。l “鼠标经过图像”文本框：设置当鼠标经过这个项目的原始图像时变成的图像，可单击“浏览”按钮，选择图像文件。l “按下

45、图像”文本框：设置当鼠标左键按下后，这个项目所显示的图像，可单击“浏览”按钮，选择图像文件。l “按下时鼠标经过图像”文本框：设置当鼠标左键按下后，鼠标经过这个项目所变成的图像，可单击“浏览”按钮，选择图像文件。l “替换文本”文本框：设置当图像无法显示时，所显示的文字说明。l “按下时，前往的URL”文本框：设置当单击这个项目时所链接的网址。l “插入”下拉列表：设置导航条的排列方式，选择“水平”，则导航条将水平排列，如果选择“垂直”，则导航条将垂直显示。l “使用表格”复选框：选择该复选框，导航条将用表格排版，每个链接图像位于一个单元格内。l 单击“确定”按钮，即可在网页中插入一个导航条。

46、2.设置图像属性 在网页中插入原始图像后，往往达不到想要的效果，这是就需要对图像进行相关的设置。打开文档，选中要修改的图像，然后在属性面板中改变图像属性边距:是图像和周围元素间的距离，在垂直边距和水平边距文本框中可为图像的边缘添加边距，单位也是像素。低解析度源:这里指定在载入主图像之前所载入的图像。许多设计人员使用二位（黑白）图像版本，由于他们的数据量比较小，在主图像载入之前能很快显示，使访问者能对他们等待的图像内容有所了解。当然，在这里也可以指定任何与主图像大小相同的图像，不一定是主图像的缩略图。3.创建热区链接 一张图片内可以创建包含多个链接，图像内不同的区域或文字都可以指向具体链接目标。

47、图像图内创建链接的区域称为“热区”，热区与链接目标逐一对应，单击热区后，即可对链接目标进行跟踪、访问。 （1）选中要创建热点区域的图像，打开“属性”面板。 （2）在“属性”面板中的“地图”文本框中输入该热点区域的名称。 （3）创建圆形的热点区域，则点击椭圆形的热点工具，然后在图像上的某个区域拖拽鼠标指针，从而创建一个圆形的热点区域，也可以选择矩形和多边形热点工具来创建热点区域。 l 在“链接”文本框设定链接的URL地址。l 在“目标”下拉列表中，设置链接目标文件的打开窗口类型。l 在“替换”文本框中输入给图像热点区域的替换文字。例2：导航栏五、用框架布局页面 框架的作用就是把浏览器窗口划分为几

48、个不同的区域，每个区域显示不同的网页。常见的框架方式是将左方区域或上方区域设置为目录区域，其中包含显示文件各个页面的目录索引或导航条。右方区域或下方区域为主体区域，显示网页变化的主体内容。用户单击目录索引项或导航条时，主体区域就显示相应的内容。而目录区域的导航内容始终显示在页面上，这样将重复区域固定下来，当向浏览器发出请求时，只下载变化的网页内容。框架集就是框架的集合，实际上是一个页面，用于在一个文档窗口中显示多个文档的框架结构。在框架集中显示的每个框架，就是一个独立存在的HTML文件 。1创建框架集（1）创建预定义框架集：在Dreamweaver中，可以用两种方式：通过“布局”插入栏创建框架

49、集，步骤如下：l选择“布局”插入栏，在“布局”插入栏中选择“框架”选项 。l打开框架选择面板，选择一种框架结构，可以是左侧框架、右侧框架、上下框架等。 l 单击某个框架类型，系统会自动弹出“框架标签辅助功能属性”对话框。 l 单击“框架”下列列表，选择要更改标题的框架，然后在“标题”文本框中输入框架标题。通过菜单命令创建新的空框架集l 打开Dreamweaver，选择“文件”“新建”菜单命令，打开“新建文档”对话框，在该对话框中“常规”选项卡的“类别”列表框中选择“框架集”选项（2）编辑框架集）编辑框架集将鼠标放在要插入新框架的框架页中，选择“插入”|“HTML”|“框架”命令，在后面的列表中

50、选择需要的样式；或者选择“修改”|“框架页”命令，可以进行框架的拆分。（3）调整框架大小l 如图，单击“可视化助理”按钮，在弹出的菜单中选择“框架边框”并打开l 将鼠标移至“文档窗口”边框，当鼠标指针变为双向箭头时，拖动鼠标即可粗略调整框架的大小。2存储框架和框架集（1）保存框架集的所有文件 保存框架集的所有文件的方法为：选择“文件”“保存全部”命令，将弹出“另存为”对话框，提示保存框架文件；或者也可以依次一个一个保存框架集和框架。在保存时，正在保存的框架会以虚线标识。（2）重命名框架文件在文档窗口中选择某个框架，选择“文件” “框架另存为”命令。 （3）重命名框架集文件 在框架面板选择框架，

51、选择“文件” “框架集另存为”命令。（4）保存框架模板设置保存框架模板的方法为：选择“文件”“框架另存为模板”命令。3选择框架 选择“窗口”“框架”命令，将出现“框架”面板 在“框架”面板中单击某个框架，即可选择该框架，当框架或框架集被选中时，边框出现点线。4.设置框架属性 在“框架”面板中选择某一框架后，便可在框架属性检查器中设置它的属性。 （1）框架名称：用来识别该框架。（2）源文件：该框架中的网页文件名称。（3）滚动：是否加入滚动条。（4）边界宽度：设定框架中的内容与左右边框的距离。（5）边界高度：设定框架中的内容与上下边框的距离。（6）边框：是否显示边框。默认为显示。（7）边框颜色：设

52、定边框框架的颜色。（8）不能调整大小：在网页浏览时，是否允许在浏览器中改变框架的大小。5.设置框架集的属性在“框架”面板中选择框架集，请先在“框架”面板中单击环绕框架集的边框，框架集就被选中了，选中以后，周围会环绕一条较粗的黑线。框架集的“属性”面板与框架不同 （1）边框：是否显示边框。（2）边框宽度：设置边框的宽度。（3）边框颜色：设置边框的颜色。n精确调整框架大小（4）值：指定所选行或列的大小。（5）单位：指定所选行或列的值的单位l 像素：给框架的高或宽设置绝对值。一般将目录区域框架设置为固定值，主体区域设置为相对，这样可以使主体区域框架伸展以占据所有剩余空间。l 百分比：是指框架占它所在

53、的框架结构总高或总宽的百分比。 l 相对：在其他框架设置了以像素或百分比为单位的高宽之后，剩余的高宽会分配给单位设置为“相对”的框架。 6 框架布局实例（1）新建文档。打开Dreamweaver8，选择“文件”“新建”命令，在弹出的“新建”文档对话框的“常规”选项卡中选择“框架集”中的“左侧和嵌套顶部框架”建立空白框架页。（2）分别在三个框架页面中添加网页内容，在上方框架页面中设计页首，左边的框架页面中设计导航菜单，在右边的框架页中设计主窗口显示页面。当然也可以根据需要自行决定。 （3）如果希望点击左侧框架中的文字可以在框架右侧显示链接的内容，可以在链接的属性面板中进行设置 层、 行为和时间轴

54、一 、用层进行页面布局二、行为三、利用时间轴制作动画效果一 、用层进行页面布局层是一种HTML页面元素，可以用来包含文本、图像、表格或其他任何可在HTML文档正文中放入的内容，而且层可以定位到网页上任何位置，并可以随意移动，层之间也可以前后放置、隐藏或者显示，利用动作行为，层还可以制作出动画效果，所以层的功能非常强大。 通过“层”面板可以管理文档中的层。选择“窗口”“层”命令就可以打开“层”面板 “层”面板分3栏，最左侧是眼睛标记，用鼠标直接单击标记，可以显示或隐藏所有的层，中间显示的是层的名称，最右侧是层在Z轴排列的情况。创建层有以下方式：（1）插入层：将光标移动到设计视图中想要插入层的位置

55、，然后选择“插入”“布局对象”“层”命令。（2）绘制层：在“布局”插入栏中单击“绘制层”按钮，然后在设计视图拖拽鼠标形成一个层。（3）绘制多个层：使用绘制层的方法并按住Ctrl键不放，可以连续绘制多个层。层的属性主要有以下几项：（1）层编号：指定层的名称。层的名称只能使用字母和数字。（2）宽和高：指定层的宽度和高度。（3）左和上：指定层的左上角相对于页面或父层左上角的位置。（4）可见性：指定层的初始状态是否可见。Default：缺省属性，一般默认为“继承”；Inherit：继承父层的可见性属性；visible：显示层；hidden：隐藏层。（5）溢出：指定当层的内容超过层指定的大小是应如何处理

56、。visible：指定在层中显示额外的内容，该层会自动延伸来容纳额外的内容；Hidden：不在浏览器中显示；Scroll：滚动显示；Auto：当层的内容超出浏览器边界时，使用滚动条显示。层与表格的转换 层和表格都能在页面中排版布局，定位网页对象元素，例如，定位图片、文本等。但各有不同优势，也各有一些缺点。用户在网页中定位对象时可以相互转换，以发挥各自优势实现优势互补。1转换层到表格（1）在层内定位好网页对象元素，然后选中所有要转换为表格的层 （2）选择“修改”“转换”“层到表格”命令，打开“转换层为表格”对话框“最精确”单选按钮：选择该单选按钮会严格按照层的排版布局生成表格，但表格的结构会非常

57、复杂。一般会为每个层创建一个单元格，同时为空白区域创建任何单元格。以保证布局固定为原状态。“最小：合并空白单元格”单选按钮：选中该单选按钮将设置如果层定位在指定数目的像素内，则层的边缘应对齐。如果选择该选项，结果表格将包含较少的空行和空列，但可能不与页面的布局精确匹配。“使用透明GIF”复选框：选中该复选框，会在转化的空白单元格中插入透明的GIF格式图像，包括表格的最后一行，支持表格的长度，避免表格因无内容而缩小为最小状态。这将确保该表在所有浏览器中以相同的列宽显示。当启用此选项后，不能通过拖动表列来编辑结果表。当禁用此选项后，结果表将不包含透明GIF格式图像，但在不同的浏览器中可能会具有不同

58、的列宽。“置于页面中央”复选框：将结果表放置在页面的中央。如果取消此复选框，表将在页面的左边缘开始。转换表格到层当页面布局需要进行调整，如果是表格布局，调整起来会比较困难。这时，如果先把表格布局转换为层布局，通过移动层来调整布局，即方便又快捷，最后根据情况再将层转换为表格。转换表格到层的操作步骤如下：（1）打开要转换为层表格的网页。（2）选择“修改”“转换”“表格到层”菜单命令，打开“转换表格到层”对话框 防止层重叠：选中该复选框可以在转换后的页面中激活防止层重叠的功能。显示层面板：选中该复选框可以在转换后的页面中显示“层”面板。显示网格：选中该复选框可以在转换后的页面中显示网格线。靠齐到网格

59、：选中该复选框可以在转换后的页面中将层与网格线对齐。（3）在弹出的对话框中选择想要的选项。例：插入层（“飞扬书城”）并创建可编辑区域 将光标移动到设计视图中想要插入层的位置，然后选择“插入”“布局对象”“层”命令 在层中输入“飞扬书城”，并进行相关的样式设置。二、行为 行为（Behaviors）是响应某一事件（Event）而采取的一个动作（Action）。行为是Dreamweaver 8中最有特色的功能，它实质上是网页中调用Javascript代码，以实现网页的动态效果，使用了Dreamweaver 8的行为功能，就不需要掌握复杂的Javascript代码而轻松完成一个需要几十行甚至几百行代码

60、才能完成的功能。 1. 网页事件 网页中的事件（Event）是指鼠标、键盘的响应方法，Dreamweaver 8提供了许多常用的事件。 启动Dreamweaver ，单击“【窗口】【行为】”菜单命令，系统打开“行为”面板“行为”面板主要项目功能如下：v 加（+）减（）按钮：用于添加或删除动作（Actions）。v 动作：是网页产生的具体行为。v 事件：当选定某个动作时，事件右侧出现一个箭头，按此箭头产生一个事件处理的下拉菜单，通过下拉菜单可选择触发动作发生的条件，以下是常见事件及描述。 OnClickOnClick：当访问者在指定的元素上单击时产生。onDblClickonDblClick：当访问者在指定的元素上双击时产生。 onKeyDown