网页设计与制作_Photoshop_Dreamweaver Flash 立体化教程 1DVD 教学课件 危锋 李茂林 项目五.pptVIP

* 适当配图！ 应用实践这个页面根据步骤的多少选用适当的图标来表现。 * 应用实践这个页面根据步骤的多少选用适当的图标来表现。 * 应用实践这个页面根据步骤的多少选用适当的图标来表现。 * 应用实践这个页面根据步骤的多少选用适当的图标来表现。 * 练习与上机，只把简单操作题和综合操作题做成PPT，样式如本页，每页一个题目加配图。 * 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 职业院校立体化精品系列规划教材 项目五 使用CSS+DIV统一页面风格 目 标 学习目标 ● 掌握CSS样式的创建和使用方法 ● 掌握DIV的创建和使用方法 ● 掌握使用CSS+DIV布局网页页面的方法 技能目标 ● 掌握使用CSS样式控制“享受生活”页面的方法 ● 掌握使用CSS+DIV制作“蓉锦大学教务处”页面的方法 ● 能够使用CSS+DIV完成页面布局 主要内容 制作“享受生活”页面 1 使用DIV+CSS制作蓉锦大学教务处网页 2 实训一——制作“公司文化”页面 3 实训二——制作“招生就业”页面 4 制作“果蔬网优惠区”页面 任务实施 任务目标 相关知识 任务目标 本任务将使用CSS样式来控制“享受生活”页面的格式，在制作时先要创建CSS样式，然后编辑CSS样式，最后将其应用到网页中。通过本任务可掌握CSS样式在网页设计中的相关操作。本任务完成后效果如下图所示。 相关知识 认识CSS样式 CSS功能 CSS特点 CSS语法规则 CSS类别 “CSS样式”面板的用法。 相关知识 CSS样式的各种属性设置 CSS样式包含了8个类别的属性设置，每个类别又涉及许多参数，因此在创建并设置CSS样式之前，需要对所有CSS样式属性的作用做系统介绍。双击“CSS样式”面板顶部窗格中的现有规则或属性，即可打开“CSS规则定义”对话框，在其中选择相应选项卡进行设置即可。 任务实施 创建并应用CSS样式 在“CSS样式”面板中单击“新建CSS样式”按钮，打开“新建 CSS 规则”对话框，在上方的下拉列表框中选择“类（可应用于任何 HTML 元素）”选项，在“选择器名称”下拉列表框中输入“.title”，一定要输入“.”这是类样式区其他样式的标志，在下方的下拉列表框中选择“（新建样式表文件）”选项，确认后在打开的对话框中设置保存位置，然后打开“CSS规则定义”对话框进行详细的设置。 任务实施 编辑CSS样式 在“CSS样式”面板中的“所有规则”列表框中选择“a:hover”选项，单击下方的“编辑样式”按钮，打开CSS规则定义对话框，在其中修改设置即可。 使用DIV+CSS制作蓉锦大学教务处网页 任务实施 任务目标 相关知识 任务目标 本任务将使用DIV+CSS来布局“蓉锦大学教务处”页面，制作时先创建DIV、然后进行编辑、最后通过CSS样式来统一控制页面风格。通过本任务的学习，可以掌握DIV+CSS布局页面的方法。本任务完成后的效果如右图所示。 相关知识 认识CSS+DIV盒子模式 盒子模型是根据CSS规则中涉及的Margin（边界）、Border（边框）、Padding （填充）、Content（内容）来建立的一种网页布局方法，下图即为一个标准的盒子模型结构，左侧为代码，右侧为效果图。 相关知识 盒子模型的优势 页面加载更快：CSS+DIV布局的网页因DIV是一个松散的盒子而使其可以一边加载一边显示出网页内容，而使用表格布局的网页必须将整个表格加载完成后才能显示出网页内容。 修改效率更高：使用CSS+DIV布局时，外观与结构是分离的，当需要进行网页外观修改时，只需要修改CSS规则即可，从而快速实现对应用了该CSS规则的DIV进行统一修改的目的。 搜索引擎更容易检索：使用CSS+DIV布局时，因其外观与结构是分离的，当搜索引擎进行检索时，可以不用考虑结构而只专注内容，因此更易于检索。 站点更容易被访问：使用CSS+DIV布局时，可使站点更容易被各种浏览器和用户访问，如手机和PDA等。 任务实施 插入DIV标签 选择【插入】/【布局对象】/【Div标签】菜单命令，打开“插入Div标签”对话框，在 “ID”下拉列表中输入名称“all”，单击 按钮，依次在打开的对话框中设置样式名称和样式并确认即可。 任务实施 插入AP Div 选择【插入】/【布局对象】/【AP Div标签】菜单命令，直接插入一个默认大小的AP Div标签。单击AP Div的边框，选择该AP Div，然后在属性面板的“宽”和“高”文本框中分别修改当前尺寸为1002px、151px。 任务实施 使用CSS+DIV控制整个页面风格 任务实施 使用Spry制作导航栏 选择【插入】/【