《{项目管理项目报告}使用CSS样式美化和布局网页项目管理知识分析》由会员分享，可在线阅读，更多相关《{项目管理项目报告}使用CSS样式美化和布局网页项目管理知识分析（41页珍藏版）》请在金锄头文库上搜索。
1、,使用CSS样式美化和布局网页,项目7,掌握CSS样式的创建和使用方法,2,7.1 网页展示：在“商旅管理”页面中应用CSS样式,在“商旅管理”页面中应用CSS样式,在“乐途网”站点的“ch7”文件夹中创建“商旅管理”页面ctmindex.html，运用表格布局页面，插入网页中相关的内容，再创建CSS样式，对网页内容进行美化，效果如图所示。,7.2 网页制作,7.2.1 使用表格布局制作“商旅管理页面” 步骤1 启动Dreamweaver CS4，新建HTML文档，将文档命名为ctmindex.html，保存在“乐途网”站点根目录下的“ch7”文件夹中。 步骤2 按照制作“乐途网”首页的方式，
2、在ctmindex.html中插入表格，对“商旅管理”页面进行布局。 步骤3 在表格中对应位置插入相应图片或文本，并设置表格或单元格的背景颜色，完成“商旅管理”页面的制作,7.2 网页制作,7.2.2 创建文本CSS样式 步骤1 打开“商旅管理”子页（ctmindex.html），按下Shift+F11组合键，打开【CSS样式】面板，单击“新建CSS规则”按钮，打开【新建CSS规则】对话框。 步骤2 在【选择器类型】选项组中选择“类（可以应用于任何HTML元素）”。在【选择器名称】下拉列表框中输入类样式的名称：.black12。在【规则定义】选项组中选择“新建样式表文件”，若选择“仅限该文档”
3、，则该样式只能应用在当前网页中。,7.2 网页制作,步骤3 单击“确定”按钮，弹出【将样式表文件另存为】对话框。将CSS规则定义在mycss.css文件中，保存在站点目录下“ch7”文件夹中。 步骤4 单击“保存”按钮，弹出【.black12的CSS规则定义】对话框，设置.black12类样式的属性。在【分类】中选择【类型】，设置字体大小为“12px”，行高为“20px”，颜色为“#000”，修饰设置为无。单击“确定”按钮，完成.black12的CSS规则的定义。,7.2 网页制作,7.2.3 创建表格CSS样式 步骤1 在【CSS样式】面板中，单击“新建CSS规则”按钮，在【新建CSS规则】
4、对话框中定义名称为.talbe1的类样式，将样式规则定义在已经保存的mycss.css样式表文件中。 步骤2 单击“确定”按钮，打开【.table1的CSS规则定义】对话框。选择【分类】中的【背景】，设置表格背景颜色为“#9C0” 。 步骤3 选择【分类】中的【边框】，设置边框的样式、宽度和颜色。单击“确定”按钮，完成.table1样式规则的定义。,7.2 网页制作,7.2.4 创建超级链接CSS样式 步骤1 在【CSS样式】面板中，单击“新建CSS规则”按钮，打开【新建CSS规则】对话框。在【选择器类型】下拉列表框中选择“复合内容（基于选择的内容）”，设置网页中各种超级链接的风格 。 步骤2
5、 在【选择器名称】中选择【a:link】，将规则定义在mycss.css文件中，单击【确定】按钮，打开【a:link的CSS规则定义】对话框。选择【分类】中的【类型】，设置字体大小为“12px”，颜色为“#06F”，修饰为无（表示无下划线。单击“确定”按钮，完成a:link样式规则的定义。,7.2 网页制作,步骤3 同定义a:link的CSS规则方法一样，在步骤1对话框中选择【a:visited】，在【a:visited的CSS规则定义】对话框中设置a:visited超链接样式 。 步骤4 以相同的方法，在mycss.css文件中定义a:hover超链接样式。,7.2 网页制作,7.2.5 应
6、用类CSS样式 下面来应用创建好的CSS样式美化页面。因为在创建“.black12”、“.table”以及超级链接样式时，“商旅管理”栏目网页（ctmindex.html）为当前打开页面，因此，可以直接应用mycss.css样式表文件中的CSS样式。 步骤1 在“商旅管理”网页（ctmindex.html）的设计视图中，用鼠标选中商旅管理介绍的文本。 步骤2 在【属性】面板的【类】下拉列表中选择类样式“black12”，如图所示，这样所选中的文本就设置成“black12”所定义的样式。,【属性】面板中选择样式,7.2 网页制作,步骤3 选中要应用“table1”CSS样式的表格，如图所示。 步
7、骤4 在【属性】的面板的【类】下拉列表中选择“table1”样式，如图所示，将所选中的表格设置为“table1”样式。,选中要应用“table1”样式的表格,在【属性】面板中设置类样式,7.2 网页制作,7.2.6 主页应用CSS样式表文件 步骤1 在右侧【文件】浮动面板中，鼠标双击打开“乐途网”首页index.html。 步骤2 单击【CSS样式】面板中的【附加样式表】命令，或者直接单击面板下的“附加样式表”按钮，打开【链接外部样式表】对话框。 步骤3 在“文件/URL”文本框中输入mycss.css的路径及文件名，也可单击“浏览”按钮从对话框中选择该文件。,7.2 网页制作,步骤4 在“添
8、加为”设置区域，选择添加该样式的方式，有“链接”和“导入”两种方式。 如果选中“链接”单选按钮，然后单击“确定”按钮，则会在页面的头部插入以下代码。 即通过标签将样式表文件mycss.css与网页文档链接。,7.2 网页制作,如果选中“导入”单选按钮，然后单击“确定”按钮，则会在网页头部的和标签之间插入下列代码。 import url(mycss.css); 也就是说，通过import标签实际上将mycss.css中的内容嵌入到网页文档的代码中。 步骤5 附加样式表后，在当前网页文档中就可以应用mycss.css样式表文件中所定义的CSS样式了。,7.3 知识链接,CSS简介 认识【CSS样式
9、】面板 管理CSS样式 设置CSS样式属性,7.3.1 CSS简介,1. CSS及其作用 CSS是Cascading Style Sheets的英文缩写，即层叠样式表。CSS是一种用来进行网页风格设计的样式表技术。使用CSS可以对网页中文本的大小、字体、颜色、边框、链接状态等内容进行统一设置，保证站点页面的整体风格一致。,7.3.1 CSS简介,2. CSS的特点,（1）创建一个CSS样式，可以用于多个网页文档。 （2）若修改了某个CSS样式，则文档中所有应用该样式的文档格式都会自动进行更新。 （3）CSS样式可以为网页中的元素设置各种过滤器，从而产生特殊效果，如阴影、辉光、模糊和透明等。 （
10、4）可以精确地控制网页中元素的位置。 （5）由于是直接的HTML格式的代码，因而网页打开速度比较快。 （6）使用CSS可以将设计部分剥离出来放在一个独立样式文件中，让多个网页文件共同使用，省去在每一个网页文件中都要重复设置样式的麻烦。 （7）CSS有很好的兼容性，只要是可以识别CSS样式的浏览器都可以应用它。 （8）CSS容易编写，在Dreamweaver中提供相应的辅助工具。,7.3.1 CSS简介,3. CSS的语法规则 CSS格式设置规则由两部分组成：选择器和声明块。 在下面的示例中，h1是选择器，介于大括号“”之间的所有内容都是声明块： h1 font-size: 16 pixels;
11、 font-family: Helvetica; font-weight:bold; 在Dreamweaver CS4中可以定义以下样式类型： （1）类样式 （2）HTML标签样式 （3）高级样式,7.3.1 CSS简介,4. CSS的保存方式 CSS样式表可以保存在网页内部或者网页外部： （1）保存在网页内部：将CSS样式保存在当前网页与之间的style标签中，样式只对当前网页有效，仅当前网页中的对象才能应用相应的样式。 （2）保存在网页外部：将CSS样式保存在一个独立的样式表文件中（.CSS），在网页中只要链接该样式表文件，就可以使用其中的样式，多个网页可以使用同一样式表文件。,7.3.2
12、 认识【CSS样式】面板,在Dreamweaver中，可以使用【CSS样式】面板来创建层叠式样式表。用户可以使用“窗口/CSS样式”命令，或者使用Shift+F11组合键打开【CSS样式】面板，如图所示。,【CSS样式】面板,7.3.3 管理CSS样式,1编辑CSS样式 （1）在【CSS规则定义】对话框中修改,【CSS规则定义】对话框,7.3.3 管理CSS样式,（2）在【CSS样式】面板中修改,选择要修改的样式 修改属性设置,7.3.3 管理CSS样式,（3）在CSS文件代码中修改,7.3.3 管理CSS样式,2删除CSS样式 在【CSS样式】面板中选中要删除的CSS样式，再单击“删除CSS
13、规则”按钮，或者按Del键，即可删除该CSS样式。,7.3.4 设置CSS样式属性,1类型样式设置 【类型】对话框如图所示，可以用来设置文本的样式。,7.3.4 设置CSS样式属性,1类型样式设置 各项功能如下： 字体（Font-family）：用来选择文本的字体。 大小（Font-size）：用来设置文本的大小。 样式（Font-style）：用于设置文本的倾斜格式，有“正常”、“斜体”和“偏斜体”三种选项。 行高（Line-height）：设置文本所在行的高度。 修饰（Text-decoration）：向文本中添加下划线、上划线或者删除线，或者使文本闪烁。 粗细（Font-weight）：
14、用于设置文本加粗的程度。 变体（Font-variant）：设置文本的小型大写字母变量。 大小写（Text-transform）：用于设置文本的大小写。 颜色（Color）：单击“下三角”按钮，可以打开调色板设置文本的颜色，也可以在该按钮后边的文本框中直接输入颜色的HTML代码。,7.3.4 设置CSS样式属性,2背景样式设置 【背景】对话框如图所示，可以用来设置网页元素的背景属性。,7.3.4 设置CSS样式属性,2背景样式设置 各项功能如下： 背景颜色（Background-color）：设置元素的背景颜色。 背景图像（Background-image）：设置元素的背景图片。 重复（Bac
15、kgound-repeat）：设置背景图像的重复方式。“不重复”只在元素开始处显示一次图像；“重复”在元素后面水平和垂直平铺图像；“横向重复”和“纵向重复”分别显示图像的水平带区和垂直带区，图像被剪辑为适合元素的边界。 附件（Background-attachment）：设置背景图像是固定在其原始位置还是随内容一起滚动。 水平位置和垂直位置：设置背景图像相对于元素的初始位置，可以用于将背景图像与页面中心水平和垂直对齐。,7.3.4 设置CSS样式属性,3区块样式设置 【区块】对话框如图所示，可以用来设置文本的间距和对齐格式。,7.3.4 设置CSS样式属性,3区块样式设置 各项功能如下： 单词
16、间距（Word-spacing）：设置字词的间距。 字母间距（Letter-spacing）：增加或减少字母或字符的间距。 垂直对齐（Vertical-align）：设置元素的垂直对齐方式。 文本对齐（Text-align）：设置文本在元素内的对齐方式。 文字缩进（Text-indent）：设置第一行文本缩进的程度。 空格（White-space）：设置处理元素中空格的方式。“正常”表示收缩空白；“保留”表示保留所有空白；“不换行”表示仅遇到br标签时文本才换行。 显示（Display）：用来设置是否以及如何显示元素。,7.3.4 设置CSS样式属性,4方框样式设置 【方框】对话框如图所示，用来设置元素（如图像和层）的高度、宽度、浮动、内容与边框之间的距离以及元素内边框与外边框之间的距离等属性。,7.3.4 设置CSS样式属性,4方框样式设置 各项功能如下： 宽（Width）和高（Height）：设置元素的宽度和高度。 浮动（Float）：设置其他元素（如文本、AP Div、表格等）围绕元素的哪个边浮动。其他元素
