HTML.docx
- 文档编号:29329030
- 上传时间:2023-07-22
- 格式:DOCX
- 页数:29
- 大小:29.64KB
HTML.docx
《HTML.docx》由会员分享,可在线阅读,更多相关《HTML.docx(29页珍藏版)》请在冰豆网上搜索。
HTML
第一章HTML简介
教学内容:
本章主要讲述了网页设计的基础知识,包括:
常用web术语、网页的基本组成元素、网站的规划、实用的网页布局结构、网页配色、网页的设计原则等。
最后对国内外的优秀网站进行赏析,使大家对网页设计与制作有一个整体的认识,为后面制作复杂的网站和网页奠定基础。
教学目标:
了解网页设计的基础知识,知道HTML、CSS、JavaScriptsa三者在网页设计之间的关系。
教学过程:
万维网是我们这个时代最重要的信息传播手段。
几乎任何人都可以创建自己的网站,然后把它发布在因特网上。
一些网页属于企业,提供销售服务;另一些网页属于个人,用来分享信息。
你可以自己决定网页的内容和风格。
所有网页都要用某种形式的HTML来编写。
HTML可以对文本进行格式化,添加图形、声音和视频,并且可以将它保存为所有计算机都可以读取的文本文件。
学习和掌握HTML并不困难。
编写HTML并不是一个令人头昏的复杂过程,只需仔细输入并保持一致性。
可以在几分钟内建立一个简单的HTML页面并让它运行起来。
另外,尽管有许多软件可以替你编写HTML代码,但自己编写HTML的好处是不必学习新的软件,也不会受到这些软件特性的限制。
1.1因特网、Web和HTML
你肯定听说过因特网(Internet),但是因特网究竟是什么?
简单的说,因特网是相互连接的计算机的集合。
许多人拥有不间断的高速带宽连接(通过DSL、线缆或卫星),而另外一些人只在每天的某段时间内通过调制解调器用家庭计算机上网。
无论是什么类型的连接,只要你联网了,你的计算机就成为因特网的一部分,并且与当前联网的其他所有计算机连接。
万维网(wwwworldwideweb)是虚拟的。
它无数不断变化的、种类不同的文档的集合,这些文档驻留在因特网的某个地方,都是用某种形式的HTML编写的。
HTML(超文本标记语言)有两个基本特性——超文本和普适性。
超文本意味着可以在网页中创建一个链接,从而将访问者链接到其他任何网页,实际上可以链接到因特网上的任何东西。
这意味着可以通过许多不通的路径访问Web上的信息。
Web的创建者TimBerners-Lee希望Web能像人的大脑那样在信息之间建立广泛的联系,而不是像书籍那样只是静
态数据源。
普适性的意思是:
因为HTML文档保存为纯文本文件,所以实际上任何计算机都可以读取网页。
无论访问者是使用Macintosh、Windows还是UNIX计算机,甚至是Palm这样的手持设备,都可以打开网页。
Web对所有计算机都是开放的。
1.2能够打开网页并不意味着有相同的效果
尽管HTML对于所有计算机都是可用的,但是这并不意味着每个人都能以相同的方式体验它。
实际上任何计算机都可以显示网页,但是这些页面的实际显示效果取决于计算机的类型、显示器、连接的速度以及用来查看页面的软件(浏览器)。
当今最流行的浏览器是IE、Firefox,Opera和Safari,同时,用手持设备和PDA上网正在逐渐流行起来。
不幸的是,这些浏览器显示网页的方式不完全相同。
所以,仅仅设计一个漂亮的外形是不行的,人们用来查看页面的系统设置会差异很大,因此,要以适当的方式创建页面,让尽可能多的访问者能够以尽可能接近预期的方式查看页面。
1.3浏览器之争
1994年,网景通信公司(NetscapeCommunications)在Web上建起了第一道栅栏,
所谓的“浏览器战争”开始了。
为了吸引用户,他们抛弃了普适性,创建了一套只有Netscape能够处理的HTML扩展。
例如,使用Netscape的Web冲浪者可以查看具有彩色文本、照片和其他改进的页面,而使用其他任何浏览器的冲浪者都会得到错误和古怪的结果,或者根本没有任何结果。
但是,很多人喜欢这些扩展,所以他们蜂拥进了“Netscape饭店”。
到了1996年,它成了世界上最流行的计算机程序。
微软也开始在Web上圈出自己的区域。
同样,为了吸引用户,他们增加了只有微软的IE浏览器能够识别的非标准扩展。
根据WebStandardProject(www.webstandards.org,这是一个由第一流的设计人员组成的团体,它致力于使破碎的Web重新联合起来)的统计,在浏览器战争的高潮时期,Web设计者要浪费高达25%的时间来应付专有的标记,编写页面的多个版本来满足每种浏览器,并且只能向客户说明创建适用于所有浏览器的某些效果是不可能的。
这真是一团糟。
1.4标准的推出
Web的联合国是一个称为万维网联盟(http:
//www.w3.org,缩写为W3C)的组织,由Web的创建者TimBerners-Lee领导。
它的目标是使Web社区意识到普适性的重要意义,同时尽可能满足开发优美页面的愿望,努力拆除现有的栅栏并防止出现新的栅栏。
W3C的成员列表(http:
//www.w3.org/Consortium/Member/List)看起来像Web行业
大公司的“全家福”,其中包括老牌公司,比如苹果(Apple)公司(它提供iTunes和iPod等产品)、Adobe公司(Photoshop等重要的Web设计工具的开发商)、美国在线(AmercaOnline)公司(它在1998年收购了网景通信公司)、Opera(用于桌面计算机和手持设备的Opera浏览器的开发商)和微软公司(它的IE浏览器从Netscape手中夺取了第一位的市场份额,而且一直保持至今);还包括更现代的公司,比如Google公司(最流行的搜索引擎)和Mozilla公司(流行的开放源码Firefox浏览器的开发商,这种浏览器近年来是IE的主要竞争对手)。
W3C的意图是将这些公司聚集在一起,让它们在标准上达成一致,而依靠速度、使用的简便性、价格或其他特性来体现产品的差异,从而避免Web回到分崩离析的状态。
1.5攻打象牙塔
最近(2006年年中),对于W3C的缓慢步调、过分强调抽象性以及缺乏具体结果产生了许多抱怨。
许多Web设计人员,包括领导标准化过程的设计人员,感觉被W3C及其成员公司忽视了。
HTML4.01和XHTML成为正式推荐标准已经差不多7年了,但是W3C对于未来的方向还没有形成一致的结果。
CSS2成为正式推荐标准已经差不多8年了,但是还没有任何浏览器完全支持它,尽管每种主流浏览器都是由W3C成员开发的。
CSS3仍然处于工作草案阶段,离完成可能还有好几年,更不用说实现了。
在这个时期,你应该怎么做呢?
我的建议一直是“适度”。
要符合标准,但是不要成为标准的奴隶。
第二节课准备工作
2.1浏览网络上的网页
在因特网上,每一个网站都有自己特定的地址,只有把网站的地址输入正确,才能打开相应的网页,才能浏览网页中的信息。
以”网易”为例,
首先打开IE浏览器,在地址栏里htto:
//
2.2浏览本地网页
打开硬盘,进入自己存放网页的路径,双击后缀为.htm或者.html的文件即可
2.3查看源代码
点击浏览器窗口的菜单栏---查看----源代码,或者点击页面空白区-----右击----源代码
Firfox:
查看---页面源代码,或者点击页面空白区-----右击----源代码
2.4学会使用ultraedit(或者记事本)
在XX或者Google搜索这个软件,按照“下一步”理论完成后,选择注册,努力查找相对应的注册号,就可以使用了。
使用这个软件要注意的几个问题:
1.要注册,对应版本寻找注册号;
2.在菜单栏空白区选择增强版的选项;(记住是菜单栏空白区右击,切记)
3.一定要去掉备份;(菜单栏——高级——配置——文件处理——备份),点选不备份;
4.选择自己最适应的字体;(在快捷栏有A这个字体图标,选择你最喜爱的)
(在这里我上课使用的是Fixedsys),我自己使用的是MSReferenceSansSerif,而且是粗体3号字,你可以自己选择喜爱的。
2.5多种浏览器并存
检测当前版本:
运行IE-----点击“帮助”----关于IE
1)安装IETester:
这是个相当神奇的小软件,可以帮我们模拟网页在IE5.5、IE6、IE7与IE8等浏览器的相容性,可以看一下辛苦作好的CSS样式或网站版面是否可以在各个主要浏览器正常显示。
2)Firfox(debug)
练习安装
见软件包
2.6必备手册
CSS2.0样式表中文手册.chm
CSS完全参考手册3.0.chm
样式表滤镜手册.chm
第三节课HTML、CSS、Javascript综述
以本书课件做辅助
3.1代码片段
HTML、CSS、Javascript这三种语言都是与网页设计相关的,那么他们各自在网页中所扮演的角色是什么呢?
下面看一段代码1-1.html
1)未作修饰,纯粹Html
-----------------------------------开头
//标题部分
//文档内容显示区
标题
第一个Html文件
..---------------------------------结束
双击该文档,在IE中查看效果;
说明:
设计网页内容
2)在该文档内容中加上CSS进行修饰后
在
….中间h2{font-size:
42px;font-family:
宋体}样式简单介绍,后面会有详细讲解
点击IE,浏览变化后的效果
说明:
设计网页样式
3)加上javascript后
说明:
增加动态效果。
简单提示,后面会做详细介绍
第四节课Html基础介绍
4.1文档结构
---------------------根控制标记
---------------------头控制标记--------------头控制标记(尾)
-----------------------------网页显示区域
--------------根控制标记(尾)
(1).…根控制标记
开头和结尾成对出现,双标签
(2).
…头控制标记1.
2.控制标记的动态文件转换声明
3.
4.Javascript和VBScript程序
5.stylesheet可用来设置排版来的声明
6.可引用外部文件,如CSS排版样本
(3).
(4).
4.2基本语法
标记:
用于描述功能的符号:
如“Html”
必须用尖括号:
<>
大小写作用相同: