《电子商务网页设计》课件项目七 使用CSS控制页面元素.pptx

1、使用使用CSS设置页面、文本、段落的格式设置页面、文本、段落的格式1任务分析任务分析本任务是使用Dreamweaver CS5中的样式面板,创建嵌入式CSS样式表,分别对网页的页面边距、文字、段落等格式进行控制,详细设置如下:(1)设置页面的边界为“0”,去掉网页上边缘与浏览器之间的空白;(2)设置网页中间正文部分的文字效果:宋体、13像素、灰色、1.5倍行高;(3)设置网页中间正文部分的左、右填充为“20”,上填充为“10”,使正文与所在单元格的边缘之间产生一定间距;(4)将正文中后5行文字设置为列表,并设置列表部分的效果:2倍行高、添加自定义的项目符号图像。相关知识相关知识1.CSS2.C

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

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

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

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

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

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

8、ily(字体)为华文新魏,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像素;

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

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

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

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

14、CSS滤镜样式,对页面中的文本、图像等对象添加绚丽的效果,详细设置如下:(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文件夹复制到本地磁盘下的站点目录中,在

16、Dreamweaver CS5软件中打开网页文件index.html,进行下列操作:单击“新建CSS规则”按钮,进入“新建CSS规则”对话框,在“规则定义”区域中选择“mycss.css”,在“选择器类型”区域中选择“类”,在“选择器名称”框中输入类名“biaoti”,单击“确定”,进入“CSS规则定义”对话框。(2)选择“类型”选项卡,设置字体为黑体,大小为20px(像素),颜色为#33cc00(浅绿色)。(3)选择“扩展”选项卡,在“滤镜器”中设置使用滤镜“DropShadow”,并设置其各项参数分别为“Color=#666666,OffX=2,OffY=2,Positive=1”,单击“

17、确定”。(4)选中网页上端标题所在的表格。(5)在“属性”面板中,选择“样式”下拉框,将“biaoti”样式应用至所选的表格上去。(6)浏览网页,会发现标题变为带阴影的文字了。(7)新建一个CSS规则,进入“新建CSS规则”对话框,在“规则定义”区域中选择“mycss.css”,在“选择器类型”区域中选择“类”,在名称框中输入类名“mybanner”,单击“确定”,进入“CSS规则定义”对话框。(8)选择“类型”选项卡,设置字体为华文琥珀,大小为72px(像素),颜色为#009900(鲜绿色)。(9)选择“扩展”选项卡,在“过滤器(Filter)”中设置使用滤镜“Glow”,并设置其各项参数分别为“Color=#ce0b2b,Strength=15”,单击“确定”。(10)选中网页顶端大标题所在的表格。(11)在“属性”面板中,选择“样式”下拉框,将“mybanner”样式应用至所选的表格上去。(12)浏览网页,会发现网页顶端的大标题文字变成发光的文字。