完整网页设计的步骤

《完整网页设计的步骤》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、完整网页设计的步骤一、确定网站主题1、分析网站的功能，讲网站所有的功能再文档中体现2、分析网站的主题，选择符合网站主题的方案二、搜集材料1、通过和与网站相关人员的接触、交流确定网站需要的模块，并将这些模块再文档中体现2、收集相关图片、文字、视频等资料3、将图片、文字、视频等资料使用相应的软件进行编辑备用（必须做）4、对图片、文字、视频等资料分别分类整理5、例如：网站根文件夹下images文件夹存放网页界面图片（图片类型为jpg、jpeg、gif、png），pic文件夹存放照片素材，flash文件夹存放动画素材6、所有素材的文件名都必须是非中文字符，并且要做到看到文件名就知道

2、是哪张图片三、规划网站 1、网站的结构（目录结构），首页名称（index.html）、子页面名称（1.html、2.html、3.html），以及其所在的目录等，必须再文档中体现（绘制目录地图）2、栏目的设置，栏目必须再文档中体现3、网站的风格4、颜色搭配（主色调和辅助色调以及点睛色的RGB值是多少，要再文档中体现）5、版面布局（例如：国字型、厂字型），结构要再文档中体现6、绘制首页界面图（草图）四、设计工具的选择1、photoshop＋dreamweaver＋flash2、firework＋dreamweaver＋flash3、其他工具或者直接编码五、制作网页1、在计算机

3、的硬盘建立一个目录，作为存放网站的根目录，例如：E:WWW目录。2、使用图象设计软件设计网页首页界面（根据首页界面草图）。注意：①每加一个界面元素都要分层。②颜色严禁暖色调和冷色调混用。③图片添加的时候要注意过渡④网页的界面不该加的东西不要加，例如一些文字，如果文字不需要特殊效果，在设计界面的时候不需要添加⑤界面的大小：宽一般为780象素，高不小于435象素3、保存注意：①首先将源文件保存为*.psd文件，例如：index.psd，目录为网站的根目录，例如：E:WWW②严禁合并图层4、使用切片，将用photoshop设计的psd文件进行切片注意：①切片遵守从左到右，从上

4、到下的过程切片②切片要将整个界面全部切片，严禁留下切片缝隙③注意每个切片都应和周围切片对齐④切片的时候要注意每个切片的独立性，单独功能的切片单独切。⑤切片的时候要考虑切片以后在dreamweaver中是否容易编辑5、保存切片注意：①保存的时候，保存类型选输出html和gif②文件名为index③保存路径为你所准备好的存放网页的目录的根目录④最终根文件夹中应出现index.html和images文件夹，这两个文件夹都必须保留1、使用dreamweaver编辑网页首页注意：①首先建立站点，使用dreamweaver连接网站目录的根文件夹，例如：E:WWW，连接方法为网站的根目

5、录设为E:WWW，网络设置为无②站点与网站根目录连接好以后，编辑index.html首页③在index.html上添加必用的内容，文字、图片、动画、链接（链接子页面，目录必须采用相对目录）等，并且整体居中对齐，目录必须全部使用相对目录，将首页设计完成④首页完全设计好以后，在首页的基础上设计子页面，方法为：首先将首页另存为1.html，目录为网站根目录（E:WWW），打开1.html，将网页的主体内容换为子页面的主体内容，保存。其他的子页面也是同样的方法。2、本地测试打开index.html，然后将所有的网页浏览一遍，检查是否右错误(内容是否完整、界面是否合理，链接是否正

6、确)六、上传测试1、将网站根目录的内容全部上传服务器对应的文件夹下，例如第三个实验，将E:WWW中的内容全部复制到服务器对应文件夹3这个目录下。2、文件夹3这个目录要包含如下文件和文件夹：index.html（首页）、1.html、2.html（子页面）…….、images(界面图像文件夹)、index.psd（首页图像源文件）3、使用http://192.168.0.1这个地址对网站进行测试，如没有任何问题，说明网站测试成功七、推广宣传1、申请域名、空间2、网页上传空间3、宣传推广、提高访问量