浅谈网站建设和网页制作的方法

浅谈网站建设和网页制作的方法[摘要]Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得网站的建设及网页制作得到发展的空间，大至大型企业的产品推销、售后服务、解决方案，小至个人Web页面开发，形形色色，五彩缤纷，网站建设和网页制作也成为计算机网络领域最热门的话题。本文介绍了网站建设前的准备，网页制作的一些方法与技巧，以及在建设和制作中值得注意的一些问题。[关键词]网站；网页；网站建设；网页制作随着计算机网络的广泛应用，尤其是互联网的普及与发展，上网已成为人们新的生活方式。上网可以了解发生的新闻事件，查询各种所需资料信息，利用网络购物，办公，还可以进行商务贸易和休闲聊天。对互联网的需求自然拉动了供应，各种网站便成几何倍数的增长起来。在网络空间里，网站是发布和获得知识与信息的载体，是个人、企业和政府机关在网络空间的形象和存在。网站由许多相关网页构成，因此著作也就成为这个时代的热门技术。本文介绍了网站建设前的准备，网页制作的一些方法与技巧，以及在建设和制作中值得注意的一些问题进行了介绍。1网站建设前的准备1.1网站的定位和规划要建设一个网站，首先需要定位，既要清楚建设网站的目的和面向浏览的对象，只有定位准确的网站才会有可观性和应用性。在目标明确的基础上，完成网站的构思创意即规划。网站的设计者必须清楚地了解本网站的浏览者的基本情况；对网站的整体风格和特色做出定位，规划网站的组织结构，主题鲜明突出，要点明确，以简明的语言和画面休现站点的主题；最后，在此基础上收集、制作网站所需的素材，在进行页面制作时，要调动一切手段充公表现网站的个性和情趣，展示出网站的特色。1.2网站整体风格的统一网站在设计时要考虑到网站整体风格的统一。从页面的排版和布局下手，各个页面使用相同的页边距，文本、图形之间保持相同的间距；主要的图形、标题或符号旁边留下相同的空白；如果在第一页的顶部放置了站点标志，那么在其他各页面都放上这一标志；如果使用图标导航，则各个页面应当使用相同的图标。如图1和图2：图1图2要实现这样的效果通常有两种方法，一种是使用模板，模板是Dreamweaver中一种特殊类型的文挡。设计者在模板中将各页面中相同的部位定义为锁定区域，而将不同的部位定义为可编辑区域。此后在制作每个页面时，都选择由模板新建，然后在编辑区域输入不同的文字内容，从而简化了设计主页的工序。此外，模板最强大的用途之一在于一次更新多个页面。由模板创的文挡与该模板保持连接状态，修改模板就可以更新所有基于该模板的文挡中的设计，大大降低了页面维护的时间。另一种方法是使用框架，框架（FRAME）也叫帧页，是现在制作页面时较为常用的一种技术。该技术可以把浏览器窗口划分为几个小窗口，每一个窗口都显示一个页面的内容，并分别设置大小、有无滚动条等信息。这样就方便了设计网站的结构，可以在上方的框架里放置网站的标志，在左面的框架里显示导航拦，而在下方的框架里安置版权信息。当然这只是一个比较公式化的设计，每个人可以根据自己的实际需要和创意来做安排。而且浏览时，可以指定连接的页面在哪个框架里显示，从而避免了网页上相同内容的重复下载，这对于提高网页显示速度和网络传输效率方面都有着积极的意义。1.3网站页面的版式及色彩网站页面要简洁大方，在页面中不要过多的加入与本页内容无关的信息，保证主题内容让浏览者一目了然。如果希望人们在看完你的页面后能留下印象，最好用一个简单的关键词语或图像吸引他们的注意力。如图3：图3设计网站前要先确定网站的主题色。一个网站必需有一种或两种主题色，不至于让浏览者迷失方向，也不至于单调、乏味。例如：儿童类网站一般都使用橙色、红色用以体现儿童的活泼和、温翰气氛等效果。主题色确定好以后，使用其他配色时一定要注意它与主题色的关系，要表现什么样的效果。例如：教育类网站使用蓝色为主题色，再用红色和黑色作为配色，就能表达出严肃、稳重的效果。同时，在使用色彩时要考虑它会带给人心理上的感觉。比如，冷色使人平静，而暖色使人激动；强的色彩对比造成紧张感；暗的颜色给人以沉重感和压迫感；亮的颜色给人轻松、开放的感觉。我们可以根据所要表达的主题，选择合适的色彩与主题色进行搭配。2网页制作方法与技巧在网页制作中，为了提高页面效果，需要使用一些技巧和方法。2.1应用表格的定位功能运用表格可以自由地控制文本和图像在网页上出现的具体位置，而不用担心不同对象之间的影响，从而使整个网页看上去紧凑统一。要充分利用表格的定位功能，准确地将每一段文字、每一副图片按照一定的次序进行合理的编排和布局。对于表格的框度，应采用绝对定位，不用百分比，以便浏览者在不同的显示分辨率下都能看到同样的效果。考虑到目前上网浏览者使用电脑屏幕的分辨率多为800×600，因此，每个页面在设计时也要设定在此分辨率下，如有特殊，还要给浏览者做出提示。表格内容的下载比较耗时，往往要在整张表格中全部内容下载完成后，才能显示该表格内容。因此，表格中尽量不要嵌套过多的表格，以免影响页面的下载速度。浏览器解释HTML页面的顺序是自上而下依次逐行解释和显示，但当碰到表格中所有的元素后才将结果在页面中显示出来，在页面内容教多而访问者浏览的速度又很慢的情况下，浏览器的这种解释次序将明显表露出来，只有等到浏览器解释到了页面的最后，才会将整个页面的内容在访问者眼前显示出来，而在浏览器解释过程中，访问者什么也看不到，这将会使访问这产生不耐烦的心情。一些优秀网站的设计，通常也都采用表格来定位，而且大多都是一行一行来设计的，当然每个单行排列的表格里也存有表格嵌套，但各个页面的内容最好不要放于一张的表格里面。因此在使用表格进行网页元素布局时，应尽量避免使用整个表格。2.2修改HTML代码来实现页面的动态效果现在有了那些“所见即所得”的网页制作工具，假如只想制作出功能简单的网页，使用这些网页制作工具即可。但是，要想制作出功能完善、风格独特的网页，只靠那些工具是远远不够的，还是要学习一些HTML语言。如在网页制作中使用“跑马灯”，可以使网页增色不少，因为其中的文字有一种动感的效果，这种效果完全可以用修改HTML代码来实现。先来谈一下如何制作最简单的跑马灯效果。一般情况下，在层或表格中输入若干个文字，先对其中的文字设置颜色、字体及大小等，然后选中该文字切换到代码窗口，你会看到代码窗口的文字还是呈现选中状态，在第一个文字前输入marquee，你会发现自动生成/marquee，只要将/marquee移到最后一个文字后面，在预览时，就可以看到文字从右往左移动，就像跑马灯一样。文字的默认运动方向就是从右往左移动，相当于用了语句direction=“left”，如果想让“文字”从左往右移动，只要把“left”改成“right”就可以了。同样的道理，要使文字上下移动，只要再把“right”改为“up”，或“down”就可以了。改成上下运动的跑马灯你会发现速度很快，读者根本无法阅读滚动的文字，修改时只需加入scrollamount=“1”参数，值得一提的是scrollamount的值越大，其上下移动的速度就越快。Scrollamount=“6”就是默认的速度很快的效果。此外，还可以用width、height参数来设置跑马灯区域的范围。下面这段HTML代码是与一个从下而上的跑马灯效果相对应的：marqueewidth=”400”height=”100”direction=”up”scrollamount=”1”欢迎光临本网站/marquee,如果你把文字内容换成新闻，就可以做成动感公告供读者阅读。2.3适当运用网页特效网页特效是指在网页中调用一种特殊的小程序如JavaScript和VBScript程序等使网页页面有一种特殊的效果，如动态日期与时钟，鼠标跟随、状态栏中活动的信息、在页面中有不断飘落的花朵等。这些特殊效果在Dreamweaver中用HTML语言是无法实现的。JavaScript和VBScript对于非专业人员来说学起来比较困难，自己编一段这样小程序也很麻烦，为此我们可以引用他人提供JavaScript源程序。例如中国较大的计算机教程网--------豆豆技术网中提供了一些源代码程序，可以直接拷贝引用。例：制作一个页面转换特效：（1）登录进入豆豆技术网（2）进入该技术网中的网页特效（3）点页面背景按扭，找到“页面转换特效”的文章并打开（4）选中如下代码进行复制：metaHTTP-EQUIV=”Page-Enter”CONTENT=”revealtrans(duration=6.0,transition=23)”metaHTTP-EQUIV=”Page-Exit”CONTENT=”revealtrans(duration=6.0,transition=23)”（5）进入Dreamweaver，打开自己的网页。进入代码编辑窗口，在head和/head中粘贴上述代码。3几个值得注意的问题3.1预览时看不到图片有时图片在编辑状态下是好的，而在预览时或在网页发布后无法显示，究其原因，一个方面可能是路径问题，另一方面可能就是因为图片用的是中文文件名而招来的麻烦。如果是路径的问题，可能是图片不在站点内，这就需要把图片存人相应的文件夹中，然后改变图片的路径就可以了。如果图片是在站点内，在预览时仍看不见图片，则往往是使用了中文的文件名、目录名或文件名。解决的方法是把中文名字改为英文字母、数字和下划线等符号组合成文件名或目录。3.2不要忽略页面属性的设置设置左边界、顶部边界、边界宽度和边界高度。细心的用户会发现在没有进行设置前浏览时页面会在上下、左右，各留一片空白，这块区域用户不能利用，白白浪费了，为了节省网页中的宝贵空间，建议把这四个选项都设置为0。3.3适当变化网页中的字体网页中的字体字号、字距、行距和文字颜色可作些适当变化，以求最美的视觉效果。需要突出的地方可以用不同的字体、字号和不同的颜色表示。字体最好采用系统自带的字体，因为字体的显示效果是由浏览者的浏览器来决定的。许多漂亮的文字，浏览器可能并不支持，可以把文字做成图片的方式来处理，不过这种方法不适合在大段的文字上采用。恰当的运用css样式表会使文字处理达到事半功倍的效果。但每一页中的字体要限制在4种以内，过多的字体反而显得杂乱无序。4结束语设计一个好的网站，除了要有一定的网站基础知识外，还必须掌握很多的网页编程技术、技巧和一定的美工知识，当然也要求对编程工具和数据库知识有更深的了解和更加灵活的应用。随着科学技术的进步与发展，也将会出现更多、更好的网站设计工具，使网站的建设更容易、更先进！参考文献[1]李建梅.《新概念中文DreamweaverMX教程》.北京科海电子出版社,2003.[2]刘洋.《DreamweaverMX短期培训教程》.北京希望电子出版社,2002.[3]黄俊.《DreamweaverMX中文版精彩设计百例》.中国水利水电出版社,2003.致谢感谢指导老师XXX及学院有关领导对我本次毕业设计的关心与指导，通过本次毕业设计使我懂得了如何去思考并做好每一件事！