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

《《网页设计与制作》第四章：页面设计05924》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、页面设计南海学院计算机系制作2网页的风格网页的风格11“搜狐”的主页的内容很丰富，色彩鲜艳并有许多大幅广告和浮动广告栏。返回3网页的风格网页的风格22微软中国的主页，内容比较专一，内容非常有条理，栏目突出，没有凌乱的感觉。返回4网页的风格网页的风格33“黑白音乐”是一个个人主页，它看起来更简单，色彩也不够丰富，但感觉非常清新。返回5本章要点本章要点�设置网页属性�页面布局�使用框架布局�层的使用�使用CSS�CSS属性返回6�网页标题如果文档工具栏没有显示，使用菜单“查看”→“工具”→“文档”可打开其显示。返回7页面设置页面设置•1．外观•2．链接

2、•3．标题•4．标题/编码•5．跟踪图像返回8文件头设置文件头设置1.METAMETA设置自定义的一组网页属性的描述。2.关键字　　关键字设置网页网站的一组关键字，许多搜索引擎和网站关联性统计是通过关键字搜索网页的。3.描述　　设置对网页的一些描述，一般是网页内容的概述，供其它开发者参考。返回9文件头设置文件头设置4.刷新　　刷新定义网也调入后延迟一段时间的动作5.基础　　设置网页的基准地址6.链接　　链接用于设置需要链接的CSS等外部文件的地址和类型。返回10网页布局实例网页布局实例11返回11网页布局实例网页布局实例22返回12网页布局实例网页

3、布局实例33标题正文型结构的顶端是网站标识和标题，下面是网页正文。内容非常简单。返回13网页布局实例网页布局实例44返回14网页布局实例网页布局实例55返回15网页布局实例网页布局实例66返回16�网页的版面布局1.确定显示分辨率（1）T型结构布局2.版面布局的模式（2）口型布局（3）三型布局（4）对称对比布局（5）POP布局返回17画出网页布局草图画出网页布局草图标题图片栏链接文主要内容区字区网站版权信息区返回18表格布局表格布局�1个实例使用表格对课本74页的网页进行布局。返回19操作步骤操作步骤•（1）插入一个3行1列的表格a。a760×42

4、0边框为0，填充、间距为0，对齐方式居中。•（2）在表格a的第3行插入1条水平线，宽度为70％。居中。文字•（3）在表格a的第1行中插入1个2行1列的表格b。宽度100％。其余0•（4）在表格b的第1行插入一个1行2列的表格c。宽度100％。返回20•（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

5、。宽度100％。返回21使用扩展模式布局使用扩展模式布局在工具栏上单击扩展表格模式按钮，既可切换到“扩展表格模式”。扩展模式下并不是所见即所得的效果，最好不要在单元格中添加内容，只进行页面设计操作。返回22使用布局模式布局使用布局模式布局　　用表格布局的页面，往往给人一种过于整齐的排列效果，而使用“布局模式”，则可以是网页中的元素快速、灵活地定位。在“插入”工具栏单击“布局”按钮，进入布局模式。返回23使用布局模式布局使用布局模式布局�绘制布局表格�绘制布局单元格返回24使用框架布局使用框架布局�一个实例：返回25框架与框架集的概念框架与框架集的概

6、念•单个框架是指在网页上定义的一个区域，而框架集则记录了同一网页上多个框架的布局、链接和属性信息。•利用框架可以把浏览器窗口划分为多个区域，每个区域可以添加任意网页元素，也可分别显示不同的网页。•框架集与框架之间的关系是包含与被包含的关系，多个框架就组成了框架集，框架集包含了框架1、框架2和框架3共3个框架。返回26框架与框架集的概念框架与框架集的概念•用框架布局网页时有如下的技巧和规则：•创建好框架或框架集后可对其属性进行设置。•每个框架就是不同的HTML网页，我们需要分别保存每个框架文件和框架集文件。•确保文件中的每个链接都正确。返回27使用框

7、架布局使用框架布局使用框架布局使用框架布局�框架集网页1.创建一个新的框架集网页　　创建框架网页前先要让框架边框显示。在“文档”工具栏的最右边单击视图选项按钮　　在弹出的菜单中选择“可视化助理”→“框架边框”，使得框架边框被选中。返回28��创建一个新的框架集网页的方法创建一个新的框架集网页的方法��保存设置框架集保存设置框架集��编辑框架结构编辑框架结构返回29父框架和子框架父框架和子框架该图的框架就是先分成上下框架，再把下框架分成左右框架。一般把下框架称为左右框架的父框架，则左右框架是下框架的子框架。右下框架占最大的区域，用来显示主要的网页内容

8、，称为主框架。返回30设置框架与框架集的属性设置框架与框架集的属性�设置框架属性�设置框架集属性返回31设置框架属性设置框