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