1.16 网站内容制作的详细步骤

1．网站主题策划

设计一个站点，首先遇到的问题就是网站主题的策划。

所谓主题也就是网站的题材。网络上的网站题材多种多样，常见题材有以下11类。

第1类：网上求职。

第2类：网上聊天/即时通信/ICQ。

第3类：网上社区/讨论/邮件列表。

第4类：计算机技术。

第5类：网页/网站开发。

第6类：娱乐网站。

第7类：旅行。

第8类：参考/资讯。

第9类：家庭/教育。

第10类：生活/时尚。

第11类：网上交易类。

每个大类都可以继续细分，如娱乐类再分为体育/电影/音乐等类，还有许多专业的、另类的、独特的题材可以选择，如中医、天气预报等。同时，各个题材相联系和交叉结合可以产生新的题材，如旅游论坛（旅游+讨论）、经典入球播放（足球+影视），按照这种划分方法，题材可以有成千上万个。

选择题材时要注意以下事项。

（1）主题要小而精，即定位要小，内容要精。网络的最大特点就是新和快，目前最热门的个人首页都是天天更新甚至几小时更新一次的。最新的调查结果也显示，网络上的“主题站”比“万全站”更受人们喜爱，这就好比专卖店和百货商店一样。

（2）题材最好是自己擅长或者喜爱的。

（3）题材不要太泛滥或者目标太高。

如果网站题材已经确定，则可以给网站命名了。网站名称也是网站设计的一部分，而且是很关键的一个要素。例如，“电脑学习室”和“电脑之家”相比，显然后者更简练。

网站名称是否正气、响亮、易记，对网站的形象和宣传推广也有很大影响。

确定网站名称要注意以下事项。

（1）名称要正。网站名称要合法、合理、合情。

（2）名称要易记。根据中文网站浏览者的特点，除非特定的需要，网站名称最好用中文名称，不要使用英文或者中、英文混合型名称。例如，“beyond studio”和“超越工作室”相比，后者更亲切好记。另外，网站名称的字数应该控制在6个字以内（最好为4个字），如“重庆婚介网”、“中国西部汽车王”。

（3）名称要有特色。名称要能够体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，如“音乐前卫”、“网页陶吧”、“天籁绝音”等。

总之，策划网站题材和名称是设计一个网站的第一步，也是很重要的一部分。

2．网站风格和网站创意

网站的整体风格及其创意设计是网站设计者难以掌握的技术，难在没有一个固定的模式可以参照和模仿。给出一个主题，任何两个人不经商量都不可能设计出完全一样的网站。当人们说“这个站点很酷，很有个性！”时，是什么让人们觉得很酷呢？它到底和一般的网站有什么区别呢？这实际上就是网站的风格问题。

风格是抽象的，是指站点的整体形象给浏览者的综合感受。

网站“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等诸多因素。例如，人们觉得网易是平易近人的、迪士尼是生动活泼的、IBM是专业严肃的，这些都是网站给人们留下的不同感受。

风格是独特的，是自己站点与其他网站不同的地方，或者是色彩，或者是技术，或者是交互方式，能让浏览者明确分辨出这是某个网站独有的。

风格是有人性的。通过网站的外表、内容、文字、交流可以概括出一个站点的个性与情绪，可以用人的性格来比喻站点。

有风格的网站与普通网站的区别在于：普通网站看到的只是堆砌在一起的信息，只能用理性的感受来描述，如信息量的大小、浏览速度的快慢。但浏览过有风格的网站后能有更深一层的感性认识，如站点有品位、和蔼可亲。

其实，风格就是与众不同！

创意是网站生存的关键。

注意

这里说的创意是指站点的整体创意（因为创意而产生这个站点，或者相同内容的创意不同）。

创意到底是什么，如何产生创意呢？

创意是引人入胜，精彩万分，出其不意；

创意是捕捉出来的点子，是创作出来的奇招……

这些都说出了创意的一些特点，实质上，创意是传达信息的一种特别方式。创意并不是天才者的灵感，而是思考的结果。

创意的过程分为以下5个阶段。

（1）准备期：研究所搜集的资料，根据经验，启发新创意。

（2）孵化期：将资料消化，使意识自由发展，任意结合。

（3）启示期：意识发展并结合，产生创意。

（4）验证期：将产生的创意讨论、修正。

（5）形成期：设计制作网页，将创意具体化。

创意是将现有的要素重新组合，如网络与电话结合而产生IP电话。资料越丰富，越容易产生创意，就好比万花筒，筒内的玻璃片越多，所呈现的图案就越多。读者可以发现，网络上最多的创意来自与现实生活的结合（或者虚拟现实），如在线书店、电子社区、在线拍卖等。

3．网站内容规划

在确定了网站主题和网站风格后，还需要考虑规划网站的内容。

目前，全世界的网站在不断增加，搜索引擎对于那些在互联网上寻找信息的人们已经变得越来越重要了。如何使自己的网站脱颖而出，并取得成效，关键是提升网站的知名度和浏览率，而对网站内容进行详细规划则是提高网站浏览量的重要途径。

企业网站如同企业在网上的产品橱窗，一是要让网站很容易被找到，二是要让感兴趣的客户找到有用的资料和得到想要的服务。

从最新的网络统计分析报告中得知，80%的网站访问量来自于搜索引擎，而网站在搜索引擎中的排位与网站的内容有很大的关系。

（1）网站内容的组织原则。

网站内容的组织并不是现成的企业简介和产品目录的翻版。很多企业的网站并没有很好地组织网站的内容，这是造成网站访问量小的一个重要原因。

建站之初，网站建设者必须通过搜索引擎找出同类网站排名前20位的名单，逐个访问名单上的所有网站，然后做一个简单的表格，列出认为是竞争对手的企业名称、所在地、产品搜索、产品价格、网站特点等，从中找出自己产品优于或不同于其他竞争对手产品之外或特色；同时，也应该清楚地认识到自己产品的不足之处，思考如何改进能使产品更具有竞争力，并制定出改进的方案。这实际上也是一个企业找出如何与网络相结合的经营策略，以适应日益竞争的国际化市场。

在充分了解了网上竞争对手的情况并研究了其产品和网页的基础后，可以集众家之所长，参照以下组织原则，制定出更能体现产品特点的网页内容。

网站内容的组织原则如下。

①清晰性：网站内容必须简洁明了，直奔主题，非常有效地讲清楚所要宣传的内容。

②创造性：网站观点会使访问者产生认同、共鸣吗？这是访问者判断一个公司是否有实力，从而影响到购买动机的重要因素。

③突出3个重点：突出产品的优点和与众不同的特色；突出帮助访问者辨别与判断同类产品优劣方面的内容；突出内容的正确性。

（2）网站内容的组织方法—栏目设置。

网站内容的组织或取舍的方法是将网站想象成企业的产品陈列室，将自己当成推销员，向客户推销产品。

网站栏目的设置一定要突出重点、方便用户。

网站栏目实质上是一个网站内容的大纲索引，就好比一本书的目录，集中了各个章节的名称及页码，索引应该引导浏览者寻找网站内最主要、最有用的东西。

在设置栏目时，要仔细考虑内容的轻重缓急，合理安排，突出重点。

4．网站设计的技术路线

网站设计采用什么技术路线是网站策划的一部分。在动手制作网页之前，应该先明确网站的定位，从而选择适当的技术路线。互联网上的网站，按照功能和性质大致可以分为个人网站、商业网站、学术机构和政府团体网站。

（1）个人网站。

如果只打算做个人首页，介绍自己、结交网友或者展示自己的爱好，没有交互的要求，则只需要简单的静态网页制作技术，如HTML，使用网页制作工具FrontPage与Dreamweaver也可以方便地完成。

如果还需要文字滚动、显示时间和欢迎词等动态效果来吸引访客，则需要在页面中加入JavaScript代码来实现上述功能。在一些介绍Java的网站上有不少写好的JavaScript代码段，用它们可以实现丰富的动态效果，可以直接下载之后插入到HTML代码中。如果需要水中倒影、五彩礼花或者万年历的功能，还可以在HTML源码中加入JavaApplet小程序或者ActiveX控件来完成，也可以使用Dreamweaver来完成。

一般的免费个人首页空间出于安全考虑，不支持ASP、JSP、PHP等动态网页技术，也不提供数据库功能，但也有些免费空间提供这类服务，而相当多的拥有PC和IP地址的校园网用户则愿意自己架设服务器软件平台，使用ASP、JSP、PHP技术开发功能强大的个人网站，提供留言板、讨论区、校友录、网上购物等功能。从使用的操作系统、编程语言、Web服务器软件和数据库组合来看，主要有如下3种技术路线。

①Microsoft Windows XP/2003/Windows 7/Windows 8+ASP-IIS+MS SQL Server/Access。

②Windows/Linux+JSP+Tomcat/Resin/JSWDK+MS SQL Server/Access/MySQL。

③Linux+PHP+Apache+MySQL。

（2）商业网站。

商业网站和个人网站使用的技术比较相似，所不同的是，商业网站能够更多地使用动态网页技术和数据库技术，使用较高配置的专业服务器硬件和软件平台，如IBM的eServer+Websphere+Lotus+DB2。开发过程中需要仔细考虑用户的访问需求。另外，网络安全防护和电子商务认证也是必须考虑的。

商业网站中制作页面的人员分工细致，各负其责。网页设计师负责设计精美的页面，程序员负责编写和测试后台程序。大型的商务网站发布以后还需要投入更多的人力和资金来维护网页、更新系统。

（3）学术机构和政府团体网站。

学术机构和政府团体的网站从风格上来说，不需要像个人网站那样千变万化，也不需要像商业网站那样奢华绚丽，应该更多地体现出严谨、科学和庄重的气氛。它在技术上采用和个人网站相类似的路线。

这类网站的首页通常简洁明了、分类醒目，并提供丰富的学术资源和准确的信息。浏览著名大学、研究机构、政府团体网站的访客都有比较明确的目的，如了解机构设置、教学情况、科研动态、录取信息、行业规章、政策法规等，并且希望得到最新的实用信息，所以，这类网站最好由专人维护，并在网站上提供信息发布的区域。

5．网站栏目规划及布局目录设计

（1）栏目与板块的划分。

网站建设者在对网站主题、内容、风格进行策划后，后续工作则需要对网站栏目进行规划，从而吸引网友浏览网站。

划分栏目和板块的实质是给网站编制大纲索引，将网站的主题明确地显示出来。在制定栏目的时候，要仔细考虑，合理安排。

规划网站栏目时要注意以下几方面内容。

①紧扣主题。一般的做法是将主题按一定的方法分类，并将它们作为网站的主栏目，如以一个动画网站为例，可以将栏目分为动物动画、标志动画、三维动画、卡通动画等，并在首页上标明最近更新的动画。一定要记住，主题栏目的个数在总栏目中要占绝对优势，这样的网站才显得专业、主题突出，且容易给人留下深刻的印象。

②设定更新或网站指南栏目。如果在首页上没有安排版面放置最近的更新信息，就有必要设立一个“最近更新”栏目。这样做是为了照顾常来的访客，让首页更具有人性化。

如果首页内容、层次较多，又没有站内的搜索引擎，则建议设置“本站”指南栏目，可以在其中绘制一个站点的结构图，用来帮助初访者快速找到想要的内容。

③设定可以双向交流的栏目。双向交流的栏目不需要很多，但一定要有，这样可以让浏览者留下信息，如设定一个论坛、留言本、聊天室或者E-mail。

④设定下载或常见问题回答栏目。如果在首页上设置一个资料下载栏目，一定会得到大家的喜欢。设置下载栏目也需要和网站的整体风格和主题相协调，并需要网站空间比较大，才能存放较多的资源供网友下载。

另外，如果站点经常收到网友关于某方面问题的来信，则最好设立一个常见问题回答（FAQ）栏目，这样既方便网友，也可以节约自己的时间。

⑤至于其他的辅助内容，如“关于本站”、“版权信息”等可以不放在主栏目里，以免冲淡主题。

下面通过案例来分析如何划分网站的栏目，图1-15所示为“重庆婚介网”的首页栏目设置。

简单分析如下。

网站Logo图标及CI宣传栏目：设计了Logo图标和Flash动画，作为此网站的宣传动画。

导航栏目：设计了本站首页、我的婚恋、相亲1+1、交友活动、在线聊天、情感博客、缘分交友、爱情故事。

主内容区的栏目规划：主内容区采用“左右”结构。

主内容左侧栏目主要是推荐会员的设计和一个动画界面。

主内容区右侧栏目规划如下。

网站公告：发布提醒会员、网友的注意事项和网站的最新动态。

网站注册和网站登录区域：会员注册和登录的入口。

（2）网站的目录结构策划。

网站的目录是指在建立网站时所创建的目录。网站的目录设计与网站的栏目板块设计密切相联，网站的目录结构要根据网站的主题和内容来进行分类规划，不同的栏目对应不同的目录。

规划网站目录可以参照如下要点。

①尽量不要在网站本地根目录下存放文件。有的网页设计者喜好将网页所有文件存放在根目录下，这样容易造成文件管理混乱，常常不知道哪些文件需要编辑，若要编辑一个文件就需要浏览查找，比较麻烦，也不知道哪些文件需要删除，并影响服务器的工作效率。网站设计好后，需要上传文件到服务器主机，如果全部文件都存放在本地根目录下，将会耗费大量的上传时间。

②目录层次不要太深。一般来说，网站的目录层次不要超过3层。

③根据栏目内容建立子目录。子目录的建立应该按照主菜单的栏目建立，如企业站点可以按公司简介、产品介绍、价格、在线订单、反馈联系等建立相应目录；而其他的次要栏目，如友情链接等内容较多或需要经常更新的栏目可以建立独立的子目录；一些相关性强、不需要经常更新的栏目，如关于本站、关于站长、站点经历等可以合并放在一个统一的目录下。所有数据库都要建立单独的文件夹，CSS用于存放样式文件、Media用于存放多媒体文件。

④建立目录时一般不要使用中文来建立文件夹和文件。建立目录可以使用英文或者汉语拼音来建立文件夹或文件，使用中文目录可能会使浏览器无法识别文件而无法显示。

（3）网站页面的布局规划。

设计网页不仅仅是把相关的内容放到网页中，还要求设计者能够把这些内容合理组织、安排，以给浏览者赏心悦目的感觉。只有这样才能达到内容与形式的完美结合，增强网站的吸引力。因此，网页设计不但是一项技术性工作，还是一项艺术性工作。它要求设计者具有较高的艺术修养和审美情趣，否则不能够设计出高水平的网页。如今，大部分公司在招聘网页设计师时对网页设计师的要求是熟练使用网页设计软件，并有美工创意基础。

网页的排版布局是决定网站美感的重要方面。通过合理的、有创意的布局，可以把文字、图像等内容完美地展现在浏览者面前，而布局的好坏在很大程度上取决于设计者的艺术修养水平和创新能力。

一般来说，网页布局遵循一定的原则，再加上自己的奇特创意，设计一个吸引浏览者的网页布局是可以成功的。

6．导航设计

导航是网页设计中的重要部分，也是整个网站设计中的一个独立部分。一般来说，网站导航在案例网站中各个页面出现的位置是固定的，风格较为统一。导航的位置对于网站的结构以及各个页面的布局起着举足轻重的作用。

导航的位置一般有4种，分别在页面的左侧、右侧、顶部、底部。有的可在一个页面中使用多种导航，如有的在顶部设置主导航菜单、在页面的左侧设置折叠菜单，以增强网站的可访问性。

当然，导航在页面中的出现并不是越多越好的，要合理运用网页，达到协调和一致。如果页面较长，可在页面底部也设置一个导航，这样，浏览者浏览到页面底部时不用拖动滚动条即可选择页面顶部的导航条。

子页面的导航设计是较为重要的。子页面一定要有上一级目录的链接，一直链接到首页，这样浏览者访问起来才比较方便，不用单击“后退”按钮回到首页或上一级页面。对于子页面，如果页面比较长，则可在页面上部设置一个简单的目录，并设置几个页面的跳转链接，这样方便浏览。常见的导航设计如图1-16所示。

7．链接设计

网站的链接设计是指网站页面之间相互链接的拓扑结构，建立在目录结构的基础上。网站的链接结构有两种：树状结构和星状结构。这两种基本结构都只是理想方式，在实际的网站设计中，这两种结构是混合使用的。比较好的方案是，首页和一级页面之间用星状链接结构，一级页面和以下各级页面之间用树状结构。

树状链接结构如图1-17所示，星状链接结构如图1-18所示。

8．网站资料搜集

网站制作在目录、导航、链接策划后，需要搜索准备网站资料，为动手进行网站设计做准备。

个人网站的大多数内容除了自己的独创之外，还需要依赖于资料搜集。搜集不完整，可能设计中途就会停下来。同时，在搜集资料时主要是搜集其他经典网站的页面布局技巧、导航设计技巧、链接设计技巧、网站色彩处理技巧及网站具体内容。

商业网站虽然不像个人网站那样从网上搜集内容，但是可以吸取其他同类网站的设计风格、布局风格、导航技巧、色彩处理及同类产品的宣传技巧等，有比较才有鉴别。在搜集时不能照搬其他网站的风格，应该有自己的独创。

9．网页设计

在网站规划工作完成后，即可开始网页设计。网页设计首先需要进行首页设计。首页是网站的“灵魂”，一定要在首页设计上多下功夫，再设计一级页面、二级页面，将一级页面、二级页面做成模板或者库进行保存，并能在设计其他一级、二级页面时从模板新建网页或者插入库项目，这样维护起来较为方便，设计网页的速度也较快。

设计网页时要注意版面的规划。版面规划主要指如何突出主题内容、如何提高网页下载及打开的速度。

10．网上安家

网站在本地计算机上建成以后，需要为网站找一个“家”，即空间。

关于空间的概念及申请空间的方法可参见本书第7章相关内容。

11．域名申请

在申请网站空间后，要考虑的问题是选择域名。域名被视为企业的网上商标，其重要性不言而喻。

12．网站发布

网站在空间申请及域名申请好以后，即可进行站点发布，将网站上传到服务器上。发布站点的方法很多，可以采用Dreamweaver 8/CS3　/CS4/CS5/CS6自带的发布站点功能或者采用专门的FTP发布工具进行网站发布。以上两种发布网站的方法将在网站项目工程建设过程中进行详细讲解。

13．网站宣传维护管理

网站上传到服务器后，如果在本地测试正确，远程服务器正常，则可以正常浏览网页。

网站做好上传了，不等于网站设计工作已经完成了，还需要进行宣传、更新、维护及管理。