网页设计与制作任务驱动式实用教程单元使用CSS布局与美化网页.doc
《网页设计与制作任务驱动式实用教程单元使用CSS布局与美化网页.doc》由会员分享,可在线阅读,更多相关《网页设计与制作任务驱动式实用教程单元使用CSS布局与美化网页.doc(15页珍藏版)》请在三一文库上搜索。
1、单元8使用CSS布局与美化网页单元8使用CSS布局与美化网页【教学导航】教学目标(1)学会设计页面的布局结构(2)学会创建页面布局样式(3)学会创建美化页面元素的样式(4)学会插入Div标签对网页的页面进行布局(5)学会创建代码片断,且在网页插入已有的代码片断(6)学会在使用DivCSS布局的网页中输入文字和插入各种页面元素本单元重点(1)设计页面的布局结构(2)创建页面的布局样式(3)创建美化页面元素的样式(4)插入Div标签对网页的页面进行布局本单元难点(1)设计页面的布局结构(2)插入Div标签对网页的页面进行布局教学方法任务驱动法、分组讨论法、分析探究法、四步训练法课时建议8课时(含考
2、核评价)【操作准备】1新建一个本地站点(1)创建所需的文件夹,拷贝所需的资源(2)启动Dreamweaver CS6(3)创建本地站点2新建网页0801.html(1)新建一个网页文档(2)设置网页标题(3)保存该网页。【引导训练】【任务8-1】使用CSS布局与美化“黄山游”网页本单元“引导训练”的任务卡如表8-1所示。表8-1单元8“引导训练”任务卡任务编号8-1任务名称使用CSS布局与美化“黄山游”网页网页主题山岳游计划工时180min网页制作任务描述(1)设计网页的页面布局结构(2)创建网页的页面布局样式(3)创建美化页面元素的样式(4)插入Div标签,对网页的页面进行布局(5)新建导航
3、栏代码片断、表单代码片断和表格代码片断(6)在页面各个区块中输入文字或插入页面元素网页布局结构分析(1)使用DivCSS布局网页,如彩图1所示(2)文字型导航栏(位于网页顶部和网页底部两个位置)网页色彩搭配分析网页中文字的颜色:#333333#999#203F78,链接颜色:#203F78,变换图像链接颜色:#FF7700,已访问链接颜色:#9900CC,活动链接颜色:#FF7700网页组成元素分析主要包括文字、图像、SWF动画、表单、表格、项目列表、导航栏等网页元素任务实现流程分析设计网页的页面布局结构创建网页的页面布局样式创建美化页面元素的样式插入Div标签,对网页的页面进行布局新建代码片
4、断在页面各个区块中输入文字或插入页面元素配盘素材导引原始文件位置:startUnit08task08-1最终文件位置:resultUnit08task08-1本单元“引导训练”的任务跟踪卡如表8-2所示。表8-2单元8“引导训练”任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态本单元“引导训练”网页index0801的整体浏览效果如彩图1所示。【任务8-1-1】网页页面的布局设计【任务描述】(1)对网页0801.html进行整体布局设计,纵向分为5个区块,分别用于插入动画、设置导航栏、设置分隔栏、展示主体内容和显示版权信息。(2)对中部的主体内容区块进行详细布局设计,将主体内容区块分
5、为左、右两个区域,左边区域纵向分为6个区块,右边区域纵向分为2个区块。【任务实施】1页面的整体布局设计网页文档0801.html的整体布局示意图如图8-1所示,纵向分为5个区块。图8-1页面整体布局设计示意图网页文档0801.html各区块的功能规划和属性设置如表8-3所示。表8-3网页文档0801.html各区块的功能规划和属性设置区块名称宽高水平对齐方式背景图像或背景颜色功能规划区块1890150水平居中#FFFFFF用于插入动画区块289028水平居中images/g02.gif用于设置导航栏区块38905水平居中images/g04.gif用于分隔导航栏和主体内容区块4890580水平
6、居中images/g05.gif用于展示主体内容区块589075水平居中#F4F5F9用于显示版权信息2页面的局部布局设计网页文档0801.html中部区块4的局部布局示意图如图8-2所示,区块4分为左右两部分,左边的区块4-1宽度为580px,右边的区块4-2宽度为270px。左边的区块4-1纵向分为6个部分,区域4-1-1的高度为25px,其他5个部分的高度为111px。右边的区块4-2纵向分为2个部分,高度分别为95px和485px。图8-2网页文档0801.html中部区块4的局部布局示意图【任务8-1-2】创建页面布局样式【任务描述】定义如表8-4所示的多个样式,这些样式所应用的区块
7、如表8-4所示。表8-4定义的样式名称及其应用的区块定义的样式名称应用的区块定义的样式名称应用的区块w公共样式top区块1menu区块2lin区块3xx区块4link区块5x_left区块4-1x_right区块4-2xl_a区块4-1-1xr_a区块4-2-1xl_b区块4-1-2至区块4-1-6xr_b区块4-2-2各个样式相应的属性设置如表8-5所示。表8-5各个样式相应的属性设置样式名称分类名称对应的属性设置w背景背景颜色:#FFF方框宽:890像素,边界:右:auto、左:auto边框样式右:实线,宽度右:3像素,颜色右:#C2CCD8样式左:实线,宽度左:3像素,颜色左:#C2CC
8、D8top方框高:150像素边框样式上:实线,宽度上:1像素,颜色上:#C2CCD8menu类型字体:宋体,大小:12像素,行高:28像素lin背景背景图像:./images/g04.gif方框高:5像素定位溢出:隐藏xx背景背景图像:./images/g05.gif方框高:580像素link区块文本对齐:居中方框宽:890像素,高:25像素,浮动:左对齐,填充上:8像素,边界:右:auto、左:auto边框样式上:实线,宽度上:1像素,颜色上:#C2CCD8x_left区块显示:内嵌方框宽:610像素,高:580像素,浮动:左对齐定位溢出:隐藏x_rigth方框宽:270像素,高:580像素
9、,浮动:右对齐,填充下:3像素xl_a类型行高:25像素背景背景图像:./images/g10.gif方框宽:595像素,浮动:左对齐,填充上:10像素,填充下:5像素,填充左:10像素定位溢出:隐藏xl_b背景背景图像:./images/g11.gif区块显示:内嵌方框宽:580像素,高:111像素,浮动:左对齐,填充右:15像素,填充左:10像素xr_a背景背景图像:./images/g07.gif,重复:不重复方框宽:250像素,高:95像素,填充左:20像素边框样式下:实线,宽度下:1像素,颜色下:#B4B4B4xr_b类型字体:宋体,大小:12像素,区块显示:内嵌方框宽:270像素,
10、高:485像素,填充上:10像素【任务实施】1样式名称规划网页文档0801.html中各区块应用的样式及其名称如表8-4所示,公共样式w用于控件各个区域的宽度和对齐方式。2创建公共样式w(1)新建样式打开网页文档0801.html,在Dreamweaver CS6主界面中,选择命令【格式】【CSS样式】【新建】,弹出【新建 CSS 规则】对话框。(2)定义样式名称在【新建 CSS 规则】对话框中“选择器类型”下拉列表框中选择“类(可应用于任何HTML元素)”选项,在“选择器名称”下拉列表框中输入该自定义样式的名称“.w”。“规则定义”下拉列表框使用默认选项“(新建样式表文件)”。在【新建 CS
11、S 规则】对话框中单击【确定】按钮,弹出【将样式表文件另存为】对话框,在该对话框确定样式表文件的保存位置及其名称。在【将样式表文件另存为】对话框中单击【保存】按钮,弹出【.w的CSS规则定义】对话框。(3)设置样式属性在【.w的CSS规则定义】对话框中的“分类”列表框中选择“背景”选项,在“背景颜色”文本框中输入“#FFFFFF”。在【.w的CSS规则定义】对话框中的“分类”列表框中选择“方框”选项,在“宽”列表框中输入“890”,单位默认为“像素(px)”。取消“Margin”选项组中的“全部相同”复选框的选中状态,在“右”下拉列表框中选择“自动”,在“左”下拉列表框中选择“自动”,其他的方
12、框属性设置保持其默认值。在【.w的CSS规则定义】对话框中的“分类”列表框中选择“边框”选项,取消“Style”、“Width”和“Color”3个选项组中的“全部相同”复选框的选中状态。在“Style”选项组中“Rigth”列表框中选择“实线”,在“Width”选项组“Right”列表框中输入“3”,单位默认为“像素(px)”,在“Color”选项组“Right”文本框中输入“#C2CCD8”,即设置右框线为“实线”,宽度为3像素,颜色为“#C2CCD8”。以同样的方法设置左框线的“Style”为“实线”,“Width”为“3像素”,“Color”为“#C2CCD8”。在【.w的CSS规则定
13、义】对话框中单击【确定】按钮,关闭该对话框,完成样式w的设置。(4)查看样式的属性设置在Dreamweaver CS6主界面,选择命令【窗口】【CSS样式】,打开【CSS样式】面板,在【CSS样式】面板中单击【全部】选项卡,上方显示当前样式文件style0801.css中的已创建的全部样式,同时在下方显示当前选中样式“.w”的属性。在下方样式的属性列表中可以对属性值进行直接修改,如果单击“添加属性”链接则可以为当前选中样式设置其他属性。(5)查看链接外部样式表的代码切换到【代码】视图,我们发现在标签“”的前面自动插入了一行链接外部样式表的代码,如下所示:3创建样式top(1)显示【CSS样式】
14、面板在Dreamweaver CS6主界面中,选择命令【窗口】【CSS样式】,打开【CSS样式】面板。(2)打开【新建 CSS 规则】对话框在【CSS样式】面板中单击右下角的【新建 CSS 规则】按钮,即可打开【新建 CSS 规则】对话框。(3)选择样式类型和ID标识名称在【新建 CSS 规则】对话框中,在“选择器类型”下拉列表框中选中“ID(仅应用于一个HTML元素)”选项,在“选择器名称”文本框中输入ID标识名称“#top”,在“规则定义”列表框中选择“style0801.css”。(4)设置样式属性在【新建 CSS 规则】对话框中单击【确定】按钮,弹出【#top 的CSS 规则定义】对话
15、框,在该对话框的“方框”选项中设置“Height”为“150像素”。在【#top 的CSS 规则定义】对话框的“边框”选项中设置“上框线”的样式为“实线”,宽度为“3像素”,颜色为“#C2CCD8”。“top”样式设置完成后单击【确定】按钮。4创建样式menu在Dreamweaver CS6主界面中,选择命令【格式】【CSS样式】【新建】,弹出【新建 CSS 规则】对话框。在【新建 CSS 规则】对话框中,“选择器类型”下拉列表框中选择“ID(仅应用于一个HTML元素)”选项,在“选择器名称”文本框中输入ID标识名称“#menu”,在“规则定义”列表框中选择“style0801.css”。在【
16、新建 CSS 规则】对话框中单击【确定】按钮,弹出【#menu 的CSS 规则定义】对话框,在该对话框的“类型”选项中设置字体为“宋体”,大小为“12像素”,行高为“28像素”。【任务8-1-3】创建美化页面元素的样式【任务描述】(1)设置标签body、ul的样式属性。(2)设置超级链接样式a:link、a:visited、a:hover、a:active的属性。(3)创建组合样式“#menu a”、“#menu a:hover”、“.xl_b li”、“.xl_b span”、“.xl_b img”。(4)创建控制文本格式的样式“.xl_b_txt”和“.xl_b_title”。【任务实施】
17、1设置标签样式(1)设置标签body的样式属性在Dreamweaver CS6主界面中,选择命令【格式】【CSS样式】【新建】,弹出【新建 CSS 规则】对话框,在“选择器类型”下拉列表框中选择“标签(重新定义HTML元素)”,在“选择器名称”下拉列表框中选择“body”,“规则定义”选择“style0801.css”。在【新建 CSS 规则】对话框中单击【确定】按钮,弹出【body 的 CSS 规则定义】对话框,在该对话框中设置标签“body”的属性,其属性值如表8-6所示。表8-6标签“body”相应的属性设置标签名称分类名称对应的属性值body类型字体:宋体,大小:12px,颜色:#33
18、3333背景背景图像:./images/g01.gif区块文本对齐:左对齐方框边界上:0pxul方框填充:上、右、下、左均为0,边界:上、右、下、左均为0列表类型:无(2)设置标签ul的属性按照设置标签“body”属性的方法设置标签“ul”属性。2设置超级链接样式在【CSS样式】面板中单击右下角的【新建 CSS 规则】按钮,弹出【新建 CSS 规则】对话框。在“选择器类型”下拉列表框中选择“复合内容(基于选择的内容)”,在“选择器名称”下拉列表框中选择“a:link”,“规则定义”选项对应的列表框选择“style0801.css”。在【新建 CSS 规则】对话框中单击【确定】按钮,弹出【a:l
19、ink 的 CSS 规则定义】对话框,在该对话框中设置超级链接的初始样式“a:link”的属性。以同样的方法设置已访问超级链接的样式“a:visited”、变换图像超级链接(指鼠标停留在超级链接上时,改变超级链接的外观)的样式“a:hover”和活动超级链接的样式“a:active”的属性。3创建组合样式在Dreamweaver CS6主界面中,选择命令【格式】【CSS样式】【新建】,弹出【新建 CSS 规则】对话框,在“选择器类型”下拉列表框中选择“复合内容(基于选择的内容)”,在“选择器名称”下拉列表框中输入组合样式名称“#menu a”,“规则定义”选择“style0801.css”。在
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 任务 驱动 实用教程 单元 使用 CSS 布局 美化
链接地址:https://www.31doc.com/p-8876901.html