您好,欢迎访问三七文档
当前位置:首页 > 电子/通信 > 综合/其它 > Web网站设计实验报告
Web网站设计实验报告学生:学号:班级:系别:学院:目录一、设计目的.............................................................................................3二、设计题目.............................................................................................3三、结构设计.............................................................................................3四、技术分析.............................................................................................5五、设计过程.............................................................................................6六、实验总结.............................................................................................7[附录]网页源代码节选............................................................................8一.设计目的在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便利。但是,我们成天浏览的网站网页到底是如何制作的呢?我想这一点很多同学都没有去深究过。所以为了了解网页制作的过程,我们在老师的指导下分前台和后台进行了一系列操作,并有所收获。我们了解和熟悉了网页设计的基础知识和实现技巧,也熟练掌握了Photoshopcs3、Dreamweavercs等软件的的操作和应用。二.设计题目《篮球球迷交流网》主要是篮球新闻、视频,还有交流帖子区,交易广告平台等。三.结构设计选定主题,确定题目之后,网站设计还是一张白纸,我所做的是需要在这张白纸上一点点勾勒出网站的大框架,然后慢慢填充,实现网站的构想。首先我们在网上和图书管里查阅了大量的资料,以确定我们所需要的基本技术。然后,我们对整个网站进行总体规划,接着逐步细化。我的设计主题是篮球球迷交流网,包括多个方面,框架为:首先是首页,首页下是新闻头条,分栏有球迷自述、篮球美图、给我留言,从分栏都可以回到首页。首页主要分为新闻头条、热门话题区、靓图展示。此为网站的大体板块,下面我们就每一页的页面板块进行详细的分析,有了大体框架,我们只需要在每一页的主要内容上做以划分,下面就内容板块举几个例子:1.首页(作为一个网站的第一界面,一定要有内容,我把content分为logo和网站导航div,下面又展示了正文内容)2.篮球美图四.技术分析WEB技术主要分为客户端和服务器技术。Web客户端设计技术主要包括:html语言、JavaApplets、脚本程序、CSS、DHTML、插件技术以及VRML技术。Web服务器端的开发技术也是由静态向动态逐渐发展、完善起来的。Web服务器技术主要包括服务器、CGI、PHP、ASP、ASP.NET、Servlet和JSP技术。(一)建立布局这里我们用到了HTML以及CSS等实用技术。HTML之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。由此可见,网页的本质就是HTML,通过结合使用其他的Web技术,可以创造出功能强大的网页。因而,HTML是Web编程的基础。而CSS是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HMTL中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。(二)网页中的图像(1)怎样编辑网页中的图像在Dreamweavercs3中,可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑,编辑功能主要有:图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。另外,为了使图片更符合要求,我们还在photoshopcs3中队所用的图片进行了处理,使得图片看起来更加精细美观,符合我们的主题要求。(2)使用背景图像使用背景图像与使用背景色不同,使用背景色只将网页的背景用某种颜色填充,而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。(三)加入超链接选中图片或者文字,在下面的链接属性中输入所要连接到的地址,同时,下方的目标属性被激活,输入blank设置成在新窗口中打开网页。我们设置了链接本站点的网页页面,同时也连接了外网(链接到虎扑和百度),使得大家访问页面时能够查询更多详细的信息,方便用户查询。五.设计过程制作网页,首先是确定主题,经过再三考虑,我选择了这个关于篮球球迷交流网的网站,因为平时比较喜欢打篮球,对这方面了解比较多,而且主题比较新颖,网站设计主题比较现代化,发挥空间也比较大,于是网站主题确立。再后是收集资料与素材,了解关于篮球方面的一些图片和新闻,加以自己的收藏,再参考一些好的网站的布局,特色,颜色搭配,背景图等。最后开始制作网页,使用dreamweaver。页面用div布局,用白色充当背景色,但是丝毫不显单调。主体部分是用一个公共的css样式。而在其他页面则通过DIV标签来实现内容的填充:主体页面制作非常简单,采用了整齐的布局,注重网页的实用性,在其中插入表格,分栏还插入了超级链接直接链接到互联网。六.实验总结与体会在实验过程中,遇到了许多困难。比如说,加入超链接过程中,明明在页面属性里设置的是超链接的文字是原色,点击链接后也是原色,可一链接上就变色了,做了很多研究,实验,改了很多次代码,终于弄上了,还加上了把鼠标挪到上面字就会变色的特效。在网站制作过程中,因为我加了两层背景,所以代码稍有疏忽,整个页面就完全变样子了,有一次弄了好半天都没找的错误处,最后发现其实少加了一个div。网站制作过程中我的白色背景常常会出现无法延伸到页尾的情况,经慢慢摸索,发现是因为我的白色背景布还不够长,显示器不同会造成一定差别,在调整了白色背景图片大小之后问题就解决了。做好页面,并不是一件容易的事,它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次网站设计还存在很多不足,页面过于简单,特效较少,这是我需要提高的地方。需要学的地方还有很多,需要有耐心、坚持,不断的学习,综合运用多种知识,才能设计出好的web页面。[附录]网页源代码节选首页代码节选:!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/linkrel=stylesheettype=text/csshref=css.css/title篮球球迷交流网/titlescripttype=text/jscriptvarnewwindow;functionshow(newURL){newwindow=window.open(newURL,newURL);newwindow.focus();returnfalse;}functionph1(){varobj=document.getElementById(floatLeft);obj.src=image/45.gif;}functionph2(){varobj=document.getElementById(floatLeft);obj.src=iamge/34.jpg;}/scriptstyletype=text/css#head{width:1125px;height:98px;margin:auto;background-image:url(image/logo.PNG)}.STYLE1{font-size:24px}/style/headbodyonload=ss()divid=head!--logo部分--p!--null--/pp /p/divdivclass=navtablewidth=1040border=0trtdwidth=213ahref=球迷自述.htmlclass=STYLE1球迷自述/a/tdtdwidth=158ahref=篮球美图.htmlclass=STYLE1篮球美图/a/tdtdwidth=190ahref=给我留言.htmlclass=STYLE1给我留言/a/tdtdwidth=222ahref=class=STYLE1onclick=returnshow(')篮球资讯/a/tdtdwidth=277ahref=class=STYLE1onclick=returnshow(')百度搜索/a/td/tr/tablebr/br/ahref=球迷自述.html/abr/br/ahref=篮球美图.html/abr/br/ahref=给我留言.html/abr/br/ahref=onclick=returnshow(')/abr/br/ahref=onclick=returnshow(')/a/divh2 /h2h2篮球世界/h2pclass=absimgid=floatLeftsrc=image/123.jpgonmouseover=ph1()onmouseout=ph2()alt=个人头像/作为一个篮球球迷,总是希望和大家分享一些自己喜欢的东西/pp热门消息/p
本文标题:Web网站设计实验报告
链接地址:https://www.777doc.com/doc-6236301 .html