第1章网页制作基础.docx

《第1章网页制作基础.docx》由会员分享，可在线阅读，更多相关《第1章网页制作基础.docx（10页珍藏版）》请在第一文库网上搜索。

1、第1章网页制作基础在学习制作一个网页之前，首先应了解一些网页与网站的基本知识，了解常用的网页制作工具，熟悉网站开发的工作流程。本章主要介绍与网页制作相关的一些基本知识及Web常用术语、网页制作工具、网页图像、动画制作工具与网站开发的工作流程。任务1认识网页基础知识WWW(Wor1dWideWeb),中文称为万维网，是Internet中最为精彩的部分。为了与传统的网络区别，人们将WWW简称为Web,或称为3W,Web上具有共同的主题、性质相关的一组资源就是Web站点。Web直译为“网”，Web的含义是指通过超链接将各种文档组合在一起，形成一个大规模的信息集合。知识点：网页的基础知识1. Web网

2、页的特点浏览Web时所看到的文件称为Web页，又称为网页。网页可以将不同类型的信息(例如文本、图像、声音和视频等)组合在一个文档中。由于这些文档是用超文本标记语言HTM1表示的，其文件扩展名为.htm或.htm1,因此乂称为HTM1文档或超文本。超文本可以给浏览者带来视觉和听觉的享受，所以Web技术又称为超媒体技术。一个Web由一个或多个Web页组成，这些Web页相互连接在一起，存放在WWW服务器中，以供浏览者访问。浏览者通过Web页可以进行跳跃式的查询与浏览，可以在世界各地的网络计算机之间自由地、高效率地选择和收集各种各样的信息，而不必知道所浏览的信息来自于哪台计算机。Web所包含的是双向信

3、息，一方面浏览者可以通过浏览器浏览他人的信息，另一方面浏览者也可以通过Web服务器建立自己的网站和发布自己的信息。2. Web网页常用术语当用户制作网页时，了解与熟悉Web站点的有关术语对网页设计是十分重要的，如HTM1、UR1、网页、主页等术语。1) HTM1Web页是用超文本标记语言HTM1（HyperTextMarkup1anguage）表示的。HTM1是一种规范，一种标准。HTM1通过标记符（Tag）标记网页的各个组成部分，通过在网页中添加标记符，指示浏览器如何显示网页内容。浏览器按顺序阅读网页文件（HTM1文件）。以IE浏览器为例，在浏览器窗口的菜单中选择“查看”I“源文件”命令后，

4、系统将自动启动记事本或写字板，并显示该网页的HTM1源文件，如图所示。图1-1查看网页源文件的选项操作和在记事本中查看网页源文件（HTM1文件）2. UR1UR1是UniformResource1ocator的缩写，其含义是统一资源定位器。UR1的表示可以是绝对的，也可以是相对的。绝对的UR1将完整地给出协议种类（例如HTTP、FTP）、服务器的主机域名、路径和网页文件名。如图1-2所示是UR1为h1tp：/的网页。其中，Htp表示使用的是超文本传输协议，表示主机的域名，表示网页文件名。3）网页网页是使用HTM1语言所写的文本文件，网页里可以包含文字、表格、图像、链接、声音和视频等。每个网页都

5、是磁盘上的一个文件，可以单独浏览。4）主页主页（HOmePage）也称为首页，它是一个单独的网页，可以存放各种信息；它又是特殊的网页，是浏览者浏览一个网站的起点。3. Web网页的基本元素Web网页是一个纯文本文件，通过HTM1、CSS等脚本语言对页面元素进行标识，然后由浏览器自动生成的页面。构建网页的基本元素有文本、图像、超链接、导航栏、表格、表单、多媒体及特殊效果等。图1-2浏览器与主页1）文本网页的主体一般以文本为主。在制作网页时，可以根据需要设置文本的字体、字号、颜色以及所需要的其他格式。2）图像图像可以用作标题、网站标志（1ogo）、网页背景、链接按钮、导航栏、网页主图等。图像使用最

6、多的文件格式是JPEG和GIF格式。3）超链接超链接是从一个网页指向另一个目的端的链接，该链接既可以指向本地网站的另一个网页，也可以指向世界各地的其他网页。4）导航栏导航栏能使浏览者方便地返回主页或继续下一页的访问。导航栏可以是按钮、文本或图像。5）表格网页中的表格是一种用于控制网页页面布局的有效方法。6）表单表单通常用于收集信息或实现一些交互式的效果。表单的主要功能是接收浏览者在浏览器端的输入信息，然后将这些信息发送到浏览者设置的目的端。7）多媒体及特殊效果网页还包含有声音、动画、视频等多媒体元素，以及悬停按钮、JaVa控件、ActiveX控件等特殊效果。4. Web网页的常见类型目前，常见

7、的网页有静态网页和动态网页两种。静态网页的UR1通常以.htm、.htm1、.Shtm1、.XmI等形式为后缀，而动态网页的UR1一般以.asp、.jsp、.php、.PeH和.cgi等形式为后缀。5. 浏览器浏览器的作用是“翻译”HTM1标记语言，并按照规定的格式显示出来，因此使用IE等浏览器可以直接访问网页。浏览器是浏览Imernet资源的软件，通过它可以显示各种多媒体网页，连接到不同的Internet服务器，获取各种各样的有用信息。因此，浏览器是浏览者用于获得Web资源的有力工具。如图1-2所示，浏览器窗口一般由标题栏、菜单栏、图标组成的工具栏、UR1地址栏和页面等部分组成。浏览器具有以

8、下基本功能： 获取Internet资源。 保存访问记录。 阅读超文本文件。 具有字符格式化功能。 发送或接收E-mai1。 具有安全保密功能。 具有书签功能。 处理具有交互功能的FORM表单。 .网页制作新手须知假如你从来没有制作过网页，现在希望体会一下制作网页的快乐，那么，你的工作步骤通常包括如下几步。（1）使用Windows资源管理器规划网站的目录结构。例如，假定希望创建一个个人站点，其中大致包括个人兴趣（Xingqu）、爱好（aihao）和自我简介（jianjie）等内容，那么网站的目录结构可以按图13所示进行安排。BJ本地磁盘0：）Bywebsite门aihao0jianjieXing

9、qU图1-3网站目录规划示例因此，规划站点目录结构实际上是一个信息分类管理的过程，用户完全可以自由安排，不过此时应特别注意下面几个问题。 最好在驱动根目录下创建站点文件夹，如在D盘下建立站点根文件夹mywebsitePhotoShOPCS3Extended被称为“网络四剑客2007”。3) 网页图像与动画制作工具现在的网页通常具有丰富多彩的图像和动画。对于网页中的图像和动画，既要求质量高，同时又要求文件所占存储空间小。1) F1ashF1ash是Macromedia公司专门为网页设计的一个交互性矢量动画设计软件。网页设计者可以随心所欲地设计各种动态1ogo(商标、图案)、动画和导航条，还可以加

10、入动感音乐，以及其他多媒体的各项功能。由于矢量图形不会因为缩放而导致影像失真，因此F1ash在Web上应用很广泛。2) FireworksFireworks是Macromedia公司专门设计的Web图形工具软件，它可以用最少的步骤生成最小但质量很高的JPEG和GIF图像，这些图像可以直接用于网页上。FireWorkS是Web图形工具的首选软件。3) PhotoshopPhotoshop是由Adobe公司出品的著名的图形图像处理软件。它能够实现各种专业化的图像处理，是专业图像创作的首选软件。4) U1eadGIFAnimatorU1eadGIFAnimator是友立(UIead)公司发布的一个动

11、画GIF制作工具。它可以将多幅外部图像文件组合成动画，还具有滤镜功能、条幅文字效果等。网页设计者可使用U1eadG1FAnimator快速、轻松地创建和编辑网页动画文件。5) COO13DCOO13D是友立(U1ead)公司推出的一款优秀的三维立体文字特效工具，它广泛地应用于平面设计和网页制作领域。CoO13D主要用于制作文字的各种静态或动态特效。任务3认识网站开发流程知识点：网站开发流程网站设计是一个系统工程，它具有特定的工作流程，只有遵循这个流程才能设计出令人满意的网站。网站设计主要分为网站规划，网站制作和后期维护等3个阶段，如图1-4所示。1.网站规划1）确定网站的主题与名称网站主题是指

12、建立的网站所要包含的主要内容，例如，旅游、娱乐休闲、体育、新闻、教育、医疗和时尚等。其中每一大类又可进一步细化为若干小类。一般来说，确定网站主题应遵循以下原则。 主题鲜明。一个网站必须要有一个明确的主题，在主题范围内做到内容全而精。 明确设立网站的目的。 体现自己的个性。设计者应该把自己的兴趣、爱好尽情地发挥出来，突出自己的个性，办出自己的特色。2）搜集素材确定网站主题后就要围绕主题搜集素材，作为自己制作网页的素材。搜集的材料越多，制作网站越容易。材料既可以从图书、报纸、光盘和多媒体上获得，也可以从网上搜集。对搜集到的材料应去粗取精，去伪存真。3）规划网站规划网站时，首先应把网站的内容列举出来，根据内容列出一个结构化的蓝图，根据实际情况设计各个页面之间的链接。规划网站的内容应包括栏目的设置、目录结构、网站