实验四网页制作及发布

1、实验四 网页制作及发布实验目的：学习并掌握简单的网页制作方法。实验环境：Windows XP SP2Dreamweaver 8 中文版实验步骤：1) 下载Dreamweaver 8 绿色版并解压到本地文件夹。下载地址：先双击注册软件信息，然后双击进入Dreamweaver 8程序界面。2) 文件-> 新建打开如下对话框：选择类别中的基本页，基本页中的HTML，单击创建。选择下图中“设计”对网页进行编写。标题：修改为网页名称。3) 在网页中添加文字：在文档中输入文字，全选后通过下方属性修改字体的大小颜色对齐等属性，或者全选要修改的字体后单击右键进行修改。4) 添加超链接：(名词解释：超链接

2、是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。)全选该文字后单击右键选择创建链接，或者选择右下角链接栏。单击中按键会出现如下对话框：链接文件：在查找范围中选择本地硬盘中的文件后，单击确定。链接URL：在下面URL文本栏中输出地址，并单击确定即可。5) 添加图像：选择 插入->图像选择指定图片，或者将网络图片的URL地址添加到URL框中，单击确定。选中图片后在下方属性中修改：宽、高用于修改图片大小、源文件修改图片来源、链接用于添加图片的超链接、垂直和水平边距用于修改图

3、片距离网页最上和最左的距离、对齐和边框用于修改图片对齐属性和边框大小。6) 页面属性修改：在网页空白处单击右键选择页面属性。外观：Ø 页面字体：定义页面中的默认文本字体。Ø 大小：定义页面中默认的字体大小。Ø 文本颜色：定义页面中默认的文本的颜色。Ø 背景颜色：定义页面背景色。Ø 背景图像：可以输入用作HTML文档背景图像的路径和文件名称。单击后面的浏览按钮，可以从磁盘上选择图像文件。Ø 左、右、顶部、底部边界：设置页面元素同页面边界的间距。链接选项是一些与页面的链接效果相关的设置：Ø 链接字体：定义页面超链接文本在默认状态

4、下的字体。Ø 大小：定义超链接文本的字体大小。Ø 链接颜色：定义超链接文本默认状态下的字体颜色。Ø 翻转链接：定义鼠标放在链接上时，链接所显示的颜色。Ø 访问过的链接：定义访问过的链接的颜色。Ø 活动链接：定义活动链接的颜色。Ø 下划线样式:定义链接下划线的样式。7) 插入对象：Ø 特殊字符：插入->HTML->特殊字符。Ø 日期：插入->日期。Ø 水平线：插入->HTML->水平线。(用于分开文字与图片使界面更加美观)Ø 表格：插入->表格。简单用法如下：&

5、#216; 背景音乐：插入->媒体->插件 在弹出对话框中选择音源并确定。Ø 插入FLASH动画：插入->媒体->FLASH视频。8) 行为：在右边栏中找到“行为”的选项框。选择指定图片后单击添加行为。Ø 交换图片：在设定原始档中添加指定的图片目录。（选中图片与指定图片交换）Ø 弹出信息：在消息框中添加文字。（单击弹出消息对话框，显示指定文字）Ø 打开浏览器窗口。Ø 播放声音。（播放指定声音片段）Ø 转到URL。设置好对应的行为后，在浏览网页中单击该图片或文字指定事件发生。9) 框架与层：框架是网页制作中常用的

6、设计方式之一。框架可以将一个浏览器窗口划分为多个区域，每个区域都可以显示不同的HTML文档。每个框架区域也都可以用单独的滚动条，在浏览一个框架时并不影响另一个框架的显示内容。插入->HTML->框架 根据名称选择插入框架的位置。查看->可视化助理->框架边框 页面四周将显示出框架的边框线。修改->框架页 或 用鼠标拖动文档窗口四周显示的框架边框。支持动态HTML是Dreamweaver 8最突出的特点，即可以通过层实现文档内容在网页中的精确定位。层在网页中的位置可以任意放置，用户可以将图像、文字等元素放到层中，这样就可以达到网页元素的精确定位。插入->布局对

7、象->层，层属性的修改基本类似于图片。10) 预览并保存。文件->另存为：保存网页至指定目录。文件->在浏览器中预览->IExplore 7.0：预览网页于浏览器。11) 在个人主页上发表：Ø 在个人的FTP上建立Public_html文件夹。Ø 将制作好的的网页更名为index.html并上传至Public_html文件夹下。Ø 将网页用到的所有素材图片包括文件一起放到Public_html文件夹中。(注：制作时应将素材放置于index.html同目录)Ø 在浏览器中输入实验内容：制作简单的个人主页，其中应该包括主页的名称、文字、图片、一些超链接，最好再添加一些音乐背景及其它效果使得其更加美观。实验提交：本实验完成后，请将主页地址发送到lding。本实验的截止日期为2008.5.29。注1：上述实验仅提供了基本的网页制作方法，如果有同学希望使用更高级一些的方法，请在实验时向助教提出，助教将逐一进行解答。注2：对实验三的