欢迎来到天天文库
浏览记录
ID：11577203
大小：2.84 MB
页数：64页
时间：2018-07-12
《dreamweaver cs6网页设计案例教程 第2版 教学课件 ppt 作者 主编 王春红 王瑾瑜 模块7使用div css布局并美化网页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、十二五职业教育国家规划教材网页设计案例教程-----模块七任务一认识CSS的基础概念任务二如何用CSS布局任务三纵向导航菜单及二级弹出菜单模块七---使用div+CSS布局并美化网页模块介绍：DIV+CSS的标准叫法应是XHTML+CSS，是一种网页布局方法，通过它可以实现网页页面内容与表现相分离，即CSS在网页制作开始时，可以先设定一些常用标签，如颜色、字体大小、框线粗细等，从而不用反复写入同样的标签。本模块通过对DIV+CSS的基本概念的学习，结合实例的讲解，来掌握其使用方法。模块七—使用div+CSS布局并美化网页任务一认识CSS的基础概念模块介绍：CSS是层叠样式表，用于定义HTML
2、元素的显示形式。由div＋CSS布局的且结构良好的网页可以通过CSS定义成任何外观，在任何网络设备上以任何外观形式表现出来，而且用div＋CSS布局构建的网页能够简化代码，加快显示速度。所以学好div＋CSS，首先要摒弃传统意义的表格(Table)布局方式，采用层(DIV)布局，并且使用层叠样式表(CSS)来实现网页页面的外观。从而使网站浏览者有更好的体验。模块七—使用div+CSS布局并美化网页子任务1了解CSS样式加载CSS样式有以下四种：外部样式：把CSS单独写到一个CSS文件内，然后在源代码中以link方式链接。3、t"type="text/CSS"/>内部样式：以结尾，写在源代码的head标签内。模块七—使用div+CSS布局并美化网页行内样式：是在标签内以style标记的，且只针对于标签内的元素，因其没有和内容相分离，所以不建议使用。导入样式：是以@importurl标记所链接的外部样式表，它一般常用在另一个样式表内部。模块七—使用div+CSS布局并美化网页子任务2了解CSS优先级CSS优先级：是指CSS样式在浏览器中被解析的优先顺序。id优先级高于class后面的样式覆盖前面的样式指定的样式高于4、继承的样式行内样式高于内部样式或外部样式模块七—使用div+CSS布局并美化网页子任务3了解CSS盒模式模块七—使用div+CSS布局并美化网页任务二如何用CSS布局模块介绍：使用CSS进行布局时，要忘掉行和列（运用表格时的一种重要的观念）。但是，可以把一个标签当成一个表格单元。而标签就是把所需内容定位在网页区域上的一个逻辑位置。此外，CSS设计经常把一个div嵌套在另一个div里面，就像把表格嵌套在表格里面而获得特定的效果一样。模块七—使用div+CSS布局并美化网页子任务1如何布置单限定宽度的网页1.插入DIV标签步骤１执行【文件】→【新建】命令，新建网页文件。步骤２5、选择菜单栏【插入】→【布局对象】→【DIV标签】命令，如图7-1所示。图7-1模块七—使用div+CSS布局并美化网页步骤３在打开的对话框中，在ID项中给div建一个名，叫TEST7-1（可根据需要命名）。2.新建CSS规则步骤１选择要建CSS规则的DIV步骤２在“CSS样式”面板上，单击“新建CSS规则”按钮，如图7-2所示。图7-2模块七—使用div+CSS布局并美化网页单击后出现“新建CSS规则”面板，如图7-3所示。图7-3模块七—使用div+CSS布局并美化网页步骤3单击确定按钮，出现“#test7-1的CSS规则定义”面板。在“#test7-1的CSS规则定义”面板中选择“分类”6、列表中“方框”选项，并设定宽为300、高为200。再在“分类”列表中选择“背景”，设定背景颜色为#F90（该值可任选），单击“确定”按钮。步骤4执行【文件】→【保存】命令，保存文件。单击“预览”按钮，查看在浏览器中的显示效果，这就是一列限定宽度。模块七—使用div+CSS布局并美化网页1.两列自适应宽度的网页步骤１执行【文件】→【新建】命令，新建网页文件。步骤２插入一个DIV标签，ID项命名left-div。再插入一个DIV标签，ID项命名right-main。插入DIV标签后，在设计视图中显示如图7-4所示。图7-4子任务２如何布置多列宽度的网页模块七—使用div+CSS布局并美化网页步骤7、3选择“left-div”，单击“新建CSS规则”。在“新建CSS规则”窗口中，单击“确定”按钮后，在出现的“#left-div的CSS规则定义”窗口中选择“方框”，键入宽（Width）值为150px，高（Height）值为300px，浮动（float）为左对齐。上述数值改变后，在设计视图中显示如图7-5所示。图7-5模块七—使用div+CSS布局并美化网页步骤4选择“right-main”，单击“新建CSS 当前文档最多预览五页，下载文档查看全文 侵权申诉 举报 1 1 2 3 4 5 / 64 此文档下载收益归作者所有 下载文档 当前文档最多预览五页，下载文档查看全文 点击下载本文档 版权提示 下载文档 举报 温馨提示： 1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。 2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。 3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。 4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。
3、t"type="text/CSS"/>内部样式：以结尾，写在源代码的head标签内。模块七—使用div+CSS布局并美化网页行内样式：是在标签内以style标记的，且只针对于标签内的元素，因其没有和内容相分离，所以不建议使用。导入样式：是以@importurl标记所链接的外部样式表，它一般常用在另一个样式表内部。模块七—使用div+CSS布局并美化网页子任务2了解CSS优先级CSS优先级：是指CSS样式在浏览器中被解析的优先顺序。id优先级高于class后面的样式覆盖前面的样式指定的样式高于
4、继承的样式行内样式高于内部样式或外部样式模块七—使用div+CSS布局并美化网页子任务3了解CSS盒模式模块七—使用div+CSS布局并美化网页任务二如何用CSS布局模块介绍：使用CSS进行布局时，要忘掉行和列（运用表格时的一种重要的观念）。但是，可以把一个
5、选择菜单栏【插入】→【布局对象】→【DIV标签】命令，如图7-1所示。图7-1模块七—使用div+CSS布局并美化网页步骤３在打开的对话框中，在ID项中给div建一个名，叫TEST7-1（可根据需要命名）。2.新建CSS规则步骤１选择要建CSS规则的DIV步骤２在“CSS样式”面板上，单击“新建CSS规则”按钮，如图7-2所示。图7-2模块七—使用div+CSS布局并美化网页单击后出现“新建CSS规则”面板，如图7-3所示。图7-3模块七—使用div+CSS布局并美化网页步骤3单击确定按钮，出现“#test7-1的CSS规则定义”面板。在“#test7-1的CSS规则定义”面板中选择“分类”
6、列表中“方框”选项，并设定宽为300、高为200。再在“分类”列表中选择“背景”，设定背景颜色为#F90（该值可任选），单击“确定”按钮。步骤4执行【文件】→【保存】命令，保存文件。单击“预览”按钮，查看在浏览器中的显示效果，这就是一列限定宽度。模块七—使用div+CSS布局并美化网页1.两列自适应宽度的网页步骤１执行【文件】→【新建】命令，新建网页文件。步骤２插入一个DIV标签，ID项命名left-div。再插入一个DIV标签，ID项命名right-main。插入DIV标签后，在设计视图中显示如图7-4所示。图7-4子任务２如何布置多列宽度的网页模块七—使用div+CSS布局并美化网页步骤
7、3选择“left-div”，单击“新建CSS规则”。在“新建CSS规则”窗口中，单击“确定”按钮后，在出现的“#left-div的CSS规则定义”窗口中选择“方框”，键入宽（Width）值为150px，高（Height）值为300px，浮动（float）为左对齐。上述数值改变后，在设计视图中显示如图7-5所示。图7-5模块七—使用div+CSS布局并美化网页步骤4选择“right-main”，单击“新建CSS
此文档下载收益归作者所有
