清华大学出版社“案例课堂”大系
丛书以案例的形式讲解软件的内容,读者可以在实践中熟练掌握软件的使用方法。
每一个案例都精挑细选,同时配有全程语音讲解的视频文件,方便读者学习。
案例的选材广泛,涉及到软件应用的各个领域、各个行业,学习无死角。
“CG设计”系列全彩精印,同等价位下内容更多,同等内容下更实惠。
“网站开发”系列附赠超值,全面学习无障碍:
CSS属性速查表
HTML标签速查表
网页布局案例赏析
精彩网站配色方案赏析
精选JavaScript实例
JavaScript函数速查手册
CSS+DIV布局案例赏析
案例源文件与教学课件
《网站开发案例课堂:HTML5+CSS3+JavaScript网页设计案例课堂》作者根据在长期教学中积累的网页设计教学经验,完整、详尽地介绍HTML 5 + CSS 3 + JavaScript网页设计技术。
《网站开发案例课堂:HTML5+CSS3+JavaScript网页设计案例课堂》共分24章,分别介绍HTML 5概述、HTML 5网页文档结构、HTML 5网页中的文本和图像、HTML 5建立超链接、HTML 5建立表格、HTML 5建立表单、HTML 5绘制图形、HTML 5中的音频和视频、CSS 3概述和基本语法、美化网页字体和段落样式、美化图片样式、美化背景和边框样式、美化超级链接和鼠标、美化网页菜单、使用CSS 3滤镜美化网页元素、JavaScript编程基础知识、JavaScript程序控制结构和语法、函数、内置对象、HTML 5 + CSS 3 + JavaScript的搭配使用。最后以两个综合网站的设计为例进行讲解,使读者进一步巩固所学的知识,提高综合实战能力。
《网站开发案例课堂:HTML5+CSS3+JavaScript网页设计案例课堂》内容全面、图文并茂、步骤清晰、通俗易懂、专业性强,使读者能理解HTML 5 + CSS 3 + JavaScript网页样式与布局的技术,并能解决实际工作中的问题,真正做到“知其然,更知其所以然”。
《网站开发案例课堂:HTML5+CSS3+JavaScript网页设计案例课堂》涉及面广泛,几乎涵盖了HTML 5 + CSS 3 + JavaScript网页样式与布局的所有重要知识,适合网页设计初学者快速入门,同时也适合想全面了解HTML 5 + CSS 3 + JavaScript网页设计的专业人员阅读。
第1章 HTML基础语法
自从网页技术诞生以来,构建网页的语言一直在不断地演化。现在,一系列最佳实践已经出现,用户在设计网页时,通常会将HTML、CSS和JavaScript技术结合运用:使用HTML创建一些基本的网页内容,使用CSS控制网页内容的外观,让它们更加引人注目,使用JavaScript添加具有很强动态感的功能。本书会详细地向读者介绍HTML、CSS和JavaScript的知识。本章将主要介绍HTML语言。
通过对本章的学习,读者不仅可以了解HTML的特点、发展历史和开发工具,还可以掌握HTML的语法结构、一些常用的标记,以及编写HTML的注意事项。
本章学习目标如下:
熟悉HTML的特点和发展历史。
了解HTML的编辑器。
掌握Dreamweaver工具的使用。
掌握HTML的标记语法和属性语法。
了解HTML中常用的全局属性。
掌握头部内容的一些常用标记。
掌握bgcolor属性的使用。
熟悉与页面边距有关的属性设置。
掌握段落标记和超链接标记的使用。
掌握图像标记和标题显示标记。
掌握HTML文件中的注释。
了解编写HTML文件的注意事项。
1.1 了解HTML语言
HTML是HyperText Markup Language的缩写,通常被译为“超文本标记语言”,它是标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接,甚至是音乐和程序等的非文字元素。
下面我们来简单了解HTML语言的基本知识,包括HTML语言的特点、发展历史和编辑工具等内容。
1.1.1 HTML概述
HTML是用来描述网页的一种标记语言,它使用标记来描述网页。例如,下面的代码是一段简单的HTML内容:
我的HTML网页示例
第一次进行测试,谢谢大家包容。
将上述内容复制到一个记事本文件中,并且将记事本文件的后缀名更改为“.html”或者是“.htm”,然后在浏览器(例如Chrome浏览器)的地址栏中输入路径进行测试,效果如图1-1所示。
图1-1 简单的HTML例子
从上面的例子可以看出,HTML网页的制作很简单。
HTML有多种特点,说明如下。
升级简单性:HTML版本升级采用超集方式,从而更加灵活、方便。所谓超集,可以这样理解,如果一个集合V1中的每一个元素都在集合V2中,且集合V2中可能包含V1中没有的元素,则集合V2就是V1的一个超集。若V2是V1的超集,则V1是V2的真子集。
可扩展性:HTML的应用非常广泛,它带来了加强的功能。HTML采取子类元素的方式,为系统扩展带来保证。
平台无关性:虽然个人计算机被广泛应用,但是使用其他计算机(例如Mac)的也大有人在。HTML可以广泛应用在多种平台上,都能获得一致的效果。
通用性:HTML是网络的通用语言,它允许网页制作者建立文本与图片相结合的复杂页面,这些页面可以被网上的任何用户浏览到,无论使用的是什么类型的计算机或者浏览器。
1.1.2 HTML发展历史
在整个20世纪90年代,网络呈爆炸式增长,越来越多的网页设计者和浏览器开发者参与到网络中来,每一个人都有不同的想法和目标,每一个人都会按照自己的想法和目标参与到网络中来。网页设计者会按照自己的想法和目标去编写网页,而浏览器的开发者则可能与网页设计者的想法不同,它会按照自己的方式去呈现网页。
当网页的设计者和浏览器的开发者发生分歧时,必然会带来非常不同的呈现。这时,设计者要面向所有的用户,就必须为每种浏览器创作不同的网页,来实现相同的呈现。这就必然要增加创作的成本,从而导致万维网的分裂。因此,只有网页的设计者和浏览器的开发者都按照同一个规范来编写和呈现网页时,才会避免万维网的分裂。正是这个原因促使各浏览器开发商协调起来,共同实现了同一个HTML规范。
HTML没有1.0版本,这是因为一开始有多种不同版本的HTML,当时W3C还没有成立,HTML在1993年6月作为互联网工程工作小组(Internet Engineering Task Force,IETF)的第一份草案发布,但是并未被推荐为正式规范。
在IETF的支持下,根据以往的通用实践,在1995年整理和发布了HTML 2.0。
但HTML 2.0是作为RFC(Request For Comments)1866发布的,其后又经过了多次修改。后来的HTML+和HTML 3.0也提出了很多好的建议,并且增加了大量的内容,然而这些版本还未能上升到创建一个规范的程度,许多商家实际上并未严格遵守这些版本的格式。
1996年,W3C的HTML工作组编撰了通用的实践,并在第二年公布了HTML 3.2规范。同期,IETF宣布关闭HTML工作组,开始由W3C负责开发和维护HTML规范。
1997年12月,HTML 4.0被W3C正式推荐为规范,并且在1999年12月推出了一个修订版——HTML 4.01,该版本引入了样式表、脚本、框架、嵌入对象、表格以及表单等多种内容。
此后,W3C解散了HTML工作组,HTML规范长时间处于停滞状态,并转而开发XHTML,直到发布XHTML 1.0规范和XHTML 2.0规范。但由于XHTML规范越来越复杂,这导致其长期不能被浏览器商家接受。
与此同时,WHATWG认为XHTML并不是用户所需要的,于是继续开发HTML的后续版本,并将其定名为HTML 5.0。随着万维网的发展,WHATWG的工作取得了很多厂商的支持,并最终使W3C认可,终止了XHTML的开发,重新启动了HTML工作组,在WHATWG工作的基础上开发HTML 5,并最终发布了HTML 5规范。
1.1.3 HTML编辑器
编辑HTML代码时可以使用记事本,通过记事本,可以按照以下几个步骤来创建网页。
(1) 启动记事本。启动记事本最简单的一种办法是,直接单击计算机“开始”菜单中的“运行”命令,然后在弹出的对话框中输入“notepad”,即可直接打开记事本窗口。
(2) 在打开的记事本窗口中可以编写HTML代码。
(3) 需要把HTML代码保存为HTML格式的网页文件。在记事本窗口的菜单栏中选择“文件”→“另存为”命令,在弹出的“另存为”对话框中设置保存类型为“所有文件”;设置HTML文件的扩展名为“.html”或者“.htm”,这两种扩展名没有区别,可以根据读者的喜好进行选择。
经过上述步骤编辑并保存好HTML文件后,即可在浏览器中运行了。
上面的例子只是说明了如何在记事本中编写HTML代码。其实,任何文本编辑器都可以编写HTML代码,例如写字板、Word、WPS等编辑程序。除了这些程序外,还可以使用更加专业化的工具来编辑HTML。
表1-1对各种HTML开发工具进行了分类。
表1-1 HTML开发工具分类
分 类说 明代表工具不 足
所见即所得的工具所谓“所见即所得”,是指在编辑网页时即能同步地看到效果,与使用浏览器时看到的效果基本一致Drumbeat、NetobjectFusion容易产生废代码
续表
分 类说 明代表工具不 足
HTML
代码编辑工具用纯粹的HTML代码编辑工具,用户可以对页面进行完全的控制记事本等用户必须掌握
HTML语言
混合型
工具介于上述两种工具之间,混合型工具可以在所见即所得的工作环境下完成主要的工作,同时也能切换到代码编辑器Adobe Dreamweaver、
FrontPage、CutePage、
QuickSiteaver通常也不能完全控制HTML页面的代码,也容易产生废代码
1.1.4 认识Dreamweaver工具
Adobe Dreamweaver,简称DW,是美国Macromedia公司开发的集网页制作和管理网站于一身的所见即所得型的网页编辑器,它是一种为专业的网页设计师特别开发的可视化网页设计工具,利用它,可以轻而易举地制作出跨平台、跨浏览器的充满动感的网页。
1.Dreamweaver的版本
Dreamweaver 1.0版本于1997年12月由Macromedia公司发布。目前,Dreamweaver CC是其最新版本。
表1-2给出了Dreamweaver版本发布的历史情况。
表1-2 Dreamweaver的历史版本
所处时期版 本
Macromedia时期Dreamweaver 1.0、Dreamweaver 2.0、Dreamweaver 2.01、Dreamweaver 3、Dreamweaver 4、Dreamweaver 5、Dreamweaver MX、Dreamweaver MX 2004和Dreamweaver 8.0
Adobe时期Dreamweaver CS3、Dreamweaver CS4、Dreamweaver CS5、Dreamweaver CS5.5和Dreamweaver CS6
2013Dreamweaver Creative Cloud,即Dreamweaver CC
2.系统要求
对于Windows操作系统来说,使用Dreamweaver工具时,需要满足以下几个要求:
Intel Pentium 4或者AMD Athlon 64处理器。
Microsoft Windows XP(带有Service Pack 2,推荐Service Pack 3);Windows Vista Home Premium、Business、Ultimate或Enterprise(带有Service Pack 1);Windows 7和Windows 8。
512MB内存。
1GB可用硬盘空间,用于安装;安装过程中还需要额外的可用空间(无法安装在可移动闪存设备上)。
1024×768屏幕,16位显卡。
DVD-ROM驱动器。
在线服务需要宽带Internet连接,并不断验证订阅版本(如果适用)。
3.操作界面
虽然Dreamweaver CC是最新的版本,但是目前Dreamweaver CS4和Dreamweaver CS5版本经常使用。本书以Dreamweaver CS5工具进行编辑,使用该工具之前,需要从网络下载,下载成功后进行安装,由于很简单,这里不再给出具体的安装步骤。
安装成功后,直接打开,初始界面如图1-2所示。
图1-2 Dreamweaver的界面效果
用户可以在如图1-2所示的界面中编辑HTML代码,也可以执行其他的操作。通常情况下,为了利于HTML文件的维护和修改,可以首先在Dreamweaver中创建一个站点,然后在该站点下创建其他文件(例如.html文件、.txt文件和文件夹等)。
【例1-1】
本例演示如何创建一个站点,以及如何向站点中添加文件。实现步骤如下。
(1) 在打开的Dreamweaver界面的菜单栏中选择“站点”→“新建站点”命令,这时会弹出如图1-3所示的对话框。在该对话框中,输入站点名称并选择或输入站点文件夹,然后单击“保存”按钮即可。
(2) 创建成功后,会在“文件”选项卡中显示站点名称,然后选择当前站点,并单击鼠标右键,从快捷菜单中选择要执行的命令,例如“新建文件”、“新建文件夹”、“打开”等多个命令。
(3) 直接选择要执行的命令。这里在新站点下添加一个image文件夹和一个test.html文件,效果如图1-4所示。
图1-3 新建站点
图1-4 创建文件夹和文件
(4) 向test.html文件中添加一段文本字符串,添加完毕后,单击如图1-5所示的按钮,选择在浏览器中浏览网页效果。在图1-5中,用户选择“编辑浏览器列表”命令可以添加或者编辑浏览器。
图1-5 选择在浏览器中预览/调试
……