粤教版高中信息技术选修3课件-4.2.2 网页的版面设计

网页布局操作指南——信息技术组制 THE PROFESSIONNAL BUSINESS TEMPALTE 第一部分 PART ONE 网页的布局设计 ADD TITLE 网页的布局设计 层布局 表格布局 框架布局 小结 14.1 层布局 14.1.1层的概念 图层作为一种网页元素定位技术，其最大的特点是可以把HTML元素放置在不同的图层中，通过对图层的操作可以实现对图层中元素的位置、显示或隐藏以及显示顺序等参数进行控制。而且它还能使网页内容重叠，甚至可以利用它轻松制作出动态效果。所以说，它是一种比表格还要好的网页定位工具。 在Web页面中，图层往往是作为容器而存在的，利用图层可以非常灵活地放置内容。 14.1 层布局 14.1.1层的概念 图层作为一种网页元素定位技术，其最大的特点是可以把HTML元素放置在不同的图层中，通过对图层的操作可以实现对图层中元素的位置、显示或隐藏以及显示顺序等参数进行控制。而且它还能使网页内容重叠，甚至可以利用它轻松制作出动态效果。所以说，它是一种比表格还要好的网页定位工具。 在Web页面中，图层往往是作为容器而存在的，利用图层可以非常灵活地放置内容。 第十四单元 网页的布局设计 14.1.2 插入图层 在Dreamweaver中，可通过菜单插入图层，也可以通过插入工具中的常用子面板来插入层(div)。 插入方法： 1、把光标置于文档窗口中想要插入图层的位置，然后选择【插入】|【层】菜单命令， 第十四单元 网页的布局设计 2、用鼠标直接将“插入”面板的“常用”子面板的“div”图标按钮 拖至文档窗口上想要插入图层的地方，松开左键即可。 上述两种方法都可以弹出层的插入对话框如图14-1所示。 第十四单元 网页的布局设计 在插入div对话框中请添加层对应的id或者class。为了能够实现div+css的布局，id或者class是层的一个必要属性，若该层仅仅是一个普通层，则不需要设置属性。 若未定义该层的样式信息，可点击“新建CSS规则”按钮来增加样式表，并与该层绑定。 第十四单元 网页的布局设计 14.1.3 实现div+css网页布局 div+css布局的最大难点并不是层，而是CSS的规则的掌握，通过浮动、定位和大小的设置来改变div层的块模型，来实现对网页的布局。 例题说明：网页的结构包括顶端的广告标题，广告标题下面左侧为公司的联系方式