第7章第2节 DIV+CSS布局网页　课件

2023-02-21

| 58页

| 214人阅读

| 32人下载

普通

内容正文：

学习目标掌握Div的概念与插入Div的方法。掌握块级元素与行内元素的概念与区别。能够实现Div之间的嵌套。掌握盒模型的概念及组成。掌握Div的几种定位方式。掌握DIV+CSS布局网页的思路。熟练计算各Div的参数。能够根据需要合理创建CSS规则。能够熟练使用DIV+CSS布局网页。 7.1 第7章 DIV+CSS布局网页 7.2　使用DIV+CSS布局网页 7.2.1　案例制作：“经典回顾”网页最终效果如图所示。 7.1 第7章 DIV+CSS布局网页 7.2　使用DIV+CSS布局网页 7.2.1　案例制作：“经典回顾”网页（1）规划站点新建文件夹“JingDian”，将素材文件夹“JingDian”中的“images”和“others”文件夹拷贝到“JingDian”文件夹中。（2）定义站点在Dreamweaver CC 2015中，单击菜单“站点”→“新建站点”命令，通过“站点设置对象”对话框定义站点，站点名称为“经典回顾”，本地站点文件夹设置为JingDian文件夹。 7.1 第7章 DIV+CSS布局网页 7.2　使用DIV+CSS布局网页 7.2.1　案例制作：“经典回顾”网页（3）制作Banner部分 1）新建网页“index.html”，保存到站点文件夹下，打开网页“index.html”，将网页的标题改为“经典回顾”，切换到代码视图，将第一行代码<!doctype html >改为<!doctype html public>。 2）打开“CSS设计器”面板，在“源”窗格中进行操作，创建新的CSS文件，文件名为“cssfile”，将文件保存“others”文件夹，并以“链接”附加。 7.1 第7章 DIV+CSS布局网页 7.2　使用DIV+CSS布局网页 7.2.1　案例制作：“经典回顾”网页（3）制作Banner部分 3）创建*标签选择器规则。在“选择器”窗格中添加选择器“*”，并选中，将“属性”窗格切换到布局属性，设置“margin”的值为0px，“padding”的值为0px。 7.1 第7章 DIV+CSS布局网页 7.2　使用DIV+CSS布局网页 7.2.1　案例制作：“经典回顾”网页（3）制作Banner部分 4）将“属性”窗格切换到边框属性，设置“border”的值为0px。 7.1 第7章 DIV+CSS布局网页 7.2　使用DIV+CSS布局网页 7.2.1　案例制作：“经典回顾”网页（3）制作Banner部分 5）打开“插入”面板，点击图标，打开“插入Div”对话框，在“插入”项中选择“在插入点”，在ID中输入“Box”。 7.1 第7章 DIV+CSS布局网页 7.2　使用DIV+CSS布局网页 7.2.1　案例制作：“经典回顾”网页（3）制作Banner部分 6）点击“新建CSS规则”按钮，打开“新建CSS规则”对话框，“选择器类型”选择“ID”，“选择器名称”设置为“#Box”，“规则定义”选择“cssfile.css”。 7）点击“确定”按钮，打开“#Box的CSS规则定义”对话框。在“分类”中选择“方框”项，设置“Width”为700px，设置“Height”为562px，取消“Margin”中的“全部相同”复选框的对勾，设置“Top”为0px、“Right”为auto，“Bottom”为0px，“Left”为auto。 7.1 第7章 DIV+CSS布局网页 7.2　使用DIV+CSS布局网页 7.2.1　案例制作：“经典回顾”网页（3）制作Banner部分 8）点击“确定”按钮，返回“插入Div”对话框，再次点击“确定”按钮，在页面中插入ID为“Box”的Div，且Div居中显示。 9）将Div中默认的文字删除，点击图标，打开“插入Div”对话框，在“插入”项中选择“在标签开始后”、“<div id=’Box’>”，在ID中输入“Top”。 7.1 第7章 DIV+CSS布局网页 7.2　使用DIV+CSS布局网页 7.2.1　案例制作：“经典回顾”网页（3）制作Banner部分 10）点击“新建CSS规则”按钮，打开“新建CSS规则”对话框，默认设置，点击“确定”按钮，打开“#Top的CSS规则定义”对话框。 11）在“方框”中设置“Width”为700px、“Height”为117x。两次点击“确定”按钮，插入Div。将默认的文字删除，光标定位于ID为“Top”的Div，插入图像“banner.jpg”Banner部分在网页中的效果如图所示。。 7.1 第7章 DIV+CSS布局网页 7.2　使用DIV+CSS布局网页 7.2.1　案例制作：“经典回顾”网页（4）制