项目7使用CSS+DIV布局页面.docVIP

项目7 使用CSS+DIV布局页面 一、教学建议 CSS+DIV是网页布局的一种方式，在该项目中，使用两个任务来系统地介绍如何利用CSS+DIV布局页面。 该项目理论知识详尽，要求结合上机实践操作，巩固学生的理论知识，提高学生的学习兴趣，并以“项目总结”的形式通过“发现问题——解决问题——总结问题”的方式加深学生的印象，增强学习效果。 为了提高学生的应试能力，尤其是一些考级需要，建议教师在教学的过程中有意识地穿插该项目后面“自我评测”的操作题与该教材配套光盘中配套的实例题，让学生在实际操作的过程中解决一些问题，达到理论实践一体化的效果，以便学生更好更牢固的掌握知识点，学以致用。 二、教学简案 课题 任务1 初识DIV 参考资料 教材、教师手册 教学配套 光盘素材 教学方法 教师讲解、演示。学生讨论，上机实践操作。 授课节数 2课时 教学目标 1.了解CSS+DIV布局的优势。 2.理解CSS盒子模型的含义。 相关知识 1.DIV布局与CSS控制的优势。 2.插入DIV块与建立CSS控制。 3.CSS盒子模型。 4.常见的DIV布局方式。 5.DIV与项目列表 学习重点 1.了解DIV+CSS布局的概念及其方法。 2.能熟练地在网页设计中运用DIV+CSS进行网页布局。 教学内容 一、DIV与CSS 1. DIV是网业中的“层”（或称为“块”），相当于一于一个容器。网页中的元素均可以划分到相应的层中进行显示输出。 2. DIV的起始标签是div，结束标签是/div。介于div和/div之间的所有内容都属于这个层，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用CSS样式表来进行控制。 3. 使用DIV+CSS布局的网页，代码简洁，结构清晰，面向搜索引擎更加友好 二、插入DIV与建立CSS控制 Dreamweaver中，在“插入”栏的“常用”选项卡中单击“插入DIV标签”按钮，就可以在网页中插入DIV，在弹出的“插入DIV标签”对话框输入(top)。 三、CSS盒子模型 CSS的盒子模型是学习DIV+CSS布局的关键。 常常使用一些属性：内容（content）、填充（padding）、边框（border）、边界（margin）。 内容：就是盒子里装的东西。常指文字、图片等元素 填充：就是为了防止盒子里装的东西损坏而添加的泡沫或者其它抗震的辅料。填充只有宽度属性，可以理解为盒子里辅料的厚度。 边框：就是盒子本身。有大小和颜色之分 边界：则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙，也就是说该盒子与其它物件要保留多大的距离。 四、常用的DIV布局方式 （1）一列固定宽度居中 （2）两列固定宽度 （3）多列并排 五、DIV与项目列表 引入CSS后，项目列表被赋予了很多新的功能，超越了最初设计它时的预计功能。项目列表要采用ul和ol标记，还可使用li标记来定义列表中的各项。在DIV+CSS布局中，通常使用项目列表进行导航栏的设计。通过控制ulli和a等标记的属性，来实现多变的导航效果。 任务实施 插入一行一列固定宽度居中的DIV 插入一行三列固定宽度的DIV 完整的页面布局 完成的页面内容 实施建议 1.结合项目4的表格布局引入该项目的学习。DIV+CSS布局网页较之表格布局，不仅代码简洁、结构清晰，而且通过修改CSS就能完成批量页面的变化，修改起来十分方便。 2.指导学生完成该任务的实作内容，理解并掌握DIV+CSS的用法。 课后评价 该任务理论知识比较难以理解，教师在授课时一定要结合实作进行讲解。上机实践操作过程中的实时辅导特别重要。 课题 任务2 使用DIV+CSS制作较复杂的页面 参考资料 教材、教师手册 教学配套 光盘素材 教学方法 教师讲解、演示。学生讨论，上机实践操作。 授课节数 2课时 教学目标 1掌握使用CSS+DIV进行常用页面布局的方法 相关知识 1.DIV布局模式的应用。 学习重点 1.掌握DIV+CSS布局中常用的专业术语：绝对定位、三列浮动、中间列宽自适应。 2.能熟练地在网页设计中运用DIV+CSS进行网页布局。 教学内容 任务实施 插入一行一列固定宽度居中的DIV 运行Dreamweaver CS3,打开站点example。 在“文件”面板中鼠标右击“article”文件夹，在快捷菜单中选择“新建文件夹”，尽力一个空白网页文件readl.html。 在“插入”栏的“常用”选项卡中单击“插入DIV标签”按钮，弹出“插入DIV标签”对话框，输入ID值为“page”。 在“插入DIV标签”对话框单击“新建CSS样式”，弹出“新建CSS规则”，对话框。 在打开的“#page的CSS规则”对话框，。选择“方框”选项卡，设置宽为“1000像素”高为“70像素”，“边