第7章 第2节 DIV+CSS布局网页 课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
7.12
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 5）切换至设计视图，在“选择器”窗格中添加标签选择器“ul li”，将“属性”窗格切换 至布局属性，设置“Width”为75px、“Height”为24px，设置左边界为20px，设置“float” 为left，将“属性”窗格切换至文本属性，设置“line-height”为24px，设置“list-styletype”为none。 6）为每一个导航项设置空超链接，在“选择器”窗格中添加伪锚记选择器“a.nav:link”， 将“属性”窗格切换至文本属性，设置“font-family”为宋体、“font-size”为13px、 “color”为# 1E1E1、“font-weight”为“bold”、“text-decoration”为“none”。 7）在“选择器”窗格中添加伪锚记选择器“a.nav:visited”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#E1E1E1、“fontweight”为“bold”、“text-decoration”为“none”。
7.17
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 6）为ID为“Title”的Div创建ID选择器规则，并在“方框”中设置“Width”为499px、 “Height”为45px，在“类型”中选择“类型”项设置“font-family”为宋体、“font-size” 为16px、“color”为#000000、“line-height”为45px、“font-weight”为bold。 7）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。 8）在“分类”中选择“区块”项，设置“Text-align”为“center”。
7.10
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 1）点击 图标，打开“插入Div”对话框，在“插入”项中选择“在标签结束之前”、 “<div id=’Top’>”，在“ID”中输入“Nav”。
7.11
第7章 DIV+CSS布局网页
（3）制作Banner部分
5）打开“插入”面板，点击
图标，打开“插入Div”对话框，在“插入”项中选
择“在插入点”，在ID中输入“Box”。
7.7
第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 案例制作：“经典回顾”网页
最终效果如图所示。
7.2
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（1）规划站点 新建文件夹“JingDian”，将素材文件夹“JingDian”中的“images”和“others”文件夹拷 贝到“JingDian”文件夹中。 （2）定义站点 在Dreamweaver CC 2015中，单击菜单“站点”→“新建站点”命令，通过“站点设置 对象”对话框定义站点，站点名称为“经典回顾”，本地站点文件夹设置为JingDian文 件夹。
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“似是故人来--梅艳芳”网页
（4）制作导航部分 2）点击“新建CSS规则”按钮，打开“新建CSS规则”对话框，默认设置，点击“确定” 按钮，打开“#Nav的CSS规则定义”对话框。 3）在“方框”中设置“Width”为700px、“Height”为24x。在“分类”中选择“背景” 项，设置“Background-color”为“#555555”。在“分类”中选择“区块”项，设置 “Text-align”为“center”，两次点击“确定”按钮，插入Div。 4）4）将默认的文字删除，切换到代码视图，将光标定位在<div id=“ Nav”></div>标签中 间，点击菜单“插入”→“项目列表”命令，插入列表，再点击菜单“插入”→“列表项” 命令，插入列表。将列表项标签<li></li>复制6次，并在每个<li></li>标签中输入文字素材 中的对应导V+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 1）插入一个Div，设置如图所示，在“插入”项中选择“在标签后”、“<div id=’Top’>”， 在“ID”中输入“Main”。
7.15
第7章 DIV+CSS布局网页
7.9
第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部分在网页中的效果如图所示。。
（6）制作左侧内容部分 2）为ID为“Content”的Div创建ID选择器规则，并在“方框”中设置“Width”为479px、 “Height”为345px，取消“Padding”中的“全部相同”复选框的对勾，设置“Right”为10 px，“Bottom”为10 px，“Left”为10px。 3）在“类型”中选择“类型”项设置“font-family”为宋体、“font-size”为13px、 “color”为#000000、“line-height”为25px。 4）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。
7.16
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“似是故人来--梅艳芳”网页
（5）制作网页左侧标题部分 4）为ID为“Main-left”的Div创建ID选择器规则，并在“方框”中设置“Width”为500px、 “Height”为400px、“Float”为left，在“分类”中选择“背景”项，设置“Backgroundcolor”为“#d6d6d6”。 5）将默认的文字删除，插入一个Div，设置如图7-79所示，在“插入”项中选择“在标签 开始后”、“<div id=’Main-left’>”，在“ID”中输入“Title”。
7.4
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（3）制作Banner部分 3）创建*标签选择器规则。在“选择器”窗格中添加选择器“*”，并选中，将“属性” 窗格切换到布局属性，设置“margin”的值为0px，“padding”的值为0px。
7.3
第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.2.1 案例制作：“经典回顾”网页
（6）制作左侧内容部分 1）插入一个Div，设置如图所示，在“插入”项中选择“在标签后”、“<div id=’ Title’>”，在“ID”中输入“Content”。
7.20
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
7.5
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（3）制作Banner部分 4）将“属性”窗格切换到边框属性，设置“border”的值为0px。
7.6
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
7.13
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 8）在“选择器”窗格中添加伪锚记选择器“a.nav:hover”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#FF0004、“fontweight”为“bold”、“text-decoration”为“none”。 9）在“选择器”窗格中添加伪锚记选择器“a.nav:acitve”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#FF0004、“fontweight”为“bold”、“text-decoration”为“underline”。 10）将“属性”面板切换至CSS属性状态，选择“网站首页”，在“目标规则”中选择 “nav”，应用CSS规则，同样的方法为“篇章目录”、“名家评价”、“后世影响”、 “经典篇章”、“成书过程”和“联系我们”应用“nav”CSS规则。
第7章 DIV+CSS布局网页
学习目标
❖掌握Div的概念与插入Div的方法。 ❖掌握块级元素与行内元素的概念与区别。 ❖能够实现Div之间的嵌套。 ❖掌握盒模型的概念及组成。 ❖掌握Div的几种定位方式。 ❖掌握DIV+CSS布局网页的思路。 ❖熟练计算各Div的参数。 ❖能够根据需要合理创建CSS规则。 ❖能够熟练使用DIV+CSS布局网页。
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 2）为ID为“Main”的Div创建ID选择器规则，并在“方框”中设置“Width”为700px、 “Height”为400px。 3）将默认的文字删除，插入一个Div，设置如图7-78所示，在“插入”项中选择“在标签 开始后”、“<div id=’Main’>”，在“ID”中输入“Main-left”。
7.8
第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.18
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 9）将默认的文字删除，输入文字素材中的标题文字“论语 （中国儒家经典）”，左侧标 题部分在网页中的效果如图所示。
7.19
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 5）切换至设计视图，在“选择器”窗格中添加标签选择器“ul li”，将“属性”窗格切换 至布局属性，设置“Width”为75px、“Height”为24px，设置左边界为20px，设置“float” 为left，将“属性”窗格切换至文本属性，设置“line-height”为24px，设置“list-styletype”为none。 6）为每一个导航项设置空超链接，在“选择器”窗格中添加伪锚记选择器“a.nav:link”， 将“属性”窗格切换至文本属性，设置“font-family”为宋体、“font-size”为13px、 “color”为# 1E1E1、“font-weight”为“bold”、“text-decoration”为“none”。 7）在“选择器”窗格中添加伪锚记选择器“a.nav:visited”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#E1E1E1、“fontweight”为“bold”、“text-decoration”为“none”。
7.17
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 6）为ID为“Title”的Div创建ID选择器规则，并在“方框”中设置“Width”为499px、 “Height”为45px，在“类型”中选择“类型”项设置“font-family”为宋体、“font-size” 为16px、“color”为#000000、“line-height”为45px、“font-weight”为bold。 7）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。 8）在“分类”中选择“区块”项，设置“Text-align”为“center”。
7.10
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 1）点击 图标，打开“插入Div”对话框，在“插入”项中选择“在标签结束之前”、 “<div id=’Top’>”，在“ID”中输入“Nav”。
7.11
第7章 DIV+CSS布局网页
（3）制作Banner部分
5）打开“插入”面板，点击
图标，打开“插入Div”对话框，在“插入”项中选
择“在插入点”，在ID中输入“Box”。
7.7
第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 案例制作：“经典回顾”网页
最终效果如图所示。
7.2
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（1）规划站点 新建文件夹“JingDian”，将素材文件夹“JingDian”中的“images”和“others”文件夹拷 贝到“JingDian”文件夹中。 （2）定义站点 在Dreamweaver CC 2015中，单击菜单“站点”→“新建站点”命令，通过“站点设置 对象”对话框定义站点，站点名称为“经典回顾”，本地站点文件夹设置为JingDian文 件夹。
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“似是故人来--梅艳芳”网页
（4）制作导航部分 2）点击“新建CSS规则”按钮，打开“新建CSS规则”对话框，默认设置，点击“确定” 按钮，打开“#Nav的CSS规则定义”对话框。 3）在“方框”中设置“Width”为700px、“Height”为24x。在“分类”中选择“背景” 项，设置“Background-color”为“#555555”。在“分类”中选择“区块”项，设置 “Text-align”为“center”，两次点击“确定”按钮，插入Div。 4）4）将默认的文字删除，切换到代码视图，将光标定位在<div id=“ Nav”></div>标签中 间，点击菜单“插入”→“项目列表”命令，插入列表，再点击菜单“插入”→“列表项” 命令，插入列表。将列表项标签<li></li>复制6次，并在每个<li></li>标签中输入文字素材 中的对应导V+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 1）插入一个Div，设置如图所示，在“插入”项中选择“在标签后”、“<div id=’Top’>”， 在“ID”中输入“Main”。
7.15
第7章 DIV+CSS布局网页
7.9
第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部分在网页中的效果如图所示。。
（6）制作左侧内容部分 2）为ID为“Content”的Div创建ID选择器规则，并在“方框”中设置“Width”为479px、 “Height”为345px，取消“Padding”中的“全部相同”复选框的对勾，设置“Right”为10 px，“Bottom”为10 px，“Left”为10px。 3）在“类型”中选择“类型”项设置“font-family”为宋体、“font-size”为13px、 “color”为#000000、“line-height”为25px。 4）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。
7.16
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“似是故人来--梅艳芳”网页
（5）制作网页左侧标题部分 4）为ID为“Main-left”的Div创建ID选择器规则，并在“方框”中设置“Width”为500px、 “Height”为400px、“Float”为left，在“分类”中选择“背景”项，设置“Backgroundcolor”为“#d6d6d6”。 5）将默认的文字删除，插入一个Div，设置如图7-79所示，在“插入”项中选择“在标签 开始后”、“<div id=’Main-left’>”，在“ID”中输入“Title”。
7.4
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（3）制作Banner部分 3）创建*标签选择器规则。在“选择器”窗格中添加选择器“*”，并选中，将“属性” 窗格切换到布局属性，设置“margin”的值为0px，“padding”的值为0px。
7.3
第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.2.1 案例制作：“经典回顾”网页
（6）制作左侧内容部分 1）插入一个Div，设置如图所示，在“插入”项中选择“在标签后”、“<div id=’ Title’>”，在“ID”中输入“Content”。
7.20
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
7.5
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（3）制作Banner部分 4）将“属性”窗格切换到边框属性，设置“border”的值为0px。
7.6
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
7.13
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 8）在“选择器”窗格中添加伪锚记选择器“a.nav:hover”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#FF0004、“fontweight”为“bold”、“text-decoration”为“none”。 9）在“选择器”窗格中添加伪锚记选择器“a.nav:acitve”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#FF0004、“fontweight”为“bold”、“text-decoration”为“underline”。 10）将“属性”面板切换至CSS属性状态，选择“网站首页”，在“目标规则”中选择 “nav”，应用CSS规则，同样的方法为“篇章目录”、“名家评价”、“后世影响”、 “经典篇章”、“成书过程”和“联系我们”应用“nav”CSS规则。
第7章 DIV+CSS布局网页
学习目标
❖掌握Div的概念与插入Div的方法。 ❖掌握块级元素与行内元素的概念与区别。 ❖能够实现Div之间的嵌套。 ❖掌握盒模型的概念及组成。 ❖掌握Div的几种定位方式。 ❖掌握DIV+CSS布局网页的思路。 ❖熟练计算各Div的参数。 ❖能够根据需要合理创建CSS规则。 ❖能够熟练使用DIV+CSS布局网页。
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 2）为ID为“Main”的Div创建ID选择器规则，并在“方框”中设置“Width”为700px、 “Height”为400px。 3）将默认的文字删除，插入一个Div，设置如图7-78所示，在“插入”项中选择“在标签 开始后”、“<div id=’Main’>”，在“ID”中输入“Main-left”。
7.8
第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.18
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 9）将默认的文字删除，输入文字素材中的标题文字“论语 （中国儒家经典）”，左侧标 题部分在网页中的效果如图所示。
7.19
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页