Web网站设计实验报告
目录
一、设计目的 3
二、设计题目 3
三、结构设计 3
五、设计过程 6
六、实验总结 7
[附录] 网页源代码节选 8
一. 设计目的
在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便利。但是,我们成天浏览的网站网页到底是如何制作的呢?我想这一点很多同学都没有去深究过。所以为了了解网页制作的过程,我们在老师的指导下分前台和后台进行了一系列操作,并有所收获。
我们了解和熟悉了网页设计的基础知识和实现技巧,也熟练掌握了Photoshop cs3、Dreamweaver cs等软件的的操作和应用。
二. 设计题目
《篮球球迷交流网》
主要是篮球新闻、视频,还有交流帖子区,交易广告平台等。
三. 结构设计
选定主题,确定题目之后,网站设计还是一张白纸,我所做的是需要在这张白纸上一点点勾勒出网站的大框架,然后慢慢填充,实现网站的构想。首先我们在网上和图书管里查阅了大量的资料,以确定我们所需要的基本技术。然后,我们对整个网站进行总体规划,接着逐步细化。
我的设计主题是篮球球迷交流网,包括多个方面,框架为:
首先是首页,首页下是新闻头条,分栏有球迷自述、篮球美图、给我留言,从分栏都可以回到首页。
首页主要分为新闻头条、热门话题区、靓图展示。
此为网站的大体板块,下面我们就每一页的页面板块进行详细的分析,有了大体框架,我们只需要在每一页的主要内容上做以划分,下面就内容板块举几个例子:
1. 首页(作为一个网站的第一界面,一定要有内容,我把content分为logo和网站导航div,下面又展示了正文内容)
2. 篮球美图
四. 技术分析
WEB技术主要分为客户端和服务器技术。
Web客户端设计技术主要包括:html语言、Java Applets、脚本程序、CSS、DHTML、插件技术以及VRML技术。
Web服务器端的开发技术也是由静态向动态逐渐发展、完善起来的。Web服务器技术主要包括服务器、CGI、PHP、ASP、ASP.NET、Servlet和JSP技术。
(一)建立布局
这里我们用到了HTML以及CSS等实用技术。HTML之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。 由此可见,网页的本质就是HTML,通过结合使用其他的Web技术,可以创造出功能强大的网页。因而,HTML是Web编程的基础。
而CSS是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HMTL中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
(二)网页中的图像
(1)怎样编辑网页中的图像
在Dreamweaver cs3中,可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑,编辑功能主要有:图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。
另外,为了使图片更符合要求,我们还在photoshop cs3中队所用的图片进行了处理,使得图片看起来更加精细美观,符合我们的主题要求。
(2)使用背景图像
使用背景图像与使用背景色不同,使用背景色只将网页的背景用某种颜色填充,而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。
(三)加入超链接
选中图片或者文字,在下面的链接属性中输入所要连接到的地址,同时,下方的目标属性被激活,输入blank设置成在新窗口中打开网页。我们设置了链接本站点的网页页面,同时也连接了外网(链接到虎扑和百度),使得大家访问页面时能够查询更多详细的信息,方便用户查询。
五. 设计过程
制作网页,首先是确定主题,经过再三考虑,我选择了这个关于篮球球迷交流网的网站,因为平时比较喜欢打篮球,对这方面了解比较多,而且主题比较新颖,网站设计主题比较现代化,发挥空间也比较大,于是网站主题确立。
再后是收集资料与素材,了解关于篮球方面的一些图片和新闻,加以自己的收藏,再参考一些好的网站的布局,特色,颜色搭配,背景图等。
最后开始制作网页,使用dreamweaver。页面用div布局,用白色充当背景色,但是丝毫不显单调。
主体部分是用一个公共的css样式。而在其他页面则通过DIV标签来实现内容的填充:
主体页面制作非常简单,采用了整齐的布局,注重网页的实用性,在其中插入表格,分栏还插入了超级链接直接链接到互联网。
六. 实验总结与体会
在实验过程中,遇到了许多困难。比如说,加入超链接过程中,明明在页面属性里设置的是超链接的文字是原色,点击链接后也是原色,可一链接上就变色了,做了很多研究,实验,改了很多次代码,终于弄上了,还加上了把鼠标挪到上面字就会变色的特效。在网站制作过程中,因为我加了两层背景,所以代码稍有疏忽,整个页面就完全变样子了,有一次弄了好半天都没找的错误处,最后发现其实少加了一个div。网站制作过程中我的白色背景常常会出现无法延伸到页尾的情况,经慢慢摸索,发现是因为我的白色背景布还不够长,显示器不同会造成一定差别,在调整了白色背景图片大小之后问题就解决了。做好页面,并不是一件容易的事,它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次网站设计还存在很多不足,页面过于简单,特效较少,这是我需要提高的地方。需要学的地方还有很多,需要有耐心、坚持,不断的学习,综合运用多种知识,才能设计出好的web页面。
[附录] 网页源代码节选
首页代码节选:
web大作业实验报告
网页名称: VG裸钻网站主页设计
网站设计说明书
一、网站规划设计说明
1、结构设计
页面结构相对来说比较简单,采用上中(左、右)下的结构。上面放了banner,banner的下面是导航条,中间的左边是商品的分类和介绍主要分为了四块,从上到下依次排列公司的最新产品的信息:戒指、吊坠、配链、耳钉等主要产品的相关介绍;右边分为五块:也是上到下依次排列,第一个盒子设了顾客可以自己搜索自己想要的产品;第二到第五个盒子分别放了新款产品,新品推荐,热销产品,特价商品的精美图片。最下面是footer,设置关于该网页的相关搜索以及版权信息。
2、内容规划(该网站的首页一般是一个静态的页面)
页面头部:页面头部包含VG裸钻的LOGO设计以及它最近的一些关于产品的消息;
栏目导航:设置了鼠标经过时文字的效果单击可以进入其它各内容页面;
具体内容:这是一家钻石的网站首页的设计,本页的具体内容包括公司的最新产品的信息的分类介绍分为:戒指、吊坠、配链、耳钉等主要产品,并且提供了一些相关照片,能让浏览者快速查询找到自己想要找到的信息以及之前的所有产品的信息。
版权声明:版权声明写在页脚,设置关于该网页的相关搜索以及版权信 息
图表 1页脚
3、LOGO设计
这个网站的LOGO是该品牌的LOGO,我是以图片的形式将其切片。该LOGO主要利用了白色,是两个舞动的字母VG体现了产品的华丽和柔美,生动和逼真的设计图样,体现了其产品的精美,为产品加分吸引更多的顾客。
4、技术方案
该网页主要用到了css+div的网页布局方式,主要是用Dreamweaver来完成网页的代码的编写和测试,LOGO的设计是采用Photoshop软件的技术,用Fireworks来完成一些图片的切片工作,用IE和Firefox对网页的效果进行测试,最后用Photoshop制作网页的效果图。在编写代码的过程中还用到了JavaScript的语言。
二、网站色彩说明
1、网站主色调
该网站的主色彩是绿色和淡蓝色,,网页文字为淡蓝色,导航色为淡绿色导航文字为白色如下图所示:
图表 2 网站主色调
绿色是一种非常具有亲和力的颜色,它代表的是自然、生命、活力与健康,是使用比较广泛的颜色之一。蓝色和白色的运用使得整个网页显得很舒服和平和,同时背景色显得产品的图片更加的鲜艳、漂亮。
2、网页链接色
表格 1 网页文字
表格 2导航文字颜色
三、HTML页面结构图
图表 3 整个网页结构
四、页面DIV结构代码
<div id="container">
<div id="globallink"></div>
<div id="parameter">
<div id="fenlei"></div>
<div id="lstatistics"> </div>
<div id="lhotblog"> </div>
<div id="lrecent"></div>
<div id="lapply"></div>
</div>
<div id="mainsupport">
<div id="logoin"></div>
<div id="demo">
<div id="indemo">
<div id="demo1"></div>
<div id="demo2"></div>
</div>
</div>
<div id="recommend"></div>
<div id="new"></div>
<div id="tips"></div>
</div>
<div id="footer"></div>
</div>
五、CSS代码及注释
1. JS代码
<script>
<!--
var speed=10;
var tab=("demo");
var tab1=("demo1");
var tab2=("demo2");
=;
function Marquee(){
if MyMar=setInterval(Marquee,speed);
=function() {clearInterval(MyMar)};
=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
2. css代码及代码
</div>
<style type="text/css">
*{ padding:0px; margin:0px;}
body{background-color:#ebf7ff;
font-size:12px;
margin: 0px;
padding:0px;
text-align:center;}
#container{ /* 宽度固定且居中的版式 */
position:relative;
margin:1px auto 0px auto;
width:850px;
text-align:left;}
#globallink{width:800px;
height:200px;
margin:0px;
background-image:url(img/; /* banner图片 */
background-repeat:no-repeat;
font-size:18px;
padding-bottom:25px;}
#globallink ul{
list-style-type:none;
position:absolute; /* 绝对定位 */
display:inline;
width:800px;
top:200px;
padding:0px; margin:0px;
background-color:#00FFFF;}
#globallink li{
float:left; /* 左浮动 */
text-align:center;
padding-top:10px;
}
#globallink ul li#one{width:100px;}
#globallink ul li#two{width:150px;}
#globallink a:link, #globallink a:visited{
color:#FFFFFF;
text-decoration:none;}
#globallink a:hover{
color:#000000;
text-decoration:none;}
#parameter{
position:relative;
margin:10px 0px 0 0px;
float:left;
font-size:12px;
width:200px;
padding-right:10px;
color:#FF99CC;}
#parameter div{
border:2px solid #00FFFF;
}
#parameter br{
clear:both;
display:none;}
#parameter h3 span{
display:none;}
#parameter h3{
height:30px; width:90px;
padding:0px; margin:0px;}
#parameter a:link{
color:#2a788e;
text-decoration:none;}
#parameter a:visited{
color:#FF99CC;
text-decoration:none;}
#parameter a:hover{
color:#FF99CC;
text-decoration:none;}
#lstatistics span a,#lhotblog span a, #lrecent span a, #lapply span a{
float:left;
text-align:left;
padding-top:5px;
padding-right:5px;
margin-bottom:5px;}
#fenlei{ height:25px;
left:1px;
top:2px; }
#fenlei h3{background:url(img/ no-repeat; /* 用背景图片代替标题 */
position:absolute;
left:1px;
top:2px; }
#lstatistics h3{
background:url(img/ no-repeat;}
#lhotblog h3{
background:url(img/ no-repeat;}
#lrecent h3{
background:url(img/ no-repeat;}
#lapply h3{
background:url(img/ no-repeat;}
#lstatistics, #lhotblog, #lrecent, #lapply{
position:relative;
clear:both;}
#lstatistics ul, #lhotblog ul, #lrecent ul, #lapply ul{
list-style-type:none; /* 统一不显示项目符号 */
padding:10px 0px 0px 0px;
margin:0px;}
#lstatistics li{
border-bottom:1px dashed #CCCCCC;
text-align:left;
padding-left:30px;
font-size:14px;
line-height:25px;
background:url(img/ no-repeat 7px 4px;}
#lhotblog li{
border-bottom:1px dashed #CCCCCC;
text-align:left;
padding-left:30px;
font-size:14px;
line-height:25px;
background:url(img/ no-repeat 7px 4px;} /* 背景小图片作为项目符号 */
#lrecent li, #lapply li{
border-bottom:1px dashed #CCCCCC;
text-align:left;
padding-left:30px;
font-size:14px;
line-height:25px;
background:url(img/ no-repeat 7px 6px;}
#mainsupport{
width:590px;
float:left;
position:relative;
font-size:12px;
margin:0px;}
#mainsupport div{
border:1px solid #00FFFF;}
#mainsupport h3 span{
display:none;}
#mainsupport h3{ width:230px;height:31px;}
#mainsupport li a:link{
color:#2a788e;
font-size:12px;
text-decoration:none;}
#mainsupport li a:visited{
color:#227086;
font-size:12px;
text-decoration:none;}
#mainsupport li a:hover{
color:#FF99CC;
font-size:12px;
text-decoration:none;}
form{
padding:0px;
margin:0px;}
input{
margin:0px;}
#logoin{
clear:both;
margin-bottom:2px;
position:absolute;
left:0px;
top:260px;
height:30px;
width:588px;
background-color:#d1ebff;
top:10px;}
#logoin ul#per{
margin:0px;
padding-left:0px;
padding-top:3px;
list-style-type:none;
text-align:left;}
#logoin ul#per li{
float:left;
line-height:23px;
padding-left:15px;
padding-top:3px;
margin:0px;}
#logoin #per input{
background-color:#FFFFFF;
border:1px solid #226c81;
color:#226c81;
font-size:12px;
height:15px;
padding:0px;}
#logoin #per1 ,#logoin #per2 {
background-color:#FFFFFF;
border:1px solid #226c81;
color:#226c81;
font-size:12px;
height:14px;
padding:0px;
width:110px;}
#logoin {
display:none;
clear:both;}
#recommend br,#new br,#tips br{
display:block;
clear:both;
margin:0px;padding:0px;}
#recommend ul,#new ul,#tips ul{
list-style:none;
margin::0px;}
#recommend ul li,#new ul li,#tips ul li{
padding-left:20px;
text-align:center;
float:left;
width:170px;}
#recommend ul li img,#new ul li img,#tips ul li img{
border:4px solid #ccc;
margin:5px 0px 3px 0px;
padding:0px;}
#recommend ul li a:link,#recommend ul li a:visited,#new ul li a:link,#new ul li a:visited,#tips ul li a:link,#tips ul li a:visited{
color:666666;
text-decoration:none;}
#recommend ul li a:hover,#new ul li a:hover,,#tips ul li a:hover{
color:#000000;
text-decoration:underline;}
#demo1 h3{
height:32px; width:590px;
padding:0px; margin:0px;}
#mainsupport #recommend h3{
background:url(img/ no-repeat;}
#mainsupport #new h3{
background:url(img/ no-repeat;}
#mainsupport #tips h3{
background:url(img/ no-repeat;}
#recommend, #new,#tips{
position:relative;}
#footer{
width:800px;
clear:both; /* 不受浮动影响 */
font-size:12px;
text-align:center;
color:#226c81;
padding-bottom:20px;
margin:0px;
padding-top:20px;
background-color:#ebf7ff;}
#footer p{
margin:0px;
padding-top:10px;
background-color:#ebf7ff;}
#footer a:link{
color:#006480;
font-size:12px;
text-decoration:none;}
#footer a:visited{
color:#006480;
font-size:12px;
text-decoration:none;}
#footer a:hover{
color:#000000;
font-size:12px;
text-decoration:none;}
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 590px;}
#demo img {
border: 3px solid #F2F2F2;}
#indemo {
border: 1px dashed #CCC;
float: left;
width: 800%;}
#demo1 {float: left;}
#demo2 {float: left;}
六、页面测试结果
(要求:页面在FF及以上任一版本下测试结果,贴图完成)
1、下测试结果
2、FF下测试结果
七、心得体会
(要求:必须要有内容,可以是学习总结,可以是体会,可以是技术知识总结,也可以是经验总结等,不少于500字)
第一次做蓝色经典的时候老师带着我们一起做,给了我们网页文字材料和切好的图片并教我们如何处理盒子与盒子之间的位置,带着我们做css。这些过程当中我感觉自己好像跟上了老师的步伐,但是在真的准备最后的大作业时才发现这是一个大工程(不过或许是因为自己第一次做)。
从构思要做什么类型的网站,找相关的图片材料和文字材料,设定网页的container的长和宽,构思将网页的布局将其怎样分割,大致确定好后开始找适合整个网页的背景色调,设定每个盒子的大小,切割找的图片的大小使其适合整个网页的布局,接着开始编写代码。或许因为自己不是很熟练感觉做的时候自己做做改改这样重复了好几遍,感觉好麻烦。可是当网页最终的效果出来的时候我感觉好有成就感,这是第一张真正意义上的自己设计的、自己找资料的、自己编写的网页。
在做的过程当中,遇到的主要问题是盒子的布局问题,因为我的整个盒子的结构是:上、中(左、右)下的结构在布局时没有计算好图片结合文字后的尺寸的大小,导致出现了盒子被挤到下面的现象,因此每张图片我都做了两次以上的切片,使得整个过程有点麻烦。还有就是一些标签记得不是很清楚导致在做的过程当中出先了看不到效果,又花了好些时间子在找错误单词上。
做这次期末大作业,感觉自己还不是很熟练,频频出错浪费了很多时间,但值得欣慰的是我还是顺利的完成了我的第一张自己设计的网页,感觉还不错!
WEB系统开发综合实验报告题目红尘客栈网上订房页面专业计算机科学与技术信息技术及应用班级学生重庆交通大学20xx年目录一设计目的3…
Web网站设计实验报告学生学号班级系别学院目录一设计目的3二设计题目3三结构设计3四技术分析5五设计过程6六实验总结7网页源代码节…
郑州轻工业学院Web前端设计网页设计报告院系班级学号姓名时间设计报告网页设计要求题目设计一个不限内容题材的个人网站要求页面数量不少…
目录一设计目的3二设计题目3三结构设计3四技术分析6五设计过程8六实验误区11七实验总结12附录网页源代码节选12一设计目的在In…
昆明理工大学信息工程与自动化学院学生实验报告201201学年第一学期课程名称Web设计技术开课实验室年月日注报告内容按实验须知中七…
WEB系统开发综合实验报告题目红尘客栈网上订房页面专业计算机科学与技术信息技术及应用班级学生重庆交通大学20xx年目录一设计目的3…
昆明理工大学信息工程与自动化学院学生实验报告201201学年第一学期课程名称Web设计技术开课实验室年月日注报告内容按实验须知中七…
南京信息工程大学滨江学院网页制作课程设计报告设计题目专业学生姓名学号日期年月日指导教师计算机系制20xx年12月目录一设计目的3二…
网页设计与制作实验报告学班学指20xx523导教生姓名级号师文志华实验一简单网页制作一实验目的1熟悉Dreamweaver软件的操…
附录1设计报告封面湖南娄底职业技术学院web网站设计课程设计报告设计题目系部电子信息工程息专业学生姓名学号年月年指导教师教研室主任…
网页设计实践报告目录一.实训意义:............................................3二.实…