摄影网站设计说明书.doc

滨海学院WEB编程基础设计课程WEB编程基础网站开发设计说明书设计题目： 摄影网站 姓 名： 李家东 学 号： 20101080114 班 级： 10微高 指导教师： 毕老师 完成日期： 2011-12-12 目录前言- 2 -一、网站的规划- 2 -1.1 网站的整体规划- 2 -1.1.1 网站定位- 2 -1.1.2 网站版块的设置- 3 -1.1.3 网站设计的相关技术- 3 -1.2 网站的功能设计- 3 -1.2.1 首页功能- 3 -1.2.2 副页功能- 3 -二、网站的设计与制作- 4 -2.1 首页布局设计的特点- 4 -2.1.1 logo设计- 5 -2.1.2 Banner的设计- 5 -2.1.3 导航的设计- 6 -2.1.4 栏目设计- 6 -2.1.5风格与色彩单配- 8 -2.2副页布局设计特点- 8 -三、创新亮点- 9 -3.1按钮点击图片的轮换- 9 -3.2图片的自动轮换- 10 -四、总结- 11 -瞬间beautiful摄影设计说明书前言随着社会的高速发展，摄影已经很平常的走进广大的群众中，平时我们大家可以用手机拍摄一些自己身边发生的事情，摄影不在是人们的奢侈享受。但是随着科技的快速发展，拍摄工具一代代的被淘汰，现在出现了许多的高级拍摄产品，虽然产品比较高级，没有高深的技术，同样不会有好的拍摄作品，为了更好的给摄影界留下发展的一片天地，让更多的朋友能够有一张自己满意的回忆，同时宣传摄影，我公司为瞬间beautiful摄影公司提供宣传活动，为该公司制作了一套宣传网站，为广大群众提供参考。一、网站的规划1.1 网站的整体规划瞬间beautiful网站是为了宣传瞬间beautiful摄影公司而设立的网站，我们网站了了宣传瞬间beautiful摄影公司的知名度，宣传公司的精神，以吸引更多的群众来我公司做业务。我们网站设计版块主要分为七个：首页，作品赏，影棚实景，影楼简介，联系我们，vip会员专区，客户评价。1.1.1 网站定位 1：扩大瞬间beautiful公司的知名度，打造自己的品牌。 2：加强与其他公司的业务来往。 3：为努力拍摄出优秀的照片而拼搏奋斗。 4：是公司成为最专业的摄影公司。1.1.2 网站版块的设置 网站版块的设置：网站主要分为七大版块，它们是首页，作品赏，影棚实景，影楼简介，联系我们，vip会员专区，客户评价。其中作品赏中有些小版块，这些版块构成了整个网页的布局，以便条理清晰的展示给观众以更详细的展示。1.1.3 网站设计的相关技术1：网站整体布局设计采用Dreamweaver软件设计的框架布局，采用了div+css进行网站的设计，还采用了js代码的运用。 2：在图片设计采用Fireworks和photoshop cs3加工和处理图片。3：在动态上有由flash软件功能的嵌入。1.2 网站的功能设计我们瞬间beautiful网站的功能主要是将我们公司的品牌打出去，提高我们公司的知名度，以吸引更多的客户与我们进行洽谈合作！1.2.1 首页功能1：通过首页，我们想让你了解我们公司网站的主要内容，通过主要版块设置初步对我们公司的结果有所了解，通过首页的设计，我们还希望你能对我们公司的创意设计有所肯定。2：首页让浏览者更加方便快捷的了解熟悉我们的公司。3：通过首页，将大体的公司情况一目了然的展示给浏览者。1.2.2 副页功能1：通过副页将网站内容更加条理化、更加详细、更加方便的展现给浏览者。2：副页中将每个版块的内容具体化、深入化、详细化。让感兴趣的浏览者详细了解了我们公司。3：副页在展示具体内容的同时，能让浏览者更加深入了解我们公司的一切相关内容。4：可以方便浏览者及时快捷的与我们公司取得联系，可以通过多种联系方式。二、网站的设计与制作2.1 首页布局设计的特点1：首页主要采用“T”字型的布局每个版块有序排放，将所有的版块清晰的罗列出来。2：采用“T”字型可以解决了浏览者观看是产生视觉上的疲劳，并且有种赏心悦目的感觉。2-1网站首页布局图注册 登陆公司的名称首页作品赏影棚实景影楼简介联系我们Vip会员专区客户评价流动欢迎词（您好！欢迎来到瞬间beautiful）搜索相关的内容搜索引擎我们展示的照片欣赏按钮轮换照片 最新动态Vip会员在专区优秀作品展示最新动态套餐介绍友情链接 2.1.1 logo设计我们公司的logo是英语单词beautiful，也许会有人对我们不理解，我们之所以将它作为logo，就是象征现在我们的年轻，我们的魅力，我们是有追求的。2.1.2 Banner的设计网站的banner采用黑色的背景，渲染了我们摄影社的神秘，给浏览者留下深刻的印象，更加吸引了浏览者对我们网站的兴趣，我们公司的设计是公司名与logo相结合在一起，象征着我们公司的有挑战新事物的追求，然后紧跟着的使我们的公司摄影口号，只有瞬间才会给你们想要的。2.1.3 导航的设计导航设计上采用七个长方块，利用无序排列的方式，展示了我们服务项目，向浏览者介绍我们公司的大体情况。设计的代码：Div：css：2.1.4 栏目设计我们公司的栏目设计主要包括六个模块，主要有最新动态、vip会员专区、最新动态、优秀作品、套餐介绍、图片欣赏，还有一些小的栏目框等。下面为设计表现图：图2-1-4（1）图2-1-4（2）设计栏目的设计，充分展示我们公司的主要情况，给浏览者一种大气的风范，一目了然，简单易懂感觉，有一种想欣赏的感受，充分体现了一种美的享受等。2.1.5风格与色彩单配我们公司网站首页以灰色为背景颜色，这样显得公司深沉稳重，脚踏实地。然后又将一些青春活力的照片加入其中，显现我们公司的朝气蓬勃，积极进取的创新的精神。2.2副页布局设计特点1：副页采用了简单框架的布局方式，向浏览者简单大方的展示了我们网站的情况。2：版块有条理性，看起来很轻松，赏心悦目。3：更加有力的向浏览者寻找到自己想要的信息。2-2网站的副页布局图副页的名称摄影的赏析影图欣赏关于一些摄影摄影套餐的报价介绍联系方式友情链接副页向浏览者展示我们网站的首页内容的详细情况，让浏览者更加具体的了解我们公司的情况，同时让我们公司的网站更加的完善化，整体化。三、创新亮点3.1按钮点击图片的轮换Div：轮换图片通过图片的轮换更加衬托了我们网站的技术强大，通过技术手段更加证明我们的实力是不可战胜的，让更多的广大顾客朋友认同我们公司的强大，能够更加的信任我们，只有我们才能给他们带来自己需求的东西。3.2图片的自动轮换Js+div：自动图片轮换四、总结通过这个学期的学习，我学会了制作网页，而且知道了知识的重要性。网站设计是一种非常难做但是又非常有意思的工作，我们可以任意发挥我们的创意，让我们飞翔在自由创意的国度里，但做网页也要谨慎小心，要一丝不苟。在这次网站制作中让我对Dreamweaver、Fireworks、Flash进一步了解，还懂得了许多的知识。尽管如此，但是我的网页还存在着一些问题，如颜色的搭配不是很好，框架的结构，可能还有其他一些我没有发现的问题，这些问题都是需要注意的，我相信通过学习与老师的悉心教导，下一次的网页我将会做得更好。不足之处，希望老师指导与批评。信息工程学院WEB编程基础实践环节考核报告单2011-2012学年度第一学期期末排课编号：(2011-2012-1)-0501301-01050-1 批阅日期：2011年12月17日姓名李家东班级10微高学号20101080114评分标准及得分评分标准满分得分简介：概况清晰，目标明确。5总体需求明确，结合实际，分析详细具体全面。10网站架构合理，有结构图。5网站效果图设计符合主流审美观点，色彩搭配合理。10网站风格一致，运用模板生成相关页面。5项目开发符合Web网站开发标准，表现与内容