网页设计简述

网页设计简述

庞新法

庞新法陕西省委党校文化与科技教研部陕西西安710061

摘要：随着计算机互联网络的迅速发展，网页设计受到了越来越多的关注，在专业人才培养方面处于核心地位，且是一门综合性很强的课程，不仅需要掌握网页开发软件的应用，还要有动画设计、平面设计等软件的综合使用。本文就网页设计教学中如何运用通俗易懂的方法讲解进行了分析。

关键词：网页设计制作学生能力培养教学方法

一、网站与网页的概念

网站（Website）是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。这些网页按照一定的逻辑关系组织在一起。每个网页都包含一定的组成元素，网页的设计与制作就是对这样元素的规划和构建。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。网站是一个整体，它是由网页及为用户提供的服务构成的，网站为浏览者提供的内容是通过网页展示出来的，使浏览者了解该网站为用户提供的服务及展示的信息，浏览者访问网站实际上就是浏览网页。网页经由网址（URL）来识别和存取，当在浏览器中输入网址后，浏览器可以从WWW上下载指定的网页，传送到本地计算机，然后再通过浏览器解释网页的内容，再展现到窗口内。

一个网站由若干个网页构成，其中首页（Homepage）也可以称之为主页，或者称为一级网页，它是一个单独的网页，和一般网页一样，可以存放各种信息，同时又是一个特殊的网页，作为整个网站的起始点和汇总点，是浏览者访问网站的第一个网页。顺次二级、三级等，各个网页通过“超链接技术”装订在一起，就像一本书一样。

构成网页的基本元素主要包括文本、图片、水平线、表格、表单、超链接及各种动态元素。

文本：文本是网页中最主要的信息载体，浏览者主要通过文字了解各种信息。

图片：图片可以使网页看上去更加美观。如果是新闻类或说明类网页，插入图片后可以让浏览者更加快捷地了解网页所要表达的内容。

水平线：在网页中主要起到分隔区域的功能，以使网页的结构更加美观合理。

表格：表格是网页设计过程中使用最多的基本元素。首先表格可以显示分类数据，其次使用表格进行网页排版可以达到更好的定位效果。

表单：访问者有时要查找一些信息或申请一些服务时需要向网页提交一些信息，这些信息就是通过表单的方式输入到Web服务器，并根据所设置的表单处理程序进行加工处理的。表单中包括输入文本、单选按钮、复选框和下拉菜单等。

超链接：超链接是实现网页按照一定逻辑关系进行跳转的元素。一般情况下在浏览网页时将鼠标指针指向具有超链接的文本或图片的时候，鼠标指针就会变成小手的形状。

动态元素：现在的网页中的动态元素可以说是丰富多彩，包括GIF动画、Flash动画、滚动字幕、悬停按钮、广告横幅、网站计数器等。这些动态元素使网页不再是一个静止的画面，可以说动态元素赋予了网页生命力，使网页活了起来。

二、HTML的概念

HTML是英文HypertextMarkedLanguage的缩写，中文意思是超文本标记语言，是一种用来制作超文本文档的简单标记语言。所谓超文本，是指用HTML创建的文档超过了文字，除了文字，还有图片、声音、动画、影视等元素，并且可以实现从一个文件跳转到另一个文件，与世界各地主机的文件连接。

HTML是一种标记语言，把不同的元素装在不同的盒子加以区分，其基本语法结构为：

<标签属性1=“属性值1”属性2=“属性值2”…>元素的内容</标签>

<标签属性1=“属性值1”属性2=“属性值2”…>：表示一个盒子开始，</标签>表示一个盒子结束，元素的内容：表示一个盒子所装内容。属性1=“属性值1”属性2=“属性值2”……表示一个盒子的属性，如盒子长是多少，宽是多少，高是多少等。

一个网页（.html程序）由若干个盒子构成，盒子之间可以并列，可以嵌套，但不可交叉。表现在用户面前，只有一个html盒子。

三、网页文件与网页的关系

服务器是提供共享资源和服务的计算机，其作用是管理大量的信息资源。网页文件存在服务器端，网页文件是一个脚本程序，是一个“剧本”。客户机是用户用来获取资源和服务的计算机。浏览器软件是客户机上必备软件。用户在客户机上，首先下载的是服务器上的“剧本”，把此“剧本”经过导演浏览器软件编导之后用户看到的是“电视剧”网页。

四、网站的开发流程

典型的网站开发流程包括以下几个阶段：

1.需求分析：包括建站目的及目标定位分析。

2.站点规划：包括结构规划、内容规划、界面规划及网站功能设置。

3.网站制作：包括设置网站的开发环境、创建内容资源、页面设计和布局等。

4.测试发布：测试页面的链接及网站的兼容性，并将站点发布到服务器上。

5.需求分析:建立网站的目的要么是增加利润，要么是传播信息或观点。提出目标定位是非常简单的事情，更重要的是如何实现目标。在很多Web网站项目中，有包容一切的倾向。实际上一个网站不可能满足所有人的需求，对设计者来说，网站一定要有特定的用户和特定的任务。

6.站点规划:（1）网站结构规则。网站结构规划包括网站结构图，使用合理的文件夹保存文档，使用合理的文件名称。（2）网站内容规划。（3）网站界面规划。（4）网站功能设置。

7.网站制作：完整的网站制作包括两个过程：（1）前台页面制作。包括内容采集整理、图片的处理、背景设置、页面排版及样式设计等。（2）后台程序开发。后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程等。页面排版，主要是合理布局网页，网页“寸土寸金”，尽量用有限的空间展示更多的信息。Html语言提供了支持网页布局的元素，如框架、表格、p等。样式设计时，尽量让内容与样式分开，这样做易于维护和改版，修改网页外观，无需修改内容文件.html,只需修改样式文件.css即可。还可以通过缩减页面代码，节省用户编程，减少下载数量，从而提高页面浏览速度。此外，其优点还有：结构清晰，容易被搜索引擎搜索到；更好地控制页面布局；提高易用性，一个样式文件可为不同用户共享，使用CSS可以结构化HTML。

8.测试发布：（1）测试站点。网站测试与传统的软件测试不同，它不但需要检查是否按照设计的要求运行，而且还要测试系统在不同用户端的显示是否合适，最重要的是从最终用户的角度进行安全性和可用性测试。（2）测试网页。测试网页主要包括：页面的效果是否美观，页面中的链接是否正确，页面的浏览器兼容性是否良好。（3）发布站点。当完成了网站的设计、调试、测试和网页制作等工作后，需要把设计好的站点上传到服务器来完成整个网站的发布。Dreamweaver内置了强大的FTP功能，可以帮助用户实现对站点文档的上传。

参考文献

[1]蒋丽君浅谈网页设计中计算机图像处理技术应用[J].商品与质量，消费研究，2015，(1)，71。

[2]仇乐网页设计中计算机图像处理技术应用解析[J].煤炭技术，2013，32，(3)，204-205。

[3]刘显丽浅谈图像处理技术在网页制作中应用[J].辽宁师专学报（自然科学版），2007，(3)，35。

[4]颜谦和《网页设计与制作》课程运用案例教学法初探[J].电脑知识与技术，2014。

[5]欧阳炜昊基于工作过程导向的“网页设计与制作”课程教学改革研究[J].计算机教育，2014。