学习目标： 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的图片浏览窗口吗？ 由于网页的页面有限、 ... ...
~~ 您好，已阅读到文档的结尾了 ~~
