企业网页设计制作的步骤及流程

时间:2022年11月07日 23:37

一、确定网站主题

1.分析网站的功能,并重新记录网站的所有功能。

2.分析网站主题,选择符合网站主题的解决方案。

网页设计

二、搜集材料

1.通过与网站上相关人员的联系和沟通确定网站所需的模块,并将这些模块反映在文档中;

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

3.使用相应的软件编辑图片,文字,视频等资料(必须做);

4.整理图片,文字,视频等等。

5.例如,网站根文件夹中的images文件夹存储web界面图像(图片类型为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;

2firework+dreamweaver+flash;

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

五、制作网页

1.在计算机硬盘上设置一个目录作为网站的根目录,如:e:www目录;

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

注:(1)每个附加的界面元素都应该分层。

(2)严禁使用暖色和冷色。

(3)当您添加图片时,请小心

(4)不应添加网页界面,例如某些文本。如果文本不需要特殊效果,则在设计界面时无需添加它。

(5)接口尺寸:宽780像素,高435像素

3、保存

注意:1首先将源文件保存为*。PSD文件,例如:index.psd目录是网站的根目录,例如:e:www

②严禁合并图层

4.使用切片,切片由Photoshop设计的PSD文件

注意:1个切片从左到右,从上到下跟随过程切片

(2)对整个界面进行切片,严禁留有切片间隙。

3.请注意,每个切片应该与周围的片对齐。

4、切片时注意每个切片的独立性,单独切割功能切片。

切片后,应考虑5个切片是否易于在Dreamweaver中编辑

5、保存切片

注:1。保存时,选择要输出HTML和GIF的类型。

2文件名是索引。

3目录的根目录,其中路径可供您存储网页

4 index.html和images文件夹应出现在最终的根文件夹中。必须保留这两个文件夹。

6。使用Dreamweaver编辑主页

注意:1首先建立站点,使用Dreamweaver连接到网站目录的根文件夹,例如:e:www,站点根目录的连接方法设置为E:www,网络设置为None;

2网站与根目录链接良好后,编辑index.html首页;

3在index.html上添加必要的内容,文本,图片,动画,链接(链接子页面,目录必须使用相对目录)等,并整体中心对齐,目录必须使用相对目录,主页设计完成了;

(4)主页设计完成后,以主页为基础设计子页。方法是:首先将主页保存为1.html,目录保存为网站根目录(e:www),打开1.html,将页面的主要内容改为子页面的主要内容,并保存。其他子页也是如此。

7、本地测试

打开index.html,浏览所有页面以检查正确的错误(内容完整,界面合理,链接正确)。

六、上传测试

1.上传网站根目录下所有内容的对应文件夹下的服务器,如第三次实验,将E:www中的所有内容复制到相应文件夹的目录3服务器上;

2,文件夹3这个目录应该包含以下文件和文件夹:index.html(主页),1.html,2.html(子页面).......,图像(界面图像文件夹),索引.psd(主页图像源文件);

三。使用IP地址测试网站。如果没有问题,网站测试是成功的。

七、推广宣传

1.申请域名和域名;

2、网页上传空间;

3.促进优化和推广,增加流量。