网页制作教程-教案-

《网页制作教程-教案-》由会员分享，可在线阅读，更多相关《网页制作教程-教案-（46页珍藏版）》请在金锄头文库上搜索。

1、第第1 1章章 网页制作基础网页制作基础 新世纪高职高专规划教材新世纪高职高专规划教材随着互联网的迅猛发展，可以获取、交换和存错连接随着互联网的迅猛发展，可以获取、交换和存错连接 到网络上的各计算机上的信息。一个成功的网站有多个精到网络上的各计算机上的信息。一个成功的网站有多个精 美绚丽的网页组成，要制作出美观的网页，首先要学习网美绚丽的网页组成，要制作出美观的网页，首先要学习网 页制作的相关知识，例如制作网页的知识、制作网页元素页制作的相关知识，例如制作网页的知识、制作网页元素 的知识以及设计网页效果。的知识以及设计网页效果。uu 网页与网站基础网页与网站基础uu 网页的基本构成元素网页的基

2、本构成元素uu 网页制作常用语言网页制作常用语言uu 网页的设计构思网页的设计构思本章重点本章重点 为了理解网页的相关基础知识，给出计算为了理解网页的相关基础知识，给出计算 机软件技术的定义，本节将研究以下几个机软件技术的定义，本节将研究以下几个 问题：问题： 网页与网站的概念，网页与网站的概念， 网页的基本元素，网页的基本元素， 网页的类型。网页的类型。网页(web)是网站上的某一个页面，它是一个纯文本文件 ，是向访问者传递信息的载体，以超文本和超媒体为技术 ，采用HTML、CSS、XML等语言来描述组成页面的各种 元素，包括文字、图像、音乐等，并通过客户端浏览器进 行解析 。网站(Webs

3、ite)是指在互联网上，根据一定的规则，使用 HTML等工具制作的用于展示特定内容的相关网页集合， 它建立在网络基础之上，以计算机、网络和通信技术为依 托，通过一台或多台计算机向访问者提供服务。平时所说 的访问某格站点，实际上访问的是提供这种服务的一台或 多台计算机。 一个网页的基本元素主要包括文本、图像和超链接，其他 元素包括声音、动画、视频、表格、导航栏、表单等 。文本是网页上最重要的信息载体与交流工具，网页中的主 要信息一般都以文本形式为主。与图像网页元素相比，文 字虽然并不如图像那样容易被浏览者注意，但却能包含更 多的信息并更准确地表达信息的内容和含义。图像元素在网页中具有提供信息并展

4、示直观形象的作用。 用户可以在网页中使用GIF、JPEG和PNG等多种文件格式 的图像。目前应用最广泛的图像文件格式是GIF和JPEG两 种。动画在网页中的作用是有效地吸引访问者更 多的注意。用户在设计制作网页时可以通过 在页面中加入动画使页面更加活泼。声音是多媒体和视频网页重要的组成部分。用户在为网页 添加声音效果时应充分考虑其格式、文件大小、品质和用 途等因素。另外，不同的浏览器对声音文件的处理方法也 有所不同，彼此之间有可能并不兼容。视频文件的采用使网页效果更加精彩且富有动感。常见的 视频文件格式包括RM、MPEG、AVI和DivX等。超链接是从一个网页指向另一个目的端的链接，超链接的

5、目的端可以是网页，也可以是图片、电子邮件地址、文件 和程序等。当网页访问者单击页面中某个超链接时，将根 据自身的类型以不同的方式打开该目的端。例如，当超链 接的目的端是一个网页时，将会自动弹出窗口以显示网页 内容。表格在网页中用来控制页面信息的布局方式。其作用主要 有两个方面：一方面是使用行和列的形式布局文本和图像 以及其他列表化数据；另一方面是精确控制网页中各种元 素的显示位置。表单在网页中通常用来联系数据库并接受访问用户在浏览 器端输入的数据。表单的作用是收集用户在浏览器上输入 的联系信息、接受请求、反馈意见、设置签名以及登录信 息等。导航栏在网页中是一组超链接，其链接的目的端是网站中 重

6、要的页面。在网站中设置导航栏可以使访问者既快又容 易地浏览站点中的其他网页。表单在网页中通常用来联系数据库并接受访问用户在浏览 器端输入的数据。表单的作用是收集用户在浏览器上输入 的联系信息、接受请求、反馈意见、设置签名以及登录信 息等。网页中除了上面介绍的网页元素之外还包括悬停按钮、 Java特效、ActiveX等各种特效。用户在制作网页时可以使 用它们来点缀网页效果，使页面更加活泼有趣。目前，常见的网页有静态网页和动态网页两种。静态网页 通常以.htm、.html、.shtml、.xml等形式为后缀；动态 网页一般以.asp、.jsp、.php、.perl、.cgi等形式为后缀。网页所基于

7、的底层技术是HTML和HTTP，在过去，制作网 页都需要专门的技术人员来逐行编写代码，编写的文档称 为HTML文档。然而这些HTML文档类型的网页仅仅是静态 的网页 。随着网络和电子商务的快速发展，产生了许多网页设计新 技术，例如ASP技术、JSP技术等，采用这些技术编写的网 页文档称为ASP文档或JSP文档，这种文档类型的网页由于 采用了动态页面技术，所以拥有更好的交互性、安全性和 友好性 。IP地址和域名是学习网页制作必须了解的两个专用名次。 IP是英文Internet Protocol(网络之间互连的协议)的缩写， 中文简称为【网协】，也就是为计算机网络相互连接进行 通信而设计的协议。在

8、因特网中，它是能使连接到网上的 所有计算机网络实现相互通信的一套规则，规定了计算机 在因特网上进行通信时应当遵守的规则。任何厂家生产的 计算机系统，只要遵守 IP协议就可以与因特网互连互通 。IP地址具有唯一性，根据用户性质的不同，可以分为5 类。域名(Domain Name)，通俗的说就是网址，它是由一 串用点分隔的名字组成的Internet上某一台计算机或计算 机组的名称，用于在数据传输时标识计算机的电子方位( 有时也指地理位置)。在制作网页之前，首先要进行网页的设计与构思，主要包 括网页的布局、网页的配色、网设计原则，了解这些知识 ，是制作有别于其他网页的要点之一。网页布局能决定网页是否

9、美观。合理的布局，可以将页面 中的文字、图像等内容完美、直观地展现给访问者，同时 合理安排网页空间，优化网页的页面效果和下载速度。反 之，如果页面布局不合理，网页在浏览器中的显示将十分 糟糕，页面中的各个元素显示效果可能会重叠或丢失。因 此，在对网页进行布局设计时，应遵循对称平衡、异常平 衡、对比、凝视和空白等原则。常见的网页布局形式包括 ：型布局、T型布局、“三”型布局、对比布局和POP布局 等。 型结构网页顶部一般为网站标志、主菜单和广告条。下 方分为3个部分，左、右侧为链接、广告或其他内容，中 间部分为主题内容的布局，整体效果类似于符号。 型结构布局网页的优点是充分利用了页面的版面，可容

10、 纳的信息量大；缺点是页面可能因为大容量的信息而显得 拥挤，不够生动。T型结构布局的网页顶部一般是网站标志和广告 条，页面的左侧是主菜单，右侧为主要内容。T型结构布局的网页优点是页面结构清晰，内容 主次分明，是初学者最容易上手的布局方法。T 型布局网页的缺点是布局规格死板，如果不注意 细节上的色彩调整，很容易产生乏味感。“三”型结构布局的网页布局常见于国外的网站，这种网页 布局是在页面上横向的两条色块将整个网页划分为上、中 和下3个区域，色块中一般放置广告更新和版权提示等信 息。框架布局包括左右框架布局、上下框架布局和综合框架布 局几种形态。采用框架布局布局的网页可以通过某个框架 内的链接控制

11、另一个框架内的页面内容显示。POP引自于广告术语，指的是页面布局像一张宣传海报， 以一张精美的图片作为页面设计的中心 。Flash布局网页的整体就是一个Flash动画，画面一般制作 得比较绚丽活泼。是一种能迅速吸引访问者注意的新潮布 局方式 。网页的设计不仅涉及各种软件的操作技术，还关联到设计 者对生活的理解和体验。网页设计就是要把适合的信息传 达给适合的观众，遵循一些必要的原则。一个精美的网页必须拥有良好的整体统一效果，在设计过 程中一定要将页面的各个组成部分进行合理的布局，以避 免出现纷杂的凌乱情况。网页的连贯是指页面中各部分的相互关系。在网页设计过 程中，应充分利用各组成部分在内容上的内

12、在联系和表现 形式上的相互呼应，并使整个页面设计保持一致，实现视 觉上和心理上的连贯，使整个页面的各个部分融洽。网页的和谐是指整个页面符合美的法则，和谐不仅要看页 面的结构形式，而且要看作品所形成的视觉效果(颜色搭 配、形式等)能否与人的视觉感受形成一种有效沟通，产 生心灵的共鸣，这是网页能够设计成功的关键因素之一。 良好的下载速度是一个优秀网页所必备的条件，在网络速 度相当缓慢的情况下，设计者应该为节约访问者的时间而 精心设计。即使不能让每个页面都保持比较快的下载速度 ，至少应该确保首页和主要内容页面的下载要尽可能地快 。在目前的技术条件下，保持网页的优质下载速度的主要方 法是尽量让页面简洁

13、，避免使用大量的图片，以及取消自 动下载的音乐和媒体素材。网页的主要功能就是向访问者提供信息，如果网页的链接 出现错误，访问者就无法获取自己所需的资料，因此网页 链接无误，是网页设计的最基本原则。 不同的浏览器和分辨率，对网页的显示效果会由比较大的 区别。目前广泛应用的浏览器由微软的IE、网景的 Navigator和Mozilla的Firefox3种。在设计网页时，要充分 考虑不同浏览器的显示要求，始终从用户的实际情况出发 ，完成网页设计后，可以使用不同的浏览器先测试一下， 没有问题后再进行发布。在制作网页之前，首先要进行网页的设计与构思，主要包 括网页的主题、网页的命名、网站标志、色彩搭配和

14、字体 等要素。网页的主题也就速是网页的题材。在构思网页主题时，尽 量精准，范围不宜过大，内容要尽量提炼精要。最好选择 自己了解的主题内容，这样在制作过程中更容易收集到更 多的网页素材与内容。网页的名称应该是网页内容的概括，访问 者通过网页的名称就能够了解网页包含的 内容题材。在设计网页名称的时候，可以 结合网页的主题，尽量简短精要。网页名 称字数不宜过多，以便于其他站点的链接 。一个网页给访问者的第一印象往往是网页颜色的视觉冲击 ，因此，网页色彩选取得当与否是网站能否成功的重要因 素，不同颜色的搭配不仅会产生不同的视觉效果，还会影 响浏览者的情绪。通常适合网页标准的颜色有黄/橙色、 蓝色、黑/

15、灰色三大系。另外，网页中的标准色彩不宜过 多，太多的颜色会使人眼花缭乱。标准色彩主要应用于网 站的标志与字体颜色。网页中标准字体指的是用于网站标志、主菜单和标题的特 有字体。默认的字体为宋体。用户在制作网页的过程中为 了体现网页的特有风格，也可以根据需要选择一些特殊字 体，如华文行楷、方正楷体、隶书和华文新魏等。在制作网页的过程中，要遵循一定的顺序才能协调分配整 个制作过程的资源与进度。网页的制作流程主要如下。建立目标规划。设计页面版式。收集与加工网页制作素材。编辑网页内容。测试并发布网页。随时网络技术的发展，对网络安全意识的提高，网页设计 语言发展迅猛。目前在网页设计过程中，常用的语言有 A

16、SP、ASP.NET、JSP和PHP等。是Active Server Page的缩写，意为“动态服务器页面”。 ASP是微软公司开发的代替CGI脚本程序的一种应用,它可 以与数据库和其它程序进行交互，是一种简单、方便的编 程工具。ASP的网页文件的格式是.asp，现在常用于各种 动态网站中。ASP安全性低，开发门槛低，源代码是暴露的，越来越多 的人会用ASP写网站后台程序，同时网上也有大量的ASP 的源码提供下载。 是微软公司为了抗衡jsp和php而推出的新的程序 语言系统，安全方面可以达到一个新的高度。网站开发好 了以后可以通过编译，使网站的源码编译成中间代码il发 布到虚拟空间或自己服务器里面，这样看不到了源码，自 然安全方面也就更高一点了，同时也保障了开发人员的版 权问题。JSP(Java Server Pages)是由Sun Microsystems公司倡导、 许多公司参与一起建立的一种动态网页技术标准。