文档介绍：摄影网站设计说明书
滨海学院WEB编程基础设计课程
- 10 -
WEB编程基础网站开发
设计说明书
设计题目： 摄影网站
姓 名： 李家东 切相关内容。
4：可以方便浏览者及时快捷的与我们公司取得联系，可以通过多种联系方式。
二、网站的设计与制作
首页布局设计的特点
1：首页主要采用“T”字型的布局每个版块有序排放，将所有的版块清晰的罗列出来。
2：采用“T”字型可以解决了浏览者观看是产生视觉上的疲劳，并且有种赏心悦目的感觉。
2-1网站首页布局图
注册 登陆
公司的名称
首页
作品赏
影棚实景
影楼简介
联系我们
Vip会员专区
客户评价
流动欢迎词（您好！欢迎来到瞬间beautiful）
滨海学院WEB编程基础设计课程
- 1 -
搜索相关的内容搜索引擎
我们展示的照片欣赏
按钮轮换照片
最新动态
Vip会员在专区
优秀作品展示
最新动态
套餐介绍
友情链接
logo设计
我们公司的logo是英语单词beautiful，也许会有人对我们不理解，我们之所以将它作为logo，就是象征现在我们的年轻，我们的魅力，我们是有追求的。
Banner的设计
网站的banner采用黑色的背景，渲染了我们摄影社的神秘，给浏览者留下深刻的印象，更加吸引了浏览者对我们网站的兴趣，
滨海学院WEB编程基础设计课程
- 3 -
我们公司的设计是公司名与logo相结合在一起，象征着我们公司的有挑战新事物的追求，然后紧跟着的使我们的公司摄影口号，只有瞬间才会给你们想要的。
导航的设计
导航设计上采用七个长方块，利用无序排列的方式，展示了我们服务项目，向浏览者介绍我们公司的大体情况。
设计的代码：
Div：
css：
滨海学院WEB编程基础设计课程
- 3 -
栏目设计
我们公司的栏目设计主要包括六个模块，主要有最新动态、vip会员专区、最新动态、优秀作品、套餐介绍、图片欣赏，还有一些小的栏目框等。下面为设计表现图：
图2-1-4（1）
滨海学院WEB编程基础设计课程
- 4 -
图2-1-4（2）
设计栏目的设计，充分展示我们公司的主要情况，给浏览者一种大气的风范，一目了然，简单易懂感觉，有一种想欣赏的感受，充分体现了一种美的享受等。
我们公司网站首页以灰色为背景颜色，这样显得公司深沉稳重，脚踏实地。然后又将一些青春活力的照片加入其中，显现我们公司的朝气蓬勃，积极进取的创新的精神。
1：副页采用了简单框架的布局方式，向浏览者简单大方的展示了我们网站的情况。
2：版块有条理性，看起来很轻松，赏心悦目。
滨海学院WEB编程基础设计课程
- 5 -
3：更加有力的向浏览者寻找到自己想要的信息。
2-2网站的副页布局图
副页的名称
摄影的赏析
影图欣赏
关于一些摄影
摄影套餐的报价介绍
联系方式
友情链接
副页向浏览者展示我们网站的首页内容的详细情况，让浏览者更加具体的了解我们公司的情况，同时让我们公司的网站更加的完善化，整体化。
滨海学院WEB编程基础设计课程
- 7 -
三、创新亮点
Div：
轮换图片
通过图片的轮换更加衬托了我们网站的技术强大，通过技术手段更加证明我们的实力是不可战胜的，让更多的广大顾客朋友认同我们公司的强大，能够更加的信任我们，只有我们才能给他们带来自己需求的东西。
滨海学院WEB编程基础设计课程
- 7 -
Js+div：
自动图片轮换
四、总结
通过这个学期的学****我学会了制作网页，而且知道了知识的重要性。网站设计是一种非常难做但是又非常有意思的工作，我们可以任意发挥我们的创意，让我们飞翔在自由创意的国度里，但做网页也要谨慎小心，要一丝不苟。在这次网站制作中让我对Dreamweaver、Fireworks、