《网页设计与制作》第四章：页面设计

null页面设计页面设计南海学院计算机系制作 网页的风格1 网页的风格1 “搜狐”的主页的内容很丰富，色彩鲜艳并有许多大幅广告和浮动广告栏。 网页的风格2 网页的风格2 微软中国的主页，内容比较专一，内容非常有条理，栏目突出，没有凌乱的感觉。 网页的风格3 网页的风格3 “黑白音乐” 是一个个人主页，它看起来更简单，色彩也不够丰富，但感觉非常清新。 本章要点本章要点设置网页属性 页面布局 使用框架布局 层的使用 使用CSS CSS属性 null网页标题　 如果文档工具栏没有显示，使用菜单“查看”→“工具”→“文档”可打开其显示。 页面设置 页面设置1．外观 2．链接 3．标题 4．标题/编码 5．跟踪图像文件头设置文件头设置1.META 　　META设置自定义的一组网页属性的描述。2.关键字 　　关键字设置网页网站的一组关键字，许多搜索引擎和网站关联性统计是通过关键字搜索网页的。3.描述 　　设置对网页的一些描述，一般是网页内容的概述，供其它开发者参考。null4.刷新 　　刷新定义网也调入后延迟一段时间的动作 5.基础 　　设置网页的基准地址 6.链接 　　链接用于设置需要链接的CSS等外部文件的地址和类型。 文件头设置 网页布局实例1 网页布局实例1 网页布局实例2 网页布局实例2 网页布局实例3 网页布局实例3 标题正文型结构的顶端是网站标识和标题，下面是网页正文。内容非常简单。 网页布局实例4网页布局实例4 网页布局实例5 网页布局实例5 网页布局实例6 网页布局实例6null网页的版面布局1.确定显示分辨率2.版面布局的模式（1）T型结构布局 （2）口型布局 （3）三型布局 （4）对称对比布局 （5）POP布局 画出网页布局草图 画出网页布局草图 表格 关于规范使用各类表格的通知入职表格免费下载关于主播时间做一个表格详细英语字母大小写表格下载简历表格模板下载 布局表格布局1个实例 使用表格对课本74页的网页进行布局。 操作步骤操作步骤（1）    插入一个3行1列的表格a。a 760×420 边框为0，填充、间距为0，对齐方式居中。 （2）    在表格a的第3行插入1条水平线，宽度为70％。居中。文字 （3）    在表格a的第1行中插入1个2行1列的表格b。宽度100％。其余0 （4）    在表格b的第1行插入一个1行2列的表格c。宽度100％。 null（5）    在表格b的第2行插入一个1行5列的表格d。宽度100％。 （6）    在表格a的第2行插入一个1行2列的表格e。宽度100％。 （7）    在表格e的第1列插入一个2行1列的表格f。宽度100％。 （8）    在表格e的第2列插入一个2行1列的表格g。宽度100％。 （9）在表格g的第2行插入一个1行3列的表格h。宽度100％。 使用扩展模式布局 使用扩展模式布局　　 在工具栏上单击扩展表格模式按钮，既可切换到“扩展表格模式” 。　 扩展模式下并不是所见即所得的效果，最好不要在单元格中添加内容，只进行页面设计操作。 使用布局模式布局 使用布局模式布局　　用表格布局的页面，往往给人一种过于整齐的排列效果，而使用“布局模式”，则可以是网页中的元素快速、灵活地定位。 在“插入”工具栏单击“布局”按钮，进入布局模式。 使用布局模式布局使用布局模式布局绘制布局表格 绘制布局单元格 使用框架布局使用框架布局一个实例： 框架与框架集的概念 框架与框架集的概念单个框架是指在网页上定义的一个区域，而框架集则记录了同一网页上多个框架的布局、链接和属性信息。 利用框架可以把浏览器窗口划分为多个区域，每个区域可以添加任意网页元素，也可分别显示不同的网页。 框架集与框架之间的关系是包含与被包含的关系，多个框架就组成了框架集，框架集包含了框架1、框架2和框架3共3个框架。 框架与框架集的概念 框架与框架集的概念用框架布局网页时有如下的技巧和规则： 创建好框架或框架集后可对其属性进行设置。 每个框架就是不同的HTML网页，我们需要分别保存每个框架文件和框架集文件。 确保文件中的每个链接都正确。使用框架布局使用框架布局框架集网页1.创建一个新的框架集网页　　创建框架网页前先要让框架边框显示。在“文档”工具栏的最右边单击视图选项按钮 　　在弹出的菜单中选择“可视化助理”→“框架边框”，使得框架边框被选中。 null　 创建一个新的框架集网页的方法 保存设置框架集 编辑框架结构 父框架和子框架父框架和子框架 该图的框架就是先分成上下框架，再把下框架分成左右框架。一般把下框架称为左右框架的父框架，则左右框架是下框架的子框架。 右下框架占最大的区域，用来显示主要的网页内容，称为主框架。设置框架与框架集的属性设置框架与框架集的属性设置框架属性 设置框架集属性 设置框架属性 设置框架属性 “框架名称”文本框 “源文件”文本框 “滚动”下拉列表框 复选框 “边框”下拉列表框 “边框颜色”下拉列表框 “边界宽度”文本框 “边界高度”文本框设置框架集属性设置框架集属性选择需设置属性的框架集。 框架集“属性”面板中各设置参数含义和框架“属性”面板中的基本相同，不同的是在“行”或“列”文本框中可设置框架的行或列的宽度，在“单位”下拉列表框中选择单位后即可输入所需数值。　框架链接的目标　框架链接的目标1.设置网页元素的链接目标2.设置网页的缺省显示区域_blank：打开一个新窗口显示目标网页。 _parent：目标网页的内容在父框架窗口中显示。 _self：目标网页的内容在当前所在框架窗口中显示。 _top：目标网页的内容在最顶层框架窗口中显示。　　使用菜单“插入”“HTML”“文件头标签”“基础”，打开“基础”对话框，在目标中可选择此网页中超链接的默认显示窗口。Href中设置默认查找的网络路径。一个实例一个实例利用框架为“书香盈袖”网页布局页面，并为其添加网页元素。null　层的使用　层的使用在网页中插入层1.新建一个层（1）打开要创建层的网页。（2）将“插入”工具栏切换到“布局”模式。（3）单击描绘层按钮 　　鼠标移动到编辑窗口时变成十字形状，可以在网页中的任意位置拖动绘制一个层的边框。 （4）在层的边框中可以插入各种网页元素，如文字、图片、表格等。 层的基本操作 层的基本操作对层可进行选择、移动、调整大小和对齐等操作，这些操作大多数都可在“层”面板中进行。 层的基本操作 层的基本操作 显示“层”面板 层的选择 层的拖动 层的对齐 层的大小调整 应用举例——利用层布局页面 显示“层”面板 显示“层”面板选择“窗口/层”命令或按F2键显示“层”面板，“层”面板用于对层进行管理和操作。 当前网页中的层都会显示在“层”面板的列表中，嵌套层以树状结构显示。 层的选择 层的选择要对层进行操作和设置需先将其选择，单个层和多个层的选择方法不同。1．单个层的选择1．单个层的选择选择单个层有如下几种方法： 单击所需层的边框。 在“层”面板中单击所需层的名称。 按住Shift+Ctrl键在所需层中单击。 选择层后，在“层”面板中会以反白方式显示该层名称。2．多个层的选择2．多个层的选择选择多个层可按住Shift键后依次在层中或层边框上单击，也可按住Shift键后依次在“层”面板中单击层的名称。 层的拖动 层的拖动选择需移动的层，将光标移到层边框上，按住鼠标左键将其拖动到需要的位置后释放鼠标即可。 层的对齐 层的对齐在设计网页过程中经常需要将层对齐。对齐层的操作比较简单，选择需对齐的层，选择“修改/对齐”菜单中的相应子命令即可。层的对齐有左对齐、右对齐、对齐上缘、对齐下缘几种方式。 层的大小调整 层的大小调整在网页制作过程中，通常创建的层大小都不符合要求，需对其进行大小的调整。单个层和多个层调整大小的方法不相同。单个层的大小调整单个层的大小调整调整单个层大小只需进行如下任一操作即可： 选择层，在“属性”面板的“宽”、“高”文本框中输入所需的宽度和高度值，再按Enter键。 将光标移至层的边缘，将其拖动到所需大小后释放鼠标。 按住Ctrl键再按键盘上的方向键，可以移动层的右边框和下边框，每次调整1个像素的大小；按住Shift+Ctrl键的同时再按键盘上的方向键可每次调整10个像素的大小。多个层的大小调整多个层的大小调整选择需调整大小的多个层，然后选择“修改/对齐”菜单中的“设成宽度相同”或“设成高度相同”命令，则所有选择的层将设置为最后选择层的宽度或高度，也可在“属性”面板的“宽”、“高”文本框中输入所需的宽度和高度值，再按Enter键，选择的所有层将调整为设定的大小。设置层的属性设置层的属性　在网页中的层的边框上单击可选中这个层，设置其属性。　拖动边框上的8个控制点可改变层的大小。将鼠标放在层边框上除控制点的其他位置，此时鼠标变成十字箭头形状，拖动鼠标可移动层的位置。　层的叠加和嵌套 　层的叠加和嵌套 1.层的叠加使用菜单“窗口”→“层”打开层面板组 。2.层的嵌套　在一个已有的层中描绘新层时按住[Alt]键可绘制现有层的嵌套层，如果不按住[Alt]键绘制的是连个重叠的层。　在层面板中按住[Ctrl]键将一个层拖动到层列表的另一个层上，可将其变为后者的子层。　层与表格的互相转换　层与表格的互相转换1. 将层转换成表格　 选中要转换的层，使用菜单“修改”→“转换”→“层到表格”打开转换层为表格对话框。2.将表格转换成层　 选中要转换为层的表格，使用菜单“修改”→“转换”→“表格到层”打开转换表格为层对话框。使用层实现图文混排1使用层实现图文混排1 使光标出现在编辑区中，移动鼠标指针到“插入”面板的“常用”选项卡中，单击描绘层按钮。在网页编辑区中拖动鼠标，画出一个区域，该区域即为插入层的大小。 注意，每插入一个新层，在网页顶端就会增加一个层标记， 使用层实现图文混排2 使用层实现图文混排2 重复上述操作，再次插入两个新层。这样在该单元格中共插入三个层，我们将图片移到在左上方的层中，文字移到右上方和下面的层中。 单击该标记可以选中其所对应的层。单击层的外围框线，选中层。将鼠标指针移动到框线 上，拖动鼠标，更改层的大小为图像大小。 调整文字的字号和字体 ，以及层的位置，实现图文混排。　使用CSS　使用CSSCSS基础1.什么是CSS　CSS（Cascading Style sheet）是1996年出现的有关网页制作的技术，中文叫做级联风格页或层叠样式表。　使用CSS定义的网页风格可以控制HTML语言标志的一些诸如字体、边框、颜色与背景等属性，也可以通过定义外部风格文件实现整个网站页面风格的统一。 CSS的作用CSS的作用（1）将格式和结构分离（2）更容易控制页面的布局（3）可以制作出体积更小下载更快的网页（4）可以更快更容易地维护及更新大量的网页（5）良好的浏览器兼容性null编辑——首选参数——常规——使用CSS 实例1 第一段文字大小24，颜色红色。 第2段文字设置为大小12，颜色绿色，加粗。 选中第3段文字，大小style1 选中第4段文字，大小style2 对style1进行重命名，名称为redbig 试删除一个样式 选中一个样式，将其加上背景。 nullCSS代码 将试图切换到代码状态。 认识“CSS样式”面板 选择“窗口/CSS样式”命令可在浮动面板组打开“CSS样式”面板 　新建样式　新建样式1.新建样式 （1）在属性面板样式的样式菜单中选择“管理样式”，在打开的编辑样式表对话框中单击“新建”按钮。（2）使用菜单“文本”“CSS样式”“新建”。 （3）使用菜单“文本”“CSS样式”“管理样式”，在打开的编辑样式表对话框中单击“新建”按钮。 （4）使用菜单“窗口”“CSS样式”打开“设计”面板组中的“CSS样式”面板，单击下面的新建CSS样式按钮 （5）在编辑窗口中单击右键，在弹出的菜单中选择“CSS样式”下的“管理样式”或“新建”。null重定义标签的外观 新建样式——选择器类型——标签 使用类定义样式 新建CSS样式——选择器类型——类 使用伪类定义超级链接的样式 新建CSS样式——选择器类型——高级 a:link、a:visited、a:hover、a:activenull实例2 将超级链接文字的样式设置为：超级链接文字无下划线，鼠标移过时出现下划线，访问过的超级链接文字与超级链接文字样式相同。null使用ID定义样式 新建CSS样式——选择器类型——高级（ID）null附加样式表文件 样式定义代码的3种存放方式： 存放在HTML标签的属性中。如：

存放在文件头的…标签的 存放在一个外部文件中，这个文件称作样式表文件。 null保存起来的样式表文件可以应用到任意网页中。 执行<样式>——<管理样式>——<附加> ——<浏览> 链接：直接链接到外部样式表文件 导入：将外部样式表文件导入到当前网页的头部。 使用内置的CSS样式 使用内置的CSS样式 Dreamweaver MX2004提供了方便的CSS属性操作和应用功能的同时，还提供了大量现成的CSS应用 模板 个人简介word模板免费下载关于员工迟到处罚通告模板康奈尔office模板下载康奈尔 笔记本 模板 下载软件方案模板免费下载 ，可以在制作网页时直接使用。nullCSS网页 文件——新建——页面设计CSSnullCSS文件模板 文件——新建——CSS样式表 设置CSS属性设置CSS属性使用样式属性对话框 通过管理或新建样式 使用面板组 执行窗口——CSS样式 使用窗口——标签检查器——CSS属性面板 CSS属性面板可以设置样式面板中的8类属性。 CSS属性 CSS属性类型1.字体（font-family）2.大小（font-size） 3.粗细（font-weight） 4.样式（font-style） 5.变量6.行高（line-height）7.大小写（text-transform）8. 颜色（color）9. 修饰（text-decoration） 背景 背景1.背景颜色（background-color）2.背景图像（background-image）3.重复（background-repeat）4.附件（background-attachment）5.背景图片位置（background-position） 区块 区块1.字母间距（letter-spacing） 2. 字词间距（word-spacing）3.垂直对齐（vertical-align）4.文本对齐（text-align ）5. 文本缩进（text-indent ）6.空格（white-space）7.显示（display） 方框 方框1.宽（width）和高（height）2.漂浮（float）和清除（clear） 3.填充（padding）4.边界（margin） 边框 边框1.样式（border-style）2.宽度（border-width）3.边框颜色（border-color） 列表1.类型（list-style-type ）2.项目符号图像（list-style-image） 3.位置（list-style-position） 定位定位 定位属性包括类型、溢出、Z轴、宽、高、位置、剪辑的等，其作用和前面介绍的层的定义相同。事实上，在对层的属性进行定义时，就是在层代码行中加入了CSS代码。null实例3：采用绝对定位，指定元素blockDiv距离窗口左边180px，顶部50px

扩展扩展 1.分页（page-break） 2.光标 CSS滤镜 CSS滤镜1、Alpha 滤镜2. BlendTrans滤镜3.Blur 滤镜 Alpha滤镜是把一个目标元素与背景混合，可以指定数值来控制混合的程度，通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。 BlendTrans滤镜产生一种淡入淡出的效果。 Blur滤镜产生模糊效果。 null4.Chroma 滤镜5. DropShadow 滤镜 Chroma属性可以在一个对象中指定一种颜色为透明色。 DropShaow是设置对象的阴影效果。 6.FlipH和FlipV 滤镜 FlipH和FlipV 滤镜分别是水平反转和垂直反转，这两个滤镜没有参数。 7.Glow 滤镜 当对一个对象使用"glow"属性后，这个对象的边缘就会产生类似发光的效果。 null8.Gray ,Invert,Xray 滤镜Gray滤镜是把一张图片变成灰度图 9.Light  滤镜 这个属性模拟光源的投射效果。 10.Mask 滤镜 使用Mask 滤镜可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。 null12. Shadow 滤镜11. RevealTrans滤镜 RevealTrans滤镜能产生23种动态效果，可在其中随机抽用其中的一种。 利用Shadow属性可以在指定的方向建立物体的投影。 13.Wave 滤镜 Wave 属性把对象在垂直的方向按波纹样式打乱。 应用举例——用CSS样式设置文本格式 应用举例——用CSS样式设置文本格式将利用CSS样式为Triangel网页进行文本格式设置。用CSS样式设置文本格式效果用CSS样式设置文本格式效果