大学DREAMWEAVER 8案例教程-课件PPT
收藏
资源目录
压缩包内文档预览:(预览前20页/共24页)
编号:21836135
类型:共享资源
大小:28.17MB
格式:ZIP
上传时间:2019-09-06
上传人:QQ24****1780
认证信息
个人认证
王**(实名认证)
浙江
IP属地:浙江
25
积分
- 关 键 词:
-
大学DREAMWEAVER
8案例教程-课件PPT
大学
dreamweaver
案例
教程
课件
ppt
- 资源描述:
-
大学DREAMWEAVER 8案例教程-课件PPT,大学DREAMWEAVER,8案例教程-课件PPT,大学,dreamweaver,案例,教程,课件,ppt
- 内容简介:
-
第 8 章 CSS样式表,本章学习目标,8.1 CSS样式简介,CSS是Cascading Style Sheets(层叠样式表)的简称。更多的人把它称为样式表。顾名思义,它是一种设计网页样式的工具。借助CSS的强大功能,网页将在我们丰富的想象力下千变万化。 层叠样式表 (CSS) 是一系列格式设置规则,它们控制Web 页面内容的外观。使用 CSS 设置页面格式时,内容与表现形式是相互分开的。页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位于另一个文件(外部样式表)或 HTML 文档的另一部分(通常为 部分)中。使用 CSS 可以非常灵活并更好地控制页面的外观,从精确的布局定位到特定的字体和样式等。,8.1 CSS样式简介,术语“层叠”是指对同一个元素或 Web 页面应用多个样式的能力。例如,可以创建一个 CSS 规则来应用颜色,创建另一个规则来应用边距,然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到我们的 Web 页面上的元素,并最终创建出我们想要的设计。,8.2 创建CSS样式,使用CSS样式可以使网页的风格协调统一。在本节中,我们将介绍CSS样式的创建和应用方法。,8.2.1 打开CSS样式面板,单击“窗口”|“CSS样式”命令或按Shift+F11快捷键,即可打开CSS样式面板,如图8-1所示。,图8-1 CSS样式面板,8.2.2 创建新的CSS样式,(1)单击“窗口”|“CSS样式”,打开CSS样式面板。如图8-1所示。 (2)单击“CSS样式”面板右下角的“新建CSS规则”按钮,打开“新建CSS规则”对话框,如图8-2所示。,图8-2 新建CSS规则对话框,8.2.2 创建新的CSS样式,(3)为新建的CSS样式输入或选择名称、标签或选择器。 (4)在“定义在”区域中选择定义的样式位置,可以是“新建样式表文件”或“仅对该文档”。设置完毕,单击“确定”按钮即可。 (5)“CSS规则定义”对话框中设置CSS规则定义。主要分为类型、背景、区块、方框、边框、列表、定位和扩展8项。每个选项都可以做不同方面的定义,可以根据需要进行设定。定义完毕后,单击“确定”按钮,完成创建CSS样式。,8.2.3 应用自定义的CSS样式,创建了CSS样式后,在文档窗口中选中将要应用该样式的文本,然后再启动CSS样式面板,选择要应用的样式即可,如图8-3所示。,图8-3 应用自定义的CSS样式,8.3 编辑CSS样式,保存了新的CSS样式后,即可打开CSS编辑器,如图8-8所示。在该对话框中我们可以详细定制样式的格式。CSS样式表可以定义包括许多类型的格式,如文本,背景,边框等,下面我们将一一进行介绍。,8.3.1 文本的定义面板,从“CSS规则定义”对话框的左边目录列表中选择“类型”,则在右边的区域可以设置有关的格式。如字体、大小、样式、行高、修饰、粗细、变体、大小写、颜色等。,8.3.2 背景的定义面板,从“CSS规则定义”对话框的左边目录列表中选择“背景”,则在右边的区域可以设置CSS样式的背景格式,如图8-4所示。,图8-4 背景的定义面板,8.3.3 区块的定义面板,从“CSS规则定义”对话框的左边目录列表中选择“区块”,则在右边的区域可以设置有关CSS样式的块格式,如图8-5所示。,图8-5 区块的定义面板,8.3.4 方框的定义面板,从“CSS规则定义”对话框的左边目录列表中选择“方块”,则在右边的区域可以设置有关CSS样式的方框格式,如图8-6所示。,图8-6 方框的定义面板,8.3.5 边框的定义面板,从“CSS规则定义”对话框的左边目录列表中选择“边框”,则在右边的区域可以设置有关CSS样式的方框格式,如图8-7所示。,图8-7 边框的定义面板,8.3.6 列表的定义面板,从“CSS规则定义”对话框的左边目录列表中选择“列表”,则在右边的区域可以设置有关CSS样式的方框格式,如图8-8所示。,图8-8 列表的定义面板,8.3.7 位置的定义面板,从“CSS规则定义”对话框的左边目录列表中选择“位置”,则在右边的区域可以设置有关CSS样式的方框格式,如图8-9所示。,图8-9 位置的定义面板,8.3.8 CSS的扩展面板,从“CSS规则定义”对话框的左边目录列表中选择“扩展”,则在右边的区域可以设置有关CSS样式的方框格式,如图8-10所示。,图8-10 CSS的扩展面板,8.4 链接到CSS样式表,方法一:在CSS样式面板中单击“附加样式表”按钮,打开“链接外部样式表”对话框,如图8-11所示。 方法二:单击“文本”|“CSS样式”|“附加样式表”菜单项,也可以打开“链接外部样式表”对话框。,图8-11 链接外部样式表对话框,8.5 导出CSS样式表,方法一:单击“文件”|“导出”|“CSS样式”菜单项,打开“导出样式为CSS文件”对话框,如图8-12所示。,图8-12 导出CSS样式对话框,8.5 导出CSS样式表,方法二:单击“文本”|“CSS样式”|“导出”菜单项,也可以打开“导出样式为CSS文件“对话框。 在该对话框中,我们可以设定CSS文件的名称和保存路径,设置完毕,单击“保存”按钮即可。,8.6 设置CSS样式参数,1.设置CSS样式参数: (1)单击“编辑”|“首选参数”命令,打开Dreamweaver首选参数设置对话框。 (2)从左边选择“CSS样式”选项卡,切换到CSS样式表参数设置面板,即可在对话框的右边区域设置CSS样式代码的速记形式,如图8-13所示。 (3)在“当创建CSS规则时:使用速记”区域中,允许设置在创建CSS样式时要对哪些样式格式使用速记形式。选中相应的复选框,即可在创建相应的样式格式时,使用速记形式。,8.6 设置CSS样式参数,(4)在“当编辑CSS规则时:使用速记”区域中,可以选择在什 么样的情况下,
- 温馨提示:
1: 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2: 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
3.本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

人人文库网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。