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

使用CSS设置页面、文本、段落的格式 1 任务分析 本任务是使用Dreamweaver CS5中的样式面板,创建嵌入式CSS样式表,分别对网页的页面边距、文字、段落等格式进行控制,详细设置如下: (1)设置页面的边界为“0”,去掉网页上边缘与浏览器之间的空白; (2)设置网页中间正文部分的文字效果:宋体、13像素、灰色、1.5倍行高; (3)设置网页中间正文部分的左、右填充为“20”,上填充为“10”,使正文与所在单元格的边缘之间产生一定间距; (4)将正文中后5行文字设置为列表,并设置列表部分的效果:2倍行高、添加自定义的项目符号图像。 相关知识 1. CSS 2. CSS样式面板 3. CSS的创建及分类 4. CSS规则的设置 5. CSS使用规则 任务实施 (1)新建站点,将project07文件夹下的task01文件夹复制到本地磁盘下站点目录project07中,在Dreamweaver CS5软件中打开网页文件index.html,进行下列操作:在CSS样式面板的右下角,单击“新建CSS规则”按钮,进入“新建CSS规则”对话框。在“规则定义”区域中,选择“仅限该文档”;而在“选择器类型”区域中,则选择“标签”,并在“标签”下拉框中选择“body”标签,单击“确定”,即可进入“CSS规则定义”对话框。 (2)选择“方框”选项卡,在Margin(边界)区域中,保持勾选“全部相同”,然后设置边界全部为0px(像素),单击“确定”。 (3)由于上述操作是对HTML中的标签“body”进行了重新定义,因此属性会自动被运用到网页中去。浏览网页,即可以看到网页上端的空白区消失了。 (4)单击“新建CSS规则”按钮,进入“新建CSS规则”对话框。在“规则定义”区域中选择“仅限该文档”;在“选择器类型”区域中选择“类”,并在名称框中输入类名“text”,单击“确定”,进入“CSS规则定义”对话框。 (5)选择“类型”选项卡,设置Font-family(字体)为宋体,Font-size(字体大小)为13px,Line-height(行高)为1.5,Color(字体颜色)为#666666(灰色)。 (6)选择“方框”选项卡,在Padding(填充)区域中,取消勾选“全部相同”,并设置Top(上间距)为10px,Left(左间距)、Right(右间距)均为20px,单击“确定”。 (7)在网页中,选中正文所在的单元格 (8)在其“属性”面板中,选择“样式”下拉框,将类“text”应用上去。 (9)浏览网页,会发现页面中间的文本的字体、字号、颜色、行距及与单元格周围的间距都发生了相应的改变。 (10)单击“新建CSS规则”按钮,进入“新建设CSS规则”对话框。在“规则定义”区域中选择“仅限该文档”;在“选择器类型”区域中选择“类”,并在“选择器名称”框中输入类名“list”,单击“确定”,进入“CSS规则定义”对话框。 (11)选择“类型”选项卡,设置Line-height(行高)为“2倍行高”。 (12)选择“列表”选项卡,单击“List-style-image(项目符号图像)”右侧的“浏览”按钮,进入当前任务图片所在的文件夹目录,选择图像“dot.gif”,将List-style-Position(列表的位置)设置为“outside(外)”,单击“确定”。 (13)在网页中,选中需要设置为列表的内容的内容文字,在“属性”面板中单击“项目列表”按钮 ,将这部分文本先设置为列表格式。 (14)在“属性”面板中,选择“样式”下拉框,将类“list”应用至所选的内容上去。 (15)浏览网页,即可看到该部分文本内容的行距、项目符号图像等都发生了相应改变。 使用CSS设置表格元素外观 2 任务分析 本任务使用Dreamweaver CS5中的样式面板,创建外部CSS样式表,对页面中的表格、单元格等元素的外观进行美化,详细设置如下: (1)顶部导航条中八个单元格内的文字效果设置:华文新魏、22像素、白色(#FFFFFF)、居中; (2)顶部导航条单元格的背景图片设置为自定义的小图像,并使用其重复的属性,让小图像重复,制作出整体的导航背景效果; (3)顶部导航条单元格的边框效果设置:凹陷、1像素、灰色(#666666)。 任务实施 (1)新建站点,将project07文件夹下的task02文件夹复制到本地磁盘下的站点目录中,在Dreamweaver CS5软件中打开网页文件index.html,进行下列操作:单击“新建CSS规则”按钮,进入“新建CSS规则”对话框, 在“规则定义”区域中选择“新建样式表文件”,在“选择器类型”区域中选择“类”,并在名称中输入类名“navigate”,单击“确定”。 (2)进入“将样式表文件另存为”对话框,打开当前项目