Web网站设计实验报告Word格式文档下载.docx
《Web网站设计实验报告Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《Web网站设计实验报告Word格式文档下载.docx（11页珍藏版）》请在冰点文库上搜索。
但是,我们成天浏览的网站网页到底是如何制作的呢?
我想这一点很多同学都没有去深究过。
所以为了了解网页制作的过程，我们在老师的指导下分前台和后台进行了一系列操作，并有所收获。
我们了解和熟悉了网页设计的基础知识和实现技巧，也熟练掌握了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设置成在新窗口中打开网页。
我们设置了链接本站点的网页页面，同时也连接了外网（链接到虎扑和XX），使得大家访问页面时能够查询更多详细的信息，方便用户查询。
五．设计过程
制作网页,首先是确定主题,经过再三考虑,我选择了这个关于篮球球迷交流网的网站,因为平时比较喜欢打篮球，对这方面了解比较多，而且主题比较新颖，网站设计主题比较现代化，发挥空间也比较大，于是网站主题确立。
再后是收集资料与素材，了解关于篮球方面的一些图片和新闻，加以自己的收藏，再参考一些好的网站的布局，特色，颜色搭配，背景图等。
最后开始制作网页，使用dreamweaver。
页面用div布局，用白色充当背景色，但是丝毫不显单调。
主体部分是用一个公共的css样式。
而在其他页面则通过DIV标签来实现内容的填充：
主体页面制作非常简单，采用了整齐的布局，注重网页的实用性，在其中插入表格，分栏还插入了超级链接直接链接到互联网。
六．实验总结与体会
在实验过程中，遇到了许多困难。
比如说，加入超链接过程中，明明在页面属性里设置的是超链接的文字是原色，点击链接后也是原色，可一链接上就变色了，做了很多研究，实验，改了很多次代码，终于弄上了，还加上了把鼠标挪到上面字就会变色的特效。
在网站制作过程中，因为我加了两层背景，所以代码稍有疏忽，整个页面就完全变样子了，有一次弄了好半天都没找的错误处，最后发现其实少加了一个div。
网站制作过程中我的白色背景常常会出现无法延伸到页尾的情况，经慢慢摸索，发现是因为我的白色背景布还不够长，显示器不同会造成一定差别，在调整了白色背景图片大小之后问题就解决了。
做好页面，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。
本次网站设计还存在很多不足，页面过于简单，特效较少，这是我需要提高的地方。
需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。
[附录]网页源代码节选
首页代码节选：
<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
/>
linkrel="
stylesheet"
type="
text/css"
href="
css.css"
title>
篮球球迷交流网<
/title>
scripttype="
text/jscript"
varnewwindow;
functionshow（newURL）
{
newwindow=window.open（newURL,"
newURL"
）;
newwindow.focus（）;
returnfalse;
}
functionph1（）
{
varobj=document.getElementById（"
floatLeft"
obj.src="
image/45.gif"
;
functionph2（）
iamge/34.jpg"
/script>
styletype="
#head
width:
1125px;
height:
98px;
margin:
auto;
background-image:
url（image/logo.PNG）
}
.STYLE1{font-size:
24px}
/style>
/head>
bodyonload="
ss（）"
divid="
head"
--logo部分-->
<
p>
--null-->
/p>
&
nbsp;
/div>
divclass="
nav"
tablewidth="
1040"
border="
0"
tr>
tdwidth="
213"
ahref="
球迷自述.html"
class="
STYLE1"
球迷自述<
/a>
/td>
158"
篮球美图.html"
>
篮球美图<
190"
给我留言.html"
给我留言<
222"
"
onclick="
returnshow（'
277"
onclick="
/tr>
/table>
br/>
h2>
/h2>
篮球世界<
pclass="
abs"
imgid="
src="
image/123.jpg"
onmouseover="
ph1（）"
onmouseout="
ph2（）"
alt="
个人头像"
作为一个篮球球迷，总是希望和大家分享一些自己喜欢的东西<
热门消息<
升级会员 