《网页设计与制作第四章页面设计》由会员分享，可在线阅读，更多相关《网页设计与制作第四章页面设计（80页珍藏版）》请在金锄头文库上搜索。
1、返回返回网页设计与制作第四章页面设计Stillwatersrundeep.流静水深流静水深,人静心深人静心深Wherethereislife,thereishope。有生命必有希望。有生命必有希望返回返回 网页的风格1 “搜狐”的主页的内容很丰富，色彩鲜艳并有许多大幅广告和浮动广告栏。2返回返回 网页的风格2 微软中国的主页，内容比较专一，内容非常有条理，栏目突出，没有凌乱的感觉。3返回返回网页的风格3 “黑白音乐” 是一个个人主页，它看起来更简单，色彩也不够丰富，但感觉非常清新。4返回返回本章要点v设置网页属性v页面布局v使用框架布局v层的使用v使用CSSvCSS属性5返回返回网页标题如果文
2、档工具栏没有显示，使用菜单“查看”“工具”“文档”可打开其显示。6返回返回页面设置1外观2链接3标题4标题/编码5跟踪图像7返回返回文件头设置1.METAMETA设置自定义的一组网页属性的描述。2.关键字关键字关键字设置网页网站的一组关键字，许多搜索引擎和网站关联性统计是通过关键字搜索网页的。3.描述描述设置对网页的一些描述，一般是网页内容的概述，供其它开发者参考。8返回返回4.刷新刷新刷新定义网也调入后延迟一段时间的动作5.基础基础设置网页的基准地址6.链接链接链接用于设置需要链接的CSS等外部文件的地址和类型。文件头设置9返回返回 网页布局实例1 10返回返回 网页布局实例211返回返回
3、网页布局实例3 标题正文型结构的顶端是网站标识和标题，下面是网页正文。内容非常简单。12返回返回网页布局实例413返回返回 网页布局实例514返回返回 网页布局实例615返回返回网页的版面布局1.确定显示分辨率确定显示分辨率2.版面布局的模式版面布局的模式（1）T型结构布局（2）口型布局（3）三型布局（4）对称对比布局（5）POP布局16返回返回画出网页布局草图标题图片栏链接文字区主要内容区网站版权信息区17返回返回表格布局v1个实例使用表格对课本74页的网页进行布局。18返回返回操作步骤（1）插入一个3行1列的表格a。a760420边框为0，填充、间距为0，对齐方式居中。（2）在表格a的第3
4、行插入1条水平线，宽度为70。居中。文字（3）在表格a的第1行中插入1个2行1列的表格b。宽度100。其余0（4）在表格b的第1行插入一个1行2列的表格c。宽度100。19返回返回（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。20返回返回 使用扩展模式布局在工具栏上单击扩展表格模式按钮，既可切换到“扩展表格模式”。扩展模式下并不是所见即所得的效
5、果，最好不要在单元格中添加内容，只进行页面设计操作。21返回返回 使用布局模式布局用表格布局的页面，往往给人一种过于整齐的排列效果，而使用“布局模式”，则可以是网页中的元素快速、灵活地定位。在“插入”工具栏单击“布局”按钮，进入布局模式。22返回返回使用布局模式布局v绘制布局表格v绘制布局单元格23返回返回使用框架布局v一个实例：24返回返回框架与框架集的概念单个框架是指在网页上定义的一个区域，而框架集则记录了同一网页上多个框架的布局、链接和属性信息。利用框架可以把浏览器窗口划分为多个区域，每个区域可以添加任意网页元素，也可分别显示不同的网页。框架集与框架之间的关系是包含与被包含的关系，多个框
6、架就组成了框架集，框架集包含了框架1、框架2和框架3共3个框架。25返回返回框架与框架集的概念用框架布局网页时有如下的技巧和规则：创建好框架或框架集后可对其属性进行设置。每个框架就是不同的HTML网页，我们需要分别保存每个框架文件和框架集文件。确保文件中的每个链接都正确。26返回返回使用框架布局使用框架布局v框架集网页1.创建一个新的框架集网页创建一个新的框架集网页创建框架网页前先要让框架边框显示。在“文档”工具栏的最右边单击视图选项按钮在弹出的菜单中选择“可视化助理”“框架边框”，使得框架边框被选中。27返回返回创建一个新的框架集网页的方法保存设置框架集 编辑框架结构 28返回返回父框架和子
7、框架父框架和子框架该图的框架就是先分成上下框架，再把下框架分成左右框架。一般把下框架称为左右框架的父框架，则左右框架是下框架的子框架。右下框架占最大的区域，用来显示主要的网页内容，称为主框架。29返回返回设置框架与框架集的属性v设置框架属性v设置框架集属性30返回返回设置框架属性“框架名称框架名称”文本框文本框“源文件源文件”文本框文本框“滚动滚动”下拉列表框下拉列表框 复选框复选框“边框边框”下拉列表框下拉列表框“边框颜色边框颜色”下拉列表框下拉列表框“边界宽度边界宽度”文本框文本框“边界高度边界高度”文本框文本框31返回返回设置框架集属性v选择需设置属性的框架集。v框架集“属性”面板中各设
8、置参数含义和框架“属性”面板中的基本相同，不同的是在“行”或“列”文本框中可设置框架的行或列的宽度，在“单位”下拉列表框中选择单位后即可输入所需数值。32返回返回框架链接的目标1.设置网页元素的链接目标设置网页元素的链接目标2.设置网页的缺省显示区域设置网页的缺省显示区域_blank：打开一个新窗口显示目标网页。_parent：目标网页的内容在父框架窗口中显示。_self：目标网页的内容在当前所在框架窗口中显示。_top：目标网页的内容在最顶层框架窗口中显示。使用菜单“插入”“HTML”“文件头标签”“基础”，打开“基础”对话框，在目标中可选择此网页中超链接的默认显示窗口。Href中设置默认查
9、找的网络路径。33返回返回一个实例v利用框架为“书香盈袖”网页布局页面，并为其添加网页元素。34返回返回35返回返回层的使用层的使用在网页中插入层1.新建一个层新建一个层（1）打开要创建层的网页。（2）将“插入”工具栏切换到“布局”模式。（3）单击描绘层按钮鼠标移动到编辑窗口时变成十字形状，可以在网页中的任意位置拖动绘制一个层的边框。（4）在层的边框中可以插入各种网页元素，如文字、图片、表格等。36返回返回层的基本操作对层可进行选择、移动、调整大小和对齐等操作，这些操作大多数都可在“层”面板中进行。37返回返回层的基本操作显示“层”面板层的选择层的拖动层的对齐层的大小调整应用举例利用层布局页面
10、38返回返回显示“层”面板选择“窗口/层”命令或按F2键显示“层”面板，“层”面板用于对层进行管理和操作。当前网页中的层都会显示在“层”面板的列表中，嵌套层以树状结构显示。39返回返回层的选择要对层进行操作和设置需先将其选择，单个层和多个层的选择方法不同。40返回返回1单个层的选择选择单个层有如下几种方法：单击所需层的边框。在“层”面板中单击所需层的名称。按住Shift+Ctrl键在所需层中单击。选择层后，在“层”面板中会以反白方式显示该层名称。41返回返回2多个层的选择选择多个层可按住Shift键后依次在层中或层边框上单击，也可按住Shift键后依次在“层”面板中单击层的名称。42返回返回层
11、的拖动选择需移动的层，将光标移到层边框上，按住鼠标左键将其拖动到需要的位置后释放鼠标即可。43返回返回层的对齐在设计网页过程中经常需要将层对齐。对齐层的操作比较简单，选择需对齐的层，选择“修改/对齐”菜单中的相应子命令即可。层的对齐有左对齐、右对齐、对齐上缘、对齐下缘几种方式。44返回返回层的大小调整在网页制作过程中，通常创建的层大小都不符合要求，需对其进行大小的调整。单个层和多个层调整大小的方法不相同。45返回返回单个层的大小调整调整单个层大小只需进行如下任一操作即可：选择层，在“属性”面板的“宽”、“高”文本框中输入所需的宽度和高度值，再按Enter键。将光标移至层的边缘，将其拖动到所需大
12、小后释放鼠标。按住Ctrl键再按键盘上的方向键，可以移动层的右边框和下边框，每次调整1个像素的大小；按住Shift+Ctrl键的同时再按键盘上的方向键可每次调整10个像素的大小。46返回返回多个层的大小调整选择需调整大小的多个层，然后选择“修改/对齐”菜单中的“设成宽度相同”或“设成高度相同”命令，则所有选择的层将设置为最后选择层的宽度或高度，也可在“属性”面板的“宽”、“高”文本框中输入所需的宽度和高度值，再按Enter键，选择的所有层将调整为设定的大小。47返回返回设置层的属性设置层的属性在网页中的层的边框上单击可选中这个层，设置其属性。拖动边框上的8个控制点可改变层的大小。将鼠标放在层边
13、框上除控制点的其他位置，此时鼠标变成十字箭头形状，拖动鼠标可移动层的位置。48返回返回层的叠加和嵌套1.层的叠加层的叠加使用菜单“窗口”“层”打开层面板组。2.层的嵌套层的嵌套在一个已有的层中描绘新层时按住Alt键可绘制现有层的嵌套层，如果不按住Alt键绘制的是连个重叠的层。在层面板中按住Ctrl键将一个层拖动到层列表的另一个层上，可将其变为后者的子层。49返回返回层与表格的互相转换1.将层转换成表格将层转换成表格选中要转换的层，使用菜单“修改”“转换”“层到表格”打开转换层为表格对话框。2.将表格转换成层将表格转换成层选中要转换为层的表格，使用菜单“修改”“转换”“表格到层”打开转换表格为层
14、对话框。50返回返回使用层实现图文混排1使光标出现在编辑区中，移动鼠标指针到“插入”面板的“常用”选项卡中，单击描绘层按钮。在网页编辑区中拖动鼠标，画出一个区域，该区域即为插入层的大小。注意，每插入一个新层，在网页顶端就会增加一个层标记，51返回返回 使用层实现图文混排2重复上述操作，再次插入两个新层。这样在该单元格中共插入三个层，我们将图片移到在左上方的层中，文字移到右上方和下面的层中。单击该标记可以选中其所对应的层。单击层的外围框线，选中层。将鼠标指针移动到框线上，拖动鼠标，更改层的大小为图像大小。调整文字的字号和字体，以及层的位置，实现图文混排。52返回返回使用使用CSSCSSvCSS基
15、础1.什么是什么是CSSCSS（CascadingStylesheet）是1996年出现的有关网页制作的技术，中文叫做级联风格页或层叠样式表。使用CSS定义的网页风格可以控制HTML语言标志的一些诸如字体、边框、颜色与背景等属性，也可以通过定义外部风格文件实现整个网站页面风格的统一。53返回返回CSS的作用的作用（1）将格式和结构分离（2）更容易控制页面的布局（3）可以制作出体积更小下载更快的网页（4）可以更快更容易地维护及更新大量的网页（5）良好的浏览器兼容性54返回返回编辑首选参数常规使用CSS实例1第一段文字大小24，颜色红色。第2段文字设置为大小12，颜色绿色，加粗。选中第3段文字，大
16、小style1选中第4段文字，大小style2对style1进行重命名，名称为redbig试删除一个样式选中一个样式，将其加上背景。55返回返回CSS代码将试图切换到代码状态。认识“CSS样式”面板选择“窗口/CSS样式”命令可在浮动面板组打开“CSS样式”面板56返回返回新建样式1.新建样式新建样式（1）在属性面板样式的样式菜单中选择“管理样式”，在打开的编辑样式表对话框中单击“新建”按钮。（2）使用菜单“文本”“CSS样式”“新建”。（3）使用菜单“文本”“CSS样式”“管理样式”，在打开的编辑样式表对话框中单击“新建”按钮。（4）使用菜单“窗口”“CSS样式”打开“设计”面板组中的“CS
17、S样式”面板，单击下面的新建CSS样式按钮（5）在编辑窗口中单击右键，在弹出的菜单中选择“CSS样式”下的“管理样式”或“新建”。57返回返回v重定义标签的外观新建样式选择器类型标签v使用类定义样式新建CSS样式选择器类型类v使用伪类定义超级链接的样式新建CSS样式选择器类型高级a:link、a:visited、a:hover、a:active58返回返回实例2v将超级链接文字的样式设置为：超级链接文字无下划线，鼠标移过时出现下划线，访问过的超级链接文字与超级链接文字样式相同。59返回返回v使用ID定义样式新建CSS样式选择器类型高级（ID）60返回返回v附加样式表文件样式定义代码的3种存放方
18、式：存放在HTML标签的属性中。如：存放在文件头的标签的存放在一个外部文件中，这个文件称作样式表文件。61返回返回v保存起来的样式表文件可以应用到任意网页中。v执行链接：直接链接到外部样式表文件导入：将外部样式表文件导入到当前网页的头部。62返回返回 使用内置的CSS样式DreamweaverMX2004提供了方便的提供了方便的CSS属性操作和应用功能的同时，还提供了大属性操作和应用功能的同时，还提供了大量现成的量现成的CSS应用模板，可以在制作网页时直应用模板，可以在制作网页时直接使用。接使用。63返回返回vCSS网页网页文件文件新建新建页面设计页面设计CSS64返回返回vCSS文件模板文件
19、模板文件新建CSS样式表65返回返回设置CSS属性v使用样式属性对话框通过管理或新建样式v使用面板组执行窗口CSS样式使用窗口标签检查器CSS属性面板CSS属性面板可以设置样式面板中的8类属性。66返回返回 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）67返回返回 背景1.背景颜色（背
20、景颜色（background-color）2.背景图像（背景图像（background-image）3.重复（重复（background-repeat）4.附件（附件（background-attachment）5.背景图片位置（背景图片位置（background-position）68返回返回 区块1.字母间距（字母间距（letter-spacing）2.字词间距（字词间距（word-spacing）3.垂直对齐（垂直对齐（vertical-align）4.文本对齐（文本对齐（text-align）5.文本缩进（文本缩进（text-indent）6.空格（空格（white-space）7.显
21、示（显示（display）69返回返回 方框1.宽（宽（width）和高（）和高（height）2.漂浮（漂浮（float）和清除（）和清除（clear）3.填充（填充（padding）4.边界（边界（margin）70返回返回 边框1.样式（样式（border-style）2.宽度（宽度（border-width）3.边框颜色（边框颜色（border-color） 列表1.类型（类型（list-style-type）2.项目符号图像（项目符号图像（list-style-image）3.位置（位置（list-style-position）71返回返回定位定位属性包括类型、溢出、Z轴、宽、高、位
22、置、剪辑的等，其作用和前面介绍的层的定义相同。事实上，在对层的属性进行定义时，就是在层代码行中加入了CSS代码。72返回返回实例3：采用绝对定位，指定元素blockDiv距离窗口左边180px，顶部50px花生73返回返回扩展1.分页（分页（page-break）2.光标光标74返回返回 CSS滤镜1、Alpha滤镜滤镜2.BlendTrans滤镜滤镜3.Blur滤镜滤镜Alpha滤镜是把一个目标元素与背景混合，可以指定数值来控制混合的程度，通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。BlendTrans滤镜产生一种淡入淡出的效果。Blur滤镜产生模糊效果。75返回
23、返回4.Chroma滤镜滤镜5.DropShadow滤镜滤镜Chroma属性可以在一个对象中指定一种颜色为透明色。DropShaow是设置对象的阴影效果。6.FlipH和和FlipV滤镜滤镜FlipH和FlipV滤镜分别是水平反转和垂直反转，这两个滤镜没有参数。7.Glow滤镜滤镜当对一个对象使用glow属性后，这个对象的边缘就会产生类似发光的效果。76返回返回8.Gray,Invert,Xray滤镜滤镜Gray滤镜是把一张图片变成灰度图9.Light滤镜滤镜这个属性模拟光源的投射效果。10.Mask滤镜滤镜使用Mask滤镜可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。77返回返回12.Shadow滤镜滤镜11.RevealTrans滤镜滤镜RevealTrans滤镜能产生23种动态效果，可在其中随机抽用其中的一种。利用Shadow属性可以在指定的方向建立物体的投影。13.Wave滤镜滤镜Wave属性把对象在垂直的方向按波纹样式打乱。78返回返回 应用举例应用举例用用CSSCSS样式设置文本格式样式设置文本格式将利用CSS样式为Triangel网页进行文本格式设置。79返回返回用用CSSCSS样式设置文本格式效果样式设置文本格式效果80
