Dreamweaver CS5网页制作项目二
项目一初识Dreamweavercs5(上机)2
项目一网页制作基础任务二初识Dreamweaver CS5一、教学目标1、知道创建站点。
2、掌握创建网站的首页及子页。
二、学生特征分析学生利用Dreamweaver cs5软件，尝试创建站点，首页、子页，并制作一个简单的首页页面。
三、课型实训课四、教学重点创建一个网站站点：名称为“青春我美丽”。
五、教学难点创建一个首页，另创建子页名称为“新闻、文章、下载、图片”。
六、课前准备机房七、课时安排2课时（45分钟×2）八、教学过程1、复习思考与组织教学初步创建站点，首页、子页及首页页面。
2、引入新课老师先讲解步骤方法及演示引入课题。
3、讲授新课在首页中编辑内容《见素材》。
1、准备好网页素材。
2、创建青春我美丽的站点。
3、创建子页“新闻、文章、下载、图片”并在主页中编辑内容。
4、保存并用浏览器浏览网页看其较果。
如下图所示。
4、巩固深化尝试建立首页页面。
5、课堂小结A、教学内容与时间分配：第一节课：一、在软件中定义站点（10分钟）二、在软件中管理站点（10分钟）三、网站文档的基本操作（25分钟）第二节课上机操作（45分钟）B、教学活动：通过软件功能解析深入学习软件功能和制作特点。
C、教师活动：通过软件相关功能的解析学习Dreamweaver CS5工作界面的基本操作和设置文件头的基本方法。
D、学生活动：除了课堂讲解的软件功能外，还可以根据相关的工具特点进行简单的练习和操作。
布置作业上机作业（见素材）。
九、板书设计十、教学反思我和学生一起学习了怎样建立一个自己的站点，并且在自己的站点内建立一张网页，然后在这张网页内输入文字、插入图片、设置网页背景等，并进行一些格式的设置。
但仍然有一小部分学生没有完成，于是我就查看了一下学生的来源，发现有的学生初中来自农村中学，动手能力相对较差一点。
网页设计第2章 Dreamweaver CS5基础
2.2.2新建和保存网页
1．新建网页文档 2．保存网页文档
2.5网页文档头部信息设置
META标签位于在网页<head>…</head>标签之间，用来 记录当前页面的相关信息，如作者和版权信息、搜索关 键字等，它也可以用来向服务器提供信息，如页面的失 效日期、刷新时间间隔等。 META标签分为http-equiv属性和name 属性。name属性主 要用于描述网页，如Keywords（关键字）、description （网站内容描述）等。http-equiv属性类似于HTTP的头部 协议，它回应给浏览器一些有用的信息，以帮助正确和 精确地显示网页内容，如Refresh（刷新）等。
第2章 Dreamweaver CS5基础
网页设计与制作 Dreamweaver CS5 标准教程 邢帅教育
本章学习主要内容：
1.Dreamweaver CS5工作界面 2.创建网站站点 3.管理站点文件和文件夹 4.管理站点 5.网页文档头部信息设置 学习QQ群69364320
2.6课堂案例-慈善救助中心
案例学习目标：学会创建站点、管理站点文 件和文件夹。 案例知识要点：创建站点、移动文件、重命 名文件。 素材所在位置：光盘/案例素材/ch02/课堂案 例-慈善救助中心。 案例效果如图2-29所示。
2.5网页文档头部信息设置
2.5.1插入搜索关键字 2.5.2设置描述信息 2.5.4插入版权信息 2.5.3设置刷新时间 可以指定浏览器在一定的时间后重新加载当前页 面或转到不同的页面，比如论坛网站中通常要定 时刷新页面，以便实时反映在线用户信息、离线 用户信息以及动态文档的实时改变情况。
Dreamweaver CS5实例教程 (2)
效果图
2.1.2 输入文本
应用Dreamweaver CS5编辑网页时，在文档窗口中光标为默 认显示状态。要添加文本，首先应将光标移动到文档窗口中的编 辑区域，然后直接输入文本，就像在其他文本编辑器中一样。打 开一个文档，在文档中单击鼠标左键，将光标置于其中，然后在 光标后面输入文本。
2.1.14 设置文本样式
文本样式是指字符的外观显示方式，例如加粗文本、倾斜 文本和文本加下划线等。
2.1.15 段落文本
段落是指描述一个主题并且格式统一的一段文字。在文档窗口 中，输入一段文字后按Enter键，这段文字就显示在<P>……</P>标 签中。
2.2 项目符号和编号列表
课堂案例——快乐购物网页 设置项目符号或编号 修改项目符号或编号 设置文本缩进格式 插入日期 特殊字符 插入换行符
2.1.6 设置页边距
按照文章的书写规则，正文与纸的四周需要留有一定的距 离，这个距离叫页边距。网页设计也如此，在默认状态下文档 的上、下、左、右边距不为零。 修改页边距的具体操作步骤如下。 （1）选择“修改 > 页面属性”命令，弹出“页面属性” 对话框。 （2）根据需要在对话框的“左边距”、“右边距”、“上 边距”、“下边距”、“边距宽度”和“边距高度”选项的数 值框中输入相应的数值。
2.1.7 设置网页的标题
HTML 页面的标题可以帮助站点浏览者理解所查看网页的 内容，并在浏览者的历史记录和书签列表中标志页面。文档的 文件名是通过保存文件命令保存的网页文件名称，而页面标题 是浏览者在浏览网页时浏览器标题栏中显示的信息。
2.1.8 设置网页的默认格式
电子商务网页制作-项目DreamweaverCS5入门
了解Dreamweaver CS5的视图管理
2．保存自定义工作区布局 Dreamweaver CS5可以保存自定义的
工作区设置。打开“窗口”菜单，选择“工 作区布局”子菜单中的“新建工作区”命令 ，可以建立自定义工作区设置；当你需要将 工作区还原成原先设置过的状态时，可以通 过打开“窗口”菜单，选择“工作区布局” 子菜单，或通过工作区切换器，然后选择前 面保存过的布局名称来恢复成该工作区布局 设置。
试一试——结识Adobe家族新成员
第三步：单击起始页中“新建”栏中的“HTML”选项，新建一个HTML空白文 档，在工作区设计视图窗口中输入一段文字。
试一试——结识Adobe家族新成员
第四步：打开“文件”菜单选择“保存”命令，在弹出的“另存为”对话框中 选择保存的位置，单击“保存”按钮将文档保存。
Adobe Dreamweaver CS5 是一款所见即所得的网页制作软 件，它功能强大，简单易学，即 使你是初次学习，也能够很快地 使用它制作出简单的网页来。
试一试——结识Adobe家族新成员
第一步：双击桌面上的DW图标，运行Dreamweaver CS5软件。 第二步：观察Dreamweaver CS5的界面组成。包括菜单栏、起始页、面板组和 属性面板等。
Dreamweaver CS5的窗口组成
Dreamweaver CS5的窗口界面如图2-13所示。包括：标题栏、菜单栏、插入 栏、文档工具栏、文档窗口、状态栏、属性面板和面板组。
Dreamweaver CS5的窗口组成
1．菜单栏 菜单栏提供了Dreamweaver CS5的所有功 能，一共包含十个菜单。 2．文档工具栏 文档工具栏中显示的是已经打开的各个文档 的图标，单位击各图标可以在不同文档间进 行切换。 3．文档窗口 文档窗口是网页文档的编辑区，它用于显示 当前正在编辑的网页文档。设计者可以在文 档区域中进行各种编辑操作。 4．标签选择器 标签选择器用于快速选择网页中的各种标签 ，在网页布局时非常有用。
计算机网络与网页制作DreamweaverCS5案例教程课程设计 (2)
计算机网络与网页制作DreamweaverCS5案例教程课程设计一、课程设计背景计算机网络和网页制作是当今社会中必不可少的技能，尤其是在信息化的今天。
因此，从理论引导到实践培养成为了当今计算机网络课程中的一个重要方向，而且学生在课程设计和实践中更容易理解和很好地掌握计算机网络以及网页制作的知识。
本次课程设计以 DreamweaverCS5 为案例，结合计算机网络的基础理论，旨在让学生深入了解计算机网络和网页制作相关知识，并在实践中快速掌握DreamweaverCS5 的使用及网页制作技术。
二、课程设计目标1.掌握计算机网络的基础概念、原理和协议等2.熟悉 DreamweaverCS5 的操作界面、基本功能和常见工具，能够快速制作规范化的网页3.了解 CSS、HTML、JavaScript 等网页设计语言的基本语法、标签、属性等4.实践中掌握网页的版面设计、图文处理和内容更新等技术要点5.具备对网页的浏览、编辑、上传等操作的能力三、课程设计内容1.计算机网络基础–网络拓扑及其分类–网络协议及协议分层–网络设备及其功能–IP 地址及其分类–子网掩码及其使用2.DreamweaverCS5 基础操作–DreamweaverCS5 界面介绍–网页文件的创建、保存和预览–网页的基本结构及常见标签–CSS 属性的基本使用–内部链接和外部链接的制作3.DreamweaverCS5 进阶操作–页面版式设计和页面导航设计–文字格式设计和图像处理–表格的制作和编辑–表单的设计和制作4.网页上传和浏览网页–网站的建设和维护–网页的上传和更新–浏览器的使用及网页浏览技巧四、预期效果通过本次课程的设计，学生们应当具备一定的计算机网络和网页制作的理论及实践基础。
能够运用 DreamweaverCS5 工具，熟悉网页的制作过程，掌握常用的网页制作技术和方法。
在实践中，独立完成规范性网页的制作，有一定的网站建设和维护能力。
五、课程设计参考资料1.《计算机网络》第七版，谢希仁主编，清华大学出版社2.《Dreamweaver CS5 网页设计和制作教程》第三版，余珂编著，人民邮电出版社3.《CSS + HTML网页开发实践全程录》，颜海镜编著，机械工业出版社4.《JavaScript高级程序设计》第三版，Nicholas C.Zakas著，人民邮电出版社以上为该课程设计大致内容和目标，希望能够为学生们提供一些基础的指导和学习路径。
DreamweaverCS5自学教程第二课：制作网页的基本操作.doc
第二课：制作网页的基本操作2-1 添加文本1
1、网页文本的输入方式
(1)、导入预先保存的文档
(2)、直接输入或复制粘贴
2、首页命名
3、网页的背景图
片通过下方的页
面属性来设置。
2-2 添加文本2
1、在网页中添加一个能自动更新的日期时间。
2、在网页中连续输入多个空格的设置。
在“编辑”菜单中选择“首选参数—常规--允许多个连续的空格”，确定。
3、添加水平线。
选中需要添加的位置，选择“插入—HTML—水平线”
在下放的属性面板中设置水平线
水平线的颜色需要通过代码进行设置，<hr>代码表示一条水平线，括号内加空格设置属性，保存后预览即能看见设置的效果。
4、特殊字符的插入。
2-3 编辑文本
1、网页文件中的文本输入、删除、复制和粘贴等编辑与DOC文档的操作相似。
2、搜索网页中查找或替换某一字词
搜索结果的显示点击每一项即显示精确位置替换和撤销Ctrl+Z。
网页设计与制作案例教程(Dreamweaver CS5+Div+CSS+JavaScript)第二章1新
JPEG（联合图像专家组
JPEG最多支持1670万种颜色，当网页上需 要全彩色图像（如高清晰照片）时，最好 选用该格式的图像。
PNG（可移植网络图形）
Fireworks的默认文件格式。该格式是一种替代 GIF格式的无专利权限制的格式，具有GIF和 JPEG的全部优点，该格式可保留所有原始层、 矢量、颜色和效果信息（如阴影）
各种对齐方式的含义： 默认值：指定基线对齐。 基线：将文本（或同一段落中的其它元素）的基线与图像的底部对 齐。 顶端：将图像的顶端与当前行中最高项（图像或文本）的顶端对齐。 居中：将图像的中线与当前行的基线对齐。 底部：同基线，将图像的底部与当前行对齐。 文本上方：将图像的顶端与文本行中最高字符的顶端对齐。 绝对居中：将图像的中线与当前行文本的中线对齐。 绝对底部：将图像的底部与文本行的底部对齐。 左对齐：将所选图像放置在左侧，文本在图像的右侧换行。 右对齐：将所选图像放置在右侧，文本在图像的左侧换行。
网页图像设计工具
1.photoshop 2.fireworks Fireworks与Dreamweaver和Flash并称“网页 三剑客”，专门用于网页图形的编辑软件。 Fireworks凭借其简便、易用等特点在Web 图形设计和制作领域得到了广泛应用。
同时编辑位图和矢量图形的功能。Fireworks能把位图 处理和矢量处理完美的结合在一起，使得网页图形设计 人员不必在多种图形设计软件之间频繁切换。 大图切割功能。在网页中使用一大幅图像时会影响网页 的下载速率，此时往往需要将大图片切割成多个小图片， Fireworks提供了切割工具可以将一个大图片分割成不 同色深的多个小图片，并且生成相应的网页文件或代码， 从而减小网页的重量。 制作具有动态效果的切图功能。 制作动画功能。利用Fireworks可以合并图象形成动画、 使用符号生成动画效果和手工绘制动画。
实验二 Dreamweaver CS5基础
实验二一、实验项目名称：Dreamweaver CS5基础二、实验目的和要求：1.掌握新建网页文档、保存与打开网页、设置网页属性的方法；2.熟悉建立本地站点、设置首选参数的基本方法；3.熟悉编辑、复制和删除站点的基本方法；4.熟悉创建站点文件夹和文件、重命名站点文件与文件夹、删除站点文件与文件夹的方法。
三、实验原理和图例1.建立目录结构的要求：(1)不要将所有文件都存放在根目录下，会造成文件管理混乱。
(2)按栏目内容建立子目录。
(3)在每个栏目目录下都建立独立的images、music和flash目录，保存图像、音乐、视频和flash资源。
(4)目录的层次不要太深，建议不要超过3层。
(5)目录使用意义明确的英文名称，不要使用中文名称。
(6)不要使用过长的目录名称。
2.网页命名的规则：网页文件名通常使用小写英文，不能使用空格，最好不要使用特殊字符，不用中文。
3.“幽幽我心的个人网站”目录结构四、实验基本描述本实验将通过一个“幽幽我心的个人网站”的创建，学习网站从规划到建立的流程，自己动手，打造属于自己的站点。
五、实验步骤：1.创建站点操作一启动软件Dreamweaver CS5单击“开始”|“程序”|“Macromedia”|“Macromedia Dreamweaver CS5”菜单项。
操作二创建网站站点在Dreamweaver CS5中，选择“站点”|“新建站点”菜单。
2.管理站点在Dreamweaver CS5中，选择“站点”|“管理站点”菜单。
操作一导出站点操作二导入站点操作三复制、删除与编辑站点3.创建网站目录结构操作一启动Dreamweaver，打开“幽幽我心的个人网站”操作二使用文件面板创建网站首页在文件面板中，选择“幽幽我心的个人网站”右键单击，新建一个网页文件，命名为index.html。
操作三在文件面板双击打开首页文件、设置其页面属性在首页文件index.html的页面属性中，设置左边距和上边距为0像素。
Dreamweaver CS5 网页设计与应用(第2版)第1章初识Dreamweaver
1.2.3 定义新站点
创建本地站点的步骤 （1）选择“站点 > 管理站点”命令，启用“管理站点”对话框。 （2）在对话框中单击“新建”按钮，在弹出的菜单中选择“站点”命 令，弹出“站点设置对象 未命名站点1”对话框。在对话框中，设计者通过 “基本”选项卡建立不同的站点，对于熟练的设计者而言，通常在对话框 “高级”选项卡的“本地信息”分类中，根据需要设置站点。
1.1 工作界面
Dreamweaver的工作区将多个文档集中到一个窗口中，不仅降低了系 统资源的占用，还可以更加方便地操作文档。Dreamweaver CS5的工作窗 口由5部分组成，分别是“插入”控制面板、“文档”工具栏、“文档” 窗口、控制面板组和“属性”控制面板。Dreamweaver的操作环境简洁明 快，可大大提高设计效率。
1.3.2 编辑站点
有时用户需要修改站点的一些设置，此时需要编辑站点。例如，修改站点 的默认图像文件夹的路径，其具体的操作步骤如下。
（1）选择“站点 > 管理站点”命令，启用“管理站点”对话框。 （2）在对话框中，选择要编辑的站点名，单击“编辑”按钮，弹出“站点 设置对象 未命名站点1”对话框，选择“高级设置”选项卡，此时可根据需要 进行修改，单击“确定”按钮完成设置，回到“管理站点”对话框。 （3）如果不需要修改其他站点，可单击“完成”按钮关闭“管理站点”对 话框。
开始页面
“首选参数”对话框
1.1.2 不同风格的界面
选择 “窗口 > 工作区布局”命令，弹出其子命令菜单，选 择“经典”或“编码器”命令。选择其中一种界面风格，页面会 发生相应的改变。
Dreamweaver CS5网页设计与制作教程第二章
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> </body> </html>
2.1 XHTML概念-常见的XHTML标签
表格标签 表格是传统网页布局的常用标签，它允许我们把各种内容、数据放在表 格单元格内。创建表格一定包含下面三个标签。 <table>：表格标签，用来定义HTML表格。 <tr>：表格行标签，定义HTML表格中的行。 <td>：单元格标签，定义HTML 表格中的标准单元格。 框架标签
<!DOCTYPE>, <html>与</html>, <head>与</head>,<body>与</body>标签
2.1 XHTML概念-常见的XHTML标签
网页可以包含文字、图片、表格、声音等元素，因此有各种各样的标签 来描述这些元素。特别地，不同的元素可能以不同的方式呈现给浏览者， 所以标签又将会有属性与之对应。浏览器则对这些标签及属性进行解释 并生成页面，于是就得到现在所看到的各式各样的网页效果。 基本标签 <style>：样式标签，用于定义HTML文档的样式 <h1>-<h6>：标题标签，可以用来定义文档中不同等级的标题 <p>：段落标签，用于定义文档的段落 <hr>：水平线标签，作用是在文档中插入水平线，起分隔内容的作用 <br />：换行标签，在文档中插入一个换行 <!--注释的内容-->：注释标签
19506-Dreamweaver CS5网页制作-电子教案- 模块2
实训2 快乐驿站——创建与管理本地站点 2.1 Dreamweaver CS5的工作界面 2.2 站点的创建与管理 2.3 文档的基本操作 实训3 快乐驿站——使用网页元素和创建超链接 2.4 文本的输入和编辑 2.5 页面属性 2.6 图像的插入与编辑 2.7 多媒体元素 2.8 超级链接 实训4 漫游世界——表格布局页面 2.9 表格布局 实训5 数码频道——使用框架布局网页 2.10 框架（框架集）布局 实训6 古诗欣赏——模板的应用 2.11 模板 思考与实训2
2.4 文本的输入和编辑
2．文本的分段和换行
网页中文本的换行包括自动换行和强制换行。在Dreamweaver CS5中， 输入的文本（数字和字母除外）到达文档窗口右边界时，会自动转到下 一行。若想在指定的位置换行，则需要强制换行，强制换行有段落换行 和换行符换行两种方式。 （1）段落换行 若想生成新的段落，在两段之间出现一空行，可采用以下方法进行换行。 ① 在需要换行的位置直接按【Enter】键。 ② 在代码视图窗口中输入段落标记<p>和</p>。 （2）换行符换行 若不想生成新的段落，两行之间不出现空行，可采用以下方法进行换行。 ① 按【Shift+Enter】组合键。 ② 选择菜单“插入→HTML→特殊字符→换行符”命令。 ③ 选择“插入”面板中的“文本”类别，在“字符”下拉菜单中选择 “换行符” 。 ④ 在“代码”视图窗口中，输入换行标记<br/>。
① 直接通过键盘输入文本。 ② 在其他应用程序中选择文本，按【Ctrl+C】组合键复制，在 Dreamweaver CS5的“文档”窗口中，选择菜单“编辑→粘贴”命令 （或按【Ctrl+V】组合键）复制文本。 ③ 选择菜单“文件→导入→Word文档”命令，弹出“导入Word文档” 对话框，选择要导入的Word文档，单击“打开”按钮，将该Word文档 中的全部文本添加到“文档”窗口中。
网页设计与制作案例教程(Dreamweaver CS5+Div+CSS+JavaScript)第二章2
2．编辑图像设置 单击“编辑图像设置”按钮 ，弹出“图像预览”对话框， 如图2-29所示，可对图像进行优化操作。在此对话框中，可 将图片进行GIF和JPEG格式的转换，可设置压缩等级，进行 可视化裁剪，如果是GIF动画图像，还可以进行帧速和循环 播放的控制。右边的预览区可将一幅图像最多分4个窗口显 示，分别对其设置，以观察设置效果。 3．裁剪图像 裁剪可以删除图像中选定区域以外的多余部分。选定图像， 单击裁剪按钮 ，所选图像周围会出现裁剪控制点，拖动鼠 标调整裁剪控制点，在边界框内部双击，或按下〈Enter〉键 均可完成裁剪操作，如图2-30所示。在图像外的任意地方单 击可取消选择，选择“编辑→撤消裁剪”命令或按下 “Ctrl+Z”组合键可撤销刚才的裁剪操作，恢复原始图像。
2.3.1 插入图像
在网页中ቤተ መጻሕፍቲ ባይዱ入一幅图像，需要预先准备好图像文件，然后 在插入点通过菜单命令或面板按钮方便地插入图像。 操作步骤如下： 1）新建一个空白HTML文档，并将其以“2-2.html”为文件 名保存。 2）将光标置于页面上方，输入网页的主题文字“海南风 光”，并根据上面介绍的方法适当设置文本的格式。 3）按下回车键，将光标置于页面的下一行，选择“插入→ 图像”菜单命令；或者单击“插入”面板“常用”标签中 的按钮 ，打开“选择图像源文件”对话框，在“查 找范围”下拉列表中选择图像所在的目录，在预览区选择 要插入的图片，如图2-25所示。
图2-26 “图像标签辅助功能属性”对话框
图2-27 插入的图像
2.3.2 设置图像属性
在网页中插入图像后，往往需要对其进行属性设置，例 如，调整图像的大小、对齐方式、设置边框等，这些操 作可以通过如图2-28所示的“属性”面板来完成。
Dreamweaver CS5网页设计教程第2章
设置段落格式
设置CSS字体格式
（2）设置对齐方式
Dreamweaver中的对齐方式包括左对齐、右对齐、居中对齐和两 端对齐等。
设置段落格式
设置CSS字体格式
（3）设置文本缩进
文本缩进是指文本与页面边缘的距离，其设置方法很简单，只需 选择文本或将插入点定位到该文本中，单击“属性”面板中的 按钮，单击“内缩区块”按钮 可增加缩进距离；单击“删除内缩 区块”按钮 可减少缩进距离。
选择需要添加项目符号的段落，单击“属性”面板中的 钮，然后单击“项目列表”按钮 。 按
创建列表
编辑项目符号和编号
无论是项目符号还是编号，只要选择了相应的段落，并在“属性” 面板中单击 按钮，均可在打开的“列表属性”对话框中进行设 置。
设置水平线
在需要插入水平线的位置的前一段定位插入点，选择【插入】/ 【HTML】/【水平线】菜单命令。
为网页中的文本设置HTML字体格式的操作非常简单，选择文本 后，在操作界面下方的“属性”面板中单击 按钮，然后通过调 节面板中的参数进行设置即可。
设置文本字体格式
设置CSS字体格式
在“属性”面板中进行设置。
设置段落格式
设置CSS字体格式
（1）设置标题格式
选择需设置格式的标题文本（也可选择其他文本），单击“属性” 面板中的 按钮，在“格式”下拉列表框中选择需要的标题格式 即可。
第2章 输入与格式化 文本
高等职业院校立体化精品系列规划教材
学习目标
知识目标
● 掌握文本段落的输入与换行分段的操作。 ● 熟练设置文本格式的方法。 ● 熟悉项目列表的设置和水平线的创建方法。
课堂实例预览
主要内容
1
2 3 制作“公司简介”页面 制作“企业文化”页面 实训——制作“快乐旅游”网站首页
实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第5章 使用CSS样式
学习目标能够创建、编辑、删除CSS样式能够创建并灵活运用类样式能够创建标签样式重新定义HTML标签 能够创建并灵活运用复合内容样式。
能够附加外部样式表文件。
本章内容5.1 类样式的创建与应用5.2 标签样式与复合内容样式的创建与应用5.1 类样式的创建与应用5.1.1 案例制作：书法背后的人生通过本案例的操作，你将学会:1）创建CSS样式的一般方法。
2）如何创建和应用类样式。
5.1 类样式的创建与应用5.1.1 案例制作：书法背后的人生操作步骤：（1）规划站点新建文件夹“shufa_beihou”，将素材文件夹中所有文件和文件夹拷贝到“shufa_beihou”文件夹中。
（2）定义站点在Dreamweaver CS5中，单击菜单“站点”→“新建站点”命令，通过“站点设置对象”对话框定义站点，站点名称为“菁菁家园”，本地站点文件夹设置为shufa_beihou文件夹。
打开shufa_rensheng_1.html。
（3）创建并应用类样式CSS样式“.content”该样式用来修饰文章内容，字体为宋体，大小为9pt，颜色代码为#090，行高140%。
1）选择菜单“窗口”→“CSS样式”命令，打开“CSS样式”面板，如果“CSS样式”命令前已打对勾，表示“CSS样式”面板已经打开，无需执行此命令。
2）单击“CSS样式”面板右下角的新建CSS规则按钮，打开“新建CSS规则”对话框。
5.1 类样式的创建与应用5.1.1 案例制作：书法背后的人生操作步骤：3）在对话框中“选择器类型”选择“类（可用于任何HTML元素）”，“选择器名称”文本框中输入“.content”，“规则定义”选择“仅限该文档”，如图所示。
5.1 类样式的创建与应用5.1.1 案例制作：书法背后的人生操作步骤：4）单击“确定”按钮，打开“CSS规则定义”对话框，在左侧“分类”列表中选择“类型”，右侧设置字体为宋体，大小为9pt，行高140%，颜色为#090，如图所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
二、在表格中添加或删除行与列
在使用表格组织大量信息时，往往需要在创建 好的表格中添加或删除行与列，以增加或减少 记录。
任务实施——为“欧妮雅”网站子页构建布局
在学习了拆分与合并单元格，以及在表格中添加或 删除行与列的方法后，下面通过构建“欧妮雅”网 站子页的布局来进一步巩固前面的学习（具体操作 见视频2-3）。
二、选择表格和单元格
1．选择表格
•
• • •
将鼠标光标移至单元格边框线上，当鼠标光标变为 或 形 状时单击鼠标左键。当表格外框显示为黑色粗实线时，就 表示该表格被选中了。 将鼠标光标移至表格外框线上，当鼠标光标变为 形状时， 单击鼠标左键即标签选择 器中单击对应的“<table>”标签，该表格便处于选中状态。 将插入点置于表格的任意单元格中，表格上方或下方将显 示绿线标志，单击最上方或最下方标有表格宽度的绿线中 的 ，在弹出的下拉列表中选择“选择表格”命令。
在学习了表格和单元格属性的设置方法后，接下 来通过完善“欧妮雅”网站主页的布局，来进一 步加强和巩固前面的学习（具体操作见视频2-1）。
任务三 表格的高级应用
任务说明
在实际的网页制作中，经常需要拆分或合并单元 格以及插入、删除行和列，本任务就来学习这些 知识。此外，还将应用所学知识为“欧妮雅”网 站子页构建布局。
项目二 应用表格布局网页
任务一 创建和选择表格 任务二 设置表格和单元格属性 任务三 表格的高级应用
任务一 创建和选择表格
任务说明
本任务中，我们将学习创建表格，以及选择表 格和单元格的操作。此外，还将应用所学知识 为“欧妮雅”网站主页构建主体结构。
预备知识
一、创建表格
表格（Table）是由一个或多个单元格构成的集合， 表格中横向的多个单元格称为行（在HTML语言中 以<tr>标签开始，</tr>标签结束），垂直的多个单 元格称为列（以<td>标签开始，</td>标签结束）， 行与列的交叉区域称为单元格，网页中的元素就放 置在这些单元格中。
2．选择行或列
要选择某行或某列，可将光标置于该行左侧或该 列顶部，当光标形状变为黑色箭头 或 时单击鼠 标左键。
3．选择单元格
• • • 要选择某个单元格，可首先将插入点置于该单元格内， 然后按【Ctrl＋A】组合键或单击“标签选择器”中对 应的“<td>”标签。 要选择连续的单元格区域，应首先在要选择的单元格区 域的左上角单元格中单击，然后按住鼠标左键向右下角 单元格方向拖动鼠标，最后松开鼠标左键。 如果希望选择一组不相邻的单元格，可按住【Ctrl】键 单击选择各单元格。
预备知识
一、拆分与合并单元格
在网页制作中，经常会用到一些特殊结构的表 格，此时就需要拆分或合并单元格。
1．拆分单元格
拆分单元格就是将一个单元格拆分成两个或多个 单元格。
2．合并单元格
所谓合并单元格，就是将相邻的两个或多个单元格 合并成一个单元格。 拖动鼠标选中要合并的连续单元格，然后单击属性 检查器上的“合并所选单元格，使用跨度”按钮 ， 则2个单元格合并为1个单元格。
任务实施——为“欧妮雅”网站主页构建主体 结构
在学习了表格的创建以及表格和单元格的选择方 法后，接下来通过构建“欧妮雅”网站主页的主 体结构，来学习表格在网页布局中的应用（具体 操作见视频2-1）。
任务二 设置表格和单元格属性
任务说明
下面我们将学习设置表格和单元格属性的方法。此 外，还将应用所学知识完善“欧妮雅”网站的主页 布局。
预备知识
一、设置表格属性
选中表格后，可利用属性检查器查看或修改表格 的行、列、宽，以及填充、间距、对齐、边框等 属性。
二、设置单元格属性
在表格的某个单元格中单击，属性检查器中将显 示水平、垂直、宽、高等单元格属性，此时可通 过属性检查器设置单元格属性。
任务实施——完善“欧妮雅”网站主页的布 局