第1章 网制作基础.docx

1、第1章 网制作基础第1章 网页制作基础学习目标随着Internet的不断发展，网页已经成为重要的信息载体。如果想自己动手制作网页，首先应了解网页的组成、HTML的基本语法和网页制作的常用软件。本章就讲解这些网页制作的基本知识，为以后的学习垫下基石。本章要点 HTML的组成和语法 网页制作的常用软件 网页制作软件的启动和退出1.1 网 页 制 作在Internet中充满了许多漂亮、美观的网页，要制作出这样的网页，必须先了解什么是网页，网页的基本组成是怎样的。1.1.1 网页简介网页又称Web页，其中一般都包含图像、文字和超链接等元素。如图1-1所示即是一个网页。图1-1 新浪网首页按表现形式的不

2、同，网页一般分为静态网页和动态网页。静态网页是标准的HTML文件，它是采用HTML（超文本标记语言）编写的，通过HTTP（超文本传输协议）在服务器端和客户端之间传输的纯文本文件，扩展名为.html或.htm。动态网页与静态网页在许多方面是一致的。它们都是无格式的ASCII码文件，都包含着HTML代码，都可以包含用脚本语言（比如JavaScript或VBScript）编写的程序代码，都存放在Web服务器上，收到客户请求后都会把响应信息发送给Web浏览器。根据采用Web应用技术的不同，动态网页文件的扩展名也不同。如使用ASP（Active Server Pages）技术时文件扩展名为.asp，使用

3、JSP（Java Server Pages）技术时文件扩展名为.jsp。按网页在网站中的位置，可将其分为网页（Web Page）和主页（Home Page）。一个网站中只有一个主页，而网页却可能成百上千。通常所说的主页是指访问网站时看到的第一页，即首页。首页的名称是特定的，一般为index.htm、index.html、default.htm、default.html、default.asp或index.asp等。1.1.2 HTML的概念HTML全名是Hyper Text Markup Language，即超文本标记语言，是用来描述WWW上超文本文件的语言。 提示：HTML并不是一种编程语言

4、，而是一种页面描述性标记语言。它通过各种标记描述不同的内容，说明段落、标题、图像和字体等在浏览器中的显示效果。浏览器打开HTML文件时，将依据HTML标记去显示内容。HTML能够将Internet中不同服务器上的文件连接起来，如将文字、声音、图像、动画和视频等媒体有机组织起来，展现出五彩缤纷的画面。此外，它还可以接收用户信息，与数据库相连，实现用户的查询请求等交互功能。HTML文件独立于平台，对多平台兼容，通过网页浏览器能够在任何平台上阅读。【例1-1】 下面通过文本编辑器记事本创建一个名为index.html的HTML文件（光盘源文件第1章index.html）。操作步骤如下：（1）选择“开

5、始/程序/附件/记事本”命令，如图1-2所示。（2）在打开的“记事本”文档中输入下面代码，如图1-3所示。这里是页面标题这里是正文内容（3）选择“文件/另存为”命令，打开“另存为”对话框。在“保存在”下拉列表框中选择文件保存路径，在“文件名”下拉列表框中输入文件名及扩展名（.html或.htm），如index.html，在“保存类型”下拉列表框中选择“所有文件”选项，如图1-4所示，单击按钮。图1-3 输入代码（4）双击打开所创建的文件，即可在浏览器中预览，如图1-5所示。 图1-4 保存文件 图1-5 浏览页面1.1.3 HTML的组成及语法HTML文档是由HTML元素组成的文本文件。HTM

6、L元素是预定义的正在使用的HTML标签，即HTML标签用来组成HTML元素。HTML标记的一般格式为：内容标记符一般需要配对使用，前面的表示某种格式或指令的开始，后面的表示这种格式的结束，这对标记符之间的内容就是被作用的对象。以上面创建的HTML文档为例，第一个标签是，最后一个标签是，这两个标签分别代表HTML文档的开始和结束；在和标签之间的文本是头部信息，在浏览器窗口中，是不会显示头部信息的；在和标签之间的文本是文档标题，它显示在浏览器窗口的标题栏；在和标签之间的文本是正文，会在浏览器的网页浏览区中显示。1.2 网页制作的常用软件网页所包含的内容除了文本外，还应该有漂亮的图像和背景、精彩的F

7、lash动画，从而使页面更具观赏性和艺术性。在网页中方便地添加这些元素，就需要一些网页制作常用软件。下面就对这些软件进行简单介绍。1.2.1 图形图像处理软件用于图形图像处理的软件有很多，如Photoshop、Fireworks、CorelDRAW、Illustrator等。而与网页制作联系最为紧密的应该是Adobe公司推出的Photoshop。图1-6 Photoshop CS2启动画面Photoshop具有强大的图像绘制编辑功能，已成为专业处理图形图像的首选工具。Photoshop目前的最新版本为Photoshop CS2。Photoshop CS2在保留原有版本传统功能的基础上，提供了更

8、多的创作方式，能制作适用于打印、Wed和其他任何用途的最佳品质的图像。通过流线型的Wed设计、更快的专业品质照片润饰功能及其他功能，可创造出无与伦比的影像世界。如图1-6所示是Photoshop CS2中文版的启动画面。1.2.2 动画制作软件网络动画制作的首选软件非Flash莫属。Flash 8是由美国Macromedia公司于2005年10月推出的一款多媒体动画制作软件。它是一种交互式动画设计工具，用它可以将音乐、声效及动画方便地融合在一起，制作出高品质的动态效果，或者说是动画。图1-7 Flash 8启动画面Flash动画有别于以前常用于网络的GIF动画，它采用的是矢量绘图技术，能将绘制

9、的图像放大，而图像质量不损失。由于Flash动画是由矢量图构成的，大大减少了动画文件的大小。在网络带宽局限的情况下，提升了网络传输速度；可以方便他人下载观看。所以一经推出，就风靡网络世界。如 图1-7所示为Flash 8中文版的启动画面。1.2.3 网页布局软件对于布局网页的软件，目前主要以Microsoft公司推出的FrontPage和Macromedia公司推出的Dreamweaver为主。Dreamweaver 8是构建Web站点和应用程序的专业之选，它组合了功能强大的布局工具、应用程序开发工具和代码编辑支持工具等。Dreamweaver的设计和整合功能是以CSS为基础的，强大而稳定，可

10、帮助设计人员和开发人员轻松创建和管理任何站点。如图1-8所示为Dreamweaver 8中文版启动画面。图1-8 Dreamweaver 8启动画面1.2.4 软件间的相互关系在了解了网页设计的几个常用软件之后，下面对各软件在网页设计中的作用以及各软件之间的相互关系进行讲解。1图像处理软件Photoshop CS2如果网页中只是文字，则缺少生动性和活泼性，也会影响视觉效果和整个页面的美观。鉴于此，在网页的制作过程中需要适时地插入图像，图像是网页中重要的组成元素之一。使用Photoshop CS2，除了可以对插入图像进行调整处理外，还可以使用图像进行页面的总体布局，然后使用切片导出。对网页中所出

11、现的GIF图像按钮也可以使用Photoshop CS2进行创建，以达到更加精彩的效果。如图1-9所示即是用Photoshop绘制的几个网页按钮。 图1-9 用Photoshop绘制的网页按钮除了上述几点外，Photoshop还可以为创建Flash动画所需的素材进行制作、加工和处理，可以使动画中所表现的内容更加精美和引人入胜。2动画制作软件Flash 8从1996年11月Macromedia公司推出Flash 1至今，该公司推出了8个版本，从简单的网络绘图和动画工具包进化到一个复杂的多媒体创作环境，使Flash在全球拥有了超过百万的使用者，而且Flash已经成为Internet上网络动画的代名词

12、。在一般网页设计中，使用Flash的主要目的是制作具有动画效果的导航条、Logo以及商业广告条等，动画的使用可以更好地表现设计者的创意。由于学习Flash本身的难度不大，而且制作含有Flash动画的页面很容易吸引浏览者的目光，所以Flash已经成为网页设计中不可缺少的元素。如图1-10所示为用Flash制作的导航条效果。图1-10 Flash导航条实例效果3网页布局软件Dreamweaver 8图1-11 Dreamweaver网页效果实例Dreamweaver 8是一款可视化的网页制作软件，它包含了可视化编辑和HTML编辑的软件包。也就是说，在Dreamweaver中可以对HTML的网页文件

13、进行视图的可视化编辑，这样可以使没有HTML基础的初学者也能轻松地制作出网页，从而降低了网页制作的难度。而对于专业的设计者来讲，使用Dreamweaver可以在不改变原有编辑习惯的同时，充分享受可视化编辑带来的益处。在网页设计中，Dreamweaver主要用于对页面布局，即将已经创建完成的文字、图像和动画等元素在Dreamweaver中通过一定形式的布局整合为一个页面。除此以外，在Dreamweaver中还可以方便地插入ActiveX、JavaScript、Java和ShockWave，从而使设计者可以创建出具有特殊效果的精彩网页。如图1-11所示为用Dreamweaver创建的网页。1.3

14、网页制作软件的启动与退出前面对网页制作的相关软件有了一定的了解，本节主要介绍Dreamweaver 8、Flash 8和Photoshop CS2的启动和退出方法。1.3.1 网页制作软件的启动下面分别介绍网页制作软件的启动方法，此处以Photoshop CS2为例，其他软件的启动方法与此相似。启动Photoshop CS2可以选择“开始/所有程序/Adobe Photoshop CS2”命令（如图1-12所示），也可以直接双击桌面Adobe Photoshop CS2的快捷方式图标来启动（如图1-13所示）。 图1-12 从“开始”菜单启动 图1-13 双击快捷方式图标启动1.3.2 网页制

15、作软件的退出网页制作软件的退出方法也是相同的，都可以通过选择“文件/退出”命令或者直接单击工作窗口右上角的按钮退出。1.3.3 应用举例启动和退出Dreamweaver 8下面练习Dreamweaver 8的启动和退出，以巩固启动和退出相关软件的方法。操作步骤如下：（1）选择“开始/程序/Macromedia/Macromedia Dreamweaver 8”命令，如图1-14所示。启动Dreamweaver 8，如图1-15所示。 图1-14 启动Dreamweaver 8 图1-15 Dreamweaver 8界面（2）在Dreamweaver 8界面中选择“文件/退出”命令退出Dream

16、weaver 8，如图1-16所示。图1-16 退出Dreamweaver 81.4 上 机 练 习本节将对Flash 8的启动与退出操作进行练习，读者可在启动该软件后，大致了解Flash 8工作界面的构成，并试着使用其中的一些常规命令，便于后面的学习。其操作步骤如下：（1）在桌面上双击Macromedia Flash 8快捷方式图标（如图1-17所示），打开Flash 8中文版，如图1-18所示。（2）选择“文件/退出”命令退出Flash 8，如图1-19所示。 图1-17 双击图标 图1-18 Flash 8界面 图1-19 选择“退出”命令1.5 习 题（1）练习Dreamweaver 8的启动和退出。（2）练习FLA文件的打开和关闭。（3）练习PSD文件的打开和关闭。