电大网站设计毕业设计说明书.doc

第一章 概述1.1 网站建设的意义Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。作为Internet上一种先进的，易于被人们所接受的信息检索手段，World Wide Web(简称WWW)发展十分迅速，成为目前世界上最大的信息资源宝库。据估计，目前Internet上已有上百万个Web站点，其内容范围跨越了教育科研、文化事业、金融、商业、新闻出版、娱乐、体育等各个领域，其用户群十分庞大，因此，建设一个好的Web站点对于一个机构的发展十分重要。近年来，随着网络用户要求的不断提高及计算机科学的迅速发展，特别是数据库技术在Internet中的广泛应用，Web站点向用户提供的服务将越来越丰富，越来越人性化。Internet的迅猛发展正在彻底地改变我们的生活、工作方式，网络已经成为我们生活中不可缺少的一部分。信息时代的来临拓宽了大家进行自我提升的途径，同时也对大家的素质提出了更高的要求。被称为当今社会的“天之骄子”的电脑主宰着世界的前进，而主宰电脑的我们则更应该多思考，多研究，多学习。只读书的学习方式一去不复返，科技的日新月异，使我们不得不学习一种新的知识-计算机技术。怪不得有人说“不会电脑的人，将是新世纪的文盲”，足见网上学习的重要性。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。1.2 网站的定位为了弘扬中华传统文化，提高大家的生活质量，使大家的烹调技术有进一步的提高，本网站的定位为：为用户提供最方便最详尽的美食菜谱，按照菜系对菜谱进行分类，使用户找到自己想要的菜式做法将更加简单。网站的名称为美食网，为生活类网站。设置：川菜、鲁菜、粤菜、江淮菜四个大类。每个大类下都有：热菜、凉菜、主食三个方面。通过不同角度，向用户展示四大菜系的代表美食。致力于为中国家庭和个人提供完美的美食解决方案。第二章 网站的总体设计2.1 网站的规划网站采用清新简洁的风格，避免繁杂纷乱的现象。使用户方便快速的找到自己想要的信息。川菜采用红色为主色调；鲁菜采用橙色为主色调；粤菜采用蓝色为主色调；江淮菜采用绿色为主色调，体现各大菜系不同的特点。并配以与主题相符合的图片，以突出主题。网站设置一个首页，四个一级导航，每个一级导航下设置三个二级导航。每个二级导航下添加十篇文章。网站结构及栏目如下：凉菜主食热菜美食网首页川菜菜系鲁菜菜系粤菜菜系江淮菜系热菜凉菜主食热菜凉菜主食热菜凉菜主食2.2 素材的搜集做网站之前，我们要事先根据网站设计的方案，定位网站的方向，然后搜集一些符合网站主题的素材供制作。这些素材包括有：色彩搭配、文字、图片、多媒体等。1. 文本内容素材的收集具体的文本内容，可以让访问者清楚地知道作者的Wpb页中想要说明的东西。我们可以从网络、书本、报刊上找到需要的文字材料，也可以使用平时的试卷和复习资料，还可以自己编写有关的文字材料，将这些素材制作成Word文档保存在“文字资料飞子目录下。收集的文本素材既要丰富，又要便于有机地组织，这样才能做出内容丰富、整体感强的网站。2. 艺术内容素材的收集只有文本内容的网站对于访问者来讲，是枯燥乏味、缺乏生机的。如果加上艺术内容素材，如静态图片、动态图像、音像等.将使网页充满动感与生机，也将吸引更多的访问者。上海网站设计时候这些素材主要来自于以下4个方面。从Internet上获取。可以充分利用网上的共享资源，如使用百度、Sohu等引笨收集图片素材。从CD-ROM中获取。在市面上，有许多关于图片素材库的光盘.也有许多教学软件，可以选取其中的图片资料。利用现成图片或自己拍摄。既可以从各种图书出版物(如科普读物、教科书、杂志封面、摄影集、摄影杂志等)获取图片。也可以使用自己拍摄和积累的照片资料。将杂志的封面彩图用彩色扫描仪扫描下来，经过加工后。整合制作到网页中。自己动手制作一些特殊效果的图片，特别是动态图像，自己动手制作往往效果更好。可采用Flash进行制作。鉴于网上只能支持几种图片格式，所以可先将以上途径收集的图片用Photoshop等图像处理工具转换成JPG. GIF形式，再保存到“图片资料”目录下。另外，图片应尽量精美而小巧，不要盲目追求大而全，要以在网页的美观与网络的速度两者之间取得良好的平衡为宜。搜集素材是网站设计关健性一步，要学会搜集素材的方法与方式，并且能分类保存、整理需要的素材，切不可引用一些不健康或是过于花哨的动画图片素材。第三章 网站各页面的详细设计3.1 主页的设计及制作首页一个网站最先展示给用户的页面，因此，首页的设计显得尤为重要。网站整体采用橙色背景，顶部左侧为网站的logo“美食网”，右侧为美食网的宣传广告条。下面为导航条，导航内容分别为：川菜菜系、鲁菜菜系、粤菜菜系、江淮菜系四个分类。以上为网页头部分，后面所有网页都会使用同样的网页头，所以将页面先另存为模板，以供后续使用。下面添加宣传图片，在云纹背景下，以书法艺术字体制作四大菜系的名称并制作一个美食网的印章。使主页看起来简洁大方。网页最下面加入关于本站的版权信息。3.2 专题网页的设计及制作载入前面保存的模板，在导航条下面表格中插入一行三列表格。每个表格中输入二级导航的文字，制作出二级导航链接。下面左侧为本类菜系的介绍，右侧为本类菜系代表性图片。二级网页共四个网页：川菜：调味多变，菜式多样，口味清鲜醇浓并重，以善用麻辣著称，具有别具一格的烹调方法和浓郁的地方风味。根据川菜的特点，背景色采用红色，选用图片也以红色调为主以突出主题。鲁菜：原料多选禽畜、海产、蔬菜，善用爆、熘、扒、烤、锅、拔丝、蜜汁等烹调方法，偏重于酱、葱、蒜调味，善用清汤、奶汤增鲜，口味咸鲜。根据鲁菜特点，背景采用橙色，图片也要贴近鲁菜主题。粤菜：粤菜注意吸取各菜系之长，烹调技艺多样善变，用料奇异广博，在烹调上一炒、爆为主，兼有烩、煎、烤，讲究清而不淡，鲜而不俗，嫩而不生，油而不腻，有“五滋”、“六味”之说。根据粤菜特点，背景选用蓝色，考虑到粤菜系煲汤闻名，图片选用汤类，以贴近主题。江淮菜：江淮菜是江浙菜和淮扬菜的合称。原料多以水产为主，注重鲜活，刀工比较精细，尤以瓜雕享誉四方。善用炖、焖、烤、煨等烹调方法，口味平和，清鲜而略带甜味。根据此特点，背景选用清新的绿色，图片也要选择江淮菜的水产菜肴，以贴近主题。依次制作网页的内容，设置好文字和图片的链接，及文章列表的链接。将网页存为模板，以供后续使用。3.3 分类网页的设计及制作载入保存的模板文件，左侧采用相应的图片制作本类的logo。中间添加本类的文章列表。列表四周制作细边框效果，使页面看起来更加整齐、美观。细边框制作方法如下：插入一个一行一列的表格，设置“填充”为0，“边框”为0，“间距”为1，背景颜色为要显示的边框的颜色。之后将光标置入表格内，设置单元格的背景颜色与网页的底色相同就可以了。右侧放置图片轮播模块，使用JavaScript语言实现图片轮播的效果。将编辑好的JavaScript代码另存为SlideTrans.js文件。在主页选择代码模式，在之间添加代码:。在之间开头的部分添加代码: .container, .container imgwidth:280px; height:280px;.container imgborder:0;vertical-align:top;.container ul, .container lilist-style:none;margin:0;padding:0;.num position:absolute; right:5px; bottom:5px; font:12px/1.5 tahoma, arial; height:18px;.num lifloat: 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: 1px solid #f47500;background-color: #fcf2cf;.num li.online-height: 18px;width: 18px;height: 18px;font-size: 14px;margin-top:-2px;background-color: #ff9415;font-weight: bold;color:#FFF;在最后添加代码：var nums = , timer, n = $(idSlider2).getElementsByTagName(li).length,st = new SlideTrans(idContainer2, idSlider2, n, onStart: function()/设置按钮样式forEach(nums, function(o, i) o.className = st.Index = i ? on : ; );for(var i = 1; i = n; AddNum(i+);function AddNum(i)var num = $(idNum).appendChild(document.createElement(li);num.innerHTML = i-;num.onmouseover = function()timer = setTimeout(function() num.className = on; st.Auto = false; st.Run(i); , 200);num.onmouseout = function() clearTimeout(timer); num.className = ; st.Auto = true; st.Run(); numsi = num;st.Run();$(idAuto).onclick = function()if(st.Auto)st.Auto = false; st.Stop(); this.value = 自动;elsest.Auto = true; st.Run(); this.value = 停止;$(idNext).onclick = function() st.Next(); $(idPre).onclick = function() st.Previous(); $(idTween).onchange = function()switch (parseInt(this.value)case 2 :st.Tween = Tween.Bounce.easeOut; break;case 1 :st.Tween = Tween.Back.easeOut; break;default :st.Tween = Tween.Quart.easeOut; 设置好文章标题的链接。全部完成后，将网页存为模板，供后续使用。3.4 文章页面的设计及制作载入保存的模板文件，左侧图片依然为本类的logo。右侧用来添加文章。文章大部分采用图文混排的方式。第四章 设计工具的选择4.1 DreamWeaver 8软件介绍DreamWeaver是个原本由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。 Dreamweaver自MX版本开始，使用了Opera的排版引擎 Presto 作为网页预览。制作效率 Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。 网站管理 使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。控制能力 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。 全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。本网站的所有网页全部使用DreamWeaver 8进行创建和编辑。4.2 PhotoShop CS2软件介绍1990年，美国Adobe公司推出了Photoshop图象处理软件，从此该软件风靡全球。Photoshop是其2005年5月推出的最新版本，较之前的版本，它的功能更加强大，制作出的图象效果更加逼真。 Photoshop CS2是对数字图形编辑和创作专业工业标准的一次重要更新。它将作为独立软件程序或Adobe Creative Suite 2的一个关键构件来发布。Photoshop CS2引入强大和精确的新标准，提供数字化的图形创作和控制体验。Photoshop CS2主要更新： Spot Healing Brush，处理常用图片问题，如污点，红眼，模糊和变形。 Smart Objects允许用户在图形不失真的情况下测量和变换图片和矢量图。 创建嵌入式链接复制图，以便一次编辑，更新多张图片。 支持非破坏性编辑，创建和编辑32位HDR图片，3D渲染，高级合成。 FireWire Previews是一个直接输出功能，支持在电视监控器前浏览。 测试创作极限的新工具，如Vanishing Point和Image Warping。Vanishing Point可剪除冗余图形，修改图片，如可视化下复制，填色和转换图片。 重新设计的工作流程，如产品包装发展，Image Warping。 流行的文件浏览器更新成Adobe Bridge，内含一个创作中心，提供多视图浏览方式，流畅的图片综合操作。在Adobe Bridge内，还可访问Adobe Stock Photos。 Camera Raw 3.0工作流程，支持多种初始文件修改，并处理成JPEG, TIFF, DNG或PSD格式。 简化Photoshop界面，基于任务的菜单边框，方便用户查找功能。 Multiple Layer Controls加快编辑速度。本网站所使用的所有图片都使用PhotoShop CS2来进行创建和处理。4.3 HTML和JavaScript语言介绍HTML语言文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。在WWW上的一个超媒体文档称之为一个页面（page）。作为一个组织或个人在万维网上放置开始点的页面称为主页Homepage，或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。 Web页面也就是通常所说的网页，在本书中不作区分。 HTML(18张)HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。 HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接，就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。 由此可见，网页的本质就是HTML，通过结合使用其他的Web技术（如：脚本语言、CGI、组件等），可以创造出功能强大的网页。因而，HTML是Web编程的基础，也就是说万维网是建立在超文本基础之上的。本网站使用HTML语言进行CSS的编辑、表格的特殊处理、特殊效果的设置等。JavaScript语言JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。它最初由网景公司的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。JavaScript是Sun公司的注册商标。1 Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，字节顺序记号。 Netscape公司在最初将其脚本语言命名为LiveScript。在Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”2，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme3.JavaScript与Java名称上的近似，是当时网景为了营销考虑与Sun公司达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。现在两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的编程语言来推广和宣传，但是JavaScript具有非常丰富的特性。能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和Cascading Style Sheets（CSS，层叠样式表），这里主要讲Javascript。那么Javascript是什么东东？Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。Javascript是由 Netscape公司开发的一种脚本语言（scripting language），或者称为描述语言。在HTML基础上，使用Javascript可以开发交互式Web网页。Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。运行用Javascript编写的程序需要能支持Javascript语言的浏览器。Netscape公司 Navigator 30以上版本的浏览器都能支持Javascript程序，微软公司Internet Explorer 30以上版本的浏览器基本上支持Javascript。微软公司还有自己开发的Javascript，称为JScript。Javascript和Jscript基本上是相同的，只是在一些细节上有出入。 Javascript短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。 同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。 JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。本网站使用JavaScript脚本语言编写图片轮播的效果。第五章 测试和上传及网站维护5.1 网站的测试在网站发布之前，可以使用浏览器实际打开远程服务器上的网站，实际测试发生的问题记录下来。对整个网站进行以下方面的测试：1）测试网站在不同的操作系统上面运行。在Windows2000、Windows XP、Windows 2003、Windows 7下测试，没有出现问题，网站显示正常。2）测试网站在不同的浏览器中运行。在微软公司的IE浏览器（IE6.0、IE7.0、IE8.0）虎公司的360浏览器、搜狐公司的搜狗浏览器、傲游天下公司的傲游浏览器和火狐浏览器中测试，均没有出现问题，网站显示正常。3）测试网站中的超级链接。将网站中所有的超级链接进行测试，没有发现问题，所有的链接设置正确，都可正常使用。4）网站中JavaScript脚本语言的测试。因为JavaScript是浏览器端执行的脚本语言，所以需要在浏览器中将“选项”中的“允许活动的内容在我的计算机上运行”复选项选中。设置好的环境中，flash轮播显示正常。5）网站其他错误的检查。网页上如文字错误、字号错误、段落格式错误、排版错误等其他错误，都应及时检查出来并改正。5.2 网站的上传网站测试结束，那么就要开始准备网站的上传工作了。登陆万网，选择自己认为合适的域名，将自己的域名进行注册，并同时购买服务器空间。购买成功后，系统会自动分配域名、FTP上传地址、FTP上传帐号、FTP上传密码等。、网站的上传就使用DreamWeaver的上传功能进行上传。（1） 设置服务器信息 在Dreamweaver 8窗口中选择【站点】【管理站点】菜单命令，此时将打开“管理站点”对话框。在左侧的站点列表中选中要修改的站点名称，然后单击对话框中的“编辑”按钮，将打开“root的站点定义为”的对话框。在对话框左侧选择“远程信息”选项，右侧将显示有关服务器的一些信息。默认情况下，右侧只有一个“访问”选项。在下拉列表中选择FTP。 此时对话框中出现与FTP上传相关的各项参数。 在“FTP主机”文本框中输入上传站点文件的FTP主机名或者IP地址，这里输入FTP上传地址，就是在申请域名时所得的地址。然后在“主机目录”文本框中输入远程站点的主机目录名，该目录是服务器用来存储站点的文件夹名称，该名称由服务器管理员提供。接下来是用来登录FTP服务器的用户名及密码（ 申请域名时所得的FTP上传帐号、FTP上传密码），如果选中“保存”复选框，则每次与远程服务相连的时候都会自动输入密码。为了安全起见，我们一般选中“使用防火墙”复选框。如果需要设置防火墙，可以单击“防火墙设置”按钮进行设置。其他选项暂且保持默认，然后单击“确定”按钮关闭站点定义窗口。（2） 设置站点信息选择【编辑】【首选参数】菜单命令，打开“首选参数”对话框，然后切换到“站点”面板。（3）发布站点当上面的设置完成后，在“文件”面板的“站点”窗口中单击工具栏上的“连接到远端主机”按钮，连上远程服务器。如果Dreamweaver成功连入服务器，“连接到远端主机”按钮会自动变为“切断”按钮，并且亮起一个小绿灯。如果只想上传本地站点中的一部分文件，可以先选择要上传的文件，然后在“文件”面板中单击工具栏上的“上传文件”按钮。如果想整个站点上传，可用Ctrl+A选中全部文件，再单击“上传文件”按钮，此时就会将整个上传到服务器上。至此，操作完毕。5.3 网站的日常维护网站的日常维护（1）、定期检查网页的内容是否正常，尤其注意含有脚本代码的网页是否显示正常；超级链接和外部链接是否有效；图片显示是否正常。（2）、本站为科普类网站，当有新的发现或观点出现的时候，及时对网站的内容进行添加或更新。（3）、进行后台维护，包括检查文件和目录结构，将已经无用的文件进行删除，但要在本地做好备份。（4）、当新的浏览器版本或操作系统面世后，要测试网站在新的环境下是否依然运行良好。第六章 总结经过几个月的努力我终于顺利完成了毕业设计。为我的大学学习做了一次考核，也为我的大学生活划上了句号。现在回想起来，一路走来，有太多的感想，有快乐，有痛苦，像是打翻了五味瓶，酸，甜，苦，辣交织在一起。这一切都已成为过去，他们让我感到充实非常。我的毕业设计题目是：美食网。中国美食体现了中华民族的饮食文化传统，它与世界各国烹饪相比，有许多独特之处。 (一)风味多样。地域广阔的中华民族，由于各地气候、物产、风俗习惯的差异，自古以来，中华饮食上就形成了许多各不相同的菜系。就地方划分而言，有巴蜀、齐鲁、淮扬、粤闽四大菜系之分。 (二)四季有别。一年四季，按季节而调配饮食，是中国烹饪的主要特征。中国一直遵循按季节调味、配菜，冬则味醇浓厚，夏则清淡凉爽。冬多炖焖煨，夏多凉拌冷冻。各种菜蔬更是四时更替，适时而食。 (三)