第四章页面设计

1、4.14.1设置网页属性设置网页属性4.1.1网页标题 如果文档工具栏没有显示，使用菜单“查看”“工具”“文档”可打开其显示。4.1.2设置页面属性使用菜单“修改”“页面属性”可打开此对话框。 1.外观外观外观设置中，可以设置页面缺省的文字的字体、风格、大小、颜色等属性，还可以设置页页面的背景颜色和图像。2.链接链接链接属性设置默认的超链接文字的字体、大小、颜色等设置 3.标题标题标题设置正文中标题文字的字体、大小和颜色 4.标题标题/编码编码这里既可以设置网页的标题，还可以设置网页的文字编码 5.跟踪图像跟踪图像“跟踪图像”是Dreamweaver一个非常有效的功能，它允许用户在网页中将原来

2、的平面设计稿作为辅助的背景。 4.1.3文件头设置文件头就是在网页的HTML代码中中的内容，文件头中的内容一般不在浏览器窗口中显示，但对网页的正常工作具有十分重要的作用。1.METAMETA设置自定义的一组网页属性的描述。2.关键字关键字关键字设置网页网站的一组关键字，许多搜索引擎和网站关联性统计是通过关键字搜索网页的。3.描述描述设置对网页的一些描述，一般是网页内容的概述，供其它开发者参考。4.刷新刷新刷新定义网也调入后延迟一段时间的动作 “转到URL”可使得网页显示一段时间后，自动转到其它网站，许多更改地址的网站和欢迎页面经常采用这种方法。“刷新此文档”则重新从服务器调入当前网页，对于经常

3、更新的网页，这项功能十分有用，可以及时发现更新。聊天室是一种典型的应用。5.基础基础设置网页的基准地址 6.链接链接链接用于设置需要链接的CSS等外部文件的地址和类型。 4.24.2页面布局页面布局4.2.1网页的版面布局1.确定显示分辨率确定显示分辨率2.版面布局的模式版面布局的模式（1）T型结构布局 （2）口型布局 （3）三型布局 （4）对称对比布局 （5）POP布局 4.2.2 表格布局 在布局过程中，为了方便各个布局单元的控制，可以多使用表格的嵌套，尽量少使用表格单元格的拆分、合并。 使用表格是常用的布局方式。不使用表格时网页中的元素只能从上到下，使用表格可以将元素按各种格式排列，如水

4、平平行、间隔一定距离。布局的表格可以嵌套，实现复杂的页面布局。4.2.3 使用扩展模式布局 在工具栏上单击扩展表格模式按钮，既可切换到“扩展表格模式” 。 扩展模式下并不是所见即所得的效果，最好不要在单元格中添加内容，只进行页面设计操作。4.2.4 使用布局模式布局用表格布局的页面，往往给人一种过于整齐的排列效果，而使用“布局模式”，则可以是网页中的元素快速、灵活地定位。 在“插入”工具栏单击“布局”按钮，进入布局模式。 4.34.3使用框架布局使用框架布局4.3.1框架集网页1.创建一个新的框架集网页创建一个新的框架集网页创建框架网页前先要让框架边框显示。在“文档”工具栏的最右边单击视图选项

5、按钮 在弹出的菜单中选择“可视化助理”“框架边框”，使得框架边框被选中。 创建一个新的框架集网页有两种方法： （1）使用菜单“文件”“新建”打开新建文档对话框；在该对话框左边选择“框架集”，右边是Dreamweaver MX2004预设好的一些框架网页的格式，在其中选择想要的样式 （2）新建一个文件，将“插入”工具栏设为“布局”模式，单击右部的框架按钮组，打开菜单在其中选择需要的框架网页结构，即可插入一个框架网页 2.编辑框架结构编辑框架结构 (1) 单击窗口中间的框架边框线，选中框架，边框线上出现虚线，拖动边框可以改变框架的大小。 (2) 单击窗口边缘的边框线，选中框架。从边缘拖动边框线，可

6、产生一个新的边框线。 (3) 鼠标移到编辑窗口的四角，光标变成十字箭头时拖动鼠标，可产生纵横各一条新的框架边框线。 (4) 按住Alt键拖动任一条框架边框，可以垂直或水平分割文档（或已有的框架）；按住Alt键从一个角上拖动框架边框，可以把文档（或已有的框架）划分为四个框架。(5) 拖动框架边框到父框架的边框上，可删除框架。3.父框架和子框架父框架和子框架 该图的框架就是先分成上下框架，再把下框架分成左右框架。一般把下框架称为左右框架的父框架，则左右框架是下框架的子框架。 左下框架占最大的区域，用来显示主要的网页内容，称为主框架。4.3.3设置框架网页的属性1.设置框架集属性设置框架集属性通过菜

7、单“窗口”“框架”打开框架面板，在其中单击图示的边框选中一个框架，属性面板变为框架集面板，可设置框架集属性 。 2.设置框架属性设置框架属性在框架面板的某个框架区域中单击可选中此框架的属性 。4.3.4框架链接的目标1.设置网页元素的链接目标设置网页元素的链接目标2.设置网页的缺省显示区域设置网页的缺省显示区域_blank：打开一个新窗口显示目标网页。_parent：目标网页的内容在父框架窗口中显示。_self：目标网页的内容在当前所在框架窗口中显示。_top：目标网页的内容在最顶层框架窗口中显示。使用菜单“插入”“HTML”“文件头标签”“基础”，打开“基础”对话框，在目标中可选择此网页中超

8、链接的默认显示窗口。Href中设置默认查找的网络路径。4.44.4层的使用层的使用4.4.1在网页中插入层1.新建一个层新建一个层（1）打开要创建层的网页。（2）将“插入”工具栏切换到“布局”模式。（3）单击描绘层按钮 鼠标移动到编辑窗口时变成十字形状，可以在网页中的任意位置拖动绘制一个层的边框。 （4）在层的边框中可以插入各种网页元素，如文字、图片、表格等。2.设置层的属性设置层的属性在网页中的层的边框上单击可选中这个层，设置其属性。拖动边框上的8个控制点可改变层的大小。将鼠标放在层边框上除控制点的其他位置，此时鼠标变成十字箭头形状，拖动鼠标可移动层的位置。4.4.2层的叠加和嵌套 1.层的

9、叠加层的叠加使用菜单“窗口”“层”打开层面板组 。2.层的嵌套层的嵌套在一个已有的层中描绘新层时按住Alt键可绘制现有层的嵌套层，如果不按住Alt键绘制的是连个重叠的层。在层面板中按住Ctrl键将一个层拖动到层列表的另一个层上，可将其变为后者的子层。4.4.3层与表格的互相转换1. 将层转换成表格将层转换成表格 选中要转换的层，使用菜单“修改”“转换”“层到表格”打开转换层为表格对话框。2.将表格转换成层将表格转换成层 选中要转换为层的表格，使用菜单“修改”“转换”“表格到层”打开转换表格为层对话框。4.54.5使用使用CSSCSS4.5.1CSS基础1.什么是什么是CSSCSS（Cascad

10、ing Style sheet）是1996年出现的有关网页制作的技术，中文叫做级联风格页或层叠样式表。使用CSS定义的网页风格可以控制HTML语言标志的一些诸如字体、边框、颜色与背景等属性，也可以通过定义外部风格文件实现整个网站页面风格的统一。 2.CSS的作用的作用（1）将格式和结构分离（2）更容易控制页面的布局（3）可以制作出体积更小下载更快的网页（4）可以更快更容易地维护及更新大量的网页（5）良好的浏览器兼容性4.5.2新建样式1.新建样式新建样式 （1）在属性面板样式的样式菜单中选择“管理样式”，在打开的编辑样式表对话框中单击“新建”按钮。（2）使用菜单“文本”“CSS样式”“新建”。

11、 （3）使用菜单“文本”“CSS样式”“管理样式”，在打开的编辑样式表对话框中单击“新建”按钮。 （4）使用菜单“窗口”“CSS样式”打开“设计”面板组中的“CSS样式”面板，单击下面的新建CSS样式按钮 （5）在编辑窗口中单击右键，在弹出的菜单中选择“CSS样式”下的“管理样式”或“新建”。4.5.3 设置CSS属性1.使用样式属性对话框使用样式属性对话框2.使用面板组使用面板组 使用菜单“窗口”“标签检查器”打开“标签”面板组，使用“窗口”“CSS样式”打开“设计”面板组。4.5.4 使用内置的CSS样式 Dreamweaver MX2004提供了方便的CSS属性操作和应用功能的同时，还提

12、供了大量现成的CSS应用模板，可以在制作网页时直接使用。1. CSS网页网页2.CSS文件模板文件模板4.6 CSS4.6 CSS属性属性4.6.1 类型1.字体（字体（font-family）2.大小（大小（font-size） 3.粗细（粗细（font-weight） 4.样式（样式（font-style） 5.变量变量6.行高（行高（line-height）7.大小写（大小写（text-transform）8. 颜色（颜色（color）9. 修饰（修饰（text-decoration）4.6.2 背景1.背景颜色（背景颜色（background-color）2.背景图像（背景图像（bac

13、kground-image）3.重复（重复（background-repeat）4.附件（附件（background-attachment）5.背景图片位置（背景图片位置（background-position）4.6.3 区块1.字母间距（字母间距（letter-spacing） 2. 字词间距（字词间距（word-spacing）3.垂直对齐（垂直对齐（vertical-align）4.文本对齐（文本对齐（text-align ）5. 文本缩进（文本缩进（text-indent ）6.空格（空格（white-space）7.显示（显示（display）4.6.4 方框1.宽（宽（width

14、）和高（）和高（height）2.漂浮（漂浮（float）和清除（）和清除（clear） 3.填充（填充（padding）4.边界（边界（margin）4.6.5 边框1.样式（样式（border-style）2.宽度（宽度（border-width）3.边框颜色（边框颜色（border-color）4.6.6 列表1.类型（类型（list-style-type ）2.项目符号图像（项目符号图像（list-style-image） 3.位置（位置（list-style-position） 4.6.7 定位 定位属性包括类型、溢出、Z轴、宽、高、位置、剪辑的等，其作用和前面介绍的层的定义相同。事

15、实上，在对层的属性进行定义时，就是在层代码行中加入了CSS代码。4.6.8 扩展1.分页（分页（page-break）2.光标光标4.6.9 CSS滤镜1、Alpha 滤镜滤镜2. BlendTrans滤镜滤镜3.Blur 滤镜滤镜 Alpha滤镜是把一个目标元素与背景混合，可以指定数值来控制混合的程度，通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。 BlendTrans滤镜产生一种淡入淡出的效果。 Blur滤镜产生模糊效果。 4.Chroma 滤镜滤镜5. DropShadow 滤镜滤镜 Chroma属性可以在一个对象中指定一种颜色为透明色。 DropShaow是设

16、置对象的阴影效果。 6.FlipH和和FlipV 滤镜滤镜 FlipH和FlipV 滤镜分别是水平反转和垂直反转，这两个滤镜没有参数。 7.Glow 滤镜滤镜 当对一个对象使用glow属性后，这个对象的边缘就会产生类似发光的效果。 8.Gray ,Invert,Xray 滤镜滤镜Gray滤镜是把一张图片变成灰度图 9.Light 滤镜滤镜 这个属性模拟光源的投射效果。 10.Mask 滤镜滤镜 使用Mask 滤镜可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。 12. Shadow 滤镜滤镜11. RevealTrans滤镜滤镜 RevealTrans滤镜能产生23种动态效果，可在其中随机抽用其中的一种。 利用Shadow属性可以在指定的方向建立物体的投影。 13.Wave 滤镜滤镜 Wave 属性把对象在垂直的方向按波纹样式打乱。 思考题4.1 设计一个网页页面需要经过哪些步骤？4.2 页面属性设置都要设置哪些内容？4.3 如何使用表格进行一