web设计基础报告-个人网页设计和实现
郑州轻工业学院课程设计任务书题目个人网站的设计与实现院系XXXXXXXXXX专业班级XXXXXXXXXX学号XXXXXXXXXX姓名XXX主要内容：利用所学内容，设计个人网站基本要求：本系统制作一个个人网站，要求个人网站主题设计思想明确、思路清晰、颜色选择恰当、布局合理；多媒体（图像、音乐、滚动字幕）运用适当；Flash、框架运用合适；适当使用样式页（CSS）等。主要参考资料等：Web设计基础李开荣高等教育出版社2008网站规划与网页设计张兵义电子工业出版社2008Web编程技术历小军机械工业出版社2009完成期限：一周指导教师签名：课程负责人签名：2010年5月日1目录、引言1.1课题的背景1.2可行性研究、需求分析2.1系统概述：错误!未定义书签。错误!未定义书签错误!未定义书签错误!未定义书签错误!未定义书签2.2功能要求：1三、总体设计错误!未定义书签。3.1功能设计3.2界面设计四详细设计与实现错误!未定义书签。24六、结语一、引言1.1课题的背景经过本学期对web设计基础这门课程的学习，对web的设计以及相关代码的使用有了深入的了解，在学期末制作主题为个人主页的网页，对其设计并实现。1.2可行性研究经过考虑对制作工具的筛选，决定用Dreamweaver做个人网页，Photoshop为辅助工具，设计和制作图片、页面及图标等。本网站是以静态网页为基础，以Dreamweaver为制作软件、以Photoshop为设计软件而成的。通过这个学期对网页制作代码相关的学习以及之前对这些软件的了解，制作出相对简单的个人网页，展示自己相关的一些东西；本网站内容充实，在主页的设计上运用了模板，框架等。分页面上运用了导航条。插入了动态图片以及视频等给网增加了美观度，在首页的设计上本着简单易懂的原则，用户只要点击链接就能看到自己想看到的连接内容。网站的首页设置了背景音乐，使访问者在浏览的同时还能欣赏到悠扬的旋律。二、需求分析2.1系统概述一个具有个性的个人网站，是让别人对你进行了解，与别人沟通的更好途径，本文研究的是这次个人网站的设计与实现。能让人通过本网站可以清晰地了解到我的一些信息。运用WindowsXP+Dreamweaver8+PS的网站设计制作环境，设计出神秘、活力的暗色与绚丽特效的网页特色。2.2功能要求实现链接、滚动字幕或图片、插入音频、视频等插件的功能；三、总体设计运用Dreamweaver的框架功能；围绕关于我自己的一些相关信息进行分类，实现分类的链接进行制作；并且要注重网页的一体化，美感，还有色彩的搭配，音乐的选取等；3.1功能设计：利用框架（选取了左右下的框架结构）设置基本模样。左边框架作为导航栏，下边的部分作为滚动图片栏；右上方一大部分作为各个子网页的浏览区；在导航栏插入了音乐，以便放入的音乐不会随着链接的进入而消失，增添了网页的趣味性；导航栏包括共：我的档案，我的日志，我的班级，我的宠物，视频欣赏五项，分别链接到各个子页面；在导航区的最下方还设置有返回欢迎页面的链接；并且设置导航区的背景、颜色、插入动态图片等。3.2界面设计：本网页页面风格为暗色系，以黑色为主色其他色系进行搭配进行制作。index_myweb:主模块（右上层模块）添加制作的动态欢迎图片：欢迎来到小小寒的主页（动态）；左侧导航栏目分布了各个子页面的链接，点击即可进入各个子页面；右下方的模块放置我的图片，并且运动代码实现滚动功能；由导航栏分别可以进入以下子页面：我的档案：主要介绍了我的一些基本情况，爱好及性格特征等等；我的日志：选了一篇自己喜欢的写过的文章供大家阅读；我的宠物：展示了我的宠物小狗贝贝的一些东西，我养狗的一些感受等；我的班级：介绍了我的班级的基本情况；视频欣赏：摘选了一个搞笑flash给大家娱乐；以上五个分页面风格与整体保持一致，庄重而不失色彩；四、详细设计与实现1、创建网页页面：（1）新建站点：率可勲TO詰点国窗口CW）帮MB如图建立新站点，设置好各个选项，一般静态网页不用连接到网络，设置不用做太多修改，只需要设定好名称及文件夹位置即可。（2）新建网页:最近项目)7-120-10422?页.html)07-120-10422/s航.html)1Q422findexhtiril.html12010422的医片.htmlnn4仃用am斗匸斤於力盘Ih+ei创建新顶目dHTMLsColdFusiondPHPsASPVBScript,2口hl匚丁从范例创建。號样式克框架集页面设计（CSS）&入门页面丙序in：丄-1FShThf；如图，选择创建新项目的HTML，或者选择模板建立；创建好六个页面，分别保存名称为：index,我的档案，我的日志，我的班级，我的宠物，视频欣赏；2、打开页面，选择布局模式，使用左右下模板，保存主页面标题为index.html,标题改为“我的主页”试运行，保存两个框架；在左层模块添加插件音乐，并缩小插件；（如图1）设置导航栏，为每个分类的文字添加链接，将文字添加链接到“我的档案”等各个子分页，并且分页链接目标选择mainframe（如图2）：图1：Ill我的档案我的日志材心KL駄小直乐:副帼|宦船|曲翊鏗图2：司样式STVI.H'1T.宾良BI亘圉壬亘铤接导航.html天小90*慷素衣：Tljr|!=目标rtainFran”在mainframe中插入自己在Photoshop中制作的动态欢迎图片，添加到layerl中可以调试位置；在下方框架中插入各种照片，运动滚动效果的代码实现其功能；为了美化在各个模块中背景插入了相框，条纹等动态闪动图片；让视觉效果更震撼；图一页面代码如下：vhtml>vhead>vtitle>mywebv/title>vstyletype="text/css"><!-bodybackground-color:#000000;background-image:url(image/20089147504764561.gif);body,td,thcolor:#FF0000;.STYLE1font-size:24px;font-family:"幼圆"#Layer1position:absolute;width:148px;height:633px;z-index:1;left:1px;top:20px;.STYLE2font-size:24px;font-family:"幼圆"color:#FF0000;#Layer2position:absolute;width:35px;height:18px;z-index:1;left:62px;top:510px;a:linktext-decoration:none;color:#66FFFF;a:visitedtext-decoration:none;color:#F4F4F4;ab-over(rexrdecorarioIKnone;color#F4F4F4八a-acrive(rexrdecorarioIKnone;color#66FFFF八IVQsrylex'headvAbodyv<palignH-cenrer-classL-STYLEl-vc A'pvAdividL-Layer2-vspanclass"-STYLE1-vembedsrcL-music矗灌-漆-®s.mp3=wi&hL-16=heighHo6-x、embedvQspanx'divv<p巴ignH-center-classL-STYLEl-xahrefH-s>.html=targetH-mainFrame->isB>Qax'pv<palignH-cenrer-classL-STYLEl-vc A'pv<palignH-cenrer-classL-STYLE2-xahreIF-_sBM.html-rargeH-mainFrame->lsBMA-&A一q><palignH-cenrer-classL-STYLEl-vc A'pv<palignH-cenrer-classL-STYLEl-xahreIF-s.html=argeH-mainFrame->lsQax'pv<palignH-cenrer-classL-STYLEl-vc A'pv<palignH-cenrer-classL-STYLEl-xahrelr-s.html=argeH-mainFrame->lsQax'pv<palignH-cenrer-classL-STYLEl-vc A'pv<palignL-cenrer-classL-STYLEl-xahreIF-s.html=argeH-mainFrame->wBQax'pv1<p> </p><p> <imgsrc="image/13294029.gif"width="80"height="130"/></p><palign="center">丁<ahref="index_myweb.html"target="mainFram">fe回主页</a>v/p></body></html><htmlxmlns="http:/www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title><styletype="text/css"><!-#Layer2position:absolute;width:200px;height:115px;z-index:1;bodybackground-color:#000000;body,td,thcolor:#3300CC;#Layer1position:absolute;width:131px;height:126px;z-index:1;left:945px;top:5px;#Layer3position:absolute;width:1097px;height:115px;z-index:2;left:12px;top:57px;#Layer4position:absolute;width:200px;height:115px;z-index:1;left:73px;top:36px;-></style></head><body><divid="Layer3"><imgsrc="image/11.gif"width="1078"height="407"/><divid="Layer4"><imgsrc="image/welcome.gif"width="923"height="338"/></div></div></body></html><htmlxmlns="http:/www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>vtitle>无标题文档</title<styletype="text/css"><!-bodybackground-color:#000000;background-image:url(image/20089147504764561.gif);body,td,thcolor:#FF0000;.STYLE1font-size:24px;font-family:"幼圆"#Layer1position:absolute;width:148px;height:633px;z-index:1;left:1px;top:20px;.STYLE2font-size:24px;font-family:"幼圆"color:#FF0000;#Layer2position:absolute;width:35px;height:18px;z-index:1;left:62px;top:510px;a:linktext-decoration:none;color:#66FFFF;a:visitedtext-decoration:none;color:#F4F4F4;a:hovertext-decoration:none;color:#F4F4F4;a:activetext-decoration:none;color:#66FFFF;-></style></head><body><palign="center"class="STYLE1"> </p><divid="Layer2"><spanclass="STYLE1">vembedsrc="music/英格玛-谜-慢嗨.mp3"width="16"height="8">v/embed></span></div><palign="center"class="STYLE1">vahref='我的资料.html"上&昭6上="皿&込卩胆皿6">我的档案</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE2"><ahref='我的日志.html"上&昭6上="皿&込卩胆皿6">我的日志</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLEl">vahref='我的班级.html"上&昭6上="皿&込卩胆皿6">我的班级</a></p><palign="center"class="STYLEl"> </p><palign="center"class="STYLE1"><ahref="我的宠物.html"上&昭6上="皿&込卩胆皿6">我的宠物</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE1">vahref='我的朋友.html"target="mainFrame">W频欣赏</a></p><p> </p><p> <imgsrc="image/13294029.gif"width="80"height="130"/></p><palign="center">丁<ahref="index_myweb.html"target="mainFram">回主页</a>v/p></body></html><htmlxmlns="http:/www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>小小寒的主页</title><styletype="text/css"><!-#Layer1position:absolute;width:1127px;height:147px;z-index:1;top:9px;left:10px;#Layer2position:absolute;width:1108px;height:163px;z-index:1;top:4px;left:7px;bodybackground-color:#000000;-></style></head><body><DIVid=demoleftstyle="OVERFLOW:hidden;WIDTH:1100px;COLOR:#ffffff"><TABLEborder=0cellPadding=0cellSpacing=0cellspace="0"><TBODY><TR><TDid=demo1leftvAlign=topalign=middle><TABLEcellSpacing=0cellPadding=2border=0><TBODY><TRalign=middle><TD><divid="Layer2"><imgsrc="image/121444306241.gif"width="1100"height="159"/></div><imgsrc="image/SP_A1431.jpg"width="143"height="115"/></TD><TD><imgsrc="image/SP_A2839.jpg"width="153"height="115"/></TD><TD><imgsrc="image/SP_A3198.jpg"width="162"height="116"/></TD><TD><imgsrc="image/SP_A3517.jpg"width="156"height="117"/></TD><TD><imgsrc="image/SP_A28621.jpg"width="165"height="119"/></TD><TD><imgsrc="image/xiangxin11.jpg"width="169"height="123"/></TD>vTDximgsrc="image/图像007(2)副本.jpg"width="99"height="124"/x/TD></TR></TBODY></TABLE></TD><TDid=demo2leftvAlign=top></TD></TR></TBODY></TABLE></DIV><SCRIPT>varspeed=8速度数值越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值demo2left.innerHTML=demo1left.innerHTMLfunctionMarquee()if(demo21eft.offsetWidth-demoleft.scrollLeftv=0)/其实demo.scrollLeft是有最大值的，和demo0.width,引用的图片的width有关系。demo过了一半(每半内容一样的)，重新开始循环demoleft.scrollLeft-=demo1left.offsetWidthelsedemoleft.scrollLeft+不断的增加，相当于父容器的滚动条不断是缩小;但由于OVERFLOW:hidden;(滚动条不可见)varMyMarleft=setInterval(Marquee,speed)demoleft.onmouseover=function()clearInterval(MyMarleft)demoleft.onmouseout=function()MyMarleft=setInterval(Marquee,speed)</SCRIPT></BODY></HTML>3、在Photoshop中设计自己的子页面效果：(1) 找到自己喜爱的图片最为背景，定义图片添加到填充背景图案中;(2) 新建文件我的导航，填充背景，加入导航字，设置字体，椭圆边框;(3) 找到自己的一张照片抠出需要的部分粘贴在我的导航中，各个字体设置好，页面调整到最佳，使用切片工具把需要添加链接的部分切好;保存为网页模式;以我的档案为例如图：Eg寒专业班级学号MtQ74Iff国际孰肓学瞳200712010422技很臺欢写怔逼欢三召即学'和宕哥益黛实和纯綽：畫欢闘吒'利峯欢餉冃耳彊，任一个曲驚也的下壬，或音电街灯的睨上“我胆信社界上蔺擾多趁呼的爭榊所以我忙雀尿菇一颗乐观的世去对1口用吝境现眞丽。这前是瑶了*仅此帀已，代码：vhtml">vhead>vtitle>无标题文档v/title>vstyletype="text/css"><!-bodybackground-image:url(image/18282611.jpg);background-color:#000000;background-repeat:no-repeat;.STYLE1color:#FF0000;font-size:24px;#Layer1position:absolute;width:187px;height:442px;z-index:1;left:659px;top:527px;.STYLE2color:#FF0000-></style></head><body><p> </p><p> </p><p> </p><p> </p><p> </p></body></html>其他各个子页面效果如下我的日志：1册蛀1!层-那牡長福的人几乎阳丙的汽学生弼会何-捽的国疏-人赴的師幕-人也的渐远'人超的黑BS-有刖的聊郢了'専边经历的几乎所莉的一也嵇显不魅的于最辑电地朗的胖阳-可理矩千人现捷这禅-那兄逢说匣不皐别人趟变了'斶堤自己变了”于屋所西人甌塑了当闵己覘别人自莉的时檢自已芮泓苟扫蚯0E，严自E说苕不嵋杲苗行为的时俣誉耳出臭出于正梵直述爰抵即¥当自已说和身边的人再世不皤烝论的时试-星盲的总膜珏？斷齊的一也-翹捉因为向倉*人越眾趙白钱茸古黒白已的前埸白已的耒沫自巴的科晴白已的埼蔺舉恼在这算中所苗别人割毘看观音-所毋氓前的址目的朋空只星洽自己的适蛊“只不过偃聿担同迤旳不和协在一超m悵童得也们帝髙-哲思白已咿'国則自已短红煙成九即中的别A06?诂择的姑果呑於古竽出东西¥绷的赴灵犠咼媪內君革到一蚂海涼'自己的变庾鄙尢慰弼识却妊时时啣删在煙歳鸟边的人連怨社会=彖不尙融为耙样的人'于思裁允戢'讎民偿了阿谀班承、蔗鰹了隼戒也鶴序世的率怖我只帶考宦溺御热留-对腐建的遐頌-对工作的热胸-群黑反的诚民'对廉怕的坚押！班不卷#边的人那蹩戢社E的坞乳不韜幅iftifO魁趟陶打-尼纱"车睜16将常蒋的生甜銭割且陳平疔捷'，愴直皑宜诫思前晡舞-怛徭向己也许也革農从舸的自己-誌後卄红权利長帝望置？向社会倨头uWfBBffi的啦押fttta诗时佶理自己的灵锻陀？KS題不躍握谭屈灵尊特閒不臬悠祖T不思报'不塑也羞匿不疑洁盘“瑕空坚菇穀怦曙持白己的値恋丸连5幻-菊和迴田和我城術型用的人孤甘一持的人'述罡艺苛时富'.原刷我坪輻去改喪，跨过览瓊人主的密、曲伞人的自駐我劉了或许声的会荷幷产主爻的那齐。!代码：vhtml>vhead><title>无标题文档v/titlevstyletype="text/css"><!-bodybackground-image:url(image/14563.jpg);background-color:#000000;background-repeat:no-repeat;-></style></head><body></body></html>1我的班级:淞酵盹由心舸疇诸輒的学輕!葫醐审瘢韻剣蛆昶邮滞训附.也齬-酣礎韶詳电魏SM巒他觎歸加雀序阳輝視！7百口瓯鞍环胡径E业举耳灯用-田尿M爭学阳田如旺TMAftr凯鹹鞘吒;4豹、ftfcfti.曲洁友瘵代码:</body></html>1vhtml>vhead>vtitle>无标题文档</titlevstyletype="text/css"><!-bodybackground-image:url(image/1245.jpg);background-repeat:no-repeat;background-color:#000000;-></style></head><body>我的宠物:这个无ttol'无小宸於就誓我射贝贝购!齟它领回来的时喉才两个口，刚来的时喂还罠为养不迢嚨病加皿的谁W我这么伟丈'这幺厉窖-送厲了它'匸力拎刘观在了1现柱K茁屋P丈G壮呱I它有31爱歯时侯有时&前时侯<官时侯不乖、刘处部餐'可味脚C袜丫，上厠而不过吧养了-征'1什年豔幺处竝飙筒了'则!諭豁成了我峑舌fgm世谛f任F宦£。翌丢了fg（_）-!代码:vhtml>vhead>vtitle>无标题文档</titlevstyletype="text/css"><!-bodybackground-image:url(image/beibeill.jpg);background-color:#000000;background-repeat:no-repeat;-></style></head><body>视频欣赏:代码:vhtml>vhead>vtitle>无标题文档v/title>vtitle>无标题文档</title>vstyletype="text/css"><!-#Layer2position:absolute;width:200px;height:115px;z-index:l;bodybackground-color:#000000;background-image:url(image/1G205064934.jpg);background-repeat:no-repeat;</head>1body,td,thcolor:#3300CC;#Layer1position:absolute;width:131px;height:126px;z-index:1;left:945px;top:5px;#Layer3position:absolute;width:776px;height:384px;z-index:2;left:194px;top:13px;#Layer4position:absolute;width:416px;height:328px;z-index:1;left:65px;top:105px;-></style><body><divid="Layer3"><divid="Layer4"><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="<paramname="movie"value="music/a.swf"/><paramname="quality"value="high"/><paramname="PLAY"value="ture"/><paramname="LOOP"value="false"/><embedsrc="music/a.swf"width="410"height="322"loop="false"quality="high"pluginspage="type="application/x-shockwave-flash"play="false"></embed></object></div></div></body></html>五、结语通过本次网页的制作过程，我学习到了很多实用的东西，也充分了解了Dreamweaver这个软件的强大，对学习了一个学期的课程也有了更深入的解，由于有了多媒体和网页设计课程作基础，因此在制作网页的过程中诸如制作首页，页面链接等步骤进行的还是比较顺利的，经过最近每天晚上的辛苦努力，终于完成了我的主页的制作。在这段时间里，一方面，我尝试着将课本上所学的知识运用到制作中，另一方面，我又时刻在网上学习自己需要的知识，学习到了很多有用的东西，在这过程中，我对网页的设计上有了更深的体会，对于这一领域，学到的知识多了，反而发现自己所了解的少了。遗憾的是，自己不会做动态网页，否则我相信会更成功，庆幸的是，整个设计过程都很顺利，错误也修改成功了不少，也可以安慰一下自己了。最终看到了自己亲手做出来的网站，心里有了收获般的欣喜，这让我从心底里感谢这次实践的机会，感谢老师给了我们一次自己动手的机会，在设计的过程中，同学们互相讨论，这也增强了同学之间的交流。虽然网页设计完成了，但欠缺之处尚存，希望可以得到老师的指点，使设计更加完善。1
个人主页