网页的基本操作.ppt

第3讲网页的根本操作;本章学习目标;本章设计任务;*;*;实例演示---构建厦门新貌个人网站;准备网页素材;设置页面属性;*;*;*;*;*;*;*;*;*;*;*;*;*;*;为网页gaikuang.html设置文字格式;在网页gaikuang.html中添加水平线和日期;3.2.2为网页参加图像

高质量的图片一般用TIFF格式保存，但其图片体积过大，不太适合网络传输。

不同的图片格式会表现出不同的颜色分辨率和颜色标准，当然也会影响其体积的大小。

一般在网页设计中选择的图片不要超过8KB，如必须选用较大图片时，可先将其分成假设干小图片，显示时再通过表格将这些小图片拼合起来。

如果在同一文件中屡次使用相同的图片时，最好使用相对路径查找该图片。;*;*;;*;*;*;*;*;“图像占位符”的具体设置

“名称”〔可选〕：图像占位符标签显示的文本。

“宽度”和“高度”：设置图像大小，这是必需的。

“颜色”〔可选〕

“替换文本”〔可选〕：设置描述该图像的文本。在浏览器中预览图片，当鼠标移到用占位符添加的图像上时替代文本就会出现。

双击占位符翻开“选择图像源文件”对话框，指定好要插入的图像文件即可;*;实例：制作“鼓浪屿”网页gly.html;实例：制作“鼓浪屿”网页gly.htm;4.插入FireworksHTML文件

Fireworks是网页素材制作软件。可以用来创立和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像。

DW允许将Fireworks生成的HTML代码随关联的图像、切片和JavaScript一起插入到文档中。

实例：为“厦门新貌”站点创立主页index.html

主页通过插入FireworksHTML文件来布局页面，该FireworksHTML文件是由Fireworks制作的图像切片导出的。

;4.插入FireworksHTML文件

实例：为“厦门新貌”站点创立主页index.html

新建index.html，保存在站点根文件夹下。

单击“常用”插入栏-图像-FireworksHTML文件

matericals/FireworksHTML/xiamen.htm

图像文件保存在站点others文件夹

选中FireworksHTML文件，属性面板：居中对齐

;*;实例：为“厦门新貌”站点创立主页index.html;*;*;*;*;*;*;实例：创立页面链接;为gaikuang.html创立超级链接

光标定位页面底部的水平线前，按回车键，插入一空行

单击常用插入栏中的超级链接按钮。将“返回首页”链接???本右对齐。

;为gaikuang.html创立超级链接

展开文件面板的files文件夹。选择gaikuang.html页面最后一段中的“鼓浪屿”文本，拖动属性检查器中“链接”文本框右侧的“指向文件”图标，指向“文件”面板中的files下的gly.html。

;为gly.html创立超级链接

翻开gly.html，选择“返回”图像

单击属性面板中的链接输入框右边的“浏览文件”，选择files文件夹下的gaikuang.html;*;*;翻开gaikuang.html，定位到工程列表“经济状况”前，在“插入”栏的“常用”类别中，单击“命名锚记”按钮。

在“锚记名称”文本框中，键入锚记的名称“jingji”。锚记标记在插入点处出现。

注意：如果看不到锚记标记，可选择“查看”“可视化助理”“不可见元素”。;选择网页第二行的“经济状况”文本。;在网页第一行“厦门概况”前插入一个锚记top

在工程列表“经济状况”后面输入几个空格后，输入“返回顶部”。选择此处的“返回顶部”，在属性面板的“链接”文本框中，键入#top

在工程列表“旅游资源”后面输入几个空格后，输入“返回顶部”。选择此处的“返回顶部”，在属性面板的“链接”文本框中，键入#top

;*;*;*;翻开gly.html，选择图像占位符gly。

属性面板中的源文件，选择为matericals中的gly.gif，原来的图像占位符替换为gly.gif

选中该图像，单击属性面板中多边形热点工具，沿着图片中的“日光岩”边缘绘制出一个热点区域。;绘制厦门博物馆的热点区域。

;*;*;*;*;*;*;*;*;*;*;*;将matericals中的声音文件chaqu.mid复制到站点根文件夹下的others子文件夹中。

选择xiamen为当前站点，翻开index.html

选择标号为1的区域，单击“插入-媒体-Flash”

选择matericals中的welcome.swf，保存在other中

选择标号为4的区域，单击“插入-图像”，添加images中的button.jpg

链接：files/gaikuang.html，单击背景颜色框，