网页设计说明书(同名9757)

网页设计毕业设计说明书网页设计毕业设计说明书一、引言在当今数字化时代，互联网已经成为人们生活中不可或缺的一部分。

随着互联网的普及和发展，网页设计作为一门新兴的职业逐渐受到人们的重视。

本毕业设计旨在通过对网页设计的深入研究和实践，探索如何利用设计原理和技术来创造出具有吸引力和用户友好性的网页。

二、背景随着互联网的快速发展，越来越多的企业和个人开始意识到网页设计对于网站的重要性。

一个好的网页设计不仅可以吸引用户的眼球，还能提升用户体验，增加网站的可用性和可访问性。

因此，学习和掌握网页设计技能对于未来从事相关职业的学生来说至关重要。

三、目标本毕业设计的目标是通过学习网页设计的基本原理和技术，设计并开发一个具有创新性和实用性的网页。

通过此项目，将会探索以下几个方面：1. 网页设计的基本原则：包括布局、色彩、字体等方面的设计原则；2. 用户体验设计：通过用户研究和测试，优化网页的用户界面和交互设计；3. 响应式设计：设计一个适应不同设备和屏幕尺寸的网页；4. 网页性能优化：通过优化代码和图像等方式，提高网页的加载速度和性能。

四、方法与步骤1. 网页设计理论学习：通过学习相关的网页设计理论和实践，掌握网页设计的基本原则和技巧；2. 网页设计工具使用：学习并掌握一些流行的网页设计工具，如Adobe Photoshop、Adobe Illustrator等；3. 网页开发技术学习：学习并掌握一些常用的网页开发技术，如HTML、CSS、JavaScript等；4. 网页设计实践：根据学习的理论和技术知识，设计并开发一个具有创新性和实用性的网页；5. 用户测试和反馈：邀请一些用户进行测试，并根据他们的反馈进行网页的优化和改进。

五、预期成果通过本毕业设计，预期将会产生以下几个成果：1. 网页设计说明书：详细记录网页设计的整个过程，包括设计思路、技术选择、界面设计等；2. 网页设计原型：根据设计说明书，制作一个网页设计的原型，展示网页的布局和交互效果；3. 网页设计实现：根据设计原型，使用HTML、CSS等技术实现一个完整的网页；4. 用户测试报告：记录用户测试的结果和反馈，分析用户对网页的使用体验和建议；5. 毕业设计论文：撰写一篇毕业设计论文，总结整个设计过程和成果，探讨网页设计的相关问题和未来发展趋势。

网页设计说明书网页设计说明书一、网页结构设计二、网页制作环境及使用技术1、用到的软件：dreameweaver8、美图秀秀2、在字体上面用到了一点css，因为我比较喜欢楷体字，但是版面上没有楷体，所以当时自己加了楷体，还加了仿宋体。

如图：3、多处用到了javascript行为（跑马灯，图片滚动，幻灯片广告）幻灯片切换：首页中的自我介绍、我的学校、专业介绍中都用到了幻灯片切换跑马灯：首页的友情链接、所学课程页面用到了跑马灯图片滚动：首页最下面有南邮的校园风景图片滚动、学校介绍页面和社会实践页面都用到了图片滚动以上三幅图是切换中的幻灯片如上图是跑马灯上图是图片滚动这个是我自己做得图片滚动，是每个图片都在自己的框格内滚动上图也是在自己框格内滚动的图片，图片是用美图秀秀拼的图4、用到了几个装饰作用的javascript行为：跟随鼠标的字符、鼠标响应文字变色、字符围绕鼠标、旋转变换文字等特效“Welcome“和“欢迎您的光临”用的是字符跟随鼠标特效以上文字用的是鼠标响应文字变色特效“欢迎你的光临”用的是旋转变换文字特效5、表单方面我用的不是与我联系页面，而是用户注册页面，先插入表单，再插入表格6、网页配色上面，我并没有用单纯的页面背景，而是用的自己搜集来的图片作为背景的7、首页中的用户登录界面是把老师给的模板中的代码拿过来直接用的8、背景音乐：开始是每一个页面都添加了背景音乐（在head中加bgsoundscr….），后来发现我用的是框架，只要一个背景因为一直循环就够了，就把其他页面中的背景音乐代码都删了。

我的背景音乐用的是winter in my heart 插入的代码如下图：9、用了顶部和嵌套的左侧框架，如图所示：10、要注意的是，特效和视频的播放要用到一个playswf的小插件，我一开始不知道，所以效果一直显示不出来。

如图是playswf小插件三、个人体会听老师讲课的时候觉得应该不太难，表格做起来没问题，javascript效果应该就是把代码复制粘贴过去就可以了。

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

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

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

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

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

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

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

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

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

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

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

《网页设计》 网站制作说明书一、网站简介网站名称 茶文化 教 学 院 计算机学院 专 业 计算机信息管理班 级 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、文字如何环绕在图片周围。

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

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

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

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

各景点页面是以首页右边排版为模版制作的，每张图片都是经过了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种，否则会给人的视觉感受就会觉得很乱。

塔里木大学必修课《网页设计基础》《个人网站》设计说明书学生姓名郭金亮学号2021212302所属学院动物科学学院专业动物科学班级动科16-3授课教师杨翠芳目录1.网站介绍 (3)1.1网站构思 (3)1.2网站功能 (3)2.网站结构图 (3)3.操作步骤及页面设计说明 (4)1．创建站点 (4)（1）在e盘，创建站点letu。

(4)（2）根据网站结构图建立好站点内的文件夹和文件。

(4)2．建立并保存模板 (5)（1）新建模板 (5)（2）保存模板 (5)（3）给模板设置页面属性 (6)（4）插入表格 (7)个人网站1.网站介绍1.1网站构思为自己创建一个网站，不只是局限于制作其他网站，说起创建网站，人们就只能想起那些公益网，环保网等等，可是，我要为我自己创建一个自己的专属网站，不再局限于特定的什么东西，我就是我，里面应该有我喜欢玩的，喜欢看的，应有尽有，首先创建模板，然后以模板创建其他的子页。

其中采用css样式、锚点链接、外部链接、邮件链接、内部链接、图片链接及鼠标经过图像、背景音乐等，使整个网页设计不仅生动而且更加吸引人，最重要的一点就是凸显我的个人style。

1.2网站功能让认识我的人更多的了解我，不认识我的人了解我，也让更多的人了解一些资讯，网游等2.网站结构图3.操作步骤及页面设计说明（即图片和文字结合的形式）1．创建站点（1）在e盘，创建站点sda。

执行“站点”菜单中的“新建站点”命名，在弹出的站点定义对话框中选择“高级”选项卡，在“本地信息”分类中，定义“站点名称”为“web”；“本地根文件”为“c:\Users\Administrator\Desktop\文件夹；”“默认图像文件夹”为“c:\Users\Administrator\Deskto\guojinliang”。

（2）根据网站结构图建立好站点内的文件夹和文件。

2．建立并保存模板（1）新建模板（2）保存模板执行文“文件”菜单中的“另存为模板”命令，在弹出的“另存模板”对话框中选择站点为当前的“web”,命名为“index”,如图所示，单击“保存”按钮。

四叶草
3
3 首页设计
3.1栏目与版块
主页栏目主要有 导航栏、文章、心情、相册、留言板 、关于我、音乐盒子、链接等栏目。

版块主要有 导航版块、多媒体版块、文字版块、版权版块、滚动文字版块
3.2 实现方法
1、设置标题：我的博客。

页面属性：左边距80像素，上边距30像素，链接颜色和已访问链接颜色为#666666，变换图像链接为#FF0000，下划线样式选为“仅在图像变换时显示下划线”。

2、利用Photoshop 编辑图片加入文字，用fireworks 对编辑好的图片进行切片，插入表格、图片、文字，添加热区链接，CSS 样式美化文字栏，JavaScript 脚本制作文字滚动效果。

3.3效果
图3.2 主页（a ）
广东技术师范学院计算机科学学院
4
图3.3 主页（b ）。

目录第一章：网页设计规划 (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属性创建指向另一个文档的链接。

网页设计说明书一、网页主题花卉展示二、主页的布局三、用到的软件及技术Macromedia Dreamweaver 8.0美图秀秀Javascript技术四、Javascript图片特效的代码段1、<script language =javascript >var curIndex=0;//时间间隔(单位毫秒)，每秒钟显示一张，数组共有5张图片放在image文件夹下。

var timeInterval=3000;var arr1=new Array();arr1[0]="image/show.png";arr1[1]="image/a.png";arr1[2]="image/e.png";setInterval(changeImg,timeInterval);function changeImg(){var d=document.getElementById("d");if (curIndex==arr1.length-1){curIndex=0;}else{curIndex+=1;}d.src=arr1[curIndex];}</script><img id=d src ="image/show.png" width="943" height="300">2、<script language="JavaScript"><!--var slidespeed=3000var slideimages=new Array("image/1.png","image/2.png","image/3.png","image/4.pn g")var slidelinks=new Array("index.html","index.html","index.html","index.html") var imageholder=new Array()var z=window.createPopupfor (i=0;i<slideimages.length;i++){imageholder[i]=new Image()imageholder[i].src=slideimages[i]}function gotoshow(){window.location=slidelinks[whichlink]}//--></script><a href="javascript:gotoshow()"><img src="image/1.png" name="slide" border=0 width="126" height="126"style="filter:progid:DXImageTransform.Microsoft.Pixel ate(MaxSquare=15,Duration=1)" /></a><script language="JavaScript"><!--var whichlink=0var whichimage=0var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0 function slideit(){if (!document.images) returnif (z) document.images.slide.filters[0].apply()document.images.slide.src=imageholder[whichimage].srcif (z) document.images.slide.filters[0].play()whichlink=whichimagewhichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0setTimeout("slideit()",slidespeed+pixeldelay)}slideit()//--></script>五、网页的另外两个页面文件inner.htmlbeautiful flower.htm1.html六、总结虽然我做的网页在技术方面有些单薄，在内容方面也不够完善，配色可能也不够协调，但是我用心完成了每一部分，在整个网页制作过程中我也学到了很多，希望老师和同学们能喜欢我的小作品，并给我的小作品提出改进意见，O(∩_∩)O谢谢！。

交通运输系计算机程序设计综合实践教学系统开发说明书学号：20107745 20107746 20107747姓名：黄蕴莹贺海燕蒋雪梅班级：铁运四班题目：网站设计入门指导教师：陈东廖健刘意朱虹宇王正彬沈丽萍目录1. 网站概述设计 (2)1.1. 项目背景与意义 (2)1.1.1. 项目背景 (2)1.1.2. 项目意义 (2)1.2. 相关技术与开发工具介绍 (2)2. 网站总体设计 (3)2.1. 需求分析 (3)2.1.1. 功能需求 (3)2.2. 用户界面需求 (4)2.3. 概要设计 (4)2.3.1. 软件结构设计 (4)2.3.2. 数据库分析与设计 (5)2.4. 网站的总体规划 (5)3. 详细设计 (6)3.1. 网站主体的设计 (6)3.2. 主页设计 (6)3.3. 功能模版的设计 (7)3.3.1. 各个模板界面设计 (7)3.3.2. 各模板界面间的衔接设计 (11)3.4. 代码设计 (11)3.4.1. 管理登录 (11)3.4.2. 留言板 (11)3.4.3. 日期 (16)4. 网站的更新维护 (17)5. 总结与展望 (17)5.1. 当前存在的问题和今后开发的方向 (17)5.2. 心得与体会 (18)1.网站概述设计1.1. 项目背景与意义1.1.1.项目背景随着网络技术的发展，许多的人们都通过上网来打发无聊的时间，所以在网上发布一些消息，同学们很快就会知道。

网站制作为校内事务的传达和通知提供了方便。

所以本次暑期计算机实习，我们组所选的题目是第十个网站设计入门。

主要任务是根据相关资料及老师要求设计出一个我系的系网。

要求外形越美观越精致越好。

1.1.2.项目意义我们学习就是为了获得知识，现在我们学习了网站设计，当然就是要能做一个精美的网站。

在此次网站设计中，我们要能更加的了解网页设计工具强大的功能和更好的使用它。

诚然，在此次改进我们的系网主页，一方面是为了完成我们的作业，但更重要的是把我们所学到的东西用在具体的实践之中，所以，这次设计的目的也是要我们更好的掌握和使用网页设计工具和技术，以便提高对网页知识的更深层了解。