网页制作与网站制作流程.docx

资源描述

网页制作与网站制作流程.docx

《网页制作与网站制作流程.docx》由会员分享，可在线阅读，更多相关《网页制作与网站制作流程.docx（20页珍藏版）》请在冰豆网上搜索。

网页制作与网站制作流程.docx

网页制作与网站制作流程

网页设计流程

一、策划。

你想拥有一个什么样的网站？

你的主色调，你的内容，等等，都需要一个策划，否则你打开制作工具，你根本不知道要做什么。

对于新手来说，可以参考借鉴别人的作品，多看看一些你喜欢的网页，然后去模仿，慢慢的就能做出自己的东西了。

一个策划做好了，就什么都好说了。

二、设计图纸

你可以先在草稿上先画一画，但那样的话，这个步骤应该归结于第一步。

这里说的设计图纸是在PS或者FW中把你想做的网站用图片的形式画出来。

先把自己的想要的网页用PS画出来。

PS的灵活多变以及超级强大的功能，完全可以画出绚烂的网页出来。

现在来说呢，我给大家提供几个数字，就是网页设计图纸的宽度。

如果你的网页是准备留有对联广告的位置，也就是像稀饭主站的那种样式来说呢，你的网页的宽度一般为768像素。

768像素是最符合规范的，正好是屏幕的高度。

如果你是想设计满屏的网页，宽度一般为1000左右。

如果是首页的话呢，最好是能全部显示出来。

三、切割网页

切割网页这工作由PS或者FW来制作。

切割网页就是把图片切割成若干个小图片，其中宽度高度什么的都得自己去掌握去学习。

四、DMX制作网页

网页就是表格加图片加FLASH。

网站制作流程

一、整体规划

网站的规划分为下面几个部分

1、动态程序语言的选择。

2、网站栏目功能规划。

网站有哪些栏目，你的网站实现什么功能。

3、根目录策划。

网站实际上就是一堆文件的集合，怎么样去规划这些文件，就是目录的安排。

好的网站的目录很清晰，让人一目了然。

二、数据库规划

数据库里面放什么东西，怎么样去放。

三、编写网站后台

要策划网站内容以及功能。

写网站是先写后台滴。

把后台和数据库全部弄出来了，前台就是显示还有什么问题吗？

四、编写网站前台

网页已经有了，使用程序把内容显示出来应该没有什么问题吧？

？

五、测试，修改

没有一个程序弄好了就是没有漏洞没有错误的，测试和修改是必不可少的。

经过你的N多测试，我想网站应该没有什么问题了吧？

？

六、发布。

如果你的网页仅仅是给自己的朋友看看，当做学习，你可以用自己的电脑配置成服务器。

如果你的网站准备长期给大家看，想做一名小小的站长，那么你可以考虑购买虚拟空间和域名。

当然，现在有很多人选择免费空间和免费域名或购买收费空间和顶级域名。

网站整站制作流程

一、前期策划

制作方应与客户共同讨论以明确

①网站主题

②栏目设置

③整体风格

④网站功能及实现方法

⑤域名申请、虚拟主机或服务器的购买

⑥开发制作的周期

⑦后期维护的细节及报价

二、页面细化及实施

分工：

前台页面设计制作、后台程序及功能实现

1.页面美工设计

美工设计人员在前期策划时，了解客户对网站设计的需求及其个人品味，以便在设计过程中有一个基调，从而提高设计稿的被认同率。

美工首先要对网站风格有一个整体定位，包括标准字、Logo、标准色彩、广告语等。

然后再根据此定位分别做出首页、二级栏目页及内容页的设计稿。

首页设计包括版面、色彩、图案、动态效果、图标等风格设计，也包括Banner（旗帜广告）、菜单、标题、版权等模块设计。

一般会设计1-3套不同风格的设计稿交由客户讨论及提出修改意见，直到确定了最终方案，则按需求说明设计出所有需要的页面的设计图。

2.静态页面制作

美工在设计好各个页面的效果图后，就需要制作成HTML页面，以供后台程序人员将程序整合。

①观察图纸

观察图纸，对页面的布局、配色有一个整体的认识和了解，对如何在HTML页面里布局进行规划，以便下一步用软件来划分切片和输出图片。

②拆分图纸

1）分离颜色。

其中一般包括3部分配色：

页面主辅颜色搭配的基本配色、普通超级链接的配色和导航栏超级链接的配色。

2）提取尺寸。

按照设计图的尺寸来搭建网页才会符合图纸上的设计，不过也不是说必须严格按照设计图来做，有些时候可以灵活掌握。

3）分离背景图。

背景图可能是大面积重复的图案，也可能就是一张图片，一般和内容没有关系的装饰性图片都可以考虑制作成背景图。

4）分离图标及特殊边框。

小图标及花边可以给网页增添细节和亮点，边框的理论上讲，其使用方法和背景图片类似，不过根据情况往往需要单独输出。

5）分离图片。

内容相关的图片，比如新闻报道的图片，讲解操作步骤的图片等。

③组装

就是把分离出来的元素按照一定的方法组合成与设计图效果类似的页面。

使用层布局方式制作网页的步骤一般为：

构建层结构->插入内容->样式表美化->细节处理->优化样式表。

3.程序开发

程序开发人员可以先行开发功能模块，然后再整合到HTML页面内。

三、后期维护

网站制作完成交付用户使用后，可能还会出现问题，或者客户要求修改某些内容，提供这些修改服务及维护服务的条款和费用应该在前期策划的时候，就商定清楚。

还可能有包括网站推广、版本功能升级等内容的其他服务。

id的命名

（1）页面结构

容器:

container

　　页头：

header

　　内容：

content/container

　　页面主体：

main

　　页尾：

footer

　　导航：

nav

　　侧栏：

sidebar

　　栏目：

column

　页面外围控制整体布局宽度：

wrapper

位置与主次：

leftrightcentertopbottomsidemainsub（多用于与功能命名组合）

（2）导航

导航：

nav

　主导航：

mainbav

　子导航：

subnav

　顶导航：

topnav

　边导航：

sidebar

　左导航：

leftsidebar

　右导航：

rightsidebar

菜单：

　子菜单：

submenu

菜单内容1：

menu1Content

菜单容器：

menuContainer（结构组合以下不再赘述）

面包屑：

breadCrumb（即页面所处位置导航提示）

搜索：

（3）内容

标志：

logo

banner

标题:

title

摘要:

summary

文章列表：

list

图标:

icon

注释：

note

指南：

guild

提示信息：

msg

按钮：

btn

滚动：

scroll

标签页：

tab　

（4）功能

登陆：

登录条：

loginbar

加入：

joinus

状态：

status

regsiter

功能区：

shop（如购物车，收银台）

当前的:

current

小技巧：

tips

热点：

hot

服务：

service

新闻：

news

招聘：

下载：

download

投票：

vote

合作伙伴：

partner

友情链接：

link

版权：

class的命名

（1）颜色:

使用颜色的名称或者16进制代码,如

.red{color:

red;}

.f60{color:

#f60;}

.ff8600{color:

#ff8600;}

（2）字体大小,直接使用"font+字体大小"作为名称,如

.font12px{font-size:

12px;}

.font9pt{font-size:

9pt;}

（3）对齐样式,使用对齐目标的英文名称,如

.left{float:

left;}

.bottom{float:

bottom;}

（4）标题栏样式,使用"类别+功能"的方式命名,如

.barnews{}

.barproduct{}

（5）其他建议的CSS书写顺序

//显示属性displaylist-stylepositionfloatclear

//自身属性widthheightmarginpaddingborderbackground

//文本属性colorfonttext-decorationtext-alignvertical-alignwhite-spaceothertextcontent

例子

body整个空间页面{background-color:

#FFFFFF}

--------------------------------------------------------------------------------

空间名称和简介区域

#header主体部分{height:

89px;background:

#3399CC}

#headerdiv.lc左背景图{background:

url（temp1/hdl.jpg）no-repeat}

#headerdiv.rc右背景图{background:

url（temp1/hdr.jpg）no-repeattopright}

#headerdiv.tit空间名称{top:

8px;left:

20px;line-height:

22px;font-size:

20px;font-family:

黑体}

#headerdiv.tita.titlink空间名称链接{color:

#FFFFFF;text-decoration:

none}

#headerdiv.tita.titlink:

visited{color:

#FFFFFF;text-decoration:

none}

#headerdiv.desc空间简介{top:

33px;left:

20px;color:

#FFFFFF;font-size:

13px}

#tablineTAB菜单下方的横线{top:

89px;background-color:

#FFFFFF}

#tabTAB菜单主体{top:

67px;background:

url（temp1/tabbg.gif）repeat-x}

#taba.on,#taba.on:

link,#taba.on:

visitedTAB选中状态{margin-top:

3px;border-left:

1pxsolid#FFFFFF;border-right:

1pxsolid#FFFFFF;border-top:

1pxsolid#FFFFFF;line-height:

19px;background-color:

#F3F1F1;color:

#197CAE;font-size:

14px}

#tabspanTAB与TAB之间的分割符“|”{color:

#FFFFFF;font-size:

14px}

#taba:

linkTAB未选中状态{color:

#FFFFFF;text-decoration:

none;font-size:

14px}

#taba:

visited{color:

#FFFFFF;text-decoration:

none;font-size:

14px}

#tab2设置TAB菜单主体{background:

#DAE9F5}

#tab2spanTAB选中状态{color:

#000000;font-size:

12px;font-weight:

bold}

#tab2aTAB未选中状态{font-size:

12px}

#tab2a:

link{color:

#0000CC}

#tab2a:

visited{color:

#0000CC}

--------------------------------------------------------------------------------

内容区域.stage（TAB菜单与版权信息之间的区域）{background:

#F3F1F1}

其它区域（即访问量等信息）

#comm_info主体{color:

#333333;font-family:

Arial;text-align:

left}

#comm_infodiv.line分界线{margin-top:

5px;line-height:

8px;border-top:

1pxsolid#D2E9F4}

#comm_infoa链接{color:

#3399CC}

--------------------------------------------------------------------------------

页码区域

#page主体{height:

30px;font-size:

14px;font-family:

Arial;text-align:

center}

#pagespan当前页码（不可点击）{padding:

3px;color:

#000000;font-size:

14px;font-weight:

bold}

#pagea.pc上一页和下一页{color:

#3399CC;font-size:

14px;font-weight:

bold}

#pagea.pc:

visited{color:

#3399CC}

#pagea.pi页码（可点击）{padding:

3px;color:

#3399CC;font-size:

14px}

#pagea.pi:

visited{color:

#3399CC}

--------------------------------------------------------------------------------

模块

.mod{margin-bottom:

10px}

.modhandle{cursor:

move}

.modth模块标题栏主体{height:

24px}

.modhead{padding:

4px4px04px}

.modopt模块操作区（如写新文章）{padding:

4px4px00}

.modtit模块标题区（如文章列表）{color:

#FFFFFF;font-size:

12px;font-weight:

bold}a.modtit{color:

#FFFFFF}a.modtit:

visited{color:

#FFFFFF}

.modtitlink{color:

#FFFFFF;font-size:

12px;font-weight:

bold}a.modtitlink{color:

#FFFFFF;text-decoration:

none}a.modtitlink:

visited{color:

#FFFFFF;text-decoration:

none}a.modtitlink:

hover{color:

#FF5100;text-decoration:

underline}

.modact操作文字链接（如文章列表）{color:

#FFFFFF;font-size:

12px}a.modact:

link{color:

#FFFFFF}a.modact:

visited{color:

#FFFFFF}

.modbox模块内容区{padding:

10px10px010px;background-color:

#FFFFFF}

.modtl模块左上角背景{background:

url（temp1/ptitl.gif）no-repeattopleft;line-height:

1px}

.modtc模块中上背景{background:

url（temp1/ptitc.gif）repeat-x}

.modtr模块右上角背景{background:

url（temp1/ptitr.gif）no-repeattopright;line-height:

1px}

.modbl模块左下角背景{background-color:

#FFFFFF;line-height:

1px}

.modbc模块中下背景{background-color:

#FFFFFF;line-height:

1px}

.modbr模块右下角背景{background-color:

#FFFFFF;line-height:

1px}

--------------------------------------------------------------------------------

文章区域

#m_blogdiv.tit文章标题{font-size:

14px;font-weight:

bold}

#m_blogdiv.tita文章标题链接{color:

#333333;font-size:

14px;font-weight:

bold}

#m_blogdiv.tita:

visited{color:

#333333}

#m_blogdiv.date文章发表日期{margin:

5px08px0;color:

#666666}

#m_blogt文章内容{color:

#333333;line-height:

20px;font-size:

14px}

#m_blogdiv.more{margin:

14px016px0}

#m_blogdiv.morea阅读全文链接{color:

#3399CC;font-size:

14px}

#m_blogdiv.morea:

visited{color:

#3399CC}

#m_blogdiv.opt文章操作区（如编辑、评论等）{color:

#666666;font-size:

12px}

#m_blogdiv.opta文章操作链接{color:

#3399CC;font-size:

12px}

#m_blogdiv.opta:

visited{color:

#3399CC}

#m_blogdiv.line分界线{margin-top:

17px;line-height:

17px;border-top:

1pxsolid#D2E9F4}

#m_blogdiv.none无文章提示信息{padding:

100px0100px0;color:

#333333;font-size:

14px}

--------------------------------------------------------------------------------

个人档案区域

#m_proa链接{color:

#3399CC}

#m_proa:

visited{color:

#3399CC}

#m_prodiv.image个人头像{text-align:

center}

#m_prodiv.act操作区（如加为好友、发送消息）{margin-top:

10px}

#m_prodiv.user用户名{margin-top:

10px;color:

#333333;font-size:

12px;font-weight:

bold}

#m_prodiv.desc用户简介{color:

#333333;font-size:

12px}

#m_prodiv.line分界线{margin-top:

17px;line-height:

17px;border-top:

1pxsolid#D2E9F4}

#m_protd{color:

#333333;line-height:

24px;font-size:

14px}

--------------------------------------------------------------------------------

相册区域

#m_albumdiv.image照片{text-align:

center}

#m_albumdiv.page{color:

#666666;font-size:

12px;text-align:

center}

#m_albumdiv.pagea{color:

#0000CC;font-size:

12px}

#m_albumdiv.pagea:

visited{color:

#0000CC}

--------------------------------------------------------------------------------

友情链接区域

#m_linksdiv.item子项{color:

#333333;font-size:

12px}

#m_linksdiv.itema名称（链接）{color:

#3399CC;font-size:

12px;text-decoration:

none}

#m_linksdiv.itema:

visited{color:

#3399CC}

#m_linksdiv.line分界线{margin-top:

5px;line-height:

8px;border-top:

1pxsolid#D2E9F4}

--------------------------------------------------------------------------------

文章分类

#m_artclgdiv.item子项{color:

#666666;font-size:

12px}

#m_artclgdiv.itema分类名称（链接）{color:

#3399CC;font-size:

12px}

#m_artclgdiv.itema:

visited{color:

#3399CC}

#m_artclgdiv.line分界线{margin-top:

5px;line-height:

8px;border-top:

1pxsolid#D2E9F4}

--------------------------------------------------------------------------------