实验电子稿.docx

1、实验电子稿19.1 网页基础知识一、实验目的（1）掌握网页组成元素。（2）理解网站、网页、主页等概念及区别。（3）理解网页风格的重要性。二、实验软硬件环境一个正常工作、能上Internet网的计算机机房。三、实验要求根据观察所得结果，能够从网页中分析网站的基本元素，并掌握其开发流程。四、实验内容与步骤1. 不同方式打开网站主页。打开IE浏览器，然后：（1）输入网址，即可打开126网站的主页。（2）输入网址分析：查看这两种方式打开的主页是否一样，若一样请说明为什么会出现此类情况？2. 判断网页元素。图19-1显示为126网站的主页，请区分网页上哪些为Flash元素，哪些为图片？图19-1 126

2、网站主页请将该主页中的所有图片，保存在“桌面”上的PIC子目录内（若没有，请自行创建）。3. 查看网页风格。分别以“1024768”及“800600”两种分辨率浏览同一网站。操作步骤如下。（1）设置屏幕分辨率的方法：右键单击桌面，选“属性”选项，在“设置”选项卡的“屏幕分辨率”内（如图19-2所示）拖动鼠标选择合适的分辨率。（2）打开IE浏览器，输入网址。分析：屏幕分辨率对网页影响有多大，目前网站在设计时一般使用的最佳分辨率是多少？4. 选出一个最喜欢的网页，然后列出三点喜欢它的理由。图19-2 设置屏幕分辨率19.2 认识Dreamweaver CS3一、实验目的（1）Dreamweaver

3、安装卸载过程。（2）网页路径表示方法。（3）创建网站站点。二、实验软硬件环境一个正常工作的计算机机房、一张Dreamweaver CS3软件安装盘。三、实验要求能够安装Dreamweaver，并配置网站站点。四、实验内容与步骤（1）已安装Dreamweaver用户请先操作此步：打开Windows中“控制面板”中的“添加或删除程序”窗口，找到“Macromedia Dreamweaver CS3”项，并单击“更改/删除”按钮，以执行卸载操作。如图19-3所示。图19-3 添加或删除程序（2）将Dreamweaver光盘放入光驱，根据提示以默认方式执行安装操作。提示：网络机房可映射一个驱动器地址盘

4、。（3）将exc2子目录中的所有文件拷贝到本地计算机D盘根目录下，打开该文件夹，确认已拷贝文件与图19-4所示的内容一致。图19-4 实验二文件（4）打开IE浏览器。若要查看D:exc2126.htm文件内容，请问在地址栏中如何输入路径？（5）将D:exc2子文件夹配置为Dreamweaver的本地站点，站点名为“实验二”，并在此站点下新建一个主页文件，命名为index.html ，主页上只输出一句话：我已完成实验二的所有操作。19.3 制作简单网页一、实验目的（1）利用Dreamweaver制作简单网页。（2）掌握网页的布局排版设计方法。（3）设计网页元素。二、实验软硬件环境一个正常工作的计

5、算机机房、计算机内已安装Dreamweaver CS3软件。三、实验要求能够设计并制作简单的网页。四、实验内容与步骤1. 设计如下网页，命名为：book.htm。念奴娇 赤壁怀古大江东去，浪淘尽，千古风流人物。故垒西边，人道是、三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公谨当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间、强虏灰飞烟灭。故国神游，多情应笑我，早生华发。人间如梦，一尊还酹江月。要求：（1）设置标题“念奴娇 赤壁怀古”字体为“黑体”，字号自定，并居中显示。（2）文章字体为“楷体”，字号、字体颜色、网页背景颜色自定。（3）将每段设置成无序列表形式。（4）自

6、定义部分：整个页面简洁、美观。2. 设计如图19-5所示的网页，命名为：index.htm。G:index.htm图19-5 实验三图片要求：（1）网页由一个2行2列的表格组成，其中最后1行为1列。（2）左边的图片请随意找幅图片代替，并插入网页中。（3）网页中其余文字请根据自己情况输入。（4）表格中最后1行的“通过XXXX.com发邮件给我”，要求“XXXX.com”做成E-Mail链接。（5）在表格最后一行的后面再插入一行。在本行中输入文字：“查看小说”，要求文字右对齐。（6）将“查看小说”链接到book.htm 文件，并设置打开方式为“_blank”。（7）自行将网页排版、美化。最低要求：

7、网页最终效果要比图19-5所示的这个效果好看。操作提示（制作时步骤）：（1）建立站点。（2）建主页（index.htm）及分页（book.htm）。（3）要编辑某个页面，可直接双击该文件名即可。（4）左边随意找的图片也必须存放在站点文件夹下（为区别其他文件，可在站点文件夹下建立一个专门用于存放图片的文件夹），否则预览网页时可以会出现图片显示不出来。19.4 页面美化及提高制作效率一、实验目的（1）掌握CSS、库、模板等操作的优缺点。（2）能够利用CSS、库、模块进行网页设计。（3）掌握美化网页的方法。二、实验软硬件环境一个正常工作的计算机机房、计算机内已安装Dreamweaver CS3软件。

8、三、实验要求能够利用CSS、库、模块进行网页设计，并进行页面的美化。四、实验内容与步骤1. 制作类似于图19-6所示的网页的顶部。图19-6 实验四图片要求：（1）导航栏可插入一个9列的表格。（2）文字可利用CSS设计成统一样式。（3）分别用库、模板两种方式，保存此页面。2. 建立本地站点“实验四”，并新建主页index.htm文件，分页a1.htma10.htm共10个文件。3. 分别用库、模板两种方式将第1步中所做的页面应用到a1.htma10.htm网页中。19.5 HTML与Dreamweaver一、实验目的（1）HTML语言结构。（2）掌握头部标记的应用。（3）掌握Body标记的部分

9、参数。二、实验软硬件环境一个正常工作的计算机机房、计算机内已安装Dreamweaver CS3软件。三、实验要求了解HTML语言、掌握其与Dreamweaver的联系。四、实验内容与步骤1. 查看网页的源代码。（1）打开IE浏览器，输入网址：，然后在窗口中不是图像的任意位置单击鼠标右键，选择“查看源文件”。（2）操作结果：系统会启动“记事本”程序，并打开网页的源程序，可以看出网页均是由“”标记括起来的。这些文本其实就是HTML源代码。（3）请将结果保存在桌面上，并命名为：1.txt。2. 利用HTML编写一个网页。（1）打开记事本，输入如下程序： 实例题 这里是HTML中非正文标记的综合应用

10、（2）将程序保存在桌面上，并命名为：“2.htm”。（3）运行程序，操作结果如图19-7所示。图19-7 实验五图片（4）请说明在标记内与在内的内容在用浏览器查看时有什么区别？3. 用HTML设计网页标题。（1）打开网址：，查看网页的标题是什么？（2）将网页以“默认的标题”添加到Windows的收藏夹中。（3）自行设置一个带标题、背景为蓝色的3.htm网页文件，并保存在桌面上。19.6 Dreamweaver应用技能一、实验目的（1）掌握对页面美化的基本知识。（2）在网页中插入表单。（3）利用CSS、层、行为制作复杂网页。二、实验软硬件环境一个正常工作的计算机机房、计算机内已安装Dreamwe

11、aver CS3软件。三、实验要求能够利用Dreamweaver制作一般小型网站。四、实验内容与步骤制作如图19-8所示的网页。图19-8 实验六图片1. 按图19-8标准制作，图中未涉及的内容可不做。2. 绘制一个无边框的表格，用于页面排版。3. 所使用到的图片，均在“exc6”文件夹中提供。上图中凡是超链接的区域，全部链接到1.htm文件中。注意：1.htm文件是自己创建的一个空网页。4. 在图19-8中：这块区域为表单。插入表单的方法：“插入”菜单中选择“表单”命令即可。注意，插入表单时，先插入“表单”再插入相关的表单域（如文本字段）。5. 有关行为的制作：当用户点击“Google图片”

12、区域，自动弹出一个200*80的1.htm小窗口。6. 有关层与行为的制作： 在的下面增加一行“查看版权” 文字。 在网页中插入一个名为a1的层，并在此层中输入“这个网页是*制作的！”文字。 要求当鼠标移动到“查看版权”的文字上时，则显示“这个网页是*制作的！”文字；反之当鼠标移开，此文字自动消失。提示：排版时切记：一定要用表格排版，并设表格边框为0。表格越多，排版出的效果会越好，但操作难度会有所加大。19.7 认识Fireworks CS3一、实验目的（1）Fireworks CS3安装卸载过程。（2）工作环境设置。（3）Web图像的处理流程。二、实验软硬件环境一个正常工作的计算机机房、一张

13、Fireworks CS3软件安装盘。三、实验要求能够安装Fireworks，并配置工作环境。四、实验内容与步骤1. 已安装用户请先操作此步：打开Windows中“控制面板”中的“添加或删除程序”窗口，找到“Macromedia Fireworks CS3”项，并单击“删除”按钮，以执行卸载操作。2. 将Fireworks CS3光盘放入光驱，执行安装操作。3. 练习新建、保存、打开图像的操作。（1）新建一个长300 px、宽400 px、dpi为100 的透明的图像。（2）在此图像中绘制一个圆，并填充为蓝色。（3）将此图像保存为1.png文件至D:。4. 设置工作环境。（1）打开1.png文

14、件，利用缩放工具将图像放大，并利用抓手工具查看图像。（2）还原图像到原始大小，并打开标尺、网络线，然后用引导线将“圆”进行定位。（3）再次利用缩放工具放大图像，查看引导线是否也随之放大。（4）将图像以原文件形式保存。请问：图像是否真得放大了？19.8 Fireworks基本操作一、实验目的（1）文档的创建与编辑方法。（2）输入文本。（3）使用图层控制图像。二、实验软硬件环境一个正常工作的计算机机房、计算机内已安装Fireworks CS3软件。三、实验要求能够对一幅图像进行简单的操作，如改变其属性、加入文本等。四、实验内容与步骤1. 基本操作题。打开“和平与自由.jpg”图像文件（在“exc8

15、”子目录下，效果如图19-9所示）。图19-9 实验八图片1（1）将图像文件大小改为“450320”。（2）将画布四周略缩小10px。分析：改变文件大小与画布大小的区别？（3）在图片上加入“和平与自由”文字，要求文字样式新颖、有美感。（4）将图片以“1.png”和“1.gif”方式保存至D:。2. 自行操作题。在“exc8”文件夹中提供了“小猫.jpg”图像文件（如图19-10所示），要求给此猫点睛，达到“小猫点睛.jpg”图像文件（如图19-11所示）效果。结果保存在D盘，命名为：2.png。 图 19-10 实验八图片2 图 19-11 实验八图片319.9 设计网站CI一、实验目的（1）

16、了解什么是矢量图。（2）使用路径工具来绘制矢量图形。二、实验软硬件环境一个正常工作的计算机机房、计算机内已安装Fireworks CS3软件。三、实验要求能够绘制矢量图，并进行网站CI创作。四、实验内容与步骤为自己设计一个名片，效果如图19-12所示。图19-12 实验九图片说明：（1）整体效果可仿照图19-12。（2）图19-12最左边为一个CI标志，请读者根据自己特色，创作一个更切合实际的CI标志。19.10 网站主要图片设计一、实验目的（1）了解什么是位图。（2）掌握绘制位图。（3）掌握图像优化与导出的方法。二、实验软硬件环境一个正常工作、能上Internet网的计算机机房，计算机内已安

17、装Dreamweaver CS3和Fireworks CS3软件。三、实验要求能够绘制或处理位图，并进行网站主要图片的创作。四、实验内容与步骤1. 打开“exc10”文件夹，并双击“”图标，将打开如图19-13所示的网页。图19-13 实验十图片图中显示的是“学子家园”网站主页中的部分内容。2. 打开Fireworks软件，自行设计一幅“756160”大小的图像。3. 待图像设计好后，将其保存在xzjy子目录下，并命名为“open.jpg”文件；保存时应选择替换原文件。4. 再次执行第1步的操作，查看主页上是否已换成刚设计的图片？提示：（1）设计时可上网搜索相应的素材图片。（2）整个图片的设计

18、应以简洁、大方、主页搭配合理为基本要求。（3）为保证图片能正常显示，最好将xzjy子目录设置为本地站点。19.11 认识Flash CS3一、实验目的（1）Flash安装卸载过程。（2）工作环境设置。（3）动画在网页中的应用。二、实验软硬件环境一个正常工作的计算机机房、一张Flash CS3软件安装盘。三、实验要求能够安装Flash，并配置工作环境。四、实验内容与步骤1. 已安装用户请先操作此步：打开Windows中“控制面板”中的“添加或删除程序”，找到“Macromedia Flash CS3”项，并单击“删除”按钮，以执行卸载操作。2. 将Flash CS3光盘放入光驱，执行安装操作。3

19、. 熟悉Flash CS3的操作界面：（1）打开Flash CS3时，出现的“开始”页面，有什么功能，是否可以关闭？（2）对所有活动面板的“显示/隐藏”操作的快捷键是什么？“隐藏”后，可通过什么菜单进行打开？（3）Flash中的对动画的操作均在什么面板中完成？19.12 创建简单动画一一、实验目的（1）通过对对象的操作和各类工具的使用。（2）掌握动画制作基础知识，并能制作出简单动画。二、实验软硬件环境一个正常工作的计算机机房、计算机内已安装Flash CS3软件。三、实验要求能够掌握Flash中各类工具的使用，并制作出简单的动画。四、实验内容与步骤1. 练习“国旗”的绘制。（1）要求有一根旗杆

20、。（2）画布大小为：640480，底色为白色。（3）国旗为红色，五角星为黄色。（4）以“1.swf”为文件名，保存在D盘。2. 在第一题的基础上深入制作：会旋转的五角星。要求：中间的大五角星能产生动画，操作步骤如下：（1）选中“时间轴”中的第1帧，并绘制一个五角星。（2）在第1帧上单击鼠标右键，选择“创建补间动画”。（3）在第20帧处单击鼠标右键，选择“插入关键帧”，并使用旋转工具将五角形翻转一圈。（4）按Ctrl+enter快捷键测试影片，并以“2.swf”为文件名，保存在D盘。3. 简单动画创建：制作形状变换图形。（1）在时间轴面板的第20帧处，单击鼠标右键，选择“插入空白关键帧”，并在场

21、景中输入一个文字，同时将文字打散。（2）选中第1帧，在场景中输入一个文字，并将文字打散。（3）再次选中第1帧，打开“属性”面板，在“补间”栏选“形状”即可。（4）以“3.swf”为文件名，保存在D盘。19.13 创建简单动画二一、实验目的（1）了解动画的分类。（2）如何创建各种类型的动画。二、实验软硬件环境一个正常工作的计算机机房、计算机内已安装Flash CS3软件。三、实验要求能够制作出网页中各种简单的动画图19-14 实验十三图片1四、实验内容与步骤1. 图形渐变效果制作。可参考效果，如图19-14所示，或参考“素材”子目录下“图形渐变效果.swf”演示。提示：（1）为对齐文字图形，可打

22、开参考线。（2）“让我们敲希望的钟”和“多少祈祷在心中”这两行文字，分别作为两个图形元件，放入到不同的图层中。（3）图层中的关键帧为递归顺序，色彩通过属性面板中Alpha的值设置。图19-15 实验十三图片22. 制作滴水效果。参考效果如图19-15所示，或参考“exc13”文件夹下的“滴水效果.swf”演示。操作步骤：（1）新建两个图形元件，分别放置水滴和水波。 水滴图形：设置从蓝到白渐变。 水波图形：设置在30帧处将水波扩大，并在1帧与30帧建立形状过渡动画。（2）返回到“场景1”中，将水滴图层拖至顶部，在10帧处插入关键帧，并移动水滴到下面，创建补间动画。（3）新建“Layer 2”，在

23、第10帧处插入关键帧，并将水波图形拖至场景下面。（4）在第36帧处插入一关键帧，设置该帧中水波图形的Alpha值为0，建立渐变路径。（5）新建图层Layer3、Layer4、Layer5、Layer6，复制Layer2中的帧到各层中。（6）为滴水效果加入声音。19.14 交互式动画制作一、实验目的（1）了解ActionScript语法。（2）如何创建简单的交互式动画。二、实验软硬件环境一个正常工作的计算机机房、计算机内已安装Flash CS3软件。三、实验要求使用ActionScript语言编写程序，并制作出交互式动画。四、实验内容与步骤1. 熟悉添加脚本的位置。（1）帧上：如在20帧加入“s

24、top();”，则表示动画播放到20帧则停止。（2）按钮上：格式为：on(事件) 语句； （3）影片剪辑上，格式为：onClipEvent(事件) 语句； 2. 制作第14章中的模拟时钟，并保存为“1.fla”至D:。3. 模仿制作随机变化的扑克牌，可参考“exc14”文件夹下的“扑克牌.fla”演示。脚本添加的位置如下：（1）为让动画在播放第1帧时停止下来，先在第1帧加入代码：“stop();”。（2）再选中舞台上的按钮，输入以下代码：on(release) gotoAndStop(random(13)+1);说明：gotoAndStop()作用是“跳转并停止”，其括号中的参数是要跳转到的帧

25、数。random(13)的作用是在012共13个整数中随机选取一个整数，但由于gotoAndStop()括号中必须为帧数，为防止取到数值0，因此在括号中使用“random(13)+1”表示帧数。这样，当每次单击按钮时，影片就会随机地跳转到不同帧中，从而显示不同的扑克牌。（3）读者可模仿将扑克牌图片换成其他图片，试试看是否也能随机变化？19.15 动画发布一、实验目的（1）掌握如何测试影片。（2）发布动画方法。二、实验软硬件环境一个正常工作的计算机机房、计算机内已安装Flash CS3软件。三、实验要求对于制作的动画，能够成功导入到网页中。四、实验内容与步骤1. 任意绘制一个简单的动画，分别用“

26、影片测试”和“场景测试”两种命令测试该动画。分析这两种方法的区别是什么？2. 将动画以“1.exe”文件名保存至D:。3. 结合实验十，制作一个“756160”动画，插入到“学子家园”网页的图片处。19.16 网站测试与上传一、实验目的（1）进行网站测试的必要性（2）网站上传方法验证二、实验软硬件环境一个正常工作的计算机机房、计算机内已安装Dreamweaver CS3、Fireworks CS3、Flash CS3软件，一张Windows XP完整版安装光盘。三、实验要求排除网站中的故障。分组为单位，测试网站能否正常运行。四、实验内容与步骤1. 测试网站（1）检查网站中是否存在错误在链接。可

27、通过在Dreamweaver CS3，打开“结果”面板，并切换至“链接检查器”选项，然后单击左边的“”按钮，在弹出的快捷菜单中选择“检查整个当前本地站点中的链接”。（2）利用Dreamweaver提供的“站点报告”功能，将整个站点生成一份详细的测试报告，将其保存在“桌面”上，并命名为 test.htm 2. 配置IIS（1）检查本机中IIS组件是否已否安装，可直接打开“控制面板”|“管理工具”，若存在有“Internet 信息服务”项，表示已安装，如图19-16所示。图19-16 已安装IIS组件的计算机（2）若没安装，请安装IIS组件。（3）运行“Internet 信息服务”，打开IIS控制台，请将本地站点配置成服务器Web目录，然后指定默认的启动文档为主页文件。（4）运行Windows中的“命令提示符”，执行“IPConfig”命令，查看本机的IP地址，如图19-17高亮度显示为结果。图19-17 查看本机IP（5）告之同网络内的其他用户，在浏览器中输入“http:/IP地址”，看是否能正常显示我的网站。3. 结合“18.2.3 网页部分加密技术”章节内容，在本站主页上试用这些加密技术。