网页设计教案新部编本标准模板

教师学科教案

[20-20学年度第__学期]

任教学科：_____________

任教年级：_____________

任教老师：_____________

XX市实验学校

教学内容批注

第1章Dreamweaver介绍

1.1Dreamweaver新增功能简介

Drcamweaver是Macromedia公司推出的主页编辑工具。它是一个

所见即所得网页编辑器，支持最新的DHTML和CSS标准。采用了多

种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使

网页创作过程变得非常简单。值得称道的是，Dreamweaver不仅提供

了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，

它是一个集网页创作和站点管理两大利器于一身的创作工具。

在学习使用Dreamweaver之前，我们先了解Dreamweaver的一些

新增功能。

1.独特的往返HTML功能

这个功能可以同步访问设计视图(DesignView)和HTML源代码，

可以打开用其他编辑器编辑的文档，但它不会改写手工输入的HTML

标记或第三方标记。这就使得Dreamweaver自动生成的代码与手工输

入的代码融为一体。

2.整合文本编辑器

现在Dreamweaver增加了以代码为中心的新特性。手工编写代码

就如设计视图环境一样方便，可以自动缩排、标点平衡、选择多行后

一次缩进。可以在使用代码视图工具栏(CodeViewToolbar)的下拉

列表定义的JavaScript函数之间轻松导航。对于使用JavaScript编程的

专业人员来说，这种代码导航无疑是一种高效的导航帮助。输入代码

时Dreamweaver自动对HTML和JavaScript代码使用不同的颜色显示。

3.把主窗口分割为代码视图和设计试图

可以把Dreamweaver的主窗口分割为代码视图和设计试图。能够

查看整页代码而无需离开文档窗口。这样，就可以在同一个窗口同时

查看代码视图和设计视图，同时编辑多个文档的代码。

4.JavaScript调试器

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

使用新增的JavaScript调试器，可以直接在浏览器中调试客户端

JavaScript脚本，观察JavaScript的执行，就像它在Netscape或IE浏览

器中一样，因而能够更好地了解每种浏览器是怎样执行JavaScript的。

可以设置断点调试代码，然后在逐步执行代码的过程中观察变量的变

化，及时发现编程错误。

5.编辑非HTML文档

可以把Dreamweaver当作文本编辑器编辑非HTML文档，直接在

代码视图(CodeView)中编辑JavaScript,XML和其他文本文件。

1.2Dreanweaver的工作环境

Dreamweaver提供了将全部元素置于一个窗口中的集成工作区。在

集成工作区中，全部窗口和面板集成在一个应用程序窗口中。您可以

选择面向设计人员的布局或面向手工编码人员需求的布局。启动

Dreamweaver时，会出现一个工作区设置对话框(如下图)：

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

请选择您喜欢的工作区布局。以后您可以在“首选参数”中切换布局

◎般汁青6)0代码编写者⑩

『确

您可以从中选择一种工作区布局。如果您不熟悉编写代码，请您选

择“设计者”。如果您以后想更改工作区，可以使用编辑菜单“首选参数”

对话框切换到一种不同的工作区。编辑“首选参数”对话框如下图：

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

“插入”栏（如下图）：包含用于将各种类型的“对象”（如图像、表

格和层）插入到文档中的按钮。每个对象都是一段HTML代码，允

许您在插入它时设置不同的属性。例如，您可以通过单击“插入”栏中

的“表格”按钮插入一个表格。也可以不雌“插入”栏而使用“插入”菜单

插入对象。

常用k图图.色固四图9甲

“文档”窗口显示您当前创建和编辑的文档。

“属性检查器”（如下图）：用于查看和更改所选对象或文本的

各种属性。

格武以0_式①’▼■1W业组■睢接-9:

*律收除体.林中立s发耐/*nceerar民标4D

*■]■华尢气水轮以滞留K2不我Jc尊景直—9n如一

」0券城@）以0要p口笊康e②J植@

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

“面板组”（如下图）是分组在某个标题下面的相关面板的集合。

若要展开一个面板组，请不击组名称左侧的展开的头：若要取消停匏

一个面板组，请拖动该组标题条左边缘的手柄。

＞CSs样式

►"代码

＞标签检查器

＞框集

＞应用程序

＞资源

＞历史记录

“文件”面板（如下图）使您可以管理您的文件和文件夹，无论它

彳门是Dreamweaver站点的一部分还是在远程服务器上。“文件”面板还

使您可以访问本地磁盘上的全部文件，类似于“ind。ws资源管理器。

货游文件・

1dwmx20(M।V・•本地视图1j

3^C8

>•*dmxRMm\A-'ES

曰0

Bigges

画OOOS.振

别彳

00b1.

交00b2.0f

01.gif

茎02gjf

wG3gjf

gif

当05cif

06.gif

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

Dreamweaver提供了多种此处未说明的其他面板、检查器和窗口。

若要打开其它面板，请使用“窗口”菜单。

1.3常用工具栏

“插入”栏

“插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。

当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该

按钮的名称。

常用v隧一位［图R•笫▼菌口昏;•用

某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，

该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜

单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver会插

入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的

默认操作都会改变。

“插入”栏有以下几个类别：

“常用”：使您可以创建和插入最常用的对象，例如图像和表格。

“布局”：使您可以插入表格、div标签、层和框架。您还可以从三个表

格视图中进行选择：“标准”（默认）、“扩展表格”和“布

局”。当选择“布局”模式后，您可以使用Dreamweaver布局

工具：“绘制布局单元格”和“绘制布局表格”。

“表单”：包含用于创建表单和插入表单元素的按钮。

“文本”：使您可以插入各种文本格式设置标签和列表格式设置标签。

“HTML”：使您可以插入用于水平线、头内容、表格、框架和脚本的

HTML标签。

“应用程序”：使您可以插入动态元素，例如记录集、重复区域以及记

录插入和更新表单。

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

“Flash元素”：使您可以插入Flash元素。

“收藏”：使您可以将“插入”栏中最常用的按钮分组和组织到某一常用

位置。

文档工具栏

文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间

快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的

拆分视图。

工具栏中还包含一些与查看文档、在本地和远程站点间传输文档

有关的常用命令和选项。

■■■■■■»—・■MM.

显示代码视图显示竦计视园设有浏览器/施查错误文件管理刷新

_j代成3拆分!」设计标题：|Drea2004入门、今狼❷UC跳

“示我码视图和曲十视图文档标题；在测筑器预筑式视因选项

以下对图中的指引进行说明：

代码视图：仅在“文档”窗口中显示“代码”视图。

设计视图：仅在“文档”窗口中显示“设计”视图。

拆分视图：在“文档”窗口同时显示“代码”视图和“设计”视图。

标题：可以直接在此处为文档设定标题，它将显示在浏览器

的标题栏中。

没有浏览器/检查错误：使您可以检查跨浏览器兼容性。

在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜

单中选择一个浏览器。文件管理：显示“文件管理”弹出菜单。

刷新：当您在“代码”视图中进行更改后刷新文档的“设计”

视图。

视图选项：允许您为“代码”视图和“设计”视图设置选项。

状态栏

状态栏提供与您正创建的文档有关的其它信息。

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

艾档大小花计下载时间

(badv)(tahletTabl=01>Ctr)(ta)(diwj(table)(tr)(td)Kosyess)1002x422T30E/9种

标签优挥涔自回太小弹出来单

标签选择器显示环绕当前选定内容的标签的层次结构°单击该层

次结构中的任何标签以选择该标签及其全部内容。比如：单击〈body)

可以选择文档的整个正文.

窗口大小弹出菜单(仅在“设计”视图中可见)用来将“文档”窗口

的大小调整到预定义或自定义的尺寸

“窗口大小”弹出菜单的右侧是页而的文档大小和估计下载时间。

1.4标尺和网格

在网页排版的过程中，如果希望对元素精确定位，则标尺和网格是

非常有用的工具。

1.显示标尺

在文档窗口中，默认状态下不显示标尺，如果需要显示标尺，以便

排版，可使用以下方法：在文档窗口中，选择''视图选项”命令，选

中“标尺”。如图：

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

2.显示网格

在文档窗口中，默认状态下不显示网格，如果需要显示网格，以便

精确布局，可使用以下方法。在文档窗口中，选择“视图选项”命令，

选中“标尺”，则在文档窗口中显示网格。显示网格之后的文档窗口如

图所示:

(■•8X

5范保出的重有的入2的文和口企今东对点）形出

走第团市地表单文本应期序无承收深

常远八

萧'•'WJ7

•।、

・—3

料

3斤设回

，82v

MA-<，

」"，：

:*¥>

•答，…

“000811u

JGH.u

itft，■】

，M

.jMnX

.I.ks1

I：

存包海推策）

户的‘市H0|20n出.1()si0gei0eo蛋日雄的

1-5快捷键

在运用Dreamweaver的过程中，熟练的使用快捷键，能达到事半

功倍的效果，而且是“高手”的体现在这里我把Dreamweaver的快捷

方式整理出来，希望对学员熟练掌握Dreamweaver有所帮助。

文件菜单

新建文档Ctrl+N

打开文件Ctrl+0或者将文件从［文件管理器］或［站点］窗口拖

动到［文档］窗口中

在框架中打开Ctrl+Shift+0

关闭Ctrl+W

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

保存Ctrl+S

另存为Ctrl+Shift+S

检查链接Shift+F8

退出Ctrl+Q

编辑菜单

撤消Ctrl+Z

重复Ctrl+Y或Ctrl+Shift+Z

剪切Ctrl+X或Shift+Del

拷贝Ctrl+C或Ctrl+Ins

粘贴Clrl+V或Shift+Ins

清除Delete

全选Ctrl+A

选择父标签Ctrl+Shift+<

选择子标签Ctrl+Shift+>

查找和替换Ctrl+F

查找下一个F3

缩进代码Ctrl+Shift+

左缩进代码Ctrl+Shift+[

平衡大括弧CtrlV

启动外部编辑器Ctrl+E

参数选择Ctrl+U

页面视图

标准视图Ctrl+Shift+F6

布局视图Ctrl+F6

工具条Ctrl+Shift+T

查看页面元素

可视化助理Ctrl+Shift+I

标尺Ctrl+Alt+R

显示网格Ctrl+Alt+G

靠齐到网格Ctrl+Alt+Shift+G

头内容Ctrl+Shift+W

页面属性Ctrl+Shift+J

代码编辑

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

切换到设计视图Ctrl+Tab

打开快速标签编辑器ctrl+T

选择父标签Ctrl+Shift+<

平衡大括弧Ctrl+,

全选Ctrl+A

拷贝Ctrl+C

查找和替换ctrl+F

查找下一个F3

替换Ctrl+H

粘贴Ctrl+V

剪切Ctrl+X

重复Ctrl+Y

撤消Ctrl+Z

向上选择一勺Shift+Ur

向下选择一行Shift।Down

选择左边字符Shift+Left

选择右边字符Shift+Right

向上翻页PageUp

向卜翻页PageDown

向上选择一页Shift+PageUp

向下选择一页Shift+PageDown

选择左边单词Ctrl+Shift+Left

选择右边单词Ctrl+Shift+Right

移到行首Home

移到行尾End

移动到代码顶部Ctrl+Home

移动到代码尾部Ctrl+End

向上选择到代码顶部Ctrl+Shift+Home

向下选择到代码顶部Ctrl+Shift+End

编辑文本

创建新段落Enter

插入换行Shift+Enter

插入不换行空格Ctrl+Shift+Spacebar

拷贝文本或对象到页面其他位置Ctrl+拖动选取项目到新位

置

选取一个单词双击

在设计视图和代码编辑器之间切换Ctrl+Tab

打开和关闭［属性］检查器Ctrl+Shift+J

检查拼写Shift+F7

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

格式化文本

缩进Ctrl+]

左缩进Ctrl+[

段落格式Ctrl+Shift+P

应用标题1到6到段落Ctrl+1到6

加粗选定文本Ctrl+B

倾斜选定文本Ctrl+I

编辑样式表Ctrl+Shift+E

处理表格

选择表格（光标在表格中）Ctrl+A

移动到下一单元格Tab

移动到上一单元格Shift+Tab

插入行（在当前行之前）Ctrl+M

在表格未插入一行在最后一个单元格Tab

删除当前行Ctrl+Shift+M

插入列Ctrl+Shift+A

删除列_Ctrl+Shift+-（连字符）

合并单元格Ctrl+Alt+M

拆分单元格Ctrl+Alt+S

处理框架

选择框架框架中Alt+点击

选择下一框架或框架页Alt+右方向键

选择上一框架或框架页A11+左方向键

选择父框架Alt+上方向键

选择子框架或框架页Alt+下方向键

管理超链接

创建超链接（选定文本）Ctrl+L

删除超链接Ctrl+Shift+L

在浏览器中定位和预览

在主浏览器中预览F12

在次要浏览器中预览Ctrl+F

插入对象

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

图象Ctil+Alt+I

表格Ctrl+Alt+T

Flash影片Ctrl+Alt+F

打开和关闭面板

属性Ctrl+F3

站点文件F5

资源Fil

CSS样式Shift+Fll

HTML样式Ctrl+Fll

行为Shift+F3

历史纪录Shift+FlO

框架Shift+F2

层F2

参考Ctrl+Shift+Fl

最小化所有窗口Shift+F4

最大化所有窗口Alt+Shift+F4

1.6建立站点

Wob站点是一组具有如相关主题、类似的设计、链接文档和资源。

Dreamweaver是一个站点创建和管理工具，因此使用它不仅可以创建

单独的文档，还可以创建完整的Web站点。创建Web站点的第一步

是规划。为了达到最佳效果，在创建任何Web站点页面之前，应对

站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内

容，页面布局的外观以及页是如何互相连接起来的。

请执行以下操作：

从“站点”菜单选择“管理站点”，出现“管理站点”对话框。

在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站

点”。出现“站点定义”对话框。

如果对话框显示的是“高级”选项卡，则单击“基本”。出现“站点定

义向导”的第一个界面，要求您为站点输入一个名称。

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

在文本框中，输入一个名称以在Dreamweaver中标识该站点。

该名称可以是任何所需的名称。

单击“下一步”。出现向导的下一个界面，询问您是否要使用服务器

技术。

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

您是否打算使用服务器披术，如ColdFuxion、ASP,NET、ASR、JSF或FE?

◎否，我不想使用那各黯技术..们

◎是，我想使用服务器技术。(Y)

k上一步B)|步QD〉"取消||可助

选择“否”选项，指示目前该站点是一个静态站点，没有动态页。

单击“下一步”。出现向导的下一个界面，询问您要如何使用您的

文件。

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器

（推荐）”的选项。在站点开发过程中有多种处理文件的方式，初学

网页制作的朋友请选择此选项。

单击该文本框旁边的文件夹图标。随即会出现“选择站点的本地根

文件夹”对话框。

单击''下一步"，出现向导的下一个界面，询问您如何连接到远程

服务器。从弹出式菜单中选择“无".您可以稍后设置有关远程站点的

信息。目前，本地站点信息对于开始创建网页已经足够了。单击“下一

步”，该向导的下一个屏幕将出现，其中显示您的设置概要。

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

dwmx2004的站点定义为

基本高级___________________________________________________________

站点定义।二^—7^j

您的站点包含以下设置：

本地信息：（格创建本地根文件夹）

站点名称：dnmr2004

本地根文件丧：D:（A-老小孩\dnjx\Jwmx_2004\

运程信息：

访问：我将在以后完成此设置。

测试服务器；

访问：我将在以后完成此没置。

可以使用高级选项卡对您的站点进行进一步配置。

<上一步B）先成g）取消帮助

单击“完成”完成设置。随即出现“管理站点”对话框，显示您的

新站点。单击“完成”关闭“管理站点”对话框。

现在，已经为您的站点定义好了一个本地根文件夹。接下来就可

以编辑自己的网页了。

1.7创建页面

本节介绍如何应用Dreamweaver创建网页。

新建页面，可以使用Dreamweaver起始页创建新页，或者可以选

择“文件”-->“新建”，弹出如下对话框：

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

书常热模板

类别基本页预宽:

基本页NT\IL

动无页T,模板

模板页库项目

其触cSs

CSS样式表

JaraSeript（无预览i

框架集XK

页面设计（CSS）动作脚本

英面设计

页面设计（有辅助功能的

描述

NML文档

□使文档与xhTML.兼容亿

帮助⑩首选参数Q）.获取剪多内密创建⑻取消（E）

从各种预先设计的页面布局中选择一种。比如：选择“基本

页"HTML,点击创建按钮。Dreamweaver即展开工作区界面（一个空

白页）:

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

您可以在这个空白页添加表格和输入文本进行编辑o如果您要向

页面添加图片或其它元素，应先保存这个空白页。

1.8页面制作引例

现在，以下边的简单网页为例，叙述一下制作过程。简单网页如

下图：

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

关岛员色片站-Tetkei6Trwee

女件倒候口）生石山敢就山工具辽在峡很热带的

B步改

块址圈bLe:〃。：Bocueett/来牵各站点Dl/htnl/Omlsllnlu.hnd

要确景色风院图来货色路

美丽景色

欢通浏览111

华意四缺电

在开始制作之前，我们先对这个页面进行一下分析。看看这个页面

用到了那些东西。

口网页顶端的标题是“美丽景色网站”。

口网页中间是一幅图片。

□最下端的欢迎词是一段文字。

口网页背景是粉颜色。

知道了这个网页的结构以后我们就来可以制作了。

首先启动Dreamweaver,确保你已经用站点管理器建立好了一个

网站（根目录）。

为了制作方便，请您事先打开资源管理器，把要使用的图片收集

到网站目录images文件夹内。

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

【插入标题文字】进入页面编辑设计视图状态。在一般情况下，编

辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。

如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入

法输入“美丽景色”四个字。字小不要紧，我们可以对它进行设置。

【设置文字的格式】选中文字，在上图属性面板中将字体格式设置成

默认字体，大小可任意更改字号。并选中“B”将字体变粗。

【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图

标，在弹出的颜色选择器中用滴管选取颜色即可。

CCCCCCC目标江

【设置网页的标题和背景颜色】点击“修改”菜单选〃页面屈性〃。系统

弹出页面属性对话框（如下图）

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

应而E!

请在标题输入框填入标题“美丽景色网站”。

设置背景颜色：网页背景可以是图片，也可以是颜色。此例是

颜色。如上图打开背景颜色选择器进行选取。如果背景要设为图片，

点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片

文件，点击确定按钮。

设计视图状态，在“美丽景色”右边空白处单击鼠标，回车换一行，

按照以下的步骤插入一幅画图片，并使这张图片居中。您也可以通过

属性面板中的左对齐按钮让其居中。

【插入图像】选择以下任意一种方法：

(D使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”

对话框，选中该图像文件，单击确定。如下图：

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

（2）使用插入栏（如下图）：单击插入栏对象按钮＞选按钮，弹

出“选择图像源文件”对话框，其余操作t上。

常用v

3）使用面板组“资源”面板（如下图）：占图按钮，展开根目录

的图片文件夹，选定该文/牛，用鼠标拖动至工作区合适位置。

注：

为了管理方便，我们把图片放在“images”文件夹内。如果图片

少，您也可以放在站点根目录下。注意文件名要用英文或用拼音文

字命名而且使用小写，不能用中文，否则要出现一些麻烦。

一个图片就插入完毕了。（插入*.swf动画文件，选择“插入”

菜单》媒体》Flash）.

【输入欢迎文字】在图片右边空白处单击，回车换行。仍然按照上述

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

方法，输入文字“欢迎浏览”然后，利用属性面板对文字进行设置。保

存页面。

【预览网页】一个简单的页面就这样编辑完毕了。在页面编辑器中按

F12预览网页效果。网站中的第一页，也就是首页，我们通常在存盘

时取名为index,htm©

【小结】在今天的教程中我们制作了一个简单的网页。

内容有四：

①图片插入和对齐设置；

②文字的格式、颜色和加粗等设置；

③背景颜色的设置；

④预览网页，查看实际效果。

不仅要掌握还要举一反三反复练习。

第二章CSS概述

一、xhtmlcss基础知识

1）文档类型

当我们用dreamweaver新建一下html格式文档时，查看源代码,

会发现代码最上部有如下这句话：

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

这句话标明本文档是过渡类型，另外还有框架和严格类型，目前

一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许

使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在

制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这

句话，删除它后可能引起某些样式表失效或其它意想不到的问题。

2)语言编码

接下来我们还会发现这样一句话：

它标示文档的语言编码。就像我们平时所说的汉语、英语一样。

这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用

的编码是UTF-8编码，它是国际通用的编码。不管我们采用哪种编码，

有一点就是包含的css样式表和其它文件也必须和本文档的编码一样，

要不就会出现乱码。

3)html标签

html标签在页面中都必须结束。成对的标签以“/标签名”结束，

有些单一的标签在本身的结尾打上/来结束，这是xhtml代蚂编写的规

范。

成对的标签：

<head>{•,,}</head>

<body>(•••)</body>

<div>{•,,}</div>

<span>{,,,}</span>

<p>

单一的标签:

<br/>

还需说明一点的是按xhlml规范，标签必须用小写。

4)css样式

比方说，我们要用红色作为网页的背景色：

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

用HTML的话，我们可以这样：

用CSS的话，我们可以这样获得同样的效果：

body{background-color:4FF0000;）

你会注意到，HTML和CSS的代码颇有几分相似。上例也向你展示了基

本的CSS模型：

但是把CSS代码放在哪里呢?这正是我们下面要讲的。

为一个HTML文档应用CSS

为HTML文档应用CSS,有三种方法可供选择。下面对这三种方法进行

了概括。我们建议你对第三种方法（即外部样式表）予以关注。

方法1:行内样式表（style属性）

为HTML应用CSS的一种方法是使用HTML属性style。我们在上例的基

础之上，通过行内样式表将页面背景设为红色：

<html><head><titlc>例子〈/title></head>

<p>这个页面是红色的</p></body>〈/html>

方法2:内部样式表（style元素）

为HTML应用CSS的另一种方法是采用HTML元素style。比如像这样：

<html><hcad><titlc>例子</title>

body{background-color:ttFFOOOO;}</style></head>

<body〉<p>这个页面是红色的〈/pX/bodyX/html）

方法3:外部样式表（引用一个样式表文件）

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

我们推荐采用这种引用外部样式表的方法。在本教程之后的例子中，

我们将全部采用该方法。外部样式表就是一个扩展名为CSS的文本文

件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本

地硬盘上。例如，比方说你的样

式表文件名为style,css,它通常被存放于名为style的目录中。就

像下面这样：

现在的问题是：如何在一个HTML文档里引用一个外部样式表文件

(style,css)呢？答案是：在HTML文档里创建一个指向外部样式表

文件的链接(link)即可，就像下面这样：<link

/>注意要在href属性里

给出样式表文件的地址。这行代码必须被插入HTML代码

的头部(header),即放在标签<head>和标签</head》之间。就像这样：

〈html>〈head><title>我的文档〈/title)<link

</head><body>...这个链接告诉浏览器：在显示该HTML文件时，

应使用给出的CSS文件进行布局。

这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。

换句话说，可以用一个CSS文件来控制多个HTML文档的布局。

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有

网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免

你手工一一修改这100个HTML文档的工作。采用外部样式表，这样的

修改只需几秒钟即可搞定一一修改外部样式表文件里的代码即可。

让我们来实践刚刚所学到的知识。

自己试试看打开记事本（或其他文本编辑器），创建两个文件

个HTML文件，一个CSS文件——它们的内容如下：

default,htm

<htmlXhead>〈title>我的文档</打116>〈link

<bodyXhl>我的第一个样式表</hl></body>〈/html>

style,css

body{background-color:#FF0000;}然后，把这两个文件放在同

一目录下。记得在保存文件时使用正确的扩展名（分别为“htm”和

“css”）。用浏览器打开default.htm,你所看到的页面应该具有红

色背景。恭喜!你已经完成了自己的第一个样式表！

5）css优先级

id优先级高于class

后面的样式覆盖前面的

指定的高于继承

育人犹如春风化雨，授业不惜蜡炬成灰

教学内容批注

行内样式高于内部或外部样式

总结：单一的（id）高于共用的（class）,有指定的用指定的，无指定则继

承离它最近的

6）css盒模型组成

css盒模型是本节教程的重点。前面几个知识点，如果您会用表格

布局的话，就非常好理解和掌握了。这里的盒模型是和table布局的一

个不同点。学习web标准，首先要弄懂的就是这个盒模型，这就是D1V

排版