Web网站设计实验报告
学 生：
学 号：
班 级：
系 别：
学 院：
目录
一、设计目的..................................................................................... 3
二、设计题目..................................................................................... 3
三、结构设计..................................................................................... 3
四、技术分析..................................................................................... 5
五、设计过程..................................................................................... 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页面。
[附录] 网页源代码节选
首页代码节选：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css.css" />
<title>篮球球迷交流网</title>
<script type="text/jscript">
var newwindow;
function show(newURL)
{
newwindow=window.open(newURL,"newURL");
newwindow.focus();
return false;
}
function ph1()
{
var obj=document.getElementById("floatLeft");
obj.src="image/45.gif";
}
function ph2()
{
var obj=document.getElementById("floatLeft");
obj.src="iamge/34.jpg";
}
</script>
<style type="text/css">
#head
{
width:1125px;
height:98px;
margin:auto;
background-image:url(image/logo.PNG)
}
.STYLE1 {font-size: 24px}
</style>
</head>
<body onload="ss()">
<div id="head"><!--logo部分-->
<p>
<!--null-->
</p>
<p> </p>
</div>
<div class="nav">
<table width="1040" border="0">
<tr>
<td width="213"><a href="球迷自述.html" class="STYLE1">球迷自述</a></td>
<td width="158"><a href="篮球美图.html" class="STYLE1" >篮球美图</a></td>
<td width="190"><a href="给我留言.html" class="STYLE1">给我留言</a></td>
<td width="222"><a href="" class="STYLE1"onclick="return show('http://voice.hupu.com/nba/newslist')">篮球资讯</a></td>
<td width="277"><a href="" class="STYLE1" onclick="return show('http://www.baidu.com/')">百度搜索</a></td>
</tr>
</table>
<br />
<br />
<a href="球迷自述.html"></a><br />
<br />
<a href="篮球美图.html" ></a><br />
<br />
<a href="给我留言.html"></a><br />
<br />
<a href=""onclick="return show('http://voice.hupu.com/nba/newslist')"></a><br />
<br />
<a href="" onclick="return show('http://www.baidu.com/')"></a> </div>
<h2> </h2>
<h2>篮球世界</h2>
<p class="abs"><img id="floatLeft" src="image/123.jpg" onmouseover="ph1()" onmouseout="ph2()" alt="个人头像" />作为一个篮球球迷，总是希望和大家分享一些自己喜欢的东西</p>
<p>热门消息</p>
第二篇：Web网站设计职业行情
Web网站设计职业行情
北京Web前端开发工程师招聘：
北京大正语言知识处理科技有限公司/汉语之声国际网络技术(北京)有限公司
一、工作职责：利用HTML/CSS/JavaScript/DOM等各种Web技术进行产品的界面开发。制作标准优化的代码，并增加交互动态功能，开发JavaScript模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。二、职位要求： 1、本科及以上学历 ；
2、精通HTML/XHTML、CSS，熟悉页面架构和布局，对Web标准和标签语义化有深入理解；
3、精通Ajax、JavaScript、DOM等前端技术，掌握面向对象编程思想；
4、熟悉一种以上后台开发语言(如PHP/Java或C/C++/.NET)以及一种数据库(如MySQL/Oracle)；
5、对Web技术创新及丰富互联网应用开发(Rich Internet Applications)有浓厚兴趣；
6、对用户体验、交互操作流程、及用户需求有深入理解；
7、极强的团队协作精神、优秀的学习能力与创新能力。三、工资 4000-5000元/月
发布时间：20xx-04-27
来源网站：智联招聘网
北京赛嘉城电子商务有限公司
岗位职责：
1、负责将美工制作的页面效果做成标准的HTML网页原型；
2、负责开放平台前端静态页面JS交互效果编写及修改；
3、负责开放平台WEB前端（动态页面）最终交互效果的实现及修改；
4、负责协调技术开发人员进行页面与后台程序衔接。
5、优化网站前端性能；
6、优化用户界面易用性
能力要求：
1．大专以上学历，至少2年web前台开发工作经验
2．精通HTML/XHTM及JavaScript，熟悉W3C标准，熟练应用开源JavaScript库(如JQuery）；
3．可以快速、简练的将网页设计图，使用DIV+CSS编写成静态页面，能够使用JS手工编写前端效果，能够使用AJAX方法实现前端效果，熟悉相关规范,有丰富的跨浏览器开发经验；
4．熟悉前端页面优化，具有高性能网站的构建经验者优先；
5．具有优秀的学习能力与创新能力，并能够承担较强的工作压力；
6．对用户体验与功能易用性有较为深刻的理解
7．良好的团队合作意识和积极的工作态度；
8．有PHP开发经验者优先；
发布时间：20xx-03-30
来源网站：前程无忧 深圳市炽昂科技有限公司
职位描述
负责根据UI效果图以DIV+CSS布局的方式切割成标准的HTML页面,不断优化代码并保持良好主流浏览器兼容性
负责配合后端开发人员实现界面功能和效果
职位要求
1、计算机相关专业,2年以上相关工作经验；
2、精通HTML、DIV、CSS，熟悉页面框架和布局,对WEB标准和标签语义有深入的理解
3、精通Javascript,JSON,AJAX等技术,熟练运用常见JS框架，如JQuery、Prototype、Extjs等
4、能够使用JavaScript进行通用组件、类库、框架编写
5、具有大型互联网行业工作经验者优先考虑
其他要求：
1、具有良好的表达和沟通能力，思路清晰，较强的责任心、团队精神以及动手能力
2、善于学习，对WEB前端技术有深厚的兴趣和研究探索精神，并且愿意与团队成员分享相关经验
3、个性开朗,在面对压力时能够保持良好的心态
发布时间：20xx-03-29 绿盟科技
职位工作内容简要综述：前端页面开发
具体工作内容与职责：1、负责产品界面的前端开发，配合开发人员实现最终产品界面，并监管界面开发质量；2、依据设计稿，高质量完成HTML页面原型的制作；3、负责维护和更新界面设计标准和规范，并推广标准和规范的实施；4、交互控件的设计与开发，UI编码规范的制定与推广；5、响应公司网站相关的页面制作与维护；
工作经验和技能要求：1、本科以上学历，2年以上前端开发经验；2、精通HTML、CSS、Javascript,熟练掌握Photoshop、Dreamweaver等软件，完成页面制作，实现界面中的交互功能，并兼容主流浏览器，会Actionscript者优先；3、熟悉web标准，对表现与数据分离，HTML语义化等有深刻理解；4、了解PHP或其他服务器编程语言，能协助后台开发人员完成最终产品界面；5、具备良好的团队合作精神和积极主动的沟通意识；6、对web技术钻研有强烈兴趣，有良好的学历能力和强烈的进取心。
发布时间：20xx-03-30
来源网站：前程无忧
大洋网
职位描述：本职位隶属于技术中心研发部，负责Web系统和功能的前端开发、维护。
职位要求：1、本科以上学历，计算机或相关专业；2、熟悉各种Web前端技术，包括
XHTML/XML/CSS/Javascript/ActionScript等；3、深刻理解Web标准，对可用性、可访问性等相关知识有实际的了解和实践经验；4、有基于Ajax或Flash的RIA应用开发经验；5、沟通能力强，善于同多人协作完成任务；6、抗压能力强，可应对较大的工作压力；7、有后台语言（如Java/PHP/C++）经验者优先；8、有框架使用、subversion、开发流程管理等经验者优先。
发布时间：20xx-03-30
来源网站：前程无忧
广州海然数码科技有限公司
岗位职责
1、技术人员职位，在上级的领导和监督下定期完成量化的工作要求；
2、能独立处理和解决所负责的任务；
3、根据开发进度和任务分配，完成相应模块软件的设计、开发、编程任务；
4、进行程序单元、功能的测试，查出软件存在的缺陷并保证其质量；
5、进行编制项目文档和质量记录的工作；
6、维护软件使之保持可用性和稳定性。任职资格
1、计算机相关专业背景，专科以上学历；
2、熟悉数据库编程，精通数据库应用（SQLSERVER为主)；
3、熟练掌握.NETFramework（C#）或者ASP开发，能开发B/S构架的应用程序；
4、精通Javascript、动态网页、AJAX、HTML、CSS等WEB技术
5、熟悉VB或者ASP语法
6、能独立完成用户交换界面的设计、有一定的审美和网页设计能力的优先考虑
7、做事严谨踏实，责任心强，条理清楚，善于学习总结，有良好的团队合作精神和沟通协调能力。 发布时间：20xx-03-30
来源网站：珠江人才热线 广州跨际网络科技有限公司
c# vb asp.net web开发 电子商务软件工程师
岗位职责描述：
1、独立进行电子商务网站产品设计；
2、能管理外包项目以及独立高质量的完成开发任务；
任职资格描述：
1、计算机、信息管理或通信等相关专业本科及以上学历，。
2、精通C#开发语言；
3、熟悉.NET Framework 架构体系，能够非常熟练使用.NET平台进行编程：C#(Winform)，ASP.NET，JS，XML等）。能够编写高质量的代码；熟悉面向对象的思想，有很好的业务分析设计和业务抽象能力；
4、有非常熟练的数据库（SQL Server或 Mysql等）应用经验，对数据结构有清楚的认识，有一定的数据库设计能力；
5、有三年以上的开发经验，完整参与两个以上项目的开发 ；
6、有良好的沟通、理解能力，客户导向意识 ；
7、有良好的自我学习能力、自我管理能力和团队合作能力；
8、有财务软件开发经验的优先考虑。
一、岗位职责：
1、精通ASP.NET(C#)开发，熟悉WebService、AJAX；
2、熟悉三层架构,熟悉OOP设计编程理念；
3、熟悉DIV+CSS WEB标准化；
4、精通SQL语言，熟练使用SQL Server 20xx，熟悉存储过程开发；
二、职位要求：
1、大专及以上学历，22-35岁，二年以上网站开发经验，有独立建站或电子商务类网站建设经验者优先；
2、 积极上进，善于学习，具备良好的分析、解决问题的能力；
3、有责任心，工作效率高，有良好交流沟通能力和团队协作意识；
注：在简历中请提供具体开发网站网址及自己负责的功能。
三、符合以下条件者从优：
有门户级大型网站开发经验者。
发布时间：20xx-03-28
来源网站：智联招聘网