电大网站设计说明书毕业设计论文.docx
- 文档编号:1758147
- 上传时间:2022-10-23
- 格式:DOCX
- 页数:14
- 大小:1,017.33KB
电大网站设计说明书毕业设计论文.docx
《电大网站设计说明书毕业设计论文.docx》由会员分享,可在线阅读,更多相关《电大网站设计说明书毕业设计论文.docx(14页珍藏版)》请在冰豆网上搜索。
电大网站设计说明书毕业设计论文电大网站设计说明书毕业设计论文(此文档为word格式,下载后您可任意编辑修改!
)优秀论文审核通过未经允许切勿外传第一章概述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文件。
在主页选择代码模式,在:
top;.containerul,.containerlilist-style:
none;margin:
0;padding:
0;.numposition:
absolute;right:
5px;bottom:
5px;font:
12px1.5tahoma,arial;:
center;line-left:
3px;border:
1pxsolid#f47500;background-color:
#fcf2cf;.numli.online-top:
-2px;background-color:
#ff9415;font-weight:
bold;color:
#FFF;在最后添加代码:
varnums=,timer,n=$(idSlider2).getElementsByTagName(li).length,st=newSlideTrans(idContainer2,idSlider2,n,onStart:
function()设置按钮样式forEach(nums,function(o,i)o.className=st.Index=i?
on:
;);for(vari=1;i=n;AddNum(i+);functionAddNum(i)varnum=$(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)case2:
st.Tween=Tween.Bounce.easeOut;break;case1:
st.Tween=Tween.Back.easeOut;break;default:
st.Tween=Tween.Quart.easeOut;设置好文章标题的链接。
全部完成后,将网页存为模板,供后续使用。
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和BBEdi
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 电大 网站 设计 说明书 毕业设计 论文