第05章 使用CSS美化“北京奥运吉祥物-福娃”网站[精选].pptVIP

1.页面总体布局设计 可以通过选择“插入记录”→“布局对象”→“div标签”命令的方法进行布局，也可以通过在“代码”视图中直接编写源代码的方法进行布局.在Dreamweaver“设计”视图中的显示效果如图所示。 2.链接页面的CSS文件 （1）在css文件夹中新建一个名为style.css的文件。 （2）打开“CSS样式”面板，单击“附加样式表”按钮链接style.css文件。 3.设计页面的通用规则 一般情况下，需要在CSS的开始部分定义页面的通用规则。通用规则对所有的标记都起作用，这样就可以声明绝大部分标记都会涉及到的属性，具体操作步骤如下： （1）打开“CSS样式”面板，双击打开style.css文件，单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框，在“标签”下拉列表框中输入通配符“*”，选择“仅对该文档”，如图所示。 （2）单击“确定”按钮，弹出“*的CSS规则定义”对话框，在对话框的“分类”列表框中选择“方框”选项，在“填充”和“边界”中设置上、下、左、右的填充和边界都为0，如图所示。 （3）使用相同的方法设置body标签的字体和大小。 4.设计#header对象部分 网页的#header部分包括网页的logo#logo和导航#nav。 （1）网页的logo部分是一个中间栏固定，左右栏自适应的结构，并且在#flashlogo中插入了透明flash动画。 （2）导航区域由#nav和#navbg两个区块组成，使用了CSS中的链接属性。 5.设计#content对象部分 通过分析网页布局构架图可以知道，#content分为三列，其中#maincon为中间列，宽度固定，左右两列没有内容因此不需要考虑，而#maincon主体显示部分分为三行，分别显示网页的不同区域。 （1）第一行#firstmain又分为图片新闻区#imagesnews、新闻区#news、#banner区和公告栏#notice。 （2）第二行#secondmain区分为福娃简介#fwjj和福娃揭秘#movize。 （3）第三行#thirdmain区分为精彩图片.thirdmain_list和名人说福娃.thirdmain_list和投票调查#vote。 6.设计#footer对象部分 主页的整个布局设计完成，如图所示。 本章介绍了三个方面的内容，其一， CSS的概念和特点，在网页中使用CSS的四种方式以及选择器的语法格式及三类选择器：标签选择器、类选择器和ID选择器；其二，CSS的创建和管理方式，CSS中的常用属性，应用CSS+DIV进行页面布局的DIV标记、SPAN标记、盒子模型、元素的定位方式、布局流程和常用的布局类型； 其三，应用CSS+DIV对“北京奥运吉祥物-福娃”网站的主页重新进行了设计的过程。 5.8 本章小结 一、填空题 1.CSS是英文________________的缩写，即“层叠样式表”的意思，是用于___________的一种标记性语言。 2.在网页中使用CSS有4种方法，即____________、 _________、__________和________。 3.在CSS中，有三类选择器，分别是_________、 _________和______。 5.9 习题 二、简答及实训题 1.参照“北京奥运吉祥物-福娃”网站CSS的应用，承接4.6 习题中简答及实训题第1小题设计的网站静态页面，应用CSS布局和美化此网站。 一、填空题 1.Cascading Style Sheet 控制网页样式并允许将样式信息与网页内容分离 2.行内样式表 内联样式表 外联样式表 导入样式表 3.标签选择器 类选择器 ID选择器 二、简答及实训题 1.略。 习题参考答案 4.“方框”属性 打开“CSS规则定义”对话框，选择“分类”列表框中的“方框”选项卡，该选项卡可用于设置方框的相关属性： 宽、高、浮动、清除、填充和边界等，如图所示。 5.“边框”属性 打开“CSS规则定义”对话框，选择“分类”列表框中的“边框”选项卡，该选项卡可用于设置边框的相关属性：上、下、左、右边框的“样式”、“宽度”和“颜色”，如图所示。 6.“列表”属性 打开“CSS规则定义”对话框，选择“分类”列表框中的“列表”选项卡，该选项卡中的功能用来设置列表的相关属性，如项目符号图像、位置，如图所示。 7.“定位”属性 打开“CSS规则定义”对话框，选择“分类”列表框中的“定位”选项卡，该选项卡可用于设置定位相关属性，如类型、显示、宽、高、Z轴、溢出、定位和剪辑，如图所示。 8