第一章 网页制作基础_第1页
第一章 网页制作基础_第2页
第一章 网页制作基础_第3页
第一章 网页制作基础_第4页
第一章 网页制作基础_第5页
已阅读5页,还剩27页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第一章

网页制作基础

制作网页是网络时代学习信息技术需要掌握的基本技能之一。制作的网页发布到网络服务器上,网络用户通过浏览器进行浏览,这就是因特网上应用最广泛的WWW服务。本章介绍WWW的概念、浏览器的使用以及网页中的基本元素,还介绍了主要的网页制作方法,以及本书重点讲述的MacromediaStudioMX2004的基础知识。1.1Web和浏览器1.1.1Web和网页

随着信息技术的飞速发展,网络正在从各个方面改变人们的生活,上网漫游、电子邮件、电子商务、网上聊天等已经成为许多人生活的重要部分。宽带网、无线网的逐渐普及,为网络的应用又开发出了极大的空间。在网络的海洋中,网页是提供信息最主要的手段。1.Web

Web是WorldWideWeb的简称,一般也称之为WWW或3W。

Web最大的特点是使用了超文本(Hypertext)。超文本可以是网页上指定的词或短语,也可以是一个包含通向一个Internet资源的超级链接的其它网页元素。点击网页里的超级链接元素时,所链接的目标就会出现在浏览器窗口中。当鼠标移动到页面上包含超级链接的地方时,鼠标会变成手状。

Web所包含的信息是双向的,一方面用户可以通过浏览网页获得所需的各种信息,另一方面普通用户也可以在Web服务器上存放、发布自己的网页,还可以进行自由讨论,实现完全的双向互动。

WWW采用C/S(客户机/服务器)工作模式。在客户端,用户使用浏览器向Web服务器发出浏览请求;服务器接到请求后,调用相应的网页内容,向客户端浏览器返回所请求的信息。

在浏览器和服务器之间应用HTTP(HyperTextTransferProtocol,超文本传输协议)作为网络应用层通信协议。HTTP协议是TCP/IP协议族的应用层协议之一,用于保证超文本文档在主机间的正确传输、确定应传输的内容以及各元素传输的顺序。2.URL为了确定被访问的站点及其网页的位置,浏览器运用了URL(UniformResourceLocation,统一资源定位器)技术。URL使客户端应用程序(如浏览器、邮件收发程序等)查询不同的信息资源时有了新的统一的地址标识方法,否则只能通过IP地址来定位资源。Internet上所有的资源都有一个唯一的URL地址,一般将URL地址称为网址。URL的完整格式如下:协议://主机名(或IP地址):端口号/路径名/文件名

协议又称为信息服务类型,是客户端浏览器访问各种服务器资源的方法,它定义了浏览器(客户)与被访问的主机(服务器)之间使用何种方式检索或传输信息。

URL中的协议有很多种,常用的有HTTP(超文本传输协议)、FTP(文件传输协议)、Telnet(远程登录协议)、Gopher(访问Gopher服务器)、News(访问网络新闻服务器)、WAIS(广域信息服务)、File(访问本地文件)。

URL中冒号后的双斜杠是分隔符,“//”和“/”之间的部分是服务器的主机名或IP地址。

主机名或IP地址后面的冒号后面是端口号,就是特定应用程序广泛使用的一个协议端口,用于识别从计算机主机申请的服务。

“/”后面是信息资源在服务器上的存放路径和文件名,用来指定用户所要获取文件的目录。它像一般文件系统中所见的那样,由文件所在的路径、文件名和扩展名组成。#anchor指向文档内的一个锚点。【例】几个URL的例子.

(1),用http协议和缺省端口号(80)访问微软公司服务器。这里没有指定路径和文件名,所以访问的结果是把一个缺省主页送给浏览器。

(3)http://:8001///uu-gna/index.html,从运行在端口号8001的服务器上访问index.html主页。

(2)/pub/ms-windows/winvn926.zip,用FTP协议访问北京大学FTP服务器上路径名为pub/ms-windows、文件名为winvn926.zip的文件。

(4)/Addressing/URL/5-BNF.html#httpaddress,访问

服务器上Addressing/URL目录下的5-BNF.html网页文件中锚点标识为httpaddress的地方。1.1.2浏览器

Web浏览器是浏览Internet资源的客户端软件。浏览器可以显示包含各种内容的网页,还可以通过URL链接到不同的服务器上获取广泛的网络资源。

目前在Windows环境下使用的浏览器主要有InternetExplorer、NetscapeNavigator、Mosaic等专业浏览器以及一些以上述浏览器为内核的专用浏览器。其中使用最广泛的是Microsoft出品的InternetExplorer6.0(简称IE6),后面将简单介绍IE6的使用方法。2.IE6的界面

连接网络,双击桌面上的InternetExplorer图标或单击状态栏上快速启动的IE图标可打开IE窗口。在地址栏输入网址,就可以浏览网页了,如图1.1所示是搜狐网的首页。IE6的窗口与其它Windows窗口类似,主要有以下几个部分:标题栏工具栏菜单栏地址栏状态栏浏览窗口1.13IE6.0的使用1、浏览网页

访问某个网站时,如果用户想终止网页调入,可以单击工具栏上的“停止”按钮。

前进和后退。单击“后退”按钮,可以退回到上一个浏览的网页,单击“后退”按钮旁的向下的箭头,可显示前面访问过的一定范围的网页,可以选择后退到哪一个页面。

刷新页面。当网页调入时显示不正常,或内容可能在浏览的过程中已经更新时(如新闻网站可能随时更新新闻内容),按“刷新”按钮或F5可以重新调入网页。全屏幕显示。打开菜单“查看”→“全屏”或按F11键可将浏览窗口改变为全屏幕显示

2、打开多个窗口用菜单栏上的“文件”→“新建”→“窗口”,会打开一个新的浏览器窗口。一般情况下,打开四、五个窗口可以充分利用系统资源,而且通过调整窗口的大小和位置还可以同时浏览。3、主页、临时文件和历史记录浏览器在打开时自动调入的网页称为“主页”,主页可以通过“工具”→“Internet选项”打开Internet选项对话框,在“常规”选项卡的“主页”栏设置.4、收藏夹的使用收藏夹可以收藏自己经常访问的和喜爱的网址。不论是在网上浏览或脱机浏览,可以随时把所浏览的网页地址加入到收藏夹中。使用菜单“收藏”→“添加到收藏夹”打开添加到收藏夹对话框。

长时间将许多网页收藏到收藏夹后,可能使收藏夹中的内容十分凌乱,可以使用菜单“收藏”→“整理收藏夹”打开收藏夹整理对话框,进行收藏夹中网页的移动、删除、改名及创建新文件夹等操作。5、关闭图片显示

在网络速度较慢时,不观看网页中的图片和其它多媒体内容可以得到更快的下载速度。通过“工具”→“Internet选项”打开Internet选项对话框,在“高级”选项卡中可以对浏览器的工作方式进行设置6、关闭自动完成功能

IE5可以自动完成URL输入、网页表单的密码输入等功能,在方便使用的同时,也容易造成秘密泄露,在多人使用的计算机上,应该把自动完成功能关闭。通过“工具”→“Internet选项”打开Internet选项对话框,在“内容”选项卡的“个人信息”部分单击“自动完成”按钮打开自动完成设置对话框。1.14网页中的元素1.文字文字是网页中最主要的元素。文字的大小、颜色、字体可以改变,有些文字还可以运动。2.图像

图像给网页增加了无穷的活力,图片分为说明内容的普通图片和作为宣传、点缀、背景等使用的装饰图片。GIF各式的图片可以具有动画效果。3.表单

网页中的表单允许浏览者进行交互操作。如输入文字内容(用户名、密码、文字评论等)、进行是否或多选一的选择、菜单操作、使用按钮提交内容等。4.Flash动画

Flash动画是近年来十分流行的网页元素,可以制作十分精美的动画效果,甚至出现了大量的FlashMTV、Flash游戏等。本书将简单介绍制作Flash动画的方法。5.表格表格在网页中扮演十分重要的角色,除了有序的显示数据外,主要用于网页版面设计。6.超级链接超级链接是网页中最重要的元素,也是因特网最吸引人的原因之一。文字、图像、Flash动画等都可以定义为超级链接,在网页中点击超级链接可以打开另外一个感兴趣的网页。7.视频、音频在网页中可以嵌入视频、音频,实现在线看电影、听音乐。网页还可以加入背景声音。8.POP窗口

POP窗口是在网页调入时同时打开的小的浏览器窗口,用来显示重要公告、广告等。POP窗口一般只有标题栏和浏览窗口,没有工具栏、地址栏、状态栏等。9.标题栏和状态栏文字标题栏和状态栏的文字是网页的组成部分,可以根据网页内容进行设置。标题栏显示网站名称、正文的标题等,状态栏则显示信息提示、当前时间、版权说明等。1.2网页制作的相关知识1.21HTML语言

HTML是目前制作网页时必须掌握的一种语言,是通过利用各种标记(TAG)来标识文档的结构以及标识超级链接的信息。使用HTML语言,可以方便地在网页中插入文字、表格、图片、声音等信息,可以定义大小、字体、对齐等排版格式,可以对网页的作者信息、文字编码等进行说明,还可以在HTML文档中通过特定的标记插入JAVA语言文件以及可以控制页面中各种对象的脚本程序。1、HTML网页

HTML网页通常是由三部分内容组成的:版本信息、网页标题(HEAD)和文档主体(BODY)。

下面就是网页结构的总体框架:

<!HTML网页版本信息说明><HTML><HEAD><!标题标记、属性及其内容></HEAD><BODY><!主体标记、属性及其内容></BODY></HTML>(1)版本信息版本信息位于HTML网页文件的第一行(2)HTML文件标记大部分网页文件都是以<HTML>标记开始的,在文件的结尾处又以</HTML>结束

(3)头部信息

HEAD标记之间是HTML文档的头部,用来标明当前文档的有关信息在HEAD标记之间,使用频率最高的标记就是TITLE,它用于定义显示在浏览器标题栏的文档标题。【例】给网页设置“励志学社”的文档标题,可在头部输入以下代码:<TITLE>励志学社</TITLE>(4)主体标记网页的主体是“<BODY>……</BODY>”标记对作用的范围

<BODY>标记用于定义HTML文档主体的开始,它能够设置网页的背景图像、背景颜色、链接颜色和网页边距等属性,其基本用法如下所示:<BODYBackground="URL"Bgclolr=ColorBgpropeties=FixedLeftmargin=nLink=ColorAlink=ColorText=ColorTopmargin=nVlink=Color>

Bgcolor为背景颜色。关于颜色的值后面会详细介绍。Text为不包含超级链接的文字颜色。

Link为超级链接文字的颜色。

Alink为正被点击的超级链接文字的颜色。

Leftmargin、Topmargin用于设置网页的左边距和上边框,它们是以像素为单位【例1】将网页的上边距和左边距分别设置为40和30个像素的宽度,使用白色文本、黑色背景,未访问的链接源采用蓝色,已访问的链接源标记为暗红色。<BODYBackground="moom.gif"Bgcolor="White"Bgproperties=FixedLeftmargin=30Link="Blue"Text="Black"Topmargin=40Vlink="Maroon">

Vlink为已经点击过的超级链接文字的颜色。

Background设置,如果设置了背景图片,图片会覆盖已经设置的颜色。

2、XML语言

XML(eXtensibleMarkupLanguage)被称作是下一代的网页标记语言,也是采用各种标记来形成网页的源代码。

XML中包括可扩展格式语言XSL(ExtensibleStyleLanguage)和可扩展链接语言XLL(ExtensibleLinkingLanguage)。1.22静态网页和动态网页静态网页指基本上全部使用HTML语言制作的网页,页面的内容是固定不变的。动态网页(DynamicHTML,DHTML)利用JavaScript,CSS(层叠样式表)及其它类似的语言如VBScript等与HTML进行有机的结合来使静态的HTML网页变成动态。1.23Web服务器端程序

专业的网站都是建立在使用数据库的基础上的,要将这些数据库变成可以通过浏览器显示和操作的Web页面,就需要编写服务器端的程序。用户向服务器传送提交的表单(个人信息、选择结果等)需要在服务器端进行记录、筛选等处理。大量的数据库查询、修改处理也需要服务器端程序的支持。目前常用的服务器端编程技术主要有CGI、ASP、PHP、JSP等,不同的技术需要不同的系统环境支持。1.3网页制作的基本方法1.31制作网页的基本步骤

1、确定网页的内容

2、设计网页的组织结构

3、资料的收集与整理

4、选择网页的设计方法

常用的网页制作工具有Frontpage、Dreamweaver等。服务器端的ASP程序可以使用VisualInterdev、UltraDEV等编辑。1.32制作网页时要注意的问题

1、网页的标题要简洁,明确。

2、在文本中要使用水平线,以分割不同部分。

3、对重点段落要强调显示。

4、网页中插入的图片要尽量的小。

5、图形要附加文字说明,以便关闭图像时查看。

6、网页中引用的

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论