loading请求处理中...
手机版 新型创意托付式服务平台 全国站
一品财税活动×
当前位置: 首页 > 威客攻略 > 网页设计素材
免费发布需求,接收报价与方案

新手必备的网页制作设计流程,赶紧来学习一下吧

2018-08-01 16:35:44 阅读 10938次 0 标签: 网页设计素材asp动态网页设计优秀网页设计欣赏 作者: ohnox
一、确定网站主题


  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文件夹,这两个文件夹都必须保留


  6、使用dreamweaver编辑网页首页


  注意:①首先建立站点,使用dreamweaver连接网站目录的根文件夹,例如:E:WWW,连接方法为网站的根目录设为E:WWW,网络设置为无;


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


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


  ④首页完全设计好以后,在首页的基础上设计子页面,方法为:首先将首页另存为1.html,目录为网站根目录(E:WWW),打开1.html,将网页的主体内容换为子页面的主体内容,保存。其他的子页面也是同样的方法。


  7、本地测试


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


  六、上传测试


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


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


  3、使用IP地址对网站进行测试,如没有任何问题,说明网站测试成功。


  七、推广宣传


  1、申请域名、空间;


  2、网页上传空间;


  3、宣传优化推广、提高访问量。
买创意 买设计 上一品威客网

前端开发公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

前端开发相关文章

留言(0 展开评论

您需要注册登录才能发表言论

前端开发服务排行榜
SERVICE LIST 更多
手机网站UI设计|微信小程序...
价格面议 成交4
八方视觉设计
响应式网站前端开发|Boots...
¥500元 /起 成交3
夸米-创意家 QQ79643190...
Web前端 页面制作 前端页...
¥100元 /起 成交2
东柏网络
微网站开发
价格面议 成交1
初芯电子工作室
小程序(商铺,社交类)设计与开...
价格面议 成交1
允尚互联服务平台
成品站订购 支持扩展 880元...
¥880元 /件 成交0
深圳网站建设及(SEO)网站推...
网站模版快速设计
¥368元 /件 成交0
深圳市南科网络科技有限公...
B2B公司网站
¥800元 /一口价 成交0
HR设计铺
销售类网站
¥1800元 /件 成交0
HR设计铺
生物行业
¥1100元 /次 成交0
时尚旗舰店