《网页设计与制作实例教程》第7章（赵青松）ppt课件（全）.ppt

清华大学出版社 网页设计与制作实例教程第7章高等学校计算机应用规划教材 2022-5-8主编 方其桂内容提要第7章 规划布局网页网页设计主要体现在配色、字体以及布局排版方面，网页设计主要体现在配色、字体以及布局排版方面，这三个方面能够很好地结合就能制作出很漂亮的网站。因这三个方面能够很好地结合就能制作出很漂亮的网站。因此，在进行网页设计时，需要对网页的版面布局进行整体此，在进行网页设计时，需要对网页的版面布局进行整体的规划。的规划。在布局过程中，为确保网页美观大方，一般要遵循：在布局过程中，为确保网页美观大方，一般要遵循：正常平衡、异常平衡、对比、凝视、空白和尽量用图片解正常平衡、异常平衡、对比、凝视、空白和尽量用图片解说等原则。比如，网页的白色背景太虚，则可以加些色块说等原则。比如，网页的白色背景太虚，则可以加些色块；版面零散，可以用线条和符号串联；左面文字过多，右；版面零散，可以用线条和符号串联；左面文字过多，右面则可以插一些图片保持平衡；表格过于规矩，可以改用面则可以插一些图片保持平衡；表格过于规矩，可以改用导角，增强视觉效果。导角，增强视觉效果。本章通过多个实例，从使用表格、层、框架和本章通过多个实例，从使用表格、层、框架和CSS布布局网页几个方面，介绍规划网页布局。局网页几个方面，介绍规划网页布局。教学目录使用表格布局使用表格布局使用层布局使用层布局使用框架布局使用框架布局010203第第7章章 规划布局网页规划布局网页04使用使用CSS布局布局7.1 使用表格布局 教学内容 第第7章章 规划布局网页规划布局网页 在Dreamweaver网页文档中，可以通过“插入”“表格”命令，插入需要的二维表格，输入数据，以便查询和浏览。实例1 七年级部分学生基本信息表 新建一个HTML文档，在页面中插入一个5行4列的简单表格，输入七年级部分学生基本信息表，效果如图所示。7.1 使用表格布局 教学内容第第7章章 规划布局网页规划布局网页 在页面中插入表格后，可以在“属性”面板中对表格进行相关的设置，其中有些属性是与“表格”对话框中的属性一样的，此外，可以设置表格的“背景颜色”、“边框颜色”和“对齐方式”等属性。 实例2 七年级部分学生基本信息表 设置上一节中“七年级部分学生基本信息表”表格和单元格属性，表格填充为5像素，居中对齐，间距为0，表格ID为“stu”，单元格文字水平居中对齐，效果如图所示。7.1 使用表格布局 教学内容第第7章章 规划布局网页规划布局网页 了解实现表格的HTML代码，可以对表格进行细微的调整，以达到最佳的效果。在DreamWeaver中，可以通过标签和代码实现表格。 实例3 七年级部分学生基本信息表代码 将“七年级部分学生基本信息表”表格切换到“代码”或“拆分”视图，则呈现表格的代码，其中标签有、和等，效果如图所示。7.1 使用表格布局 教学内容第第7章章 规划布局网页规划布局网页7.1 使用表格布局 教学内容第第7章章 规划布局网页规划布局网页 表格是最常用的网页布局实现方式。在表格中，可以很容易地对表格的行和列进行调整，能够精确地定位网页中的元素，从而方便地实现网页布局。实例4 方舟中学信息技术网络课堂 如下图所示是“方舟中学信息技术网络课堂”的首页，通过表格将整个网页进行了功能区的划分，使网页中的各个元素更加整齐、美观。7.1 使用表格布局 教学内容第第7章章 规划布局网页规划布局网页 在DreamWeaver中，表格模式有“标准模式”和“扩展表格模式”两种。标准模式是添加具体网页内容和显示的模式，如上节就是在标准模式下完成用表格布局网页的；扩展表格模式不像浏览器那样显示表格，但便于在表格内部和表格周围选择。 实例5 新书推荐 在新书推荐网页文档中，利用扩展表格模式，将新书推荐表格列宽调整到合适的大小，效果如图所示。 7.2 使用层布局 教学内容 第第7章章 规划布局网页规划布局网页 层（也称AP元素）是一种分配有绝对位置的HTML网页元素。其中可以包含文本、图像、表单和表格等，也可以包含其他层。利用“层”不仅可以在网页上自由地进行布局和设计，而且可以任意地调整层的大小、背景和叠放顺序等。实例6 制作和叠放层 在网页文档中制作4个层，分别插入4张图像，并通过移动层将它们叠放起来，效果如图所示。7.2 使用层布局 教学内容 第第7章章 规划布局网页规划布局网页 一个层里可以包含另一个层，就是嵌套层，通常也称嵌入层为子层。一个嵌入层会继承其父层的可见性，并且能随父层的移动而移动。一般地，利用移动的办法来判断几个层之间的嵌套关系。 实例7 展示新书 在网页文档中，利用嵌套层的方法展示新书，效果如图所示。7.2 使用层布局教学内容第第7章章 规划布局网页规划布局网页 了解层的HTML代码，可以对层进行细微的调整和控制，以达到最佳的效果。在DreamWeaver中，可以通过标签和代码实现层、设置层。 实例8 方舟中学网址（)二维码 将方舟中学网址二维码图插入到层中，切换到“拆分”视图，则呈现层的代码，其中标签有、和属性代码，效果如图所示。7.2 使用层布局教学内容第第7章章 规划布局网页规划布局网页 AP元素是一个十分灵活的网页元素，利用它进行网页布局，操作十分方便，而且功能比较强大，能精确地定位页面元素。 实例9 网上购车平台 本例是用AP元素定位网页元素，布局网页“网上购车平台”，布局轮廓效果如图7-55所示。 7.2 使用层布局教学内容第第7章章 规划布局网页规划布局网页 在网页设计时，根据实际需要，可先用层设计页面，再将层转换成表格；或先用表格设计页面，再将表格转成层。 实例10 网上购车平台转为表格布局 将上节中用层布局的网页网上购车平台转换为表格布局的网页，转换前后代码效果如图所示。7.3 使用框架布局教学内容第第7章章 规划布局网页规划布局网页 要制作框架网页，就要建立框架集，框架集是组织页面内容的常见方法，通过框架集可以将内容组织到相互独立的HTML页面内。实例11 简单的框架页面在网页文档中，插入简单的框架页面，如图7-60所示的是左右两个窗口的框架页面。 7.3 使用框架布局教学内容 第第7章章 规划布局网页规划布局网页 框架集文件和与其相关的框架文件必须先保存，然后才能在浏览器中预览该页面。刚创建的框架网页文档，每个新框架文档都被预定义一个文件名，如UntitleFrameset-1.html代表框架集文件，Untitled-1.html代表主框架文件，UntitledFrame-1.html、UntitledFrame-2.html等代表其他框架文件。 实例12 保存简单的框架页面在网页文档中，保存新建的框架集和框架，打开保存位置的文件夹后，显示的框架集和框架的文件名如图所示。 7.3 使用框架布局教学内容第第7章章 规划布局网页规划布局网页 框架和框架集是一些独立的HTML文档，可以通过设置某些框架或框架集的属性来对框架或框架集进行修改。实例13 设置框架和框架集属性 在网页文档中，对新建的框架集和框架的边框和滚动设置后，显示效果如图所示。7.3 使用框架布局教学内容第第7章章 规划布局网页规划布局网页 利用框架可以更加灵活地设计网页布局。在一般情况下，可用框架来保持网页中固定的几个部分，比如网页大标题、导航栏等，剩下的框架用来展现所选的网页内容。实例14 新书介绍 本实例是在新建的嵌套框架中，在各个框架中分别插入新书图片和文字介绍，效果如图所示。7.3 使用框架布局教学内容第第7章章 规划布局网页规划布局网页 在一个框架中使用链接，可以打开另一个框架中的文档，为此必须设置链接对象。此外，在链接目标列表中选择打开链接文档内容的框架或窗口。实例15 带有链接的新书介绍本实例是设置了控制链接的新书介绍，其中每本书图都设置了超链接，链接到对应的新书介绍文字网页文件，效果如图所示。7.4 使用CSS布局教学内容第第7章章 规划布局网页规划布局网页 表格+CSS布局可以使设计的网页结构更加合理，更便于维护和更改网页的样式，从本质上讲，这种布局网页的方式，是从传统的网页设计技术到符合Web2.0和Web3.0标准的网页设计技术的过渡。实例16 通知公告如图所示，这是在网站首页布局中经常会看到的局部布局的效果，位置一般在网页的右侧，或者放置在左侧。 7.4 使用CSS布局教学内容第第7章章 规划布局网页规划布局网页 利用DIV+CSS布局网页是一种盒子模式的开发技术，通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种方式排版网页的代码简洁，更新方便，能兼容更多的浏览器，越来越受到网页开发者的欢迎。实例17 DIV+CSS布局首页 如图所示，这是用DIV+CSS布局的网站首页半成品。包括页头、主体和页尾三大部分。 7.4 使用CSS布局教学内容第第7章章 规划布局网页规划布局网页清华大学出版社 网页设计与制作实例教程高等学校计算机应用规划教材 联系信箱：谢谢使用！