第8节 网页布局课件（22张幻灯片）
文档属性
| 名称 | 第8节 网页布局课件（22张幻灯片） |  | |
| 格式 | zip | ||
| 文件大小 | 19.2MB | ||
| 资源类型 | 教案 | ||
| 版本资源 | 北师大版 | ||
| 科目 | 信息技术（信息科技） | ||
| 更新时间 | 2018-11-19 18:37:49 | ||
图片预览
文档简介
学习目标：
1、以主页和浏览图片的网页为例，使用表格实现网页的布局方法；
2、实现网页的图文混排，掌握美化网页方法；
3、教者演示网页布局的步骤，让学生对表格布局网页有粗略的了解；
学生合作完成任务，以便学以致用，熟记知识要点；
教学重点
对网页布局和图文混排等方法的掌握。
如何插入表格、设计表格来规划网页，规范网页版面布局。
教学难点
一、常见的网页布局结构
1、“国字”型布局
“国”字型布局由“同”字型布局进化而来，因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。
2．T型布局
T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。
3．标题正文型
标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。
4．左右框架型布局
左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容
5．上下框架型
上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。
6. 综合框架型
综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术
7．POP布局
POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。
8．FLASH布局
FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。
二、利用表格来实现网页布局
想一想：把文字和内容编辑在网页中，并没有按设计的各种布局呈现出来，所见即所是的网页制作工具如何实现所设计的各种布局。
在网页制作中，使用表格来布局网页中的内容是非常方便的方法，可以通过拆分或合并单元格、嵌套表格来实现各种布局。
为了确保图文混排的网页排列整齐，不因屏幕分辨率的改变而破坏页面布局，在网页制作中经常利用表格实现网页的布局。所以我们可以把该布局（有5个栏目，外加一个首页，导航栏分6格）来实现。
1、设置网页显示宽度——插入一行一列的表格：
（1）插入表格：执行“表格”——“插入”——“表格”命令；
（2）设置表格属性：按P74图2—14所示设置行数、列数、对齐方式、指定宽度后确定。
表格的宽度有两个单位。像素单位：这是一个绝对单位，它是不随着浏览器窗口的改变而改变的；百分比单位：这是一个相对单位，它是随着浏览器窗口的改变而改变的。
2、在表格内插入横幅图片。
3、在表格肉建立导航：
（1）插入表格：单击常用工具栏中的“插入表格”按钮 ，并移动鼠标选择“1*6表格”；
（2）设置表格属性：边框粗细、背景颜色、指定宽度后确定；
（3）设置单元格属性：先中6个单元格，设置水平对齐方式、指定宽度、背景颜色后确定；
（4）输入文字。
4、图文混排：
（1）插入表格；
（2）设置单元格属性；
（3）插入图片；
（4）合并单元格；
（5）输入文字。
5、设置版权信息：
（1）插入水平线：执行“插入”——“水平线”命令；
（2）输入文字并进行适当的设置。
6、保存网页：
以index1.html为名保存到网站文件夹中。注意设置图片保存的位置。
任务探究一：四人为一小组，生按照步骤设计网页框架，如图2-18
完成的网页在FrontPage窗口内的普通网页视图中的效果如图：
三、浏览图片的网页
1、分析P79图2—19的结构，如：图2—201、文字布局
在相应的位置上分别完成横幅、导航、版权说明部分。
还记得图片浏览软件ACDSee的图片浏览窗口吗？
由于网页的页面有限、网络的速度有限，不可能同时展示所有的图片。因此，我们同ACDSee的图片浏览窗口一样，制作一个预览页面，该页面的每幅小图片都可以链接到它的原因，即浏览时通过单击该图片可以显示出原因。
P79图2—19网页布局就是以表格实现的，如图：
2、图片布局
（1）插入表格；
（2）设置缩略图；
（3）合并最后一行的4个单元格，并在其中输入资料来源处；
（4）保存网页，以wulingyuan.html为名保存。
任务探究二：完成网页在FrontPage窗口内的普通网页视频中的效果，如图
任务探究三：
1、按书中步骤继续完成操作；
2、注意主页和图片页面的结构，利用表格来规划。
拓展练习与思考：
1、普通表格和布局表格有什么区别，尝试使用布局表格编辑一个网页。
2、当表格和单元格的背景颜色不同时，显示的是哪个颜色？
3、单元格衬距和单元格间距有什么不同？
4、在如图所示的带有背景色的网页上插入一个来自剪贴画的图片，如何设置可以使如图2-22(a)所示的网页变成如图2-22(b)所示的网页
1、以主页和浏览图片的网页为例，使用表格实现网页的布局方法；
2、实现网页的图文混排，掌握美化网页方法；
3、教者演示网页布局的步骤，让学生对表格布局网页有粗略的了解；
学生合作完成任务，以便学以致用，熟记知识要点；
教学重点
对网页布局和图文混排等方法的掌握。
如何插入表格、设计表格来规划网页，规范网页版面布局。
教学难点
一、常见的网页布局结构
1、“国字”型布局
“国”字型布局由“同”字型布局进化而来，因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。
2．T型布局
T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。
3．标题正文型
标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。
4．左右框架型布局
左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容
5．上下框架型
上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。
6. 综合框架型
综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术
7．POP布局
POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。
8．FLASH布局
FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。
二、利用表格来实现网页布局
想一想：把文字和内容编辑在网页中，并没有按设计的各种布局呈现出来，所见即所是的网页制作工具如何实现所设计的各种布局。
在网页制作中，使用表格来布局网页中的内容是非常方便的方法，可以通过拆分或合并单元格、嵌套表格来实现各种布局。
为了确保图文混排的网页排列整齐，不因屏幕分辨率的改变而破坏页面布局，在网页制作中经常利用表格实现网页的布局。所以我们可以把该布局（有5个栏目，外加一个首页，导航栏分6格）来实现。
1、设置网页显示宽度——插入一行一列的表格：
（1）插入表格：执行“表格”——“插入”——“表格”命令；
（2）设置表格属性：按P74图2—14所示设置行数、列数、对齐方式、指定宽度后确定。
表格的宽度有两个单位。像素单位：这是一个绝对单位，它是不随着浏览器窗口的改变而改变的；百分比单位：这是一个相对单位，它是随着浏览器窗口的改变而改变的。
2、在表格内插入横幅图片。
3、在表格肉建立导航：
（1）插入表格：单击常用工具栏中的“插入表格”按钮 ，并移动鼠标选择“1*6表格”；
（2）设置表格属性：边框粗细、背景颜色、指定宽度后确定；
（3）设置单元格属性：先中6个单元格，设置水平对齐方式、指定宽度、背景颜色后确定；
（4）输入文字。
4、图文混排：
（1）插入表格；
（2）设置单元格属性；
（3）插入图片；
（4）合并单元格；
（5）输入文字。
5、设置版权信息：
（1）插入水平线：执行“插入”——“水平线”命令；
（2）输入文字并进行适当的设置。
6、保存网页：
以index1.html为名保存到网站文件夹中。注意设置图片保存的位置。
任务探究一：四人为一小组，生按照步骤设计网页框架，如图2-18
完成的网页在FrontPage窗口内的普通网页视图中的效果如图：
三、浏览图片的网页
1、分析P79图2—19的结构，如：图2—201、文字布局
在相应的位置上分别完成横幅、导航、版权说明部分。
还记得图片浏览软件ACDSee的图片浏览窗口吗？
由于网页的页面有限、网络的速度有限，不可能同时展示所有的图片。因此，我们同ACDSee的图片浏览窗口一样，制作一个预览页面，该页面的每幅小图片都可以链接到它的原因，即浏览时通过单击该图片可以显示出原因。
P79图2—19网页布局就是以表格实现的，如图：
2、图片布局
（1）插入表格；
（2）设置缩略图；
（3）合并最后一行的4个单元格，并在其中输入资料来源处；
（4）保存网页，以wulingyuan.html为名保存。
任务探究二：完成网页在FrontPage窗口内的普通网页视频中的效果，如图
任务探究三：
1、按书中步骤继续完成操作；
2、注意主页和图片页面的结构，利用表格来规划。
拓展练习与思考：
1、普通表格和布局表格有什么区别，尝试使用布局表格编辑一个网页。
2、当表格和单元格的背景颜色不同时，显示的是哪个颜色？
3、单元格衬距和单元格间距有什么不同？
4、在如图所示的带有背景色的网页上插入一个来自剪贴画的图片，如何设置可以使如图2-22(a)所示的网页变成如图2-22(b)所示的网页