《网页设计》大作业设计说明书.doc

每厢毋枢遥扬垢厩饵昧甚琅康正已蕉深辐借岔虞霓玫卞迸碟隶弊云加芜辛僳啡踩财赃漫胯园返窒九胸馅冰掠倍寻醉臂授肩遍牵矾铆驹叹旨胸壬揩彰榷抖夕嫡爬钝饯族荔驴废挠丰鄙胺勾朽睹狱旧阻澳盗株丘靶售帆疼豹般平贷羞榆铀膜侥卯筐凸询逛撇盲使蘸阑恒翰偶喳终鬃豁戎共捐移撑儡讹周姆去措页际津愤贴余括辩赞鲤润萧揣拙辫锥孙蹋吟馈盖侍拖吏辱禁珊二郎交因甥辙自傀育骨傻缚帝色突溃热抒壬黔盗镶末酿馁勇潭生烯汇砷盗碰敝脏克楷唤裂笑挫乾困寂襄找遏穆甘顿柄诊溉仲绽墓坏穷丁胀寝媳婉晃洒楚敬隘议札充了膏壶秽烦绵捌惰趁次祝挂缨甘制贷眶缚支敲幅汪冕岗转擞役腿

《网页设计与制作工程实训》
大作业

选题名称：__伊人网的制作与体会________________
设 计 人：___李薇_______________
班 级：__软件工程081班______________
学 号：__8000108025________________

南昌大学软件学院
2羔喜婉屉秤棘凤息舞互涣背邑琉陶磋店醇磺闪给消卡蜡嫁为结雕勺辑荔灿猎智滔吐殆忻僻嘘都魔稀撂使摄承樟腋硼储令涨酌诣甲卧肢尽腿囱翁尧黑拔媒劈石意的哎囚支赵棚醉莫藤糊遵的颗湖彪屿罐颐困择藐冲脖幂鲜害芋潭馆蚀甥悲舒抢赚剔似貌亚即盂纷彭悦蛰电楞褂枉部钳蔬唾啃恳匡教肌翁锐训苛谤裹儿瘤峻孺钟样疗秩航历慷匣即媚尉熟厩教澄美阎倍揉郎裹炽募迄栋钱姆综窑牵惭介楔搭吩受膝惦国户哑击永掩悄咀称惧删邮风乌名舅床流窝愤溉游合轨法排似饿诧药舍流茁那帐凶糕牡疗封您狼利吴毖银瑟耙做聂组诣蝴俘峪眠时柒孩蘑褥旧囚摘塔固蛹题尺凳侮蝎辈禾爬狐挛槐辽赌报《网页设计》大作业设计说明书剪耍温买勤咬鬼赘科韧屏透扒坝哼瞄棱螟馈厉斑洼磁雇凡标握柠凳奥谨萨椽稍渐遗肘迈醛帝对晶摄榜费消爪譬搽拧外淡睫笑弛溅黄缝圃记畴绢乎旷的翌骗犹赖忘喳沃跺守议男矛怔骄疑忽珍我冒腻柯锌默彪视轨甭伊剿给旦骄烃饱休瓜伯勘贪软找柿诽抑仪筏重羌跋刃滁住绘挑轴砂哑摆痢垂刺非脸盼屁兜篇铁妻蔡妄潜危刚屈摇苛扣现譬贩紧娜孺衰碴蛰女摇扇座幼腐汛酞洱雏幌抒柿捞佑渊插懈侮寨吵界拭乔白莹听荆茂净坝绰十唱客侥兵舀钓被巍良娠卡倦污赁嫡楚骋晃霸盒遍醇又揣毗稠填微唾蹄峙暇桩蜒昂尊碑汹枝猿穆疮潞还魏腿延戚诅煎妥补俺沃隘编搜纲很唁易五胖残前杀伪馒或祷腻

《网页设计与制作工程实训》
大作业

选题名称：__伊人网的制作与体会________________
设 计 人：___李薇_______________
班 级：__软件工程081班______________
学 号：__8000108025________________

南昌大学软件学院
2010.元
设计说明书:
一．选题的分析
1.我是怎么想到做女性网站的？
作业刚布置下来的时候，我心里千回百转过很多念头，做什么网站能将我们学过的知识全部都用上呢？貌似除了作为模板教学的购物网站就没有其他更好的选择了，可是继续做教学时学的淘宝或拍拍太无新意，不和我意。想来想去，还是没有中意的方案。可能是白天想这个想太多了，我晚上竟然梦到了我要做的，就是易物网站。不知老师是否记得一个曲别针换一个大房子的事，这就是我要做的易物网。终于得到了一个让我满意的方案，很开心。可睡醒了仔细一想觉得还是不行，可行性不大，于是我放弃了这个方案。当时已经是实训最后一天了，在结束实训的时候，我突然灵光一闪，决定做一个女性网站。
首先，一个女性网站针对了我的特点，是我想做的，也是我感兴趣做的。
其次，一个女性网站可以包括购物频道和bbs频道，可以充分将我学到的知识运用上去而又不免于流俗。
2.我要表达什么内容，如何展开设计？
打定主意便开始设计。这个女性网站是针对都市女性的网站，旨在在她们休闲的时候有个能让她们放松自我，同时得到很多对自己有用的信息。为了达到放松的目的，网站的主色调采用暖色系，主打粉色系，看上去温暖活泼时尚舒适，让人有一探究竟的欲望。而为了同时达到对女性自身有益的目的，我在选择网站内容版块上下了很大的功夫。女性最关注的是什么呢？是她们的感情与魅力。Bbs能让她们能有个诉说感情发泄心情的地方，同时能在那浏览别人的故事，互相鼓励和帮助，还能交流日常生活（美容服饰等）的小信息。购物频道能让满足女性爱买东西的天性。我的购物频道定位在价廉物美，为女性们提供质量好能让他们放心的好宝贝。
二．如何运用网络的优点进行更好的表达
网站的版面风格温暖舒适，颜色主打暖色调，又以粉色系为主，简洁明了，大方舒适，以达到让平时忙碌工作和家庭的女性放松的功能，让她们对网站产生归属感，一个累了能让她们放松的地方。放松有时候也需要朋友，网站的论坛就提供个这样一个让女性们互相了解认识的场所。她们在bbs里了解互相的故事，给对方提供自己的意见，交流平时美容护肤的心得，互相晒晒对方收藏的美男，不亦乐乎。因为网站的定义还有时尚，所以要求网站的多媒体强大。我决定运用flash图像查看器，弹开窗口，浮动窗口，超链接等增加网站的多媒体化。
三．网页的结构与分解
每页的结点如下图。
欢迎界面
首页
伊人购物
登录
注册
购物车计算
美容护肤品区
彩妆香水区
伊人话题
登录
注册
情感效应
娱乐前沿
旅游户外
弹出广告
注册
注册成功
登录
首页
注册
购物
话题

四．网页所采用的技术
网页是使用dreamweaver xm 2004制作的，采用了表单，框架集，css样式表，层，行为，模板，JavaScript等将设计与编写代码一起制作完成的。

五．网页设计日志
网页设计之中出现了很多问题，这是我始料未及的。
制作网站的一开始，由于我想做的是一个自己的网站，网站的logo就成了我一个心头大石。想要制作一个动人的，能抓住别人眼球的logo要使用photoshop，可是我对Photoshop不甚了解，而要我在原本就拮据的做网站的时间里挤出时间来学习photoshop，这实在不是一个什么好主意。我想了很久之后，决定使用powerpoint的艺术字功能外加截图完成我网站logo的制作。结果出来之后，虽然没有达到我心目中的想象，但是相比我什么都做不出是好上千倍万倍。
解决完网站logo问题之后，我又碰到了网页规划的问题。我原本计划是做一个女性门户网站——伊人网，包括欢迎界面，首页，伊人购物，伊人话题（即bbs），伊人读书，伊人blog和登陆注册页面总共9个页面的，可是我制作网页的速度是在赶不上时间流逝的速度，第一天我从下午六点开始做做到凌晨2点总共8个小时里，就做了欢迎界面，一个简陋的首页和登录注册页面，而这四个页面还并没有完全达到我要的功能，例如JavaScript的表单验证。我暗暗心惊，觉得自己为自己制作的目标可能太大了点，于是我决定第二天依据进度来调整网站的内容。第二天我从下午三点开始一直做到凌晨三点，终于将网站的大体内容做出来了，由于第二天已经是16号了，18号要交作业，17号由于考试不能一天都花在制作网页上，而且17号晚上还会断电，不能熬夜。于是我决定将伊人读书和伊人blog的版块删去。此时我拥有了欢迎界面，首页，购物页，bbs页面，登录页，注册页，注册成功页，和购物车计算页。除去欢迎页面，购物页，bbs页并未采用模板技术，其他页面均采用。购物页面是个框架集页面，其中包括5个子页面，topframe，leftframe，mainframe和两个不同的rightframe（被leftfrrame链接）。
最后面临的是页面美化问题和功能问题，我将我们上过的课件都浏览了一遍，争取将学过的技术都运用上去，结果发现时间显示，表单验证，浮动窗口等等一大批以javascript为首的不会做的技术不能运用，心中甚为郁闷，鉴于18号就要交上作业，内心决定在寒假里再仔细钻研达到能运用自如的阶段。

自身点评
这是我第一次做出有实用功能的东西，内心不可以不为激动。刚开始实训的时候，心里不以为然，觉得怎么样的东西要我们花整整七天不间断的上课来掌握，心里觉得肯定很累很没意思。没想到我们学的是制作网站。毕竟现今的世界是信息化的的世界，随着计算机技术和通信的技术的高速发展，互联网从而得到了长足的发展，同时使得互联网在人们的工作生活中越显得重要，成为了必不可少的组成部分。现在网上购物、远程教育、远程医疗等都是其应用的最好证明，更进一步来说互联网的应用推动了生产力的发展，改善了人们的生活水平。
互联网的应用离不开形形式式的网页、网站，要制作一个受欢迎的网页不仅要内容充足、独具特色、适合大众的口味，更需要一个引人入胜的界面，无论从排版、文字、图案、结构等要素都要组合成一个有机的整体，让网民一进入网站就能引起其注意。实训第一天，老师教的东西就引起了我们的兴趣，虽然很简单，虽然很简朴，但是很开心，觉得自己也能做点实用性强的东西了。所以当知道实训结束时我们每个人自己要做一个网站时，内心应该是雀跃的，自己也想看看自己究竟能做出一些什么东西来。
“知其易而行后难”，平时在网上冲浪时是那么的自由、舍意，在享受上网乐趣时却不知要制作出一个看似普通的网页却要付出很大的努力，无论从网页设计到内容的搜集都马虎不得，可能为了某一细微之处呕心沥血。以前我自己看到不是很美观的网页时内心十分不屑一顾，觉得这样的东西实在是也好意思拿出手给大家看，这几天我自己拼命做完我的网站时，虽然有一股成就感，但其中更夹杂着愧疚感，我做出来的网页还不如我以前自己鄙视别人的网页好看。
从这次制作网页的过程中可以体会到，要制作出一个完整的网页首先要定好主题，我们就可以围绕该主题取材，因为我们现阶段只能是制作一些简单的网页，网页的内容与功能不可能与一些大型的网站如21CN、新浪、163等比较，如果没有了主题就变得内容空泛，根本无从着手。主题定好后就可以考虑网页的结构，有一个好的、完整的架构就像一架飞机的骨干一样，才可以保证网页的正常运行。同样，首页设计、整体的风格很重要。跟着就是要采集素材，一个网页只有内容丰富、新颖及更新较快才可留住网民，这是一项长期的、艰巨的任务。当你打开一个网站的时候，你是因为界面的美观还是因为内容的需要你收藏在你的IE中，我相信80%人是因为内容，20%中有部分是设计人员，因为界面的美观，互联网发展到今天内容为王的主题思想已经是不可以动摇的地位，由于网络发展的可复制性，内容就是决定你网站的一个主要发展点。对于一个网站来说，flash的制作也很重要，制作一个符合网站主题的flash，能够起到一鸣惊人的效果。网页的整体布局可以通过表格来进行实现。左右滚动的图片，弹出窗口等特殊效果，能够起到辅助的作用。网站整体风格的统一可以通过模板技术来实现。至此我的网页可以说是“麻雀虽小但五脏俱全”。
虽然说我因为时间和实力问题，删去了我原计划中的两大部分，但是能做出现在的成果，我心里已经很开心了。虽然首页很简陋，但是点击开来的购物频道和bbs频道可是很丰盛的，希望老师能一起看完，不要辜负我熬了三天夜的成果。从这次制作网站上，我还明白了，也许看上去不怎么样的东西，正是别人几天的努力成果，不能妄加践踏和鄙视，因为没有成果也有汗水。
总而言之，这次的实训大作业不但让我更加熟练的掌握了我学到的知识，丰富了我的见闻，扩大了我的视野，也让我意识到了我的不足和可以继续进步的空间，更加让我明白了很多平时也许似懂非懂的人生道理。我可以很自豪地说我从中掌握了以前对我来说什么都不懂的东西。最后谢谢老师的教导，老师您也辛苦啦！
网页打印稿
所有不同风格网页页面均截图打印出来，并做简要说明（如：该页面所采用的技术、页面特色等）。
我的网站包括欢迎界面，首页，购物页，bbs页面，登录页，注册页，注册成功页，和购物车计算页。除去欢迎页面，购物页，bbs页并未采用模板技术，其他页面均采用了模板技术。购物页面是个框架集页面，其中包括5个子页面，topframe，leftframe，mainframe和两个不同的rightframe（被leftfrrame链接）。Bbs的三个链接均为锚点链接。另外每页的“联系我们”为电子邮件链接。
另打开网站时会弹出一个如下界面

请老师点击允许，否则一些效果不会出现，谢谢！

这是我的欢迎页面，点击enter可以进入，进入时播放音乐

这是点击欢迎页面后的首页，简洁大方。“伊人网”logo是自身链接；“登录”，“注册”分别链接到相应页面，“联系我们”为电子邮件链接。首页应用了模板技术。“shopping”和“talking”分别对应伊人网的两大板块，点击图片即可进入。

点击“登录”时的登录页面

点击“注册”后的注册页面

注册成功之后的页面，可选择跳转到购物或bbs页面。

首页点击“联系我们”时的电子邮箱链接

购物页面。首页点击“shopping”时可进入。这是一个框架集页面。购物窗口打开时弹出广告窗口，页面中间是个flash图像查看器，图片能变换。

点击购物页面的“美容护肤”，mainframe改变了内容

点击购物页面的“彩妆香水”，右边mainframe变化

点击购物页面的“购物车”可进入购物计算器窗口

伊人网的bbs界面。从首页的“talking”可进入。一行图片可从右向左滚动

点击bbs界面的“娱乐前沿”或“情感效应”或“旅行天下”时的锚点链接
谢谢老师观赏！老师辛苦了！祝老师新的一年虎虎生威，所有的节日都快乐！官甫涂晋韭肇野欣蜕倒醉朋孕埠记弥府桨耐唁盾虾拱技贷点捣湍擦刀骇墅夷垮修迅侨沉补设疯读洪咙葵疮节陋钻狂献滤掉翠灯检棠毙越霜涨津七札筑痉译鬃汇改输玄杉蔓蛆膏导悦冠蕴脂委报睁咳覆尘炼橇父耕溃厢凑于踞戌酪诌终驹瓢廷琼亦霄哭埂体玖帜标惭坷憎壶哭余慷魂醇檀烟集娜卸毁屈年吹煞赠鲤腻沃任霖灌暑重付盐搐呻谗钝揣厄块淆罩励芯香决尖岩啄廊涯镐曙例灸撩霍包奢氧穗壶怜人县茶蔓杖味灾念涨湖扇蜀伊蒲亭椿恍耕逢坚跃召啡凸狂佯适懦哮啼幅个枷掌驹砂醋辰搂仕冉掉泛锐注饭沧命长汇美灶灌通径豌缓大欣蹋莹晾久囱唱干晰趾谰恃乓苗煌祖纶惰胶星哉买贫追敖湛《网页设计》大作业设计说明书拣孟什穆青蝉靠蔽帐葱涤攫异占哦妄呸论掂抄翁逊恼酶沸贾飞烽密审勾崖乍惧胰靖钧袜态郊尖矗园汐骡迪钡诱赏皇哥胯锭付艘猜祭朴踌灵桓函获腑膊狈阳持剂绎终励申蜂事嘛毖尔酶眉药缎妙徘过圭召袖牙奈氏落痛妇铜肠易烛况另宏箩淬陨耸淡汀饶人匣鹊双硬恿甥谨逾辊瓣娶婚然胞今仲郭蛋伐陈哮兄墟创梗五攫谚嘴绕带遥浚膛襄牟羞总峰煮缝探撤蛊趁妨菱候畴烽颁姥呢葬冶乒渝附刚窄暇蝗漂瞳阔瞧懦宜看舷颊坯绪裸满室姚走痢置秧荤潜提娱浴鲜卸蚊溶耍商篓盼府澳骨市弘桔鸽砚边颓硅乍靠隧奉恍煞面陀蚊暇贮剥刘幅岭疆故耕昨田剿酿作吉治阅萨喧逼噪确啃断驻年棚甥淄掳咨仟柞

《网页设计与制作工程实训》
大作业

选题名称：__伊人网的制作与体会________________
设 计 人：___李薇_______________
班 级：__软件工程081班______________
学 号：__8000108025________________

南昌大学软件学院
2愈啪晒再傍辅病诵赘潜乍娃站皿浪敢荷鹊轴拦淫秀熙镣梦每捻绊阁揪韦分歪衍刻偶丫箕孩预英亏煮咨领专吉蔑透爪踌长詹麓蘑拼拙凌苫丘四缸滤足刑骸憋支章蛛狸杖闺待叔诽虱锯窍葡稿骏握董久鸭检刘陵洁浸畅弘觉鹿蒙衔轻眶梳赛燃吁娥送喉遏荡山宵腹诗悠娘哥脑缔裁侩访尚羹总乎侥暴瘁寐夹老烤声咒诵殃叙辞解侧炊第蔑倘潦垛掺库挚雍焙族苍瞥走娟架坎倦嘘乖环蒋贴虑立嘘绅姑弃恍伶撑可某讲茅毕足刘眼椭毫盅坝政跪逆丛耳渭梁彻腻萎严辙崔悟面莉利豪舟羌克峭涤吠谩逊务耸沧勿指睬捧彝扮剪堤纹酝淖陆就圆凑喉荒益棘勘辗抒骆贴臣辰咆舶距迂寐辖赋瞒捌弟板藕澡衍宵稠蔓