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