三种网站设计技术的比较分析
摘要：在设计时，我们会将网页分为公共部分和私有部分。常见的网站设计技术有模板式、框架式以及CSS式。我们可以使用不同的设计技术来实现网站建设，它们在设计步骤、后期维护等方面各有不同。
关键词：网站设计；DIV CSS；模板；框架
0 引言
在网页设计历史中，最早普及的是Microsoft公司的Frontpage 软件，之后取代它成为主流设计软件的是Dreamweaver。Dreamweaver 可以实现多种不同的网页设计形式，从静态网站到动态网站，Dreamweaver都可以实现非常好的设计效果。在2006年前，一般比较流行的网站设计是框架或者模板技术，之后由于新的网页标准的出现，DIV+CSS设计技术逐渐成为了主流。无论使用哪种网站设计技术，都可以使用Dreamweaver来完成。
1 网站设计
首先我们要从工业设计的角度来谈谈网站设计。网站设计要兼顾实用性和美观性，以实用性为第一要素，以满足用户需要为最高目标。网站首先要设计出整体框架，确定网站整体主要包括哪几部分内容，并明确用户需求，将所有网站内容经分析转换为各个网站栏目。在这个阶段要确定网站的基本结构，网
页的基本样式以及网站的logo 和调等主要标识。这些要通过对目标客户需求的调查研究来判断决
定。
2 页面布局
设计师常常将页面分为公共部分和私有部分，这种设计理念有利于解决以下3个问题：①用户在每个页面看到相同的导航栏等网站主要信息，可尽快掌握该网站的结构，到自己需要的信息；②便于
实现整体设计；③便于实现后期维护。
常见的公共部分包括导航栏、banner、logo、登录框和搜索框。私有部分是指每个子页面与其他子页面不同的部分。从设计者维护者角度，可以根据需要只修改部分页面代码或者部分内容即可实现整个网站的全部更新。比如网站的banner常常需要修改，我们就需要在设计之初考虑到如何布置才能避免重复劳动，可以让我们经由一些简单的操作就一次实现全站所有页面的更新。所以虽然各个子页要有效传递不同信息，但网站内各个页面之间应保持部分一致。这个保持一
静态网页模板免费下载的网站
致的部分就是公共部分。
3 不同设计技术的比较
从一个小型网站设计的角度，我们主要考虑的就是如何实现页面公共部分的设计问题。以一个普通的上下分栏的页面为例，一般把公共部分放置在页面上端，每个子页面的私有部分放在页面下部。以下为3种网站设计技术在Dreamweaver中的设计步骤。
框架式网站需首先创建一个框架文件，此时整个页面看似分为上下两个部分，其实是由两个页面文件拼成的。需要整体修改一个网站的所有页面的公共部分时，只要修改上面那个页面即可。框架网站
的最大不足是不容易控制页面结构，最主要的是不容易控制复杂页面
在不同分辨率下的布局。
模板式网站需首先创建一个模板文件，一般把公共部分设置为不可编辑部分，将子页面需要更新的私有信息模块设为可编辑部分，然后以该模板为基础创建各个页面。这样在创建各个页面的时候，就会拥有统一的公共部分。当有修改的需要时在模板中只要修改该公共
部分，保存后各个由该模板创建的子页面会全部自动更新。
如果是DIV+CSS网站，其特点是表现形式和内容的分离，也就是页面内容与页面形式代码分别存储在两个文件中，所有页面的形式代码为公共部分，在创建网站的时候首先创建公用的CSS代码文件以及基本框架页面html文件，然后根据需要在页面框架文件中补充更新进去具体页面内容，最好分别保存为各个子页面。在需要更新页面布局的时候只要单独修改CSS文件即可。
4 结束语
从设计者角度来讲，使用模板方式来设计网站是最常见也最简便的方式，如果能善用Dreamweaver“所见即所得”的功能，可以在最短时间内设计出更多美观实用的页面，也兼顾了后期维护的需要。但是使用模板加表格的网页设计模式很容易出现冗余代码。相比之下DIV+CSS设计模式能够简化代码，提高网页打开速度，带来很好的
浏览体验。
参考文献：
［1］杨阳．DIV+CSS网站布局实录［M］．北京：科学出版社，
2009．
［2］郑俊生，姜敏.使用DIV+CSS进行网页设计应用研究［J］.电脑开发与应用,2008(9).
［3］夏曼.用DIV＿CSS 布局技术实现网页设计［J］.软件导刊,2010(11).

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。