成都网站建设|成都网站设计|成都网站制作|成都网页设计|成都网页制作|纽奇科技
微信咨询 028-61336419
联系我们

免费热线:4000-114-609
公司电话:028-61336419
手机号码:18111243309
邮箱:414353097@qq.com
公司地址:成都成华区玉双路2号玉双大楼五楼c5-2和d5-1

你现在的位置:首页> 常见问题 > 成都网站建设> 完整网页设计的步骤

完整网页设计的步骤

发布者:纽奇科技     阅读: 424次        2017-09-28 17:54:58

完整网页设计的步骤 

一、确定网站主题 

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 

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

④最终根文件夹中应出现index.html和images文件夹,这两个文件夹都必须保留 
7、 使用dreamweaver编辑网页首页 

注意:

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

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

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

③ 在index.html上添加必用的内容,文字、图片、动画、链接(链接子页面,目录必须采用相对目录)等,并且整体居中对齐,目录必须全部使用相对目录,将首页设计完成 
④首页完全设计好以后,在首页的基础上设计子页面,方法为:首先将首页另存为1.html,目录为网站根目录(E:\WWW),打开1.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、网页上传空间 

3、宣传推广、提高访问量

服务热线: 18111243309
4000-114-609

联系人:王先生

联系电话:028-61336419

联系地址:成都成华区玉双路2号玉双大楼五楼c5-2和d5-1

版权所有成都纽奇科技有限公司 Copyright © 2014-2020 ICP备案:蜀ICP备14002858号-1
360网站安全检测平台