第一章网页制作开发工具的基本操作
实验1.1  Dreamweaver 8软件的基本操作
【相关知识】
1.  Dreamweaver8相对于其他以前的版本增加和增强的功能有：支持XML数据、增加样式呈现工具栏、增强CSS设计、增加代码折叠功能。
2.  Dreamwaver 8支持Windows和Macintosh两种操作系统。
3.  在Dreamweaver 8中可以使用HTML、CSS、XML等多种文件类型，主要的文件类型是HTML文件，可以使用.html或.htm扩展名保存HTML文件。
一、实验目的和要求
学会Dreamweaver 8的安装和卸载的方法。
二、实验步骤
1.  安装Dreamwaver 8
（1）运行，打开安装向导对话框。
（2）单击[下一步]按钮，打开安装向导的许可证协议页面。
（3）选中[我接受该许可证协议中的条款]，单击[下一步]按钮，打开选择安装路径的对话框。
（4）可以通过选中[创建快速启动栏快捷方式]或[在桌面上创建快捷方式]复选框来创建快速启动栏快捷图标或桌面快捷图标，单击[更改]按钮，打开更改当前目的地文件夹页面。
（5）在[文件夹名称]文本框中输入新的文件夹路径，单击[确定]按钮，返回安装路径对话框，单击[下一步]，打开默认的文件类型对话框。
（6）单击[下一步]按钮，打开[已做好安装程序的准备]对话框。
（7）单击[安装]按钮，开始安装Dreamweaver 8，安装过程会持续几分钟，然后显示[完成Dreamweaver
8 安装工作]对话框，如图1-1所示。
（8）单击[完成]按钮，完成Dreamweaver 8的安装工作。
2.  卸载Dreamwaver 8
（1）在[开始]菜单中选择[控制面板]命令后，打开相应面板。
（2）选择[添加/删除程序]命令后，打开相应面板。
（3）在[添加或删除程序]对话框的[当前安装的程序]列表中选择[Micromedia Dreamweaver 8]一项，单击[删除]按钮。
（4）询问是否确认删除，选择“是”后，开始卸载Dreamweaver 8。
实验1.2  Fireworks 8软件的基本操作
【相关知识】
1.Fireworks 8是一款专门针对Web图像设计而开发的软件，可以用来创建和编辑网页图形，对其进行动
画处理，添加高级交互功能以及优化图像等。
2.Fireworks 8是一个将矢量图像处理和位图图像处理合二为一的应用程序，可以直接在位图图像状态
和
矢量图像状态之间进行切换，避免了图像在多个应用程序之间的来回迁移。
3.Fireworks 8相对以前版本，增加了许多友好、高效的新特性，主要体现在优化、集成的工作流程、简
而不繁的创作过程以及工作流程的改进等方面。
一、实验目的和要求
学习Fireworks 8的安装和卸载方法。
二、实验步骤
1.  安装Fireworks 8
（1）运行，打开安装向导对话框。
（2）其余步骤与安装Dreamweaver类似，略。
2.  卸载Fireworks 8
步骤与卸载Dreamweaver类似，略。
实验1.3  Flash 8软件的基本操作
【相关知识】
1.  Flash 8适合于制作图像质量高、体积小、适合网络传输的动画，而且还可以利用其独特的动作脚本创作复杂的应用程序。
2.  Flash 8相对以前的版本增加的功能有：自定义缓动控制、图形效果滤镜、混合模式、位图平滑、改进的文本消除锯齿功能、新的视频编码器、视频Alpha通道支持。
3.  Flash 8要求显示器的分辨率在800*600以上。
4. 通常一个Flash动画只应用一个场景，但若动画长度过于庞大或者动画的图层和要素过多，则可创建多个场景，并在场景中分别制作动画的不同部分，便于动画的制作和管理。
一、实验目的和要求
学习Flash 8的安装与卸载方法。
二、实验步骤
1.  安装Flash 8
（1）运行，打开安装向导对话框。
（2）其余步骤与安装Dreamweaver类似，只是在第（3）步后会打开是否安装Macromedia Flash Player 对话框，选择[下一步]即可。
2.  卸载Flash 8
步骤与卸载Dreamweaver类似，略。
第二章 HTML基础
实验2.1  HTML中的结构标记
【相关知识】
1.HTML即超文本标记语言，是一种用来制作超文本文档的简单标记语言，是WWW的描述语言。
2.HTML超文本文档分为头和主体两部分。文档头是对该文档进行的必要定义，文档体是要显示的信息。
3.几乎任何的文字编辑器都可以用来编写HTML文件，如记事本、写字板等，只要将文件存成ASCII纯
文本格式，并以.htm或.html为扩展名即可。
4.HTML语言是在Dreamweaver 8的代码窗口中编写的。
一、实验目的和要求
1.  掌握Dreamweaver 8中编写代码的方法。
2.  掌握HTML超文本文档的基本结构和编写方法。
二、实验步骤
1. HTML的基本结构
在Dreamweaver 8的代码窗口中，写入HTML的基本结构代码，如下所示。
<html>
<head>
</head>
<body>
</body>
</html>
选择[文档工具栏]中的图表后单击[预览在IEexplore 6.0]或者直接单击F12命令，可预览效果。
2. 网页头部标记
在Dreamweaver 8的代码窗口中，增加网页头部代码，由<title>、</title>标识，如下所示，预览效果。
<html>
<head>
<title>网页头部信息</title>
</head>
<body>
</body>
</html>
3. 网页主体标记
在Dreamweaver 8的代码窗口中，增加网页主体代码，由< body >、</ body >标识，如下所示。
<html>
<head>
<title>网页头部信息</title>
</head>
<body>
网页主体信息
</body>
</html>
单击F12命令，可在浏览器中预览效果。
【操作技巧与注意事项】
1.HTML的两大结构部分都要方在<html> </html>之间。
2.编写HTML代码时大小写的效果是一样的。
实验2.2  HTML中的格式标记
【相关知识】
1.HTML提供了6个等级的标题标记<Hn>，n越小，标题字号就越大。
2.换行标记<br>是一个单标记，表示换行。
3.段落标记<p>有一个ALIGN属性，用来指明字符显示的对齐方式，一般值有CENTER、LEFT、RIGHT
三种。
4.水平线标记<hr>有四个属性：size表示水平线的宽度；width表示水平线的长；align表示水平线的对齐html网页设计实验心得
方式，有center、left、right三种；noshade表示线段无阴影，为实心线段。
一、实验目的和要求
1.  掌握标题、换行、段落标记的HTML编写方法。
2.  掌握水平线标记的HTML编写方法。
二、实验步骤
1. 标题标记
在Dreamweaver 8的代码窗口中，在< body >、</ body >中增加HTML的标题标记代码，如下所示。
<html>
<head>
<title>网页头部信息</title>
</head>
<body>
网页主体信息
<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>
<h4> 四级标题 </h4>
<h5> 五级标题 </h5>
<h6> 六级标题 </h6>
</body>
</html>
单击F12命令，可在浏览器中预览效果。
2. 换行标记
在Dreamweaver 8的代码窗口中，在< body >、</ body >中增加换行标记的代码<br>，如下所示。
第一阶段：
2008年6月——2008年9月<br>
第二阶段：
2008年10月——2008年12月<br>
第三阶段：
2009年1月——2009年4月<br>
单击F12命令，可在浏览器中无换行标记和有换行标记的预览效果。
3. 段落标记
在Dreamweaver 8的代码窗口中，在< body >、</ body >中增加段落标记的代码</p>，如下所示。
<p>第一阶段：
2008年6月——2008年9月</p>
<p>第二阶段：
2008年10月——2008年12月</p>
<p>第三阶段：
2009年1月——2009年4月</p>
单击F12命令，可在浏览器中预览效果。
4. 段落标记属性
在Dreamweaver 8的代码窗口中，在< body >、</ body >中增加段落标记属性的代码，如下所示。
<p align=center>第一阶段：
2008年6月——2008年9月</p>
<p align=left>第二阶段：
2008年10月——2008年12月</p>
<p align=right>第三阶段：
2009年1月——2009年4月</p>
单击F12命令，可在浏览器中预览效果。
5. 水平线标记
在Dreamweaver 8的代码窗口中，在< body >、</ body >中增加水平线标记代码<hr>，如下所示。
<html>
<head>
<title>网页头部信息</title>
</head>
<body>
网页主体信息
<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>
<h4> 四级标题 </h4>
<h5> 五级标题 </h5>
<h6> 六级标题 </h6>
<hr>
<p align=center>第一阶段：
2008年6月——2008年9月</p>
<p align=left>第二阶段：
2008年10月——2008年12月</p>
<p align=right>第三阶段：
2009年1月——2009年4月</p>
</body>
</html>
单击F12命令，可在浏览器中预览效果。
6. 水平线标记属性
在Dreamweaver 8的代码窗口中，在< body >、</ body >中增加水平线标记属性代码，如下所示。
<hr>
<p align=center>第一阶段：
2008年6月——2008年9月</p>
<hr size="12">
<p align=left>第二阶段：
2008年10月——2008年12月</p>
<hr width=50%>
<p align=right>第三阶段：
2009年1月——2009年4月</p>
<hr noshade="noshade">
单击F12命令，可在浏览器中预览效果。
【操作技巧与注意事项】
1.  在编写HTML时不必担心段落过长的部分会被浏览器遮住，因为每当浏览器缩小时，浏览器会自动
将右边的文字转移到下一行。
2.  HTML标记属性需要写在标记字符的后面，<>的里面。
3.  HTML格式标记应写在网页主体标记<body> </body>中。
实验2.3  HTML中的超级链接标记与图像标记
【相关知识】
1.  HTML中的超级链接标记分为三种：URL链接、本地链接、目录链接。
2.  一个超级链接的基本格式是：<a href=”链接地址”> 链接文字 </a>
3.  插入图像链接的格式为：<img src=”链接的图像文件地址”  width=”图像的显示宽度”  height=” 图像的显示长度”>
一、实验目的和要求
1.  掌握超级链接标记中的URL链接、本地链接、目录链接的方法。
2.  掌握插入图像标记方法。
二、实验步骤
1.  超级链接标记中的URL链接
在Dreamweaver 8的代码窗口中，在HTML代码中插入超级链接标记，如下所示。
<a href="www.sina"> 新浪 </a>
F12命令，可在浏览器中预览效果。点击“新浪”即可打开www.sina网页。
2.  超级链接标记中的本地链接
在Dreamweaver 8的代码窗口中，在HTML代码中插入超级链接标记，如下所示。
<br>
<a href="index.html"> 相对路径 </a>
<br>
<a href="E:\mysite\index.html"> 绝对路径 </a>
F12可在浏览器中预览效果。点击“相对路径”和“绝对路径”都可打开E:\mysite\index.html网页。
3.  超级链接标记中的目录链接
在Dreamweaver 8的代码窗口中，在HTML代码中插入超级链接标记，如下所示。
<br>
<a href="d:\游戏"> 游戏 </a>
单击F12命令，可在浏览器中预览效果。点击“游戏”即可打开D:\游戏。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。