- 网页设计与网站建设完全实战手册
- 刘贵国
- 1718字
- 2021-03-19 18:34:30
1.2 常用的网页设计软件
设计网页时首先要选择网页设计工具软件。虽然用记事本手工编写源代码也能做出网页，但这需要对编程语言相当了解，并不适合广大的网页设计爱好者。由于目前可视化的网页设计工具越来越多，使用也越来越方便，所以设计网页已经变成了一件轻松的工作。Flash、Dreamweaver、Photoshop、Fireworks这4个软件相辅相成，是设计网页的首选工具，其中Dreamweaver用来排版布局网页，Flash用来设计精美的网页动画，Photoshop和Fireworks用来处理网页中的图形图像。
1.2.1 网页设计软件Dreamweaver
使用Photoshop制作的网页图像并不是真正的网页，要想真正成为能够正常浏览的网页，还需要用到Dreamweaver进行网页排版布局、添加各种网页特效，还可以轻松开发新闻发布系统、网上购物系统、论坛系统等动态网页。
Dreamweaver CS6是创建网站和应用程序的专业之选。它组合了功能强大的布局工具、应用程序开发工具和代码编辑支持工具等。Dreamweaver的功能强大而且稳定，可帮助设计人员和开发人员轻松创建和管理任何站点，如图1-6所示为Dreamweaver CC中文版工作界面。
图1-6 Dreamweaver CC中文版工作界面
1.2.2 图像设计软件Photoshop
网页中如果只是文字，则缺少生动性和活泼性，也会影响视觉效果和整个页面的美观。因此在网页的制作过程中需要插入图像。图像是网页中重要的组成元素之一。使用Photoshop CC可以设计出精美的网页图像。
Photoshop是Adobe公司推出的图像处理软件。目前已被广泛应用于平面设计、网页设计和照片处理等领域。随着计算机技术的发展，Photoshop已历经数次版本更新，功能越来越强大。如图1-7所示是Photoshop CC设计网页整体图像。
图1-7 Photoshop CC设计网页整体图像
1.2.3 动画设计软件Flash
Flash是一款多媒体动画制作软件。它是一种交互式动画设计工具，用它可以将音乐、动画以及富有新意的界面融合在一起，以制作出高品质的动态视听效果。
由于良好的视觉效果，Flash技术在网页设计和网络广告中的应用非常广泛，有些网站为了追求美观，甚至将整个首页全部用Flash方式设计。从浏览者的角度来看，Flash动画内容比一般的文本和图片网页，大大增加了艺术效果，对于展示产品和企业形象具有明显的优越性。如图1-8所示使用Flash制作的网页动画。
图1-8 Flash CC制作的动画
1.2.4 HTML标记
网页文档主要是由HTML构成。HTML全名是Hyper Text Markup Language，即超文本标记语言，是用来描述WWW上超文本文件的语言。用它编写的文件扩展名是.html或.htm。
HTML不是一种编程语言，而是一种页面描述性标记语言。它通过各种标记描述不同的内容，说明段落、标题、图像、字体等在浏览器中的显示效果。浏览器打开HTML文件时，将依据HTML标记去显示内容。
HTML能够将Internet上不同服务器上的文件连接起来；可以将文字、声音、图像、动画、视频等媒体有机组织起来，展现给用户五彩缤纷的画面；此外它还可以接受用户信息，与数据库相连，实现用户的查询请求等交互功能。
HTML的任何标记都由“<”和“>”围起来，如<HTML><I>。在起始标记的标记名前加上符号“/”便是其终止标记，如</I>，夹在起始标记和终止标记之间的内容受标记的控制，例如<I>幸福永远</I>，夹在标记I之间的“幸福永远”将受标记I的控制。HTML文件的整体结构也是如此，下面就是最基本的网页结构，如图1-9所示。
图1-9 基本的网页结构
<html>
<head>
<title>
</title>
<style type="text/css">
<!--
body{ background-image：url(images/45.gif); }
.STYLE1
{ color: #EF0039；font-size：36px; font-family："华文新魏"; }
-->
</style>
</head>
<body>
<span class="STYLE1">幸福永远</span>
</body>
</html>
下面讲述HTML的基本结构。
HTML标记
<Html>标记用于HTML文档的最前边，用来标识HTML文档的开始。而</Html>标记恰恰相反，它放在HTML文档的最后边，用来标识HTML文档的结束，两个标记必须一块使用。
Head标记
<head>和</head>构成HTML文档的开头部分，在此标记对之间可以使用<title></title>、<script></script>等标记对，这些标记对都是描述HTML文档相关信息的标记对，<head></head>标记对之间的内容不会在浏览器的框内显示出来，两个标记必须一块使用。
Body标记
<body></body>是HTML文档的主体部分，在此标记对之间可包含<p></p>、<h1></h1>、<br></br>等众多的标记，它们所定义的文本、图像等将会在浏览器内显示出来，两个标记必须一块使用。
Title标记
使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“标题”，要将网页的标题显示到浏览器的顶部其实很简单，只要在<title></title>标记对之间加入要显示的文本即可。
1.2.5 FTP软件
网站制作完毕，需要发布到Web服务器上，才能够让别人浏览，现在，上传网站的工具有很多，有些网页制作工具本身就带有FTP功能，利用这些FTP工具，可以很方便地把网站发布到服务器上。
CuteFtp是一款非常受欢迎的FTP工具，界面简洁，并具有的支持上下载断点续传、操作简单方便等特征使其在众多的FTP软件中脱颖而出，无论是下载软件还是更新主页，CuteFtp是一款不可多得的好工具。如图1-10所示为CuteFtp软件。
图1-10 CuteFtp软件