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

上传人：1*** IP属地：河南上传时间：2023-06-13 格式：DOC 页数：25 大小：1022KB 积分：100 举报 版权申诉

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

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

文档简介

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这个软件的强大，对学习了一个学期的课程也有了更深入的解，由于有了多媒体和网页设计课程作基础，因此在制作网页的过程中诸如制作首页，页面链接等步骤进行的还是比较顺利的，经过最近每天晚上的辛苦努力，终于完成了我的主页的制作。在这段时间里，一方面，我尝试着将课本上所学的知识运用到制作中，另一方面，我又时刻在网上学习自己需要的知识，学习到了很多有用的东西，在这过程中，我对网页的设计上有了更深的体会，对于这一领域，学到的知识多了，反而发现自己所了解的少了。遗憾的是，自己不会做动态网页，否则我相信会更成功，庆幸的是，整个设计过程都很顺利，错误也修改成功了不少，也可以安慰一下自己了。最终看到了自己亲手做出来的网站，心里有了收获般的欣喜，这让我从心底里感谢这次实践的机会，感谢老师给了我们一次自己动手的机会，在设计的过程中，同学们互相讨论，这也增强了同学之间的交流。虽然网页设计完成了，但欠缺之处尚存，希望可以得到老师的指点，使设计更加完善。基于C8051F单片机直流电动机反馈控制系统的设计与研究基于单片机的嵌入式Web服务器的研究MOTOROLA单片机MC68HC（8）05PV8/A内嵌EEPROM的工艺和制程方法及对良率的影响研究基于模糊控制的电阻钎焊单片机温度控制系统的研制基于MCS-51系列单片机的通用控制模块的研究基于单片机实现的供暖系统最佳启停自校正（STR）调节器单片机控制的二级倒立摆系统的研究基于增强型51系列单片机的TCP/IP协议栈的实现基于单片机的蓄电池自动监测系统基于32位嵌入式单片机系统的图像采集与处理技术的研究基于单片机的作物营养诊断专家系统的研究基于单片机的交流伺服电机运动控制系统研究与开发基于单片机的泵管内壁硬度测试仪的研制基于单片机的自动找平控制系统研究基于C8051F040单片机的嵌入式系统开发基于单片机的液压动力系统状态监测仪开发模糊Smith智能控制方法的研究及其单片机实现一种基于单片机的轴快流CO〈,2〉激光器的手持控制面板的研制基于双单片机冲床数控系统的研究基于CYGNAL单片机的在线间歇式浊度仪的研制基于单片机的喷油泵试验台控制器的研制基于单片机的软起动器的研究和设计基于单片机控制的高速快走丝电火花线切割机床短循环走丝方式研究基于单片机的机电产品控制系统开发基于PIC单片机的智能手机充电器基于单片机的实时内核设计及其应用研究基于单片机的远程抄表系统的设计与研究基于单片机的烟气二氧化硫浓度检测仪的研制基于微型光谱仪的单片机系统单片机系统软件构件开发的技术研究基于单片机的液体点滴速度自动检测仪的研制基于单片机系统的多功能温度测量仪的研制基于PIC单片机的电能采集终端的设计和应用基于单片机的光纤光栅解调仪的研制气压式线性摩擦焊机单片机控制系统的研制基于单片机的数字磁通门传感器基于单片机的旋转变压器-数字转换器的研究基于单片机的光纤Bragg光栅解调系统的研究单片机控制的便携式多功能乳腺治疗仪的研制基于C8051F020单片机的多生理信号检测仪基于单片机的电机运动控制系统设计Pico专用单片机核的可测性设计研究基于MCS-51单片机的热量计基于双单片机的智能遥测微型气象站MCS-51单片机构建机器人的实践研究基于单片机的轮轨力检测基于单片机的GPS定位仪的研究与实现基于单片机的电液伺服控制系统用于单片机系统的MMC卡文件系统研制基于单片机的时控和计数系统性能优化的研究基于单片机和CPLD的粗光栅位移测量系统研究单片机控制的后备式方波UPS提升高职学生单片机应用能力的探究基于单片机控制的自动低频减载装置研究基于单片机控制的水下焊接电源的研究基于单片机的多通道数据采集系统基于uPSD3234单片机的氚表面污染测量仪的研制基于单片机的红外测油仪的研究96系列单片机仿真器研究与设计基于单片机的单晶金刚石刀具刃磨设备的数控改造基于单片机的温度智能控制系统的设计与实现基于MSP430单片机的电梯门机控制器的研制基于单片机的气体测漏仪的研究基于三菱M16C/6N系列单片机的CAN/USB协议转换器基于单片机和DSP的变压器油色谱在线监测技术研究基于单片机的膛壁温度报警系统设计基于AVR单片机的低压无功补偿控制器的设计基于单片机船舶电力推进电机监测系统基于单片机网络的振动信号的采集系统基于单片机的大容量数据存储技术的应用研究基于单片机的叠图机研究与教学方法实践基于单片机嵌入式Web服务器技术的研究及实现基于AT89S52单片机的通用数据采集系统基于单片机的多道脉冲幅度分析仪研究机器人旋转电弧传感角焊缝跟踪单片机控制系统基于单片机的控制系统在PLC虚拟教学实验中的应用研究基于单片机系统的网络通信研究与应用基于PIC16F877单片机的莫尔斯码自动译码系统设计与研究基于单片机的模糊控制器在工业电阻炉上的应用研究基于双单片机冲床数控系统的研究与开发基于Cygnal单片机的μC/OS-Ⅱ的研究基于单片机的一体化智能差示扫描量热仪系统研究基于TCP/IP协议的单片机与Internet互联的研究与实现变频调速液压电梯单片机控制器的研究基于单片机γ-免疫计数器自动换样功能的研究与实现基于单片机的倒立摆控制系统设计与实现单片机嵌入式以太网防盗报警系统基于51单片机的嵌入式Internet系统的设计与实现单片机监测系统在挤压

人人文库> 全部分类> 应用文书 > 工作计划

温馨提示

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

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

文档简介

温馨提示

最新文档

评论

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

文档简介

温馨提示

最新文档

评论

相关文档