网页设计与制作期末设计报告.docx

上传人：可****

文档编号：4245145

上传时间：2024-08-30

格式：DOCX

页数：16

大小：1.95MB

《网页设计与制作期末设计报告.docx》由会员分享，可在线阅读，更多相关《网页设计与制作期末设计报告.docx（16页珍藏版）》请在咨信网上搜索。

网页设计与制作 ---个人网站设计报告指导老师：盛加林学号：20082809 姓名：杜才伟班级：信管0802 一．概述随着网络技术的迅速发展，网络应用越来越趋于平凡化，无论是企业还是其他组织机构或者是个人，都希望利用计算机网络技术开发对自己有价值的东西。关于个人网站，现在越来越多的人通过个人网站记录自己的故事，与朋友分享生活的点滴，同时还可以通过个人网站广交朋友。本次的个人网站设计是网页设计与制作的期末检测，同时也是对自己学习的检验。本次设计运用平台是windows，运用的工具是Macromedia Dreamweaver 8，主要语言是html语言和javascript，样式设计采用的是css样式。在个人网站的设计中，我采用了通常iframe网页框架，风格源于自己浏览其他网站的灵感，网页flash的设计借鉴了网上优秀flash动画，首页还采用了网页音乐播放器控件。照片的处理用到了photoshop和Macromedia Fireworks 8。二．设计结构图三．设计主题岁月如梭，年华似水。默默流逝的青春给我们每个人留下了不同的回忆，我的个人空间的设计主要是记录大学生活。有学校的剪影，有寝室的合影……每一张记录都是未来的我最美好的回忆。设计的主要以怀念为主题。曾经的那些花儿，曾经的那些故事都是生命里美的转弯。四．模块介绍（一）、首页介绍首页是个人网站的入口，大概的设计框架是头是一个部分、头以下分为左右两个部分。头部如下图：导航条：导航条主要是“我们的故事”、“相册”、“关于我”三个模块的超链接点击三个连接即可跳转到不同页面。头部以下部分：这部分的设计主要有图片处理、文字从下往上滚动、音乐播放器、时钟的设计、flash设计 (二)、我们的故事我们的故事主要是文字描述，整体样式如下：这个部分主要是记录一些故事，每一段故事中都会存在一些悲伤的插曲，背景漂浮的flash动画加上背景音乐，还有略带伤感的文字，整体呈现淡淡的伤感而又不失积极向上。 (三)、相册相册主要是展示大学四年中的记录，有关于学校的，有我们寝室的，有自己的：整天样式如下图：相册页面上面是大学里照片的轮换，中间是自己处理后的照片，下面是文字大概描述照片的故事： (四)、关于我五．主要设计 (一)、首页主体框架 <body onLoad="InitialiseAutoScrollArea();"> <EMBED style="POSITION: absolute; WIDTH: 980px; HEIGHT: 541px; TOP: 1px; LEFT: 1px" height=541 type=application/x-shockwave-flash align=right width=967 src= quality="high" wmode="transparent"> <center> <div class="body"> <div class="top"> <img src="../image/top.jpg" width="980px;" height="130px;" /> </div> <div class="daohang"> <div class="gongneng"> <a href="wenzhang.html">我们的故事</a> | <a href="myPhoto.html">相片采集</a> | <a href="aboutMe.html">关于我</a>  </div> </div> <div class="c1"> <div style="margin-left:0px;margin-top:-10px;width:250px;"> <img src="../image/8.png"/> </div> <div style="width:300px;height:200px; float:left;margin-left:280px;margin-top:20px;background-color: #CCCCCC"> <iframe src="../music/music.html" frameborder="0" height="220px" width="310px;"></iframe> </div> <div class="wenzhang" id="divASContainer" style="width:250px;height:300px;float:auto;margin-left:750px; margin-top:20px; visibility:hidden;"> <div id="divASContent" style="margin-left:30px; font-size:15px;float:auto; font-weight:900;"> <p style="font-style:italic;">这里记录的不止是故事.....</p> <p style="font-style:italic;">更多的是一路走来的心情....</p> <p style="font-style:italic;">倾听心里最真实的声音....</p> <p style="font-style:italic;">找回那份似曾相识的感觉....</p> <p style="font-style:italic;">让感情的世界不留遗憾.....</p> <p style="font-style:italic;">轻轻的敲醒沉睡了的心灵....</p> <p style="font-style:italic;">让心灵最深处，闪出记忆深处的阴影.....</p> <p style="font-style:italic;">回头看看来时的路....</p> <p style="font-style:italic;">脚印已被世尘掩埋....</p> </div> </div> <DIV id=c0 style=" margin-left:400px;margin-top:520px;LEFT: 36px; POSITION: relative; TOP: 36px; Z-INDEX: 2; "> <TABLE> <TBODY> <TR> <TD height=120 width=120></TD></TR></TBODY></TABLE></DIV> <DIV class=num id=c1 style="margin-left:400px;margin-top:520px;FONT-SIZE: 11px; LEFT: 200px; POSITION: absolute; TOP: -200px; Z-INDEX: 5"><B>1</B> </DIV> <DIV class=num id=c2 style="margin-left:400px;margin-top:520px;FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>2</B> </DIV> <DIV class=num id=c3 style="margin-left:400px;margin-top:520px;FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>3</B> </DIV> <DIV class=num id=c4 style="margin-left:400px;margin-top:520px;FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>4</B> </DIV> <DIV class=num id=c5 style="margin-left:400px;margin-top:520px;FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>5</B> </DIV> <DIV class=num id=c6 style="margin-left:400px;margin-top:520px;FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>6</B> </DIV> <DIV class=num id=c7 style="margin-left:400px;margin-top:520px;FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>7</B> </DIV> <DIV class=num id=c8 style="margin-left:400px;margin-top:520px;FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>8</B> </DIV> <DIV class=num id=c9 style="margin-left:400px;margin-top:520px;FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>9</B> </DIV> <DIV class=num id=c10 style="margin-left:400px;margin-top:520px;FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>10</B> </DIV> <DIV class=num id=c11 style="margin-left:400px;margin-top:520px;FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>11</B> </DIV> <DIV class=num id=c12 style="margin-left:400px;margin-top:520px;FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>12</B> </DIV> <DIV class=num id=ob0 style="margin-left:400px;margin-top:520px;LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 1"></DIV> <DIV class=num id=ob1 style="margin-left:400px;margin-top:520px;LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob2 style="margin-left:400px;margin-top:520px;LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob3 style="margin-left:400px;margin-top:520px;LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob4 style="margin-left:400px;margin-top:520px;LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob5 style="margin-left:400px;margin-top:520px;LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob6 style="margin-left:400px;margin-top:520px;LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#00ffff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob7 style="margin-left:400px;margin-top:520px;LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#00ffff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob8 style="margin-left:400px;margin-top:520px;LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#00ffff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob9 style="margin-left:400px;margin-top:520px;LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#00ffff size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob10 style="margin-left:400px;margin-top:520px;LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><FONT color=#ffff00 size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob11 style="margin-left:400px;margin-top:520px;LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><FONT color=#ffff00 size=+3><B>.</B></FONT> </DIV> <DIV class=num id=ob12 style="margin-left:400px;margin-top:520px;LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><FONT color=#ffff00 size=+3><B>.</B></FONT> </DIV> </div> </div> </center> （二）、文字滚动效果 (三)、时钟效果 <script> pX = 100; pY = 100; obs = new Array(13); function ob() { for (i = 0; i < 13; i++) { if (document.all) obs[i] = new Array (eval('ob'+i).style,-100,-100); else obs[i] = new Array (eval('document.ob'+i),-100,-100); } } function cl(a, b, c) { if (document.all) { if (a != 0) b += -1; eval('c'+a+'.style.pixelTop='+(pY+(c))); eval('c'+a+'.style.pixelLeft='+(pX+(b))); } else { if (a != 0) b += 10; eval('document.c'+a+'.top='+(pY+(c))); eval('document.c'+a+'.left='+(pX+(b))); } } function runClock() { for (i = 0; i < 13; i++) { obs[i][0].left=obs[i][1]+pX; obs[i][0].top=obs[i][2]+pY; } } var lastsec; function timer() { time = new Date (); sec = time.getSeconds(); if (sec != lastsec) { lastsec = sec; sec = Math.PI * sec / 30; min = Math.PI * time.getMinutes() / 30; hr = Math.PI * time.getHours() / 6 + Math.PI * parseInt(time.getMinutes()) / 360; for (i = 1; i < 6; i++) { obs[i][1] = Math.sin(sec) * (44 - (i-1) * 11) - 16; if (document.layers)obs[i][1] += 10; obs[i][2] = -Math.cos(sec) * (44 - (i-1) * 11) - 27; } for (i = 6;i < 10; i++) { obs[i][1] = Math.sin(min) * (40 - (i-6) * 10) - 16; if (document.layers)obs[i][1] += 10; obs[i][2] = -Math.cos(min) * (40 - (i-6) * 10) - 27; } for (i = 10; i < 13; i++) { obs[i][1] = Math.sin(hr) * (37 - (i-10) * 11) - 16; if (document.layers)obs[i][1] += 10; obs[i][2] = -Math.cos(hr) * (37 - (i-10) * 11) - 27; } } } function setNum() { cl (0, -67, -65); cl (1, 10, -51); cl (2, 28, -33); cl (3, 35, -8); cl (4, 28, 17); cl (5, 10, 35); cl (6, -15, 42); cl (7, -40, 35); cl (8, -58, 17); cl (9, -65, -8); cl (10, -58, -33); cl (11, -40, -51); cl (12, -16, -56); } function startClock() { ob(); setNum(); setInterval('timer()', 100); setInterval('runClock()', 100); } </cript> (四)、主要css样式 .body{ font-size:15px; margin-top:-20px; } .top{ width:980px; height:130px; } .daohang{ background-color:#666666; height:20px; width:980px; } .gongneng{ float:right } .gongneng a{ font-size:15px; text-decoration:none; } .left{ width:200px; height:400px; float:left;} .c1{ background:url(../image/right.png) no-repeat; width:980px; height:600px; } .jieshao{ float:right; width:150px; height:180px; margin-right:30px; margin-top:-50px;15:29 2012-4-22 } #divASContainer { CLIP: rect(0px 320px 120px 0px); HEIGHT: 300px; LEFT: 10px; OVERFLOW: hidden; POSITION: absolute; TOP:300px; VISIBILITY: hidden; WIDTH: 250px } #divASContent { LEFT: 0px; POSITION: absolute; TOP: 0px } 六．总结网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常重要。生活中我每天上网都要接触到网页，原来没有留意过网页的设计，但是经过这次个人网站的设计和学习，现在我打开一个网页都会习惯性的先看看排版、布局和色彩运用。通过校外实习的这段时间，自学到的网站制作工具有很多，比如说Dreamweaver， Fireworks，Flash，photoshop，但从来也没有深入而系统的认识和了解，更谈不上如何去分析，如何去整理和归纳。除了自己摸索，了解，运用这些软件，其他更深层次的软件的更是从来没有涉及过，所以不做深层的了解。由于有了这次的课程设计，就给了我这样一个机会，仔细得熟悉Dreamweaver，更深入的了解了其余软件，分析它相对于其他软件的优势和不足，这样对于我们选择运用也是大有裨益的。设计下来，我觉得收获很多，对于制作网页的软件有一个全新的认识。在这次个人网站设计中，通过上网搜资料和询问同学，我学到做网页设计的以下几点：1）确定网页主题：做网页设计首先应该考虑好设计的主题，主题要清晰明了，要有自己的特色，不然会失去网站的特色。2）确定网页界面：网站的题材确定后，就要将收集到的资料内容作一个合理的编排，根据自己的设计思路和设计的模块合理的安排网站界面，网站界面设计是层次性的不同模块可能还有自己的子模块，模块的设计，首先是按主模块建立。3）确定网页风格：“风格”是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的标志、色彩、字体、标语等、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素，网站可以是平易近人的、生动活泼的也可以是专业严肃的。不管是色彩、技术、文字、布局，还是交互方式，只要你能由此让浏览者明确分辨出这是你网站独有的，这就形成了网站的“风格”。风格是有人性的，通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性：是粗犷豪放的，还是清新秀丽的；是温文儒雅的，还是执著热情的；是活泼易变的，还是墨守成规的。通过这次个人网站的设计我学到了除了课堂上学到的东西，从最开始的无从下手，到浏览优秀的个人网站和上网搜索关于网页设计的资料，最终确定主题，并在脑海中构思好网页的风格。到最后的完成设计。这个过程中遇到很多问题，在这里要感谢在这次设计中帮助过我的同学和老师。他们的帮助啊让我完成的更顺利！

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档保存到电脑，查找使用更方便

10 金币

申诉本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请申请举报、认领或删除 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: 网页设计制作期末报告

咨信网温馨提示：
1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前自行私信或留言给上传者【可****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时私信或留言给本站上传会员【可****】，需本站解决可联系【微信客服】、【 QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”（推荐），意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：4008-655-100；投诉/维权电话：4009-655-100。

关于本文

本文标题：网页设计与制作期末设计报告.docx
链接地址：https://www.zixin.com.cn/doc/4245145.html

可****

内容提供者

实名认证

查看上传人更多文档

部分上传会员的收益排行 01、路***（￥15400+），
02、曲****（￥15300+），
03、wei****016（￥13200+）,
04、大***流（￥12600+），
05、Fis****915（￥4200+），
06、h****i（￥4100+），
07、Q**（￥3400+），
08、自******点（￥2400+），
09、h*****x（￥1400+），
10、c****e（￥1100+）,
11、be*****ha（￥800+），
12、13********8（￥800+）。

相似文档

自信AI助手