《Web设计软件应用实训》期末综合报告 - 图文(3)

键】选择【创建补间动画】在第100帧和第150帧做同样的动作，其他图层则在150帧插入帧，整个flash即可完成。如上一样保存导出便可。

3.3标题文字的设计和效果处理

1.“童年的回忆”标题制作

使用photoshop工具，选择菜单栏中【文件】下【新建】弹出【新建】对话框，选择宽为800px高为150px,选择工具栏中【矩形工具】，选择颜色【蓝色】在画布中画一个充满画布的长矩形，单击【图层】面板底部的【创建新图层】按钮，新建图层。在新图层上选择【文本工具】在矩形中间输入文字“童年回忆”调整文字颜色为黑色。单击【图层】面板底部的【添加图层样式】按钮，在弹出的菜单中选择【外发光】选项，弹出【图层样式】对话框，在对话框中进行调整，不透明度为【75%】扩展【12%】大小【27px】范围【52%】抖动【7%】单击【确定】，即可调节好外发光效果。选中文字，单击【右键】在弹出的对话框中选择【文字变形】在变形样式下选择【鱼眼】单击确定。字体形状的调节即完成了。至此，整个标题的制作就完成了。单击【文件】下【存储为】选项，取定名称，选择格式为【JPEG】单击【确定】弹出【JPEG选项】对话框，在【图像选项】中选择【大文件】单击【确定】，整个标题的制作与保存就完成了。

9

2.“童年首页”底部的提示字制作

此处所用的效果为“印章字”效果。选择【文件】下【新建】命令，弹出【新建】对话框，在对话框中将【宽】和【高】分别设置为【980px】和【100px】，选择【背景内容】调成【背景色】，单击【确定】按钮，新建一个空白文档，选择工具栏中【背景色】为【粉红色】。打开【通道】面板，单击面板底部的【创建新通道】按钮，新建一个Alphal通道。选择工具箱中的【文本工具】在工作区中单击并输入文字“版权所有 031001134 文宇坤 翻版必究”，然后用【魔棒工具】选择输入文本，选择【滤镜】下【杂色】【添加杂色】命令，弹出【添加杂色】对话框，在对话框中将杂色【数量】设置为【400%】，单击【确定】按钮。按组合键【ctrl+D】取消选择，选择【滤镜】下【风格化】中【扩散】命令，弹出【扩散】对话框，在对话框中进行设置，选择【变亮优先】，单击【确定】按钮。选择【滤镜】下【模糊】中【模糊】命令，选择【图像】下【调整】的【色阶】命令，弹出【色阶】对话框，在对话框中进行相应设置，单击【确定】按钮。选择【图像】下【调整】中【曲线】命令，弹出【曲线】对话框中进行设置，单击【确定】按钮。打开【图层】面板，选中【背景图层】，选择菜单栏下【选择】中【载入选区】命令，弹出【载入选区】对话框，在对话框中进行设置，单击【确定】按钮。选择工具箱中【渐变】工具，再次单击工具栏中的【点按可编辑渐变】设置框，【双击】样式一，弹出【渐变编辑器】对话框，在对话框中进行设置，单击【确定】按钮，在选区上多次拖动，即可达到效果。选择【滤镜】下【模糊】中【高斯模糊】命令，弹出【高斯模糊】对话框，在对话框中进行设置，设置半径为【1.0px】，单击【确定】按钮。印章字最终效果完成。保存方式与以上相同，这里就不再重复。“童年首页”底部的提示字制作与保存就完成了。

10

第四章 网站制作

4.1 网站制作环境

在宿舍，笔记本电脑 系统：:windows xp

工具：Abode Dreamweaver CS5 Abode Flash CS4 Abode PhotosshopCS4

4.2 网站制作步骤

单击【站点】下【新建站点】取名为Wyk,选择【高级设置】下默认图像文件夹为Wyk文件夹下得pictures文件夹，并在Wyk文件夹下新建名为flash文件夹，用于存放flash。以及用于存放声音的文件夹soud。在【文件】面板中，单击【右键】选择【新建文件】，新建

1.”童年首页“网页制作

【双击】index.html，选择【插入】下【表格】命令，弹出【表格】框，选择7行，2列，点击【确定】，调整整体表格宽为980px，将第一行单击【右键】选择【表格】下【合并单元格】，照样合并第2，第5，第7行。调节第1,5行大小，分别选择【插入】下【媒体】中【swf】，选择相应的flash。在第7行中，选择【插入】下【图像】，选择相应的图像，单击【确定】，调整其大小即可。对于第2行，在里面选择【插入】下【表格】，再插入一个1行8列的表格。并在表格中输入相应的文字，调节大小，即可。对于剩下的栏目和图片也均用上述方法插入，这里不再重复。选择【修改】下【页面属性】中的【外观】在其中【背景图像】里修改已经准备好的图像，点击【确定】，即可完成。文章中的内容是直接复制其他网站的，使用组合键【ctrl+C】和【ctrl+V】即可。选中首页导航栏中的【童年首页】，单击【右键】，选择【创建连接】，找到主页的名称index.html单击【确定】即可创建好本页连本页的连接。其他的“童年相册”“童年回忆”“童年想像”均用此法制作，不再重复。再需要插入声音处，选择点选光标【左键】，在【插入】下【媒体】中选择【插件】，将已经下载好的声音插入，单击【确定】，调整声音样式大小即可完成声音的插入。调整到【代码】视图下，在中输入以下代码

11

4个文件，分别取名为”index.html”,”photo

album.html”,”recall.html”,”image,html”

这里用Javaspcript定义了一个函数，函数名称是gundong()，这个函数实现的功能就是带连接的水平滚动字幕效果。在最后一个标签后面，输入以下代码script

起到调往函数，实现滚动字幕在导航条的最下面。同样，在之间输入以下代码

在最后以个后面输入

即可完成在打开网页时候弹出一个问候对话框，会根据不同的时段弹出不同的问候信息。至此，整个童年首页便制作完成了，单击【文件】下【保存全部】即可完工。

2.“童年相册”网页制作

在Dreamweaver中的根目录Wyk下【双击】photo album.html打开。在【窗口】栏中选择【插入】打开【插入】面板，选中其中的【布局】下得【绘制AP Div】。在页面中绘制4个AP Div。调整其相应位置，在最上端的Div中选择菜单栏中【插入】下【媒体】内【SWF】选择相应的flash文件，单击【确定】即可插入。剩下的插入声音和制作背景图案和“童年首页”制作时候的一样，这里就不再重复。关于中底部的文字，只需要按组合键【ctrl+C】和【ctrl+V】即可复制粘贴完成。在左下角的Div中输入“返回主页”，设置连接，这里因为是连回主页，所以大部分和“童年首页”制作时候的一样，就只需要在连接到的目标网页改成index.html，而不是自我连接即可。整个网页便制作完成了。

3.“童年回忆”网页制作

因为此网页没有推陈出新，均与上述一样。不过，因为之前网页内容过于繁多，所以在本页，我选择了简单的布局。整个页面简洁美观。制作的方法与上述的一样，这里就不再重复了。

4.“童年想像”网页制作

其中的视频，声音，背景和内容文字均与上述相同，这里不再重复。这里主要描述的是标题栏目的字体大小和标题的发光效果。打开网页文档，选择【窗口】下【CSS样式】命令，打开【CSS样式】在面板中单击鼠标【右键】，在弹出的菜单中选择【新建】命令，弹出【新建CSS规则】对话框，在对话框中【选择器类型】选择【类】，【名称】文本框中输入【.ziti】，【定义在】选择【仅对该文档】，单击【确定】按钮，弹出【.ziti的CSS规则定义】对话框，在对话框中将【类型】中的【font-family】选择为【宋体】，将【Font-size】选择为【150】【px】，在【分类】列表中选择【扩展】选项在【filter】中下拉列表选择【Glow(Color=?Strength=?)】选项，在第一个问号中输入【#CCFF33】，

13

百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，免费范文网，提供经典小说综合文库《Web设计软件应用实训》期末综合报告 - 图文(3)在线全文阅读。