ewb设计基础报告个人网页设计和实现

上传人：1*** IP属地：河北上传时间：2023-07-06 格式：DOC 页数：26 大小：1002KB 积分：15 举报 版权申诉

已阅读5页，还剩21页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1郑州轻工业学院课程设计任务书题目个人网站的设计与实现主要内容：利用所学内容，设计个人网站基本要求：本系统制作一个个人网站，要求个人网站主题设计思想明确、思路清晰、颜色选择恰当、布局合理；多媒体（图像、音乐、滚动字幕）运用适当；Flash、框架运用合适；适当使用样式页（CSS）等。主要参考资料等：《Web设计基础》李开荣高等教育出版社2008《网站规划与网页设计》张兵义电子工业出版社2008《Web编程技术》历小军机械工业出版社2009完成期限：一周指导教师签名：课程负责人签名：2010年5月日目录TOC\o"1-2"\h\z\u一、引言 11.1课题的背景 11.2可行性研究 1二、需求分析 12.1系统概述： 12.2功能要求： 1三、总体设计 23.1功能设计 33.2界面设计 4四．详细设计与实现 5六、结语 24个人网页设计和实现引言课题的背景经过本学期对web设计基础这门课程的学习，对web的设计以及相关代码的使用有了深入的了解，在学期末制作主题为个人主页的网页，对其设计并实现。可行性研究经过考虑对制作工具的筛选，决定用Dreamweaver做个人网页，Photoshop为辅助工具，设计和制作图片、页面及图标等。本网站是以静态网页为基础，以Dreamweaver为制作软件、以Photoshop为设计软件而成的。通过这个学期对网页制作代码相关的学习以及之前对这些软件的了解，制作出相对简单的个人网页，展示自己相关的一些东西；本网站内容充实，在主页的设计上运用了模板，框架等。分页面上运用了导航条。插入了动态图片以及视频等给网增加了美观度，在首页的设计上本着简单易懂的原则，用户只要点击链接就能看到自己想看到的连接内容。网站的首页设置了背景音乐，使访问者在浏览的同时还能欣赏到悠扬的旋律。需求分析系统概述一个具有个性的个人网站，是让别人对你进行了解，与别人沟通的更好途径，本文研究的是这次个人网站的设计与实现。能让人通过本网站可以清晰地了解到我的一些信息。运用WindowsXP+Dreamweaver8+PS的网站设计制作环境，设计出神秘、活力的暗色与绚丽特效的网页特色。功能要求实现链接、滚动字幕或图片、插入音频、视频等插件的功能；总体设计运用Dreamweaver的框架功能；围绕关于我自己的一些相关信息进行分类，实现分类的链接进行制作；并且要注重网页的一体化，美感，还有色彩的搭配，音乐的选取等；3.1功能设计：利用框架（选取了左右下的框架结构）设置基本模样。左边框架作为导航栏，下边的部分作为滚动图片栏；右上方一大部分作为各个子网页的浏览区；在导航栏插入了音乐，以便放入的音乐不会随着链接的进入而消失，增添了网页的趣味性；导航栏包括共：我的档案，我的日志，我的班级，我的宠物，视频欣赏五项，分别链接到各个子页面；在导航区的最下方还设置有返回欢迎页面的链接；并且设置导航区的背景、颜色、插入动态图片等。3.2界面设计：本网页页面风格为暗色系，以黑色为主色其他色系进行搭配进行制作。index_myweb：主模块（右上层模块）添加制作的动态欢迎图片：欢迎来到小小寒的主页（动态）；左侧导航栏目分布了各个子页面的链接，点击即可进入各个子页面；右下方的模块放置我的图片，并且运动代码实现滚动功能；由导航栏分别可以进入以下子页面：我的档案：主要介绍了我的一些基本情况，爱好及性格特征等等；我的日志：选了一篇自己喜欢的写过的文章供大家阅读；我的宠物：展示了我的宠物小狗贝贝的一些东西，我养狗的一些感受等；我的班级：介绍了我的班级的基本情况；视频欣赏：摘选了一个搞笑flash给大家娱乐；以上五个分页面风格与整体保持一致，庄重而不失色彩；详细设计与实现1、创建网页页面：（1）新建站点：如图建立新站点，设置好各个选项，一般静态网页不用连接到网络，设置不用做太多修改，只需要设定好名称及文件夹位置即可。（2）新建网页：如图，选择创建新项目的HTML，或者选择模板建立；创建好六个页面，分别保存名称为：index，我的档案，我的日志，我的班级，我的宠物，视频欣赏；2、打开页面，选择布局模式，使用左右下模板，保存主页面标题为index.html,标题改为“我的主页”；试运行，保存两个框架；在左层模块添加插件音乐，并缩小插件；（如图1）设置导航栏，为每个分类的文字添加链接，将文字添加链接到“我的档案”等各个子分页，并且分页链接目标选择mainframe（如图2）：图1：图2：在mainframe中插入自己在Photoshop中制作的动态欢迎图片，添加到layer1中可以调试位置；在下方框架中插入各种照片，运动滚动效果的代码实现其功能；为了美化在各个模块中背景插入了相框，条纹等动态闪动图片；让视觉效果更震撼；图一页面代码如下：<html><head><title>myweb</title><styletype="text/css"></style></head><body><palign="center"class="STYLE1"> </p><divid="Layer2"><spanclass="STYLE1"><embedsrc="music/英格玛-谜-慢嗨.mp3"width="16"height="8"></embed></span></div><palign="center"class="STYLE1"><ahref="我的资料.html"target="mainFrame">我的档案</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE2"><ahref="我的日志.html"target="mainFrame">我的日志</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE1"><ahref="我的班级.html"target="mainFrame">我的班级</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE1"><ahref="我的宠物.html"target="mainFrame">我的宠物</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE1"><ahref="我的朋友.html"target="mainFrame">视频欣赏</a></p><p> </p><p> <imgsrc="image/13294029.gif"width="80"height="130"/></p><palign="center">┭<ahref="index_myweb.html"target="mainFram">返回主页</a></p></body></html><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title><styletype="text/css"></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="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title><styletype="text/css"></style></head><body><palign="center"class="STYLE1"> </p><divid="Layer2"><spanclass="STYLE1"><embedsrc="music/英格玛-谜-慢嗨.mp3"width="16"height="8"></embed></span></div><palign="center"class="STYLE1"><ahref="我的资料.html"target="mainFrame">我的档案</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE2"><ahref="我的日志.html"target="mainFrame">我的日志</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE1"><ahref="我的班级.html"target="mainFrame">我的班级</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE1"><ahref="我的宠物.html"target="mainFrame">我的宠物</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE1"><ahref="我的朋友.html"target="mainFrame">视频欣赏</a></p><p> </p><p> <imgsrc="image/13294029.gif"width="80"height="130"/></p><palign="center">┭<ahref="index_myweb.html"target="mainFram">返回主页</a></p></body></html><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>小小寒的主页</title><styletype="text/css"></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><TD><imgsrc="image/图像007(2)副本.jpg"width="99"height="124"/></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(demo2left.offsetWidth-demoleft.scrollLeft<=0)//其实demo.scrollLeft是有最大值的，和demo0.width,引用的图片的width有关系。demo过了一半（每半内容一样的），重新开始循环demoleft.scrollLeft-=demo1left.offsetWidthelse{demoleft.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)找到自己的一张照片抠出需要的部分粘贴在我的导航中，各个字体设置好，页面调整到最佳，使用切片工具把需要添加链接的部分切好；保存为网页模式；以我的档案为例如图：代码：<html"><head><title>无标题文档</title><styletype="text/css"></style></head><body><p> </p><p> </p><p> </p><p> </p><p> </p></body></html>其他各个子页面效果如下：我的日志：代码：<html><head><title>无标题文档</title><styletype="text/css"></style></head><body></body></html>我的班级：代码：<html><head><title>无标题文档</title><styletype="text/css"></style></head><body></body></html>我的宠物：代码：<html><head><title>无标题文档</title><styletype="text/css"></style></head><body></body></html>视频欣赏：代码：<html><head><title>无标题文档</title><title>无标题文档</title><styletype="text/css"></style></head><body><divid="Layer3"><divid="Layer4"><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"width="410"height="322"title="搞笑flash"><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="/go/getflashplayer"type="application/x-shockwave-flash"play="false"></embed></object></div></div></body></html>结语通过本次网页的制作过程，我学习到了很多实用的东西，也充分了解了Dreamweaver这个软件的强大，对学习了一个学期的课程也有了更深入的解，由于有了多媒体和网页设计课程作基础，因此在制作网页的过程中诸如制作首页，页面链接等步骤进行的还是比较顺利的，经过最近每天晚上的辛苦努力，终于完成了我的主页的制作。在这段时间里，一方面，我尝试着将课本上所学的知识运用到制作中，另一方面，我又时刻在网上学习自己需要的知识，学习到了很多有用的东西，在这过程中，我对网页的设计上有了更深的体会，对于这一领域，学到的知识多了，反而发现自己所了解的少了。遗憾的是，自己不会做动态网页，否则我相信会更成功，庆幸的是，整个设计过程都很顺利，错误也修改成功了不少，也可以安慰一下自己了。最终看到了自己亲手做出来的网站，心里有了收获般的欣喜，这让我从心底里感谢这次实践的机会，感谢老师给了我们一次自己动手的机会，在设计的过程中，同学们互相讨论，这也增强了同学之间的交流。虽然网页设计完成了，但欠缺之处尚存，希望可以得到老师的指点，使设计更加完善。目录TOC\o"1-3"\u第一章项目摘要 31.1项目基本情况 31.2建设目标 31.3建设内容及规模 41.4产品及去向 41.5效益分析 4第二章项目建设的可行性和必要性 52.1建设的必要性 52.2建设的可行性 52.3编制依据 62.4编制原则 9第三章项目建设的基础条件 93.1建设单位的基本情况 93.2项目的原料供应情况 103.3地址选择分析 10第四章产品 114.1沼气 114.2沼气产量确定 124.3有机肥 134.4产品去向 13第五章沼气工程工艺设计 145.1工艺参数 145.2处理工艺选择 145.3工艺流程的组成 155.4厌氧处理工艺选择与比较 155.5沼气存储和净化工艺 165.6工艺流程 185.7沼气输配设施 195.8沼气计量设施 19第六章总体设计 196.1站内总体设计 196.2站外配套设计 19第七章土建设计 207.1建筑设计 207.2结构设计 20第八章电气设计 218.1设计依据 218.2设计规范 228.3设计说明 228.4控制与保护 228.5防雷与接地 228.6配电系统 238.7防雷与接地 238.8防爆设计 238.9供电负荷 23第九章安全、节能及消防

人人文库> 全部分类> 办公材料 > 办公文档

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

ewb设计基础报告个人网页设计和实现

文档简介

温馨提示

最新文档

评论

ewb设计基础报告个人网页设计和实现

文档简介

温馨提示

最新文档

评论

相关文档