九年级 信息技术 第2章第3节《用表格布局网页》课件

九年级—广州版—信息技术—第2章第3节

用表格布局网页Dreamweaver与演示文稿软件

在处理媒体元素时的不同演示文稿软件（WPS演示、PowerPoint）在处理媒体元素时，会将其看作是一个个的层来处理，层与层之间可以重叠。Dreamweaver在处理媒体元素时，则采用平面占位法。注意：使用Dreamweaver插入媒体元素时，需要先规划好媒体元素摆放的位置（即进行布局），再添加媒体元素。先布局后添加网页元素的范例学习目标了解目前常见的网页版式。学会设计个性化网页版式的基本方法。掌握添加各种网页元素的方法。网页内容归类网站徽标+导航栏+横幅广告网页内容归类导航菜单+其他网页内容归类主体内容网页内容归类版权信息+联系方式+其他一、常见网页版式1.网页内容分类模块（1）网站徽标+导航栏+横幅广告（2）导航菜单+其他（3）主体内容（4）版权信息+联系方式+其他（5）广告+其他一、常见网页版式2.1网页版式之一：三字形网站徽标+导航栏+横幅广告主体内容版权信息+联系方式+其他一、常见网页版式2.2网页版式之二：Ｔ字形网站徽标+导航栏+横幅广告导航菜单+其他主体内容一、常见网页版式2.3网页版式之三：同字形网站徽标+导航栏+横幅广告主体内容导航菜单+其他广告+其他一、常见网页版式2.4网页版式之四：ＰＯＰ形POP引自广告术语，是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。POP型布局的网页常用于时尚类网站首页。其优点是页面优美，具有视觉冲击力，缺点是网页打开速度慢。网页布局网页的精彩与否不仅在于网页的色彩搭配、文字变化、图像处理，还在于网页的布局。网页布局是制作网页的重要环节，它包括对页面中各版块的位置、大小、间距以及叠加关系等方面的规划。课堂案例

如图所示，制作人员根据客户的描述，规划网站首页基本布局图。该布局图主要由图像、文字、浮动导航几个色块组合而成，简洁明了地展示了网页的基本结构和图文比例，并且直观地表现了徽标（logo）、导航栏、横幅广告（Banner）、主体内容和页尾版块的位置。播放视频内容：《设计网页版式》表格在网页布局中的作用Dreamweaver中的表格是一种特殊元素，不但可以用于放置各种数据，还可以作为页面布局元素使用。

表格是网页设计中一个非常有用的工具，它不仅可以将相关数据有序地排列在一起，还可以精确地定位文字、图像等网页元素在页面中的位置，使页面在形式上丰富多彩又条理清楚，在组织上井然有序而不显单调。使用表格进行网页布局的最大好处是，即使浏览者改变计算机的分辨率也不会影响网页的浏览效果。因此，表格是网站设计人员必须掌握的工具。

播放视频内容：《添加网页元素》播放视频内容：《用Flash制作动感图片》课堂小结Dreamweaver对媒体元素的处理形式。网页的常见结构模块。常见的网页版式。使用表格设计个性化网页版式的方法。表格在网页布局中的作用。添加各种网页元素的方法。课堂练习1.我们在着手制作网页时，

不需要过多地考虑网页总体风格和布局。（

）A.正确

B.错误B课堂练习2.哪一项对Dreamweaver表格的描述是错误的？（

）A.主要用于计算数据B.是一种特殊的网页元素C.可以用于放置各种数据D.可以作为页面布局元素使用A课堂练习3.以下网页属于哪种版面布局形式：（

）A.三字形B.T字形C.同字形D.POP形D课堂练习4.下面哪一项是制作网页的重要环节？（

）A.网页的色彩搭配B.文字变化C.网页的布局D.图像处理C

网页的精彩与否不仅在于网页的色彩搭配、文字变化、图像处理，还在于网页的布局。网页布局是制作网页的重要环节谢谢观看！九年级—广州版—信息技术—第2章第3节

《用表格布局网页》答疑课堂答疑一为什么“表格宽度”这里我们设置为800像素，它与电脑显示的分辨率有什么关系？可以把它随意调大吗？

电脑的分辨率相当于舞台，表格相当于划定的表演区域。用户显示器的分辨率限制了网页的可视范围，一旦表格宽度超出了显示器的分辨率，就需要用户使用左右的滚动条来切换显示的内容。因此，不能随意调大表格宽度，影响用户的浏览体验。课堂答疑二在Dreamweaver的插入菜单中还提供了一个生成“导航条”的功能，它与这种用表格制成的导航条有什么不同呢？Dreamweaver生成“