xx年关于网页制作实验报告.docx

XX 年关于网页制作实验报告 XX 年关于网页制作实验报告 一、实验目的及要求 本实例是通过“站点定义为”对话框中的“高级”选 项卡创建一个新站点。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 windows xp 操作系统;建立 iis 服务器环境， 支持 asp。 3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件; 三、实验原理 通过“站点定义为”对话框中的“高级”选项卡创建 一个新站点。 四、实验方法与步骤 1)执行“站点管理站点”命令，在弹出的“管理站点” 对话框中单击“新建”按钮，在弹出的快捷菜单中选择 “站点”命令。 2)在弹出的“站点定义为”对话框中单击“高级”选 项卡。 3)在“站点名称”文本框中输入站点名称，在“默认 文件夹”文本框中选择所创建的站点文件夹。在“默认图 象文件夹”文本框中选择存放图象的文件夹，完成后单击 “确定”按钮，返回“管理站点”对话框。 4)在“管理站点”对话框中单击“完成”按钮，站点 创建完毕。 五、实验结果 六、讨论与结论 实验开始之前要先建立一个根文件夹，在实验的过程 中把站点存在自己建的文件夹里，这样才能使实验条理化， 不至于在实验后找不到自己的站点。在实验过程中会出现 一些选项，计算机一般会有默认的选择，最后不要去更改， 如果要更改要先充分了解清楚该选项的含义，以及它会造 成的效果，否则会使实验的结果失真。实验前先熟悉好操 作软件是做好该实验的关键。 一、实验目的及要求： 本实例的目的是设置页面的背景图像,并创建鼠标经过 图像。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 windows xp 操作系统;建立 iis 服务器环境， 支持 asp。 3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件; 4、安装 acdsee、photoshop 等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 设置页面的背景图像,并创建鼠标经过图像。 四、实验方法与步骤 1) 在“页面属性”对话框中设置页面的背景图像。 2) 在页面文档中单击“”插入鼠标经过图像。 五、实验结果 六、讨论与结论 实验结束后我们可以看到页面的背景变成了我们插入 的图像，并且要鼠标经过的时候会变成另一个图像，这就 是鼠标经过图像的效果。当然这种实验效果很难在实验结 果的截图里表现出来。这个实验的关键在于背景图像的选 择，如果背景图像太大不仅会影响网页的打开速度，甚至 图像在插入会也会有失真的感觉，因此在插入前对图像进 行必要的处理能使实验的效果更好。 一、实验目的及要求： 本实例是要创建边框为 1 像素的表格。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 windows xp 操作系统;建立 iis 服务器环境， 支持 asp。 3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件; 4、安装 acdsee、photoshop 等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 创建边框为 1 像素的表格。 四、实验方法与步骤 1) 在文档中，单击表格“”按钮，在对话框中将“单 元格间距”设置为“1” 。 2) 选中插入的表格，将“背景颜色”设置为“黑色” (#0000000)。 3) 在表格中选中所有的单元格，在“属性”面版中将 “背景颜色”设置为“白色”(#ffffff)。 4) 设置完毕，保存页面，按下“f12”键预览。 五、实验结果 六、讨论与结论 本实验主要通过整个表格和单元格颜色的差异来衬托 出实验效果，间距的作用主要在于表现这种颜色差异。表 格的背景颜色和单元格的背景颜色容易混淆，在实验中要 认真判断，一旦操作错误则得不到实验的效果。 “表格宽度” 文本框右侧的表格的宽度单位，包括“像素”和“百分比” 两种，容易混淆，要充分地理解这两种单位表示的意义才 能正确地进行选择，否则就不能达到自己想要的效果，设 置错误就会严重影响实验效果。 一、实验目的及要求： 本实例的目的是创建锚点链接。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 windows xp 操作系统;建立 iis 服务器环境， 支持 asp。 3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件; 4、安装 acdsee、photoshop 等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 创建锚点链接。 四、实验方法与步骤 1) 在页面中插入 1 行 4 列的表格，并在各单元格中输 入导航文字。 2) 分别选中各单元格的文字，单击“”按钮，在弹出 的“超级链接”对话框上的“链接”文本框分别输入 “#01”“#02”“#03”“#04”。 3) 在文档中输入文字并设置锚记名称“01” ，按下“ enter”键换行，输入一篇文章。 4) 在文章的结尾处换行，输入文字并设置锚记名称 “02”，按下“ enter”键换行，输入一篇文章。 5) 同样的方法在页面下文分别输入文字和命名锚记为 “03”和“04” ，并输入文章。 6) 保存页面，按下“f12”键预览。 五、实验结果 六、讨论与结论 添加瞄记的作用是可以帮读者快速找到自己想要的文 章，同时也可以使页面更加精简。本实验的关键难点在于 链接文本框输入的名称和瞄记的名称要相一致才能达到实 验的效果，同时要记得是在上一篇文章的结尾处输入文字 并设置瞄记名称，并记得输入对应的文章，否则瞄记可能 不能用。熟练程度低在实验中不能很好地使用各种工具， 无法一次准确地寻找到适当的位置。实验中忘记选择“不 可见元素” ，几次实验都失败，最后才得出正确的结论。因 此在实验前要先做好预习，否则实验过程会比较吃力。 一、实验目的及要求： 本实例的目的是通过设置 css 样式创建表格的虚线边 框。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 windows xp 操作系统;建立 iis 服务器环境， 支持 asp。 3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件; 4、安装 acdsee、photoshop 等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 通过设置 css 样式创建表格的虚线边框。 四、实验方法与步骤 1) 在网页中创建一个表格。 2) 在“css 样式”面板中单击“”按钮，在弹出的对 话框中进行设置，完成后单击“确定”按钮。 3) 在弹出的对话框中进行设置，完成后单击“确定” 按钮。 五、实验结果 六、讨论与结论 对话框中各项指标和属性的设置存在一定的难度，如 果没熟练掌握就容易出错使实验失败。对“ccs”样式所要 使用的各种按扭不够熟悉在使用的时候觉得很生硬。这个 实验成功的关键在于对软件的掌握程度以及对各种属性的 认识程度，只要充分地掌握了软件的各种操作，对各属性 所代表的含义有充分的认识就能很好地完成这个实验。 一、实验目的及要求： 本实例的目的是创建一个募捐表单。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 Windows XP 操作系统;建立 IIS 服务器环境， 支持 ASP。 3、安装网页三剑客(Dreamweaver MX;Flash MX;Fireworks MX)等网页设计软件; 4、安装 Acdsee、Photoshop 等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 创建一个募捐表单。 四、实验方法与步骤 1) 在网页中插入表格，设置为居中对齐，并插入一幅 图像。 2) 在表格的第二行单元格中，单击“”按钮，插入表 单。 3) 在表单域中插入表单对象和文字。 4) 按下“F12”键，预览效果。 五、实验结果 六、讨论与结论 这个图像关键首先在于背景图象的选择，图像如果过 于花俏则会使表单过于杂乱，如果颜色过深则会掩盖了表 单上的字，依次最好不要用黑色。图像也不能过大，不然 会使表单太繁杂。其次是各多选框和单选按扭的设置难度 比较大，对于初次做这个实验的人来说需要多次的试验才 能达到满意的效果。表格拆分的难度大，要多次实验才能 达到自己想要的效果。 一、实验目的及要求： 本实例的目的是实现在页面中控制播放 Flash 动画。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 Windows XP 操作系统;建立 IIS 服务器环境， 支持 ASP。 3、安装网页三剑客(Dreamweaver MX;Flash MX;Fireworks MX)等网页设计软件; 4、安装 Acdsee、Photoshop 等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 实现在页面中控制播放 Flash 动画。 四、实验方法与步骤 1) 在页面中插入表格，并在表格中插入 Flash 动画和 两个表单按钮。 2) 分别选择两个表单按钮，在“行为”面板中单击 “”按钮，在弹出的快捷菜单中选择“控制 Shockwave 或 Flash”命令，打开“控制 Shockwave 或 Flash”对话框， 分别设置。 3) 保存页面，按下“F12”键预览。单击“播放”按 钮时，开始播放 Flash 动画;当单击“停止”按钮时，则停 止播放 Flash 动画。 五、实验结果 六、讨论与结论 “控制 Shockwave 或 Flash”对话框，设置难度比较大， 设置错误 FLASH 可能无法播放。控制按钮的创建也是关键 所在，控制按钮不能使用则等于整个实验的失败，因此要 认真做好各个按钮并确保质量。在这次实验中我遇到的最 大问题就是设置“控制 Shockwave 或 Flash”对话框，因为 我对其各项的属性了解不够清楚，在选择时很难正确地做 出判断，因此掌握好这方面的知识是做好这个实验的前提。 一、实验目的及要求： 本实例使用 Flash 的绘画工具制作出的有浮雕感的文 字。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 Windows XP 操作系统;建立 IIS 服务器环境， 支持 ASP。 3、安装网页三剑客(Dreamweaver MX;Flash MX;Fireworks MX)等网页设计软件; 4、安装 Acdsee、Photoshop 等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 使用 Flash 的绘画工具制作出的有浮雕感的文字。 四、实验方法与步骤 1) 在舞台中输入文本，并将文本移动到舞台中央位置。 2) 新建图层 2，并复制图层 1 的第 1 帧到图层 2 的第 1 帧，并改变字体颜色。 3) 拖曳图层 2 到图层 1 的下方，分别按下键盘上的方 向键的左移键和上移键各一次。 4) 新建图层 3，复制图层 2 的第 1 帧到图层 3 的第 1 帧，并拖曳图层 3 到图层 1 的上方。 5) 选择图层 3 的第 1 帧，执行“修改分离”命令两次， 将文本打散，并填充为由白色(#FFFFFF)渐变到黄色 (#FFFFF00)。 6) 分别按下两次键盘上的方向键中的左移键和下称键， 拖曳图层 3 到图层 1 的下方，该实例制作完成。 五、实验结果 六、讨论与结论 掌握好层和桢的知识是做好这个实验的关键，因为这 个实验主要涉及到桢和层的创建和移动，对层和桢不熟悉， 在选择和移动时没法准确地把握，否则就打不到预期的实 验效果。此次实验需要多次地移动层和桢，只有合理地移 动才能达到实验效果，因此在实验中要保持清醒的头脑， 也需要耐心和细心，过于急噪就会影响实验的效果和效率。 一、实验目的及要求： 本实例主要表现在有字母的位置才能看到颜色的变化 效果。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 Windows XP 操作系统;建立 IIS 服务器环境， 支持 ASP。 3、安装网页三剑客(Dreamweaver MX;Flash MX;Fireworks MX)等网页设计软件; 4、安装 Acdsee、Photoshop 等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 表现在有字母的位置才能看到颜色的变化效果。 四、实验方法与步骤 1) 执行“文件导入导入到库”命令，导入一个图像文 件到“库”面板中。 2) 将图像文件拖曳到舞台并转换为图形元件，然后创 建移动补间动画。 3) 新建图层 2，输入文本并设置其属性。 4) 将图层 2 设置为遮罩层，完成本实例的制作。 五、实验结果 六、讨论与结论 这个实验的前提是要学会做移动补间动画，因为移动 补间动画是表现实验效果的关键，其次要懂得遮罩层的设 置，这两项都是实验的关键。背景图像的选择也很关键， 如果背景图像的颜色过于单一，则不能很好地表现实验的 效果，字体颜色的变化也会比较不明显。因此这个实验的 技术含量比较大，因此难度也比较大，要有耐心去认真研 究。 一、实验目的及要求： 本实例首先创建一个动作补间动画，然后在对其添加 声音效果。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 Windows XP 操作系统;建立 IIS 服务器环境， 支持 ASP。 3、安装网页三剑客(Dreamweaver MX;Flash MX;Fireworks MX)等网页设计软件; 4、安装 Acdsee、Photoshop 等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 创建一个动作补间动画，然后在对其添加声音效果。 四、实验方法与步骤 1) 创建图形元件在舞台中绘制一个卡通人物。 2) 创建卡通人物越飞越远的动作补间动画。 3) 新建一个图层，导入一幅背景图片，并置位于最下 层。 4) 执行“文件导入导入到库命令” ，导入一个声音文 件。新建一个图层，并选择第 1 帧，在帧“属性”面板中， 在“声音”下拉列表中选择导入的声音文件名称，在“同 步”下拉列表中选择“数据流”选项，其他选项为默认值。 5) 保存文件，按下“Ctrl+ Enter”组合键输出影片 即可。 五、实验结果 六、讨论与结论 这个实验首先要创建图形元件，因此要求对画图工具 有比较清楚的了解，在实验中我遇到最大的难题就是没法 准确地使用钢笔工具，常常画不成自己想要的形状，最后 通过查阅相关的书籍才彻底明白它的使用方法。这个实验 涉及到动作补间动画的制作，和以前做的移动补间动画有 一定的区别，在实验中要认真区分。导声音文件也是这个 实验新涉及的内容，在各项属性的设置方面要认真把握和 学习。 一、实验目的及要求： 本实例模拟播放器中音频高低显示的效果。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 Windows XP 操作系统;建立 IIS 服务器环境， 支持 ASP。 3、安装网页三剑客(Dreamweaver MX;Flash MX;Fireworks MX)等网页设计软件; 4、安装 Acdsee、Photoshop 等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 本实例模拟播放器中音频高低显示的效果。本例是一 个完全由 Action Script 脚本程序制作的图形动画。 四、实验方法与步骤 1) 开启 Flash MX XX，新建一个空白文档，执行“修 改文档”命令，开启“文档属性”对话框，修改属性参数 为：宽：600px;高：300px;背景颜色#000000。 2) 执行“窗口开发面板动作”命令，为图层 1 添加如 下动作脚本。 - root. On Enter Frame= function () create Empty Movie Clip (“ caidai ”, random (2) caidai. X= 150; caidai. Y=200; for (var i =0 cai dai. begin FilL (Math. Random () *0xffffff,60) var gaodu= Math. Random () *50+10; var xzuobiao= var yzvobiao= caidai, moveTo(i*30,o) for (var j=0; caidai, Line To (xzuo biao,yzuobio); 3) 按下“Ctrl+ S”组合键保存文件，执行“控制测 试影片”命令，欣赏本例完成后的效果。 五、实验结果 六、讨论与结论 这个实验主要是操作 Flash MX，虽然这个实验整体的 步骤很简单，但是脚本程序的正确性决定着这个实验的成 败，因此在实验中要认真分析脚本并对其进行不断的调试 使其能正确地运行。而这方面对程序方面的知识有比较高 的要求因此对于我们非计算机类的学生来说难度比较大， 如果要做好这个实验我们必须加强学习程序方面的知识。 一、实验目的及要求： 本章上机实训的目的是创建一个特效字。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 Windows XP 操作系统;建立 IIS 服务器环境， 支持 ASP。 3、安装网页三剑客(Dreamweaver MX;Flash MX;Fireworks MX)等网页设计软件; 4、安装 Acdsee、Photoshop 等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 创建一个特效字。 四、实验方法与步骤 1) 新建一个 Fireworks 文档，并输入文字，将字体加 粗，字号设置为 120。 2) 将文字转化为路径，在“属性”面板中单击“”按 钮，在弹出的快捷菜单中选择“阴影和光晕投影”命令， 如图 15-42 所示。 3) 选中文本对象，执行“编辑克隆”命令。选中克隆 对象，执行“修改改变路径扩展笔触”命令，在弹出的 “展开笔触”对话框中设置为如图 15-43 所示。特效字制 作完毕。 五、实验结果 六、讨论与结论 Fireworks 软件的打开速度比较慢，而且会影响计算 机的反应速度，同时使用 DREEMWAVER 和 FIREWORKS 会使整 个电脑很卡，因此这个实验需要比较好的计算机系统的支 持。对 “阴影和光晕投影”命令我还不能比较深刻地理解 在实验的时候有点迷糊，对“编辑克隆”命令和“修改改 变路径扩展笔触”命令我也存在同样的困惑，因此做好实 验前的准备是顺利地完成实验的关键。 一、实验目的及要求： 本上机实训的目的是绘制一个效果图。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 Windows XP 操作系统;建立 IIS 服务器环境， 支持 ASP。 3、安装网页三剑客(Dreamweaver MX;Flash MX;Fireworks MX)等网页设计软件; 4、安装 Acdsee、Photoshop 等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 绘制一个效果图。 四、实验方法与步骤 1) 用椭圆工具和钢笔工具分别绘制出企鹅的身体和翅 膀。 2) 执行“修改组合路径联合”命令，联合途径，并填 充为黑色。 3) 用椭圆工具绘制眼睛，并用钢笔工具构出脚丫、嘴、 围巾、和肚皮，并填充相应的颜色。 4) 将所有的部分放到相应的位置，本例制作完毕。 五、实验结果 六、讨论与结论 这个实验很多要用到椭圆工具和钢笔工具，因此要先 熟悉地掌握他们的使用方法，多看课本并进行一些实验操 作能比较快地掌握它们的使用方法。实验时要分别地绘制 出企鹅各部分的图形元件然后执行“修改组合路径联合” 命令，联合途径，因此在实验切记不能把整个图象作为绘 制的对象，否则就不能达到实验效果，操作的难度也会加 大。同时对 “修改组合路径联合”命令要深入了解才能在 适当的时间和位置使用。 一、实验目的及要求： 本实例是创建一个如管道图像，并通过“优化”面板 对图像进行优化导出。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 Windows XP 操作系统;建立 IIS 服务器环境， 支持 ASP。 3、安装网页三剑客(Dreamweaver MX;Flash MX;Fireworks MX)等网页设计软件; 4、安装 Acdsee、Photoshop 等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 创建一个如管道图像，并通过“优化”面板对图像进 行优化导出。 四、实验方法与步骤 1) 新建一个图像文档，绘制一个矩形，并将其设置为 线性填充。 2) 用钢笔工具绘制一个路径，并将其设置为放射状填 充，作为管道的拐角。 3) 复制所创建的拐角和线性矩形，并进行缩放和组合。 4) 选择“垂直线 3”纹理“25%”设置为粗管道。 5) 设置一幅背景图像，用钢笔工具勾画出闪光的效果。 执行“窗口优化”命令，将“优化”面板进行设置。 6) 设置完成后，执行“文件导出”命令，在“导出” 对话框中选择导出的路径，完成后单击“保存”按钮。 五、实验结果 六、讨论与结论 横向的管道绘制比较简单，效果也比较明显，竖向和 拐角的管道绘制的难度很大，经常做了对多次还不能达到 理想的效果，由也反应了我们对实验工具的熟练程度不够， 在今后的学习中要加强这方面的学习。填充设置和“垂直 线 3”纹理“25%”设置是达到实验效果关键，因此要认真 地了解它代表的意义，然后认真地进行设置。正确地选择 背景图像，也是达到实验效果的关键。 一、实验目的及要求： 本实训的主要目的是创建图像热点和切片。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入 国际互联网。 2、安装 Windows XP 操作系统;