（中职）中文Dreamweaver CS3案例教程（第二版）第五章教学课件.ppt

《（中职）中文Dreamweaver CS3案例教程（第二版）第五章教学课件.ppt》由会员分享，可在线阅读，更多相关《（中职）中文Dreamweaver CS3案例教程（第二版）第五章教学课件.ppt（14页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、（中职）中文Dreamweaver CS3案例教程（第二版）第五章ppt课件中文中文Dreamweaver CS3案例教程案例教程（第二版）（第二版）5.1 【案例16】“牡丹花的特点和用途1”网页案例效果案例效果网页的背景是一幅花朵图像；有1级标题“牡丹花的特点和用途”，2级标题“牡丹花的特点”和“牡丹花的用途”，以及段落文字；在2级标题文字的左边还有一个GIF动画。操作步骤操作步骤1在记事本中创建和修改HTML代码（1）输入或修改完HTML程序代码之后，以名称“牡丹花的特点和用途0.htm”保存。（2）双击HTML文档图标打开该网页。（3）单击Microsoft Internet Expl

2、orer浏览器窗口中的“查看”“源文件”菜单命令，修改网页程序。（4）在修改HTML程序代码后，右击在其快捷菜单中单击“刷新”菜单命令，即可看到修改后的网页；也可以单击“查看”“刷新”菜单命令来刷新网页。第第5章章 HTML简介简介2在Dreamweaver CS3中修改HTML网页（1）在Dreamweaver CS3中打开文档。（2）用鼠标拖动选中“牡丹花的特点和用途”标题文字再单击“属性”栏。（3）用鼠标拖动选中所有段落文字，设置属性。（4）选中网页页面，单击其“属性”栏内的“页面属性”按钮，设置背景。（5）将修改后的网页以名称“牡丹花的特点和用途1.htm”保存。3在Dreamweav

3、er CS3中输入和修改HTML程序代码（1）单击“文档工具”栏中的“显示代码视图”按钮，在“代码”视图窗口内可以输入和修改HTML代码。（2）单击“文档工具”栏内的“显示代码视图和设计视图”按钮，即可进入“代码和设计”视图窗口。这两个窗口内代码与设计对象之间良好的对应性有利于修改HTML代码。相关知识相关知识1HTML文件特点HTML文件是标准的ASCII文件。从结构上讲，HTML文件由元素（element）组成。绝大多数元素是“容器”，即它们有起始标记和结尾标记。元素的起始标记叫做起始链接签（start tag），元素的结束标记叫做结尾链接签（end tag），在起始链接签和结尾链接签中的

4、部分是元素体。每一个元素都有名称和可选择的属性，元素的名称和属性在起始链接签内标明。HTML的元素有下列3种表示方法：文件或超文本文本或超文本2网页基本结构标记（1）：HTML文档中最基本的标记（2）：网页头部标记。（3）：网页名称标记。（4）：网页主题内容标记。（5）：使用标记中的BGCOLOR属性。使用的格式有以下两种：（6）：图像标记。（7）SRC：依附于其他标记的一个属性。（8）：换行标记。（9）：保留文本原来格式的标记。（10）：粗体标记。3其他常用标记（1）：正文的第三级标题标记。（2）：段落标记。5.2 【案例案例17】“中国成语解释中国成语解释”网页网页案例效果案例效果在浏览器

5、中“中国成语解释”网页显示了几句著名的成语，当鼠标指针移到成语文字之上时，会显示该成语的解释。操作步骤操作步骤打开记事本，输入HTML代码。相关知识相关知识1文字的字体大小和颜色2字体风格3边框包围的文字4添加注释HTML的注释由开始标记符“”构成。5.3 【案例案例18】“机器猫和游鱼机器猫和游鱼”网页网页案例效果案例效果在网页中，背景图像是一幅纹理图像，左边有3幅机器猫图像，它们的大小不同，图像周围边框的粗细程度也不同。另外，图像的右边还有3个游鱼动画，动画的画面大小不同，画面四周边框的粗细程度也不同。通过本案例的学习，可以进一步了解网页中插入GIF动画和图像的方法、给GIF动画和图像添加

6、边框的方法、背景平铺图像的方法。操作步骤操作步骤（1）在网页所在的“【案例18】机器猫和游鱼”文件夹内保存T2.gif和L1.jpg图像文件，以及L2.gif动画文件。（2）打开记事本软件，输入HTML代码。相关知识相关知识1调整图像大小和给图像加边框2背景平铺图像和图像文字说明（1）设置背景平铺图像：（2）使用标记的ALT属性可以为图像添加文字说明3调整图像和文本的相对位置5.4 【案例案例19】“荧光数字表荧光数字表”网页网页案例效果案例效果一个“荧光数字表”Flash动画在不断播放，同时还播放MIDI音乐。在网页中插入Flash动画和MIDI音乐等多媒体文件后，可以使网页的多媒体效果更加

7、突出，而且Flash动画和MIDI音乐的文件很小，有利于在网络上传输。操作步骤操作步骤（1）在网页所在文件夹的MIDI文件夹内存放MIDI0.mid文件，在FLASH文件夹内存放一个“FLASH-2.swf”Flash文件。“FLASH-2.swf”Flash文件是一个荧光数字表动画。（2）打开记事本程序，输入HTML代码。相关知识相关知识1添加音乐2插入Flash动画（1）标记：（2）标记：5.5 【案例案例20】“链接技术演示链接技术演示”网页网页案例效果案例效果在该网页中列出了前面制作的各个网页的链接，以及两个GIF格式动画和两幅图像，它们的宽和高均为85像素。在其中单击任意一个链接即可

8、弹出相应的页面，单击动画或图像也可以弹出相应的网页。例如，单击“链接到牡丹花的特点和用途网页”文字链接或最左边的动画，可以弹出“牡丹花的特点和用途.htm”网页。操作步骤操作步骤（1）素材整理。（2）打开记事本程序，输入HTML代码。相关知识相关知识1链接文件使用的HTML标记文字2使用图像和动画的链接5.6 【案例案例21】“中国名胜古迹中国名胜古迹”网页网页案例效果案例效果由于网页中的内容比较多，在一个窗口内不能完全显示，所以在网页中增加了“锚点”链接。在标题下面列出了网页中名胜古迹的名称，单击其中任意一个文字即可链接到相应的位置。相关知识相关知识1建立同一个网页中的链接（1）建立链接时，

9、要在锚名前加一个“#”符号标题名字（2）为被链接的内容起一个名字，该名字叫做锚名。2建立电子邮件链接邮箱地址： 3链接到其他页面中的锚点5.7 【案例案例22】“HTML网页浏览网页浏览”网页网页案例效果案例效果该网页被分为了3部分，其中，网页的顶部显示了网页的标题，左边显示了一些网页的名称，右边显示了引导用户的一段文字。单击页面左边列出的网页名称文字，即可在右面的页面中显示出相应的网页操作步骤操作步骤1制作框架内的网页2制作框架集网页相关知识相关知识1设置框架和修饰框架（1）设置框架：标记（2）修饰框架：标记2网页框架举例3窗口间的链接（1）在标记：（2）在标记：5.8 【案例案例23】“计

10、算机硬件和软件列表计算机硬件和软件列表”网网页页案例效果这是一个自定义的列表。在格式排版中，列表也是网页中常用的排版样式，常用于商品列表、合同条例、项目展示等。HTML提供3种列表方式：有序列表、无序列表和自定义列表。相关知识相关知识1有序列表以标识开始，至结束。2无序列表无序列表以标识开始，至结束。5.9 【案例案例24】“课程表课程表”网页网页案例效果整个表格有背景纹理图案，第1行文字的背景色是绿色，第3行和第5行背景色为灰色。相关知识相关知识1表格设计HTML中提供了多种标识来进行网格的设计，包括、和。标识用于表格的整体设置，标识用于设置表格的标题，标识用于表格的行设置，标识用于设置表头，标识用于设置行中的每个具体的单元格。2表格属性设置