本书以HTML、CSS以及JavaScript为主, 以大量的实例介绍网页设计的基本思想、方法和技术, 同时以大量的工程实践环节巩固网页设计的方法和技术, 力图使学生达到“做中学, 学中做”的状态。主要内容包括: HTML概述、基本标记、列表、图像与多媒体、超链接、表格、表单与页面控件、框架与浮动窗口、JavaScript、CSS、地址薄网站的布局以及初始HTML5。
本书采用“教、学、做”一体化的方式撰写，合理地组织学习单元，每个单元的核心知识讲述在静态网页制作中最重要和实用的知识，能力目标讲述使用核心知识点进行静态网页制作的能力，任务驱动中的“任务的代码模板”起着训练静态网页制作能力的作用，其中“任务小结”主要总结任务中涉及的重要技巧、注意事项以及扩展知识，通过该“任务模板”的训练，读者有能力完成后续的实践环节。
全书共13章。第1章是HTML概述，主要介绍HTML文件的基本结构以及如何运行HTML文件。第2章是HTML文件基本标记，在核心知识点和任务的安排方面特别注重训练初学者应当掌握和理解的重要基础知识以及知识点。第3章是文字布局与文字效果，在任务安排上注重结合实际问题训练读者熟练地设计网页中文字布局与文字效果。第4章是列表，着重讲解在网页中使用列表设计结构化的、易读的文本。第5章是图像与多媒体，在任务安排上注重结合实际问题训练读者熟练地使用图像与多媒体美化网页。第6章是超链接，主要讲述在网页中如何使用超链接。第7章是表格，重点介绍表格的创建、属性以及结构。第8章是本书的重点内容之一——表单与页面控件，主要讲述在网页中使用表单实现程序与用户的交互。第9章是框架与浮动窗口，主要介绍框架与浮动窗口的用法。第10章是本书的重点内容之一——CCS，主要介绍CSS的基本语法、经典的网页布局。第11章是JavaScript，重点介绍JavaScript的基本语法，在任务安排上注重结合实际问题训练读者在网页中熟练地使用JavaScript完成客户端的特定功能。第12章是一个综合网站案例——地址簿网站的布局，通过一个小型的地址簿网站，讲述如何采用DIV+CSS进行网站的前台布局设计。第13章是初始HTML5，简要介绍HTML5的视频、音频、画布、Web存储以及表单等内容，使读者初步了解HTML5。
本书特别注重引导学生参与课堂教学活动，适合作为高等院校相关专业教、学、做一体化的教材。
为了便于教学，本书配有教学课件、源代码以及实践环节与课后习题参考答案，读者可从清华大学出版社网站免费下载，也可加入教材交流QQ群(318848387)下载。
由于编者水平有限，书中难免存在疏漏之处，敬请广大读者给予批评指正。
编者
2017年5月
第1
章
HTML概述
(1)HTML文件的基本结构。
(2)简单的HTML页面。
可视化的HTML开发工具固然方便快捷，如Dreamweaver等。但是，可视化开发工具自身也会产生大量不必要的HTML代码，这样会为以后的程序维护埋下隐患。一个优秀的网页设计者应该在掌握HTML语言的基础上，进一步熟练使用可视化开发工具，从而达到快速制作网页和优化网页的目的。
本章通过简单的实例介绍HTML文件的基本结构和HTML程序的开发步骤。
1.1HTML文件的基本结构
1.1.1核心知识
HTML的英文全称是HyperTextMarkupLanguage，即超文本标记语言，它是用于编写网页的主要标记语言。下面是一个HTML文件的基本结构。
…
…
从上面的代码段可以看出，HTML文件的基本结构分为3部分，其中各部分含义如下。
...：表示HTML文件开始和结束的位置，里面包括head和body等标记。HTML文件中所有的内容都应该在这两个标记之间。
...：HTML文件的头部标记，习惯将这两个标记之间的内容统称为HTML的头部。
...：用来指明文档的主体区域，网页所要显示的内容都要放置在这个标记内。习惯将这两个标记之间的内容统称为HTML的主体。
1.1.2能力目标
了解HTML的基本概念，认识并理解HTML文件的基本结构。
1.1.3任务驱动
1.任务的主要内容
把“初次见面，请多多照顾”这句话显示在网页的主体域中。
2.任务的代码模板
将下列example1_1.html中的【代码】替换为HTML代码，有关代码要求如下：【代码1】为title标记的结束；【代码2】为body标记的开始；【代码3】为网页主体的内容“初次见面，请多多照顾”。
example1_1.html的代码模块如下：
结束。每个文件都有自己的扩展名，HTML文件的扩展名为.html或.htm。
4.代码模板的参考答案
【代码1】
【代码2】
【代码3】初次见面，请多多照顾
1.1.4实践环节
首先，参考1.2节将example1_1.html完整的代码保存在操作系统自带的记事本中，并另存为example1_1.html文件；然后，双击example1_1.html文件，观察运行效果。
1.2使用记事本编写HTML页面
1.2.1核心知识
编写HTML页面有两种常用方法：一种是利用操作系统自带的记事本编写；另一种是利用可视化网页制作软件(如Dreamweaver)编写。使用可视化网页制作软件编写网页在本书中不涉及。下面讲述使用记事本手工编写HTML页面。
HTML语言并不需要什么特殊的开发环境，可以直接在操作系统自带的记事本中编写。使用记事本手工编写HTML页面的具体操作步骤如下。
(1)在Windows操作系统下，右击，选择“新建”→“文本文档”命令，在新建的文本文档中输入HTML代码。
(2)编写完HTML文件后，选择“文件”→“另存为”命令，在“另存为”对话框中选择保存的路径，在“文件名”文本框中输入文件的名字，如myPage.html，文件的扩展名为.html或.htm，如图1.1所示。
(3)单击“保存”按钮，这时该文本文件就保存成了HTML文件，双击HTML文件就可以看到页面运行的效果。
图1.1HTML程序的保存
新书资讯
