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

1、网页制作与网站制作流程网页设计流程一、策划。你想拥有一个什么样的网站？你的主色调，你的内容，等等，都需要一个策划，否则你打开制作工具，你根本不知道要做什么。对于新手来说，可以参考借鉴别人的作品，多看看一些你喜欢的网页，然后去模仿，慢慢的就能做出自己的东西了。一个策划做好了，就什么都好说了。二、设计图纸你可以先在草稿上先画一画，但那样的话，这个步骤应该归结于第一步。这里说的设计图纸是在PS或者FW中把你想做的网站用图片的形式画出来。先把自己的想要的网页用PS画出来。PS的灵活多变以及超级强大的功能，完全可以画出绚烂的网页出来。现在来说呢，我给大家提供几个数字，就是网页设计图纸的宽度。如果你的网页

2、是准备留有对联广告的位置，也就是像稀饭主站的那种样式来说呢，你的网页的宽度一般为 768 像素。768像素是最符合规范的，正好是屏幕的高度。如果你是想设计满屏的网页，宽度一般为1000左右。如果是首页的话呢，最好是能全部显示出来。三、切割网页切割网页这工作由PS或者FW来制作。切割网页就是把图片切割成若干个小图片，其中宽度高度什么的都得自己去掌握去学习。四、DMX制作网页网页就是表格加图片加FLASH。网站制作流程一、整体规划网站的规划分为下面几个部分1、动态程序语言的选择。2、网站栏目功能规划。网站有哪些栏目，你的网站实现什么功能。3、根目录策划。网站实际上就是一堆文件的集合，怎么样去规划这

3、些文件，就是目录的安排。好的网站的目录很清晰，让人一目了然。二、数据库规划数据库里面放什么东西，怎么样去放。三、编写网站后台要策划网站内容以及功能。写网站是先写后台滴。把后台和数据库全部弄出来了，前台就是显示还有什么问题吗？四、编写网站前台网页已经有了，使用程序把内容显示出来应该没有什么问题吧？五、测试，修改没有一个程序弄好了就是没有漏洞没有错误的，测试和修改是必不可少的。经过你的N多测试，我想网站应该没有什么问题了吧？六、发布。如果你的网页仅仅是给自己的朋友看看，当做学习，你可以用自己的电脑配置成服务器。如果你的网站准备长期给大家看，想做一名小小的站长，那么你可以考虑购买虚拟空间和域名。当然

4、，现在有很多人选择免费空间和免费域名 或 购买收费空间和顶级域名。网站整站制作流程一、前期策划制作方应与客户共同讨论以明确网站主题栏目设置整体风格网站功能及实现方法域名申请、虚拟主机或服务器的购买开发制作的周期后期维护的细节及报价二、页面细化及实施分工：前台页面设计制作、后台程序及功能实现1.页面美工设计美工设计人员在前期策划时，了解客户对网站设计的需求及其个人品味，以便在设计过程中有一个基调，从而提高设计稿的被认同率。美工首先要对网站风格有一个整体定位，包括标准字、Logo、标准色彩、广告语等。然后再根据此定位分别做出首页、二级栏目页及内容页的设计稿。首页设计包括版面、色彩、图案、动态效果、

5、图标等风格设计，也包括Banner(旗帜广告)、菜单、标题、版权等模块设计。一般会设计1-3套不同风格的设计稿交由客户讨论及提出修改意见，直到确定了最终方案，则按需求说明设计出所有需要的页面的设计图。2.静态页面制作 美工在设计好各个页面的效果图后，就需要制作成HTML页面，以供后台程序人员将程序整合。观察图纸观察图纸，对页面的布局、配色有一个整体的认识和了解，对如何在HTML页面里布局进行规划，以便下一步用软件来划分切片和输出图片。拆分图纸 1）分离颜色。其中一般包括3部分配色：页面主辅颜色搭配的基本配色、普通超级链接的配色和导航栏超级链接的配色。 2）提取尺寸。按照设计图的尺寸来搭建网页才

6、会符合图纸上的设计，不过也不是说必须严格按照设计图来做，有些时候可以灵活掌握。 3）分离背景图。背景图可能是大面积重复的图案，也可能就是一张图片，一般和内容没有关系的装饰性图片都可以考虑制作成背景图。 4）分离图标及特殊边框。小图标及花边可以给网页增添细节和亮点，边框的理论上讲，其使用方法和背景图片类似，不过根据情况往往需要单独输出。 5）分离图片。内容相关的图片，比如新闻报道的图片，讲解操作步骤的图片等。组装 就是把分离出来的元素按照一定的方法组合成与设计图效果类似的页面。使用层布局方式制作网页的步骤一般为：构建层结构-插入内容-样式表美化-细节处理-优化样式表。3.程序开发程序开发人员可以

7、先行开发功能模块，然后再整合到HTML页面内。三、后期维护 网站制作完成交付用户使用后，可能还会出现问题，或者客户要求修改某些内容，提供这些修改服务及维护服务的条款和费用应该在前期策划的时候，就商定清楚。还可能有包括网站推广、版本功能升级等内容的其他服务。id的命名(1) 页面结构 容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column 页面外围控制整体布局宽度：wrapper 位置与主次：left right center top bottom side main sub (多

8、用于与功能命名组合)(2)导航 导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 菜单内容1：menu1Content 菜单容器： menuContainer (结构组合以下不再赘述) 面包屑：breadCrumb(即页面所处位置导航提示) 搜索：search(3)内容标志：logo广告：banner标题: title摘要: summary文章列表：list图标: icon注释：note指南：guild提示信息：msg按钮：btn滚动

9、：scroll标签页：tab(4)功能登陆：login登录条：loginbar加入：joinus状态：status注册：regsiter功能区：shop(如购物车，收银台)当前的: current小技巧：tips热点：hot服务：service新闻：news招聘：hr下载：download投票：vote合作伙伴：partner友情链接：link版权：copyrightclass的命名(1)颜色:使用颜色的名称或者16进制代码,如.red color: red; .f60 color: #f60; .ff8600 color: #ff8600; (2)字体大小,直接使用font+字体大小作为名称

10、,如.font12px font-size: 12px; .font9pt font-size: 9pt; (3)对齐样式,使用对齐目标的英文名称,如.left float:left; .bottom float:bottom; (4)标题栏样式,使用类别+功能的方式命名,如.barnews .barproduct (5)其他建议的CSS书写顺序/显示属性 display list-style position float clear/自身属性 width height margin padding border background/文本属性 color font text-decorati

11、on text-align vertical-align white-space other text content例子body 整个空间页面background-color:#FFFFFF-空间名称和简介区域#header 主体部分height:89px;background:#3399CC#header div.lc 左背景图background:url(temp1/hdl.jpg) no-repeat#header div.rc 右背景图background:url(temp1/hdr.jpg) no-repeat top right#header div.tit 空间名称top:8p

12、x;left:20px;line-height:22px;font-size:20px;font-family:黑体#header div.tit a.titlink 空间名称链接color:#FFFFFF;text-decoration:none#header div.tit a.titlink:visitedcolor:#FFFFFF;text-decoration:none#header div.desc 空间简介top:33px;left:20px;color:#FFFFFF;font-size:13px#tabline TAB菜单下方的横线top:89px;background-co

13、lor:#FFFFFF#tab TAB菜单主体top:67px;background:url(temp1/tabbg.gif) repeat-x#tab a.on,#tab a.on:link,#tab a.on:visited TAB选中状态margin-top:3px;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;border-top:1px solid #FFFFFF;line-height:19px;background-color:#F3F1F1;color:#197CAE;font-size:14px#ta

14、b span TAB与TAB之间的分割符“|”color:#FFFFFF;font-size:14px#tab a:link TAB未选中状态color:#FFFFFF;text-decoration:none;font-size:14px#tab a:visitedcolor:#FFFFFF;text-decoration:none;font-size:14px#tab2 设置TAB菜单主体background:#DAE9F5#tab2 span TAB选中状态color:#000000;font-size:12px;font-weight:bold#tab2 a TAB未选中状态font-

15、size:12px#tab2 a:linkcolor:#0000CC#tab2 a:visitedcolor:#0000CC-内容区域 .stage（TAB菜单与版权信息之间的区域）background:#F3F1F1其它区域（即访问量等信息）#comm_info 主体color:#333333;font-family:Arial;text-align:left#comm_info div.line 分界线margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4#comm_info a 链接color:#3399CC-页码区域#pa

16、ge 主体height:30px;font-size:14px;font-family:Arial;text-align:center#page span 当前页码（不可点击）padding:3px;color:#000000;font-size:14px;font-weight:bold#page a.pc 上一页和下一页color:#3399CC;font-size:14px;font-weight:bold#page a.pc:visitedcolor:#3399CC#page a.pi 页码（可点击）padding:3px;color:#3399CC;font-size:14px#pa

17、ge a.pi:visitedcolor:#3399CC-模块.mod margin-bottom:10px.modhandlecursor:move.modth 模块标题栏主体height:24px.modheadpadding:4px 4px 0 4px.modopt 模块操作区（如写新文章）padding:4px 4px 0 0.modtit 模块标题区（如文章列表）color:#FFFFFF;font-size:12px;font-weight:bolda.modtitcolor:#FFFFFFa.modtit:visitedcolor:#FFFFFF.modtitlinkcolor:

18、#FFFFFF;font-size:12px;font-weight:bolda.modtitlinkcolor:#FFFFFF;text-decoration:nonea.modtitlink:visitedcolor:#FFFFFF;text-decoration:nonea.modtitlink:hovercolor:#FF5100;text-decoration:underline.modact 操作文字链接（如文章列表）color:#FFFFFF;font-size:12pxa.modact:linkcolor:#FFFFFFa.modact:visitedcolor:#FFFFFF

19、.modbox 模块内容区padding:10px 10px 0 10px;background-color:#FFFFFF.modtl 模块左上角背景background:url(temp1/ptitl.gif) no-repeat top left;line-height:1px.modtc 模块中上背景background:url(temp1/ptitc.gif) repeat-x.modtr 模块右上角背景background:url(temp1/ptitr.gif) no-repeat top right;line-height:1px.modbl 模块左下角背景background

20、-color:#FFFFFF;line-height:1px.modbc 模块中下背景background-color:#FFFFFF;line-height:1px.modbr 模块右下角背景background-color:#FFFFFF;line-height:1px-文章区域#m_blog div.tit 文章标题font-size:14px;font-weight:bold#m_blog div.tit a 文章标题链接color:#333333;font-size:14px;font-weight:bold#m_blog div.tit a:visitedcolor:#333333

21、#m_blog div.date 文章发表日期margin:5px 0 8px 0;color:#666666#m_blog t 文章内容color:#333333;line-height:20px;font-size:14px#m_blog div.moremargin:14px 0 16px 0#m_blog div.more a 阅读全文链接color:#3399CC;font-size:14px#m_blog div.more a:visitedcolor:#3399CC#m_blog div.opt 文章操作区（如编辑、评论等）color:#666666;font-size:12px

22、#m_blog div.opt a 文章操作链接color:#3399CC;font-size:12px#m_blog div.opt a:visitedcolor:#3399CC#m_blog div.line 分界线margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4#m_blog div.none 无文章提示信息padding:100px 0 100px 0;color:#333333;font-size:14px-个人档案区域#m_pro a 链接color:#3399CC#m_pro a:visitedcolor:

23、#3399CC#m_pro div.image 个人头像text-align:center#m_pro div.act 操作区（如加为好友、发送消息）margin-top:10px#m_pro div.user 用户名margin-top:10px;color:#333333;font-size:12px;font-weight:bold#m_pro div.desc 用户简介color:#333333;font-size:12px#m_pro div.line 分界线margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4#m

24、_pro tdcolor:#333333;line-height:24px;font-size:14px-相册区域#m_album div.image 照片text-align:center#m_album div.page color:#666666;font-size:12px;text-align:center#m_album div.page acolor:#0000CC;font-size:12px#m_album div.page a:visitedcolor:#0000CC-友情链接区域#m_links div.item 子项color:#333333;font-size:12p

25、x#m_links div.item a 名称（链接）color:#3399CC;font-size:12px;text-decoration:none#m_links div.item a:visitedcolor:#3399CC#m_links div.line 分界线margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4-文章分类#m_artclg div.item 子项color:#666666;font-size:12px#m_artclg div.item a 分类名称（链接）color:#3399CC;font-si

26、ze:12px#m_artclg div.item a:visitedcolor:#3399CC#m_artclg div.line 分界线margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4-最新评论区域#m_comment div.item 子项color:#333333;font-size:12px#m_comment div.item a 发表人（链接）color:#3399CC;font-size:12px#m_comment div.item a:visitedcolor:#3399CC#m_comment div.item t 评论摘要（链接）color:#333333;font-size:12px;text-decoration:none#m_comment div.item t:visitedcolor:#333333;text-decoration:none#m_comment div.item t:hovercolor:#333333;text-decoration:underline#m_comment div.line 分界线margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4-相册列表#m_albuml