上机实验2网页制作基础

第一篇：上机实验2网页制作基础

上机实验2

上机练习

1按P21页1.3.4节内容制作一个简单的网页。

上机练习2

（1）在计算机上建立一个自己的文件夹，然后按照课本P30页的步骤使用高级

选项卡创建一个站点。（文件夹可按照P31页实例来创建）

（2）站点的编辑：对所创建的站点进行编辑，修改

（3）站点的复制及删除

（4）在站点中使用文件面板，新建及重命名文件

上机练习

31.练习目的：学习制作网页的基本技能。

2.练习步骤：

（1）在计算机上建立一个自己的文件夹，制作一个简单的网页，网页文件名为：index.htm，内容不限，网页中要包含文字和图像，文字的颜色、大小要有所变化。网页中的图片可以从网上下载。网页中的文字输入对该图片的介绍。不少于150字。

（2）选择自己喜爱的图片设置为背景图片。

（3）将制作的网页在浏览器中浏览。

（4）制作的网页有较好的视觉效果。

交上机练习1、3整个文件夹要交上，文件夹以班号的后3位命名。

如1班的1号为101.

第二篇：多媒体实验四多媒体网页制作

实验四 多媒体网页制作

【目的与要求】

1．熟悉网页制作软件Dreamweaver功能和特点；

2．学习使用网页制作软件Dreamweaver制作网页的方法

【实验仪器与器件】

硬件：多媒体个人计算机 软件：Dreamweaver软件

【实验内容】

1.网站建立与网页发布流程

建立网站首先要在本地机上构建本地站点，创建合理的站点结构，编辑制作网页，用合理的组织形式来管理站点中的文档，并对站点进行必要的测试。一切就序后，再将站点上载到Internet服务器，供其他人浏览。

网站建立与网页发布基本流程是：站点规划与设计→素材准备→建立网站与网页制作→网站测试→网站发布→维护更新。

2.Dreamweaver 操作界面

Dreamweaver是美国MACROMEDIA公司开发的集网页制作和网站管理于一身的所见即所得的网页编辑器,Dreamweaver与flash、Fireworks三个软件被称之为网页制作三剑客。Dreamweaver具有两个主要功能： 网站建立与维护；网页制作。

Dreamweaver 集成布局操作界面按功能分为四大部分：即页面编辑器；面板组；属性面板；站点管理器。

3.创建网站

1）规划网站

在建立网站与制作网页之前首先要规划站点： ① 规划站点结构：合理的站点结构可以加快对站点的设计，提高工作效率。② 规划站点导航机制：提供清晰易懂的浏览方法，采用统一的网页组织形式，引导用户轻松访问网站。

③ 构建整体的站点风格：网站中网页风格应该统一，使网站特点鲜明，突出主题。

2）创建本地站点 在制作网页之前，必须首先创建网站或打开网站，此后Dreamwear会自动将所有网站资源（HTML文档、图片、动画、声音、程序等）都保存到网站文件夹中，从而保证网站发布后网页上的所有元素可以正常浏览。网站分为本地站点（网站存放在本机硬盘上）与远程站点（网站存放在用于发布网站的服务器端）。

4.页面布局

页面布局是进行网页设计最基本、最重要的工作之一。常用的布局方法有框架、表格和图层。

①框架

框架式常见的页面设计方式，使用框架可以讲一个网页分割成几个既有联系又各自独立的部分，从而实现在一个浏览器中显示多个网页文档的目的。一个包含有三个框架的网页实际上是由四个独立的 HTML 页面组成：框架集文件和三个包含在框架中显示的内容的文件。当使用框架集设计网页时，为了该网页能在浏览器中正常工作必须对这四个页面都进行保存。

要在框架内使用链接，必须为链接设置一个目标。这个目标是指在哪个框架内链接要打开的内容。

②表格

表格是进行网页布局时最常用的工具。表格为网页设计者提供了在页面中增加垂直和水平结构的简洁方法。使用表格可以在页面上排列数据与图像，在页面上设计栏目等。

③层

层是一种网页元素定位技术，使用层可以精确定位页面元素，层对于制作网页的部分重叠具有特殊作用。层可以放置在页面的任意位置，可以在层中防止文本、图像或其它层。

5.设置超链接

利用超级链接可以实现文档间或文档中的跳转，超级链接由两部分组成:链接的载体以及链接的目标地址。许多页面元素可以作为链接载体，如:文本、图像、图像热区、轮替图像、动画…。而链接目标可以是任意网络资源，如:页面、图像、声音、程序、其他网站、Email、锚点。

6.交互表单

表单是网页中提供交互操作的重要手段，它可以收集浏览者提供的信息，并对此作出反应，处理用户的要求。每个表单中都可以包含一系列的输入工具，如文本域、密码域、单选按钮、复选框、列表框、菜单、命令按纽、隐藏域等。在Dreamweaver中添加表单就像插入其它对象一样，只需将光标置于插入点处，点击表单工具栏中的表单图标或插入菜单中的表单命令，将在文挡窗口中出现红色虚线组成的空白表单体，在表单体中可以放置各种表单对象。

7.添加多媒体

Dreamweaver中可以添加多种格式的多媒体插入对象。8.系统的测试优化

网页制作完毕后，就可以将网站发布到Internet上，在发布网站之前应首先对网站进行测试与整理。

Dreamweaver为整理站点，提供了多种方法。使用“检查超链接”的方法，可以迅速地找出网站中无效的链接。

【实验内容及步骤】

1、主页导航：

2、网页布局：

欢迎主页

Before风景发展

Now专业文化活动实习

Future工作展望

AboutMe3、链接结构：

4、制作截图：

属性设置

链接设置 【心得体会】

1、主题创意：

本网站主题围绕作者而建，包括三个部分，过去（Before）、现在（Now）和未来（Future）。充分利用图片、音频、视频等素材，体现出作者对当前生活的热爱，对美好未来的努力奋斗，表现一种宁静淡泊的情怀。

过去部分展现作者家乡的风景（scenery）和发展（develop），通过回忆，描绘对家乡的眷恋和期望。现在部分则是作者大学生活，分别是专业（special）、文化（culture）、活动（travel）和实习（practice）。从四个方面展示了母校的文化氛围、专业方向，和对即将到来的实习之期待。未来部分从工作（work）和展望（hope）两方面描绘出一个令人期待的美好生活，并为之努力的坚持。

关于我（About me）是一个小小的个人简历，恰逢导师布置的训练任务，借此制作网页机会，融入其中。算是在节约时间和创新层面，有自己的想法。

2、操作步骤：

第一步，确定主题；

首先规划出大致的网页设计，思考所必要的素材等项目。

第二步，素材整理；

按照第一步构想内容，在网上搜寻图片等素材，音频和视频文件则是很早之前就有收藏。之后又利用各种软件处理好，做成适合网页制作的大小和美感。

第三步，网页制作； 打开Dreamweaver CS4 开始一点点制作，不懂就问，不懂就查，不懂就搜。期间经历各种失误、错误，导致两次NG，不得不重新来过。最后，（此环节）耗时两天，共计36小时以上，终于完成。

3、实验心得

本次网站制作，感觉比上一实验视频制作还要辛苦。相对来说素材要求很多，网站的结构、布局、链接等环节比较麻烦。毕竟是一个人在完成，没有美工等的协助。图片自己处理，音频自己处理，视频自己处理。经过此役，完全是一个人在“战斗”。很辛苦，很累。不过，很值得！

所有的事情一个人完成，那么，所有的知识就是自己学到。经历过的“阻挠”、“挫折”，实则是宝贵的经验，现在发生以后就不会发生。

其实很多灵感都是在制作过程中产生的，“咦这个导航可以这么来着。”“噢图片也可以那样无限滚动展示，多炫！”“嗯，加个音乐效果应该很好。”不断冒出新的方式，新的灵感。这也算是工作的乐趣所在，沉浸于此，知足常乐。

较大的一次失误出现在链接设置，初步的结构做出来之后测试了一下可以通过。然后在查看链接时候，之前正确的链接在查了一遍之后全部错误。当时心死一般的冰凉啊，如果错误那就预示着又要全部重新来过，情形十分骇人。

不能大意，又检查了一遍还是错误。报错在百度搜索了一下，也没有解决之道。就在即将按下删除的确认时候，一下子惊醒过来。迅速在每个文件夹中建立链接的Button文件。再次测试终于成功，顿时“泪流满面”，欣喜若狂。

这事说明了，遇事千万不能慌乱，以免做出任何不智的举动，使得之后万分后悔为时已晚。心若冰清，天塌不惊！

【实验结果】

附件：

压缩文件：多媒体实验四.rar 附件下载：百度网盘

http://pan点baidu点com/share/link?shareid=455970&uk=4228522131

注意：该网站内所有链接是建立在作者主机之上，若是拷贝至其他电脑，烦请在D盘根目录之下建立My Documents文件夹，并将MySite文件夹解压至其中。

如图：

然后运行MySite中的home.html文件，若是部分内容无法显示，请设置浏览器允许插件运行，或者下载支持插件。

第三篇：网页制作与规划实验教案

实验一 站点的创建与基本HTML标记的应用

一、实验目的及要求

1.了解组成网页的基本元素

2.掌握文本元素的添加和编辑方法 3.掌握图像元素的添加和运用技巧 4.掌握几种链接的具体创建方法 5.掌握图像元素的添加和运用技巧

二、实验学时

4学时

三、实验内容

任务一：在网页中基本页面元素的应用 1．准备工作

在c盘或其他盘新建一个文件夹作为站点文件夹，文件夹名称为myweb3。复制给定的一个图像文件夹images和一个网页文件sx3-2.htm。

2．建立本地站点

‘ 用已学方法建立本地站点。

3．依据图3．38所示的效果，向网页中添加并编辑页面元素，具体操作步骤如下。

(1)在默认打开的网页中选择“修改”|“页面属性”菜单命令，设置使

背景颜色为#CCCCCC。

(2)输入网页首行文本“老邮票知多少”，大小为48像素，颜色为#FFFF00，字体为“华文行楷”粗体，居中对齐。

(3)在网页第二行插入更新日期和版权信息，选择“插入”l“日期”菜单命令，将当前编辑日期插入网页，然后利用“插入”面板上“文本”选项卡中的晶按钮，插入多个空格，再输入版权信息“◎版权所有：D．Wei@sohu．com”整行文字大小为18像素，颜色为#000000，字体为默认字体，粗体，居中对齐。

(4)在网页第三行选择“插入”|“水平线”菜单命令，插入一条水平线，高度为5，其他属性取默认值。

(5)在网页第四行、第七行各插入一行文本，内容分别为“纪33(C33)：中国古代科学家、1955．8．25发行600万套、全套4枚、新票市场参考价￥550元。”和“纪36(C36)：中国工农红军胜利完成二万五千里长征二十周年、1955．12．30发行600万套、全套2枚、新票市场参考价￥850元。”文字大小为18像素，格式为“项目列表”，其他属性取默认值。

(6)在网页第五行选择“插入”I“图像”菜单命令，插入四张邮票图像，文件名分别为0637.jpg、0638.jpg、0639.jpg、0640.ipg。每张图像的宽为

110、高为150，其他属性取默认值。

(7)在网页第六行插入一条水平线，宽为400像素，其他属性取默认值。

(8)在网页第八行插入两张邮票图像，文件名分别为0645.jPg、0646.ipg，图像宽高分别为150／110和110／150，其他属性取默认值。

4．保存网页 选择“文件”“|保存”菜单命令，在站点中将此网页保存为sx3-1．htm。5．打开并编辑给定的网页文件sx3．2．htm，如图3-39所示。

(1)建立图像热点链接。为此选中网页上方图像，利用“属性”检查器

中的热点工具在图像上建立两个热点，如图3．40所示。从左到右两个热点分别链接到sx3-2-1．htm和sx3-2-2．htm文件(两个文件可稍后建立)。

(2)插入命名锚记。为此将光标放在网页标题“教育天地”后，选择“插入”I‘‘命名锚i6'’菜单命令，在输入对话框中输入锚记“A0“。依此方法在网页右侧文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”处分别插入命名锚记，依次为A1～A7。

(3)创建锚点链接。为此分别创建左列目录文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”与右列命名锚记A1～A7的锚点链接。然后再将各段下方的文本“返回”与标题处锚记A0建立锚点链接。

(4)创建无址链接。选中网页上方文本“教师篇”，在“属性”检查器的链接栏中输入“≠}”即可。

(5)创建邮件链接。选中网页最后一行文本“联系”，然后在“属性”检查器的链接栏中输入“mailto：abc@163．com'’即可。如图3—41所示。

6．保存网页

选择“文件”I“保存”菜单命令，将此网页保存在站点中。7建立其他网页

(1)新建一张网页，输入“名人看教育”，文件名为sx3-2-1.htm，保存

在站点中。

(2)再新建一张网页，输入“教育话题”，文件名为sx3-2-2.htm，保存在站点中。

8．站点测试

按【F12】键在浏览器中预览，观察效果与样图是否一致。单击建立的每个链接，以测试超链接是否都能够正确跳转。

任务二：HTML基本标记的应用 1．准备工作

在C盘或其他盘符下新建一个工作夹，制作的所有页面都保存在这个文件夹内。将给定的图像素材文件复制到工作文件夹中。

2．建立名称为了test.html的HTML页面，效果如图4-1所示。页面功能要求为：

（1）页面标题为“基本标记测试”；

（2）页面内的所有标题文字均为标题2格式；

（3）单击链接文字时要求在新的浏览器窗口中，打开test.html页面自身；

(4)图片名称为1．gif，存放在工作文件夹中，与test．htm页面位于同一位置；

(5)依据图4—1所示样式，完成页面中的表格制作

3．建立名称为login．htm的HTMI。页面，效果如图4—2所示。页面功能要求为：

(1)页面标题为“表单标记测试”；

(2)“姓名”为单行文本框，宽10个字符，最多能填写20个字符；(3)“性别”为单选按钮，传递的值为“男”和“女”，第一个按钮为默认选中；

(4)“职业”为下拉列表框，内容有“教师”、“工人”和“职员”；(5)“爱好”为复选按钮，传递的值分别对应为1，2，3，4，第一个按

钮为默认选中；

(6)“留言”为多行文本框，大小为5行40列，默认内容为“说几句吧!”；(7)“提交”按钮和“重置”按钮分别完成提交表单功能和重置表单功能，表单提交方式为get；

(8)页面上的所有文字默认为3号字。4．页面测试

在浏览器中浏览所完成的页面，观察效果是否符合要求。

实验二 表格、表单和框架的应用

一、实验目的及要求 1.掌握表格的基本用法 2.掌握表格布局页面的方法 3.学会用框架布局页面的方法 4.了解框架布局的特点

二、实验学时

10学时

三、实验内容

任务一：表格的应用 1．准备工作

在c盘或其他盘新建一个文件夹，作为站点文件夹。输入你想要的站点名称，这里输入myweb5。在此文件夹中新建一个图像文件夹images，并将给定图像素材复制到其中。

2．建立本地站点

用已学方法建立本地站点。3．利用表格编辑首页

(1)在默认打开的网页中，选择“修改”l‘‘页面属性”菜单命令，设置背景颜色为#clclcl。

(2)在网页中插入一个2行2列的表格，参数设置如图5-21所示。选中表格，在“属性”检查器的表格“高”输入框中输入100，单位为“％”。将第一行两个单元格合并为一个，如图5-22所示。

．

(3)利用“属性”检查器调整3个单元格的宽度和高度。将光标放在第一行单元格内，在“属性”检查器“高”输入框中输入110，“宽”不输入；将光标放在第二行第一个单元格内，在“属性”检查器“宽”输入框中输入250，“高”不输入；将光标放在第二行第二个单元格内，在“属性”检查器“宽”输入框中输入450，“高”不输入。效果如图5-22所示。

(4)按样张(如图5-23所示)在第一行单元格中输入“饮食本草”，文字大小80像素，字体“华文彩云”，前两个字白色，后两个字颜色为#009900。在文字下方插入一条水平线，属性取默认值。

(5)在第二行第一个单元格内插入一嵌套表格，表格相关属性分别为8行1列、表格高度和宽度均为100％、边框粗细为0、单元格边框为0、单元格间距为0。如图5．23所示。

(6)在第二行第二个单元格内插入一嵌套表格，表格相关属性分别为3行3列、表格高度和宽度均为100％、边框粗细为

2、单元格边框为0、单元格间距为0。如图5-23所示。

(7)在左侧嵌套表格各行中分别输入图5．24所示内容，然后将8个单元格的高度均设置为50。文字大小为36，字体为“华文新魏”，然后将每行文字均创建无址链接。

（8）在中侧嵌套表格中分别插入5张文件夹images中的图片，每张图片的宽度和高度均为150，注意：当图片尺寸变小后，表格不会自动缩小，这时可以选中整个表格，在“属性”检查器中单击“清除行高”和“清除列宽”两个按钮来调整表格大小。

4．保存网页

选择“文件”！“保存”菜单命令，将此网页保存在站点中。5．站点测试

按【F12】键在浏览器中预览，观察效果是否与样张一样。任务二：框架的应用 1．准备工作

在C盘或其他盘新建一个文件夹，作为站点文件夹。并将给定的图片文件和素材文件复制到站点文件夹中。

2．建立本地站点

用已学方法建立本地站点。3．利用框架布局页面

站点首页部局效果如图15-15所示，页面制作步骤如下。（1）在默认打开的网页中，选择“插入”面板上的“布局’’选项卡。单击框架按钮的下拉箭头，从下拉菜单中选择命令。

(2)将光标置于顶端框架内，选择“修改”|“页面属性”菜单命令，设置背景颜色为#C1C1C1。同理将左框架和主框架的页面背景色都设置为#C1C1C1。

(3)选择“窗口“|‘‘框架”菜单命令，将“框架”面板调出来。然后设置三个框架的大小。

“顶端框架”：在“框架”面板中选定外层框架集，在“属性”检查器将顶端框架的高度设置为“120像素”，下面部分设置为“1”，单位为“相对”。将“边框”设置为“是”，“边框宽度”设置为1’，边框颜色设置为“#CCCCCC”。如图15—16所示。

“左侧框架”在“框架”面板中选定内层的子框架集，在“属性”检查器将左侧框+架的宽度设置为“250像素”，右侧主框架设置为“1”，单位为“相对”。将“边框”设置为“是”，“边框宽度”设置为“1’，边框颜色设置为“#CCCCCC”。如图15—17所示。

(4)在顶端框架内输入站点标题‘‘饮食本草”，文字大小为80像素，字体为“华文彩云”，前两个字白色，后两个字颜色为#009900，居中对齐。

(5)在左侧框架内插入一个表格，表格相关属性分别为9行1列、表格高度和为100％、宽度为100％、边框粗细为0、单元格边框为0、单元格间距为0、对齐方式为右对齐。然后

将9个单元格的高度均设置为50，在其中输入样张中的文字，文字大小为36，字体为“华文

新魏”。如图15．15所示。

(6)在右侧主框架中插入一个表格，表格相关属性分别为3行3列、表格高度和宽度任意、边框粗细为

2、单元格边框为0、单元格间距为0、居中对齐。按样张效果在表格中分别插入5 张文件夹images中的图片，每张图片的宽度和高度均为150。注意：当图片尺寸变小后，要在“属

性，检查器中单击cc清除行高’’和“清除列宽”两个按钮，使表格调整到最小。如图15—15所示。

4．保存框架网页

选择“文件”|“保存全部”菜单命令，按照保存窗口弹出的顺序，分别将框架集、右侧

主框架、左侧框架、顶端框架命名为index．htm、main．htm、left．htm、top．htm。注意以上文件均保存在本站点中。

5．建立导航链接 具体制作步骤如下。

(1)按导航栏目分别建立8个相关内容的页面，或者从提供的素材文件中获取。

(2)在左侧框架内选择“首页”文字，在“属性”检查器的链接栏中设置目标文件为本框架集页面．Index．htm，目标选择“parent'’。

(3)在左侧框架内选择“谷物篇”文字，在“属性”检查器的“链接”栏中设置目标文件为素材文件guwu．htm，“目标”栏选择右侧主框架的名称“mainframe”。同理，将左侧框 架内的各项导航内容分别链接到对应的素材文件，且“目标”均设置为“mainframe”。

(4)再次选择“文件”|“保存全部”菜单命令。6．预览和测试站点

在打开的Index．htm文件中，按【F12】键在浏览器中预览，观察效果与样张是否一样，然后，测试各导航链接内容和显示位置是否正确。效果如图15-18所示。

实验三 网页图像和动画的设计与应用

一、实验目的及要求

1．掌握在Fireworks中创建动画的方法 2．掌握在Fireworks中制作蒙版的创建方法 3．掌握基本动画补间操作

二、实验学时

8学时

三、实验内容 任务一：gif动画 1．准备工作

在c盘或其他盘新建一个文件夹，本次实训的内容将全部保存在该文件夹下。

2．一张向日葵画框图片的制作(1)新建文件

打开Fireworks 8，在“开始页”中选择“新建Fireworks文件”，新建一个空白文件。在弹出的“新建文档”中设置画布的“宽”为360，“高”为400，画布颜色选择白色，然后单击“确定”按钮。选择“文件”|‘‘另存为”菜单命令，将文件以“sx6—1．png”为文件名保存在指定文件夹下。

(2)制作图片 选择“文件”l‘‘导入”菜单命令，在“导入”对话框中选择需要导入的图片“画框．gif”。此时光标的形状变为V-，在画布上单击鼠标左键，即可将该图片以原始大小导入(也可以按下左键拖放，将图片以不同的大小导入)。此时可以在“层”面板中看到刚导入的对象。用相同的方法导入第二张图片“向日葵．png”，将图片的大小调整合适，放入画框内，并调整整个图片的坐标，到此这个图片的制作就完成了。单击“主要”工具栏上的“保存”按钮，保存文件。

(3)图片的优化和导出

选择“窗口”l“优化”菜单命令，打开“优化”面板，如图6-23所示的设置。选择“文件”|“导出”菜单命令，在弹出的“导出”对话框中，“文件名”一栏输入文件名“sx6—1．jpg”，选择侏存类型为“仅图像”，单击“保存”按钮，该文件即可以JPEG的文件格式输出。

选择“文件”l砾存”菜单命令，保存源文件，单击“预览”按钮预览效果，如图6-24所示。

3．进一步编辑向日葵画框图片(1)新建一帧

打开刚刚创建的向日葵画框，即“sx6—1．png”。在“帧”面板，选择刚才已有的第一帧，将它拖到“新建／重制帧”按钮上释放，得到复制的一帧。

将新复制的第二帧选中，将原有的向日葵图片删除，重新导入另一幅图像“椰子树．jpg”，并调整大小使其居于画框内。这样当前文件具有两个帧的画面，如图6—25所示。

(2)观看动画播放效果

单击位于工作窗口下方帧控制器的“播放”按钮，观看动画播放效果。单击“停止”按钮，停止播放。

如果不满意，可以返回帧1或帧2进行修改。

如果想调整两帧的播放速度，可以在帧面板双击每帧右侧的数字“7”，将其修改成想要的值。

再次通过帧控制器观看动画播放效果，如果想再增加几帧，可以按上面的方法进行编辑，直至满意为止。

选择“文件”|“另存为”菜单命令，将文件以“sx6．2．png'’为文件名保存在指定文件夹下保存文件。

再选择“文件”|“图像预览”菜单命令，打开“图像预览”对话框，如图6—26所示。

选择导出的文件格式为“GIF动画”，然后再选择“导出”按钮，就可以导出GIF动画文件，文件名为“sx6．2．gift。这样可以在Fireworks之外，同样看到动画效果。

任务二：蒙版和动画的制作 1．准备工作

在c盘或其他盘新建一个文件夹，将给定图像素材复制到其中，本次实训的内容将全部保存在该文件夹下。

2．导入图像并调整画布

新建空白文档，大小、颜色均默认。

选择“文件”l“导入”菜单命令，将指定文件夹中的图像导入文档。选中图片，在“属性”检查器中修改图片的宽、高值(500×400)。然后单击画布之外，在“属性”检查器选择“符合画布”命令，使画布和图片一样大且对齐。

在“属性”检查器选择“画布”旁边的拾色器，把画布颜色改成自己喜欢的颜色。

3．制作矢量蒙版

选择椭圆工具，在窗口中画一个椭圆。选择“编辑”I“剪切”菜单命令，椭圆消失，用鼠标再次选中导入的图像，然后选择“编辑”I“粘贴为蒙版”菜单命令，出现蒙版效果，如图9-36所示。

打开“层”面板，如图9-37所示。单击层中图片与蒙版之间的链接@标记，可以使它消失，再次单击又会出现。它的出现与消失决定着蒙版是否与图片链接在一起。当未链接时，单击“层”面板中的蒙版图标，使它周围出现绿框。如图9-38所示。

用鼠标移动画布上椭圆的位置，效果如图9-39所示。

把位置调整到理想状态后，选择“文件”|“另存为”菜单命令，将文件以“sx9-1．png'，为名保存在指定文件夹下。

4．修改蒙版效果

打开刚才新建的蒙版文件，在“层”面板选中蒙版。在“属性”检查器中，选择“蒙版”为“灰度外观”，将方式改为“放射状”，并单击旁边的拾色器，将放射状填充的中心调整为透明(白色)，边缘调整为不透明(黑色)，如图9-40所示。

在“属性”检查器中，将“边缘”修改为“羽化”，值为“50'’，“描边”设置为“无”，如下图9-41所示。

在画布上适当调整椭圆填充的放射中心和幅度，最后达到如图9—42所示效果。

5．制作位图蒙版，打开给定图像文件0258.jpg，另存为sx9-2.jpg。把显示的缩放比例调整为66%。单击“层”面板的“添加蒙版”按钮，并在“层”面板选中，然后按照图9-43蒙版图标。

在“工具”面板“颜色”部分中选择“渐变”工具设置蒙版的相关属性。

在图像中间拖动鼠标，使填充呈由中心向四周的放射形状。图像产生了蒙版效果，同时“层”面板的蒙版图标也发生了变化。如图9-44所示。

6.制作文本蒙版

打开给定图像文件0258.jpg，另存为sx9-3.jpg。把显示的缩放比例调整为66%。在“工具”面板“矢量”部分中选取“文字”工具。输入文字“热带风情”，字体为华文行楷，大小150。选中文字，选择“编辑”|“剪切”菜单命令，将其剪切。在“层”面板中选择取位图标，然后选择“编辑”|“粘贴为蒙版”菜单命令。图像产生了蒙版效果，同时“层”面板也出出了文本蒙版图标，如图9-45所示。

任务三：风吹树叶(1)新建Flash文件。

(2)修改背景颜色为“蓝色”。

(3)使用“文本工具”按钮，创建文字“风吹效果”四个字，用工具选中文字并按【Ctrl】+【B】一次，将四个字分解为个体。如13-11所示。

(4)再次用工具，选中“风”字然后选择“修改”|转换为元件”菜单命令。在弹出转换为符号“对话框中，将元件名称改为“风”，如图13-12所示。

(5)重复步骤(4)，将剩下的三个字“吹”、“效”、“果”也依次做成图形元件。

(6)选中所有的文字，然后鼠标右击，在弹出的上下文菜单中选择“分散到各层”，于是个字将分别处于四个不同的图层。这样做是为了动画渐变能够正确的执行。

如果分散到各层后文字没有对齐，则可用“对齐面板”，将各层的文字重新排列好。“对面板如图13-13所示，可以通过菜单“窗口”|对齐’’菜单命令打开“对齐”面板。

(7)在时间轴中第1 5帧处，给各层“添加关键帧”，选中第15帧。(8)将四个字全部选中，使用鼠标向上移动一段距离，选择“修改”|变形”|“水平翻转”菜单命令，将四个字水平翻转一下，然后调整字体的位置，用“对齐’’面板排列字体，如图13-14所示。

(9)选中所有元件，在“属性，检查器中将颜色“Alpha”值设为“O”，如图13-15所示。

(1 O)在“吹”、“效”、“果”三个元件所在层的第1帧处创建动画补间，如图13-16所示。

(11)按住【Ctrl】键，选择第二层的第2帧到最后一帧。按住鼠标左键不放，将位置向后拖放一段距离，如图13-17所示。

(1 2)参照步骤(1 0)内容，将‘‘效”、“果”两个元件所在层的位置分别后移，如图13-l8所示。

(1 3)按【Ctrl】+【Enter】组合键查看效果。任务四：球的跳动 1.准备工作

在c盘或其他盘新建一个文件夹，并将给定的图片文件和素材文件复制到站点文件夹中。本次初训的内容将全部保存在该文件夹下。

2．素材的导入

1)新建文件

打开Flash 8，在“开始页”中选择“新建Flash文件”，以新建一个空白文件。背景色为“白色’’。

选择“文件”|“保存”菜单命令，将文件保存为ex3.fla文件。2)“球’’的导入

选择“文件”|“导入”|“导入到库”菜单命令将“球”导入到库，如图13-33所示。

3.元件的转换

选择“修改”|“转换为元件”菜单命令，将图片转换为“图形”元件，并命名为“球”。13-34所示。

4．动作补间的设置

将元件“球”拖放到场景1的图层1中。在图层1的第60帧处插入关键帧，如图13-35所示。

在第1帧处添加‘‘动画补-间，效果，如图13-36所示。

在第1帧处处的“属性”检查器中，单击“缓动”旁边的“编辑”按钮，设置动作的“缓入|缓出”效果(通过缓入／缓出可以控制动画渐变的速度和状态)。设置效果如图13-37所示。

在“自定义缓入／缓出”对话框定义各个帧处的动画补间速度和方向。新建图形元件，命名为“阴影”，设置笔触色为“无”，填充色为“黑白渐变”，白色部分的alpha透明度为29％。使用椭圆工具绘制一个椭圆，设置面板如图13-38所示，绘制的效果如13-39所示。

在场景1中新建图层2，将元件“阴影”拖放到第1帧处的恰当位置(在球落下的下方)，并在第60帧插入关键帧，阴影位置如图13—40所示。

在图层2第1帧处设置元件“阴影”的A1pha透明度为20％，如图1 3-4 1所示。

在图层2第1帧处设置补间动作，如图1 3—42所示。

打开图层1第一帧“属性”，检查器的“自定义缓入／缓出”面板，按键【Ctrl】+【c】复制缓动效果。打开图层2第一帧处的“自定义缓入／缓出”面板，按I Ctrl 】+【V】组合键，将其粘贴到阴影动画补间中。

5．发布动画

使用“文件”|“发布”菜单命令进行发布。

实验四 层叠样式与层的应用

一、实验目的及要求 1.掌握层的正确定位方法

2.学会利用层来制作弹出式菜单 3.了解时间轴的编辑特点和方法 4．学会定义和应用CSS样式

二、实验学时

6学时

三、实验内容

任务一：利用层制作弹出菜单

步骤：

l准备工作

在c盘或其他盘新建一个文件夹，作为站点文件夹。将给定的素材文件存入其中。

2．建立本地站点

启动Dreamweaver·8，用已学方法建立本地站点。3．利用图层制作下拉弹出菜单

(1)新建一个空白页面，选择“修改”I“页面属性”菜单命令，设置页面的背景颜色为#FFCC99，左边距为0，上边距为0。

(2)在文档第一行插入一行文字“电子信息职业技术学院”作为站点标题，字体为华文行楷，大小为48号字，颜色为#FF9933。

(3)在标题的下一行插入一个l行5列的表格，表格宽度800像素，边框粗细为l，高 度30，平均分配各列(每列宽度为160像素)，表格背景颜色为#9999FF。

(4)在表格的各列分别写入“首页”、“学院概况”、“师资建设”、“系部设置”、“招生就业”，各单元格文字对齐方式为居中对齐，文字为粗体显示。如图16—16所示。

(5)在“学院概况”列中添加一个图层，命名为“Layerl”，注意不可见元素“层锚记”应在此列当中。如果不在，可用鼠标将其拖到此列中。然后在图层中添加一个3行l列的表格，表格宽度为160像素，各行高度为30像素，边框粗细为1，单元格文字为居中对齐，表格背景颜色为#9999F’F，文字为粗体显示。三个单元格内容为“学院简介”、“办学思想”、“校园风景”，如图16．17所示。

(6)同样在其他几列中也分别添加图层，各自命名为“Layer2'’，“Layer3”，“Layer4”。其中Layer2中插入3行1列的表格，表格属性与Layerl中的相同，内容为“队伍建设、名师风采、优秀教师”；L,ayer3中插入5行l列的表格，表格属性与L,ayerl中的相同，内容为“机电技术系、电子技术系、计算机应用系、计算机网络系、计算机软件系”；Layer4中插入2行1列的表格，表格属性与Layerl中的相同，内容为“招生信息、就业信息”。如图16—18所示。

(7)调整各层的位置。注意：层的调整非常重要，不同的浏览器窗口大

小，不同的分辨率，层的位置显示都不是一样。即使在同一个机器上调整浏览器的窗口大小，都会出现位置的变动。Dreamweaver中并不是所见即所得，需要我们来精确定位才会达到满意的效罘。为此，首先固定表格的宽度，本例中将表格固定为宽度800，高度30。然后固定层的位置，这

个位置需要计算一下，计算公式并不是很难。本例中表格总宽度为800，共有5列，这样每列的横坐标起始位置的计算公式为：

800÷5*(当前列一1)对于“Layerl”，当前列为2，所以结果为160。

最后加上一个将要创建的层与原表格列偏移值，那么计算各列下属的层的横坐标公式变为：

800--5x(当前列-1)+偏移量

这个偏移量需要通过大家试验来最终确定，因为不同的字体和宽度这个值是不同的。这里测试满意的效果是-1，所示Layer1的实际工资起始横坐标为159据这个公式将各个层的位置设定好，最好不要用鼠标禾移功定位。要使用“属性”检查器来设置。(8)打开“层，面板，将Layerl～Layer4都设置为隐藏状态。．

(9)在窗口左下方选中第2列“学院概况”所在单元格的标签选择器，在“行为”面板中为其添加“显示一隐藏层’’行为，将“Layerl”设定为“显示”，如图16-19所示。

(10)更改行为的触发事件为“onMouseOver”。(11)再次选中第二列的标签选择器，在‘‘行为’’面板中为其添加“显示一隐藏层”行为，设定图层Layerl为‘‘隐藏”，并更改此行为的触发事件为“onlMoluseOut”。．

(12)重复步骤9～1l，为第三列、第四列、第五列添加显示与隐藏图层的行为。

4．保存与预览

保存文件为Index．html，然后按IFl2]键进行预览。当移动鼠标到菜单时，将显示当前菜单项所属的子菜单内容，当鼠标离开显示的子菜单时，子菜单隐藏，返回初始状态。最终效果如图16—20所示。

5．为下拉菜单设置超级链接

(1)根据菜单内容，建立相应的其他页面文件。(2)为各菜单项设置跳转到这些页面的超级链接。(3)再次保存文件并预览效果。任务二：时间轴 步骤：

1．准备工作

在C。盘或其他盘新建一个文件夹，作为站点文件夹。在此站点中再建一个images子文件夹，将给定的素材存入其中。2．建立本地站点

启动Dreamweaver 8，用已学方法建立本地站点。

3.利用时间轴使层做直线运动

(1)打开给定的网页文件sx17-1-1.htm，在网页上插入一个层”Layerl",并将其位置调整好，然后在其中插入给定的图片imgl．gif,图片大小为64×64。如图17-9所示.(2)打开“时间轴”面板，把图层Layerl拖到“时间轴’’面板上，单击最后一帧关键帧，并将其拖到第100帧的位置。再单击图层Layerl，将 Layerl水平拖动到页面的右侧。如图17-10所示。

(3)选中“时间轴”面板上的“自动播放”和“循环”选项。

(4)将文件另存为sxl7-1-3．htm，并在浏览器中预览，即可看到小猪从页面左侧运动到 右侧，并循环播放。

4．利用时间轴使层做轨迹运动

(1)打开刚才保存的sxl7-1-3．htm文档，再插入一个图层Layer2，并将给定的图片img2．Gif插入其中，设置图片和层的大小均为100*100，如图17-11所示。

(2)右击“时间轴”面板的动画通道，在弹出的快捷菜单中选择“添加时间轴”命令，新添加的时间轴为“Timeline2'’。

(3)选中页面中的图层Layer2，并单击右键，在弹出的快捷菜单中选择

“记录路径”命令，紧接着用鼠标拖动层左上角的标记在页面上移动绘制路径，释放鼠标，在页面上出现了一条灰色的路径。同时，时间轴上也出现了一个有多个关键帧的动画条。如图17-12所示。

(4)选中“时间轴”面板上的“自动播放”和“循环”选项。

(5)保存文件，并在浏览器中预览，即可看到小猪从页面左侧运动到右侧的同时，另一小猪在页面上按绘制的轨迹进行移动，并循环播放。5．给移动的小猪添加行为和超级链接

(1)选中页面中的Layer2，打开“行为”面板，单击“+”按钮，从弹出的菜单中选择“时间轴”I“停止时间轴”命令。然后从对话框中选择“1'imeline2'’，单击“确定”按钮。在“行为”面板中将事件改为onMouseover。(2)再次单击“行为”面板的“+”按钮，从弹出的菜单中选择“时间轴”}“播放时间轴”命令。然后从对话框中选择“Timeline2'’，单击“确定”按钮。在“行为”面板中将事件改为onMouseout。

(3)选中Layer2层中的图片，在“属性”检查器的链接栏中输入“sxl7-1-2．htm'’(预先编辑好的网页)，在替代栏中输入“单击有惊喜”。

(4)保存文件，并在浏览器中预览，即可看到当鼠标指向小猪时，小猪停止移动；当鼠标离开小猪时，小猪继续移动。当鼠标单击小猪时，跳转到sxl7-1-2．htm页面。

任务三：利用CSS样式改变页面风格 步骤：

1．准备工作

在c盘或其他盘新建一个文件夹，作为站点文件夹。将给定的网页文件及素材文件夹存入该文件夹中。

2．建立本地站点

启动Dreamweaver 8，用已学方法建立本地站点。3．自定义样式的定义及应用

(1)打开站点中给定的sx20．1．1．htm文档。(2)选择“窗口”I‘‘样式”菜单命令，将“CSS样式”面板打开。(3)单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框。在选择器类型处选择“类(可应用于任何标签)”，名称处输入“ysl”，定义在处选择“仅对该文档”。单击“确定”按钮。

(4)在弹出的“ysl的CSS样式定义”对话框中，进行如图20-25所示的样式定义(类型：字体为隶书，大小为36像素，颜色为#0033FF；区块：文字对齐为居中)。

(5)用同样的方法定义样式“ys2”，定义内容如图20-26所示(类型：

字体为华文新魏，大小为24像素；区块：文字对齐为居中)。

(6)用同样的方法定义样式“ys3”，定义内容如图20—27所示(类型：字体为隶书，大小为36像素，粗细为粗体，#00CC33；区块：文字对齐为居中)。

(7)下面开始应用已定义的样式。选中第一行标题“唐诗欣赏”，单击右键，选择“CSS样式ysl，(或者用前面介绍的其他方法来应用ysl)，这时标题已变成所定义的样式了。用同样的方法，将每首诗的诗文内容应用

‘‘ys2’’，将每首诗的标题段落应用“ys3”。效果如图20-28所示。

(8)修改页面的背景风格。首先为页面设置背景图像(站点中images文件夹中的bj．jpg文件)，效果如图20-29所示。由于选择的背景图像的尺寸不够大，在页面中图像会以不断重复的形式铺满整个页面，视觉效果不够理想。

(9)在“CSS样式”面板新建自定义样式“ys4”，在样式定义对话框中，背景样式的设置如图20—30所示(背景：重复为不重复，附件为固定，水平位置为居中，垂直位置为居中)。

(10)选择文档窗口左下方的标签选择器<．body>，然后单击右键，从下拉列表中选择“设置类，ys4”，文档应用样式ys4后的效果如图20-31所示。当预览时会发现背景图像居中并不再重复，且当用鼠标滚动游览文字时，背景图像保持静止，而不随文字的滚动而滚动。

4．重定义特定标签外观

(1)单击“CSS样式”面板下方的“新建(；SS样式”按钮，打开新建样式对话框，选择器类型处选择“标签(重定义特殊标签的外观)”，标签处下拉列表选择“ln定义在处选择“仅对该文档”。单击“确定”按钮。

(2)在弹出的“li的CSS样式定义”对话框中，进行如图20-32所示的样式定义(类型：字体为华文新魏，大小为24像素；列表：项目符号图像为0001．gif)。

(3)单击“确定”按钮，发现页面列表外观发生了变化。效果如图20-33

所示。

(4)再次单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型处选择“标签(重定义特殊标签的外观)”，标签处下拉列表选择“a”，定义在处选择“仅对该文档”。单击“确定”按钮。

(5)在弹出的‘‘a的cSS样式定义”对话框中，进行定义，其中类型分类中只将修饰选择为‘‘无”。单击“确定”后，页面中超级链接的下划线处的修饰没有了，如图20-33所示。

5．链接文字技术

(1)单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型处选择“高级(ID、伪类选择器等)”，选择器处下拉列表选择“a：link”，定义在处选择“仅对该文档”。单击“确定”按钮。

(2)在弹出的“a：link的(；SS样式定义”对话框中，进行如图20—34所示的样式定义(类型：字体为华文新魏，大小为24像素，颜色为#CC0099，修饰为无)。

(3)再次单击“CSS样式”面板下方的“新建CSS样式”按钮，在对话框中其他选项不变，只将选择器选为“a：hover'。然后在“a：hover的CSS样式定义”对话框中，进行如图20—35所示的样式定义(类型：字体为华文新魏，大小为24像素，颜色为#FF0000，修饰为下划线)。

(4)单击“确定”按钮，关闭定义对话框。预览时可以看到当鼠标指针移到超级链接文字时，文字变为红色且出现下划线修饰。

(5)将网页另存为Index．．html，按【F12】预览网页，观察各种样式的应用效果。

实验五

网页综合设计

一、实验目的及要求

利用所学的网页设计的方法来设计一个个性化的网站，网站的内容一定要合理，内容健康，页面美观。

二、实验学时

6学时

三、实验内容

自己设计

第四篇：计算机程序设计基础上机指导(实验1)

计算机程序设计基础上机指导

实验一熟悉C程序的运行环境和运行一个C程序的方法

一、实验目的1．熟悉C语言编程环境创天中文版VC++6.0,掌握运行一个C程序的基本步骤，包括编辑、编译、连接和运行。

2.了解在该系统上如何编辑、编译、连接和运行一个C程序。

3.通过运行简单的C程序，初步了解C源程序的特点。

二、实验内容

1．建立自己的文件夹

在磁盘上新建一个文件夹，用于存放C程序，如C:liming

2.调用编辑程序

在屏幕上显示一个短句“Hello World!”。输入以下程序，并进行编译和运行。源程序

#include

int main(void)

{

printf(“Hello World!n”);

return 0;

}

运行结果

Hello World！

具体操作步骤见《C语言程序设计实验指导》第1页－第4页。

3．编程题1

在屏幕上显示一个短句“What is a computer?”

4．编程题2

改写下列程序，求1－100中能被6整除的所有整数的和，并在编程环境中验证该程序的运行结果。

#include

int main(void)

{

int i, sum=0;

for(i=1;i<=100;i++)

if(i%2= = 0)sum=sum+i;

printf(“%d”, sum);

return 0;

}

应了解所用的系统是用什么命令进行编译和连接运行的。编译和连接后所得到的目标程序的后缀是什么形式的？

第五篇：网页设计与制作实验过程及报告

网页制作过程及报告

网页设计与制作的一般实验步骤：

1、确定网站主题

网站里的每一个网页都要有统一的风格，以加强渲染自己性格的效果。最重要的是做出自己的风格，吸引浏览者的眼球。

2、搜集材料

主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻，同时，查询相关的图书、报纸、光盘、多媒体等，也可以得来更加有说服力的信息。

3、规划网站

我的网站包括5个页面。版面设计要灵活，根据各部分内容的不同适当的自由设计。但是每个页面的主元素和位置不能变。用CSS设计一个样式，以保证随时、准确的调用。另外，为了网页布局的协调，还可以加入flash动态图片，会达到更好的效果。

4、选择合适的制作工具

做网页的首先工具当然为Dreamweaver。

5、认识网页设计工具Dreamweaver

（1）Dreamweaver的启动

（2）窗口组成的认识

6、新建站点

7、站点中首页的创建

8、制作网页

素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点。网页中的css 样式文件也应统一管理，做到有条不紊。

9、根据自己的网页风格，在网上搜集合适的图片。

最后还要制作各个页面的链接，把整个网页可怜起来，形成一个统一的整体，方便浏览者进行各个页面间的跳转。

10、上传测试

网页制作完毕以后，要进行测试，在浏览器上运行自己的网站，反复测试，以发现设计中的缺陷。

实验结果及理论分析：

通过这简短的三个周的学习，让我有一个独立设计，制作网页的机会，通过这次试验，我的收益颇多。首先，独立的实践了一个完整的网站设计的全过程，把设计中零散的注意点和要求在自己大脑中形成了一个完整的框架体系，使平时学到的知识点有了一个质的升华，并且合理的在试验中进行了实践。第二，在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，扩大了知识面，给我在以后的设计过程中能博采众长，制作出技术精湛的网页打下了基础。最后，我感受最深的是，技术方面的学习，最重要的是自己实践做出东西，只通过自己的亲身实践，才能学会、学懂、学通技术。

朱礼明

信息管理与信息系统1301班

2014.07.23