1、第8章 HTML与CSS入门,HTML与CSS入门 编辑HTML代码 创建和使用CSS样式表 上机实践为网页中的文字设置样式,8.1 HTML与CSS入门,HTML是超文本标记语言（Hypertext Markup Language）的缩写，它能独立于各种操作系统平台，可以在浏览器中解释执行。CSS层叠样式表主要有两大优点，一个是可以对网页元素施加更多的控制，二是可以批量更新网页。,8.1.1 为什么要学习HTML,HTML语言是网页制作的基础，我们使用Dreamweaver设计网页的过程，也就是制作HTML文件的过程。,有利于提高网页制作效率和优化网页代码。 有利于网页排错 。 有利于快速提
2、高自己的网页制作水平,适度掌握一些HTML语言的知识是非常有益的，其原因如下：,8.1.2 HTML的基本结构,HTML语言的核心是标签。我们在浏览网页时看到的文字、图像、动画等在HTML文档中都是用标签来描述的。一个完整的HTML文档由标签开始并由标签结束，所有的HTML代码都应写在标签与标签之间。,层叠样式表,HTML头,HTML体,完整的文档,8.1.3 HTML标签的类型与特点,学习HTML语言的过程也就是学习各种标签格式的过程。,（1）单标签,某些标签称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标签的语法如下：最常用的单标签是，它表示换行。,（2）双标签,“双标签”由“
3、始标签”和“尾标签”两部分构成，必须成对使用，始标签前加一个斜杠（/）即成为尾标签。这类标签的语法是：内容 其中，“内容”部分就是要被这对标签施加作用的部分。例如，你想突出显示某段文字，就可以将此段文字放在一 标签中： 第一：,（3）标签属性,许多单标签和双标签的始标签内可以包含一些属性，其语法是：各属性之间无先后次序，属性也可省略（即取默认值）。例如，单标签表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。其属性有： ,8.1.4 常用HTML标签及其意义列表,学习HTML语言，最关键的是掌握常用HTML标签的用法及其意义。,头部标
4、签 主体标签,8.1.5 CSS样式的定义,CSS样式定义由两部分组成：选择器和声明，其中，选择器是样式的名称（如TR或P），而声明则用于定义样式元素。声明由两部分组成：属性和值。,HTML标签样式,自定义样式（类样式）,CSS选择器样式,选择器,声明,声明,声明,8.1.6 CSS样式的存储与创建,CSS样式以两种方式存在于网页中：,外部CSS样式表，专门用于存储CSS样式定义的.css 文件。利用“CSS样式”面板或者在HTML代码视图中手工编写head部分中的链接，该文件可被链接到站点中的一个或多个网页上。,链接外部样式表文件,内部（或嵌入式）CSS样式表,是一系列包含在HTML文档he
5、ad部分的style标签内的CSS样式。,内嵌CSS样式表,8.2.1 使用编码工具栏迅速插入代码,最近的代码片断,8.2 编辑HTML代码,编码工具栏是Dreamweaver 8的新增功能，它位于代码视图中文档工具栏的左侧，使用它可以快速而方便地插入代码。,打开文档,折叠整个标签,折叠所选,扩展全部,选择父标签,平衡大括弧,显示行号,高亮显示无效代码,应用注释,缩进代码,删除注释,环绕标签,凸出代码,8.2.2 使用快速标签编辑器,快速标签编辑器使我们无需退出“设计”视图就能够快速检查并编辑HTML标签和属性。,首先选中要编辑的标签,快速标签编辑器以“编辑”模式打开,没有选择特定元素，快速标
6、签编辑器以“插入”模式打开,8.2.3 使用代码提示功能,下面以制作一个单边显示边框的表格为例，介绍使用Dreamweaver代码提示功能的方法（具体操作见视频83）。,8.2.4 使用“代码片断”面板,通过使用 “代码片断”面板，可以方便地在文档中插入一些可重复使用的HTML代码。,目录树,预览窗口,新建代码片断,编辑代码片断,新建代码片断文件夹,8.3 创建和使用CSS样式表,8.3.1 熟悉“CSS样式”面板,在Dreamweaver 8中，可以借助“CSS样式”面板来新建、删除、编辑和应用样式，以及附加外部样式表等。,单击可切换到所有“文档”模式,显示类别视图,显示列表视图,只显示设置
7、属性,删除选定样式,编辑选定样式,新建样式,将外部样式表文件链接到当前文件或将其中的CSS样式导入到当前文档,8.3.2 样式类型与使用方法,1类样式,类样式又称自定义样式，它可应用于文档中任何文本。与当前文档关联的所有类样式都显示在“CSS 样式”面板中（样式名称前有一个句点“.”），以及文本属性面板的“样式”列表中。,2标签样式,用来重定义HTML标签的格式。例如，创建table标签样式后，所有用table标签设置了格式的文本都将立即更新。,3选择器样式,选择器样式又称高级样式，它用来重定义特定标签组合的格式。例如，每当h2标题出现在表格单元格内时都会生成td h2标签组合。 选择器样式还
8、可重定义包含特定id属性的所有标签的格式。例如，#myStyle样式将应用于所有包含属性id=“myStyle“的标签。,8.3.3 创建样式的步骤,在“样式”面板中，可以直接创建类样式和其他两种样式。,选择标签,“保存样式表文件为”对话框,“CSS 规则定义”对话框,1类型属性,用来定义字体、大小、粗细、样式、行高、大小写、颜色等设置。该设置主要针对网页中的文字有效。,2背景属性,用来定义背景设置。它可以对网页中的任何元素应用背景属性，还可以设置背景图像的位置。,确定是否以及如何重复背景图像,确定背景图像是固定在它的原始位置还是随内容一起滚动,指定背景图像相对于元素的初始位置,3区块属性,用
9、来定义文字的排列格式,4方框属性,用来控制元素在页面上的放置方式,设置元素的宽度和高度,设置其他元素在哪个边围绕元素浮动,定义层的清除边,指定元素内容与元素边框之间的间距,指定一个元素的边框与另一个元素之间的间距,5边框属性,用来定义元素周围边框的设置，如边框宽度、颜色和样式。,6列表属性,用来为列表标签定义列表设置（如项目符号外观，自定义图像和位置）。,7定位属性,定位属性用于使用“层”首选参数中定义的层的默认标签，将标签或所选文本块更改为新层。,8.3.4 修改样式和删除样式,要修改样式，应首先打开“CSS样式”面板，然后选择要编辑的样式，最后单击“编辑样式”按钮 。 也可以在“CSS样式”面板中选择要编辑的样式，然后利用打开的“CSS属性”面板来修改样式。,利用“CSS样式”面板还可方便地删除链接外部样式表或内部样式。,8.3.5 使用外部样式表,要附加外部样式表，应首先打开“CSS样式”面板，然后单击“附加样式表”按钮，将弹出“链接外部样式表”对话框。,外部链接样式,“链接外部样式表”对话框,导出样式表,内部定义样式,8.4 上机实践为网页中的文字设置样式,下面我们试着用CSS控制“金企鹅”主页上文字的样式，让大家领略一下CSS的独特魅力(具体操作见视频8-2)。,
