HTML5,CSS3,javasript,网页制作,网页设计第1章网页基本结构.ppt

HTML+CSS+JavaScript网页制作 机械工业出版社同名教材 配套电子教案 * * 1.1 网页的基本元素 1.2 网页布局结构 1.3 案例：创建第一个网页 1.4 实训 第1章 网页基本结构 1．文本 文本一直是最重要的信息载体与交流工具。网页中的信息也以文本为主。与图片相比，文字虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。 2．图片和动画 图片在网页中具有提供信息、展示作品、装饰网页、表现个人情调和风格的作用。用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等，其中使用最广泛的是GIF和JPEG两种格式。 3．声音和视频 声音是多媒体网页的一个重要组成部分。视频文件的采用会让网页变得精彩而有动感。 1.1 网页的基本元素 4．超链接 超链接技术是WWW流行起来的最主要的原因。它是从一个网页指向另一个目的端的链接。例如，指向另一个网页或者相同网页上的不同位置。目的端通常是另一个网页，也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者本网页中的其他位置。 5．导航栏 导航栏的作用就是引导浏览者游历站点。事实上，导航栏就是一组超链接，这组超链接的目标就是本站点的主页及其他重要网页。 1.1 网页的基本元素 6．表单 网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页、电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。 7．其他常见元素 网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、JavaScript特效、ActiveX等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。 1.1 网页的基本元素 网页布局结构即网页内容的排版，排版是否合理直接影响页面的用户体验及相关性，并在一定程度上影响网站的整体结构。 从页面布局的角度看，一个页面的布局就类似一篇文章的排版，需要分为多个区块，较大的区块又可再细分为小区块。块内为多行逐一排列的文字、图片、超链接等内容，这些区块一般称为块级元素；而区块内的文字、图片或超链接等一般称为行级元素。 1.2 网页布局结构 【案例展示】本案例是一个非常简洁的页面，包含了网页标题文字和一句简单的欢迎文字，本例文件welcome.html在浏览器中的浏览效果如图1-3所示。 1.3 创建HTML文档 1.3.1 HTML简介 HTML（Hypertext Markup Language的简称），中文意思为超文本标记语言，是WWW上通用的网页编辑语言。 HTML通过各种标记将信息组织成为图文并茂的超文本文档，其文件的后缀名为.html或.htm。在HTML文档中既看不到图像、动画，也听不到声音，浏览者所看到的只不过是一个纯文本文件。但是这个纯文本文件却比普通的文本文件多了很多的标记。在这些标记中有的是指向图片或动画等多媒体资源的链接，有的则是用来标识网页元素的显示外观。 1.3 创建HTML文档 1.3.2 HTML语法结构 每个网页都有其基本的结构，包括HTML文档的结构、标签的格式等。HTML文档包含HTML标签和纯文本，它被Web浏览器读取并解析后以网页的形式显示出来，所以HTML文档又被称为网页。 HTML语法主要由标签、属性和元素组成，其语法结构为： 标签 属性1=属性值1 属性2=属性值2 …元素的内容/标签 1.3 创建HTML文档 1.3.3 HTML语法规范 1．标签和属性的规范 ? 标签分单标签和双标签，双标签往往是成对出现，所有标签（包括空标签）都必须关闭，如br/、img/、p…/p等。 ? 标签名和属性建议都用小写字母。 ? 多数HTML标签可以嵌套，但不允许交叉。 ? HTML文件一行可以写多个标签，一个标签也可以分多行写，但标签中的一个单词不能分两行写。 ? HTML源文件中的换行、回车符和空格在显示效果中是无效的。 ? 并不是所有的标签都有属性，如换行标签就没有。 ? 属性值都要用双引号括起来。 2．代码的缩进 HTML代码并不要求在书写时缩进，但为了文档的构性和层次性，建议初学者使用标记时首尾对齐，内部的内容向右缩进几格。 1.3 创建HTML文档 *