“高山流水”——《网页设计与制作》课程大作业制作报告

时间：2023-10-05 02:36:01 | 来源：网站运营

时间：2023-10-05 02:36:01 来源：网站运营

“高山流水”——《网页设计与制作》课程大作业制作报告：《网页设计与制作》课程大作业制作报告

说明：为了表现出网站的最佳效果，建议在1024*768或1280*800分辨率下，使用IE7.0、Adobe flash player 9.0 ActiveX或其更高版本访问本网站，并注意设置浏览器允许运行ActiveX控件。

1. 主题说明和logo介绍
   主题：高山流水
   选题原因和主题介绍：
   “高山流水”原出自《列子•汤问》，喻指知音或知己。从典故出发，我们可以看到山和水对中国文化的深刻影响。以山水为题材的中国的文学创作和传统绘画不可胜数。
   山和水作为风景中的佳美者，不仅给人与视觉上的享受，更能赋予人多样的感情，还能让人从中感悟出哲理。我们以此为出发点，利用网站来介绍中国山水的景物美、人文美和哲理美。从神州大地的众多奇山秀水中，我们挑选了灵异的“天下第一奇山”黄山，令人敬畏的世界最高峰珠穆朗玛峰，众生供奉朝神积德之圣地三神山，秀甲天下、诗意浓浓的庐山；我们还收纳了神秀天下、净化心境的漓江，美如西子、世人倾倒的西湖，圣洁美丽、古朴瑰丽的若尔盖，不拘于平静、绚烂壮丽的瀑布。
   网站对四山四水进行了介绍，排布了许多山水美图，并附上精美的文字，希望访问者从中享受美、感知美、创造美。
   

网站Logo：
设计思路：鉴于本网站整体风格带有浓厚的中国画色彩，我们将网站的Logo设计成一个红色的中国印，一方面与页面风格相符，另一方面可作为国画中的落款。

1. 总体规划与结构框图
   网站共分为三个层次，顶层为主页，以一幅画卷展示出网站所囊括的内容。主页之下设置两个一级分类（第二层），分别是“山之奇”和“水之秀”，其中“山之奇”部分介绍了四座名山：黄山、珠穆朗玛峰、三神山和庐山；“水之秀”部分也分为四个子页面，依次是：漓江、若尔盖、杭州西湖、瀑布。各页面层次关系见如下结构框图：
   共计11个页面。
2. 开发工具和技术
3. 开发工具：Adobe PhotoShop CS3、 Adobe Dreamweaver CS4、
   Adobe Flash CS4、 Ulead GIF Animator 5.05
4. 使用技术：JavaScript框架库jQuery+Marquee插件
   Div+CSS布局
   Flash相关：引导层、遮罩层、ActionScript2.0/3.0、交互按钮
   PhotoShop图像处理 ，GIF动画制作
5. 原创素材制作说明
6. 网站首页Flash
   

Flash效果截图
效果：首页Flash动画是一幅缓缓拉开的画卷，画卷上根据本网站的结构描绘了一幅山水图，点击图中的相应区块即可进入相应页面，每个链接区块都制作了鼠标悬停效果，点击链接时将收回画卷，然后进入子页面。



素材1 素材2
制作说明：首先利用PhotoShop将两幅原始素材图片（上图）合并成画卷中的山水图，每一个链接区域均转换成“按钮”元件，以便设置鼠标悬停效果。其中“漓江”上漂流的小舟利用路径引导层引导小舟的运动轨迹。水流效果和瀑布流动效果利用的是Flash的遮罩功能。Flash中加入了动作脚本（ActionScript2.0）用于实现链接和对播放的控制。

1. 二级页面头部Flash
   

Flash效果截图



素材1 素材2
制作说明：利用PhotoShop将两幅原始素材图片（上图）经过处理后合并成该Flash的背景图片，在中下部的空白区域制作四个“按钮”元件及其鼠标悬停效果。为使页面更富于动感，加入三条无规则移动的半透明线条。Flash中的链接采用ActionScript3.0编写。（该Flash制作先于主页Flash，起初还未考虑到降低作品对播放器的要求，因此编写的是ActionScript3.0脚本）

---

1. 页面布局

网站完全采用Div+CSS开发，主要部分由人工输入代码，保证了代码的整洁高效，也实现了网站整体风格的统一。网站的DOM树结构为：

1. 主页：
   

1. 山、水主页：
   

1. 各个分页：
   

1. 各个div标签的背景图片及内容图片设计

各种图片都采用圆角矩形的设计思路，使得页面更加的生动和友好。

1. 页面滚动看板的设计
   采用了jQuery框架库和其插件marquee.js，配合<marquee>标签实现滚动功能，而且能够实现对鼠标事件的判断和响应。
   

1. 二级页面右侧GIF动画
   

Gif动画 素材1 素材2素材3
制作说明：使用Photoshop将图片素材1做成只有边框而其他部分透明的png图片，并将素材2和素材3的文字去除，缩小为和画卷框架匹配的图片。再使用GIF Animator将三副图片拼合为gif图片，并在画卷框内的的图片转换时加入淡入淡出的效果。Gif动画共有8个，分别放置在各个二级页面中。

1. 二级页面底部滚动图片Flash

flash效果截图

图片1

图片2

制作说明：首先利用Photoshop十六张素材图片合成两张张图片，如上图的图片1图片2，然后利用Flash制作滚动效果。滚动图片flash共有两个，分布在各个二级页面中。

1. 角色分工
2. 分工说明

包括素材搜集在内，总共花费了大约一周的时间，由于各自分工比较明确，对软件和相关技术比较熟悉，制作起来效率较高。

1. 参考资料

[1] 百度知道http://zhidao.baidu.com

[2] 百度图片http://image.baidu.com/

[3] 昵图网http://www.nipic.com/site/search/1.html