web网站设计实验报告.docVIP

武汉理工大学华夏学院 课 程 设 计 课程名称 web技术应用基础 题 目 网络购书系统 专 业 计算机应用 班 级 计应1091 姓 名 刘 琪 学 号 10210409103 成 绩 指导教师 库 少 平  目 录 一、设计目的 3 二、设计题目 3 三、结构设计 3 四、技术分析 6 五、设计过程 8 六、实验误区 11 七、实验总结 12 [附录] 网页源代码节选 12 设计目的 在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。 我们了解和熟悉了网页设计的基础知识和实现技巧，也熟练掌握了Photoshop cs3、Dreamweaver cs等软件的的操作和应用。 设计题目 Hammer原创摇滚 结构设计 选定主题，确定题目之后，网站设计还是一张白纸，我所做的是需要在这张白纸上一点点勾勒出网站的大框架，然后慢慢填充，实现网站的构想。首先我们在网上和图书管里查阅了大量的资料，以确定我们所需要的基本技术。然后，我们对整个网站进行总体规划，接着逐步细化。 我们选做的主题是原创音乐网站，其目的是提供给优秀的摇滚作品.时实了解各地原创作品 此为网站的大体板块，下面我们就每一页的页面板块进行详细的分析。我们先确定了整体的框架，然后就各项数据进行精确的计算，然后根据每个页面性质的不同再做块的改动，并计算框架的比例。，下面是我们设计的大体框架： 有了大体框架，我们只需要在每一页的主要内容上做以划分，下面就内容板块举几个例子： 首页（作为一个网站的第一界面，一定要有内容，我把content分为content1和content2，content2中又展示了四个内容） 乐队 技术分析 (一)建立布局 这里我们用到了HTML以及CSS等实用技术。HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。 此可见，网页的本质就是HTML，通过结合使用其他的Web技术，可以创造出功能强大的网页。因而，HTML是Web编程的基础CSS是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HMTL中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。 （1）怎样编辑网页中的图像 在Dreamweaver cs3中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。 另外，为了使图片更符合要求，我们还在photoshop cs3中队所用的图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。 （2）使用背景图像 使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。 （三）加入超链接 选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入blank设置成在新窗口中打开网页。我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。 （四）乐队也滚动字幕 在乐队这个页面上，为了使页面显得不空更有内容，我们也加入了一些滚动字幕，来介绍一些乐队的专辑歌曲： 在这里我并没有一开始就达到了我想要的效果，在刚开始插入代码尝试之后，我发现字幕滚动的过于快，滚动之后没有循环，而且鼠标点上去也不会有停顿，我们为此很是苦恼，经过一次次尝试，我们终于得到了完整的代码作出了满意的效果： （五）添加音乐 在完成网页之后，因为网页内容的性质，我们想在每个网页上加入一些背景音乐，于是我查找了一下加入音乐的代码，插入了音乐，并隐藏了播放器，代码如下： embed src=wangzhansheji/yinyue/indexyinyue.wma autostart=true hidden=true loop=true height=30 width=50/embed 效果图： 设计过程 制作网页,首先是确定主题,经过再三考虑,做了的网站,