网页设计与网站建设全攻略
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.2 网页设计与网站建设需要的常用技术

设计网页时首先要选择网页设计工具软件。虽然用记事本手工编写源代码也能做出网页，但是需要对编程语言相当了解，并不适合广大的网页设计爱好者。由于目前可视化的网页设计工具越来越多，使用也越来越方便，所以设计网页已经变成了一件很轻松的工作。Flash、Dreamweaver、Photoshop、Fireworks这4个软件相辅相成，是设计网页的首选工具，其中Dreamweaver用来排版布局网页，Flash用来设计精美的网页动画，Photoshop和Fireworks用来处理网页中的图形图像。

1.2.1 网页编辑排版软件

Dreamweaver CC是创建网站和应用程序的专业之选。它组合了功能强大的布局工具、应用程序开发工具和代码编辑支持工具等。Dreamweaver不但功能强大而且稳定，可帮助设计人员和开发人员轻松创建和管理任何站点，如图1-6所示为Dreamweaver CC中文版工作界面。

图1-6 Dreamweaver CC中文版工作界面

1.2.2 网页动画制作软件

Flash是一款多媒体动画制作软件。它是一种交互式动画设计工具，用它可以将音乐、动画以及富有新意的界面融合在一起，以制作出高品质的动态视听效果。

由于良好的视觉效果，Flash技术在网页设计和网络广告中的应用非常广泛，有些网站为了追求美观，甚至将整个首页全部用Flash方式设计。从浏览者的角度来看，Flash动画内容比起一般的文本和图片网页，大大增加了艺术效果，对于展示产品和企业形象具有明显的优越性，如图1-7所示就是使用Flash制作的网页动画。

图1-7 Flash CC制作的动画

1.2.3 网页图像设计软件

网页中如果只是文字，则缺少生动性和活泼性，也会影响视觉效果和整个页面的美观，因此在网页的制作过程中需要插入图像。图像是网页中重要的组成元素之一。使用Photoshop CC和Fireworks CC可以设计出精美的网页图像。

Photoshop是Adobe公司推出的图像处理软件。目前已被广泛应用于平面设计、网页设计和照片处理等领域。随着计算机技术的发展，Photoshop已历经数次版本更新，功能越来越强大。如图1-8所示是Photoshop CC设计网页整体图像。

图1-8 Photoshop CC设计网页整体图像

1.2.4 网页标记语言HTML

网页文档主要是由HTML构成。HTML全名是HyperText Markup Language，即超文本标记语言，是用来描述WWW上超文本文件的语言。用它编写的文件扩展名是.html或.htm。

HTML不是一种编程语言，而是一种页面描述性标记语言。它通过各种标记描述不同的内容、说明段落、标题、图像、字体等在浏览器中的显示效果。浏览器打开HTML文件时，将依据HTML标记去显示内容。

HTML能够将Internet上不同服务器上的文件连接起来，可以将文字、声音、图像、动画和视频等媒体有机组织起来，展现给用户五彩缤纷的画面。此外，它还可以接受用户信息，与数据库相连，实现用户的查询请求等交互功能。

HTML的任何标记都由“<”和“>”围起来，如<HTML><I>。在起始标记的标记名前加上符号“/”便是其终止标记，如</I>，夹在起始标记和终止标记之间的内容受到标记的控制，例如<I>幸福永远</I>，夹在标记I之间的“幸福永远”将受标记I的控制。HTML文件的整体结构也是如此，下面就是最基本的网页结构，如图1-9所示。

图1-9 基本的网页结构

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
<!--
.STYLE1
{
    color: #EF0039;
    font-size: 36px;
    font-family: "微软雅黑";
}
-->
</style>
</head>
<body>
<span class="STYLE1">中秋节快乐</span>
</body>
</html>

下面讲述HTML的基本结构。

1．HTML标记

<html>标记用于HTML文档的最前面，用来标识HTML文档的开始。而</html>标记恰恰相反，它放在HTML文档的最后面，用来标识HTML文档的结束，两个标记必须一起使用。

2．Head标记

<head>和</head>构成HTML文档的开头部分，在此标记对之间可以使用<title></title>、<script></script>等标记对，这些标记对都是描述HTML文档相关信息的标记对，<head></head>标记对之间的内容不会在浏览器的框内显示出来，两个标记必须一起使用。

3．Body标记

<body></body>是HTML文档的主体部分，在此标记对之间可包含<p></p>、<h1></h1>、<br></br>等众多的标记，它们所定义的文本、图像等将会在浏览器内显示出来，两个标记必须一起使用。

4．Title标记

使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“标题”。要将网页的标题显示到浏览器的顶部其实很简单，只要在<title></title>标记对之间加入要显示的文本即可。

1.2.5 网页脚本语言JavaScript

使用JavaScript简单易懂的脚本语言，结合HTML代码，即可快速地完成网站的应用程序。

脚本语言（JavaScript）介于HTML和C，C++，Java，C#等编程语言之间，脚本是使用一种特定的描述性语言，依据一定格式编写的可执行文件，又称作批处理文件，脚本通常可以由应用程序临时调用并执行。各类脚本目前被广泛应用于网页设计，因为脚本不仅可以减小网页的规模和提高网页浏览速度，而且可以丰富网页的表现，如动画、声音等。

脚本同VB、C语言的区别主要是：

•脚本语言比较简单，比较容易掌握。

•脚本与应用程序密切相关，所以包括相对应用程序自身的功能。

•脚本一般不具备通用性，所能处理的问题范围有限。

•脚本多为解释执行。

1.2.6 动态网页编程语言ASP

ASP是Active Server Page的缩写，即为“活动服务器网页”。ASP是微软公司开发的代替CGI脚本程序的一种应用，它可以与数据库和其他程序进行交互，是一种简单、方便的编程工具。ASP网页文件的格式是.asp，现在常用于各种动态网站中。ASP是一种服务器端脚本编写环境，可以用来创建和运行动态网页或Web应用程序。ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。利用ASP可以向网页中添加交互式内容，也可以创建使用HTML网页作为用户界面的Web应用程序。与HTML相比，ASP网页具有以下特点。

•利用ASP可以实现突破静态网页的一些功能限制，实现动态网页技术。

•ASP文件是包含在HTML代码所组成的文件中，易于修改和测试。

•服务器上的ASP解释程序会在服务器端制定ASP程序，并将结果以HTML格式传送到客户端浏览器上，因此使用各种浏览器都可以正常浏览ASP所产生的网页。

•ASP提供了一些内置对象，使用这些对象可以使服务器端脚本功能更强。例如，可以从Web浏览器中获取用户通过HTML表单提交的信息，并在脚本中对这些信息进行处理，然后向Web浏览器发送信息。

•ASP可以使用服务器端ActiveX组件来执行各种各样的任务，例如存取数据库、收发E-mail或访问文件系统等。

•由于服务器是将ASP程序执行的结果以HTML格式传回客户端浏览器，因此用户不会看到ASP所编写的原始程序代码，可防止ASP程序代码被窃取。

上一章目录下一章