网页设计与制作项目教程单元3 图文混排网页的制作
DW教程二、制作图文混排页面
第二节制作文字与图像混排的页面我们已经描绘了小屋的蓝图，从现在开始，为我们的小屋添砖加瓦吧。
打开01.html，制作一个图文混排的简单页面。
一、页面的总体设置1、设置页面的头内容头内容再浏览器中是不可见的，但是却携带着网页的重要信息，如关键字、描述文字等，还可以实现一些非常重要的功能，如自动刷新功能。
鼠标左键单击插入工具栏最左边按钮旁的下拉小三角，在弹出菜单中选择“HTML”项，出现“文件头”按钮，点开下拉菜单，就可以进行头内容的设置了。
设置标题，网页标题可以是中文、英文或符号，显示在浏览器的标题栏中。
我们直接在设计窗口上方的标题栏内输入或更改，就可以完成网页标题的编辑了。
插入关键字，关键字用来协助网络上的搜索引擎寻找网页。
要想让更多的人看见你的网站，这项要好好填哦^_^单击上图所示的“关键字”项，弹出“关键字”对话框，填入关键字即可。
插入META，META标记用于记录当前网页的相关信息，如编码，作者，版权等，也可以用来给服务器提供信息。
单击上图所示的“META”项，弹出“META”对话框，在“属性”栏选择“名称”属性，在“值”文本框中输入相应的值，可以定义相应的信息。
author—作者信息，copyright—版权声明，generator—网页编辑器。
2、设置页面属性单击“属性栏”中的“页面属性”按钮，打开的“页面属性”对话框。
设置外观，“外观”是设置页面的一些基本属性。
我们可以定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图像等。
我们设置页面的所有边距为0。
设置链接，“链接”选项内是一些与页面的链接效果有关的设置。
“链接颜色”定义超链接文本默认状态下的字体颜色，“变换图像链接”定义鼠标放在链接上时文本的颜色，“已访问链接”定义访问过的链接的颜色，“活动链接”定义活动链接的颜色。
“下划线样式”可以定义链接的下划线样式。
设置标题，“标题”用来设置标题字体的一些属性。
如下图所示，在左侧“分类”列表中选择“标题”，这里的标题指的并不是页面的标题内容，而是可以应用在具体文章中各级不同标题上的一种标题字体样式。
《网页设计与制作》课程标准
营销型网站建设实训课程标准课程编号：适用专业：电子商务课程类别：专业基础课程修课方式：必修教学时数：64学时总学分数：4学分一、课程定位1.课程性质《网页设计与制作》是以计算机专业为主体，辐射计算机网络技术专业、计算机应用技术专业、电子商务专业、多媒体设计与制作专业等计算机类专业的理论实践一体化课程，是计算机专业的专业基础课程，也是电子商务的一门核心技能课程。
围绕电子商务专业的培养目标，该课程的定位为：.懂专业：掌握Web国际标准基础知识；基于W3C网页设计标准，熟悉和掌握静态网页设计与制作及小型网站建设与维护的基本知识。
.精技能：掌握综合运用网页编辑软件、图像处理软件(fireworks)设计和制作网页的技能，熟练掌握DIV+CSS网页布局设计方法，能熟练运用XHTML、CSS(及后续课程JavaScript)进行网站客户端开发，熟悉Web国际标准，掌握小型网站策划、分析、设计、布局、测试的职业能力；坚持手写代码，形成良好的代码规范编写习惯。
.高素质：在课程学习中培养学习和工作的方法能力，培养与人协作和做人的社会能力。
2.课程作用《网页设计与制作》是面向“网站美工、网站维护”职业岗位的领域课程，也是满足职业岗位任职要求的基本能力课程。
通过该课程的学习，实现以下专业知识、职业能力、职业素质目标，为今后职业生涯发展打好基础。
知识目标：•熟悉和掌握静态网页设计与制作的基本知识；•掌握Web国际标准基础知识；•了解和熟悉HTML语言；•掌握静态网页设计与制作的知识；•掌握网页中DIV+CSS网页布局方法；•掌握网页中图片设计和处理、动画导入的知识；•掌握网站检查与发布的知识；•坚持手写代码，形成良好的代码规范编写习惯。
能力目标：•具备信息收集、处理、准备、加工的能力；•具备网页设计及网页中图形设计、动画导入的基本能力，能独立设计并制作一个内容完整、图文并茂、技术运用得当的小型静态网站；•具备初步的网站开发、维护和管理能力；具备独立撰写网站制作说明等技术文档的基本能力。
03第3章制作图文混排网页.
03第3章制作图⽂混排⽹页.第3章制作图⽂混排⽹页图像也是⽹页中的主要元素之⼀，图像不但能美化⽹页，⽽且能够更直观地表达信息。
在页⾯中恰到好处地使⽤图像，能使⽹页更加⽣动、形象和美观。
【教学导航】3.1课前准备（1）在本地硬盘创建⽂件夹（2）启动Dreamweaver CS3通过Windows的【开始】菜单启动Dreamweaver CS3。
3.2课堂引导训练及评价【课堂引导训练任务描述】1、⽹页制作任务卡⽹页制作任务卡如表3-1所⽰。
表3-1⽹页制作任务卡⽹页制作任务跟踪卡如表3-2所⽰。
表3-2⽹页制作任务跟踪卡【⽹页效果展⽰】⽹页index0301.html的浏览效果如图3-1所⽰。
【任务完成过程】3.2.1应⽤“⾼级”⽅式创建站点“瀑泉游”【操作要求】应⽤【站点定义】对话框的“⾼级”⽅式创建站点“瀑泉游”。
50第3章制作图⽂混排⽹页图3-1图⽂混排⽹页的浏览效果【实施过程】（1）打开【管理站点】对话框（2）打开【站点定义】对话框（3）设置站点的“本地信息”在“分类”列表中单击选择“本地信息”选项，输⼊或选择以下各项：②在“本地根⽂件夹”⽂本框中输⼊根⽂件夹“D:\E游天下\03第3章制作图⽂混排⽹页\”。
③在“默认图像⽂件夹”⽂本框中输⼊“D:\E游天下\03第3章制作图⽂混排⽹页\task03-1\images\”。
也可以打开对话框选择⼀个⽂件夹。
④输⼊本机的HTTP地址，如http://172.16.7.26/Etour/。
（4）设置站点的“远程信息”在【管理站点】对话框中单击【完成】按钮，新建站点便完成。
3.2.2应⽤“⽂件”⾯板新建⽹页“index0301.html”【操作要求】应⽤“⽂件”⾯板在站点“瀑泉游”中新建⼀个⽹页⽂档“index0301.html”。
【实施过程】（1）打开“⽂件”⾯板如果“⽂件”⾯板处理隐藏状态，则单击菜单【窗⼝】→【⽂件】打开“⽂件”⾯板。
（2）新建⽹页⽂档在“⽂件”⾯板中站点“瀑泉游”的⽂件夹“task03-1”上单击右键，在弹出的快捷菜51Dreamweaver CS3⽹页制作案例教程单中单击【新建⽂件】菜单项，如图3-7所⽰。
第三讲 制作图文混排网页
授课题目：第三讲制作图文混排网页目的要求：学会通过“管理站点”对话框创建站点；学会通过【文件】面板创建网页；掌握设置页面背景图像的方法；掌握在网页中插入图像的方法；掌握在网页中插入鼠标经过图像的方法；掌握设置图像属性的方法；掌握制作图文混排网页的技巧重点难点：设置页面背景图像；在网页中插入图像；设置图像属性组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结总结复习导入新课：图像通常用来添加图形界面、具有视觉感染力的内容或交互式设计元素， Web页中通常使用的只有三种，即GIF、JPEG和PNG。
提问：1.如何设置页面的整体属性？2.如何在网页中输入与编辑文本？3.如何对网页文本进行格式化处理？教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材授课内容：第三讲制作图文混排网页【操作准备】（1）创建所需的文件夹，拷贝所需的资源（2）启动Dreamweaver CS6【引导训练】【任务3-1】制作介绍中国瀑布的图文混排网页本单元“引导训练”的任务卡如表3-1所示。
表3-1单元3“引导训练”任务卡网页0301.html的浏览效果如图3-1所示。
图3-1图文混排网页的浏览效果【任务3-1-1】使用“管理站点”对话框创建站点“单元3”【任务描述】使用【管理站点】对话框创建1个名称为“单元3”的本地站点，站点文件夹为“Unit03”。
【任务实施】（1）打开【管理站点】对话框在Dreamweaver CS6的主界面，选择命令【站点】→【管理站点】，打开【管理站点】对话框。
（2）打开【站点设置对象】对话框在【管理站点】对话框中单击【新建站点】按钮，打开【站点设置对象】对话框。
在【管理站点】对话框“站点名称”文本框中输入站点名称“单元3”，在“本地站点文件夹”文本框中输入完整的路径名称“D:\网页设计与制作案例\Unit03\task03-1\”。
在【站点设置对象】对话框中单击【保存】按钮，保存创建的站点，返回【管理站点】对话框。
网页设计与制作项目教程 (3)[15页]
![网页设计与制作项目教程 (3)[15页]](https://img.taocdn.com/s3/m/ebab6b6bc77da26924c5b045.png)
项 目
项目三 网站规划与设计
三
网
【项目目标】
站
能力目标：
规 划 与
学完本项目后，应能够：
(1)掌握网站规划与设计要点 (2)明确网站规划与设计的一般流程 (3)设计合适的网页版式。
设
计
知识目标：
(1)了解网站规划与设计的一般流程。
(2) 懂得网页的版式设计的基本原则。
网页设计与制作项目教程
划 以深灰色标出。整体布局简洁大方，图文匹配。
与
设
计
项 目 2、网站前台布局 三 （4）店头效果图 网 店头效果图如图3-3-5所示。 站 规 划 与 设 计
网页设计与制作项目教程
项 目
任务4 网站首页版式设计
三
【任务目标】
网
网站首页，即主页、起始页，也就是打开
站
网站后看到的第一个页面。网站的首页就好像人的
项 目
任务1 网站需求分析
三
【任务目标】
网 站 规
“MobileShop”企业的电子商务需求，既可能来自企业本 身发展的需要，也可能是迫于竞争对手的压力，或者二者 兼而有之，请从企业网站实施的背景、原因、资源和目的 四个方面来分析企业是否有开展电子商务的需求，存在哪
划
些需求，需求的迫切性以及这些需求将给企业带来什么样
索、分类等功能模块。前台系统的功能模块如图所 示图3-3-1所示。
项
目
三 网 （2）网站后台系统 站 后台系统：商品管理、分类管理、订单管理、用户管 规 理等功能模块。后台系统的功能模块如图所示图3-3-2 划 所示。
与
设
计
项 目 2、网站前台布局 三 （1）Logo 网 “MobileShop”电子网站的Logo, 如3-3-3所示。 站 图3-3-3 “MobileShop”电子网站名称及Logo 规 划 与 设 计
【任务3-1】制作图文混排网页
（2）设置网页的背景图像
单击【属性】面板上的【页面属性】按钮， 打开【页面属性】对话框，在【页面属性】对话 框中“外观（CSS）”属性组中单击背景图像文 本框右侧的【浏览】按钮，弹出【选择图像源文 件】对话框，在该对话框中搜索到所要设置的背 景图像文件“bg-gray.png”。
（3）插入第2幅图像
在Dreamweaver CC的主窗体【文档】工具栏 中单击【设计】按钮，切换到“设计”窗口，将 光标置于文本之后，按【Enter】键换行，然后按 照类似的方法插入4幅图像，即文件夹images中图 像t02.jpg、t03.jpg、t04.jpg和t05.jpg。
36 《网页设计与制作项目驱动教程（第3版）》
教学导航 教学重点难点
教学重点： 1、设置网页背景图像 2、在网页中插入图像 3、设置图像属性
教学难点： 1、设置页面背景图像 2、实现图文混排网页
7
教学导航 教学方法
信息化教学
课前布置在学习通 APP中学习本节微 课，课后提升练习
01
案例教学
制作介绍九寨沟景 区景点的图文混排 网页
02
操作准备
32 《网页设计与制作项目驱动教程（第3版）》
【任务实施】
（1）插入第1幅图像
将光标置于标题“诺日朗群海”右侧，按 【Enter】键换行，然后选择命令【插入】→【图 像】，在弹出的【选择图像源文件】对话框中选 择images文件夹中的图像文件“t01.jpg”。
在【选择图像源文件】对话框中单击【确定】 按钮，即可在网页0301.html中插入一幅图像。
（2）打开【导入 Word 文档】对话框
将 光 标 置 于 网 页 “ 0301.html ” 中 需 要 添 加 文
《网页设计与制作》课件——项目三 任务二 嵌套表格布局复杂页面
步骤3：在表格t2下面插入表格，设置ID为t3。
t3参数：宽1000，居中对齐，一行两列，填充0，间距1，边框0。左侧单 元格宽198px，背景色#0099FF。 在t3左侧单元格内插入四行一列的表格，设置ID为t31。 t31参数：宽100%，自动以100%的宽度填充到上一级单元格，以下100% 的宽度均为自动填充到上一级单元格，填充0，边框0，间距1。每个单元 格的背景色均为#EEF7FF。 在第一个单元格与第三个单元格内分别输入“栏目导航”与“点击排行”， 并根据需要设置字体的大小、位置及背景图片，如图3.2.5所示。 在t3左侧单元格内再插入表格或文字，完成效果如图3.2.6所示。
6．单元格内的位置属性
水平对齐方式，用align="#"属性说明，#号可以为left（左对 齐）、right（右对齐）、center（居中）。
垂直对齐方式，用valign="#"属性说明，#号可以为top（上对 齐）、bottom（下对齐）、middle（居中）。注意单元格里的内 容与边框的位置关系，如图3.2.13至图3.2.15所示。
项目三 制作学校新闻
任务二 嵌套表格布局复杂页面
任务描述
利用表格对校园网的新闻列表页面进行布局，要求美观，并在布 局的合适位置填上恰当的文字和图片。制作后的效果如图3.2.1所 示。
图3.2.1 网页效果图
知识准备
表格和单元格有很多属性，其中有很多是相同或相似的。表格的 最基本标记为<table>、<tr>、<td>。一般描述整个表格的属性标 记放在<table>里，描述单元格的属性标记放在<tr>、<td>里。常 用的属性包括表格的位置、表格边框的粗细及颜色、单元格的间 距、表格和单元格的大小、表格及单元格的背景颜色、单元格元
0301【任务3-1】制作介绍九寨沟景区景点的图文混排网页
单元3 制作图文混排网页【引导训练】【任务3-1】制作介绍九寨沟景区景点的图文混排网页【任务3-1-1】使用“管理站点”对话框创建站点“单元3”【任务描述】使用【管理站点】对话框创建1个名称为“单元3”的本地站点，站点文件夹为“Unit03”。
【任务实施】（1）打开【管理站点】对话框在Dreamweaver CC的主界面，选择命令【站点】→【管理站点】，打开【管理站点】对话框。
（2）打开【站点设置对象】对话框在【管理站点】对话框中单击【新建站点】按钮，打开【站点设置对象】对话框，如图3-3所示。
图3-3 【站点设置对象】对话框在【管理站点】对话框“站点名称”文本框中输入站点名称“单元3”，在“本地站点文件夹”文本框中输入完整的路径名称“D:\网页设计与制作案例\Unit03\”。
在【站点设置对象】对话框中单击【保存】按钮，保存创建的站点，返回【管理站点】对话框，如图3-4所示。
图3-4 新建站点“单元3”后的【管理站点】对话框在【管理站点】对话框中单击【完成】按钮，新建站点便完成。
【任务3-1-2】应用“文件”面板新建网页“0301.html”【任务描述】应用【文件】面板在站点“单元3”中新建1个网页文档“0301.html”。
【任务实施】（1）打开【文件】面板如果【文件】面板处理隐藏状态，则选择命令【窗口】→【文件】打开【文件】面板。
（2）新建网页文档在【文件】面板中站点“单元3”的文件夹“task03-1”上单击右键，在弹出的快捷菜单中单击【新建文件】菜单项。
然后输入新的网页文档名称“0301.html”，按回车键确认。
【任务3-1-3】设置页面的背景图像【任务描述】设置网页“0301.html”的背景图像为“bg-gray.png”。
【任务实施】（1）打开新建的网页文档“0301.html”在【文件】面板中双击网页文档名称“0301.html”，在Dreamweaver CC的文档窗口中打开该网页文档。
网页设计与制作教案(三栏式,比较规范,内容详实,图文并茂)
项目名称：制作“名车展示网”（一）授课时间：授课地点：授课班级：授课次数及课时：教学目标【知识目标】1、通过制作网页（而不是已往的浏览网页）了解网页、网站的概念。
2、了解链接的概念。
3、了解HTML代码中标签及属性的概念。
4、识记标签和属性的基本书写格式。
5、理解网页的本质及浏览器的功能。
【技能目标】1、掌握建立站点和网页的方法。
2、掌握向页面输入文字，插入图片的方法。
【情感目标】1、培养起对网站制作的兴趣。
2、培养与人协作的意识，锻炼与人协作的能力。
重点难点【重点】建立站点和网页的方法。
【难点】站点和文件夹的对应关系。
项目分析利用DW和提供的图片、文字素材制作“名车展示网”。
内含一个导航页面（首页）和三个分别介绍三种名车的页面。
此项目旨在让学生对网站的制作有一个感性的认识并培养他们对课程的兴趣，对页面的布局、美化不去涉及。
教学准备三款名车的图文和文字素材教学后记在课堂上可以再多分配一些时间给学生自己去探索，有些知识点学生自己经过尝试可以自己获得，这样他们对知识的印象会比老师告诉他们来得更深。
教学过程师生互动设计及设计意图教学方法一、展示将要完成的项目1.展示教师制作好了的网站——名车展示网2.进入网站的文件夹，引导学生观察网站的架构【教师活动】通过凌波展示网站（浏览），激发学生的学习热情和兴趣（汽车是学生比较喜欢的话题）【学生活动】观察【教师活动】进入网站文件夹，引导学生观察网站的架构，为下面的建立站点做铺垫。
提问：网页和图片分别怎样组织？【学生活动】讨论，回答【教师活动】点评，总结【教法】通过演示，启发引导学生思考，引导学生自己得出结论。
【教法】教师通过总结，对结论进行完善和强化。
二、演示建立站点的步骤，学生参照教师讲授自主建立网站1.通过引导学生观察网站文件夹，使学生了解网站和网页的概念，进而理解网站的组织方式，理解建网站时一些步骤的意义。
2.演示建立站点的步骤（1）建立好相关文件夹（2）进入“站点定义为”对话框，设置相关选项3.对操作中的难点和易错点进行再次强调【教师活动】先强调网站的架构方式，再演示用DW建立网站的步骤【学生活动】观察，理解，识记【教师活动】通过提问强化：1.站点名称和实际的文件夹名称需要相同吗？2. 站点名称和实际的文件夹名称可以用中文吗？【学生活动】操作，讨论→回答【教师活动】对以上的两个问题进行总结，以强化。
网页设计与制作项目教程单元3 图文混排网页的制作
/*定义段落标记的样式*/
</style><h2>内嵌式CSS样式</h2>
<p>使用style标记可定义内嵌式CSS样式表，style标记一般位于head头部 标记中，title标记之后。</p>
</body>
</html>
运行例程代码，得到效果如图3-2所示。
图3-2 使用CSS内嵌式
（3）rel：定义当前文档与被链接文档之间的关系，在这里需要指定 为“stylesheet”，表示被链接的文档是一个样式表文件。
接下来通过一个案例来学习如何在HTML文档中使用链入式CSS 样式，具体代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html>
接下来通过一个案例来学习如何在HTML文档中使用内嵌式CSS 样式，具体代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html>
中</p> </body>
</html>
在外部文件表Unit03-3style.css中，书写CSS样式代码，具体如下：
h2{ text-align:center;} p{ font-size:16px; color:red; text-decoration:underline;}
网页设计与制作项目教程(第二版)-模块二 构建网页的图文信息
网站项目“我心飞扬”之 第二阶段“发布图文信息”
拓展训练
“产品介绍”
《网页设计与制作项目教程》
◎ “古诗鉴赏”
网页打开后，将显示 “古诗鉴赏”界面
任务引领一
制作演示
相关知识
1. 创建网站制作空间
（1）网站与网页的区别 网站是一个整体，网页是一个个体，一个网站是由很多网页构建而成。
相关知识
（3）查看图像热点相关属性 ① 链接：链接的目标地址。 ② 目标：链接打开的窗口设置，有四种选择，分别是_blank、_parent、_self、 _top。 ③ 替换：当图片无法显示时，在图片的位置用文字代替显示。
相关知识
7. 设置文件头标签
在这里我们主要学习的是与<head>标记相关的功能，在<head>标记内可以添 加主页的相关说明文字、关键词、刷新功能和主页转换效果。
排列前 排列后
相关知识
相关知识
（2）调整图像大小和图像边距 图像的大小是可以调整的，选中图像，使用鼠标进行拖曳，另一种方法是设置 “属性”面板中“宽”和“高”的数值。
设置图像的宽度和高度
相关知识
设置图像边距，可以使图像产生一个边距，也会和相邻的文字或者其他图像产 生一个边距。
设置水平间距 设置垂直间距
（2）利用图像热点功能，在图像上建立链接 在网页中选中图片，然后在“属性”面板中出现相应的各项设置，其中有3种
不图的热点设置。
不同的热点设置
热点设置
相关知识
相关知识
选择“属性”面板中“地图（M）”下图标中的某一形状，按住鼠标左键在图片 中相应位置拖动即可建立一个矩形的“热点”，在默认情况下，刚创建的热点的 “链接(L)”为“＃”，需要手动设置链接的目标网址，同时也可设置“目标(R)” 及“替换（T）”，如图所示。
制作图文混排网页
实验三：制作图文混排网页
一、实验任务：
1、掌握设置网页的背景图像，掌握插入图像与设置图像属性，掌握制作图文混排网页。
2、完成【任务3-2】。
3、根据任务3-2的制作，观察和说明图片的尺寸、格式以及图片文件大小之间的相互关系。
二、实验步骤：
1．创建文件夹“Unit03”并在其中创建子文件夹task03-2”
2.创建站点。
3．设置网页背景颜色，背景图像和左右上下边距。
4.设置网页标题。
5.在网页中输入多个文本标题和多段文本。
6设置文本标题和小标题。
7.设置文本字体和大小。
8.插入图片并设置宽和高。
替换文本图片。
9.预览效果。
三．图片的尺寸、格式以及图片文件大小之间的相互关系：
图片尺寸变化不影响图片的格式和图片文件的大小。
图片的大小由像素的多少决定。
小的图片放大是会模糊的，把小图片改大的清晰度不变。
三、实验体会
通过这一次的实验，我发现我还有很多不会的地方，我会继续努力，提高自己的能力。
图文混排
网页设计与制作基础教程
6.2.5 插入图像占位符
有时因为布局的需要，要在网页中插入一幅图片。此时可以先不制作 图片，而使用占位符来代替图片的位置，布局好网页以后再使用占位符来 启动Fireworks MX 2004创建图片。
网页设计与制作基础教程
操作步骤：
网页设计与制作基础教程
本章小结
文本是网页页面里面不可缺少的元素，文本的格式化可以 熟练掌握文本在网页中的编辑技能，可以使页面呈现出非同一 般的专业效果，充分体 现文件所要表达的重点。 另外，图片和文本一样，也是网页之中最常用到的内容， 不管技术如何发展，这两种网页对象是始终都不会消失的。图 片文本的变化相对较少 ，如果要排出精致美观的网页，还要借助于后面所学的表格、 层等内容。
网页设计与制作基础教程
第06章 制作简单的图文混排页面
文本与图像是网页制作中最重要的两大元素。文本 组成了大部分网页的结构；而图像在页面中的恰当运用， 不仅使得网页更加美观，而且令网页表达信息更加直观， 吸引了浏览者。本章主要介绍了在通常网页制作过程中如 添加并设置各种文本、图像元素。通过本章知识的学习， 用户可以掌握各种编辑网页文本与图像的方法，包括设置 文本的格式、使用统一样式、添加按钮、插入背景照片、 创建鼠标指针经过图像、导航条等。
网页设计与制作基础教程
6.1.2 文字的其他设置
网页设计与制作基础教程
网页设计与制作基础教程
要向网页中插入特殊字符，需要在Dreamweaver MX 2004插入 栏中选择“字符”标签，切换到字符插入栏，
网页设计与制作基础教程 检查拼写
一个页面完成之后难免会有单词拼写错误， Dreamweaver MX 2004对文件中的 英文内容提供了简单的拼写检查功能。
【推荐】制作图文混排网页PPT资料
效果，即在网络传输速度较慢时，一张图像可以由模糊到清
晰慢慢地显示出来，但不支持透明的背景色，适用于表现色
彩丰富、物体精品课程-----《网页设计与制作》
讲解与演示
１．应用“高级”方式创建站点“瀑泉游” 【操作要求】
应用【站点定义】对话框的“高级”方式 创建站点“瀑泉游”。
国家级精品课程-----《网页设计与制作》
课前准备
将“sucai”文件夹复制到本地硬盘 启动Dreamweaver CS3
国家级精品课程-----《网页设计与制作》
项目展示
任务：制作图文混排网页 网页主题：瀑布泉
国家级精品课程-----《网页设计与制作》
项目制作任务
任务描述： （1）应用【站点定义】对话框的“高级”方式创建站 点“瀑泉游” （2）应用“文件”面板新建网页 “index0301.html” （3）设置网页的背景图像 （4）将Word文档“瀑布之美.doc”导入到网页 “index0301.html”中 （5）设置网页中文本的格式 （6）在网页中插入多幅图像 （7）在网页中插入鼠标经过图像 （8）设置图像属性
（1）培养独立思考问题、解决问题的能力 （2）培养一定的语言表达能力 （3）培养学生乐观向上的生活态度，用阳光的心态对待
本职工作，热爱网页制作行业 （4）培养学生的创新能力及艺术修养，提高创新能力和
艺术欣赏水平 （5）培养学生的观察分析能力，养成认真细致的工作态
度 （6）培养学生在项目制作中遵守6S管理要求的习惯
html”，存储在文件夹“task03-2”中。
GIF （Graphics html”的背景图像为“bg01.
（9）在网页“ex0302.
Interchange
Format）图像文件的特点
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<title>使用CSS内嵌式</title> <style type="text/css">
h2{ text-align:center;}
/*定义标题标记居中对齐*/
p{ font-size:16px; color:red; text-decoration:underline;}
</head> <body> <h2 style="font-size:20px; color:red;">使用CSS行内式修饰二级标题的
字体大小和颜色</h2> </body>
</html>
运行例程代码，得到效果如图3-1所示。
图3-1 使用CSS行内式
2．内嵌式 内嵌Байду номын сангаас是将CSS代码集中写在HTML文档的<head>头部标记中，
一、CSS样式规则的重要性 使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地 使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：
选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象， 花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值 对”的形式出现，属性是对指定的对象设置的样式属性，例如字体大 小、文本颜色等。
<head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="关键字1,关键字2" />
<meta name="description" content="网页的描述" /> <title>使用CSS行内式</title>
并且用<style>标记定义，其基本语法格式如下：
…… <head>
<style type="text/css"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style> </head> ……
该语法中，<style>标记一般位于<head>标记中<title>标记之后， 也可以把它放在HTML文档的任何地方。但是由于浏览器是从上到下 解析代码的，把CSS代码放在头部便于提前被下载和解析，以避免网 页内容下载后没有样式修饰带来的尴尬。
（1）对网页文档的基本操作 （2）在网页中输入文字、编辑文本和设置文本属性 （3）在网页中输入空格和文本换行 （4）在网页中插入图像、设置图像属性
（1）在网页中插入特殊字符、插入水平线、注释和换行 （2）在网页中插入图像、设置图像属性
任务驱动法、分组讨论法
3.1 掌握CSS样式规则、CSS样式表的引入方式 3.1.1 CSS样式规则
工业和信息化“十三五”高职高专人才培养规划教材
汤智华 主编 王爱红 主审
【教学导航】
教学目标
本单元重点 本单元难点
教学方法
（1）学会建立站点目录结构 （2）熟悉使用骨架创建和保存网页文档等基本操作 （3）掌握在网页中输入文字、编辑文本、设置文本属性的操作方法 （4）掌握在网页中输入空格和文本换行的操作方法 （5）掌握在网页中插入特殊字符、水平线、注释和换行的操作方法 （6）掌握在网页中插入图像、设置图像属性的方法 （7）掌握制作图文混排网页的技巧 （8）熟悉HTML的基本结构
3．链入式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样 式表文件中，通过<link />标记将外部样式表文件链接到HTML文档中， 其基本语法格式如下：
• 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号 可以省略，但是，为了便于增加新样式最好保留。
• 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值 加上英文状态下的引号。
• 在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。
3.1.2 引入CSS样式表的方式
接下来通过一个案例来学习如何在HTML文档中使用内嵌式CSS 样式，具体代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html>
属性和属性值之间用英文“:”连接，多个“键值对”之间用英文 “;”进行区分。
所谓键值对，就是可以根据一个键值获得对应的一个值。键值对 跟数学中的“一对一”映射关系是一个意思。
二、书写CSS样式时需要注意的问题
书写CSS样式时，除了要遵循CSS样式规则，还必须注意几个问题， 具体如下。
• CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照 书写习惯一般将“选择器、属性和值”都采用小写的方式。
该语法中style是标记的属性，实际上任何HTML标记都拥有style属 性，用来设置行内式。
其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在 的标记及嵌套在其中的子标记起作用。
接下来通过一个案例来学习如何在HTML文档中使用行内式CSS 样式，具体代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html>
一、引入CSS样式表的重要性 要想使用CSS修饰网页，就需要在HTML文档中引入CSS样式表。 二、引入CSS样式表的方式 CSS提供了4种引入方式，具体如下。 1．行内式 行内式也称为内联样式，是通过标记的style属性来设置元素的样 式，其基本语法格式如下：
<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3; "> 内容 </标记名>
/*定义段落标记的样式*/
</style>
</head>
<body>
<h2>内嵌式CSS样式</h2>
<p>使用style标记可定义内嵌式CSS样式表，style标记一般位于head头部 标记中，title标记之后。</p>
</body>
</html>
运行例程代码，得到效果如图3-2所示。
图3-2 使用CSS内嵌式