商丘网站设计制作的步骤示意图

商丘网站建设公司白杨网络总结的网站建设的流程示意图：

一 网站策划设计阶段

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 制作网站模板

</p>

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 如果更新页面布局，请更新网页模板