（中职）电子商务网页设计项目七 使用CSS控制页面元素课件

1、YCF正版可修改PPT（中职）电子商务网页设计项目七 使用CSS控制页面元素ppt课件使用CSS设置页面、文本、段落的格式1任务分析本任务是使用Dreamweaver CS5中的样式面板,创建嵌入式CSS样式表,分别对网页的页面边距、文字、段落等格式进行控制,详细设置如下:(1)设置页面的边界为“0”,去掉网页上边缘与浏览器之间的空白;(2)设置网页中间正文部分的文字效果:宋体、13像素、灰色、1.5倍行高;(3)设置网页中间正文部分的左、右填充为“20”,上填充为“10”,使正文与所在单元格的边缘之间产生一定间距;(4)将正文中后5行文字设置为列表,并设置列表部分的效果:2倍行高、添加自定义

2、的项目符号图像。相关知识1. CSS2. CSS样式面板3. CSS的创建及分类4. CSS规则的设置5. CSS使用规则任务实施(1)新建站点,将project07文件夹下的task01文件夹复制到本地磁盘下站点目录project07中,在Dreamweaver CS5软件中打开网页文件index.html,进行下列操作:在CSS样式面板的右下角,单击“新建CSS规则”按钮,进入“新建CSS规则”对话框。在“规则定义”区域中,选择“仅限该文档”;而在“选择器类型”区域中,则选择“标签”,并在“标签”下拉框中选择“body”标签,单击“确定”,即可进入“CSS规则定义”对话框。(2)选择“方框

3、”选项卡,在Margin(边界)区域中,保持勾选“全部相同”,然后设置边界全部为0px(像素),单击“确定”。(3)由于上述操作是对HTML中的标签“body”进行了重新定义,因此属性会自动被运用到网页中去。浏览网页,即可以看到网页上端的空白区消失了。(4)单击“新建CSS规则”按钮,进入“新建CSS规则”对话框。在“规则定义”区域中选择“仅限该文档”;在“选择器类型”区域中选择“类”,并在名称框中输入类名“text”,单击“确定”,进入“CSS规则定义”对话框。(5)选择“类型”选项卡,设置Font-family(字体)为宋体,Font-size(字体大小)为13px,Line-height

4、(行高)为1.5,Color(字体颜色)为#666666(灰色)。(6)选择“方框”选项卡,在Padding(填充)区域中,取消勾选“全部相同”,并设置Top(上间距)为10px,Left(左间距)、Right(右间距)均为20px,单击“确定”。(7)在网页中,选中正文所在的单元格(8)在其“属性”面板中,选择“样式”下拉框,将类“text”应用上去。(9)浏览网页,会发现页面中间的文本的字体、字号、颜色、行距及与单元格周围的间距都发生了相应的改变。(10)单击“新建CSS规则”按钮,进入“新建设CSS规则”对话框。在“规则定义”区域中选择“仅限该文档”;在“选择器类型”区域中选择“类”,并

5、在“选择器名称”框中输入类名“list”,单击“确定”,进入“CSS规则定义”对话框。(11)选择“类型”选项卡,设置Line-height(行高)为“2倍行高”。(12)选择“列表”选项卡,单击“List-style-image(项目符号图像)”右侧的“浏览”按钮,进入当前任务图片所在的文件夹目录,选择图像“dot.gif”,将List-style-Position(列表的位置)设置为“outside(外)”,单击“确定”。(13)在网页中,选中需要设置为列表的内容的内容文字,在“属性”面板中单击“项目列表”按钮,将这部分文本先设置为列表格式。(14)在“属性”面板中,选择“样式”下拉框,将

6、类“list”应用至所选的内容上去。(15)浏览网页,即可看到该部分文本内容的行距、项目符号图像等都发生了相应改变。使用CSS设置表格元素外观2任务分析本任务使用Dreamweaver CS5中的样式面板,创建外部CSS样式表,对页面中的表格、单元格等元素的外观进行美化,详细设置如下:(1)顶部导航条中八个单元格内的文字效果设置:华文新魏、22像素、白色(#FFFFFF)、居中;(2)顶部导航条单元格的背景图片设置为自定义的小图像,并使用其重复的属性,让小图像重复,制作出整体的导航背景效果;(3)顶部导航条单元格的边框效果设置:凹陷、1像素、灰色(#666666)。任务实施(1)新建站点,将p

7、roject07文件夹下的task02文件夹复制到本地磁盘下的站点目录中,在Dreamweaver CS5软件中打开网页文件index.html,进行下列操作:单击“新建CSS规则”按钮,进入“新建CSS规则”对话框, 在“规则定义”区域中选择“新建样式表文件”,在“选择器类型”区域中选择“类”,并在名称中输入类名“navigate”,单击“确定”。(2)进入“将样式表文件另存为”对话框,打开当前项目中选择需要存放样式表的文件目录“project07task02style”,并给样式表起名为“mycss”,单击“保存”,即可进入“CSS规则定义”对话框。(3)选择“类型”选项卡,设置Front

8、-family(字体)为华文新魏,Font-size(字号)为22像素,Color(颜色)为#FFFFFF(白色) 。(4)选择“背景”选项卡,将背景图像设置为文件夹task01images中的图像“navigate.jpg”,Background-repeat(重复项)设为repeat(重复) 。(5)选择“边框”选项卡,将Text-align(文本对齐方式)设为Center(居中)。(6)选择“边框”选项卡,将边框的Style(样式)、Width(宽度)、Color(颜色)设置为“全部相同”,样式为Inset(凹陷),宽度为1px,颜色为#666666(灰色), 单击“确定”。(7)在网页

9、中,选中导航条表格中的所有单元格。(8)在“属性”面板中,选择“样式”下拉框,将“navigate”应用至所选的单元格上。(9)浏览网页,会发现导航条中文本的字体、字号、颜色、表格背景、边框等均发生相应改变。使用CSS设置表单项目外观3任务分析本任务使用Dreamweaver CS5中的样式面板,创建CSS样式表,对页面中各种表单项目的外观进行美化,详细设置如下:(1)表单中两个按钮的文字效果设置:黑体、16像素、黑色、居中;(2)表单中两个按钮的背景图像设置:自定义图像、不重复;(3)表单中两个按钮的大小设置:宽90像素、高30像素;(4)表单中两个按钮的边框宽度设置:0像素;(5)表单中两

10、个文本域的大小设置:宽100像素、高20像素;(6)表单中两个本文域的边框设置:实线、1像素、灰色(#999999)。任务实施(1)新建站点,将project07文件夹下的task03文件夹复制到本地磁盘下的站点目录中,在Dreamweaver CS5软件中打开网页文件index.html,进行下列操作:单击“新建CSS规则”按钮,进入“新建CSS规则”对话框,在“规则定义”区域中选择“mycss.css”,在“选择器类型”区域中选择“类”,并在“选择器名称”框中输入类名“mybutton”,单击“确定”,进入“CSS规则定义”对话框。(2)选择“类型”选项卡,设置字体为黑体,大小为16px(

11、像素),颜色为黑色(#000000)。(3)选择“背景”选项卡,将背景图像设置为文件夹project07/task03/images中的图像文件“mybutton.png”,重复项设为no-repeat(不重复)。(4)选择“区块”选项卡,设置文本对齐方式为Center(居中)。(5)选择“方框”选项卡,设置宽为90px(像素)、高为30px(像素)。(6)选择“边框”选项卡,保持勾选“全部相同”,并将宽度设置为0px(像素),如图 ,单击“确定”。(7)在网页中,选中左侧表单中的按钮“用户注册”。(8)在“属性”面板中,选择“样式”下拉框,将“mybutton”样式应用至所选的按钮上去。(9

12、)同样,在选中表单中的“用户登录”按钮,将“mybutton”样式应用上去。(10)浏览网页,会发现左侧表单中的两个按钮样式均已发生改变。(11)单击“新建CSS规则”按钮,进入“新建CSS规则”对话框,在“规则定义”区域中选择“mycss.css”,在“选择器类型”区域中选择“类”,并在名称框中输入类名“mytextfield”,单击“确定”,进入“CSS规则定义”对话框。(12)选择“背景”选项卡,将背景色设置为#A2F15C(浅绿色)。(13)选择“方框”选项卡,设置宽为100px(像素)、高为20px(像素)。(14)选择“边框”选项卡,保持勾选“全部相同”,并将Style(样式)设置

13、为solid(实线),Width(宽度)设置为1px(像素),Color(颜色)设置为#999999(灰色),单击“确定”。(15)在网页中,选中“用户名”后面的文本域 。(16)在“属性”面板中选择“样式”下拉框,将“mytextfield”样式应用至所选的文本域上去 。(17)同样,再选中“密码”后面的文本域,将“mytextfield”样式应用上去。(18)浏览网页,会发现左侧表单中的两个文本域的样式均已发生改变 。使用CSS滤镜制作电子商务网页特效请在此输入您的副标题4任务分析本任务使用Dreamweaver CS5中的样式面板,创建CSS滤镜样式,对页面中的文本、图像等对象添加绚丽的

14、效果,详细设置如下:(1)正文标题“惠普HP Pavilion 11-n015tu x360 电脑(能源之星)”的字体效果设置:黑体、20像素、粗体、绿色(#33CC00);并对其添加DropShadow阴影滤镜,设置该滤镜参数为:阴影颜色为灰色(#666666)、水平偏移2像素、垂直偏移2像素、给非透明像素建立可见阴影。(2)网站标题“成就未来”的字体效果设置:华文琥珀、72像素、鲜绿色(#009900);对其添加Glow发光滤镜参数为:发光颜色为红色(CE0B2B)、发光强度为15像素。相关知识1. CSS滤镜CSS滤镜可以给网页中的文字、图像等元素添加特殊的效果,如可以让素材元素发光、反

15、转、透明、有阴影、出现波纹等。2.不同滤镜的效果不同的滤镜可以让元素呈现不一样的奇妙效果,而这些效果具体都是通过各个滤镜自带的参数来实现的。(1)Alpha滤镜:制作透明效果(2)Blur滤镜:制作模糊效果(3)Glow滤镜:制作发光效果(4)Shadow滤镜:制作阴影效果,可以指定阴影的方向(5)DropShadow滤镜:制作阴影效果,可以指定阴影的偏移量(6)Wave滤镜:制作波纹效果(7)FlipV滤镜:制作垂直翻转效果任务实施(1)新建站点,将project07文件夹下的task05文件夹复制到本地磁盘下的站点目录中,在Dreamweaver CS5软件中打开网页文件index.htm

16、l,进行下列操作:单击“新建CSS规则”按钮,进入“新建CSS规则”对话框 ,在“规则定义”区域中选择“mycss.css”,在“选择器类型”区域中选择“类”,在“选择器名称”框中输入类名“biaoti”,单击“确定”,进入“CSS规则定义”对话框。(2)选择“类型”选项卡,设置字体为黑体,大小为20px(像素),颜色为#33cc00(浅绿色)。(3)选择“扩展”选项卡,在“滤镜器”中设置使用滤镜“DropShadow”,并设置其各项参数分别为“Color=#666666,OffX=2,OffY=2,Positive=1” ,单击“确定”。(4)选中网页上端标题所在的表格 。(5)在“属性”面板中,选择“样式”下拉框,将“biaoti”样式应用至所选的表格上去 。(6)浏览网页,会发现标题变为带阴影的文字了 。(7)新建一个CSS规则,进入“新建CSS规则”对话框 ,在“规则定义”区域中选择“mycss.css”,在“选择器类型”区域中选择“类”,在名称框中输入类名“mybanner”,