APDiv布局网页CSS美化网页PPT课件.pptx

主讲人曾富洪 网站设计 DreamweaverFlashAccessVBscript 第6课 5 1 使用APDiv布局网页 5 2 使用CSS美化网页 网站设计 DreamweaverFlashAccessVBscript 本章导读 APDiv的创建 1 2 APDiv的编辑操作 3 APDiv的属性设置 5 1 1APDiv的创建 在DreamweaverCS6中创建APDiv的方法很简单 既可直接通过菜单栏进行插入 也可通过 布局 选项卡进行绘制 5 1 1 1创建APDiv 5 1 1 2创建嵌套APDiv APDiv可以进行嵌套 在某个APDiv内部创建的APDiv称为嵌套APDiv或子APDiv 嵌套APDiv外部的APDiv称为父APDiv 子APDiv可以浮动于父APDiv之外的任何位置 子APDiv的大小不受父APDiv限制 5 1 2APDiv的编辑操作 5 1 2 1认识 AP元素 面板 5 1 2 2选择APDiv 5 1 2 3移动APDiv 5 1 2 4对齐APDiv 5 1 2 5调整APDiv的大小 5 1 2 6设置APDiv的堆叠顺序 5 1 2 7改变APDiv的可见性 在DreamweaverCS6中可选择 窗口 APDiv 命令或按F2键打开 AP元素 面板 在其中查看当前网页中包含的所有APDiv 5 1 2 1认识 AP元素 面板 5 1 2 2选择APDiv 要在网页中使用APDiv进行布局 需要先将其选中 在DreamweaverCS6中可以分别选择单个和多个APDiv 其方法介绍如下 在编辑窗口中单击要选择的APDiv的边框可选择单个APDiv 在 AP元素 面板中单击要选择的APDiv的名称可选择单个APDiv 按住Ctrl Shift键在要选择的APDiv中单击可选择单个APDiv 选择多个APDiv可按住Shift键后依次在需选中的APDiv中或APDiv边框上单击 也可按住Shift键后依次在 AP元素 面板中单击需选择APDiv的名称 选择需移动的APDiv后 将鼠标光标移到APDiv边框上 当鼠标光标变为形状时 按住鼠标左键不放进行拖动 到需要的位置后释放鼠标即可 5 1 2 3移动APDiv 在网页制作过程中常需要将APDiv进行对齐 APDiv的对齐方式有左对齐 右对齐 上对齐和对齐下缘 在进行对齐的过程中 DreamweaverCS6会默认以最后选择的APDiv为标准进行对齐 5 1 2 4对齐APDiv 在网页制作过程中 常常需要对创建的APDiv大小进行调整 使其符合网页的要求 5 1 2 5调整APDiv的大小 5 1 2 6设置APDiv的堆叠顺序 在 属性 面板中更改APDiv的堆叠顺序 1 2 3 在 AP元素 面板中更改APDiv的堆叠顺序 用菜单命令更改堆叠顺序 选择需改变堆叠顺序的APDiv后 在 属性 面板中的 Z轴 文本框中输入所需的数值 大于原数字可将该APDiv在堆叠顺序中上移 小于原数字可将该APDiv在堆叠顺序中下移 完成输入后按Enter键确认即可 1 在 属性 面板中更改APDiv的堆叠顺序 打开 AP元素 面板 在Z栏中双击需要进行修改的APDiv对应的Z轴值 修改后在空白处单击鼠标即可 2 在 AP元素 面板中更改APDiv的堆叠顺序 选择需更改堆叠顺序的APDiv后 选择 修改 排列顺序 命令 在弹出的子菜单中选择 移到最上层 或 移到最下层 命令即可 3 用菜单命令更改堆叠顺序 5 1 2 7改变APDiv的可见性 选择要设置可见性的APDiv后 在其上单击鼠标右键 在弹出的快捷菜单中选择 可视性 隐藏 命令 再在编辑窗口的空白区域单击鼠标左键即可隐藏APDiv 1 隐藏APDiv 如果要显示隐藏的APDiv 则需要在 AP元素 面板中选择隐藏的APDiv 再在选中的APDiv上单击鼠标右键 在弹出的快捷菜单中选择 可视 命令即可 再在编辑窗口的空白区域单击鼠标左键即可显示APDiv 2 显示APDiv 2020 3 21 可编辑 5 1 3APDiv的属性设置 单个APDiv的属性设置 多个APDiv的属性设置 5 1 3 1单个APDiv的属性设置 选择要设置属性的单个APDiv 在 属性 面板中进行设置即可 如果多个APDiv具有相同的属性需要设置 则可同时选择这些APDiv 然后再在 属性 面板中进行设置 5 1 3 2多个APDiv的属性设置 5 1 4提高实例 制作西餐厅网页 本章的提高实例中将对 西餐厅 网页进行完善 先对网页菜品展示的整体结构进行布局 再对放置菜品图片的地方进行布局 5 1 4 1行业分析 APDiv布局常被用于进行较为灵活的页面布局 以便根据需要对页面进行调整 如用于放置漂浮在页面上的图片 文本或其他内容 再结合Dreamweaver的其他功能 使其能达到显示 隐藏的效果等 而要将页面的某一部分位置进行固定 则需要通过Div标签 Div标签是最简单的一种布局标签 通过它与CSS的结合使用 可以将页面划分为若干个部分 并将每个部分分别固定在特定的位置 以便在其中添加内容 APDiv标签是Div标签的一种较为特殊的格式 通过结合APDiv与Div标签的使用 可以制作出符合用户实际需要的网页 5 1 4 2操作思路 打开网页 插入Div标签布局页面 插入APDiv标签 操作思路 1 2 3 4 填充并设置APDiv标签 5 1 5提高练习 制作服装展示网页 打开网页 插入APDiv和图像 编辑APDiv和图像的大小与位置 5 1 6知识问答 问 在网页中既可以使用APDiv进行布局 又可以直接通过Div进行布局 它们之间有什么区别吗 问 每次对网页进行布局时 都会花费很多的时间进行构思 有没有什么能提高对页面整体布局的分析能力 知识关联 使用CSS美化网页 除了通过Div CSS来进行网页的布局外 还可通过CSS规则对创建的Div标签进行设置 美化其内容 也可导入外部的CSS文件 以套用到网页中 对网页的背景 字体 布局等进行优化 增加网页的观赏性 使用CSS美化网页的方法较为复杂 将在后面的章节中进行详细讲解 导读 5 2 使用CSS美化网页 认识层叠样式表 1 2 创建层叠样式表 3 定义层叠样式表属性 4 应用并管理层叠样式表 5 2 1认识层叠样式表 层叠样式表即CSS样式 其全称为CascadingStyleSheets 是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 5 2 2创建层叠样式表 选择 窗口 CSS样式 命令或按Shift F11键可打开 CSS样式 面板 在其中显示了当前网页中存在的所有CSS样式 包括外部链接样式表和内部样式表 5 2 2 1认识 CSS样式 面板 外部链接样式表 内部样式表 5 2 2 2创建层叠样式表 1 认识层CSS样式的类型 在 新建CSS规则 对话框的 选择器类型 下拉列表框中可以对创建的CSS类型进行设置 DreamweaverCS6中一共包括类 ID 标签和复合内容4种 该样式可用于HTML中的任何元素 定义该类型的CSS样式时 需在其名称前加上 符号 DreamweaverCS6会为该类型的CSS样式的HTML代码中添加class属性 类 该样式只能应用于惟一的标签 且这个标签的ID必须是惟一的 ID类型的CSS样式 其名称前应添加 符号 ID 该样式用于重新定义HTML元素 只需新建该类型的CSS样式后 即可直接将其应用到网页中 标签 该样式用于在已创建的CSS样式基础上 创建或改变一个或多个标签 类或ID的复合规则样式表 使包含在该标签中的内容遵循定义的CSS规则进行显示 复合内容 内部CSS样式是指存放在网页代码中 并非以单独的层叠样式表文件而存在的形式 在DreamweaverCS6中可以直接在 CSS样式 面板中新建任一类型的内部层叠样式 新建后的样式存放在HTML文件的头部 即与标签内 并以开始 结束 2 新建内部CSS样式 在DreamweaverCS6中可以链接已经创建好的CSS文件 使其应用到网页中 3 链接外部CSS样式表 5 2 3定义层叠样式表属性 5 2 3 1设置类型属性 5 2 3 2设置背景属性 5 2 3 3设置区块属性 5 2 3 4设置方框属性 5 2 3 6设置列表属性 5 2 3 7设置定位属性 5 2 3 8设置扩展属性 5 2 3 5设置边框属性 5 2 3 9设置过渡属性 CSS的 类型 属性主要用于设置文本的样式和格式 只要在CSS规则定义对话框的 分类 列表框中选择 类型 选项 即可在对话框右侧进行设置 5 2 3 1设置类型属性 背景 属性可以对网页的背景样式进行设置 只要在CSS规则定义对话框的 分类 列表框中选择 背景 选项 即可在对话框右侧对其进行设置 5 2 3 2设置背景属性 在CSS规则定义对话框的 分类 列表框中选择 区块 选项 在对话框右侧可对区块的样式进行设置 5 2 3 3设置区块属性 在CSS规则定义对话框的 分类 列表框中选择 方框 选项 在对话框右侧可对方框的样式进行设置 5 2 3 4设置方框属性 在CSS规则定义对话框的 分类 列表框中选择 边框 选项 在对话框右侧可对边框的样式进行设置 5 2 3 5设置边框属性 在CSS规则定义对话框的 分类 列表框中选择 列表 选项 在对话框右侧可对列表的样式进行设置 5 2 3 6设置列表属性 在CSS规则定义对话框的 分类 列表框中选择 定位 选项 在对话框右侧可对定位的样式进行设置 5 2 3 7设置定位属性 在CSS规则定义对话框的 分类 列表框中选择 扩展 选项 在对话框右侧可对扩展的样式进行设置 5 2 3 8设置扩展属性 在CSS的规则定义对话框中选择 过渡 选项 在对话框右侧即可对过渡样式进行设置 5 2 3 9设置过渡属性 2020 3 21 可编辑 5 2 4应用并管理层叠样式表 删除层叠样式表 应用层叠样式表 使用多边形套索工具 5 2 4 1应用层叠样式表 使用网页元素的快捷菜单应用CSS样式 1 2 3 使用网页元素的 属性 面板应用CSS样式 在 CSS样式 面板中应用层叠样式 在DreamweaverCS6中选中要应用样式的网页元素后 在其上单击鼠标右键 在弹出的快捷菜单中选择 CSS样式 命令 在弹出的子菜单中选择相应的CSS样式即可 1 使用网页元素的快捷菜单应用CSS样式 选中要应用样式的网页元素后 在其 属性 面板的 样式 下拉列表框 其他网页元素如表格 图像等则是 类 下拉列表框 中选择需要的选项即可 2 使用网页元素的 属性 面板应用CSS样式 在网页选中要应用样式的网页元素后 在 CSS样式 面板中要应用的CSS样式名称上单击鼠标右键 在弹出的快捷菜单中选择 应用 命令即可 3 在 CSS样式 面板中应用层叠样式 5 2 4 2编辑层叠样式 在CSS规则定义对话框中修改CSS样式的方法很简单 只需打开对应的CSS规则定义对话框 重新对其参数进行定义即可 1 在CSS规则定义对话框中修改 如果对CSS样式较为熟悉 可以直接在 CSS样式 面板中对其进行修改 方法是 在 CSS样式 面板中选择需要进行修改的样式 在 属性 栏中直接对其进行设置即可 2 在 CSS样式 面板中修改 如果网页中存在未使用的CSS样式 可对其进行删除 只要在 CSS样式 面板中选择要删除的CSS样式 再单击 删除CSS规则 按钮即可 5 2 4 3删除层叠样式表 5 2 5提高实例 美化鸿宇装饰页面 本例将对制作好的 鸿宇装饰 网页的首页进行美化 通过链接外部CSS样式文件 为网页中已定义好的标签应用样式 然后再根据网页中的具体内容创建层叠样式表 将其应用到需要的部分 最后再通过浏览器浏览美化网页后的效果 5 2 5 1行业分析 使用层叠样式表美化网页是网页制作中必不可少的步骤 通过它可以对网页的整体风格进行统一 确定网页的色调 也可以对网页中的每个部分进行定义 使其效果更为丰富 使用层叠样式表的方法较为简单 只需对其进行定义并将其应用到网页标签中即可 但在进行层叠样式表的设置时 应掌握一些设置的方法和技巧 以避免花费太多时间 却仍不得要领的情况 CSS样式的优先级 文字水平居中 图片宽度自适应 禁止自动换行 使用图片替换文本 5 2 5 2操作思路 打开网页 链接外部CSS样式文件 修改CSS样式 操作思路 1 2 3 4 新建并应用CSS样式 5 2 6提高练习 美化红驴旅行网网页 打开网页 链接外部CSS样式表 修改CSS样式 新建并应用CSS样式 5 2 7知识问答 问 我