网页设计制作的步骤有哪些

 

一、确定网站的主题

 

1.分析网站的功能，并解释网站的所有功能都反映在文档中。

 

2.分析网站的主题，选择符合网站主题的方案

 

 

二、搜集材料

 

1.通过与网站相关人员的联系和沟通，确定网站所需的模块，并在文件中反映这些模块；

 

2、收集相关图片、文字、视频等信息；

 

3.使用相应的软件编辑图片、文本、视频等资料备用(必须完成)；

 

4.分别对图片、文字、视频等资料进行分类整理；

 

5.例如，网站根文件夹下的images文件夹存储网络界面图片(图片类型为jpg、JPEG、gif、png)，pic文件夹存储照片材料，flash文件夹存储动画材料。

 

6.所有材料的文件名必须是非中文字符，并且您应该通过文件名就知道是哪个图片。

 

三、规划网站

 

1.网站的结构(目录结构)、第一页的名称(index.html)、子页的名称(1.html，2.html，3.html)以及它所在的目录必须反映在文档中(绘制目录图)；

 

2.栏目设置，栏目必须反映在文档中；

 

3.网站的风格；

 

4.颜色匹配(主颜色、辅助颜色和修饰颜色的RGB值应反映在文档中)。当然，颜色应该根据产品和行业的性质来匹配，例如餐饮的暖色。

 

5.布局(如中文字体、工厂字体)和结构应体现在文档中。

 

6、绘制主页界面图(草图)。

 

四、设计工具的选择

 

1、Photoshop+Dreamweaver+flash；

 

2、firework+Dreamweaver+flash；

 

3.其他工具或直接编码。

 

五、制作网页

 

1.在计算机硬盘上设置一个目录作为存储网站的根目录，例如:E:WWW目录；

 

2.使用图像设计软件设计网页的主页界面(根据主页界面草图)；

 

注意：①每加一个界面元素都要分层。

 

②色调禁止暖色系和冷色系混用。

 

③照片加上的那时候要留意过渡。

 

④不要添加任何不应该添加到网页界面的内容，例如一些单词。如果单词不需要特殊效果，那么在设计界面时就不需要添加它们。

 

⑤界面的大小：宽一般为780象素，高不小于435象素。

 

3、保存

 

注意:①首先将源文件另存为*。psd文件，例如:index.psd，该目录是网站的根目录，例如:E:WWW

 

②严禁合并图层

 

4.用photoshop设计的psd文件切片

 

注:①从左到右、从上到下切片

 

②切片要切片整个界面，严禁留下切片间隙

 

③注意每个切片应与周围切片对齐

 

④切片时注意各切片的独立性。具有不同功能的切片应分开切割。

 

⑤切片时，考虑切片是否易于在dreamweaver中编辑

 

5、保存切片

 

注:①保存时，保存类型为html和gif

 

②文件名为index

 

③保存路径是您为存储网页准备的目录的根目录。

 

(4)index.html和图像文件夹应出现在最终的根文件夹中，两个文件夹都必须保留。

 

6.使用dreamweaver编辑网页主页

 

注:①首先建立一个网站，用dreamweaver连接网站目录的根目录，例如:E:WWW，连接方式是网站的根目录设置为E:WWW，网络设置为无；

 

②网站与网站根目录连接后，编辑index.html首页；

 

③在index.html上添加必用的内容，文字、图片、动画、链接（链接子页面，目录必须采用相对目录）等，并且整体居中对齐，目录必须全部使用相对目录，将首页设计完成；

 

(4)首页页设计完成后，在第一页的基础上设计子页，首先将第一页保存为1.html，目录作为网站(E:WWW)的根目录，打开1.html，用子页的主要内容替换网页的主要内容，保存。其他的子页面也是同样的方法。

 

7、本地测试

 

打开index.html，然后浏览所有网页，检查是否有正确的错误(内容是否完整，界面是否合理，链接是否正确)。

 

六、上传测试

 

1.将网站根目录的所有内容上传到服务器对应的文件夹。例如，在第三个实验中，将EWWW中的所有内容复制到与服务器的文件夹3相对应的目录中；

 

2、文件夹3这个目录要包含如下文件和文件夹：index.html（首页）、1.html、2.html（子页面）…….、images(界面图像文件夹)、index.psd（首页图像源文件）；

 

3.使用IP地址测试网站。如果没有问题，网站测试成功。

 

七、推广宣传

 

1、申请域名、空间；

 

2、网页上传空间；

 

3、宣传优化推广、提高访问量。