Web前端开发技术

随着互联网的发展和Web2.0的广泛应用，标准化的设计方式正逐取代传统的布局方式，Web网页开发标准优选的特点是采用HTML+CSS+JavaScript技术将网页的内容、外观样式和动态效果分离，减少代码量，便于代码的分工 设计和代码重用。 本书作为Web网页开发基础课程，是一门入门的技术课程。本教材采用“项目驱动式”的教学方式，将理论知识和实际案例相结合，利用通俗易懂的语言详细介绍了使用HTML、CSS及JavaScript进行网页制作的各方面知识点和技巧。从技术的原理出 发，同时以示例、实例的形式对各知识点进行详细讲解，并致力于将知识点融入实际项目的开发中。本书的特色是结合知识点精心设计了相关案例，将基础知识巧妙地融入案例中，使读者在实现案例效果的同时，不知不觉掌握基础知识。 本教材以项目化的方式进行讲解，共分为十二个项目，接下来分别对每个项目进行简单地介绍。

随着互联网的发展和Web2.0的广泛应用，标准化的设计方式正逐取代传统的布局方式，Web网页开发标准优选的特点是采用HTML+CSS+JavaScript技术将网页的内容、外观样式和动态效果分离，减少代码量，便于代码的分工设计和代码重用。 本书作为Web网页开发基础课程，是一门入门的技术课程。本教材采用“项目驱动式”的教学方式，将理论知识和实际案例相结合，利用通俗易懂的语言详细介绍了使用HTML、CSS及JavaScript进行网页制作的各方面知识点和技巧。从技术的原理出发，同时以示例、实例的形式对各知识点进行详细讲解，并致力于将知识点融入实际项目的开发中。本书的特色是结合知识点精心设计了相关案例，将基础知识巧妙地融入案例中，使读者在实现案例效果的同时，不知不觉掌握基础知识。本教材以项目化的方式进行讲解，共分为十二个项目，接下来分别对每个项目进行简单地介绍。

项目一 HTML基础概念
1.1 初识网页
1.2 文本编辑
项目二 HTML表单
2.1 简单的网页
2.2 用户登录界面
项目三 浮动与定位
3.1 梅兰竹菊
3.2 常规页面布局
3.3 常规页面布局
项目四 图像与超链接
4.1 插入图像
4.2 超链接
项目五 列表与超链接
5.1 个人主页列表
5.2 手机展示
5.3 列表菜单
5.4 网页下拉菜单列表
5.5 学习网页菜单
项目六 CSS基础
6.1 古诗欣赏
6.2 商品爆款特卖页面
6.3 商品抢购页面
项目七 CSS盒子模型
7.1 购物商城产品规格效果
7.2 用户中心
7.3 实现登录页面插入背景图片
7.4 实现购物商城分类板块
项目八 表格与框架
8.1 表格
8.2 框架
8.3 框架集标记
8.4 内嵌框架
项目九 JavaScript基础
9.1 显示卡通图片
9.2 下拉菜单
项目十 JavaScript事件处理
10.1 京东
10.2 简单的计算器
10.3 简单注册验证
参考文献

     项目一 HTML基础概念 学习目标： 了解网页的构成，理解网站和网页的含义。 熟悉Dreamweaver工具的基本操作，掌握网站和网页的创建。 掌握HTML文档的基本格式，能够正确书写简单规范的HTML网页代码。 掌握HTML标题标记、段落标记和文字标记的应用，可以合理的使用它们定义网页元素。 掌握HTML水平线标记的应用，可以合理设置水平线标记的属性。 HTML是制作网页的基础语言，是初学者必学的内容。虽然现在有许多所见即所得的网页制作工具，但是这些工具生成的代码仍然是以HTML为基础的，因此学习HTML代码对设计网页非常重要。 1.1 初识网页 案例描述 利用Dreamweaver工具，建立第一个站点，并创建第一个网页，设计图如图1-1所示。 图1-1 第一个网页设计图 ●知识引入 （1）认识网页 为了让初学者更好的认识网页，了解网页的构成，首先看一下宜宾职业技术?院官方网站的首页。打开IE浏览器，在地址栏中输入http://www.ybzy.cn，按下回车键或者按“转至”按钮，这时浏览器窗口中将显示某职业技术学院首页的内容，如图1-2所示。 图1-2 某职业技术学院首页效果图 从图1-2可以看到，一个网页内容主要包括图片、文字，另外还有音频、视频、动画等内容。为便于后期代码学习，在浏览器窗口中单击鼠标右键，选择“查看源文件”，弹出当前网页的源代码，具体如图1-3所示。 图1-3 某职业技术学院首页源代码 图1-3是一个纯文本文件，图1-2是图1-3的代码经过浏览器解析后得到的结果。 （2）名词解释 1）网站 网站是指在因特网上根据一定的规则，使用HTML（标准通用标记语言下的一个应用）等工具制作的用于展示特定内容相关网页的集合。简单地说，网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。 2）网页 网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，您的网站就是由网页组成的，如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页主要由三部分组成，结构、表现和行为。对应的网站标准也分三个方面：结构化标准语言，主要包括XHTML和XML；表现标准语言，主要包括CSS；行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C组织起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。 （3）HTML简介 HTML是Hyper Text Markup Language（超文本语言）的英文缩写，它主要用来在网页中显示相关内容。HTML和其他语言不同，它是一门解释性语言，在运行HTML程序前不需要编译。 同时HTML还是一门标记语言。将标记和要显示的内容结合就编写了一个HTML程序。可以通过对标记的学习来学习HTML语言。 1）结构化标记 对于每一个HTML文件而言，它都有一个基本的结构。结构化标记就是用来描述基本结构的标记，它由架构标记和注释标记组成。 2）架构标记 在HTML中，有四种架构标记，表1-1中给出了这四种架构标记。 表1-1 架构标记 开始标记 结束标记 解释