当前位置:首页 >> 互联网 >> 网页制作————简介和超链接使用

网页制作————简介和超链接使用


第 一章 网页简介和超链接

张新

网页程序设计基础

课程信息

目标
了解互联网 了解 HTML 掌握 HTML 文档结构和标记的使用

在 HTML 文档中使用超链接 使用 <META> 标记 在 HTML 文档中使用特殊字符

?网页是利用超文本标记语言

HTML(HyperText Markup Languge)编写 的,存放在Internet/Intranet上的Web 服务器中,供访问者使用浏览器来阅读。 ?利用HTML语言编写出来的网页又称为超 文本,即网页中包含有文本、图形、声 音、图像和超链接(HyperLink)等多媒体 信息。
? 通常我们看到的网页,都是以 .htm 或 html 后 缀结尾的文件,称 .HTML 文件。

4

? 网页是在浏览因特网时看到的一个个的 页面;
? 文字、图片和动画等

? 网站是指存放在网络服务器上的完整信息的
集合体:它是由一个或多个网页,按照一定 的逻辑顺序,以超链接(A)方式连接在一 起,形成的一组描述完整信息的整体。

? 首页(主页):构成网站的第一页,一般起目 录、导航作用,所以又叫导航页。
5

主页

个人简历

我的相册

作品展示

心情随笔

家 庭 相 册

个 人 相 册

网 站 作 品

平 面 作 品

涂 鸦 作 品

6

互联网简介

?互联网是世界上最大的计算机网络 ?互联网被称为网络的网络 ?万维网是互联网中的一个子网 ?WWW 包含分散在世界范围内的众多Web 服务器 (World Wide Web)

7

互联网
万维网

网络

8

HTTP 协议 IE浏览器
http://www.google.com

URL 地址

网页

9 9

www
?协议:访问WWW上的资源必须遵循超文本传 输协议HyperText Transfer Protocol (HTTP) ?地址:统一资源定位符Uniform Resource Locators(URL)用来标识Web上的页面和资 源 ?HTML:超文本标记语言HyperText Markup Language用于创建可以通过Web访问的文档
10

WWW地址
?URL 相当于一个文件名在网络范围的扩展 ?URL的格式:
? <URL的访问方式>://<主机>:<端口>/<路径> 可省略,默认端口80, 文件指向主页 存放资源的主机在因特网中的域名 ftp —— 文件传送协议 FTP http —— 超文本传送协议 HTTP ? 例如:http://www.cugb.edu.cn:80/index.action 11

?流行的浏览器软件包括: ? Internet Explorer(IE) ? Navigator ? Firefox、腾讯TT、360安全浏览器、搜狗 等

12

B/S工作原理
?工作原理:基于B/S(Browser/Server,浏览器/ 服务器)模式
Http请求

因特网

Http响应
Server

静态网页技术
静态网页技术

? 所谓静态是指网页的内容是事先设计好的, 不会根据实际情况发生变化

? HTML语言(HpyerText Markup Language, 超文本标记语言) ? 文件扩展名:.htm 或 .html
? 制作工具 ? Microsoft FrontPage ? Macromedia Dreamweaver ? Text

动态网页技术
?动态网页技术
? 网页的内容不再是固定不变的,而会根据实际情 况发生动态变化 ? 网页里的内容很大一部分是访问数据库得到的, 用户输入的信息也将被保存到数据库中 ? 与用户的交互性大大加强

? 分类
? Server端动态网页技术 ? Client端动态网页技术

Server端动态网页技术 ? Web服务器不只是简单地将用 户请求的文件发送给Client端, 而是先执行相应的脚本程序 (Script),通常执行的结果 为HTML格式,然后将执行结 果返回给浏览器进行显示 ? 用户能够看到的只是HTML文 件,而看不到脚本程序的源代 码

Server端动态网页技术 ? CGI(Common Gateway Interface,通用网关接口) ? 脚本程序文件扩展名:.cgi ? 典型应用实例:检查用户身份

1

浏览器

2 7

3 6

4

用户 8

DB
5

Server

CGI script

?Server端动态网页技术
? 在HTML代码中嵌入脚本程序代码段,Web服务 器同样先将脚本程序代码段执行,转变为HTML 代码后,返回给浏览器显示
? ASP(Active Server Pages ,动态服务器主页),由 Microsoft公司推出,以Visual Basic为脚本语言,文件 扩展名为.asp ? ASP.net,是微软新一代动态服务器主页,以任何支 持.net技术的语言为脚本,文件扩展名为aspx ? PHP,采用了类似于C语言的脚本语言,扩展名 为.php ? JSP(Java Server Pages),以Java为脚本语言,扩 展名为.jsp

Server端动态网页技术

? 开发工具
? Visual InterDev(CGI/ASP) ? Visual Studio.net(ASP.net)

? Dreamweaver UltraDev (CGI/ASP/PHP/JSP)
? Dreamweaver (CGI/ASP/PHP/JSP) ? 文本编辑器:UltraEdit,Text

Client端动态网页技术

? JavaScript ? Plug-in(各类插件)
媒体工具类

? Adobe Photoshop / Macromedia Fireworks ? Macromedia Flash
Java语言(Java Applet)

? 可移植性强,可以在不改动源程序 的前提下让应用程序运行于不同的 操作系统平台上,适用于网络环境

基于web的网络应用
? 电子商务应用
? 电子商务(electronic commerce)是指通过Internet进行 的各种商务活动,它覆盖与商务活动有关的所有方面 ? 电子商务是商务活动与信息技术相结合的产物,它是 传统商务领域的一场巨大变革 ? 电子商务代表着一种新的产品生产、销售与企业运营 管理方式

? 电子商务的类型
? 企业与企业(business to business,B2B) ? 企业与消费者(business to consumer,B2C) ? 消费者与消费者(consumer to consumer,C2C)
21

? 电子政务(electronic government)
? 通过应用信息技术,实现全部政府业务处理的电子化, 达到高效、方便、透明地处理政府机关之间,政府与 企业、公众的全部业务服务的目的

? 电子政务的类型
? 政府部门之间的电子政务(government-to-government, G-to-G) ? 政府对企业的电子政务(government-to-business,Gto-B) ? 政府对公众的电子政务(government-to-citizen,G-to-C)

22

?远程教育应用
? 通过数字化音频、视频技术,实现文字、图像 和声音的同步传输,有效解决教师与学生之间 的距离与时间的限制,最大限度地共享优质的 师资、授课环境、实验环境等资源,实现交互 式教学 ? 远程教育培训服务主要包括:
? 教育门户网站、教育频道、远程教育培训平台提供 商、远程教育培训内容商等

23

? 博客应用
? 博客(blog)是以文章的形式在Internet上发表和信息共享 ? 博客在技术上属于网络共享空间,在形式上属于个人 Internet出版, ? 博客是人们在Internet上思想交流的一种新方式

? 博客的主要类型
? 以个人的记事、表达与交流为主的博客,即个人博客 ? 由共同关心某类问题的人或团体构成的博客社区,例 如技术研讨、新闻时事等

24

?播客与网络电视应用
? 播客是基于Internet的数字广播技术。初期的播 客借助一种iPodder的软件与一些便携播放器相 结合 ? 播客录制网络语音广播节目,并传输到网络中 共享给其他用户,用户可将广播节目下载到自 己的播放器中收听

25

?搜索引擎应用
? 搜索引擎(search engineer)是Internet中的一种 Web服务器,它主动搜索其他Web服务器中的 信息并索引,将索引内容存储在可供查询的数 据库中
? 包含Internet中各种信息的庞大数据库,它必须不断 更新自己的数据库,以便反映Internet中的最新信息

? 常用的搜索引擎
? Google搜索引擎:http://www.google.cn/ ? 百度搜索引擎:httP://www.baidu.com/

? 搜索关键字、高级搜索
26

基于P2P的网络应用
? P2P(peer-to-peer)
? 是一种客户结点之间以对等的方式,通过直接交换信 息达到共享计算机资源和服务的目的 ? P2P网络淡化服务提供者与服务使用者的界限 ,每个 结点既是网络服务的使用者,又可以向其他客户提供 资源和服务

? 即时通信P2P软件
? ? ? ? QQ PoPo MSN Messenger Google Talk

流媒体P2P软件
PPLive TvAnts

27

28

29

30

1 .HTML语言
?HTML语言的发展:
? 80年代末在SGML的基础上产生
? 1994年,W3C(World Wide Web Consortium)组织 对HTML进行了标准化工作 ? 自1990年问世以来,已发行4个版本:HTML 1.0、HTML 2.0、HTML 3.0、HTML 4.0、 HTML 5.0

? HTML标准的网站: http://www.w3c.org/pub/www

● HyperText Markup Language—超文本标记语言 – 制作Web页面的基本编程语言

– 一系列标记的集合 – 用HTML编写的超文本文档称为HTML文档。
● HTML文档的编写方法

– 手工直接编写:记事本、EditPlus等,存成.htm 或.html文件 – 可视化编辑器:Dreamweaver、 Frontpage等 – 由Web 服务器实时动态地生成:IIS、Tomcat等

1. HTML语言
?HTML标签及其属性
?

? 标记:是HTML语言的基本组成部分,要用<>括起来。

? ● 双边标记:头标与尾标。如: <title>…</title> <html>…</html> 。 ? ● 单边标记:只有头标。如:<hr>
标记属性:对标记的状态进行描述,出现在标记的< >内, 属性值用“”或者’’引起来。常见共有属性: ?color 、bgcolor、background、size、width、height、align、 src。

HTML 开发
? HTML 标记用于标记 HTML 文档的开始和结束
<HTML> . . . </HTML>

? HTML 标记的格式组成:
<ELEMENT ATTRIBUTE = value>

?值 - 分配给属性的内容 ?属性 - 描述标记 ?元素 - 标识标记
标记 : 人 ( 事物 ) 属性:性别、头发、职业…… 值:女性、长头发、工程师…… 男性、黄头发、培训师……34

HTML 作用
? 使用 HTML 标记或元素,可以:
– 控制页面和内容的外观 – 发布联机文档 – 使用 HTML 文档中插入的链接检索联机信息 – 创建联机表单,收集用户的信息、执行事务 等等 – 插入动画 – 开发帮助文件

35

HTML 语法示例:
<HTML> <HEAD> <TITLE>欢迎学习 HTML</TITLE> </HEAD> <BODY> <H3>我的第一个 HTML 文档</H3> </BODY> </HTML>

运行结果

36

标记
<HTML> <HEAD> <TITLE>欢迎使用 HTML</TITLE> </HEAD> <BODY BGCOLOR = lavender> <P>这会是一种很有趣的体验 <P> 另一个段落元素 </BODY> </HTML>

运行结果
37

补充:关于颜色
? 颜色值是一个关键字或一个RGB格式的数 字。 ? aqua,black, blue,fuchsia, gray, green, lime,maroon,navy,olive, purple,red,silver,teal,white,yellow

38

色彩的概述
色彩具有五颜六色,千变万化的特点。平时我们看到的白 光,经过分析在色带上可以看到,事实上包括了7种颜 色。色彩有冷、暖之分,其巧妙运用会达到意想不到的 效果。 红色代表:热情、活泼、热闹、温暖、幸福 橙色代表:光明、华丽、兴奋、快乐。 黄色代表:明朗、愉快、高贵、希望 绿色代表:平静、和平、柔和、安静、青春 蓝色代表:永恒、沉静、理智、诚实 紫色代表:高贵、魅力、自傲 白色代表:纯洁、朴实、神圣 灰色代表:消极、谦虚、平凡、中庸、寂寞 黑色代表:坚实、严肃、粗莽

? 在 HTML 中对于颜色的定义可以用6位 十六进制数。 ? 电脑屏幕的色彩是由rgb(红、绿、蓝) 三种色光所合成的,通过调整这三个基 色就可以调配出其它的颜色。 – 每2位数代表一种颜色的浓度,三种 颜色的顺序为红、绿、蓝,00代表 颜色浓度最小,FF代表颜色浓度最 大。 ? #000000代表纯黑、#FFFFFF代表纯 白、
40

d
? 图中所示是部分颜色的RGB代码:
例:为页面设置背景色:

<body bgcolor=“#FFFF33”>

41

HTML 文档的结构
基本结构:
<HTML> <HEAD> <TITLE>欢迎进入 HTML 世界</TITLE> </HEAD> <BODY> <P>这会是一种很有趣的体验</P> </BODY> </HTML>

?HTML 部分 ?文档头部分 ?正文部分

运行结果

42

段落标记
<HTML> <HEAD> <TITLE>欢迎使用 HTML</TITLE> </HEAD> <BODY BGCOLOR = lavender> <P>这会是一种很有趣的体验 <P> 另一个段落元素 </BODY> </HTML>

运行结果
43

换行标记
<HTML> <HEAD> <TITLE>欢迎使用 HTML</TITLE> </HEAD> <BODY BGCOLOR = lavender> <P>这会是一种很有趣的<BR>体验 <P> 另一个段落元素 </BODY> </HTML>

运行结果
44

使用对齐属性
<HTML> <HEAD> Left:左对齐 Center:居中 Right:右对齐

<TITLE>学习HTML</TITLE> </HEAD> 右对齐 <BODY BGCOLOR=lavender> <P align = right>这会是一种很有趣的体验</P> </BODY> </HTML>

运行结果
45

使用META标记 2-1
1. 提供关于网页的信息
?<META name=“Author” content=“Graham Brown”> ?<META name=“KEYWORDS” content=“...”> ?<META name="DESCRIPTION" content="...">
对网页的描述

2.应用:关键词生成响应

根据关键词生成响应 获得文档的作者名称

<META http-equiv="Expires" content="Mon, 15 Sep 2003 14:25:27 GMT">
设置网页的到期值:响应

Expires: Mon, 15 Sep 2003 14:25:27 GMT

46

使用META标记 2-2
3.自动刷新页面
<META http-equiv="Refresh" content="10; url=http://yourlink">

应用:如网上实时新闻报道。

4.使用网页所使用的编码
<META http-equiv="Content-Type" content="text/html; charset=gb2312">

应用:如在不同浏览器上正确显示中文。
47

在HTML文档中使用特殊字符
…… <TD width="100%" height=18><FONT size=-1> Userid &nbsp;&nbsp;&nbsp;用户名/口令。</FONT></TD> …… ??200&gt;189?? ??20&lt;189?? >号 <号

??&quot;风驰电掣&quot??
??x&gty;&amp;x=120?? ??&copy;CopyRight 版权所有??

“号
与符号

??&reg;APTECH??

? ?

版权符号

注册商标

48

超链接简介 2-1
职位
1、职

位:

关于可申请的职位??

2、培训资源:

主 页 (落 锚 点)

本学院美术学位的培训资源 请单击此处查看视频??

培训资源

3、联

盟:

我们有许多联盟??

请单击此处 查看视频

联盟
49

超链接简介 2-2
链接类型
?内部链接
1、到同一网站内 的其它网页的链 接 2、到同一文档内 的其他部分的链 接
----------------

------

------

-----------

------

------

?外部链接
到其他网站或 服务器上的页 面的链接。

------

Web站点1

Web站点2
50

创建超链接
要创建超链接,必须指定两个部分
?要链接的文件的完整地址或 URL
http://www.sina.com.cn C:\internet\index.html service/index.html 绝对URL 文件的完整地址 相对URL

热点
?热点可以是一行文字甚至一个图像

51

超链接:锚记A
语法为:
<A HREF = protocol://host.domain:port/path/filename> Hypertext </A>
?Protocol 是协议类型
? Host.domain http–超文本传输协议 gopher–搜索文件 telnet–打开 telnet会话 ftp–文件传输协议 mailto–发送电子邮件

是服务器的 Internet 地址 ?Port 是目标服务器的端口号 ?Hypertext 是用户必须单击才能激活链接的文本或图像 eg. <A HREF = Doc2.html>文档2</A> <A HREF=" http://www.cugb.edu.cn:80/index.action ">互联网</A> <A HREF=" http://www.cugb.edu.cn">互联网</A> <A HREF=" http://www.cugb.edu.cn/EnglishWeb/index.html ">互 联网</A> 52

链接到其他文档
<HTML> 码头 <HEAD> <TITLE>使用链接</TITLE> </HEAD> <BODY> <BR><BR> <P>本页的所有内容都讲述关于如何创建到文档的链接 <A HREF = Doc2.html>单击此处查看文档2</A> </BODY> </HTML>

<HTML> 船 <HEAD> <TITLE>文档2</TITLE> </HEAD> <BODY> <BR><BR> <P>这是文档2。单击文档1中的超链接后将显示本页。 <BR><BR> <A HREF= Doc1.html>返回</A> </BODY> </HTML>

53

链接到同一文档的各个部分
单击
<HTML> <HEAD><TITLE>使用链接</TITLE></HEAD> <BODY> <A HREF = #Internet>互联网</A><BR><BR> <A HREF = #HTML>HTML简介</A><BR><BR> <A HREF = #Consistency> 多 样 化 和 统 一 性 </A><BR><BR> <A name = Internet>互联网</A><BR> <P>互联网是网络的网络。也就是说,计算机网络可以跨越国家甚
至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输 协议绑定在一起。</P>

它不是标准通用标记语言 (SGML) 的子集,但与它有着某种程度上的关联。 SGML是一种文档格式语言表示方法。</P>

<A name = HTML>HTML简介</A><BR> <P>超文本标记语言是 Web用来创建和识别文档的标准语言。虽然 <A name = Consistency>多样性和统一性</A><BR> <P>万事万物都离不开多样性和统一性这样一条基本准则。也就是

说,所有的事物都可以融合成一个整体,同时,又保持自己独特的与众不同 的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及 其他设计元素应在站点的每个部分都保持一致。 </P>

<BR><BR><BR><BR><BR><BR> </BODY> </HTML>
54

链接到另一文档中某个特定位置
单击 <HTML> <HEAD> <TITLE>主文档</TITLE> </HEAD> <BODY> <A HREF= 副文档 .html#Internet> 互联网 </A> <BR> <BR> <A HREF= 副 文 档 .html#HTML>HTML 简 介 </A> <BR> <BR> <A HREF= 副 文 档 .html#Consistency> 多 样性和统一性</A> </BODY> </HTML>
55

链接到另一文档中某个特定位置
单击
<HTML> <HEAD> <TITLE>副文档</TITLE> </HEAD> <BODY> <A name = Internet>互联网</A><BR> <P>互联网是网络的网络。也就是说,计算机网络可以跨越 国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以 通过TCP/IP传输协议绑定在一起。</P> <A name = HTML>HTML简介</A><BR> <P>超文本标记语言是 Web用来创建和识别文档的标准语言。 虽然它不是标准通用标记语言 (SGML) 的子集,但与它有着某种程 度上的关联。SGML是一种文档格式语言表示方法。</P> <A name = Consistency>多样性和统一性</A><BR> <P>万事万物都离不开多样性和统一性这样一条基本准则。 也就是说,所有的事物都可以融合成一个整体,同时,又保持自己 独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜 色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持 一致。 </P> <BR><BR><BR><BR><BR><BR> </BODY> </HTML>

56

链接到其它网站
<HTML> <HEAD> <TITLE>使用链接</TITLE> </HEAD> <BODY> <BR><BR> <P>本页的所有内容讲述链接到其它网站 <A HREF="http://www.cugb.edu.cn">地大 网</A> </BODY> </HTML>

57

使用电子邮件
如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发 送电子邮件,则可以在网页内包含发送电子邮件的功能。实现此功能 所需的全部工作就是在链接标记中插入mailto值。 <A HREF="mailto:thisperson@mymail.com">我的电子邮件</A>

58

在网站上导航

? 线性布局 ? 分层布局 ? 图像映射

59

线性布局
?遵循线性结构 ?页面之间顺序链接
---------------------------------------------------------------------------------------------

60

分层布局
?主页具有到其他多个页面的链接 ?每个页面都有一个到主页的链接
-------------------------------------------------------------------------

-------------------------

-------------------------

-------------------------

61

总结
? 互联网是网络的网络,万维网 (WWW) 是互 联网的一个子集。 ? 全世界所有的计算机都可以通过 TCP/IP 协议绑定在一起。 ? HTML命令称为标记,用于控制HTML文档的 内容和外观。 ? META元素提供关于网页的信息。 ? 掌握使用HTML标记创建超链接。 ? 了解网站的各种导航方式。
62

网页程序设计基础


赞助商链接
更多相关文档:

10.7网页超链接的制作

交互式按钮的超链接制作要求在框架网页中演示操作。 老师可以提问学生: 演示者 ...教师讲解:由生活中的书签引入,介绍“书签链接”的概念,然后再演示如何操作。 ...

《网页超链接》教学设计

《网页的超链接》教学设计 教材分析 ?创建超链接这部分内容在《网页制作》这一...,页面“学校简介.htm”是链接??, 下面我们具体来看是如何实现跳转的:(操作)...

1.3 网页超级链接的使用

课时 §1.3 超级链接使用授课人 授课时间 超级链接简介及组成 创建文本超级...二是对于一个网站设计者而言,它就是一个文件夹 ,把你所设计的所有网页,所用...

教科版信息技术基础必修《制作网站——网页超链接的制...

教科版信息技术基础必修《制作网站——网页超链接制作》1课时教案附教学反思_...教师讲解:由生活中的书签引入,介绍“书签链接”的概念,然后再演示如何操作。 ...

DreamWeaver网页制作公开课教案

DreamWeaver网页制作公开课教案 - 公开课教案 授课章节 名称 课题 序号 第四单元 《DreamWeaver 网页制作——超链接使用》 授课 时间 2006-4-4 星期二 第三节...

第十二课设置网页链接——制作“风味小吃”网页

1、设置网页超链接 2、设置网页动态效果及网页过渡效果 3、使用交互式按钮。...根据收集的素材, 制作介绍 “火 学生做题 腿鸡杂饵丝”等其他特色小吃的 网页...

网页制作选择判断

网页制作选择判断 一、选择题 1.小张使用Frontpage制作了一个含有表格的网页,...A.在图片上只能建立链接到网页的超链接 片上只能建立一个超链接 C.在图片上...

超级链接的创建和管理

河南工业大学 《大学计算机基础及网页制作》实验报告专业班级:学号:姓名: 实验五...(11)设置超链接。 ①为第 1 条水平线下的 “个人简介” 、 “我的学校”...

第一章 HTML简介

§1-3 网页设计基本概念 这里介绍几个基本的网页设计概念,超链接、统一资源定位...在浏览网页时, 如果使用鼠标单击超链接,那么就会跳转到超链接所指向的资源,就...

《Dreamweaver中超链接的应用》教案_图文

课 程 Dreamweaver 网页制作 授课人 603 机房 Dreamweaver 中超链接的应用 ⑴ 知识目标: 熟练掌握使用 Dreamweaver 软件对网页中各种超链接的设置 应用的操作方法...

更多相关标签:
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com