1、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、 -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摄影设计说明书前言随着社会的高速发展，摄影已经很平常的走进广大的群众中，平时我们大家可以用手机拍摄一些自己身边发生的事情，摄影不在是人们的奢侈享受。但是随着科技的快速发展，拍摄工具一代代的被淘汰，现在出现了许多的高级拍摄产品，虽然产品比较高级，没有高
3、深的技术，同样不会有好的拍摄作品，为了更好的给摄影界留下发展的一片天地，让更多的朋友能够有一张自己满意的回忆，同时宣传摄影，我公司为瞬间 beautiful 摄影公司提供宣传活动，为该公司制作了一套宣传网站，为广大群众提供参考。一、网站的规划1.1 网站的整体规划瞬间 beautiful 网站是为了宣传瞬间 beautiful 摄影公司而设立的网站，我们网站了了宣传瞬间 beautiful 摄影公司的知名度，宣传公司的精神，以吸引更多的群众来我公司做业务。我们网站设计版块主要分为七个：首页，作品赏，影棚实景，影楼简介，联系我们，vip 会员专区，客户评价。1.1.1 网站定位1：扩大瞬间 be
4、autiful 公司的知名度，打造自己的品牌。2：加强与其他公司的业务来往。3：为努力拍摄出优秀的照片而拼搏奋斗。4：是公司成为最专业的摄影公司。1.1.2 网站版块的设置网站版块的设置：网站主要分为七大版块，它们是首页，作品赏，影棚实景，影楼简介，联系我们，vip 会员专区，客户评价。其中作品赏中有些小版块，这些版块构成了整个网页的布局，以便条理清晰的展示给观众以更详细的展示。1.1.3 网站设计的相关技术1：网站整体布局设计采用 Dreamweaver软件设计的框架布局，采用了 div+css进行网站的设计，还采用了 js代码的运用。2：在图片设计采用 Fireworks和 photosh
5、op cs3加工和处理图片。3：在动态上有由 flash软件功能的嵌入。1.2 网站的功能设计我们瞬间 beautiful 网站的功能主要是将我们公司的品牌打出去，提高我们公司的知名度，以吸引更多的客户与我们进行洽谈合作！1.2.1 首页功能1：通过首页，我们想让你了解我们公司网站的主要内容，通过主要版块设置初步对我们公司的结果有所了解，通过首页的设计，我们还希望你能对我们公司的创意设计有所肯定。2：首页让浏览者更加方便快捷的了解熟悉我们的公司。3：通过首页，将大体的公司情况一目了然的展示给浏览者。1.2.2 副页功能1：通过副页将网站内容更加条理化、更加详细、更加方便的展现给浏览者。2：副页
6、中将每个版块的内容具体化、深入化、详细化。让感兴趣的浏览者详细了解了我们公司。3：副页在展示具体内容的同时，能让浏览者更加深入了解我们公司的一切相关内容。4：可以方便浏览者及时快捷的与我们公司取得联系，可以通过多种联系方式。二、网站的设计与制作2.1 首页布局设计的特点1：首页主要采用“T”字型的布局每个版块有序排放，将所有的版块清晰的罗列出来。2：采用“T”字型可以解决了浏览者观看是产生视觉上的疲劳，并且有种赏心悦目的感觉。2-1 网站首页布局图注册 登陆公司的名称首页作品赏影棚实景影楼简介联系我们Vip 会员专区客户评价流动欢迎词（您好！欢迎来到瞬间 beautiful）搜索相关的内容搜索
7、引擎 我们展示的照片欣赏按钮轮换照片最新动态 Vip 会员在专区 优秀作品展示最新动态 套餐介绍友情链接2.1.1 logo 设计我们公司的 logo 是英语单词 beautiful，也许会有人对我们不理解，我们之所以将它作为 logo，就是象征现在我们的年轻，我们的魅力，我们是有追求的。2.1.2 Banner 的设计网站的 banner 采用黑色的背景，渲染了我们摄影社的神秘，给浏览者留下深刻的印象，更加吸引了浏览者对我们网站的兴趣，我们公司的设计是公司名与 logo相结合在一起，象征着我们公司的有挑战新事物的追求，然后紧跟着的使我们的公司摄影口号，只有瞬间才会给你们想要的。2.1.3 导
8、航的设计导航设计上采用七个长方块，利用无序排列的方式，展示了我们服务项目，向浏览者介绍我们公司的大体情况。设计的代码：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：
