网站制作报告Word文档下载推荐.docx
《网站制作报告Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《网站制作报告Word文档下载推荐.docx（23页珍藏版）》请在冰点文库上搜索。
主页制作的基本条件有：
硬件：
一台电脑（64MB以上内存，当然越大越好啦）；
软件：
HTML编辑软件：
常用的有Frontpage、Hotdog等，我们重点学习的Dreamweaver；
图像处理软件：
常用的有Photoshop、flash、Fireworks等；
文件上传软件：
常用的有Cuteftp、WSftp等。
3.构建站点框架。
打开Dremweaver后步便是新建站点
4设计主页及二级页面。
5实现网页间的链接
链接的过程其实很简单，主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。
6向静太网页插入动态效果
7前台：
现阶段前台页面全部以静态jsp页面显示；
制作首页时将页面分为三部分，top.jsp、bottom.jsp、index.jsp,方便top.jsp、bottom.jsp将在其它前台页面可以重复使用，且保证了前台页面的统一风格；
8后台：
实现用户的注册与登录。
需注意用户的注册密码要进行二次验证，并给与用户提示。
我们项目的目标
该项目是建立一个以销售鲜花为主的电子
商务网站。
众所周知，随着网络技术的发展，电
子商务逐渐走进人们生活，成为其中必不可少的
一部分，鲜花的网购也逐渐被人们接受。
我们的
目的是建立一个专业、简洁、高效的鲜花销售网
站，为消费者提供给为便捷的服务。
我们网站的各页面的功能如下：
首页：
综合介绍本网站信息
鲜花：
描述本网站鲜花基本信息
礼品：
描述本网站礼品基本信息
后台：
实现用户的注册与登录会员头像、照片的上传
会员：
会员明细、会员头像、照片的上传
留言：
介绍本网站的相关信息、售后等等
联系我们：
本公司的QQ、邮箱、联系电话
我所做的模块——首页，登录注册页面以及后期网站整合和风格统一
（1）、登陆页面（由本人和共同完成）：
功能：
登陆页面，可以实现购买、上传照片或文字的功能。
登录出错会对用户提醒，登录成功会自动跳转到首页。
登陆页面的源代码：
<
html>
head>
title>
MyJSP'
index.jsp'
startingpage<
/title>
metahttp-equiv="
pragma"
content="
no-cache"
>
cache-control"
expires"
0"
metahttp-equiv="
keywords"
content="
keyword1,keyword2,keyword3"
description"
Thisismypage"
/head>
body>
hrsize="
10"
color="
red"
center>
fontcolor="
#33FF00"
size="
+7"
face="
楷体"
欢迎登录本网站!
!
<
/font>
/center>
formname="
form1"
method="
post"
action="
log_chek.jsp"
tablewidth="
631"
height="
319"
align="
center"
tr>
tdwidth="
270"
divalign="
fontsize="
6"
strong>
用户名<
/strong>
：
/div>
/td>
345"
inputname="
user_name"
type="
text"
id="
/tr>
td>
密码<
inputname="
user_pwd"
type="
password"
inputtype="
submit"
name="
Submit"
value="
提交"
reset"
Submit2"
重置"
ahref="
register.jsp"
（还没注册？
）<
/a>
/table>
/form>
/body>
/html>
（2）、注册（由本人和杨洸共同完成）：
成为我们会员的第一步，注册失败会对用户进行提醒并重新注册。
注册成功后，会将用户信息写入数据库并跳转到登陆界面。
（输入密码时提醒密码设置不得少于6位）
注册页面的源代码：
scriptlanguage="
javascript"
functioncheck（）{varf=document.form1;
if（f.user_name.value=="
"
）{
alert（'
账户名不可以为空!
'
）;
f.user_name.focus（）;
returnfalse;
}
if（f.user_pwd.value=="
||f.user_pwd.value.length<
6）
{
密码至少6位!
f.user_pwd.focus（）;
returntrue;
/script>
#FF0033"
欢迎注册本网站!
formname="
method="
reg_chek.jsp"
282"
102"
+5"
账户<
onBlur="
check（）;
密码<
（3）首页：
功能：
对网站的整体介绍和广告以及通向各级子网页的链接。
实现过程：
本次的首页是由本人独立完成，6天之中一共做了3个首页的模板。
我的第一个首页作出来之后并不好看，没有吸引人的特点，图片没有和网站整体风格相容。
于是，我又设计了第二个首页模板，此次使用框架建设首页，主要分为头部，左侧导航栏以及主题。
首页分为三个窗口。
第一个位本网站的logo，和广告。
第二个为导航栏，为各个连接。
第三个为主窗口，显示各个子网页。
但是出来的效果并不漂亮，没有鲜花网应有的大方，典雅反而有点呆板和严肃。
有了前两次的经验，第三个网页我采用了表格来制作。
同时整体网页用白色做底色来突出鲜花的魅力。
首页分为三个部分，头部，中间，尾部。
头部：
分为三层，第一层为用户区，用户可以在此登录，查询常见问题，配送范围，付款方式等等。
第二层为本网站的logo和宣传口号。
第三层为通向各级子页面的链接。
本网站主要有鲜花区，礼品区，会员区三大块。
中间：
主要是大幅的活动广告图片和促销图片。
之后是各种各样的新品花朵的展示。
每一个展示图片都是连接，可以直接连接到具体的商品。
尾部：
是我们网站的服务宗旨，承诺及合作伙伴等等。
网站的头部和尾部位共用部分，方便在后期的整合上统一用相同的头部和尾部从而实现网站风格的一致。
我们首页内容精彩丰富，简洁明快，语言风趣，通俗易懂。
页面可爱清爽。
首页主要是导航作用。
首页制作时，时刻考虑着网页的基本原则：
统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的；
连贯，页面之间关系连贯，统成一体；
每版内容都自成一体，颜色各异，便于浏览；
整个网页有动有静，颜色不同，形成对比，不呆板，富有生气；
颜色各异，但又不同之中又相同，浑然一体。
而且制作过程中，不忘以下原则：
简洁实用:
这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。
使用方便:
同个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；
页面用色协调，布局符合形式美的要求:
布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。
当然雅俗共赏是人人都追求的。
利用我们所学的框架集，制作更完美的页面。
将动态网页与静态网页结合起来
再后，调试过程，好多次本来在dream里好好的，把字调的好好的，位置很对，可在浏览器里御览就出毛病了，不是靠上了，就是靠下了，很不老实，经过再三调试，整理，加了好多表格，终于满意了，很是麻烦，想请问老师，为什么会出现这种情况啊，还有怎么解决啊，不用这么反复调整的办法，还有什么好办法啊？
还有，在最超链接过程中，明明在页面属性里设置的是超链接的文字是原色，点击链接后也是原色，可一链接上就变色了，想了老半天，也做了很多研究，实验，终于知道怎么回事了，原来应该对文字所在的单元格整体做链接，而不是只选中文字做链接。
还有，这次的网站大部分用的是表格，层用的很少，因为它太灵活了，不好控制，用的很少。
再后，是网页的上传与发布，用ftp将制作好的网站上传
制作过程中，才发现，原来自己懂的太少了，好多不知道的地方，才赶紧查书，开始的时候只是会建立模版，可不会应用，操作，可这样要修改模版可就麻烦了，要一个网页一个的修改，于是赶紧上网学习相关内容，阅览书籍，最后才知道文件这有个资源，点击
进入资源面板，点击到数第二个的模版，选项，所有模版就都显示了，点击资源面板左下角的应用命令，好了，这个模版就应用到你建立的网页中去了。
这只是在制作过程中出现的问题之一，其它问题也是类似相同。
现在想想，自己所会的东西太少了，现在做的网站只是一些简单的网站，看到了一些知名的网站开发出的网页，不仅栏目内容丰富，信息量大，而且页面图文并茂，五彩缤纷，使得网民赞叹不已，流连忘返。
以我们的经验，当前的软件的功能日趋复杂，不学到一定的深度和广度是难以在实际工作中应付自如的。
因此反映出学习的还不够，缺点疏漏。
需在加以刻苦钻研及学习，不断开拓视野，增强自己的实习操作技能，为以后能做出出色的网页而努力。
同学告诉我，要做好网页，一定要学从C++,JAVA,php，asp，数据库。
以后要学的实在是太多了，而且我也很喜欢这方面，在以后的日子里，会努力填充自己，丰富自己的。
希望以后有不懂的地方，老师能多多指点。
首页代码：
%@pagelanguage="
java"
import="
java.util.*"
pageEncoding="
gbk"
%>
%
Stringpath=request.getContextPath（）;
StringbasePath=request.getScheme（）+"
:
//"
+request.getServerName（）+"
+request.getServerPort（）+path+"
/"
;
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
basehref="
%=basePath%>
--
linkrel="
stylesheet"
text/css"
href="
styles.css"
-->
styletype="
#floater{
position:
absolute;
left:
9px;
top:
146;
width:
125;
visibility:
visible;
z-index:
10;
}<
/style>
body>
Stringname=（String）session.getAttribute（"
user"
%>
欢迎
<
4"
%=name%>
登录本网站!
divID="
floater"
style="
right:
1px;
top:
500px"
palign="
imgsrc="
image/qet.gif"
WIDTH="
100"
HEIGHT="
br>
#FF8040"
/p>
scriptLANGUAGE="
JavaScript"
self.onError=null;
currentX=currentY=0;
whichIt=null;
lastScrollX=0;
lastScrollY=0;
NS=（document.layers）?
1:
0;
IE=（document.all）?
1:
--STALKERCODE-->
functionheartBeat（）{
if（IE）{diffY=document.body.scrollTop;
diffX=document.body.scrollLeft;
}
if（NS）{diffY=self.pageYOffset;
diffX=self.pageXOffset;
if（diffY!
=lastScrollY）{
percent=.1*（diffY-lastScrollY）;
if（percent>
0）percent=Math.ceil（percent）;
elsepercent=Math.floor（percent）;
if（IE）document.all.floater.style.pixelTop+=percent;
if（NS）document.floater.top+=percent;
lastScrollY=lastScrollY+percent;
if（diffX!
=lastScrollX）{
percent=.1*（diffX-lastScrollX）;
if（IE）document.all.floater.style.pixelLeft+=percent;
if（NS）document.floater.left+=percent;
lastScrollX=lastScrollX+percent;
--/STALKERCODE-->
--DRAGDROPCODE-->
functioncheckFocus（x,y）{
stalkerx=document.floater.pageX;
stalkery=document.floater.pageY;
stalkerwidth=document.floater.clip.width;
stalkerheight=document.floater.clip.height;
if（（x>
stalkerx&
&
x<
（stalkerx+stalkerwidth））&
（y>
stalkery&
y<
（stalkery+stalkerheight）））returntrue;
elsereturnfalse;
functiongrabIt（e）{
if（IE）{
whichIt=event.srcElement;
while（whichIt.id.indexOf（"
）==-1）{
whichIt=whichIt.parentElement;
if（whichIt==null）{returntrue;
whichIt.style.pixelLeft=whichIt.offsetLeft;
whichIt.style.pixelTop=whichIt.offsetTop;
currentX=（event.clientX+document.body.scrollLeft）;
currentY=（event.clientY+document.body.scrollTop）;
}else{
window.captureEvents（Event.MOUSEMOVE）;
if（checkFocus（e.pageX,e.pageY））{
whichIt=document.floater;
StalkerTouchedX=e.pageX-document.floater.pageX;
StalkerTouchedY=e.pageY-document.floater.pageY;
}
functionmoveIt（e）{
if（whichIt==null）{returnfalse;
newX=（event.clientX+document.body.scrollLeft）;
newY=（event.clientY+document.body.scrollTop）;
distanceX=（newX-currentX）;
distanceY=（newY-currentY）;
currentX=newX;
currentY=newY;
whichIt.style.pixelLeft+=distan
升级会员 