网页制作-简介和超链接使用_第1页
网页制作-简介和超链接使用_第2页
网页制作-简介和超链接使用_第3页
网页制作-简介和超链接使用_第4页
网页制作-简介和超链接使用_第5页
已阅读5页,还剩58页未读 继续免费阅读

下载本文档

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

文档简介

网页程序设计基础第一章

网页简介和超链接

张新课程信息目标掌握HTML文档结构和标记的使用了解互联网了解HTML在HTML文档中使用超链接在HTML文档中使用特殊字符使用<META>标记4网页是利用超文本标记语言HTML(HyperTextMarkupLanguge)编写的,存放在Internet/Intranet上的Web服务器中,供访问者使用浏览器来阅读。利用HTML语言编写出来的网页又称为超文本,即网页中包含有文本、图形、声音、图像和超链接(HyperLink)等多媒体信息。通常我们看到的网页,都是以

.htm

html

后缀结尾的文件,称

.HTML

文件。5网页是在浏览因特网时看到的一个个的页面;文字、图片和动画等网站是指存放在网络服务器上的完整信息的集合体:它是由一个或多个网页,按照一定的逻辑顺序,以超链接(A)方式连接在一起,形成的一组描述完整信息的整体。首页(主页):构成网站的第一页,一般起目录、导航作用,所以又叫导航页。6主页个人简历我的相册作品展示家庭相册心情随笔个人相册网站作品平面作品涂鸦作品7互联网简介互联网是世界上最大的计算机网络互联网被称为网络的网络万维网是互联网中的一个子网WWW

包含分散在世界范围内的众多Web服务器(WorldWideWeb)8互联网万维网网络99IE浏览器URL地址网页HTTP协议10协议:访问WWW上的资源必须遵循超文本传输协议HyperTextTransferProtocol(HTTP)地址:统一资源定位符UniformResourceLocators(URL)用来标识Web上的页面和资源HTML:超文本标记语言HyperTextMarkupLanguage用于创建可以通过Web访问的文档www11WWW地址URL相当于一个文件名在网络范围的扩展URL的格式:<URL的访问方式>://<主机>:<端口>/<路径>例如::80/index.actionftp——文件传送协议FTPhttp——超文本传送协议HTTP存放资源的主机在因特网中的域名可省略,默认端口80,文件指向主页12流行的浏览器软件包括:InternetExplorer(IE)NavigatorFirefox、腾讯TT、360安全浏览器、搜狗等B/S工作原理工作原理:基于B/S(Browser/Server,浏览器/服务器)模式Server因特网Http请求Http响应静态网页技术静态网页技术所谓静态是指网页的内容是事先设计好的,不会根据实际情况发生变化HTML语言(HpyerTextMarkupLanguage,超文本标记语言)文件扩展名:.htm或.html制作工具MicrosoftFrontPageMacromediaDreamweaverText动态网页技术动态网页技术网页的内容不再是固定不变的,而会根据实际情况发生动态变化网页里的内容很大一部分是访问数据库得到的,用户输入的信息也将被保存到数据库中与用户的交互性大大加强分类Server端动态网页技术Client端动态网页技术Server端动态网页技术Web服务器不只是简单地将用户请求的文件发送给Client端,而是先执行相应的脚本程序(Script),通常执行的结果为HTML格式,然后将执行结果返回给浏览器进行显示用户能够看到的只是HTML文件,而看不到脚本程序的源代码Server端动态网页技术CGI(CommonGatewayInterface,通用网关接口)脚本程序文件扩展名:.cgi典型应用实例:检查用户身份Server端动态网页技术在HTML代码中嵌入脚本程序代码段,Web服务器同样先将脚本程序代码段执行,转变为HTML代码后,返回给浏览器显示ASP(ActiveServerPages,动态服务器主页),由Microsoft公司推出,以VisualBasic为脚本语言,文件扩展名为.aspASP.net,是微软新一代动态服务器主页,以任何支持.net技术的语言为脚本,文件扩展名为aspxPHP,采用了类似于C语言的脚本语言,扩展名为.phpJSP(JavaServerPages),以Java为脚本语言,扩展名为.jspServer端动态网页技术开发工具VisualInterDev(CGI/ASP)VisualS(ASP.net)DreamweaverUltraDev(CGI/ASP/PHP/JSP)Dreamweaver

(CGI/ASP/PHP/JSP)文本编辑器:UltraEdit,TextClient端动态网页技术JavaScriptPlug-in(各类插件)媒体工具类AdobePhotoshop/MacromediaFireworksMacromediaFlashJava语言(JavaApplet)可移植性强,可以在不改动源程序的前提下让应用程序运行于不同的操作系统平台上,适用于网络环境21基于web的网络应用电子商务应用电子商务(electroniccommerce)是指通过Internet进行的各种商务活动,它覆盖与商务活动有关的所有方面电子商务是商务活动与信息技术相结合的产物,它是传统商务领域的一场巨大变革电子商务代表着一种新的产品生产、销售与企业运营管理方式电子商务的类型企业与企业(businesstobusiness,B2B)企业与消费者(businesstoconsumer,B2C)消费者与消费者(consumertoconsumer,C2C)22电子政务(electronicgovernment)通过应用信息技术,实现全部政府业务处理的电子化,达到高效、方便、透明地处理政府机关之间,政府与企业、公众的全部业务服务的目的电子政务的类型政府部门之间的电子政务(government-to-government,G-to-G)政府对企业的电子政务(government-to-business,G-to-B)政府对公众的电子政务(government-to-citizen,G-to-C)23远程教育应用通过数字化音频、视频技术,实现文字、图像和声音的同步传输,有效解决教师与学生之间的距离与时间的限制,最大限度地共享优质的师资、授课环境、实验环境等资源,实现交互式教学远程教育培训服务主要包括:教育门户网站、教育频道、远程教育培训平台提供商、远程教育培训内容商等24博客应用博客(blog)是以文章的形式在Internet上发表和信息共享博客在技术上属于网络共享空间,在形式上属于个人Internet出版,博客是人们在Internet上思想交流的一种新方式博客的主要类型以个人的记事、表达与交流为主的博客,即个人博客由共同关心某类问题的人或团体构成的博客社区,例如技术研讨、新闻时事等25播客与网络电视应用播客是基于Internet的数字广播技术。初期的播客借助一种iPodder的软件与一些便携播放器相结合播客录制网络语音广播节目,并传输到网络中共享给其他用户,用户可将广播节目下载到自己的播放器中收听26搜索引擎应用搜索引擎(searchengineer)是Internet中的一种Web服务器,它主动搜索其他Web服务器中的信息并索引,将索引内容存储在可供查询的数据库中包含Internet中各种信息的庞大数据库,它必须不断更新自己的数据库,以便反映Internet中的最新信息常用的搜索引擎Google搜索引擎:/百度搜索引擎:httP:///搜索关键字、高级搜索27基于P2P的网络应用P2P(peer-to-peer)是一种客户结点之间以对等的方式,通过直接交换信息达到共享计算机资源和服务的目的P2P网络淡化服务提供者与服务使用者的界限,每个结点既是网络服务的使用者,又可以向其他客户提供资源和服务即时通信P2P软件流媒体P2P软件QQPPLivePoPoTvAntsMSNMessengerGoogleTalk2829301.HTML语言HTML语言的发展:80年代末在SGML的基础上产生1994年,W3C(WorldWideWebConsortium)组织对HTML进行了标准化工作自1990年问世以来,已发行4个版本:HTML1.0、HTML2.0、HTML3.0、HTML4.0、HTML5.0HTML标准的网站:/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。34HTML开发HTML标记的格式组成:<HTML>...</HTML>HTML标记用于标记HTML文档的开始和结束元素-标识标记属性-描述标记值-分配给属性的内容<ELEMENTATTRIBUTE=value>标记:人(事物)属性:性别、头发、职业……值:女性、长头发、工程师……

男性、黄头发、培训师……35HTML作用使用HTML标记或元素,可以:控制页面和内容的外观发布联机文档使用HTML文档中插入的链接检索联机信息创建联机表单,收集用户的信息、执行事务等等插入动画开发帮助文件36HTML语法示例:<HTML><HEAD> <TITLE>欢迎学习HTML</TITLE></HEAD><BODY> <H3>我的第一个HTML文档</H3></BODY></HTML>运行结果37标记<HTML> <HEAD> <TITLE>欢迎使用HTML</TITLE> </HEAD> <BODYBGCOLOR=lavender> <P>这会是一种很有趣的体验 <P>另一个段落元素 </BODY></HTML>运行结果38补充:关于颜色颜色值是一个关键字或一个RGB格式的数字。aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow色彩的概述色彩具有五颜六色,千变万化的特点。平时我们看到的白光,经过分析在色带上可以看到,事实上包括了7种颜色。色彩有冷、暖之分,其巧妙运用会达到意想不到的效果。红色代表:热情、活泼、热闹、温暖、幸福橙色代表:光明、华丽、兴奋、快乐。黄色代表:明朗、愉快、高贵、希望绿色代表:平静、和平、柔和、安静、青春蓝色代表:永恒、沉静、理智、诚实紫色代表:高贵、魅力、自傲白色代表:纯洁、朴实、神圣灰色代表:消极、谦虚、平凡、中庸、寂寞黑色代表:坚实、严肃、粗莽40在HTML中对于颜色的定义可以用6位十六进制数。电脑屏幕的色彩是由rgb(红、绿、蓝)三种色光所合成的,通过调整这三个基色就可以调配出其它的颜色。每2位数代表一种颜色的浓度,三种颜色的顺序为红、绿、蓝,00代表颜色浓度最小,FF代表颜色浓度最大。#000000代表纯黑、#FFFFFF代表纯白、41d图中所示是部分颜色的RGB代码:

例:为页面设置背景色:

<bodybgcolor=“#FFFF33”>42HTML文档的结构HTML部分文档头部分正文部分<HTML> <HEAD> <TITLE>欢迎进入HTML世界</TITLE> </HEAD> <BODY> <P>这会是一种很有趣的体验</P> </BODY></HTML>基本结构:运行结果43段落标记<HTML> <HEAD> <TITLE>欢迎使用HTML</TITLE> </HEAD> <BODYBGCOLOR=lavender>

<P>这会是一种很有趣的体验

<P>

另一个段落元素 </BODY></HTML>运行结果44换行标记<HTML> <HEAD> <TITLE>欢迎使用HTML</TITLE> </HEAD> <BODYBGCOLOR=lavender> <P>这会是一种很有趣的<BR>体验 <P>另一个段落元素 </BODY></HTML>运行结果45使用对齐属性<HTML>

<HEAD>

<TITLE>学习HTML</TITLE>

</HEAD> <BODYBGCOLOR=lavender> <Palign=right>这会是一种很有趣的体验</P> </BODY></HTML>

运行结果右对齐Left:左对齐Center:居中Right:右对齐46使用META标记2-1提供关于网页的信息<METAname=“Author”content=“GrahamBrown”>

<METAname=“KEYWORDS”content=“...”>

<METAname="DESCRIPTION"content="...">对网页的描述根据关键词生成响应获得文档的作者名称2.应用:关键词生成响应<METAhttp-equiv="Expires"content="Mon,15Sep200314:25:27GMT">Expires:Mon,15Sep200314:25:27GMT设置网页的到期值:响应

473.自动刷新页面<METAhttp-equiv="Refresh"content="10;url=http://yourlink">4.使用网页所使用的编码<METAhttp-equiv="Content-Type"content="text/html;charset=gb2312">应用:如网上实时新闻报道。应用:如在不同浏览器上正确显示中文。使用META标记2-248在HTML文档中使用特殊字符……<TDwidth="100%"height=18><FONTsize=-1>Userid   用户名/口令。</FONT></TD>…………200>189……>号……20<189……<号……"风驰电掣"……

“号……x>y;&x=120……

与符号……©CopyRight版权所有……

©版权符号……®APTECH……

®注册商标491、职位:关于可申请的职位……2、培训资源:本学院美术学位的培训资源请单击此处查看视频……3、联盟:我们有许多联盟……超链接简介2-1主页(落锚点)职位培训资源请单击此处查看视频联盟50超链接简介2-2链接类型内部链接1、到同一网站内的其它网页的链接2、到同一文档内的其他部分的链接外部链接到其他网站或服务器上的页面的链接。----------------------------------------------------------------------Web站点1Web站点251创建超链接要创建超链接,必须指定两个部分要链接的文件的完整地址或URL热点热点可以是一行文字甚至一个图像C:\internet\index.htmlservice/index.html

绝对URL文件的完整地址相对URL52超链接:锚记A<AHREF=protocol://host.domain:port/path/filename>

Hypertext</A>Protocol是协议类型http–超文本传输协议gopher–搜索文件telnet–打开

telnet会话ftp–文件传输协议mailto–发送电子邮件

Host.domain是服务器的Internet地址Port是目标服务器的端口号Hypertext是用户必须单击才能激活链接的文本或图像eg.<AHREF=Doc2.html>文档2</A><AHREF="

:80/index.action">互联网</A><AHREF="

">互联网</A><AHREF="

/EnglishWeb/index.html">互联网</A>

语法为:53链接到其他文档<HTML>码头<HEAD><TITLE>使用链接</TITLE></HEAD><BODY><BR><BR><P>本页的所有内容都讲述关于如何创建到文档的链接

<AHREF=Doc2.html>单击此处查看文档2</A></BODY></HTML>

<HTML>船<HEAD><TITLE>文档2</TITLE></HEAD><BODY><BR><BR><P>这是文档2。单击文档1中的超链接后将显示本页。<BR><BR>

<AHREF=Doc1.html>返回</A></BODY></HTML>

54链接到同一文档的各个部分<HTML><HEAD><TITLE>使用链接</TITLE></HEAD><BODY>

<AHREF=#Internet>互联网</A><BR><BR>

<AHREF=#HTML>HTML简介</A><BR><BR>

<AHREF=#Consistency>多样化和统一性</A><BR><BR>

<Aname=Internet>互联网</A><BR><P>互联网是网络的网络。也就是说,计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。</P>

<Aname=HTML>HTML简介</A><BR><P>超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言(SGML)的子集,但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。</P>

<Aname=Consistency>多样性和统一性</A><BR><P>万事万物都离不开多样性和统一性这样一条基本准则。也就是说,所有的事物都可以融合成一个整体,同时,又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。</P><BR><BR><BR><BR><BR><BR></BODY></HTML>单击55链接到另一文档中某个特定位置<HTML><HEAD><TITLE>主文档</TITLE></HEAD><BODY>

<AHREF=副文档.html#Internet>互联网</A><BR><BR>

<AHREF=副文档.html#HTML>HTML简介</A><BR><BR>

<AHREF=副文档.html#Consistency>多样性和统一性</A></BODY></HTML>

单击56链接到另一文档中某个特定位置<HTML><HEAD><TITLE>副文档</TITLE></HEAD><BODY>

<Aname=Internet>互联网</A><BR><P>互联网是网络的网络。也就是说,计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。</P>

<Aname=HTML>HTML简介</A><BR><P>超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言(SGML)的子集,但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。</P>

<Aname=Consistency>多样性和统一性</A><BR><P>万事万物都离不开多样性和统一性这样一条基本准则。也就是说,所有的事物都可以融合成一个整体,同时,又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。</P><BR><BR><BR><BR><BR><BR

温馨提示

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

评论

0/150

提交评论