《WEB开发技术》课程设计论文个人网页课程设计.doc
-
资源ID：2881138
资源大小：1.48MB
全文页数：27页
- 资源格式： DOC
下载积分：8金币
|
友情提示
2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。
3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。
4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。
5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。
|
《WEB开发技术》课程设计论文个人网页课程设计.doc
江西理工大学应用科学学院WEB开发技术课程设计论文题 目：_江西理工大学应用科学学院外联社_ 系 别：_ _经济管理系_班 级：_信息管理与信息系统091_ 姓 名：_ _ 二一一年一月目录一、选题的目的和意义.3二、目前该选题的研究现状.3三、设计思路分析.4四、设计过程描述.6五、设计成果展示.8六、课设总结.25个人网页课程设计一、选题的目的和意义 人是社会性的动物，具有多方面的欲望和追求，被人理解、被社会承认是人的高级欲望中的一种。现在畅行的个人形象设计已驰皙一种庞大市场就说明了这个问题。传统的个人形象展示依靠照相、录像、演讲、交谈或文字说明等形式，而个人网站是所有形式中最新颖、最直观、最有效、最综合、最高级的形式。人的社会性诀定了人对交友交流的渴望和追求，现实中的交友具有很多的局限性。建设个人网站，能够让全球的人认识你，理解你，可以在你的网站上交流。同时，应用个人网站可以组建朋友社区。学习网页设计和网站制作知识，现在人人都体会到了网络时代的强烈充击，学习网络知识、学习网页设计和网站建设驰皙新时代的一个热点。学习包括书本学习和实践学习，网络作为一门实践性很强的技束，没有实践往往是半生不熟。所以，相当一批网民开始应用建设个人网站学习实践网页设计和网站建设的知识和技束。 二、目前该选题的研究现状个人网页并非只是为那些特长优势明显的同学而准备的，而是为了充分调动更多的同学踊跃参与而设立的，以此达到提高学生自信心与参与精神的目的。个人网页给予他们的不仅是参与活动的勇气，更是为了大学生毕业后对就业问题时能够有足够的勇气去展示自我。 作为当代大学生而言，如果没有一技之长的话不足以利于世，而当代学生幽禁于书海久了恰恰缺乏特长。个人网页设计恰好弥补了这一缺漏。个人网页让人们更好的展示自己，发掘自己的特长，也许会为大学生提供深造自我的机会，以便于在未来的竞争中立于不败之地。 为在校大学生树立家的感觉。个人网页通过各项活动的使得更多陌生的同学有了相识的机会，加深他们的友谊。同时，使得学生交流学习经验和生活体会，因而加深学生对个人网页好感，不仅把个人网页会当成他们展示自我的舞台，更当成他们的立足技能。三、设计思路分析设计网站时得考虑以下四大点：一、1、设计网站的标志(LOGO) 2、设计网站的标准色彩，网站给人的第一印象来自视觉冲击，让人觉得一定要浏览整个首页面，确定网站的标准色彩是相当重要的一步。一个网站的标准色彩不超过4种，太多则让人眼花缭乱。要注意色彩的合理搭配。 3、设计网站的标准字体，和标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体。一般我们网页默认的字体是宋体。4、设计网站的宣传标语，也可以说是网站的精神，用一句话甚至一个词来概括，一定要精练，最好是让他人浏览时，一下就记住。二、确定网站的栏目 建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰。栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。一般的网站栏目安排要注意以下几方面： 1、紧扣主题 本网站首页全部与应科院外联社相关联，主题栏目个数在总栏目中占绝对优势，分七大版块，这样的网站显的专业，主题突出，容易给人留下深刻印象。 2、其外联社网站首页时时更新社联趣事和大大小小的新闻；其中还包括了校内最新消息。3、设立了联系方式等通讯方式。 三、确定网站的目录结构 网站的目录建立网站时创建的目录。1、不能将所有文件都存放在根目录下，最好是有序的填好相应的名称等标记，否则会造成文件管理混乱，常常搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率。2、按栏目内容建立子目录，子目录的建立，首先按主菜单栏目建立。3、在每个主栏目目录下都建立独立的images目录，为每个主栏目建立一个独立的images目录便于管理。4、目录的层次不要太深，目录的层次建议不要超过3层，维护管理方便。 5、不要使用中文目录，不要使用过长的目录等。四、确定网站的链接结构 网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。1、树状链接结构：首页链接指向一级页面，一级页面链接指向二级页面2、星状链接结构：类似网络服务器的链接，每个页面相互之间都建立有链接这里个人推荐较好的方案是：首页和一级页面之间用星状链接结构，一级和以下各级页面之间用树状链接结构。这样方便标记、管理，运行的时候，不会由于某个页面忘记链接，或是链接错误而耽误时间，从而实现了方便管理，页面美观、简洁等步骤。四、设计过程描述一、初期阶段(获取所要收集信息)熟悉课本内容、去图书馆翻阅相关书籍和上网查找相应的资料，认真听老师利用课程设计上机时间演示的网站首页的制作流程，确定网页设计的内容要有一个明确的主题，整个网站围绕这个主题，课中在机房认真构思主题框架，下课在寝室编辑网站首页。二、中期阶段(分析所获信息、素材以深入了解该怎么做)当获取到相关信息、素材之后,会发现这些信息显得比较零散,接下来把这些信息、素材进行系统的整理,综合起来分析。经过系统分析之后,开始制作子网页，以及相应的超链接，在这过程中遇到了难题、一些相应的陌生代码和网页的显示效果，主动问老师，和同学探讨或上网查询，后期设计上的诸多雏形会在此阶段形成,具体的比如说,网页的风格、配色、素材、布局等等。三、后期阶段(准备设计所需的图、文资料)综合分析之后,紧接着准备好设计时可能会用到的图、文资料。图片主要包括外联社的新闻图片及资料图片等等。四、最后阶段(设计页面)网页设计上,就这样一些工作:处理图片、细节、色彩、排版构成等。遇到的困难主要有所收集信息比较零散，以及网页配色比较乱、布局困难等，最后经过老师指导和同学之间的交流解决了我的难题。同时网站后期还要注意，一个网站建设好之后应该可以达到以下要求：1、使用清楚的消息：确保用户了解此页面的上下文，并且知道网站首页的信息。2、保持一致性：虽然更改不同 Web 页的外观并不难，但这并不意味着应该这么做。将主要功能-例如返回“主页”的链接或者执行一个搜索-放在每页的相同位置。 3、保持简洁：说起来容易做起来难。尝试征求反馈意见。 4、尝试新的东西：不要害怕打破常规，尝试一些完全不同的东西。如果您不试试，永远不会找到真正的答案。应该在网页中体现自己的创新能力，有自己创新的东西与思维。5、总体来说，通过这两个星期对网页设计的学习，有收获也有遗憾。但是，我已迈入网页设计的大门，只要我再认真努力的去学习，在今后的闲余时间学习制作网页的更多知识以实现自身技能的提高，我坚信将来设计出的网页会更加专业，更加华丽，使它最终成为自己的一项技能。五、设计成果展示这是个人网页设计的主页面。通过表格布局顶部为始终背景图表顶格并居中。右侧表格顶部为设计的个人形象LOGO。左侧依次为个人信息的超链接项。LOGO表格下方合并的单元格显示的图片、与个人相关的资讯。源代码如下：<HTML><HEAD><TITLE>有天使来过 </TITLE><META http-equiv=Content-Language content=zh-cn><META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK href="./主页/images/enter.css" type=text/css rel=stylesheet><style type="text/css">body background-image: url(4.jpg);</style></HEAD><BODY style="BACKGROUND-IMAGE: url(4.jpg)"><DIV align=center><TABLE style="BORDER-COLLAPSE: collapse" height=576 cellPadding=0 width=990 border=0> <TR> <TD width=230> <DIV align=center> <TABLE style="BORDER-COLLAPSE: collapse" height=585 cellPadding=0 width=225 border=0> <TR> <TD height=16> <DIV align=left> <TABLE style="BORDER-COLLAPSE: collapse" cellPadding=0 width=206 border=0> <TR> <TD width=13></TD> <TD><img src="22_top.jpg" width="240" height="23"></TD></TR></TABLE></DIV></TD></TR> <TR> <TD> <DIV align=center> <TABLE style="BORDER-COLLAPSE: collapse" height=577 cellPadding=0 width=147 border=0> <TR> <TD height=582> <DIV align=center> <TABLE style="BORDER-COLLAPSE: collapse" height=607 cellPadding=0 width=230 border=0> <TR> <TD width=14 height="603"><img src="2e_right.jpg" width="28" height="582"></TD> <TD> <DIV align=center> <TABLE style="BORDER-COLLAPSE: collapse" height=582 cellPadding=0 width=188 border=0> <TR> <TD width=188 background="./主页/images/5.jpg" height=434> <DIV align=center> <TABLE id=table18 style="BORDER-COLLAPSE: collapse" height=417 cellPadding=0 width=178 border=0> <TR> <TD align=middle colSpan=2 height=42><div align="center"><em>enter art welcome you</em></div></TD></TR> <TR> <TD align=left width=31 height=333></TD> <TD align=left width=147 height=333><table width="181" height="361" border="0"> <tr> <td width="171" height="39"><h3 align="center"><em><tt><cite><a href="index.htm">主页</a></cite></tt></em></h3></td> </tr> <tr> <td height="66"><h3 align="center"><em><a href="图片/tu.html">图片</a></em></h3></td> </tr> <tr> <td height="50"><h3 align="center"><em><a href="博文/个人日志.html">博文</a></em></h3></td> </tr> <tr> <td height="71"><h3 align="center"><em><a href="视频/Untitled-3.html">视频</a></em></h3></td> </tr> <tr> <td height="65"><h3 align="center"><em><a href="音乐/Untitled-4.html">音乐</a></em></h3></td> </tr> <tr> <td height="56"><h3 align="center"><em><a href="梦想/Untitled-3.html">梦想</a></em></h3></td> </tr> </table></TD></TR> <TR> <TD align=middle colSpan=2> <TABLE id=table19 style="BORDER-COLLAPSE: collapse" height=37 cellPadding=0 width="100%" border=0> <TR> <TD align=middle><FONT color=#ffffff><B></B></FONT></TD></TR> <TR> <TD align=middle><B><FONT color=#ffffff></FONT></B></TD></TR></TABLE></TD></TR></TABLE></DIV></TD></TR> <TR> <TD width=188 height=148><IMG height=140 src="6.jpg" width=201 border=0></TD></TR></TABLE></DIV></TD> <TD width=28><IMG height=582 src="2e_right.jpg" width=28 border=0></TD></TR></TABLE></DIV></TD></TR></TABLE></DIV></TD></TR></TABLE></DIV></TD> <TD> <table width="806" height="709" border="0"> <tr> <td width="800"><table width="651" border="0"> <tr> <td width="186"><em><strong><a href="个人资料/Untitled-1.html">个人资料</a></strong></em></td> <td width="151"><em><strong><a href="心情/Untitled-2.html">心情</a></strong></em></td> <td width="154"><em><strong><a href="自己/Untitled-1.html">me</a></strong></em></td> <td width="142"><em><strong><a href="动漫/Untitled-44.html">动漫</a></strong></em></td> </tr> </table></td> </tr> <tr> <td height="348"><img src="main.jpg" width="680" height="420"></td> </tr> <tr> <td height="15"><a href="个人资料/Untitled-1.html">个人资料：<em><strong>Do you love me?</strong></em></a></td> </tr> <tr> <td height="15"><a href="心情/Untitled-2.html">心情：<em><strong>往事在阳光下风化，遗憾在记忆中永恒，嫣然一笑中，世事已淡然！</strong></em></a></td> </tr> <tr> <td height="94"><table width="614" border="0"> <tr> <td width="111" height="88"><a href="自己/Untitled-1.html">笑看花开花落 淡看云卷云舒</a></td> <td width="170"><img src="15.jpg" width="100" height="75"></td> <td width="157"><img src="100.jpg" width="86" height="81"></td> <td width="150"><img src="1004.jpg" width="97" height="81"></td> </tr> </table></td> </tr> <tr> <td height="107"><table width="613" height="94" border="0"> <tr> <td width="77" height="90"><p><a href="图片/tu.html">浪漫冬雪 曙光之城 甜蜜恋情</a></p> <p> </p></td> <td width="231"><p><img src="126.gif" width="160" height="69"></p> <p></p></td> <td width="165"><img src="125.gif" width="137" height="54"></td> <td width="112"><img src="124.jpg" width="130" height="48"></td> </tr> </table></td> </tr> </table></TR> <TR> <TD align=middle width=252 height=14></TD> <TD align=middle width=212 height=14></TD> <TD align=middle height=14></TD> <TD align=middle width=317 height=14></TD></TR></TABLE> <bgsound src="杨丞琳 - 左边 - 完整版.mp3" /></DIV></BODY></HTML>此页面充分显示了，页面加入图片和在页面上建立相应的链接，从而实现页面间的跳转，达到画面的衔接不冗余。源代码如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>R.年华花语</title><style type="text/css"><!-body background-color: #333333;.STYLE1 color: #FFFFFF.STYLE2 font-size: 24px.STYLE4 color: #CCFF00.STYLE5 font-size: 16px-></style></head><body><p></p><p><img src="./个人资料/xiao.gif" width="800" height="30" /></p><p> </p><p> <span class="STYLE2"><span class="STYLE4"><em>心情</em></span></span></p><p class="STYLE1"><span class="STYLE2"><span class="STYLE4"><img src="191923181.gif" width="190" height="70" /></span></span></p><p class="STYLE1"><em>生活步入正轨，心里想着出轨。曾经痴心无悔，单轨变作双轨。无奈感情越轨，快乐伴着虚伪。不怕心里有鬼，只怕情人卧轨。挣脱欲望导轨，靠航幸福路轨。</em></p><p class="STYLE1"><em>一个酒鬼的工作总结：存在问题：好喝酒；分析原因：酒好喝；经验体会：喝酒好；整改措施：酒喝好；努力方向：喝好酒。</em></p><p class="STYLE1"><em>老板打了员工一巴掌，各国员工的不同反应。日本员工：头一点：嗨！美国员工：立刻叫来了自已的律师。英国员工：微笑地报警。俄罗斯员工：反手就给日本老板一巴掌。中国员工：上网怒吼。</em></p><p class="STYLE1"><em>NO matter the ending is prefect or not,you cannot disppear from my world.</em></p><p class="STYLE1"><em>逝去的岁月，怎么找得回来？你曾经的微笑，在回忆里却散不开。</em></p><p> <span class="STYLE5"><span class="STYLE1"><em>玫瑰花语 </em></span></span><img src="http_imgload1.jpg" width="395" height="295" /></p><p> </p><p align="justify"> <span class="STYLE1"><em>长安楼里，我数细雨，煮红尘一樽以念卿。</em></span></p><p align="justify" class="STYLE1"><em> 缘分像一本书。翻的不经意会错过童话，读得太认真又会流干眼泪。</em></p><p align="justify" class="STYLE1"> <strong> </strong><em>爱，从来就是一件千回百转的事。不曾被离弃，不曾受伤害，怎懂得爱人？ </em></p><p align="justify" class="STYLE1"> <em>那些刻在椅子背后的爱情，会不会像水泥上的花朵开出没有风的寂寞的森林。</em></p><p align="justify" class="STYLE1"> <em>Her wishful face haunts my dreams like the rain at night. </em><em><em><img src="260071.gif" width="60" height="183" /></em></em></p><p align="justify" class="STYLE1"> <a href="./index.htm">返回主页</a></p><p><bgsound src="冯曦妤 - 避风港 - 国语版.mp3" /></p><p><img src="./个人资料/xiao.gif" width="800" height="30" /></p><p></p></body></html>页面说明：此页面实现了三次跳转中的中间部分，在超链接中再次建立超链接，方便页面的跳转，同时为达到了页面的整洁以及为页面的美观性加分。源代码如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>年华美文</title><style type="text/css"><!-body background-: url(222.jpg);background-repeat: no-repeat;text-align: left;-></style></head><body bgcolor="#FAFAFA"><table width="1383" border="0"> <tr> <td width="1373" height="664"><table width="1002" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <th width="999" height="179" scope="col"><div align="left"> <table width="851" border="0" cellpadding="0" cellspacing="0"> <tr> <th width="851" height="26" scope="col"><div align="left">一千零一个愿望太多了，我只要实现一个就够了。一句问候填满青春，别人的话都听不见，岁月凝结在你的视线。</div></th> </tr> <tr> <th height="22" scope="row"><div align="left"> <p align="left">心要让你听见，爱要让你看见，不怕承认对你有多眷恋；想你的时候，盼你能收到我的真情留言. </p> </div></th> </tr> <tr> <th height="126" scope="row"><img src="biaotilan1.jpg" width="900" height="310" /></th> </tr> </table> </div></th> <th width="4" scope="col"> </th> </tr> <tr> <th height="25" colspan="2" scope="row"><div align="left"> <table width="999" border="0" c
