网站制作有哪些步骤?网站制作详细步骤

2022-01-17    访问量:0 字号

一 网站策划设计阶段

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