网页布局讲义.pptVIP

5.5 网页元素的精确定位 5.5.1 CSS的定位技术 5.5.2 应用AP元素定位 5.5.1 CSS的定位技术 相对定位 相对定位是指相对它本来应该处的位置所做的移动。 例子： style type=text/css !-- .q1 { position: relative; left: 50px; } -- /style ... p我是一段正常的文本/p p class=“q1”我本来应该在它的正下方，可是relative让我在正常位置的基础上向右移了50个像素/p 绝对定位 绝对定位就是按指定的坐标(x,y)来准确地定位一个元素。 注意：该坐标的原点是被定位元素父元素的位置 例子： style type=text/css !-- .q2 { position: absolute; top: 50px; left: 50px; } -- /style ... p段落正文 strong class=“q2” strong元素坐标原点是其父元素p的位置/strong /p 5.5.2 应用AP元素定位 AP元素（绝对定位元素）是分配有绝对位置的HTML页面元素，提供了对页面元素最精确的布局定位方式。 AP元素中可以包含文本、图像或其它任何可放置到HTML文档正文中的内容，并可以使它们呈现层叠效果。 1.创建AP元素 1）插入AP元素 在“标准”模式下，单击“布局”工具栏的【绘制AP Div】按钮 2）为AP元素添加内容 3）设置AP元素的可见性 4）AP元素的重叠 取消选择这个复选框 2.操作和管理AP元素 1）选择AP元素 2）移动AP元素 3）调整AP元素的大小 4）对齐AP元素 3.AP元素是一种盒子模式 head meta http-equiv=Content-Type content=text/html; charset=utf-8 / style type=text/css !-- #apDiv1 { position:absolute; left:163px; top:101px; width:301px; height:173px; z-index:1; } -- /style /head body div id=apDiv1/div /body 如果不设AP元素的左边距和上边距值，则当改变浏览器的分辨率时，此AP元素相对于其父元素的位置都是相对固定的。 视频欣赏 5.6 统一站点风格 5.6.1 模板的使用 5.6.2 库的使用 引言 Dreamweaver提供了模板、库，使用它们能批量生成风格类似的网页，并在更改库项目或模板的内容时，可同时更新所有与之关联的网页，大大简化了网页制作。 5.6.1 模板的使用 在Dreamweaver CS3中，模板是一种特殊的文档，用于设计固定的页面布局。 模板中有些区域是不能编辑的，称为锁定区域；有些区域是可以编辑的，称为可编辑区域。可以通过编辑可编辑区的内容，从而得到与模板相似但又有所不同的新的网页。 使用模板创建网页的最大好处就是，当修改模板时使用该模板创建的所有网页可以一次自动更新，大大提高了网页更新维护的效率。 1.创建新模板 所有模板文件*.dwt都保存在站点根目录中的Templates文件夹中 创建新模板方法 方法一：在“资源-模板”面板中创建新模板。 单击“资源”面板下方的【新建模板】按钮 或在“名称”下方的空白处单击鼠标右键，在弹出的快捷菜单中选择【新建模板】命令 创建新模板方法 方法二：利用菜单或者工具栏上的命令创建新模板。 执行【插入记录】→【模板对象】→【创建模板】命令 或者单击“常用”工具栏的【模板】按钮，并在下拉菜单中选择“创建模板” 创建新模板方法 方法三：将普通网页另存为模板。 执行【文件】 →【另存模板】 2.定义可编辑区域 可编辑区域是模板中能让基于该模板创建的网页进行编辑的区域。 插入可编辑区域方法： 单击“常用”工具栏的【模板】按钮，并在下拉菜单中选择“可编辑区域” * 阿尔茨海默症防治相关知识埃及的金字塔有建造方法动画艾司洛尔在神经外科重症中的应用二级二班防溺水等安全教育 * 第 5 章 网页布局 罗 东 俊 ZSUJONE@126.COM 主要内容 5.1 在布局模式下用表格布局网页 5.2 用框架布局网页 5.3 表格＋CSS布局 5.4 DIV＋CSS布局 5.5 网页元素的精确定位 5.6 统一站点风格 5.1 在布局模式下用表格布局网页 在“标准”模式下用表格布局网页不够灵活、精细。 在“布局”模式下用表格来布局网页简单、灵活 ，能设计出精美的网页。 在绘制布局表格或布局单元格之前，必须从“标准”模式切换到“布局”模式，可以通过执行【查看】→【表格模式】