第7章第1节 Div元素的介绍与应用　课件

2023-02-21

| 74页

| 192人阅读

| 30人下载

普通

内容正文：

学习目标掌握Div的概念与插入Div的方法。掌握块级元素与行内元素的概念与区别。能够实现Div之间的嵌套。掌握盒模型的概念及组成。掌握Div的几种定位方式。掌握DIV+CSS布局网页的思路。熟练计算各Div的参数。能够根据需要合理创建CSS规则。能够熟练使用DIV+CSS布局网页。 7.1 第7章 DIV+CSS布局网页 7.1　Div元素的介绍与应用 7.1.1 “菊花的浇水学问”网页最终效果如图所示。 7.1 第7章 DIV+CSS布局网页 7.1　Div元素的介绍与应用 7.1.1 “菊花的浇水学问”网页（1）规划站点新建文件夹“QingxinXiaozhu”，将素材文件夹“QingxinXiaozhu”中“images”和“others”文件夹拷贝到“QingxinXiaozhu”文件夹中。（2）定义站点在Dreamweaver CC 2015中，单击菜单“站点”→“新建站点”命令，通过“站点设置对象”对话框定义站点，站点名称为“清新小筑”，本地站点文件夹设置为QingxinXiaozhu文件夹。 7.1 第7章 DIV+CSS布局网页 7.1　Div元素的介绍与应用 7.1.1 “菊花的浇水学问”网页（3）制作Banner部分 1）新建网页“index.html”，保存到站点文件夹下，打开网页“index.html”，将网页的标题改为“菊花的浇水学问”，切换到代码视图，将第一行代码<!doctype html >改为<!doctype html public> 7.1 第7章 DIV+CSS布局网页 7.1　Div元素的介绍与应用 7.1.1 “菊花的浇水学问”网页（3）制作Banner部分 2）打开“CSS设计器”面板，在“源”窗格中点击图标，选择“创建新的CSS文件”，打开“创建新的CSS文件”对话框，点击“浏览”按钮，输入文件名“cssfile”，选择“others”文件夹，点击“确定”，将文件保存，“添加为”选择“链接”，点击“确定”，“源”窗格如图所示。 7.1 第7章 DIV+CSS布局网页 7.1　Div元素的介绍与应用 7.1.1 “菊花的浇水学问”网页（3）制作Banner部分 3）创建一个*标签选择器规则。在“选择器”窗格中添加选择器“*”，并选中，如图7-3所示。将“属性”窗格切换到布局属性，设置“margin”的值为0px，“padding”的值为0px。 7.1 第7章 DIV+CSS布局网页 7.1　Div元素的介绍与应用 7.1.1 “菊花的浇水学问”网页（3）制作Banner部分 4）将“属性”窗格切换到边框属性，设置“border”的值为0px。 7.1 第7章 DIV+CSS布局网页 7.1　Div元素的介绍与应用 7.1.1 “菊花的浇水学问”网页（3）制作Banner部分 5）创建*标签选择器规则的目的是将所有网页元素的边界（margin）、填充（padding）、边框（border）设置为0px，方便以后的操作，*为配符，表示任意一个或多个字符，此时可以看到光标紧贴网页的上边框和左边框。 7.1 第7章 DIV+CSS布局网页 7.1　Div元素的介绍与应用 7.1.1 “菊花的浇水学问”网页（3）制作Banner部分 6）打开“插入”面板，点击图标，打开“插入Div”对话框，在“插入”项中选择“在插入点”，在ID中输入“Box”。 7.1 第7章 DIV+CSS布局网页 7.1　Div元素的介绍与应用 7.1.1 “菊花的浇水学问”网页（3）制作Banner部分 7）点击“新建CSS规则”按钮，打开“新建CSS规则”对话框，如图所示。可以看到“选择器类型”自动选择“ID”，“选择器名称”自动设置为“#Box”，“规则定义”选择“cssfile.css”。 7.1 第7章 DIV+CSS布局网页 7.1　Div元素的介绍与应用 7.1.1 “菊花的浇水学问”网页（3）制作Banner部分 8）点击“确定”按钮，打开“#Box的CSS规则定义”对话框。在“分类”中选择“方框”项，设置“Width”为760px，设置“Height”为606px，取消“Margin”中的“全部相同”复选框的对勾，设置“Top”为0、“Right”为auto，“Bottom”为0，“Left”为auto。 7.1 第7章 DIV+CSS布局网页 7.1　Div元素的介绍与应用 7.1.1 “菊花的浇水学问”网页（3）制作Banner部分 9）点击“确定”按钮，返回“插入Div”对话框，再次点击“确定”按钮，在页面中插入ID为“Box”的Div，且Div居中显示。 10）将ID为“Box”的Div中默认的文字删除，将光标定位在Div中，点击“插入”面板中