栏目导航

完整网页设计的步骤 

一、确定网站主题 

1、 分析网站的功能，讲网站所有的功能再文档中体现

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

 二、搜集材料 

3、 将图片、文字、视频等资料使用相应的软件进行编辑备用（必须做）

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

jpg、jpeg、gif、png），pic文件夹存放照片素材，flash文件夹存放动画素材 

6、 所有素材的文件名都必须是非中文字符，并且要做到看到文件名就知

道是哪张图片

 三、规划网站  

5、版面布局（例如：国字型、厂字型），结构要再文档中体现

 6、绘制首页界面图（草图）

 四、设计工具的选择 

1、photoshop＋dreamweaver＋flash 2、firework＋dreamweaver＋flash 3、其他工具或者直接编码

 五、制作网页 

1、在计算机的硬盘建立一个目录，作为存放网站的根目录，例如：E:\WWW目录。      

2、使用图象设计软件设计网页首页界面（根据首页界面草图）。 

注意：

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

②颜色严禁暖色调和冷色调混用。

 ③图片添加的时候要注意过渡 

④网页的界面不该加的东西不要加，例如一些文字，如果文字不需要特殊效果，在设计界面的时候不需要添加 

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

根目录，例如：E:\WWW ②严禁合并图层

4、使用切片，将用photoshop设计的psd文件进行切片 

注意：

①切片遵守从左到右，从上到下的过程切片 

②切片要将整个界面全部切片，严禁留下切片缝隙

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

④切片的时候要注意每个切片的独立性，单独功能的切片单独切。

 ⑤ 切片的时候要考虑切片以后在dreamweaver中是否容易编辑 

注意：

①保存的时候，保存类型选输出html和gif 

②文件名为index 

③ 保存路径为你所准备好的存放网页的目录的根目录 

注意：

①首先建立站点，使用dreamweaver连接网站目录的根文件夹，例

如：E:\WWW，连接方法为网站的根目录设为E:\WWW，网络设置为无 

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

8、 本地测试 打开index.html，然后将所有的网页浏览一遍，检查是否右错误( 内容是否完整、界面是否合理，链接是否正确) 

六、上传测试

 1、将网站根目录的内容全部上传服务器对应的文件夹下，例如第三个实验，将E:\WWW中的内容全部复制到服务器对应文件夹3这个目录下。

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

3、使用http://192.168.0.1这个地址对网站进行测试，如没有任何问题，说明网站测试成功 

七、推广宣传 

1、申请域名、空间 

2、网页上传空间