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

《项目7 使用CSS+DIV布局页面.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、项目7使用CSS+DIV布局页面一、教学建议CSS+DIV是网页布局的一种方式，在该项目中，使用两个任务来系统地介绍如何利用CSS+DIV布局页面。该项目理论知识详尽，要求结合上机实践操作，巩固学生的理论知识，提高学生的学习兴趣，并以“项目总结”的形式通过“发现问题——解决问题——总结问题”的方式加深学生的印象，增强学习效果。为了提高学生的应试能力，尤其是一些考级需要，建议教师在教学的过程中有意识地穿插该项目后面“自我评测”的操作题与该教材配套光盘中配套的实例题，让学生在实际操作的过程中解决一些问题，达

2、到理论实践一体化的效果，以便学生更好更牢固的掌握知识点，学以致用。二、教学简案课题任务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进行

3、网页布局。教学内容一、DIV与CSS1.DIV是网业中的“层”（或称为“块”），相当于一于一个容器。网页中的元素均可以划分到相应的层中进行显示输出。2.DIV的起始标签是

4、击“插入DIV标签”按钮，就可以在网页中插入DIV，在弹出的“插入DIV标签”对话框输入(top)。三、CSS盒子模型CSS的盒子模型是学习DIV+CSS布局的关键。常常使用一些属性：内容（content）、填充（padding）、边框（border）、边界（margin）。内容：就是盒子里装的东西。常指文字、图片等元素填充：就是为了防止盒子里装的东西损坏而添加的泡沫或者其它抗震的辅料。填充只有宽度属性，可以理解为盒子里辅料的厚度。边框：就是盒子本身。有大小和颜色之分边界：则说明盒子摆放的时候的不能全部

5、堆在一起，要留一定空隙，也就是说该盒子与其它物件要保留多大的距离。四、常用的DIV布局方式（1）一列固定宽度居中（2）两列固定宽度（3）多列并排五、DIV与项目列表引入CSS后，项目列表被赋予了很多新的功能，超越了最初设计它时的预计功能。项目列表要采用

和
标记，还可使用
1. 标记来定义列表中的各项。在DIV+CSS布局中，通常使用项目列表进行导航栏的设计。通过控制
   • 和等标记的属性，来实现多变的导航效果。任务实施一、插入一行一列固定宽度居中的DIV二、插入一行三列固定宽

     6、度的DIV三、完整的页面布局四、完成的页面内容实施建议1.结合项目4的表格布局引入该项目的学习。DIV+CSS布局网页较之表格布局，不仅代码简洁、结构清晰，而且通过修改CSS就能完成批量页面的变化，修改起来十分方便。2.指导学生完成该任务的实作内容，理解并掌握DIV+CSS的用法。课后评价该任务理论知识比较难以理解，教师在授课时一定要结合实作进行讲解。上机实践操作过程中的实时辅导特别重要。课题任务2使用DIV+CSS制作较复杂的页面参考资料教材、教师手册教学配套光盘素材教学方法教师讲解、演示。学生讨论，

     7、上机实践操作。授课节数2课时教学目标1掌握使用CSS+DIV进行常用页面布局的方法相关知识1.DIV布局模式的应用。学习重点1.掌握DIV+CSS布局中常用的专业术语：绝对定位、三列浮动、中间列宽自适应。2.能熟练地在网页设计中运用DIV+CSS进行网页布局。教学内容任务实施一、插入一行一列固定宽度居中的DIV1、运行DreamweaverCS3,打开站点example。2、在“文件”面板中鼠标右击“article”文件夹，在快捷菜单中选择“新建文件夹”，尽力一个空白网页文件readl.html。3、在

     8、“插入”栏的“常用”选项卡中单击“插入DIV标签”按钮，弹出“插入DIV标签”对话框，输入ID值为“page”。4、在“插入DIV标签”对话框单击“新建CSS样式”，弹出“新建CSS规则”，对话框。5、在打开的“#page的CSS规则”对话框，。选择“方框”选项卡，设置宽为“1000像素”高为“70像素”，“边界”的左、右均设置为“自动”。单击“确定”，当前网页就插入了“page”层6、定位光标到层内行尾，按回车，继续插入一个层，ID为“l