网页设计与制作第二讲.docx

1、网页设计与制作第二讲网页设计与制作第二讲 网站建设的流程与规范2.1 网站建设规范1组建开发团队规范开发网络项目不是一个人的事，根据项目大小需要组建几个人乃至几十人的团队，在团队划分中可以包括项目经理、策划、美工、程序员、网页制作人员和测试员等。项目经理：负责项目总体设计、开发进度的定制和监控、开发规范的制定和各个环节的评审，并协调各小组间的开发。策划：提供详细的策划方案和需求分析，还包括后期网站推广方面的策划。美工：根据策划和需求分析设计网站VI、界面和Logo等。程序员：根据项目总体设计来设计数据库和功能模块。网页制作人员：负责将程序员的代码和界面融合到一起，还可以制作网站相关页面。测试员

2、：负责测试程序。2开发工具规范1）前台开发工具：Photoshop、Dreamweaver、Flash等。2）后台开发环境：用于动态程序开发的技术如ASP.NET，用于数据库创建的工具如 SQL Server。3超链接规范绝对路径：相对路径：根目录相对路径：4文件夹和文件命名规范尽量不使用难理解的缩写词。不在名称中加入本文件夹或上级文件夹名作为前缀。加强对临时文件及临时文件夹的管理。命名中避免使用特殊符号。5代码设计规范大小写规范：HTML代码、程序代码。字体和格式规范。注释规范：网页中的注释用于代码功能的解释和说明。 注释内容应与被注释代码保持一致。 将注释写在代码之前。 使用统一的注释格式

3、。 仅在需要的地方简明扼要地进行注释。2.2 网站建设的基本流程做任何工作，首先需要制订相关的工作计划和流程，制作网站也不例外。合理的流程可以尽最大限度地提高工作效率，减少因流程不畅通而浪费的时间和精力。一般网站的开发设计人员遵循以下网站开发流程：网站需求分析规划站点结构收集资源前台设计后台开发申请域名和服务器空间测试及发布网站网站的维护和推广。在整个开发过程中，一般要经过这8个步骤，通常可以将其归纳为3方面，即网站策划、实施网站方案和发布及推广。开发一个网站，并不是一个人在有限时间内可以完成的，而是需要一个团队。因此，拥有一个完整、合理的网站建设流程，可以使每个开发人员按部就班地开展工作。1

4、网站策划网站策划是建设网站的开始，决定网站是否能够吸引浏览者。策划网站必须确定及满足客户的需求，也要适合浏览者或者为浏览者提供一定的服务。1）网站需求分析建设网站需要分析未来网站用户对网站的需求，需要网站提供什么样的服务。如果需要为多种用户提供服务的话，服务的侧重点又是什么。只有明确服务的对象或者主要服务对象，网站才能根据该对象而制订出正确的网站发展策略。如果已有类似网站，应分析这些同类网站的优点和缺点，并在借鉴的同时，保持自己的个性和特色，这样的网站才会为人们记住并且光顾。越复杂的项目对需求分析结果的精确、细致程度要求越高，往往一个大型网络项目的开发周期中60%甚至80%的时间都用于调查分析

5、，由此可见其重要性。做好了分析，就可以有针对性地拟定合适的开发技术方案。在建设网站时，需要用到多种技术，包括服务器的相关技术（NT Server/Linux）、数据库技术（ACCESS/My Sql/SQL Server）、前台技术（XHTML+CSS/Flash/AIR）以及后台技术（ASP/ASP.NET/PHP/JSP）等。2）规划站点结构确立了网站建设的需求，还需要规划站点的结构。合理的结构可以帮助网站的访问者尽快查找到需要的资源，提高网站在访问者心目中的地位，而混乱的结构往往使访问者不知所措。规划站点结构必须牢记网站是为访问者服务的，必须想访问者所想，急访问者所急。例如，规划一个企业

6、的网站，必须了解通常企业网站需要为用户提供什么，以及用户需要什么。确定了企业可以提供的资料后，就可以根据资料绘制企业网站的结构图，如下图2-1所示。图2-1 企业网站的结构图3）收集资源在确定网页结构以后，就应着手为网站建设收集资源。网站建设需要的资源包括文字资料、图像资料、声音资源和视频资源等。充分的资源可以使网站内容更加丰富，而且在设计时也更加得心应手。2实施网站方案完成整个网站的策划后，即可以根据前期策划的结果实施网站建设的方案。实施网站方案又包括前台设计和后台设计。1）前台设计前台设计包括所有面向用户的平面设计工作，例如网站的整体布局设计、风格设计、色彩搭配以及UI设计等。2）后台开发

7、后台开发包括规划后台程序所需要的功能范围等，如果网站需要使用数据库来存储数据，后台开发也包括设计数据库、数据表等。3发布及推广完成网站的设计与制作后，还需要将制作好的网站发布到Internet中。这就需要申请域名及服务器空间，并测试及发布网站。网站并非一次性建设后就不需要再投入精力了，发布的网站还需要进行后期维护与推广。1）申请域名和服务器空间域名是网站的地址，通过它可以浏览所发布的网站。制作好网站后，需要为网站申请一个好记忆的、与网站内容有关的域名，以帮助网站未来访问者记忆。之后，需要为网站申请服务器空间，将网站上传到Internet中，这样网站才可以被访问者访问。2）测试及发布网站很多初学

8、者建立网站时，由于工作疏忽（例如，网站的链接都使用的本地绝对链接），很容易制作出失效链接。网站上传前，需要对网站进行各种严密测试，包括前台页面的有效性、后台程序的稳定性、数据库的可靠性以及整个网站各链接的有效性等。网站上传至服务器后，需要网站的设计者测试网站的每一个链接，检查其是否有效，并检测网站的动态程序模块是否运转正常。3）网站的维护与推广经常维护、更新的网站才能吸引访问者不断地访问。因此，一些必要的工作如数据库的维护、网站内容的更新、网站版面的定期改版等，是一个想做得长久的网站必不可少的工作。刚上传发布的网站往往没有什么人气，因此还需要对网站进行推广，例如，经常和其他网站交换链接、发布I

9、nternet广告，以及购买搜索引擎的排名等。2.3 网站规划在创建站点之前，应合理的规划站点的主题、结构、内容、导航机制以及站点的整体风格、颜色搭配等。合理的规划，不仅有利于避免设计的盲目性，而且有利于日后文件的管理和维护。在前面我们初步了解了网站建设的一般流程，这里详细讲解网站制作之前的规划。1. 确定站点主题网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。对于题材的选择，应注意以下两点：1）主题要小而精。定位要小，内容要精。如果你想制作一个包罗万象的站点，把所有你认为精彩的东西都放在上面，往往

10、会事与愿违，给人的感觉是没有主题和特色，样样有却都很肤浅，因为你不可能有那么多的精力去维护它。2）题材最好是你自己擅长或者喜爱的内容。比如：你擅长编程，就可以建立一个编程爱好者网站；对足球感兴趣，可以报道最新的战况，球星动态等。这样在制作时，才不会觉得力不从心。2. 确定站点风格网站主页的风格是浏览者对整个网站的普遍的感觉，是主页的版式、色调及图文组合的高度抽象。而网站的创意则是在设计之前对内容的选择和表现形式运用的思考，力求发挥个性。在茫茫网海如果没有创意的网站会很快就被人遗忘的。由于网站建立的目的不同，所提供的服务及面向的群体也不相同。建设网站时要根据设计原则和针对访问者确定适宜的风格。例

11、如：政府部门网站的主页风格一般应比较庄重（如图2-2所示），而娱乐网站则可以活泼生动一些（如图2-3所示）；商务网站主页则可以贴近民俗，使大众喜闻乐见（如图2-4所示）；文化教育部门网站的主页风格应该高雅大方、格调清新，不宜太花哨（如图2-5所示）。图2-2 政府部门的主页图2-3 “闪客帝国”的主页图2-4 商业网站首页 图2-5 “清华大学”首页对于画面风格的选择：需要考虑是写实还是写意，是体现专业性还是大众化，是为儿童还是为成人。对形式的简繁的选择：是追求简洁还是花哨，不同性质的网站在这方面会有不同。如艺术网站，会不厌其烦地用各种手法来展示其创意。对于色调选择：是活泼还是庄重，是素净还是

12、艳丽。3. 确定网站的栏目和版块在确定了网站的主题后，就要草拟各种栏目如何使这些素材更好的发挥作用，从而吸引网友们来浏览网站呢？那要看你有没有将最好的，最吸引人的内容放在最突出的位置，有没有让好东西在版面分布上占绝对优势。如你要建一个以提供图片素材为主题的网站，并将它的主要栏目设置为：关于站长，本站导航，图片宝库，本站论坛，本站留言本，联系站长。要提供给大家的动画素材在主栏目中仅占了1/6，如此的栏目设置，即使这个站点确有大量精美的动画素材，也很难吸引浏览者继续挖掘。栏目的实质是一个网站的大纲索引，索引应该将网站的主体突出来。在制定栏目的时候，要仔细考虑，合理安排。一般的网站栏目安排要注意以下

13、几个方面。1）紧扣主题一般的做法是：将主题按一定的方法分类并将它们作为网站的主栏目。在图片素材为主题的网站中，可以将栏目分为风景图片、动物图片、花卉图片、人物图片并且最好在首页上标明最近更新的动画。要保证主题栏目个数在总栏目中占绝对优势，这样的网站显得专业，主题突出，才会更容易给人留下深刻的印象，如图2-6所示。图2-6 网站的主栏目2）设置一个最近更新或网站指南栏目应设置一些栏目来照顾老访客和初访者的需要。为了照顾常来的访客，应在首页安排版面放置最近更新内容的信息栏，如果没有就有必要设置一个“最近更新”的栏目。如果主页内容庞大、层次较多，且没有站内的搜索引擎，建议设置“本站指南”或“站点地图

14、”栏目（如图2-7所示），这样可以帮助初访者快速找到他们想要的内容。图2-7 站点地图3）设置一个可以双向交流的栏目可以进行双向交流的栏目如论坛（如图2-8所示）、留言簿（如图2-9所示）、邮件列表等，可以让浏览者留下他们的意见、建议等。据调查结果显示，提供双向交流的站点比简单的留一个“联系我们”链接的站点更具有亲和力。图2-8 网站论坛图2-9 留言簿4）设置一个下载或常见问题回答栏目网络的特点是资源共享。如果你看到一个站点有大量的优秀的有价值的资料，你肯定希望能一次性下载，而不是一页一页浏览存盘。将心比心，在主页上设置一个资料下载栏目，会得到大家的喜欢（如图2-10所示）。另外，如果你的站

15、点经常收到网友关于某方面问题的来信，你最好设立一个回答常见问题的栏目，既方便了网友，又节约了自己的时间。图2-10 下载专区至于其他的辅助内容，如关于本站，版权信息等可以不放在主栏目里，以免冲淡主题。综上所述，划分栏目需要注意： 尽可能删除与主题无关的栏目。 尽可能将网站最有价值的内容列在栏目上。 尽可能方便访问者的浏览和查询。版块比栏目的概念要大一些，每个版块都有自己的栏目。如网易这样的大型综合性网站，分新闻、体育、财经、娱乐、教育等很多版块，每个版块下面都有自己的主栏目。一般个人站点内容少，有主栏目就够了，不需要设置版块。如果你觉得确实有必要设置版块的，应该注意以下几点： 各版块要有相对独

16、立性。 各版块要有相互关联性。 版块的内容要围绕站点主题。4. 确定站点目录一个大型的网站要包含大量网页和很多图片、动画、声音素材，如果这些内容都放在一个文件夹里，不便于管理是显而易见的。应当在网站的根目录下创建多个子文件夹及多级子文件夹分别存放这些内容，这样整个网站好像一棵大树，层次清晰、便于管理（如图2-11所示）。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传和维护，内容的扩充和移植有着重要的影响。下面是建立目录结构的一些建议。1）不要将所有文件都存放在根目录下将所有文件都存放在根目录下会造成文件管理混乱。使人常搞不清哪些文件需要编辑和更新，哪些是无用的文件可以

17、删除，哪些是相关联的文件，从而影响工作效率。图2-11 站点目录2）按栏目内容建立子目录子目录的建立，首先按主菜单栏目建立。如，企业站点可以按公司简介、产品介绍、在线订单、反馈联系等建立相应目录。其他的次要栏目，如新闻、友情链接等需要经常更新的可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，例如：关于本站，关于站长，站点经历等可以合并放在一个统一目录下。所有程序一般都存放在特定目录下。例如：将CGI程序放在CGI-BIN目录中。3）在每个主目录下都建立独立的images目录刚开始学习主页制作时，有人习惯将所有图片都存放在站点根目录下的images目录里。可是后来发现这样做就带来了一

18、些不便，如当需要将某个主栏目打包供网友下载，或者将某个栏目删除时，图片的查找相当麻烦。可以为每个主栏目建立一个独立的images目录，而根目录下的images目录只用来存放首页和一些次要栏目的图片。4）目录的层次不要太深目录的层次不要太深，一般不要超过3层，这样便于维护和管理。5）其他应注意的事项不要使用中文目录。使用中文目录可能会造成网址无法正确显示。不要使用过长的目录。尽管服务器支持长文件名，但是太长的目录名不便于记忆。尽量使用意义明确的目录。如使用Flash、images、Javascript等名称来建立目录就要比使用1、2、3建立目录更便于记忆和理解。5. 确定站点的链接结构在网站的总

19、体规划列出后，就必须考虑各个网页之间的关系，是星型、树形、网型还是直线链接。链接混乱、层次不清的网页会给浏览造成困难，因此链接关系的好坏是判别一个网站优劣的重要标志。首页上的左边区域有一个导航栏，能够链接到各个分页面上。每个分页面的最上边是网站的标志，然后平铺了一个导航栏，这样可以从每一个分页面轻松地回到首页或其他分页面。此外，还有直线链接结构，这种链接的特点是子页面由父页面扩展而出，页面只能逐级展示，整个网站只能沿水平方向移动，这类链接结构适用于内容简单的站点。星型链接结构是在每一个页面上都设有与其他页面的超级链接，从任何一个页面都可以进入其他页面，而没有明显的级别区分，这种链接的优点是浏览十分方便，能使浏览者快速地进入想浏览的页面。但是这种结构在每一个页面上必须有大块的面积来建立超级链接，使页面的有效浏览面积大大减少，同时，页面的超级链接过多会使浏览者感到迷茫，找不到方向。网型链接结构是大多数网站所采用的一种结构，它把星型结构和树形结构进行有机的结合，从而弥补了两者的不足。每一个页面既要有固定出现的内容（图标、导航栏及版权等），也要有丰富的布局变化，链接的层次不多、深度不大，这样可以提高浏览速度，方便浏览者的信息查询。