DREAMWEAVERcs6模块7使用DIV+CSS布局并美化网页
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
模块七---使用div+CSS布局并美 化网页
模块介绍： DIV+CSS的标准叫法应是XHTML+CSS，是一种
网页布局方法，通过它可以实现网页页面内容与 表现相分离，即CSS在网页制作开始时，可以先 设定一些常用标签，如颜色、字体大小、框线粗 细等，从而不用反复写入同样的标签。
本模块通过对DIV+CSS的基本概念的学习，结 合实例的讲解，来掌握其使用方法。
<link href="layout.CSS" rel="style sheet" type="text/CSS" />
内部样式：以<style>开头，</style>结尾，写在源 代码的head标签内。
<style> h1{ color:#000;}</style>
模块七—使用div+CSS布局并美化网页
顺序。
id优先级高于class 后面的样式覆盖前面的样式 指定的样式高于继承的样式 行内样式高于内部样式或外部样式
模块七—使用div+CSS布局并美化网页
子任务3 了解CSS盒模式
模块七—使用div+CSS布局并美Βιβλιοθήκη Baidu网页
任务二 如何用CSS布局 模块介绍：
使用CSS进行布局时，要忘掉行和列（运用 表格时的一种重要的观念）。但是，可以把一个 <div>标签当成一个表格单元。而<div>标签就是 把所需内容定位在网页区域上的一个逻辑位置。 此外，CSS设计经常把一个div嵌套在另一个div 里面，就像把表格嵌套在表格里面而获得特定的 效果一样。
图7-7
模块七—使用div+CSS布局并美化网页
同上，在“# right-main的CSS规则定义”中修改 背景颜色为#FC6。执行【文件】→【保存】命令，保存 文件。
最后在浏览器中预览如图7-8所示。
图7-8
模块七—使用div+CSS布局并美化网页
2.两列固定宽度的网页 通过对两列自适应宽度网页的设置方法的学习，
模块七—使用div+CSS布局并美化网页
任务一 认识CSS的基础概念 模块介绍：
CSS是层叠样式表，用于定义HTML元素的显 示形式。
由div＋CSS布局的且结构良好的网页可以通 过CSS定义成任何外观，在任何网络设备上以任 何外观形式表现出来，而且用div＋CSS布局构建 的网页能够简化代码，加快显示速度。
图7-6
模块七—使用div+CSS布局并美化网页
步骤5 为了便于查看， 还可以设置背景色。选择 “left-div”，在“属性”面板中选择“编辑规则”， 如图7-7所示。在出现的“# left-div的CSS规则定义” 窗口中选择“背景”，在背景色（Background-color） 中选择任意颜色，这里键入#F60。
行内样式：是在标签内以style标记的，且只针对于 标签内的元素，因其没有和内容相分离，所以不建议使 用。
导入样式：是以@import url标记所链接的外部样式 表，它一般常用在另一个样式表内部。
模块七—使用div+CSS布局并美化网页
子任务2 了解CSS优先级 CSS优先级：是指CSS样式在浏览器中被解析的优先
步骤4 执行【文件】→【保存】命令，保存文件。单 击“预览”按钮，查看在浏览器中的显示效果，这就是 一列限定宽度。
模块七—使用div+CSS布局并美化网页
子任务２ 如何布置多列宽度的网页 1.两列自适应宽度的网页 步骤１ 执行【文件】→【新建】命令，新建网页文 件。 步骤２ 插入一个DIV标签，ID项命名left-div。再插 入一个DIV标签，ID项命名right-main。 插入DIV标签后，在设计视图中显示如图7-4所示。
图7-5
模块七—使用div+CSS布局并美化网页
步骤4 选择“right-main”，单击“新建CSS规则”。 在“新建CSS规则”窗口中，单击“确定”按钮后，在 出现的“# right-main的CSS规则定义”窗口中选择 “方框”，键入宽（Width）值为70%，高（Height） 值为300px，外边距（Margin）里左（Left）值为 150px，此步骤同步骤3。上述数值改变后，在设计视 图中显示如图7-6所示。
图7-2
模块七—使用div+CSS布局并美化网页
单击后出现“新建CSS规则”面板，如图7-3所示。
图7-3
模块七—使用div+CSS布局并美化网页
步骤3 单击确定按钮，出现“#test7-1的CSS规则定义” 面板。在“#test7-1的CSS规则定义”面板中选择“分 类”列表中“方框”选项，并设定宽为300、高为200。 再在“分类”列表中选择“背景”，设定背景颜色为 #F90（该值可任选），单击“确定”按钮。
模块七—使用div+CSS布局并美化网页
子任务1 如何布置单限定宽度的网页
1.插入DIV标签
步骤１ 执行【文件】 →【新建】命令，新建 网页文件。 步骤２ 选择菜单栏 【插入】→【布局对象】 →【DIV标签】命令， 如图7-1所示。
图7-1
模块七—使用div+CSS布局并美化网页
步骤３ 在打开的对话框中，在ID项中给div建一 个名，叫TEST7-1（可根据需要命名）。 2.新建CSS规则 步骤１ 选择要建 CSS规则的DIV 步骤２ 在“CSS样 式”面板上，单击 “新建CSS规则”按 钮，如图7-2所示。
图7-4
模块七—使用div+CSS布局并美化网页
步骤3 选择“left-div”，单击“新建CSS规则” 。 在“新建CSS规则”窗口中， 单击“确定”按钮后， 在出现的“# left-div的CSS规则定义”窗口中选择 “方框”，键入宽（Width）值为150px，高（Height） 值为300px，浮动（float）为左对齐。上述数值改变 后，在设计视图中显示如图7-5所示。
所以学好div＋CSS，首先要摒弃传统意义的 表格(Table)布局方式，采用层(DIV)布局，并且 使用层叠样式表(CSS)来实现网页页面的外观。 从而使网站浏览者有更好的体验。
模块七—使用div+CSS布局并美化网页
子任务1 了解CSS样式 加载CSS样式有以下四种： 外部样式：把CSS单独写到一个CSS文件内，然后 在源代码中以link方式链接。
模块介绍： DIV+CSS的标准叫法应是XHTML+CSS，是一种
网页布局方法，通过它可以实现网页页面内容与 表现相分离，即CSS在网页制作开始时，可以先 设定一些常用标签，如颜色、字体大小、框线粗 细等，从而不用反复写入同样的标签。
本模块通过对DIV+CSS的基本概念的学习，结 合实例的讲解，来掌握其使用方法。
<link href="layout.CSS" rel="style sheet" type="text/CSS" />
内部样式：以<style>开头，</style>结尾，写在源 代码的head标签内。
<style> h1{ color:#000;}</style>
模块七—使用div+CSS布局并美化网页
顺序。
id优先级高于class 后面的样式覆盖前面的样式 指定的样式高于继承的样式 行内样式高于内部样式或外部样式
模块七—使用div+CSS布局并美化网页
子任务3 了解CSS盒模式
模块七—使用div+CSS布局并美Βιβλιοθήκη Baidu网页
任务二 如何用CSS布局 模块介绍：
使用CSS进行布局时，要忘掉行和列（运用 表格时的一种重要的观念）。但是，可以把一个 <div>标签当成一个表格单元。而<div>标签就是 把所需内容定位在网页区域上的一个逻辑位置。 此外，CSS设计经常把一个div嵌套在另一个div 里面，就像把表格嵌套在表格里面而获得特定的 效果一样。
图7-7
模块七—使用div+CSS布局并美化网页
同上，在“# right-main的CSS规则定义”中修改 背景颜色为#FC6。执行【文件】→【保存】命令，保存 文件。
最后在浏览器中预览如图7-8所示。
图7-8
模块七—使用div+CSS布局并美化网页
2.两列固定宽度的网页 通过对两列自适应宽度网页的设置方法的学习，
模块七—使用div+CSS布局并美化网页
任务一 认识CSS的基础概念 模块介绍：
CSS是层叠样式表，用于定义HTML元素的显 示形式。
由div＋CSS布局的且结构良好的网页可以通 过CSS定义成任何外观，在任何网络设备上以任 何外观形式表现出来，而且用div＋CSS布局构建 的网页能够简化代码，加快显示速度。
图7-6
模块七—使用div+CSS布局并美化网页
步骤5 为了便于查看， 还可以设置背景色。选择 “left-div”，在“属性”面板中选择“编辑规则”， 如图7-7所示。在出现的“# left-div的CSS规则定义” 窗口中选择“背景”，在背景色（Background-color） 中选择任意颜色，这里键入#F60。
行内样式：是在标签内以style标记的，且只针对于 标签内的元素，因其没有和内容相分离，所以不建议使 用。
导入样式：是以@import url标记所链接的外部样式 表，它一般常用在另一个样式表内部。
模块七—使用div+CSS布局并美化网页
子任务2 了解CSS优先级 CSS优先级：是指CSS样式在浏览器中被解析的优先
步骤4 执行【文件】→【保存】命令，保存文件。单 击“预览”按钮，查看在浏览器中的显示效果，这就是 一列限定宽度。
模块七—使用div+CSS布局并美化网页
子任务２ 如何布置多列宽度的网页 1.两列自适应宽度的网页 步骤１ 执行【文件】→【新建】命令，新建网页文 件。 步骤２ 插入一个DIV标签，ID项命名left-div。再插 入一个DIV标签，ID项命名right-main。 插入DIV标签后，在设计视图中显示如图7-4所示。
图7-5
模块七—使用div+CSS布局并美化网页
步骤4 选择“right-main”，单击“新建CSS规则”。 在“新建CSS规则”窗口中，单击“确定”按钮后，在 出现的“# right-main的CSS规则定义”窗口中选择 “方框”，键入宽（Width）值为70%，高（Height） 值为300px，外边距（Margin）里左（Left）值为 150px，此步骤同步骤3。上述数值改变后，在设计视 图中显示如图7-6所示。
图7-2
模块七—使用div+CSS布局并美化网页
单击后出现“新建CSS规则”面板，如图7-3所示。
图7-3
模块七—使用div+CSS布局并美化网页
步骤3 单击确定按钮，出现“#test7-1的CSS规则定义” 面板。在“#test7-1的CSS规则定义”面板中选择“分 类”列表中“方框”选项，并设定宽为300、高为200。 再在“分类”列表中选择“背景”，设定背景颜色为 #F90（该值可任选），单击“确定”按钮。
模块七—使用div+CSS布局并美化网页
子任务1 如何布置单限定宽度的网页
1.插入DIV标签
步骤１ 执行【文件】 →【新建】命令，新建 网页文件。 步骤２ 选择菜单栏 【插入】→【布局对象】 →【DIV标签】命令， 如图7-1所示。
图7-1
模块七—使用div+CSS布局并美化网页
步骤３ 在打开的对话框中，在ID项中给div建一 个名，叫TEST7-1（可根据需要命名）。 2.新建CSS规则 步骤１ 选择要建 CSS规则的DIV 步骤２ 在“CSS样 式”面板上，单击 “新建CSS规则”按 钮，如图7-2所示。
图7-4
模块七—使用div+CSS布局并美化网页
步骤3 选择“left-div”，单击“新建CSS规则” 。 在“新建CSS规则”窗口中， 单击“确定”按钮后， 在出现的“# left-div的CSS规则定义”窗口中选择 “方框”，键入宽（Width）值为150px，高（Height） 值为300px，浮动（float）为左对齐。上述数值改变 后，在设计视图中显示如图7-5所示。
所以学好div＋CSS，首先要摒弃传统意义的 表格(Table)布局方式，采用层(DIV)布局，并且 使用层叠样式表(CSS)来实现网页页面的外观。 从而使网站浏览者有更好的体验。
模块七—使用div+CSS布局并美化网页
子任务1 了解CSS样式 加载CSS样式有以下四种： 外部样式：把CSS单独写到一个CSS文件内，然后 在源代码中以link方式链接。