《网页设计》大作业设计说明书模板

合集下载

网页设计说明范文

网页设计说明范文
《网页设计说明》
网页设计是指利用各种技术和工具，将内容、布局、颜色等元素有机地融合在一起，呈现给用户一个完美的网页界面。

一个好的网页设计不仅要具有美观的外观，还要具有良好的用户体验和功能性。

首先，网页设计需要考虑用户体验。

网页设计师应该充分了解用户需求，以用户为中心，设计出符合用户习惯的界面。

网页的导航、布局、文字、图片等元素都应该符合用户的使用习惯，让用户能够快速、便捷地找到自己需要的信息。

其次，网页设计还需要考虑页面的功能性。

不同类型的网页需要包含不同的功能，比如电商网站需要有购物车和支付功能，咨询网站需要有文章分类和搜索功能等。

设计师需要根据网页的用途来选择合适的功能，并保证这些功能的稳定性和易用性。

此外，网页设计还需要考虑页面的美观性。

色彩搭配、排版、图片选择等都需要考虑到整体的美感，使网页看起来清晰、舒适，让用户愿意停留并且回访。

同时还需要考虑网页的响应式设计，确保网页在不同设备上能够呈现出良好的效果。

综上所述，一个好的网页设计需要综合考虑用户体验、功能性和美观性，让用户能够快速找到自己需要的信息，并有愉快的浏览体验。

希望设计师们在网页设计过程中能够细心地考虑这些因素，打造出更好的网页界面。

网页设计说明书

设计说明书需求分析目标定位a、制作这个网站的目的是为了方便我们学院的新生与老生能快速浏览的我们学校的基本情况,了解我们学校所有好玩,有趣的事情。

b、本网站的主要职能是实时为新生提供部分新的资讯。

c、本网站所面向的用户是所有进入我校的同学以及想要了解我们学校的用户。

用户分析a、使用本网站的用户主要是想要了解我们学校的所有信息,并且能够为他们提供所需的生活所需的信息。

b、他们最想本网站为他们提供校内外的所有资讯，包括饮食，住宿，景点旅游等.c、本网站制作内容架构清晰，避免过多的文字介绍造成用户过多阅读的麻烦.d、用户可以每天浏览我们为其提供的实时热点以及校内外最新的资讯，比如：校园通知、饭堂价格等。

市场前景a、本网站的市场需求在于为本校师生以及想要了解我校的用户提供最便捷，最新的信息.b、基于前面的分析，决定了本网站的设计风格要简明、清晰；主题围绕着学生所需而开展. 网站规划内容策划a、本往网站主要经营的内容是：校园文化、校园资讯、美食住宿、周边景点等主题。

b、基于以上主题，其中重点制作的是校园文化和美食住宿；而辅助的是校园资讯等主题. 对于网页如此划分的目的是，使用本网站的用户都是想要了解我们学校于他们息息相关的事情，无论是新生、老生还是其他用户，都想知道我们学校有哪些特色的文化和美食。

文化可以增进他们知道我们学校的最近的文化活动生活。

而美食，则能吸引更多的学生来了解我们学校的吃货，这对于新进校园的新生有着极强引导作用。

界面设计a、对于每个版块的设计都有着其不同的元素，首页,主要突出网页围绕的主题设计导航，并且使用简单明了的文字对学院做出说明；而二级页面，则分为六个版块，每个版块都有着不同的设计元素来突出其主题；对于三级页面，由于其划分表达内容上得较为详细，所以社体元素较为单调以图文介绍为主。

b、全版设计所使用的元素极为简单，主要以框架、线条、设计，在此基础之上配合色彩、阴影、重叠、浮动、定位等的元素来协调画面风格。

网页设计说明设计书[精华]

网页设计说明设计书[精华]《计算机网页设计》大作《保护我们的水资源》网页设计说明设计书班级: 姓名:学号: 电话我的作品命名为《保护我们的水资源》。

主要是想要表达我们要保护好我们家园的水资源这个主题。

我的网站共分为四个栏目，分别为“主页”，主要想表现出水资源危机对我们的警示; “我们与水”，表现我们可以适当的利用水资源而又不破坏水资源;“水的悲剧”表现现在水资源受到严重的破坏;而“我们的祝福”，希望人们能真正行动起来，保护我们的水资源。

网页设计的主要步骤为: 设想好整个轮廓，用photoshop进行图片处理，勾勒出整体画面。

再用dreamweaver设计并完成网页结构。

最后用flash制作出比较动态的网页效果。

下面是用photoshop设计的最终效果一、网页效果图制作(一) 主要图层结构中间的矩形框架效果采用添加图层样式的“混合选项-投影-内阴影”，其中六个背景点的相同小水珠利用椭圆工具+滤镜+混合选项+渐变+图层的复制来完成。

文字部分用两个层，利用删除文字栅栏，线性渐变，文字样式，自由变换，不透标题明度等效果做出来，标题上的水龙头利用ps的魔棒工具勾出后添加一个图层和文字部分共同组成标题。

主要有四个菜单按钮，主页菜单按钮不同于其他三个菜单按钮，稍后将有具体介菜单绍。

“主页” 、“我们与水” 、“水的悲剧”和“我们的祝福”，采用的文字样式为菜单文幼圆，蓝色的。

字三个图层:一个图层，导入ps好的图片并修改，并另加一图层，利用文本工具主体添上文本“世界上最后一滴水将会是谁的泪水”，其文字变形样式为“鱼眼”，另有一图层卷页效果“新建图层——矩形选框工具——渐变填充——自由变换——右击该矩形——透视——旋转”(二) 主要步骤讲按钮的制作过程。

“主页”按钮的做法:新建一个图层，用选框工具画一个椭圆，点击菜单“滤镜?扭曲?球面化”对新的图层进行处理，数量设置为60%--在新图层上点击右键，选择“混合选项”。

网页制作说明书

《网页设计》网站制作说明书一、网站简介网站名称茶文化教学院计算机学院专业计算机信息管理班级 09信管姓名孙亚指导教师何军华2011 年 12 月 14 日随着市场经济的高速发展，经济已经逐渐全球化，商务贸易已经日趋成熟，传统的商业模式已经不能满足人们的日益需求，商业模式已经逐渐开始向电子商务模式转变。

本网站是一个商务公司的门户网站，整个网站共分为5个主要部分，分别由首页、关于、访客留言、作者等连接组成。

首页标题栏主要链接企业文化、公司规模、公司产品等相关内容，让浏览网页的人对公司有个大致的了解；左侧栏主要连接了商品列表、访客留言板，以供进入网站的留言、提意见等；主题内容只要链接公司的最新动态以及相关新闻和新出的产品等，让浏览网页的人嫩娘个一目了然的了解到茶文化。

二、网站制作步骤简介该网站为了突出直观、美观的效果大量使用了photoshop、dreamweaver等常用网页制作软件，下面对制作过程作一个简单介绍。

一、用photoshop制作主页效果1、新建一个ps任务，并根据最初的设计描绘出辅助线2、并对页内各模块进行填充修改，并配色。

3、制作标题栏二、创建站点在本地创建一个名为‘茶文化’的站点。

三、使用dreamweaver编辑模板页1、创建首页的基本框架2、插入表格3、插入图片4、输入相关文字四、完成首页的制作五、使用模板完成其他二级页面的制作1.企业文化2.公司规模3茶行业界面3.公司产品5．图册界面六、检查所有页面的链接将所有页面进行相关链接，完成制作。

七、总结通过本次网站的制作，让我更加了解了photoshop对网页美工的重要性，同时也使我对dreamweaver的常用操作更加熟练，以及一些网页制作的技巧。

1、小图标怎样与文字对齐。

<img src="小图标位置" style=" vertical-align:middle" />订阅采购信息2、文字如何环绕在图片周围。

网页设计大作业模板

伊犁师范学院《网页设计》期末课程设计设计题目：草样年华个人网站学号：014姓名：刘宝龙院系：电子与信息工程学院专业班级：计算机科学与技术08-2指导老师：王雪峰一、设计思想在已跨入21世纪的今天，人类使用和学习信息的方式以及信息的包装方式正在进行着不可阻挡的革命，这次革命将比印刷术的出现所产生的影响以及对社会发展的推动远为复杂而巨大。

目前，我国上网的人口已经越来越多，成为世界上网民最多的国家。

许多人在需要查询信息，首先想到的就是上网。

网站的迷人之处在于综合使用文本、图像、声音、动画和视频等信息和内容，具有丰富的多媒体信息与互动特点，无可置疑，网站已成为最吸引人的也是最有效的信息传递手段和方式。

随着网络技术的发展，各类网站纷纷出现。

个人网站也成为了一种时尚。

越来越多的人希望拥有自己的网站，开辟网络世界的一片天地，发展自己的才华和风格。

二、开发环境及软件Windows XP，Macromedia Dreamweaver 8，photoshop CS3，flash等三、系统结构功能图、页面结构草图及部分页面截图四、部分代码（主要添加CSS代码）1.添加浮动照片<div id="www_qpsh_com" style="position:absolute; left: 88px; top: 57px; width: 252px; height: 313px; visibility: visible;"><a href="" target="_blank"><a href="" target="_blank"></a></a><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-0000" codebase="" width="200" height="300"><param name="movie" value="image/" /><param name="quality" value="high" /><embed src="image/" quality="high" pluginspage="" type="application/x-shockwave-flash" width="200" height="300"></embed></object></div><script>var x = 50,y = 60var xin = true, yin = truevar step = 1var delay = 10var obj=("www_qpsh_com")function floatwww_qpsh_com() {var L=T=0字滚动<marquee behavior=alternate direction=right align=middle border=1><strong>欢迎大家来到糖糖工作室...<span class="STYLE11"></span></strong></marquee3.文本css样式. <style type="text/css"></style>4.超链接变化代码.body {color:#FF0000;}a:link{color:#FF3399;font-size: 16px;text-decoration:none;}a:visited{color:#FF0000;font-size: 16px;text-decoration:none;}a:hover {font-size:16px;color: #FF3399;text-decoration: underline;}a:active{color:#3366FF;}五、部分原创素材Logo图像导航条六、主要界面截图1、主页（必须包含）2.个人档案3.个人日记4.留言版七、设计总结第一要具备专业的网页制作技术，能够用模板，框架实现自己的所想。

网页设计说明书

我所做的网站是：海南环岛旅游导航目的：海南作为我国的一个热带岛屿，有着优美的自然风光和丰富的旅游资源，是游客观光、旅行的胜地，我想通过这个网站向人们介绍各个迷人的景点，吸引更多游客来海南观光。

内容：这个网站主要介绍环岛的一些主要的景点和一些特色景点，以及简要介绍它们由来、风俗及相关传说等。

在这个网站中我侧重景点介绍，推荐一些人们路线，还有一些宾馆、实用电话的简单说明。

制作思路：为了可以很好的达到我想要的效果，我首先进行一个详细的规划，首页的排版中的那副大图是为了能多吸引浏览者的目光。

各景点页面是以首页右边排版为模版制作的，每张图片都是经过了PS和美图秀秀处理，然后分类排列。

我主要采用层和表格制作网页，我的链接主要是文字链接，其中景点介绍页面链接了28个景点子网页，网页中还有图片的滚动效果。

我能力有限，只有最基本的图片滚动效果。

因为我浏览网上介绍旅游景点的网页，都是文字太多，基本上不做图片的滚动效果，给人的感觉很乏味，所以我我做的网站实现了图文并茂。

我觉得视觉感受很重要，如果没有一个好的第一视觉印象的话，这个网站是没人会光顾的，这样下面的内容就没办法向别人展示了，那这个网站也就没意义了。

所以我尽可能的让我的网页能吸引浏览者的眼球。

制作步骤：根据制作思路，首先是设计首页，将要表达的信息进行总体排版，然后根据排版出来的主页面来做子页面，最后将子页面和主页面进行创建链接。

图片都经过处理，分门别类放好，绝不混乱。

网页所能实现的功能：我这次做的是静态网页，但我在其中实现啦图片的滚动效果，以增加网页的灵动性。

下面通过网页截图详细的介绍：大图让整个网页看起来清晰明亮以首页右边排版为片为模板推荐的热门路线宾馆推荐及实用电话部分技术代码：制作图片滚动及当鼠标停在图片上时会换另一张图片：<div id="apDiv12"><a href="../hony_jd2/hony_jd22_datpl/datpl.html"><img src="n4.jpg" width="105" height="26" /></a></div><div id="apDiv13"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','tds2.jpg',1)"><marquee><img src="tds1.jpg" name="Image16" width="214" height="180" border="0" id="Image16" />心得系会：一个网页的色彩最好不要超过3种，否则会给人的视觉感受就会觉得很乱。

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

《网页设计与制作工程实训》大作业选题名称：__伊人网的制作与体会________________ 设计人：___李薇_______________班级：__软件工程081班______________学号：__8000108025________________南昌大学软件学院2010.元设计说明书:一．选题的分析1.我是怎么想到做女性网站的？作业刚布置下来的时候，我心里千回百转过很多念头，做什么网站能将我们学过的知识全部都用上呢？貌似除了作为模板教学的购物网站就没有其他更好的选择了，可是继续做教学时学的淘宝或拍拍太无新意，不和我意。

想来想去，还是没有中意的方案。

可能是白天想这个想太多了，我晚上竟然梦到了我要做的，就是易物网站。

不知老师是否记得一个曲别针换一个大房子的事，这就是我要做的易物网。

终于得到了一个让我满意的方案，很开心。

可睡醒了仔细一想觉得还是不行，可行性不大，于是我放弃了这个方案。

当时已经是实训最后一天了，在结束实训的时候，我突然灵光一闪，决定做一个女性网站。

首先，一个女性网站针对了我的特点，是我想做的，也是我感兴趣做的。

其次，一个女性网站可以包括购物频道和bbs频道，可以充分将我学到的知识运用上去而又不免于流俗。

2.我要表达什么内容，如何展开设计？打定主意便开始设计。

这个女性网站是针对都市女性的网站，旨在在她们休闲的时候有个能让她们放松自我，同时得到很多对自己有用的信息。

为了达到放松的目的，网站的主色调采用暖色系，主打粉色系，看上去温暖活泼时尚舒适，让人有一探究竟的欲望。

而为了同时达到对女性自身有益的目的，我在选择网站内容版块上下了很大的功夫。

女性最关注的是什么呢？是她们的感情与魅力。

Bbs能让她们能有个诉说感情发泄心情的地方，同时能在那浏览别人的故事，互相鼓励和帮助，还能交流日常生活（美容服饰等）的小信息。

购物频道能让满足女性爱买东西的天性。

我的购物频道定位在价廉物美，为女性们提供质量好能让他们放心的好宝贝。

网页设计说明书

目录第一章：网页设计规划 (1)一、整体规划 (1)1.网页设计目的 (1)2.网页定位： (1)3.网页模块的设置 (1)第二章：网页设计与制作 (1)一、主页设计 (1)1.模块设计 (1)2.风格与色彩 (2)二、子页设计 (2)1.基本信息模块 (2)2.学习成绩模块 (2)3.获奖情况模块 (2)4.实践经历模块 (2)总结 (3)第一章：网页设计规划一、整体规划1.网页设计目的我们读书就是为了获得知识，学习了网页设计就是为了把它运用到实际中。

此次网页设计的目的有三个。

第一，完成我们的考试，对我们平时学到的知识进行考核。

第二，把学到的知识运用到实践中。

正值大四，求职是我们必须面对的事情，一份完美的简历是找到一份满意工作的敲门砖。

把自己的简历做成个人网页是一个独特新颖的方式，能让大家直观快速地了解我。

第三，在此次的网页设计中，能把之前学到的知识前后联系起来，系统地得到复习，加强对知识的掌握程度。

2.网页定位：1)让大家更快更全面地了解我。

2)把自己以最新颖的方式推荐给大家。

3)网页设计风格要符合简历本质的要求。

3.网页模块的设置此次网页设计共分成五个模块。

第一个是网页主页，其次是四个子网页，分别是我的基本信息、学习成绩、获奖情况、实践经历四个模块。

主页中包含有四个子网页的链接。

在基本信息页面中，可以了解到我的个人信息、优势、技能和在校任职情况等。

在学习成绩模块可以了解到大学期间每个学期我的综测排名情况，还可以链接到我的详细成绩单。

获奖信息页面中可以了解到大学期间不同时间段我获得的奖励，并附上了主要的几张奖状。

在实践经历页面中可以了解到大学期间我的一些实践情况以及每次实践经历后提高的能力。

第二章：网页设计与制作一、主页设计1.模块设计此页面上包含四个链接图标，分别为基本信息、获奖情况、学习成绩和实践经历。

在photoshop中制作好四个链接图片，设定图片大小。

通过使用<a>标签在HTML中创造链接，使用herf属性创建指向另一个文档的链接。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

《网页设计与制作工程实训》
大作业
选题名称：__________________
设计人：__________________
班级：__________________
学号：__________________
南昌大学软件学院
2011.2
设计说明书:
选题的分析
针对选定的课题，打算如何展开设计，想表达什么内容。

如何运用网络的优点进行更好的表达
网站的版面风格、颜色、互动性、多媒体化。

为什么这样做。

网页的结构与分解
绘制网站页面结构、链接点
网页所采用的技术
网页编写所需要的软件。

网页设计日志
设计制作过程中出现的疑难问题，以及如何解决方法。

自身点评
写出对自已做出的网站后，个人感想或看法。

网页打印稿
所有不同风格网页页面均截图出来，并做简要说明（如：该页面所采用的技术、页面特色等）。