《Web网站设计实验报告》由会员分享，可在线阅读，更多相关《Web网站设计实验报告（13页珍藏版）》请在装配图网上搜索。
1、倏马翁义夫争Web网站设计实验报告学 生：学 号：班 级：系 别：学 院：目录一、设计目的 3二、设计题目 3三、结构设计 3四、技术分析 5五、设计过程 6六、实验总结 7附录网页源代码节选 81 设计目的在Internet飞速发展的今天，互联网成为人们快速获取、发布 和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥 着重要的作用。因此网站建设在Internet应用上的地位显而易见， 它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便 利。但是，我们成天浏览的网站网页到底是如何制作的呢我想这一点 很多同学都没有
2、去深究过。所以为了了解网页制作的过程，我们在老 师的指导下分前台和后台进行了一系列操作，并有所收获。我们了解和熟悉了网页设计的基础知识和实现技巧，也熟练掌握Photoshop cs3 、 Dreamweaver cs 等软件的的操作和应用。2 设计题目篮球球迷交流网主要是篮球新闻、视频，还有交流帖子区，交易广告平台等。3 结构设计选定主题，确定题目之后，网站设计还是一张白纸，我所做的是需要在这张白纸上一点点勾勒出网站的大框架， 然后慢慢填充， 实现网站的构想。 首先我们在网上和图书管里查阅了大量的资料， 以确定我们所需要的基本技术。然后，我们对整个网站进行总体规划，接着逐步细化。我的设计主题是
3、篮球球迷交流网，包括多个方面，框架为：首先是首页，首页下是新闻头条，分栏有球迷自述、篮球美图、给我留言，从分栏都可以回到首页。首页主要分为新闻头条、热门话题区、靓图展示。此为网站的大体板块， 下面我们就每一页的页面板块进行详细的分析，有了大体框架，我们只需要在每一页的主要内容上做以划分，F面就内容板块举几个例子:1 .首页（作为一个网站的第一界面，一定要有内容，我把content分为logo和网站导航div ,下面又展示了正文内容）网站导航拜迷自述.施建美图给我智言储球资讯百度搜索蓝球世界a力力-小器球球迷.口点希？大出纪亨一些自已育雌的本向料比34分.湖人逆转大政科比师升对f强打高岫打板置此
4、2莪们的化学反亶次由他公差I揖安东尼二必须蓼拽回翦力的箕感 中*德 参加强鳍；r- a/将枳帙补防称二优】很优秀,阴合盅时向 将比；瞿隼请能学利献佳防守球员I她寸可能不会在4连城/拉巾复出2 .篮球美图我收藏的篮球美图球迷自述蠢球美图 给我旦售靛球资返日厦理述四.技术分析WE豉术主要分为客户端和服务器技术。Web户端设计技术主要包括：html语言、Java Applets、脚本程序、CSS DHTML插件技术以及 VRM技术。Wet务器端的开发技术也是由静态向动态逐渐发展、完善起来的。Wet务器技术主要包括服务器、CGI、PHP ASP、Servlet和JSP技术。（一）建立布局这里我们用到了
5、 HTMLH及CS湾实用技术。HTM之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。 由此可见，网页的本质就是HTML通过结合使用其他的 WebK术，可以创造出功能强大的网页。因而，HTM最 Web程的基础。而CSS是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的， 当鼠标移上去后字变成红色的且有下划线， 这就是一种风格。通过设立样式表，可以统一地控制HMT中各标志的显示属性。 级联样式表可以使人更能有效地控制网页外观。 使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。（二）网页中的图像（ 1 ）怎样编辑网页中的图像在 Dreamweav
6、ercs3 中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。另外，为了使图片更符合要求，我们还在photoshop cs3 中队所用的图片进行了处理， 使得图片看起来更加精细美观， 符合我们的主题要求。2）使用背景图像使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。（三）加入超链接选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入 blank设置成在新窗口中打 开网页。我们设置了链接
7、本站点的网页页面，同时也连接了外网（链 接到虎扑和百度），使得大家访问页面时能够查询更多详细的信息， 方便用户查询。 hrvSTYLEC htipr/voiaa. hwi- ec*vfrr 公办 dtfc 27TnXa u 式二11r clms= STTLE1 * anal加&二netmti shuurhtIp:/vw. h六& cw1。百度桂素，a-t五.设计过程制作网页，首先是确定主题，经过再三考虑，我选择了这个关于篮 球球迷交流网的网站，因为平时比较喜欢打篮球，对这方面了解比较 多，而且主题比较新颖，网站设计主题比较现代化，发挥空间也比较 大，于是网站主题确立。再后是收集资料与素材，了解
8、关于篮球方面的一些图片和新闻，加以自己的收藏，再参考一些好的网站的布局，特色，颜色搭配，背 景图等。最后开始制作网页，使用dreamweaver。页面用div布局，用白 色充当背景色，但是丝毫不显单调。主体部分是用一个公共的css样式。而在其他页面则通过DIV标签来实现内容的填充：主体页面制作非常简单，采用了整齐的布局，注重网页的实用性, 在其中插入表格，分栏还插入了超级链接直接链接到互联网。六.实验总结与体会在实验过程中，遇到了许多困难。比如说，加入超链接过程中，明明在页面属性里设置的是超链接的文字是原色， 点击链接后也是原 色，可一链接上就变色了，做了很多研究，实验，改了很多次代码,终于弄
9、上了， 还加上了把鼠标挪到上面字就会变色的特效。 在网站制作过程中，因为我加了两层背景，所以代码稍有疏忽，整个页面就完全变样子了， 有一次弄了好半天都没找的错误处， 最后发现其实少加了一个 div 。网站制作过程中我的白色背景常常会出现无法延伸到页尾的情况，经慢慢摸索，发现是因为我的白色背景布还不够长，显示器不同会造成一定差别， 在调整了白色背景图片大小之后问题就解决了。做好页面，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次网站设计还存在很多不足，页面过于简单，特效较少，这是我需要提高的地方。需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。 附录 网页源代码节选首页代码节选：!DOCTYPE html PUBLIC -TYLE1 font-size: 24px!-logo部分一,v!-null一 球迷自述 篮球美图 给我留言 篮球资讯 百度搜索 篮球世界作为一个篮球球迷，总是希望和大家分享一些自己喜欢的东西 和热门消息
Web网站设计实验报告
