http及CSS入门.pptVIP

第8章 HTML与CSS入门 HTML与CSS入门 编辑HTML代码 创建和使用CSS样式表 上机实践——为网页中的文字设置样式 8.1 HTML与CSS入门 8.1.1 为什么要学习HTML HTML语言是网页制作的基础，我们使用Dreamweaver设计网页的过程，也就是制作HTML文件的过程。 8.1.2 HTML的基本结构 HTML语言的核心是标签。我们在浏览网页时看到的文字、图像、动画等在HTML文档中都是用标签来描述的。一个完整的HTML文档由html标签开始并由/html标签结束，所有的HTML代码都应写在html标签与/html标签之间。 8.1.3 HTML标签的类型与特点 学习HTML语言的过程也就是学习各种标签格式的过程。 （2）双标签 “双标签”由“始标签”和“尾标签”两部分构成，必须成对使用，始标签前加一个斜杠（/）即成为尾标签。这类标签的语法是： 标签 内容 /标签 其中，“内容”部分就是要被这对标签施加作用的部分。例如，你想突出显示某段文字，就可以将此段文字放在一em /em标签中： em第一：/em （3）标签属性 许多单标签和双标签的始标签内可以包含一些属性，其语法是： 标签名字 属性1 属性2 属性3 … 各属性之间无先后次序，属性也可省略（即取默认值）。例如，单标签hr表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。其属性有： hr size=3 align=left width=75% 8.1.4 常用HTML标签及其意义列表 学习HTML语言，最关键的是掌握常用HTML标签的用法及其意义。 8.1.5 CSS样式的定义 CSS样式定义由两部分组成：选择器和声明，其中，选择器是样式的名称（如TR或P），而声明则用于定义样式元素。声明由两部分组成：属性和值。 8.1.6 CSS样式的存储与创建 CSS样式以两种方式存在于网页中： 内部（或嵌入式）CSS样式表 是一系列包含在HTML文档head部分的style标签内的CSS样式。 8.2 编辑HTML代码 8.2.1 使用编码工具栏迅速插入代码 8.2.2 使用快速标签编辑器 快速标签编辑器使我们无需退出“设计”视图就能够快速检查并编辑HTML标签和属性。 8.2.3 使用代码提示功能 下面以制作一个单边显示边框的表格为例，介绍使用Dreamweaver代码提示功能的方法（具体操作见视频8—3）。 8.2.4 使用“代码片断”面板 通过使用 “代码片断”面板，可以方便地在文档中插入一些可重复使用的HTML代码。 8.3 创建和使用CSS样式表 8.3.1 熟悉“CSS样式”面板 8.3.2 样式类型与使用方法 1．类样式 2．标签样式 用来重定义HTML标签的格式。例如，创建table标签样式后，所有用table标签设置了格式的文本都将立即更新。 3．选择器样式 选择器样式又称高级样式，它用来重定义特定标签组合的格式。例如，每当h2标题出现在表格单元格内时都会生成td h2标签组合。 选择器样式还可重定义包含特定id属性的所有标签的格式。例如，#myStyle样式将应用于所有包含属性id=myStyle的标签。 8.3.3 创建样式的步骤 在“ＣＳＳ样式”面板中，可以直接创建类样式和其他两种样式。 1．类型属性 用来定义字体、大小、粗细、样式、行高、大小写、颜色等设置。该设置主要针对网页中的文字有效。 2．背景属性 用来定义背景设置。它可以对网页中的任何元素应用背景属性，还可以设置背景图像的位置。 3．区块属性 用来定义文字的排列格式． 4．方框属性 用来控制元素在页面上的放置方式． 5．边框属性 用来定义元素周围边框的设置，如边框宽度、颜色和样式。 6．列表属性 用来为列表标签定义列表设置（如项目符号外观，自定义图像和位置）。 7．定位属性 定位属性用于使用“层”首选参数中定义的层的默认标签，将标签或所选文本块更改为新层。 8.3.4 修改样式和删除样式 要修改样式，应首先打开“CSS样式”面板，然后选择要编辑的样式，最后单击“编辑样式”按钮 。 也可以在“CSS样式”面板中选择要编辑的样式，然后利用打开的“CSS属性”面板来修改样式。 8.3.5 使用外部样式表 要附加外部样式表，应首先打开“CSS样式”面板，然后单击“附加样式表”按钮，将弹出“链接外部样式表”对话框。 8.4 上机实践——为网页中的文字设置样式 下面我们试着用CSS控制“金企鹅”主页上文字的样式，让大家领略一下CSS的独特魅力(具体操作见视频8-2)。 * * HTML是超文本标记语言（Hypertext Markup Language）的缩写，它能独立于