《精编》使用CSS样式美化和布局网页项目管理知识分析

《《精编》使用CSS样式美化和布局网页项目管理知识分析》由会员分享，可在线阅读，更多相关《《精编》使用CSS样式美化和布局网页项目管理知识分析（41页珍藏版）》请在金锄头文库上搜索。

1、 使用CSS样式美化和布局网页 项目7 掌握CSS样式的创建和使用方法 2 7 1网页展示 在 商旅管理 页面中应用CSS样式 在 商旅管理 页面中应用CSS样式 在 乐途网 站点的 ch7 文件夹中创建 商旅管理 页面ctmindex html 运用表格布局页面 插入网页中相关的内容 再创建CSS样式 对网页内容进行美化 效果如图所示 7 2网页制作 7 2 1使用表格布局制作 商旅管理页面 步骤1启动DreamweaverCS4 新建HTML文档 将文档命名为ctmindex html 保存在 乐途网 站点根目录下的 ch7 文件夹中 步骤2按照制作 乐途网 首页的方式 在ctmindex

2、 html中插入表格 对 商旅管理 页面进行布局 步骤3在表格中对应位置插入相应图片或文本 并设置表格或单元格的背景颜色 完成 商旅管理 页面的制作 7 2网页制作 7 2 2创建文本CSS样式步骤1打开 商旅管理 子页 ctmindex html 按下Shift F11组合键 打开 CSS样式 面板 单击 新建CSS规则 按钮 打开 新建CSS规则 对话框 步骤2在 选择器类型 选项组中选择 类 可以应用于任何HTML元素 在 选择器名称 下拉列表框中输入类样式的名称 black12 在 规则定义 选项组中选择 新建样式表文件 若选择 仅限该文档 则该样式只能应用在当前网页中 7 2网页制作

3、 步骤3单击 确定 按钮 弹出 将样式表文件另存为 对话框 将CSS规则定义在mycss css文件中 保存在站点目录下 ch7 文件夹中 步骤4单击 保存 按钮 弹出 black12的CSS规则定义 对话框 设置 black12类样式的属性 在 分类 中选择 类型 设置字体大小为 12px 行高为 20px 颜色为 000 修饰设置为无 单击 确定 按钮 完成 black12的CSS规则的定义 7 2网页制作 7 2 3创建表格CSS样式步骤1在 CSS样式 面板中 单击 新建CSS规则 按钮 在 新建CSS规则 对话框中定义名称为 talbe1的类样式 将样式规则定义在已经保存的mycss

4、 css样式表文件中 步骤2单击 确定 按钮 打开 table1的CSS规则定义 对话框 选择 分类 中的 背景 设置表格背景颜色为 9C0 步骤3选择 分类 中的 边框 设置边框的样式 宽度和颜色 单击 确定 按钮 完成 table1样式规则的定义 7 2网页制作 7 2 4创建超级链接CSS样式步骤1在 CSS样式 面板中 单击 新建CSS规则 按钮 打开 新建CSS规则 对话框 在 选择器类型 下拉列表框中选择 复合内容 基于选择的内容 设置网页中各种超级链接的风格 步骤2在 选择器名称 中选择 a link 将规则定义在mycss css文件中 单击 确定 按钮 打开 a link的C

5、SS规则定义 对话框 选择 分类 中的 类型 设置字体大小为 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应用类CSS样式下面来应用创建好的CSS样式美化页面 因为在创建 black12 table 以及超级链接样式时 商旅管理 栏目网页 ctmindex

6、 html 为当前打开页面 因此 可以直接应用mycss css样式表文件中的CSS样式 步骤1在 商旅管理 网页 ctmindex html 的设计视图中 用鼠标选中商旅管理介绍的文本 步骤2在 属性 面板的 类 下拉列表中选择类样式 black12 如图所示 这样所选中的文本就设置成 black12 所定义的样式 属性 面板中选择样式 7 2网页制作 步骤3选中要应用 table1 CSS样式的表格 如图所示 步骤4在 属性 的面板的 类 下拉列表中选择 table1 样式 如图所示 将所选中的表格设置为 table1 样式 选中要应用 table1 样式的表格 在 属性 面板中设置类样式

7、 7 2网页制作 7 2 6主页应用CSS样式表文件步骤1在右侧 文件 浮动面板中 鼠标双击打开 乐途网 首页index html 步骤2单击 CSS样式 面板中的 附加样式表 命令 或者直接单击面板下的 附加样式表 按钮 打开 链接外部样式表 对话框 步骤3在 文件 URL 文本框中输入mycss css的路径及文件名 也可单击 浏览 按钮从对话框中选择该文件 7 2网页制作 步骤4在 添加为 设置区域 选择添加该样式的方式 有 链接 和 导入 两种方式 如果选中 链接 单选按钮 然后单击 确定 按钮 则会在页面的头部插入以下代码 即通过标签将样式表文件mycss css与网页文档链接 7

8、2网页制作 如果选中 导入 单选按钮 然后单击 确定 按钮 则会在网页头部的和标签之间插入下列代码 importurl mycss css 也就是说 通过 import标签实际上将mycss css中的内容嵌入到网页文档的代码中 步骤5附加样式表后 在当前网页文档中就可以应用mycss css样式表文件中所定义的CSS样式了 7 3知识链接 CSS简介认识 CSS样式 面板管理CSS样式设置CSS样式属性 7 3 1CSS简介 1 CSS及其作用CSS是CascadingStyleSheets的英文缩写 即层叠样式表 CSS是一种用来进行网页风格设计的样式表技术 使用CSS可以对网页中文本的大

9、小 字体 颜色 边框 链接状态等内容进行统一设置 保证站点页面的整体风格一致 7 3 1CSS简介 2 CSS的特点 1 创建一个CSS样式 可以用于多个网页文档 2 若修改了某个CSS样式 则文档中所有应用该样式的文档格式都会自动进行更新 3 CSS样式可以为网页中的元素设置各种过滤器 从而产生特殊效果 如阴影 辉光 模糊和透明等 4 可以精确地控制网页中元素的位置 5 由于是直接的HTML格式的代码 因而网页打开速度比较快 6 使用CSS可以将设计部分剥离出来放在一个独立样式文件中 让多个网页文件共同使用 省去在每一个网页文件中都要重复设置样式的麻烦 7 CSS有很好的兼容性 只要是可以识

10、别CSS样式的浏览器都可以应用它 8 CSS容易编写 在Dreamweaver中提供相应的辅助工具 7 3 1CSS简介 3 CSS的语法规则CSS格式设置规则由两部分组成 选择器和声明块 在下面的示例中 h1是选择器 介于大括号 之间的所有内容都是声明块 h1 font size 16pixels font family Helvetica font weight bold 在DreamweaverCS4中可以定义以下样式类型 1 类样式 2 HTML标签样式 3 高级样式 7 3 1CSS简介 4 CSS的保存方式CSS样式表可以保存在网页内部或者网页外部 1 保存在网页内部 将CSS样式

11、保存在当前网页与之间的style标签中 样式只对当前网页有效 仅当前网页中的对象才能应用相应的样式 2 保存在网页外部 将CSS样式保存在一个独立的样式表文件中 CSS 在网页中只要链接该样式表文件 就可以使用其中的样式 多个网页可以使用同一样式表文件 7 3 2认识 CSS样式 面板 在Dreamweaver中 可以使用 CSS样式 面板来创建层叠式样式表 用户可以使用 窗口 CSS样式 命令 或者使用Shift F11组合键打开 CSS样式 面板 如图所示 CSS样式 面板 7 3 3管理CSS样式 1 编辑CSS样式 1 在 CSS规则定义 对话框中修改 CSS规则定义 对话框 7 3

12、3管理CSS样式 2 在 CSS样式 面板中修改 选择要修改的样式修改属性设置 7 3 3管理CSS样式 3 在CSS文件代码中修改 7 3 3管理CSS样式 2 删除CSS样式在 CSS样式 面板中选中要删除的CSS样式 再单击 删除CSS规则 按钮 或者按Del键 即可删除该CSS样式 7 3 4设置CSS样式属性 1 类型样式设置 类型 对话框如图所示 可以用来设置文本的样式 7 3 4设置CSS样式属性 1 类型样式设置各项功能如下 字体 Font family 用来选择文本的字体 大小 Font size 用来设置文本的大小 样式 Font style 用于设置文本的倾斜格式 有 正

13、常 斜体 和 偏斜体 三种选项 行高 Line height 设置文本所在行的高度 修饰 Text decoration 向文本中添加下划线 上划线或者删除线 或者使文本闪烁 粗细 Font weight 用于设置文本加粗的程度 变体 Font variant 设置文本的小型大写字母变量 大小写 Text transform 用于设置文本的大小写 颜色 Color 单击 下三角 按钮 可以打开调色板设置文本的颜色 也可以在该按钮后边的文本框中直接输入颜色的HTML代码 7 3 4设置CSS样式属性 2 背景样式设置 背景 对话框如图所示 可以用来设置网页元素的背景属性 7 3 4设置CSS样式

14、属性 2 背景样式设置各项功能如下 背景颜色 Background color 设置元素的背景颜色 背景图像 Background image 设置元素的背景图片 重复 Backgound repeat 设置背景图像的重复方式 不重复 只在元素开始处显示一次图像 重复 在元素后面水平和垂直平铺图像 横向重复 和 纵向重复 分别显示图像的水平带区和垂直带区 图像被剪辑为适合元素的边界 附件 Background attachment 设置背景图像是固定在其原始位置还是随内容一起滚动 水平位置和垂直位置 设置背景图像相对于元素的初始位置 可以用于将背景图像与页面中心水平和垂直对齐 7 3 4设置C

15、SS样式属性 3 区块样式设置 区块 对话框如图所示 可以用来设置文本的间距和对齐格式 7 3 4设置CSS样式属性 3 区块样式设置各项功能如下 单词间距 Word spacing 设置字词的间距 字母间距 Letter spacing 增加或减少字母或字符的间距 垂直对齐 Vertical align 设置元素的垂直对齐方式 文本对齐 Text align 设置文本在元素内的对齐方式 文字缩进 Text indent 设置第一行文本缩进的程度 空格 White space 设置处理元素中空格的方式 正常 表示收缩空白 保留 表示保留所有空白 不换行 表示仅遇到br标签时文本才换行 显示 D

16、isplay 用来设置是否以及如何显示元素 7 3 4设置CSS样式属性 4 方框样式设置 方框 对话框如图所示 用来设置元素 如图像和层 的高度 宽度 浮动 内容与边框之间的距离以及元素内边框与外边框之间的距离等属性 7 3 4设置CSS样式属性 4 方框样式设置各项功能如下 宽 Width 和高 Height 设置元素的宽度和高度 浮动 Float 设置其他元素 如文本 APDiv 表格等 围绕元素的哪个边浮动 其他元素按通常的方式围绕在浮动元素的周围 清除 Clear 定义不允许AP元素的边 如果清除边上出现AP元素 则带清除设置的元素将移到该AP元素的下方 填充 Padding 设置元素内容与元素边框之间的间距 如果没有边框 则为边距 取消选择 全部相同 选项可以设置元素各个边的填充值 边距 Margin 设置一个元素的边框与另一个元素之间的间距 如果没有边框 则为填充 取消选择 全部相同 可设置元素各个边的边距 7 3 4设置CSS样式属性 5 边框样式设置 边框 对话框如图所示 用于设置元素边框的一些属性 主要有四个边的样式 宽度以及颜色等 7 3 4设置CSS样式属性 6