新中文Dreamweaver CS3案例教程（第二版） 教学课件 沈大林 等 第五章.pptVIP

在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 中文Dreamweaver CS3案例教程（第二版） 沈大林 主编 5.1 【案例16】“牡丹花的特点和用途1”网页 案例效果 网页的背景是一幅花朵图像；有1级标题“牡丹花的特点和用途”，2级标题“牡丹花的特点”和“牡丹花的用途”，以及段落文字；在2级标题文字的左边还有一个GIF动画。 操作步骤 1．在记事本中创建和修改HTML代码 （1）输入或修改完HTML程序代码之后，以名称“牡丹花的特点和用途0.htm”保存。 （2）双击HTML文档图标打开该网页。 （3）单击Microsoft Internet Explorer浏览器窗口中的“查看”→“源文件”菜单命令，修改网页程序。 （4）在修改HTML程序代码后，右击在其快捷菜单中单击“刷新”菜单命令，即可看到修改后的网页；也可以单击“查看”→“刷新”菜单命令来刷新网页。 第5章 HTML简介 2．在Dreamweaver CS3中修改HTML网页 （1）在Dreamweaver CS3中打开文档。 （2）用鼠标拖动选中“牡丹花的特点和用途”标题文字再单击“属性”栏。 （3）用鼠标拖动选中所有段落文字，设置属性。 （4）选中网页页面，单击其“属性”栏内的“页面属性”按钮，设置背景。 （5）将修改后的网页以名称“牡丹花的特点和用途1.htm”保存。 3．在Dreamweaver CS3中输入和修改HTML程序代码 （1）单击“文档工具”栏中的“显示代码视图”按钮，在“代码”视图窗口内可以输入和修改HTML代码。 （2）单击“文档工具”栏内的“显示代码视图和设计视图”按钮，即可进入“代码和设计”视图窗口。这两个窗口内代码与设计对象之间良好的对应性有利于修改HTML代码。 相关知识 1．HTML文件特点 HTML文件是标准的ASCII文件。从结构上讲，HTML文件由元素（element）组成。绝大多数元素是“容器”，即它们有起始标记和结尾标记。元素的起始标记叫做起始链接签（start tag），元素的结束标记叫做结尾链接签（end tag），在起始链接签和结尾链接签中的部分是元素体。每一个元素都有名称和可选择的属性，元素的名称和属性在起始链接签内标明。 HTML的元素有下列3种表示方法： 元素名文件或超文本/元素名 元素名　 属性名＝属性值…文本或超文本/元素名 元素名 2．网页基本结构标记 （1）HTML…/HTML ：HTML文档中最基本的标记 （2）HEAD…/HEAD： 网页头部标记。 （3）TITLE…/TITLE：网页名称标记。 （4）BODY…/BODY：网页主题内容标记。 （5）BODY BGCOLOR=#RRGGBB：使用BODY标记中的BGCOLOR属性。使用的格式有以下两种： BODY BGCOLOR=RRGGBB BODY BGCOLOR=颜色的英文名称 （6）IMG：图像标记。 （7）SRC：依附于其他标记的一个属性。 （8）BR：换行标记。 （9）PRE…/PRE：保留文本原来格式的标记。 （10）B…/B：粗体标记。 3．其他常用标记 （1）H1…/H1：正文的第三级标题标记。 （2）P…/P：段落标记。 5.2 【案例17】“中国成语解释”网页 案例效果 在浏览器中“中国成语解释”网页显示了几句著名的成语，当鼠标指针移到成语文字之上时，会显示该成语的解释。 操作步骤 打开记事本，输入HTML代码。 相关知识 1．文字的字体大小和颜色 2．字体风格 3．边框包围的文字 4．添加注释 HTML的注释由开始标记符“!--”和结束标记符“!”构成。 5.3 【案例18】“机器猫和游鱼”网页 案例效果 在网页中，背景图像是一幅纹理图像，左边有3幅机器猫图像，它们的大小不同，图像周围边框的粗细程度也不同。另外，图像的右边还有3个游鱼动画，动画的画面大小不同，画面四周边框的粗细程度也不同。通过本案例的学习，可以进一步了解网页中插入GIF动画和图像的方法、给GIF动画和图像添加边框的方法、背景平铺图像的方法。 操作步骤 （1）在网页所在的“【案例18】机器猫和游鱼”文件夹内保存T2.gif和L1.jpg图像文件，以及L2.gif动画文件。 （2）打开记事本软件，输入HTML代码。 相关知识 1．调整图像大小和给图像加边框 2．背景平铺图像和图像文字说明 （1）设置背景平铺图像：BODY BACKGROUND=图像文件名或URL （2）使用IMG标记的ALT属性可以为图像添加文字说明 3．调整图像和文本的相对位置 5.4 【案例19】“荧光数字表”网页 案例效果 一个“荧光数字表”Flash动画在不断播放，同时还