一 网站策划设计阶段

1 策划构思及设计流程

1.1 了解客户需求
创建网站结构示意图。

1.2 网站策划：
1.2.1 按照功能对网站栏目分类。
1.2.2 栏目要表达的中心思想和主题。
1.2.3 网站页面基调。

1.3 网站结构规划，
1.3.1 确定制作网站要采取的技术。
1.3.2 制作网站页面布局草图。

1.4 准备必要的素材:
1.4.1 包括图片
1.4.2 动画
1.4.3 文字资料

2 网站设计初样制作
2.1 网站页面设计 利用用户提供的图片和参照网址，使用photoshop设计出网站页面样式。
2.2 页面样式采集 使用ImageReady切割图片为网页大小，并保证图片质量，用来和用户沟通设计样式。

二 网站创建

1 建立站点：

1.1 使用DreamWear工具建立站点。
1.2 新建站点目录结构。
1.2.1 Image文件夹。用来存放站点中的图片。
1.2.2 Style文件夹。用来存CSS样式表文件。
1.2.3 Html文件夹。 用来放置Html文件。
1.2.4 Flash文件夹。用来放置动画文件。
1.2.5 temp文件夹。 用来存放临时文件。
(注释：如果网站过大，可以根据栏目分类把Html文件夹按照功能划分，并且子目录存放对应功能的 Image,Style,flash,temp文件。)

2 创建样式表：
样式表分类：
2.1 元素样式：
2.1.1 Body样式
2.1.2 表样式。
1 单元格样式
2.1.3 表单样式
1 List元素样式
2 Select元素样式
3 input元素样式
4 Check元素样式
5 Textarea元素样式
6 p样式
7 a样式
2.2 类样式： 根据功能命名并填充
2.3 ID样式： #加上表识符声明的Html元素ID的样式
2.4 伪元素、伪类样式：
2.4.1 伪类：
1 伪类定义：
对元素进行分类是基于特征, 当用户和文档进行交互时一个元素可以获取或者失去一个伪类
2 伪类类型：
:link用在为访问的连接上。
:visited用在已经访问过的连接上。
:active用于获得焦点（比如，被点击）的连接上。
:hover hover用于鼠标光标置于其上的连接。
:after after用于显示紧跟在元
素后面的内容 content。

3 伪类用途： Menu菜单，超链接
2.4.2 伪元素：
1 伪元素定义：
伪元素是创造关于文档语言能够指定的文档树之外的抽象。
例如文档语言不能提供访问元素内容第一字或者第一行的机制。
伪元素允许设计师引用它们，否则这是难以办到的。
伪元素还提供样式设计师给在源文档中不存在的内容分配样式。
2 伪元素类型： :first-line，:first-letter，:before，:after。
3 伪元素用途： 文档语言对象。
3 制作网站首页
3.1 导入样式表
3.2 设置页面标题
3.3 设置页面属性
3.4 制作头部表格
3.5 制作公告栏

4 制作正文表格
4.1 左侧栏制作。(一般包括：1 业务指南；2站内搜索；3 页面导航等)
4.2 制作Banner
4.3 制作新闻区
4.4 友情链接区

5 制作尾部版权 尾部导航

6 调整页面
6.1 表格与表格之间合理布局
6.2 层与层之间合理布局

7 制作网站模板

7.1 创建模板
7.1. 1 将首页另存为模板
7.1.2 创建模板可编辑区，并保存
7.2 使用库
7.2.1 把模板中的menu表格建成库文件，共给其它页面使用
7.2.2 把页脚文件建成库文件

8 应用模板创建子栏目(功能栏所在的页面是二级页面)
8.1 从模板新建网页
8.2 编辑可编辑区
9 应用模板制作三级页面(功能栏页面中的子页面为三级页面)

三级页面要以二级页面为基准而建立三 开发网站中需要注意的问题

1 准备相关素材
1.1 网站模板
1.2 CSS样式
1.3 动画(Flash,Swish2.0)
1.4 图片(photoshop)

2 定制CSS样式

3 如果更新页面布局，请更新网页模板

本文引用于网络，如有侵权请联系我们删除，谢谢。