电大网站设计毕业设计说明书.docx
《电大网站设计毕业设计说明书.docx》由会员分享，可在线阅读，更多相关《电大网站设计毕业设计说明书.docx（20页珍藏版）》请在冰豆网上搜索。
电大网站设计毕业设计说明书
第一章概述
1.1网站建设的意义
Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。
作为Internet上一种先进的，易于被人们所接受的信息检索手段，WorldWideWeb（简称WWW）发展十分迅速，成为目前世界上最大的信息资源宝库。
据估计，目前Internet上已有上百万个Web站点，其内容范围跨越了教育科研、文化事业、金融、商业、新闻出版、娱乐、体育等各个领域，其用户群十分庞大，因此，建设一个好的Web站点对于一个机构的发展十分重要。
近年来，随着网络用户要求的不断提高及计算机科学的迅速发展，特别是数据库技术在Internet中的广泛使用，Web站点向用户提供的服务将越来越丰富，越来越人性化。
Internet的迅猛发展正在彻底地改变我们的生活、工作方式，网络已经成为我们生活中不可缺少的一部分。
信息时代的来临拓宽了大家进行自我提升的途径，同时也对大家的素质提出了更高的要求。
被称为当今社会的“天之骄子”的电脑主宰着世界的前进，而主宰电脑的我们则更应该多思考，多研究，多学习。
只读书的学习方式一去不复返，科技的日新月异，使我们不得不学习一种新的知识--计算机技术。
怪不得有人说“不会电脑的人，将是新世纪的文盲”，足见网上学习的重要性。
因此网站建设在Internet使用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。
1.2网站的定位
为了弘扬中华传统文化，提高大家的生活质量，使大家的烹调技术有进一步的提高，本网站的定位为：
为用户提供最方便最详尽的美食菜谱，按照菜系对菜谱进行分类，使用户找到自己想要的菜式做法将更加简单。
网站的名称为《美食网》，为生活类网站。
设置：
川菜、鲁菜、粤菜、江淮菜四个大类。
每个大类下都有：
热菜、凉菜、主食三个方面。
通过不同角度，向用户展示四大菜系的代表美食。
致力于为中国家庭和个人提供完美的美食解决方案。
第二章网站的总体设计
2.1网站的规划
网站采用清新简洁的风格，避免繁杂纷乱的现象。
使用户方便快速的找到自己想要的信息。
川菜采用红色为主色调；鲁菜采用橙色为主色调；粤菜采用蓝色为主色调；江淮菜采用绿色为主色调，体现各大菜系不同的特点。
并配以和主题相符合的图片，以突出主题。
网站设置一个首页，四个一级导航，每个一级导航下设置三个二级导航。
每个二级导航下添加十篇文章。
网站结构及栏目如下：
2.2素材的搜集
做网站之前，我们要事先根据网站设计的方案，定位网站的方向，然后搜集一些符合网站主题的素材供制作。
这些素材包括有：
色彩搭配、文字、图片、多媒体等。
1.文本内容素材的收集
具体的文本内容，可以让访问者清楚地知道作者的Wpb页中想要说明的东西。
我们可以从网络、书本、报刊上找到需要的文字材料，也可以使用平时的试卷和复习资料，还可以自己编写有关的文字材料，将这些素材制作成Word文档保存在“文字资料飞子目录下。
收集的文本素材既要丰富，又要便于有机地组织，这样才能做出内容丰富、整体感强的网站。
2.艺术内容素材的收集
只有文本内容的网站对于访问者来讲，是枯燥乏味、缺乏生机的。
如果加上艺术内容素材，如静态图片、动态图像、音像等.将使网页充满动感和生机，也将吸引更多的访问者。
上海网站设计时候这些素材主要来自于以下4个方面。
从Internet上获取。
可以充分利用网上的共享资源，如使用XX、Sohu等引笨收集图片素材。
从CD-ROM中获取。
在市面上，有许多关于图片素材库的光盘.也有许多教学软件，可以选取其中的图片资料。
利用现成图片或自己拍摄。
既可以从各种图书出版物（如科普读物、教科书、杂志封面、摄影集、摄影杂志等）获取图片。
也可以使用自己拍摄和积累的照片资料。
将杂志的封面彩图用彩色扫描仪扫描下来，经过加工后。
整合制作到网页中。
自己动手制作一些特殊效果的图片，特别是动态图像，自己动手制作往往效果更好。
可采用Flash进行制作。
鉴于网上只能支持几种图片格式，所以可先将以上途径收集的图片用Photoshop等图像处理工具转换成JPG.GIF形式，再保存到“图片资料”目录下。
另外，图片应尽量精美而小巧，不要盲目追求大而全，要以在网页的美观和网络的速度两者之间取得良好的平衡为宜。
搜集素材是网站设计关健性一步，要学会搜集素材的方法和方式，并且能分类保存、整理需要的素材，切不可引用一些不健康或是过于花哨的动画图片素材。
第三章网站各页面的详细设计
3.1主页的设计及制作
首页一个网站最先展示给用户的页面，因此，首页的设计显得尤为重要。
网站整体采用橙色背景，顶部左侧为网站的logo“美食网”，右侧为美食网的宣传广告条。
下面为导航条，导航内容分别为：
川菜菜系、鲁菜菜系、粤菜菜系、江淮菜系四个分类。
以上为网页头部分，后面所有网页都会使用同样的网页头，所以将页面先另存为模板，以供后续使用。
下面添加宣传图片，在云纹背景下，以书法艺术字体制作四大菜系的名称并制作一个美食网的印章。
使主页看起来简洁大方。
网页最下面加入关于本站的版权信息。
3.2专题网页的设计及制作
载入前面保存的模板，在导航条下面表格中插入一行三列表格。
每个表格中输入二级导航的文字，制作出二级导航链接。
下面左侧为本类菜系的介绍，右侧为本类菜系代表性图片。
二级网页共四个网页：
川菜：
调味多变，菜式多样，口味清鲜醇浓并重，以善用麻辣著称，具有别具一格的烹调方法和浓郁的地方风味。
根据川菜的特点，背景色采用红色，选用图片也以红色调为主以突出主题。
鲁菜：
原料多选禽畜、海产、蔬菜，善用爆、熘、扒、烤、锅、拔丝、蜜汁等烹调方法，偏重于酱、葱、蒜调味，善用清汤、奶汤增鲜，口味咸鲜。
根据鲁菜特点，背景采用橙色，图片也要贴近鲁菜主题。
粤菜：
粤菜注意吸取各菜系之长，烹调技艺多样善变，用料奇异广博，在烹调上一炒、爆为主，兼有烩、煎、烤，讲究清而不淡，鲜而不俗，嫩而不生，油而不腻，有“五滋”、“六味”之说。
根据粤菜特点，背景选用蓝色，考虑到粤菜系煲汤闻名，图片选用汤类，以贴近主题。
江淮菜：
江淮菜是江浙菜和淮扬菜的合称。
原料多以水产为主，注重鲜活，刀工比较精细，尤以瓜雕享誉四方。
善用炖、焖、烤、煨等烹调方法，口味平和，清鲜而略带甜味。
根据此特点，背景选用清新的绿色，图片也要选择江淮菜的水产菜肴，以贴近主题。
依次制作网页的内容，设置好文字和图片的链接，及文章列表的链接。
将网页存为模板，以供后续使用。
3.3分类网页的设计及制作
载入保存的模板文件，左侧采用相应的图片制作本类的logo。
中间添加本类的文章列表。
列表四周制作细边框效果，使页面看起来更加整齐、美观。
细边框制作方法如下：
插入一个一行一列的表格，设置“填充”为0，“边框”为0，“间距”为1，背景颜色为要显示的边框的颜色。
之后将光标置入表格内，设置单元格的背景颜色和网页的底色相同就可以了。
右侧放置图片轮播模块，使用JavaScript语言实现图片轮播的效果。
将编辑好的JavaScript代码另存为SlideTrans.js文件。
在主页选择代码模式，在
之间添加代码:
。
在
之间开头的部分添加代码:
.container,.containerimg{width:
280px;height:
280px;}
.containerimg{border:
0;vertical-align:
top;}
.containerul,.containerli{list-style:
none;margin:
0;padding:
0;}
.num{position:
absolute;right:
5px;bottom:
5px;font:
12px/1.5tahoma,arial;height:
18px;}
.numli{
float:
left;
color:
#d94b01;
text-align:
center;
line-height:
16px;
width:
16px;
height:
16px;
font-family:
Arial;
font-size:
11px;
cursor:
pointer;
margin-left:
3px;
border:
1pxsolid#f47500;
background-color:
#fcf2cf;
}
.numli.on{
line-height:
18px;
width:
18px;
height:
18px;
font-size:
14px;
margin-top:
-2px;
background-color:
#ff9415;
font-weight:
bold;
color:
#FFF;
}
在最后添加代码：
设置好文章标题的链接。
全部完成后，将网页存为模板，供后续使用。
3.4文章页面的设计及制作
载入保存的模板文件，左侧图片依然为本类的logo。
右侧用来添加文章。
文章大部分采用图文混排的方式。
第四章设计工具的选择
4.1DreamWeaver8软件介绍
DreamWeaver是个原本由Macromedia公司所开发的著名网站开发工具。
它使用所见即所得的接口，亦有HTML编辑的功能。
它现在有Mac和Windows系统的版本。
随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。
Dreamweaver自MX版本开始，使用了Opera的排版引擎"Presto"作为网页预览。
制作效率
Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。
使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。
对于选单，快捷键和格式控制，都只要一个简单步骤便可完成。
Dreamweaver能和您喜爱的设计工具，如PlaybackFlash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。
除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑和设定图档的最佳化。
网站管理
使用网站地图可以快速制作网站雏形、设计、更新和重组网页。
改变网页位置或档案名称，Dreamweaver会自动更新所有连结。
使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
控制能力
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑和原始码编辑同步的设计工具。
它包含HomeSite和BBEdit等主流文字编辑器。
帧（frames）和表格的制作速度快的令您无法想像。
进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。
所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，ColdFusion，iCAT，Tango和自行发展的使用软体。
当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。
梦幻样版和XMLDreamweaver将内容和设计分开，使用于快速网页更新和团队合作网页编辑。
建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。
您也可以使用样版正确地输入或输出XML内容。
全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。
对于cascadingstylesheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。
使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。
当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。
本网站的所有网页全部使用DreamWeaver8进行创建和编辑。
4.2PhotoShopCS2软件介绍
1990年，美国Adobe公司推出了Photoshop图象处理软件，从此该软件风靡全球。
Photoshop是其2005年5月推出的最新版本，较之前的版本，它的功能更加强大，制作出的图象效果更加逼真。
PhotoshopCS2是对数字图形编辑和创作专业工业标准的一次重要更新。
它将作为独立软件程序或AdobeCreativeSuite2的一个关键构件来发布。
PhotoshopCS2引入强大和精确的新标准，提供数字化的图形创作和控制体验。
PhotoshopCS2主要更新：
SpotHealingBrush，处理常用图片问题，如污点，红眼，模糊和变形。
SmartObjects允许用户在图形不失真的情况下测量和变换图片和矢量图。
创建嵌入式链接复制图，以便一次编辑，更新多张图片。
支持非破坏性编辑，创建和编辑32位HDR图片，3D渲染，高级合成。
FireWirePreviews是一个直接输出功能，支持在电视监控器前浏览。
测试创作极限的新工具，如VanishingPoint和ImageWarping。
VanishingPoint可剪除冗余图形，修改图片，如可视化下复制，填色和转换图片。
重新设计的工作流程，如产品包装发展，ImageWarping。
流行的文件浏览器更新成AdobeBridge，内含一个创作中心，提供多视图浏览方式，流畅的图片综合操作。
在AdobeBridge内，还可访问AdobeStockPhotos。
CameraRaw3.0工作流程，支持多种初始文件修改，并处理成JPEG,TIFF,DNG或PSD格式。
简化Photoshop界面，基于任务的菜单边框，方便用户查找功能。
MultipleLayerControls加快编辑速度。
本网站所使用的所有图片都使用PhotoShopCS2来进行创建和处理。
4.3HTML和JavaScript语言介绍
HTML语言
文本标记语言，即HTML（HypertextMarkupLanguage），是用于描述网页文档的一种标记语言。
在WWW上的一个超媒体文档称之为一个页面（page）。
作为一个组织或个人在万维网上放置开始点的页面称为主页Homepage，或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。
在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。
Web页面也就是通常所说的网页，在本书中不作区分。
HTML（18张）HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：
文字如何处理，画面如何安排，图片如何显示等）。
浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。
但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
所谓超级链接，就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。
这也是HTML获得广泛使用的最重要的原因之一。
由此可见，网页的本质就是HTML，通过结合使用其他的Web技术（如：
脚本语言、CGI、组件等），可以创造出功能强大的网页。
因而，HTML是Web编程的基础，也就是说万维网是建立在超文本基础之上的。
本网站使用HTML语言进行CSS的编辑、表格的特殊处理、特殊效果的设置等。
JavaScript语言
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。
同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响使用户的各种操作。
它最初由网景公司的BrendanEich设计，是一种动态、弱类型、基于原型的语言，内置支持类。
JavaScript是Sun公司的注册商标。
[1]Ecma国际以JavaScript为基础制定了ECMAScript标准。
JavaScript也可以用于其他场合，如服务器端编程。
完整的JavaScript实现包含三个部分：
ECMAScript，文档对象模型，字节顺序记号。
Netscape公司在最初将其脚本语言命名为LiveScript。
在Netscape在和Sun合作之后将其改名为JavaScript。
JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”[2]，因此语法上有类似之处，一些名称和命名规范也借自Java。
但JavaScript的主要设计原则源自Self和Scheme[3].JavaScript和Java名称上的近似，是当时网景为了营销考虑和Sun公司达成协议的结果。
为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。
为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。
现在两者都属于ECMAScript的实现。
尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的编程语言来推广和宣传，但是JavaScript具有非常丰富的特性。
能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。
如：
Javascript、VBScript、DocumentObjectModel（DOM，文档对象模型）、Layers和CascadingStyleSheets（CSS，层叠样式表），这里主要讲Javascript。
那么Javascript是什么东东？
Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。
Javascript是由Netscape公司开发的一种脚本语言（scriptinglanguage），或者称为描述语言。
在HTML基础上，使用Javascript可以开发交互式Web网页。
Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。
运行用Javascript编写的程序需要能支持Javascript语言的浏览器。
Netscape公司Navigator3．0以上版本的浏览器都能支持Javascript程序，微软公司InternetExplorer3．0以上版本的浏览器基本上支持Javascript。
微软公司还有自己开发的Javascript，称为JScript。
Javascript和Jscript基本上是相同的，只是在一些细节上有出入。
Javascript短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。
同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。
JavaScript使网页增加互动性。
JavaScript使有规律地重复的HTML文段简化，减少下载时间。
JavaScript能及时响使用户的操作，对提交表单做即时的检查，无需浪费时间交由CGI验证。
JavaScript的特点是无穷无尽的，只要你有创意。
本网站使用JavaScript脚本语言编写图片轮播的效果。
第五章测试和上传及网站维护
5.1网站的测试
在网站发布之前，可以使用浏览器实际打开远程服务器上的网站，实际测试发生的问题记录下来。
对整个网站进行以下方面的测试：
1）测试网站在不同的操作系统上面运行。
在Windows2000、WindowsXP、Windows2003、Windows7下测试，没有出现问题，网站显示正常。
2）测试网站在不同的浏览器中运行。
在微软公司的IE浏览器（IE6.0、IE7.0、IE8.0）虎公司的360浏览器、搜狐公司的搜狗浏览器、傲游天下公司的傲游浏览
升级会员 