网站设计说明书.doc
《网站设计说明书.doc》由会员分享,可在线阅读,更多相关《网站设计说明书.doc(25页珍藏版)》请在咨信网上搜索。
1、DIV+CSS网站建设-精致膳食养身网-毕业设计说明书系 部: 学生姓名: 专业班级: 学 号: 指导教师: 2012年10月15日目录摘要:3一、引言4(一)开发目的4(二)开发技术4(三)开发工具4二、网站内容规划4(一)网站主题4(二)网站内容5三、网站设计5(一)网站形象设计5(二)网站页面设计6四、网站具体制作7(一)DIV结构图7(二)具体模块制作11(三)特效制作17五、网站测试20(一)网站链接测试20(二)页面检查20(三)代码检查20(四)站点文件夹精简20六、总结20致 谢22参考文献22附录23摘要:本论文主要讲述了关于精致膳食养身网的全部内容,包括网站的具体内容,设计
2、思想,制作过程等等。随着人们生活水平的提高,越来越多的人开始关注自己的身体健康,开始关注养生。精致膳食养身网囊括各种养身知识,满足大众对于健康养身的需求。网站采用DIV+CSS方式构建完成,大大缩减页面代码,更好的控制页面布局,结构简明,让人一目了然.网站采用了清新自然的绿色为主色调,颜色明快柔和,界面美观简洁。清新的绿色让浏览者产生视觉上的放松.本网站文本简明、通俗易懂,整体结构清晰、统一。网站资源丰富、层次清楚、内容严谨。网站导航清晰,布局简单却不单调,下面就通过这篇说明书为大家简要的介绍网站的结构、内容、设计思路、色彩使用方案等内容。关键词:DIV+CSS;HTML;膳食养身一、引言(一
3、)开发目的时代的不断发展促进了人们对养生知识的需求。现如今,无论是在网上、报纸杂志上、或是在电视上,各种各样的养身知识层出不穷,让大家无从选择.针对这个问题,我选择制作了精致膳食养生网。精致膳食养身网站融合了多种多样的养生知识,能满足大众对养身的需求,便于人们健康养身。(二)开发技术1. DIV+CSSDIV+CSS大大缩减页面代码,能提高页面浏览速度,缩减带宽成本;结构清晰,容易被搜索引擎搜索到;缩短改版时间.只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点; CSS非常容易编写.你可以像写html代码一样轻松地编写CSS;还能够更好的控制页面布局。 2. JavaScri
4、ptJavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言.我们可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举,还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。 (三)开发工具1. Macromedia Dreamweaver 8 Macromedia Dreamweaver8.0简体中文版是一个可视化的网页设计和网站管理工具,支持最新的Web技术,包含HTML检查、 HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、
5、全FTP功能、处理Flash和 Shockwave等富媒体格式和动态HTML、基于团队的Web创作。2. Adobe Photoshop CS2Adobe Photoshop CS2是电影、视频和多媒体领域的专业人士, 使用 3D 和动画的图形和 Web 设计人员, 以及工程和科学领域的专业人士的理想选择。呈现 3D 图像并将它合并到 2D 复合图像中。轻松编辑视频图层上的动画图形, 让时间停下来。以及使用测量、计数和可视化工具, 探查您的图像。二、网站内容规划(一)网站主题本网站的主题为精致膳食养身网,囊括多种多样养身知识,其主要目的是满足大众对养身知识的需求,增加大家的养身知识。(二)网站
6、内容1。 网站整体结构首页食材营养四季饮食异域美食烹饪食谱水果、蔬菜、鱼鲜春季夏季秋季意大利菜、法国菜、韩国菜烹饪技巧、菜谱、调味品详细介绍详细介绍详细介绍详细介绍图1 网站框架图2.网站基本功能精致膳食养生网可以帮助人们了解更多的关于养生的知识,具体包括首页、食材营养、四季美食、异域美食、烹饪食谱等功能.首页有美食推荐、饮食误区、烹饪食谱、食材营养等网站的最新动态信息。食材营养页面包含了各种关于食材的健康知识,四季美食页面包含了春、夏、秋等季节应该了解的养生美食,异域美食页面则包含了各种外国菜肴的做法,烹饪食谱页面包含了烹饪技巧、菜谱、调味品等内容,以上页面均可随意点击任意标题进入下一级页面
7、了解更详细内容。三、网站设计(一)网站形象设计1. 网站色彩网站采用了清新自然的绿色为主色调,颜色明快柔和,界面美观简洁。清新的绿色让浏览者产生视觉上的放松.同时给人以健康而有生机之感,网页之中图片色彩丰富,橙色等的色彩更能刺激人们的食欲,吸引大众的目光。2.字体设计网站中正文文字均采用宋体1214号字,大标题则采用黑体,具体字体大小根据网站的美观设计制定。3。logo设计(1)设计思想中国膳食博大精深,为在网站中体现这一点,logo的主要字体我选用特殊字体-汉书。以汉书体现标题,显得更有特色.(2)设计步骤将精致膳食养生四字以三角形状堆放,在三角形的中间特别插入一株小草形状的图案作为装饰,贴
8、合主题。(如图2)图2 logo4。导航设计(1)设计思想将导航放置于logo的右边,五个导航并排安置,同时在导航上做了悬停效果,首页上一直有悬停效果展示。(2)设计步骤五个导航并排安置,并除了首页之外,都设置鼠标悬停效果,如首页的效果(图3)及鼠标悬停效果(图4)。图3 导航图4 导航对比图(二)网站页面设计1.首页设计首页设计时,为体现网站优化的思想,将首页划分为四个板块,包括美食推荐、饮食误区、烹饪食谱和食材营养。每个版块都可链接到其相对的子页,排版自然。美食推荐模块中,运用图片转换特效,增添动态效果.(如图5)图5 首页2.子页设计每个子页左侧及右侧的内容是各个模块的快速链接,包括阅读
9、排行榜、饮食误区、友情链接、食材营养等等的内容,可以在浏览这个页面时,能快速链接到自己感兴趣的页面。为以后将网站建设成一个动网,在左上侧安置阅读排行榜这一栏,动网建成之时,栏目能及时更新,以便向大众推荐更好的知识.中间是主要的养生内容,根据模块而改变。(如图6、图7)四、网站具体制作(一)DIV结构图1。首页DIV结构图图6 子页图7 二级子页templatemo_headersite_titletemplatemo_menutemplatemo_content_wrappertemplatemo_contenttemplatmeo_sidebartemplatemo_footer图8 首页D
10、IV框架图8为网站主页的DIV结构图,每个框中文字是每个DIV框架的id,利用这个简单的布局可以体现网站大体的设计布局。(如图8)2。子页DIV结构图图9为网站一级子页的DIV结构图,图中文字为每个DIV的id。templatemo_content_wrapperKuang2Kuang3Kuang1图9 子页DIV框架3.二级子页DIV结构图图10为网站二级子页DIV结构图,图中文字为每个DIV的id。templatemo_content_wrapperKuang2Kuang4图10 二级DIV框架(二)具体模块制作1.首页中具体模块制作图11是首页中的具体模块,在此模块中运用CSS代码给li
11、st加上背景图片,使列表更加美观,具体DIV布局及CSS代码如下。(如图11)图11 首页模块HTML代码: 饮食误区/h2 div class=sidebar_section_content ul class=categories_list lia href=yswq_1_1。html”不能和鸡蛋一起吃的食物/li 重新解读“吃啥补啥/li /uldiv id=more”a href=”yswq。html”img src=”images/templatemo_button副本.png width=”50 height=”15” border=0” /a/div CSS代码:templatme
12、o_sidebar .sidebar_section marginbottom: 30px;#templatmeo_sidebar .sidebar_section_content margin:0 0 0 35px;#templatmeo_sidebar 。categories_list margin: 0;padding: 0;list-style: none;#templatmeo_sidebar 。categories_list li padding: 0;margin: 0;.categories_list li a display: block;color: #201f1c;pad
13、ding: 5px 0 5px 20px;background-image: url(images/templatemo_list。png);backgroundrepeat: no-repeat;background-position: left center;。categories_list li a:hover color: 537c11;textdecoration: none;#more float: right;height: 15px;width: 80px;padding-left: 30px;2。子页具体模块制作图12是子页中的典型模块,这个模块中,运用CSS代码设置了下划线
14、,列表的格式以及图片的位置等.具体DIV布局及CSS代码如下(如图12)图12 子页模块HTML代码:div id=”kuang3_1烹饪技巧/div li class=”list/li li class=list/li /div img src=images/27.jpg width=146” height=97 /CSS代码:#kuang3_1 width: 400px;textalign: left;vertical-align: middle;float: left;margin-top: 0px;borderbottomwidth: 1px;borderbottomstyle: so
15、lid;borderbottom-color: #999999;fontsize: 18px;fontweight: bold;color: 333333;paddingleft: 10px;padding-top: 20px;paddingbottom: 3px;kuang3_2 fontsize: 14px;color: 000000;float: left;width: 260px;lineheight: 26px;margin-bottom: 10px;margintop: 10px;kuang3_3 height: 94px;width: 146px;float: left;marg
16、in-top: 25px;marginbottom: 40px;marginleft: 2px;#kuang2 float: left;width: 290px;margin-right: 10px;border: 1px solid #8ECC11;。listlist-style-position:inside;3.二级子页具体模块制作图13为二级子页中的典型模块,具体DIV及CSS代码如下.(如图13)HTML代码:首页烹饪食谱/a a href=prsp_psjq1。html”正文h2如何煮玉米才能更香甜 /h2/div 2010年9月21号 精致膳食养生网/div div id=”ku
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 设计 说明书
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【精****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【精****】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。