《《网页设计方案》大作业设计方案说明书.pdf》由会员分享，可在线阅读，更多相关《《网页设计方案》大作业设计方案说明书.pdf（13页珍藏版）》请在三一文库上搜索。
1、1 / 13 网页设计与制作工程实训 大作业 选题名称： _伊人网的制作与体会_ 设计人： _李薇 _ 班级： _软件工程 081班_ 学号： _8000108025_ 南昌大学软件学院 2018.元 设计说明书 : 一选题的分析 1.我是怎么想到做女性网站的？ 作业刚布置下来的时候，我心里千回百转过很多念头，做什么网站能将我 们学过的知识全部都用上呢？貌似除了作为模板教案的购物网站就没有其他更 好的选择了，可是继续做教案时学的淘宝或拍拍太无新意，不和我意。想来想 去，还是没有中意的方案。可能是白天想这个想太多了，我晚上竟然梦到了我 2 / 13 要做的，就是易物网站。不知老师是否记得一个曲别
2、针换一个大房子的事，这 就是我要做的易物网。终于得到了一个让我满意的方案，很开心。可睡醒了仔 细一想觉得还是不行，可行性不大，于是我放弃了这个方案。当时已经是实训 最后一天了，在结束实训的时候，我突然灵光一闪，决定做一个女性网站。 首先，一个女性网站针对了我的特点，是我想做的，也是我感兴趣做的。 其次，一个女性网站可以包括购物频道和bbs频道，可以充分将我学到的知 识运用上去而又不免于流俗。 2.我要表达什么内容，如何展开设计？ 打定主意便开始设计。这个女性网站是针对都市女性的网站，旨在在她们 休闲的时候有个能让她们放松自我，同时得到很多对自己有用的信息。为了达 到放松的目的，网站的主色调采用
3、暖色系，主打粉色系，看上去温暖活泼时尚 舒适，让人有一探究竟的欲望。而为了同时达到对女性自身有益的目的，我在 选择网站内容版块上下了很大的功夫。女性最关注的是什么呢？是她们的感情 与魅力。 Bbs能让她们能有个诉说感情发泄心情的地方，同时能在那浏览别人的 故事，互相鼓励和帮助，还能交流日常生活美容服饰等）的小信息。购物频道 能让满足女性爱买东西的天性。我的购物频道定位在价廉物美，为女性们提供 质量好能让他们放心的好宝贝。 二如何运用网络的优点进行更好的表达 网站的版面风格温暖舒适，颜色主打暖色调，又以粉色系为主，简洁明了 ，大方舒适，以达到让平时忙碌工作和家庭的女性放松的功能，让她们对网站 产
4、生归属感，一个累了能让她们放松的地方。放松有时候也需要朋友，网站的 论坛就提供个这样一个让女性们互相了解认识的场所。她们在bbs里了解互相的 故事，给对方提供自己的意见，交流平时美容护肤的心得，互相晒晒对方收藏 的美男，不亦乐乎。因为网站的定义还有时尚，所以要求网站的多媒体强大。 我决定运用 flash图像查看器，弹开窗口，浮动窗口，超链接等增加网站的多媒 体化。 三网页的结构与分解 每页的结点如下图。 3 / 13 四网页所采用的技术 网页是使用 dreamweaver xm 2004制作的，采用了表单，框架集，css样式表，层，行为，模板，JavaScript 等 将设计与编写代码一起制作
5、完成的。 五网页设计日志 欢迎界面 首页 伊人购物 登录 注册 购物车计算 美容护肤品区 彩妆香水区 伊人话题 登录 注册 情感效应 娱乐前沿 旅游户外 弹出广告 注册注册成功 登录首页 注册 购物 话题 4 / 13 网页设计之中出现了很多问题，这是我始料未及的。 制作网站的一开始，由于我想做的是一个自己的网站，网站的logo就成了 我一个心头大石。想要制作一个动人的，能抓住别人眼球的logo要使用 photosho p，可是我对 Photoshop 不甚了解，而要我在原本就拮据的做网站的时间里挤出 时间来学习 photoshop ，这实在不是一个什么好主意。我想了很久之后，决定使 用pow
6、erpoint的艺术字功能外加截图完成我网站logo的制作。结果出来之后，虽 然没有达到我心目中的想象，但是相比我什么都做不出是好上千倍万倍。 解决完网站 logo问题之后，我又碰到了网页规划的问题。我原本计划是做 一个女性门户网站 伊人网，包括欢迎界面，首页，伊人购物，伊人话题即bbs），伊人读书，伊 人blog和登陆注册页面总共 9个页面的，可是我制作网页的速度是在赶不上时间 流逝的速度，第一天我从下午六点开始做做到凌晨2点总共 8个小时里，就做了 欢迎界面，一个简陋的首页和登录注册页面，而这四个页面还并没有完全达到 我要的功能，例如 JavaScript 的表单验证。我暗暗心惊，觉得自己
7、为自己制作的 目标可能太大了点，于是我决定第二天依据进度来调整网站的内容。第二天我 从下午三点开始一直做到凌晨三点，终于将网站的大体内容做出来了，由于第 二天已经是 16号了， 18号要交作业， 17号由于考试不能一天都花在制作网页上 ，而且 17号晚上还会断电，不能熬夜。于是我决定将伊人读书和伊人blog的版 块删去。此时我拥有了欢迎界面，首页，购物页，bbs页面，登录页，注册页， 注册成功页，和购物车计算页。除去欢迎页面，购物页，bbs页并未采用模板技 术，其他页面均采用。购物页面是个框架集页面，其中包括5个子页面， topfra me，leftframe，mainframe和两个不同的
8、rightframe被leftfrrame链接）。 最后面临的是页面美化问题和功能问题，我将我们上过的课件都浏览了一 遍，争取将学过的技术都运用上去，结果发现时间显示，表单验证，浮动窗口 等等一大批以 javascript为首的不会做的技术不能运用，心中甚为郁闷，鉴于18 号就要交上作业，内心决定在寒假里再仔细钻研达到能运用自如的阶段。 自身点评 这是我第一次做出有实用功能的东西，内心不可以不为激动。刚开始实训 的时候，心里不以为然，觉得怎么样的东西要我们花整整七天不间断的上课来 5 / 13 掌握，心里觉得肯定很累很没意思。没想到我们学的是制作网站。毕竟现今的 世界是信息化的的世界，随着计算
9、机技术和通信的技术的高速发展，互联网从 而得到了长足的发展，同时使得互联网在人们的工作生活中越显得重要，成为 了必不可少的组成部分。现在网上购物、远程教育、远程医疗等都是其应用的 最好证明，更进一步来说互联网的应用推动了生产力的发展，改善了人们的生 活水平。 互联网的应用离不开形形式式的网页、网站，要制作一个受欢迎的网页不 仅要内容充足、独具特色、适合大众的口味，更需要一个引人入胜的界面，无 论从排版、文字、图案、结构等要素都要组合成一个有机的整体，让网民一进 入网站就能引起其注意。 实训第一天，老师教的东西就引起了我们的兴趣，虽然很简单，虽然很简朴， 但是很开心，觉得自己也能做点实用性强的东
10、西了。所以当知道实训结束时我 们每个人自己要做一个网站时，内心应该是雀跃的，自己也想看看自己究竟能 做出一些什么东西来。 “知其易而行后难”，平时在网上冲浪时是那么的自由、舍意，在享受上 网乐趣时却不知要制作出一个看似普通的网页却要付出很大的努力，无论从网 页设计到内容的搜集都马虎不得，可能为了某一细微之处呕心沥血。以前我自 己看到不是很美观的网页时内心十分不屑一顾，觉得这样的东西实在是也好意 思拿出手给大家看，这几天我自己拼命做完我的网站时，虽然有一股成就感， 但其中更夹杂着愧疚感，我做出来的网页还不如我以前自己鄙视别人的网页好 看。 从这次制作网页的过程中可以体会到，要制作出一个完整的网页
11、首先要定 好主题，我们就可以围绕该主题取材，因为我们现阶段只能是制作一些简单的 网页，网页的内容与功能不可能与一些大型的网站如21CN、新浪、 163等比 较，如果没有了主题就变得内容空泛，根本无从着手。主题定好后就可以考虑 网页的结构，有一个好的、完整的架构就像一架飞机的骨干一样，才可以保证 网页的正常运行。同样，首页设计、整体的风格很重要。跟着就是要采集素 材，一个网页只有内容丰富、新颖及更新较快才可留住网民，这是一项长期 的、艰巨的任务。当你打开一个网站的时候，你是因为界面的美观还是因为内 6 / 13 容的需要你收藏在你的 IE中，我相信 80% 人是因为内容， 20% 中有部分是设计
12、 人员，因为界面的美观，互联网发展到今天内容为王的主题思想已经是不可以 动摇的地位，由于网络发展的可复制性，内容就是决定你网站的一个主要发展 点。对于一个网站来说，flash的制作也很重要，制作一个符合网站主题的 flash，能够起到一鸣惊人的效果。网页的整体布局可以通过表格来进行实现。 左右滚动的图片，弹出窗口等特殊效果，能够起到辅助的作用。网站整体风格 的统一可以通过模板技术来实现。至此我的网页可以说是“麻雀虽小但五脏俱 全”。 虽然说我因为时间和实力问题，删去了我原计划中的两大部分，但是能做 出现在的成果，我心里已经很开心了。虽然首页很简陋，但是点击开来的购物 频道和 bbs频道可是很丰
13、盛的，希望老师能一起看完，不要辜负我熬了三天夜的 成果。从这次制作网站上，我还明白了，也许看上去不怎么样的东西，正是别 人几天的努力成果，不能妄加践踏和鄙视，因为没有成果也有汗水。 总而言之，这次的实训大作业不但让我更加熟练的掌握了我学到的知识，丰富了我的 见闻，扩大了我的视野，也让我意识到了我的不足和可以继续进步的空间，更加让我明白 了很多平时也许似懂非懂的人生道理。我可以很自豪地说我从中掌握了以前对我来说什么 都不懂的东西。最后谢谢老师的教导，老师您也辛苦啦！ 网页打印稿 所有不同风格网页页面均截图打印出来，并做简要说明如：该页面所采用的技术、 页面特色等）。 我的网站包括欢迎界面，首页，
14、购物页，bbs页面，登录页，注册页，注册 成功页，和购物车计算页。除去欢迎页面，购物页，bbs页并未采用模板技术， 其他页面均采用了模板技术。购物页面是个框架集页面，其中包括5个子页面， topframe，leftframe，mainframe和两个不同的 rightframe被leftfrrame链接）。 Bb s的三个链接均为锚点链接。另外每页的“ 联系我们 ” 为电子邮件链接。 另打开网站时会弹出一个如下界面 请老师点击允许，否则一些效果不会出现，谢谢！ 7 / 13 这是我的欢迎页面，点击enter 可以进入，进入时播放音乐 这是点击欢迎页面后的首页，简洁大方。“ 伊人网 ” logo
15、是自身链接； “ 登录” ，“ 注册” 分别链接到相应页面， “ 联系我们 ” 为电子邮件链接。首页应用了模板技术 。“shopping ”和“talking”分别对应伊人网的两大板块，点击图片即可进入。 8 / 13 点击“ 登录” 时的登录页面 点击“ 注册” 后的注册页面 9 / 13 注册成功之后的页面，可选择跳转到购物或bbs页面。 首页点击 “ 联系我们 ” 时的电子邮箱链接 10 / 13 购物页面。首页点击 “shopping ”时可进入。这是一个框架集页面。购物窗口打开 时弹出广告窗口，页面中间是个flash图像查看器，图片能变换。 点击购物页面的 “ 美容护肤 ” ，mainframe改变了内容 11 / 13 点击购物页面的 “ 彩妆香水 ” ，右边 mainframe变化 点击购物页面的 “ 购物车 ” 可进入购物计算器窗口 12 / 13 伊人网的 bbs界面。从首页的 “talking”可进入。一行图片可从右向左滚动 点击bbs界面的 “ 娱乐前沿 ” 或“ 情感效应 ” 或“ 旅行天下 ” 时的锚点链接 谢谢老师观赏！老师辛苦了！祝老师新的一年虎虎生威，所有的节 日都快乐！ 13 / 13