网站设计说明书.docx

《网站设计说明书.docx》由会员分享，可在线阅读，更多相关《网站设计说明书.docx（27页珍藏版）》请在第一文库网上搜索。

1、苏州工业职业,技术学院SuzhouinstituteOfIrfJ(jr1)Wrt1g/DIV+CSS建设一一精致膳食养身网毕业设计说明书系部：学生：专业学号：指导20XX10月15日目录摘要：2一、引言3（一）开发目的3（二）开发技术3（）开发工具3二、容规划4（一）主题4（二）容4三、设计4（一）形象设计4（二）页面设计5四、具体制作6（一）DIV结构图6（二）具体模块制作9（）特效制作16五、测试19（一）测试19（二）页面检查19（H）代码检查19（四）站点文件夹精简19六、总结19致20参考文献20附录21摘要：本论文主要讲述了关于精致膳食养身网的全部容，包括的具体容，设计思想，制作过

2、程等等。随着人们生活水平的提高，越来越多的人开始关注自己的身体健康，开始关注养生。精致膳食养身网囊括各种养身知识，满足大众对于健康养身的需求。采用DIV+CSS方式构建完成，大大缩减页面代码，更好的控制页面布局，结构简明，让人一目了然。采用了清新自然的绿色为主色调，颜色明快柔和，界面美观简洁。清新的绿色让浏览者产生视觉上的放松。本文本简明、通俗易懂，整体结构清晰、统一。资源丰富、层次清楚、容严谨。导航清晰，布局简单却不单调，下面就通过这篇说明书为大家简要的介绍的结构、容、设计思路、色彩使用方案等容。关键词：DIV+CSS；HTM1；膳食养身一、引言（一）开发目的时代的不断发展促进了人们对养生知

3、识的需求。现如今，无论是在网上、报纸杂志上、或是在电视上，各种各样的养身知识层出不穷，让大家无从选择。针对这个问题，我选择制作了精致膳食养生网。精致膳食养身融合了多种多样的养生知识，能满足大众对养身的需求，便于人们健康养身。（二）开发技术1. DIV+CSSDIV+CSS大大缩减页面代码，能提高页面浏览速度，缩减带宽成本；结构清晰，容易被搜索引擎搜索到；缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点；CSS非常容易编写。你可以像写htm1代码一样轻松地编写CSS；还能够更好的控制页面布局。2. JavaScriptJavaScript是一种能让你的网页更加生动

4、活泼的程式语言，也是目前网页中设计中最容易学乂最方便的语言。我们可以利用JaVaSCriPt轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。（三）开发工具1. MacromediaDreamweaver8MacromediaDreamweaver8.0简体中文版是一个可视化的网页设计和管理工具，支持最新的Web技术，包含HTM1检查、HTM1格式控制、HTM1格式化选项、HomeSiteZBBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理F1aSh和ShoCkWaVe等富媒体格式和动态

5、HTM1、基于团队的Web创作。2. AdobePhotoshopCS2AdobePhotoshopCS2U视频和多媒体领域的专业人士，使用3D和动画的图形和Web设计人员，以及工程和科学领域的专业人士的理想选择。呈现3D图像并将它合并到2D复合图像中。轻松编辑视频图层上的动画图形，让时间停下来。以及使用测量、计数和可视化工具，探查您的图像。二、容规划（一）主题本的主题为精致膳食养身网，囊括多种多样养身知识，其主要目的是满足大众对养身知识的需求，增加大家的养身知识。（二）容1 .整体结构2 图1框架图3 .基本功能精致膳食养生网可以帮助人们了解更多的关于养生的知识，具体包括首页、食材营养、四季

6、美食、异域美食、烹饪食谱等功能。首页有美食推荐、饮食误区、烹饪食谱、食材营养等的最新动态信息。食材营养页面包含了各种关于食材的健康知识，四季美食页面包含了春、夏、秋等季节应该了解的养生美食，异域美食页面则包含了各种外国菜肴的做法，烹饪食谱页面包含了烹饪技巧、菜谱、调味品等容，以上页面均可随意点击任意标题进入下一级页面了解更详细容。三、设计（-）形象设计1 .色彩采用了清新自然的绿色为主色调，颜色明快柔和，界面美观简洁。清新的绿色让浏览者产生视觉上的放松。同时给人以健康而有生机之感，网页之中图片色彩丰富，橙色等的色彩更能刺激人们的食欲，吸引大众的目光。2 .字体设计中正文文字均采用宋体12-14

7、号字，大标题则采用黑体，具体字体大小根据的美观设计制定。3 .1ogo设计(1)设计思想中国膳食博大精深，为在中体现这一点,1ogo的主要字体我选用特殊字体一一汉书。以汉书体现标题，显得更有特色。(2)设计步骤将精致膳食养生四字以三角形状堆放，在三角形的中间特别插入一株小草形状的图案作为装饰，贴合主题。(如图2)图21ogo4.导航设计(1)设计思想将导航放置于1ogo的右边，五个导航并排安置，同时在导航上做了悬停效果，首页上一直有悬停效果展示。(2)设计步骤五个导航并排安置，并除了首页之外，都设置鼠标悬停效果，如首页的效果(图3)及鼠标悬停效果(图4),花贞食材营赛四季饮食异域美森主任食诺图

8、3导航首页食IW林Qftft文狂衰图4导航对比图(二)页面设计1 .首页设计首页设计时，为体现优化的思想，将首页划分为四个板块，包括美食推荐、饮食误区、烹饪食谱和食材营养。每个版块都可到其相对的子页，排版自然。美食推荐模块中，运用图片转换特效，增添动态效果。（如图5）2 图5首页3 .子页设计每个子页左侧及右侧的容是各个模块的快速，包括阅读排行榜、饮食误区、友情、食材营养等等的容，可以在浏览这个页面时，能快速到自己感兴趣的页面。为以后将建设成一个动网，在左上侧安置阅读排行榜这一栏，动网建成之时，栏目能及时更新，以便向大众推荐更好的知识。中间是主要的养生容，根据模块而改变。（如图6、图7）四、具

9、体制作（一）DIV结构图1.首页DIV结构图M9tt*r ODhSVMMAfra* OtM*4ket*M* 9h1f1NM- 0M*MMW 90MStat 0Mm*WZR*iMM2rMSWS-NEESt SvMC1E，IM不*t 2MWmPMes QMnRKE1 IrgpIyn3 AISatF*M1JCRiWWr*tnInrIfrI-IihMow*c2.B.gsrmgcw图6子页mHKA1*tt*wvwaagAW-ewe!TMEXi行。E1，。M6*WFMmW53vrawMmc BVVB*9aMM pw3Mm*tmsjtmgi5BttK1，QTMDnW-EMrteU3m，!* CTMO SrW

10、E3aaMMW *mdtrm*u KTMfJA8Mf Ma-*m*?gMFM*tMM*VXMVBa感.一S11BHB平一/5食,M*19ewt1Hx*taea2MR.-ww*wwrmtfmwBsMMnf1MB9ftnw-MMMaaGMTM8.MHI5,mzrHM珏B4,mrtWi1waE*tmnr*twE必Y*nA，“M.i5e3fWHnMmeuewwWMWaItrmb&-n3C，FHMTtrxZf1-z,.xxeeam8rmxmIUMW*t*MV*MM1H.Vft*a.1wMQmg,rww2GcwiMMhMw*，p*MtrCMMc.gEF*oMIIsitetit1ertemp1atemo_m

11、enutemp1atemo_headertemp1atemo_content_wrappertemp1atemo_contenttemp1atmeo_sidebartemp1atemojooter图8首页DIV框架图8为主页的DIV结构图，每个框中文字是每个DIV框架的id,利用这个简单的布局可以体现大体的设计布局。（如图8）2 .子页DIV结构图图9为一级子页的DIV结构图，图中文字为每个D1V的id0temp1atemo_content_wrapperKuang2Kuang3Kuang1图9子页DIV框架3 .二级子页DIV结构图图10为二级子页DIV结构图，图中文字为每个DIV的id。图

12、10二级DIV框架（二）具体模块制作1.首页中具体模块制作图11是首页中的具体模块，在此模块中运用CSS代码给1ist加上背景图片，使列表更加美观，具体DIV布局及CSS代码如下。（如图11）饮食误区* 不能揶W-型的食物* 好的生活习憎不包括吃宵夜* 在剧烈运动后最好别唱可乐* 空瓶吃香圈员吾健康* 儿童伙食的十六误区* 故舜五谷杂粮，兔面威陟健身* 吃水果避开眼区，别想吃就吃* 据穿健康馍食的6次谖言* 肾菜致庭的4大误解* 重斩祐读P潴补哈Rmore图11首页模块HTM1代码：饮食误区不能和鸡蛋一起吃的食物重新解读吃啥补啥,src=,imagestemp1atemo-buttonJ本.ngCSS代码：#temp1atmeo_sidebar.sidebar-sectionmargin-bottom:30p;#temp1atmeo_sidebar.sidebar_section_contentmargin:00035px;#temp1atmeo_sidebar.categories-1istmargin:O;padding:O;1ist-sty1e:none;)#temp1atmeo_sidebar.CategoriesJistIipad