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

页面设计南海学院计算机系制作2222返回返回返回返回网页的风格网页的风格11“搜狐”的主页的内容很丰富，色彩鲜艳并有许多大幅广告和浮动广告栏。3333返回返回返回返回网页的风格网页的风格22微软中国的主页，内容比较专一，内容非常有条理，栏目突出，没有凌乱的感觉。4444返回返回返回返回网页的风格网页的风格33“黑白音乐”是一个个人主页，它看起来更简单，色彩也不够丰富，但感觉非常清新。5555返回返回返回返回本章要点本章要点�设置网页属性�页面布局�使用框架布局�层的使用�使用CSS�CSS属性6666返回返回返回返回�网页标题　如果文档工具栏没有显示，使用菜单“查看”→“工具”→“文档”可打开其显示。7777返回返回返回返回页面设置页面设置•1．外观•2．链接•3．标题•4．标题/编码•5．跟踪图像8888返回返回返回返回文件头设置文件头设置1.META1.META1.META1.META　　META设置自定义的一组网页属性的描述。2.2.2.2.关键字　　关键字设置网页网站的一组关键字，许多搜索引擎和网站关联性统计是通过关键字搜索网页的。3.3.3.3.描述　　设置对网页的一些描述，一般是网页内容的概述，供其它开发者参考。9999返回返回返回返回4.4.4.4.刷新　　刷新定义网也调入后延迟一段时间的动作5.5.5.5.基础　　设置网页的基准地址6.6.6.6.链接　　链接用于设置需要链接的CSS等外部文件的地址和类型。文件头设置文件头设置10101010返回返回返回返回网页布局实例网页布局实例1111111111返回返回返回返回网页布局实例网页布局实例2212121212返回返回返回返回网页布局实例网页布局实例33标题正文型结构的顶端是网站标识和标题，下面是网页正文。内容非常简单。13131313返回返回返回返回网页布局实例网页布局实例4414141414返回返回返回返回网页布局实例网页布局实例5515151515返回返回返回返回网页布局实例网页布局实例6616161616返回返回返回返回�网页的版面布局1.1.1.1.确定显示分辨率2.2.2.2.版面布局的模式（1）T型结构布局（2）口型布局（3）三型布局（4）对称对比布局（5）POP布局17171717返回返回返回返回画出网页布局草图画出网页布局草图网站版权信息区主要内容区链接文字区图片栏标题18181818返回返回返回返回表格布局表格布局�1个实例使用表格对课本74页的网页进行布局。19191919返回返回返回返回操作步骤操作步骤•（1）插入一个3行1列的表格a。a760×420边框为0，填充、间距为0，对齐方式居中。•（2）在表格a的第3行插入1条水平线，宽度为70％。居中。文字•（3）在表格a的第1行中插入1个2行1列的表格b。宽度100％。其余0•（4）在表格b的第1行插入一个1行2列的表格c。宽度100％。20202020返回返回返回返回•（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％。21212121返回返回返回返回使用扩展模式布局使用扩展模式布局　　在工具栏上单击扩展表格模式按钮，既可切换到“扩展表格模式”。　扩展模式下并不是所见即所得的效果，最好不要在单元格中添加内容，只进行页面设计操作。22222222返回返回返回返回使用布局模式布局使用布局模式布局　　用表格布局的页面，往往给人一种过于整齐的排列效果，而使用“布局模式”，则可以是网页中的元素快速、灵活地定位。在“插入”工具栏单击“布局”按钮，进入布局模式。23232323返回返回返回返回使用布局模式布局使用布局模式布局�绘制布局表格�绘制布局单元格24242424返回返回返回返回使用框架布局使用框架布局�一个实例：25252525返回返回返回返回框架与框架集的概念框架与框架集的概念•单个框架是指在网页上定义的一个区域，而框架集则记录了同一网页上多个框架的布局、链接和属性信息。•利用框架可以把浏览器窗口划分为多个区域，每个区域可以添加任意网页元素，也可分别显示不同的网页。•框架集与框架之间的关系是包含与被包含的关系，多个框架就组成了框架集，框架集包含了框架1、框架2和框架3共3个框架。26262626返回返回返回返回框架与框架集的概念框架与框架集的概念•用框架布局网页时有如下的技巧和规则：•创建好框架或框架集后可对其属性进行设置。•每个框架就是不同的HTML网页，我们需要分别保存每个框架文件和框架集文件。•确保文件中的每个链接都正确。27272727返回返回返回返回使用框架布局使用框架布局使用框架布局使用框架布局使用框架布局使用框架布局使用框架布局使用框架布局�框架集网页1.1.1.1.创建一个新的框架集网页　　创建框架网页前先要让框架边框显示。在“文档”工具栏的最右边单击视图选项按钮　　在弹出的菜单中选择“可视化助理”→“框架边框”，使得框架边框被选中。28282828返回返回返回返回　��创建一个新的框架集网页的方法创建一个新的框架集网页的方法��保存设置框架集保存设置框架集��编辑框架结构编辑框架结构29292929返回返回返回返回父框架和子框架父框架和子框架父框架和子框架父框架和子框架父框架和子框架父框架和子框架父框架和子框架父框架和子框架该图的框架就是先分成上下框架，再把下框架分成左右框架。一般把下框架称为左右框架的父框架，则左右框架是下框架的子框架。右下框架占最大的区域，用来显示主要的网页内容，称为主框架。30303030返回返回返回返回设置框架与框架集的属性设置框架与框架集的属性�设置框架属性�设置框架集属性31313131返回返回返回返回设置框架属性设置框架属性�““““框架名称””””文本框�““““源文件””””文本框�““““滚动””””下拉列表框�复选框�““““边框””””下拉列表框�““““边框颜色””””下拉列表框�““““边界宽度””””文本框�““““边界高度””””文本框32323232返回返回返回返回设置框架集属性设置框架集属性�选择需设置属性的框架集。�框架集“属性”面板中各设置参数含义和框架“属性”面板中的基本相同，不同的是在“行”或“列”文本框中可设置框架的行或列的宽度，在“单位”下拉列表框中选择单位后即可输入所需数值。33333333返回返回返回返回　框架链接的目标　框架链接的目标1.1.1.1.设置网页元素的链接目标2.2.2.2.设置网页的缺省显示区域_blank：打开一个新窗口显示目标网页。_parent：目标网页的内容在父框架窗口中显示。_self：目标网页的内容在当前所在框架窗口中显示。_top：目标网页的内容在最顶层框架窗口中显示。　　使用菜单“插入”“HTML”“文件头标签”“基础”，打开“基础”对话框，在目标中可选择此网页中超链接的默认显示窗口。Href中设置默认查找的网络路径。34343434返回返回返回返回一个实例一个实例�利用框架为“书香盈袖”网页布局页面，并为其添加网页元素。35353535返回返回返回返回36363636返回返回返回返回　层的使用　层的使用　层的使用　层的使用　层的使用　层的使用　层的使用　层的使用�在网页中插入层1.1.1.1.新建一个层（1）打开要创建层的网页。（2）将“插入”工具栏切换到“布局”模式。（3）单击描绘层按钮　　鼠标移动到编辑窗口时变成十字形状，可以在网页中的任意位置拖动绘制一个层的边框。（4）在层的边框中可以插入各种网页元素，如文字、图片、表格等。37373737返回返回返回返回层的基本操作层的基本操作•对层可进行选择、移动、调整大小和对齐等操作，这些操作大多数都可在“层”面板中进行。38383838返回返回返回返回层的基本操作层的基本操作•显示“层”面板•层的选择•层的拖动•层的对齐•层的大小调整•应用举例——利用层布局页面39393939返回返回返回返回显示显示““层层””面板面板•选择“窗口/层”命令或按F2键显示“层”面板，“层”面板用于对层进行管理和操作。•当前网页中的层都会显示在“层”面板的列表中，嵌套层以树状结构显示。40404040返回返回返回返回层的选择层的选择•要对层进行操作和设置需先将其选择，单个层和多个层的选择方法不同。41414141返回返回返回返回11．单个层的选择．单个层的选择•选择单个层有如下几种方法：•单击所需层的边框。•在“层”面板中单击所需层的名称。•按住Shift+Ctrl键在所需层中单击。•选择层后，在“层”面板中会以反白方式显示该层名称。42424242返回返回返回返回22．多个层的选择．多个层的选择•选择多个层可按住Shift键后依次在层中或层边框上单击，也可按住Shift键后依次在“层”面板中单击层的名称。43434343返回返回返回返回层的拖动层的拖动•选择需移动的层，将光标移到层边框上，按住鼠标左键将其拖动到需要的位置后释放鼠标即可。44444444返回返回返回返回层的对齐层的对齐•在设计网页过程中经常需要将层对齐。对齐层的操作比较简单，选择需对齐的层，选择“修改/对齐”菜单中的相应子命令即可。层的对齐有左对齐、右对齐、对齐上缘、对齐下缘几种方式。45454545返回返回返回返回层的大小调整层的大小调整•在网页制作过程中，通常创建的层大小都不符合要求，需对其进行大小的调整。单个层和多个层调整大小的方法不相同。46464646返回返回返回返回单个层的大小调整单个层的大小调整•调整单个层大小只需进行如下任一操作即可：•选择层，在“属性”面板的“宽”、“高”文本框中输入所需的宽度和高度值，再按Enter键。•将光标移至层的边缘，将其拖动到所需大小后释放鼠标。•按住Ctrl键再按键盘上的方向键，可以移动层的右边框和下边框，每次调整1个像素的大小；按住Shift+Ctrl键的同时再按键盘上的方向键可每次调整10个像素的大小。47474747返回返回返回返回多个层的大小调整多个层的大小调整•选择需调整大小的多个层，然后选择“修改/对齐”菜单中的“设成宽度相同”或“设成高度相同”命令，则所有选择的层将设置为最后选择层的宽度或高度，也可在“属性”面板的“宽”、“高”文本框中输入所需的宽度和高度值，再按Enter键，选择的所有层将调整为设定的大小。48484848返回返回返回返回设置层的属性设置层的属性设置层的属性设置层的属性设置层的属性设置层的属性设置层的属性设置层的属性　在网页中的层的边框上单击可选中这个层，设置其属性。　拖动边框上的8个控制点可改变层的大小。将鼠标放在层边框上除控制点的其他位置，此时鼠标变成十字箭头形状，拖动鼠标可移动层的位置。49494949返回返回返回返回　层的叠加和嵌套　层的叠加和嵌套1.1.1.1.层的叠加使用菜单“窗口”→“层”打开层面板组。2.2.2.2.层的嵌套　在一个已有的层中描绘新层时按住[Alt]键可绘制现有层的嵌套层，如果不按住[Alt]键绘制的是连个重叠的层。　在层面板中按住[Ctrl]键将一个层拖动到层列表的另一个层上，可将其变为后者的子层。50505050返回返回返回返回　层与表格的互相转换　层与表格的互相转换1.1.1.1.将层转换成表格　选中要转换的层，使用菜单“修改”→“转换”→“层到表格”打开转换层为表格对话框。2.2.2.2.将表格转换成层　选中要转换为层的表格，使用菜单“修改”→“转换”→“表格到层”打开转换表格为层对话框。51515151返回返回返回返回使用层实现图文混排使用层实现图文混排11使光标出现在编辑区中，移动鼠标指针到“插入”面板的“常用”选项卡中，单击描绘层按钮。在网页编辑区中拖动鼠标，画出一个区域，该区域即为插入层的大小。注意，每插入一个新层，在网页顶端就会增加一个层标记，52525252返回返回返回返