第1章 网页设计与制作概述

《第1章 网页设计与制作概述》由会员分享，可在线阅读，更多相关《第1章 网页设计与制作概述（33页珍藏版）》请在装配图网上搜索。

1、PPT模板下载：/moban/行业PPT模板：/hangye/节日PPT模板：/jieri/PPT素材下载：/sucai/PPT背景图片：/beijing/PPT图表下载：/tubiao/优秀PPT下载：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/资料下载：/ziliao/PPT课件下载：/kejian/范文下载：/fanwen/试卷下载：/shiti/教案下载：/jiaoan/字体下载：/ziti/第1章 网页设计与制作概述第第1 1本章内容提要：本章内容提要：l在学习网页制作之前，需要了解网页设计与制作的基础知识，以便对网页制

2、作的相关概念、常用工具、开发流程等内容有个总体把握。本章主要内容如下：l网页与网站的基本知识l网页中所包括的主要元素本章目标任务：本章目标任务：l在掌握网页设计与制作基础知识基础上，结合自己所熟悉的内容作一个小型个人网站的规划。1.1 1.1 网页与网站的基本知识网页与网站的基本知识1.1.1 1.1.1 什么是网页？什么是网页？Web，直译过来就叫“网”，它的含义是通过超级链接将各种文档连接起来，形成一个大规模的信息集合。网页(即Web页)是能够被浏览器软件识别的文本文件，扩展名一般为.htm或.html。是使用网页制作工作编辑生成或使用HTML语言编写的超文本，网页里可以包含文字、表格、图

3、像、声音和视频等网页元素。每个网页都是磁盘上的一个文件，可以单独浏览。网页是组成网站的特殊成分，图像、声音、和视频等文件均需要通过网页才能让浏览者看到或听到。1.1.2 网站的的概念与分类1.网站的的概念网站，也称作站点，英文的名称是WebSite。从逻辑上讲网站就是一个建构在网络上、具有独立名称的逻辑上的独立体。再简单来讲，就是一组具有特殊连接方式的页面群，表现出来就是我们常说的一个网站，比如网易、搜狐、新浪、百度等知名网站。我们个人做的网站虽然规模上不能和大站相比，但它在结构上也是完全独立的。从物理意义上讲，所有的网站都架构在连接到因特网的服务器上，其具体网页文件都存放在一个网站文件夹中。

4、1.1.2 网站的的概念与分类2.网站的分类网站的分类方式有多种，这里我们仅就网站的内容与网站的交互性两方面来分类。（1）按内容分类 搜索引擎式网站综合性门户网站电子商务网站即时通讯网站小型专题或个人网站（2）按网站交互性来类单向传递双向交流1.1.3 1.1.3 网页是如何被浏览的网页是如何被浏览的网页浏览是通过浏览器来实现的，浏览器是专门用于浏览网页的软件，常用的浏览器软件有Microsoft的IE和Netscape的Navigator等。HTML文件中还定义了网页中的各种对象（如：文字，图片，声音，图像，动画）的位置，外形和色彩，各种图像，声音，动画等文件则是网页的素材。浏览网页属于In

5、ternet所提供的WWW服务。网页浏览者在浏览网页时，实际上是将HTML文件及相关的文本、图像、声音等文件下载到自已本地计算机中，然后由浏览器程序对HTML文件进行解释后显示网页内容。1.1.4 1.1.4 网页制作常用术语网页制作常用术语1.HTML文件用超文本标记语言编写的超文本文件称为HTML（HyperText Mark-up Language）文件，它能不受各种操作系统限制，独立地运行于各种操作系统平台之上。HTML文件作用：HTML语言主要用于静态网页设计，自1990年起HTML语言就一直被用作World Wide Web（WWW）上的信息表示语言，用于描述网页的格式，设计它与W

6、WW上其它主页的链接信息。HTML文件是网页的源文件，是一个放置了标记的ASCII文本文件，通常以.htm或.html为扩展名。1.1.4 网页制作常用网页制作常用术语术语2.服务器和客户机浏览者在访问网页时，是由浏览者本地的计算机向存放网页的远程计算机发出一个请求。远程计算机在收到请求后，将所需要的浏览内容（即网页）发送给本地计算机。那么本地的计算机被称为客户计算机（Client），远程存放网页的计算机被称为服务器（Server），根据服务器上运行的程序类型及服务器与客户所使用的通信协议作用的不同，服务器可分为WWW服务器，FTP服务器等。1.1.4 1.1.4 网页制作常用术语网页制作常用

7、术语3.IP地址和域名IP地址：为了使连接在Internet上的计算机能够互相识别并进行通信，每台连入Internet的计算机必须有个“标识号”，这个标识号便是计算机在Internet中的地址。这个地址是由IP协议进行处理的，故称为计算机的IP地址。IP地址是一个32位的二进制数，IP地址的写法是按8位为一组分成4组，组与组之间用小数点分隔，每组数值用十进制数表示。如:某台计算机的IP地址为202.121.160.78。IP地址包含两部分:一部分是网络号,用以区分在Internet上互联的各个网络;另一部分是计算机号,用以区分在同一网络上的不同计算机。域名：Internet规定了一套命令机制，

8、称为域名系统DNS（Domain Name System）。按域名系统定义的计算机名字称为域名。如： 当用户用域名来访问远程的计算机时,必须由Internet的DNS的名字服务器(Name Server)将域名翻译成对应的32位IP地址,然后才能完成对远程计算机的访问。1.1.4 1.1.4 网页制作常用术语网页制作常用术语 4.统一资源定位器（url）统一资源定位器（Uniform Resource Locator）是全球WWW网服务器资源的标准寻址定位源码，用于确定资源相应的位置及所需检索的文件。其优点是用字符串来指向所需的信息，从而进行资料的检索。URL 由3部分组成:Internet协

9、议 域名 主机路径及文件名http:/ 1.1.4 网页制作常用术语网页制作常用术语5.文件传输协议(FTP)文件传输协议(FTP)(File Transfer Protocol)用于网络节点间文件的双向传输,是实现资源共享的重要方式和有效手段之一。FPT 是支持用户实现把文件从一台计算机中传输到另一台计算机中,并且能保证传输的可靠性。用户在本地计算机上做好的主页除了用DW上传之外。还可以用FTP上传到达远程的主机中。常用的FTP工具有CuteFTP和LeapFTP等。1.1.4 1.1.4 网页制作常用术语网页制作常用术语6.虚拟主机虚拟主机是使用特殊的软、硬件技术把一台服务器主机分成几十个

10、“虚拟”的服务器主机，每台虚拟主机都具有独立的域名和IP地址（或共亨的IP地址），具有完整的Internet服务器功能。虚拟主机之间完全独立，在外界看来，每台虚拟主机和一台独立的服务器主机完全一样。多台虚拟主机共亨真实主机的资源，这样就可以把网络的开销费用均摊到每台虚拟主机上。可利用虚拟主机技术建立个人主页，在大型网站上（提供存放主页的免费空间，提供免费域名）申请主页空间和域名（免费或收费），获得成功后，把你制作的网页存放在虚拟主机上，这样你就好象在Internet上拥有了自己的服务器和网站。1.1.4 1.1.4 网页制作常用术语网页制作常用术语7.网站的发布网站制作好后还需要发布才能被浏览

11、者浏览。网站的性质不同，发布方式也不同。(1)企业级商业网站的发布如果企业有足够的资金和技术支持，可以考虑创建自己的网络中心。硬件方面需要有性能稳定的服务器、路由器、交换机，并要向当地的电信部门申请网络专线。同时需要有一定数量的专人对网站进行维护和管理。(2)中小企业级或小型组织社团的网站发布如果没有条件创建独立的网站硬件环境，或者网站规模并不大，不需要创建独立的网站硬件环境，可以选择以下几种小型网站的解决方案。租赁虚拟主机服务器托管DDN专线接入(3)免费主页空间如果只是想建立一个小型的、功能简单的网站，当然也可采用以上形式，但这需要有相应有费用支持，投资与效益的比例关系需要权衡。如果目前还

12、不想投资太多，那么免费主页空间将是较好的选择。但现在较好的免费主页空间不多，且一般不支持ASP、JSP、CGI等高级功能。1.1.4 1.1.4 网页制作常用术语网页制作常用术语8.超文本、超媒体、超链接超文本文件（HyperText）就是指在文本中包含了与其他文本的链接的文件。超级链接文本下方带有下划线。超媒体（Hypermedia）进一步扩展了超文本所链接的信息类型。超媒体文件就是一种文字、影像、图片、动画、声音综合在一起的文件。超链接（Hyperlink）是WWW上使用最多的一种技术。它是超文本、超媒体、超链接以及与其他媒体之间的链接，也是一种从源端点到目标端点的一种链接。在网页中，当鼠

13、标移到超链接处，会呈现手的形状，表示单击该处，可以链接到该提示所指的页面。1.1.4 1.1.4 网页制作常用术语网页制作常用术语9.主页网站向用户提供的最初起始页面叫主页（Homepage），也称为首页。主页是进入网站的门户，一般是整个网站的第一页，是网站中所有网页文件的起点和交点。主页中通常包括通向其他相关页面的超级链接，还应包括站点的基本信息和主要内容，使浏览者一目了然地了解站点的基本主题，了解站点的信息是否对自己有用。1.2 1.2 网页包括的主要元素网页包括的主要元素网页中除包含文本、声音外，还包含图像、导航、表格、表单等元素：1.文本文本是人类最重要的信息载体和交流工具，网页的主体

14、一般以文本为主。在制作网页时，可以根据需要设置文本的字体、字号、颜色以及所需要的其他格式。2.图像图像在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。图像可以用作标题、网站标志（Logo）、网页背景、链接按钮、导航栏、网页主图等。由于网络对网页文件的容量要求非常苛刻，因此在网页中只支持压缩比较高的GIF、JPEG、BMP等几种图像格式。3.动画动画即动态画面，它是由一组静态画面组成的连续播放便形成了动画。动画可由Fireworks、Flash、3DMax等软件制作。1.2 1.2 网页包括的主要元素网页包括的主要元素4.导航栏导航栏类似于软件中的菜单，实质上是一串超链接。其作用

15、是目录提纲，是浏览网页的引航路标，使浏览者顺利的浏览网站内容，是建设网站过程中的一条主目录。导航栏可以是按钮、文本或图像。站点的每个网页上均应设置导航栏，导航栏应放置在网页比较明显的位置。5.超级链接超级链接是从一个网页指向另一个目的端的链接，该链接既可以指向本地网站的另一个网页，也可以指向世界各地的其他网页。不论是文字还是图像，都可以设置超级链接。超级链接一般包括两种类型：站内链接和站外链接。1.2 1.2 网页包括的主要元素网页包括的主要元素6.表格网页中的表格是一种用于控制网页页面布局的有效方法。为了达到理想的视觉效果，通常不显示边框。如果网页具有横竖分明的风格，那么一定是由表格辅助布局

16、。7.表单表单是能够实现人机交互的网页界面，一种特殊的网页元素，通常用于收集或实现一些交互式的效果。表单的主要功能是接收浏览者在浏览器端的输入信息，然后将这些信息发送到浏览者设置的目的端。比如用户注册，要填一些表格，做出一些选择后提交，提交的信息将上传到服务器。8.多媒体及特殊效果为了吸引浏览者，许多网页还包含有声音、视频等多媒体元素，以及悬停效果、Java控件、ActiveX控件等特殊效果。1.3 1.3 网站制作流程网站制作流程网站设计是一个系统工程，具有特定的工作流程，遵循这个流程，才能设计出令人满意的网站。网站设计制作主要分为网站规划、网站制作、后期维护三个阶段，如下图所示：确定主题收

17、集材料规划网站制作网页测试评估正式上传推销网站维护更新网站规划网站制作后期维护1.3.1 1.3.1 网站规划网站规划制作网页如同泼墨作画，首先要进行构思，然后再加以实现。这种构思就是网站规划。网站规划的总体原则有两个：一是为读者提供有用信息，二是要美观。1.确定网站的主题与名称网站的主题是指建立的网站所要包含的主要内容。例如，教育、旅游、体育、新闻、医疗、时尚、娱乐、搜索等。其中每一大类又可细分为若干小类。一般来说，确定网站主题应遵循以下原则：(1)主题鲜明：一个网站必须要有一个明确的主题，在主题范围内做到内容全而精。(2)明确设立网站的目的。(3)体现自己的个性。把自己的兴趣、爱好尽情地发

18、挥出来，突出自己的个性，办出自己的特色。在个人网站中，网站的名称起着很重要的作用，它在很大程度上决定了整个网站的定位。一个好的名称必须简洁、有概括性、有特色、容易记，还要符合自己主页的主题和风格。1.3.1 1.3.1 网站规划网站规划2.搜集材料确定网站主题后，要围绕主题搜集材料，作为自己制作网页的素材。搜集的材料越多，制作网站越容易。材料既可以从图书、报纸、光盘、多媒体上获得，也可以从网上搜集。对搜集到的材料要去粗取精，去伪存真。1.3.1 1.3.1 网站规划网站规划3.规划网站规划网站就象设计师设计大楼一样，只有图纸设计好了，才能建成一座漂亮的楼房。规划网站时，首先应把网站的内容列举出

19、来，根据内容列出一个结构化的蓝图，根据实际情况设计各个页面之间的链接。规划网站的内容应包括：(1)设置主题栏目(2)设计目录结构(3)合理搭配颜色(4)设计网站标志(5)版面布局设计(6)适当运用图像1.3.2 1.3.2 网站制作网站制作1.制作网站制作网站主要包括以下步骤：(1)建立本地站点。建立站点根文件夹，用于存放首页、相关网页和网站中用到的其他文件。(2)在站点根文件夹下创建子文件夹。为了使文件安排比较清晰，将页面文件和图像文件分开存放。(3)向站点添加所需要的空网页。(4)设计网页尽寸。页面大小一般可选择800600或1024768规格。(5)设计网页属性，包括页面标题、背景图像、

20、背景颜色、链接颜色、文字颜色等。(6)向网页中插入文本、图像、动画等对象。(7)建立所需要的超级链接。(8)预览和保存网页。1.3.2 1.3.2 网站制作网站制作2.上传与测试测试评估与正式上传是不可分割的两部分。制作完毕的网页，必须进行测试。测试评估主要包括上传前的兼容性测试、链接测试和上传后的实地测试。完成上传前所需要的测试后，利用FTP工具将网页发布到所申请的主页服务器上。网站上传后，继续通过浏览器进行实地测试，发现问题，及时修改，然后再上传测试。1.3.3 后期维护 1.推销网站网页上传后，需要不断地进行宣传，以便让更多的朋友认识它，从而提高网站的访问率与知名度。推广网站的方法很多，

21、例如，利用E-mail、新闻组、与别的网站交换链接（友情链接）、到搜索引擎上注册、加入交换广告等。2.维护更新网站必须定期维护、定期更新，只有不断地补充新内容，才能吸引浏览者。同时，随着软硬件的进步，网页的设计也应由文字向多媒体、由平面图像向立体动画或影片、由单向传播向交互式发展。1.4 1.4 网页制作工具简介网页制作工具简介早期的网页一般是由专业人员利用HTML语言编写实现的。目前，已出现多种可视化程度很高的网页制作工作，不需要掌握专业的网页制作技术也能创作出富有特色、丰富多彩的网页。1.4.1 1.4.1 网页编辑工具网页编辑工具1.FrontPageFrontPage是Microsof

22、t公司出品的入门级网页编辑软件。FrontPage支持所见即所得的编辑方式，它不需要掌握很深的网页制作技术。其基本使用方法与Word类似。FrontPage最有特色的功能是站点管理。在更新服务器上的站点时，不需要创建更改文件目录，FrontPage将自动跟踪文件并拷贝那些新版本的文件。2.DreamweaverDreamweaver是Macromedia公司推出的网页制作产品，它是一个用于可视化设计与管理网页和网站的工具，支持最新的Web技术。它与Macromedia公司的Flash、Fireworks、Freehand 配合使用，功能更为强大，是目前专业人士首选的网页制作工具。Dreamwe

23、aver、Flash和Fireworks被称为“网页制作三剑客”。1.4.2 1.4.2 网页图像与动画制作工具网页图像与动画制作工具网页通常具有丰富多彩的图像和动画。对于网页中的图像和动画，既要求质量高，同时还要求文件所占存储空间小。1.FireworksFireworks是Macromedia公司专门设计的Web图形工具软件，它可以用最少的步骤生成最小但质量很高的JPEG和GIF图像，这些图像可以直接用于网页上。Fireworks是Web图形工具的首选软件。2.FlashFlash是Macromedia公司专门为网页设计的一个交互性矢量动画设计软件。网页设计者可以随心所欲地设计各种动态Lo

24、go（商标、图案）、动画、导航条，还可带有动感音乐，以及其他多媒体的各项功能。由于矢量图形不会因为缩放而失真，因此在Web上应用广泛。3.PhotoshopPhotoshop是由Adobe公司出品的著名的图形图像处理软件。它能够实现各种专业化的图像处理，是专业图像创作的首选软件。1.4.2 1.4.2 网页图像与动画制作工具网页图像与动画制作工具4.PhotoImpactPhotoImpact是友立（Ulead）咨询股份有限公司推出的图像处理软件，它功能强大，易于使用，在商业广告和Web图像应用方面有着突出的优势。对于非专业用户来说，PhotoImpact是一个很好的选择。5.COOL 3DC

25、OOL 3D是友立（Ulead）咨询股份有限公司推出的三维立体文字特效工具，它广泛地应用于平面设计和网页制作领域。COOL 3D主要用于制作文字的各种静态和动态特效。6.GIF AnimatorGIF Animator也是友立（Ulead）公司发布的一个动画GIF制作工具。它可以将多幅外部图像文件组合成动画，还具有滤镜功能、条幅文字效果等。可以使用GIF Animator创建和编辑网页动画文件。实训指导1【实训项目【实训项目1 1】打开一个HTML文件，查看其源代码。操作步骤参考:Step1:Step1:在我的电脑中,找到要查看的HTML文件,一般图标为。Step2:Step2:双击（或在文件

26、图标上单击右键，在弹出的快捷菜单中选择“打开”命令）打开该文件。Step3:Step3:执行“查看”“源代码”命令,HTML文件代码将出现在记事本中。【实实训训项项目目2 2】上网浏览知名网站，分析不同网站的布局风格、色彩运用等特点。综合练习综合练习1 11.选择题（1）浏览网页，这属于Internet所提供的（）服务。A.FTP服务 B.Email服务 C.Telnet 服务 D.WWW服务（2）Internet上的WWW服务器使用的主要协议是（）。A.FTP B.HTTP C.SMTP D.TelNet（3）将制作好的网页上传到Web服务器的过程中，使用了Internet所提供的（）服务。

27、A.FTP服务 B.Email服务 C.Telnet服务 D.WWW服务（4）优秀的网页设计必然服务于网站的（），就是说，什么样的网站，就应该有什么样的设计。A.主题 B.版式 C.Logo D.内容（5）下列软件中，（）主要用于网页动画制作。A.Dreamweaver B.Fireworks C.Flash D.Photoshop综合练习综合练习1 12.简答题（1）什么是网页？什么是主页？（2）常用的网页编辑工具有哪些？常用的网页图像与动画工具有哪些？（3）用图形说明网站设计制作的工作流程。（4）确定网站主题时一般应遵循哪些原则？（5）制作网站主要包括哪些步骤？3.操作题根据自己的兴趣，选择一个主题进行网站规划设计。