HTML5+CSS3网页设计基础-第一章-网页设计基础

1、第1页第1章 网页设计基础本章概述 本章的学习目标主要内容第2页本章概述网页设计工作主要包括网页内容显示、总体颜色选择、页面的排版布局和用户群的体验度等。网页设计作为一门综合性较高的课程，涉及商业策划、平面设计、程序语言和数据库等。本章将介绍网页的基本组成元素、页面结构和创建网页的方法。第3页本章的学习目标了解网页上常见的基本元素及其特点了解网页的布局结构即网页内容的排版知识掌握编辑HTML5网页常用的编辑软件了解HTML5发展、优势、浏览器支持情况掌握HTML5文档的基本格式和语法规范掌握创建和浏览网页的方法第4页主要内容1. 1 网页的基本元素1. 2 网页的布局结构1. 3 创建HTML

2、5页面1. 4 HTML5基础1. 5 实训1. 6 本章小结 第5页1.1 网页的基本元素介绍构成网页的基本元素及其特点。1. 文本2. 图片和动画3. 声音和视频4. 超链接5. 导航栏6. 表单7. 其他常见元素第6页1.2 网页的布局结构从页面布局的角度看，一个页面的布局就类似一篇文章的排版，需要分为多个区块，较大的区块又可再细分为小区块。块内有文字、图片、超链接等内容，这些区块一般称为块级元素，而区块内的文字、图片或超链接等一般称为行级元素，如图1-2所示。1.3 创建HTML5页面第7页本节主要内容：案例分析 用记事本编辑网页用HBuilder编辑网页1.3.1 案例分析【案例展示

3、】设计一个简单的页面，包含了网页标题文字和一行文本信息，本例文件1-1.html在IE浏览器中的浏览效果如图1-3所示。【知识要点】HTML文档的结构、创建网页、保存网页与浏览网页。【学习目标】掌握使用记事本和HBuilder创建、保存和浏览网页的方法。第8页1.3.2 用记事本编辑网页用记事本创建网页过程如下。(1)打开记事本。(2)创建新文件。(3)保存网页。(4)浏览网页。(5)查看网页源代码。第9页1.3.3 用HBuilder编辑网页用HBuilder创建网页过程如下。(1)启动HBuilder，创建Web项目。(2)创建HTML文件。(3)编辑文件。(4)浏览网页。第10页1.4

4、HTML5基础第11页本节主要内容： HTML5概述 HTML5文档结构 HTML5语句结构 HTML5语法规范1.4.1 HTML5概述1. HTML5发展 2014年10发布。HTML5将会逐渐取代HTML4.01、XHTML1.0标准。2. HTML5优势 新的简化的字符集声明。 新的简化的DOCTYPE。 简答而强大的HTML5API。 以浏览器原生能力替代复杂的JavaScript代码。3. 浏览器支持 目前常用的浏览器有IE、火孤( Firefox)、谷歌( Chrome)、 Safari和 Opera等。第12页1.4.2 HTML5文档结构HTML文档是一种纯文本格式的文件，文

5、档的基本结构为:网页标题 网页内容第13页1.4.2 CSS的层叠和继承性1. 声明： 声明必须是 HTML 文档的第一行，位于 标签之前。2. 文档标签：标记位于标记之后，也称为根标记，表示HTML文档的开始。3. 头标签：标签用于定义HTML文档的头部信息，紧跟在标签之后。4. 文档编码：HTML5文档使用meta元素的 charset属性指定文档编码，格式为：5. 标题标签：标签用来定义文档的标题。6. 主体标签：标记用于定义HTML文档所要显示的内容。第14页1.4.3 HTML5语句结构HTML5语句主要有标签、属性和元素构成，其语法结构如下： 元素的内容1. 标签 标签分单标签和双

6、标签，单标签如、等。双标签由开始和结束两个标签符组必须成对出现，等。第15页1.4.3 HTML5语句结构2.属性 属性在开始标签中指定，用来表示该标签的性质和特性。通常都是以“属性名=”值”形式来表示，有多个属性时用空格隔开，并且在指定多个属性时不用区分顺序。 例如，段落标签有属性 align，align表示文字的对齐方式，表示为： 欢迎访问本网站3. 元素 元素指的是包含标签在内的整体，元素的内容是开始标签与结束标签之间的内容。第16页1.4.4 HTML5语法规范1. 标签和属性的规范 标签名和属性建议都用小写字母。 HTML标签可以嵌套，但不允许交叉。 HTML标签中的一个单词不能分两行写。 属性值都要用双引号括起来。 HTML源文件中的换行、回车符和空格在显示效果中是无效的。2. 代码的缩进 HTML代码并不要求在书写时缩进，但为了文档的结构性和层次性，建议使用标签时首尾对齐，内部的内容向右缩进几格。第17页1.5 实训【实训任务】练习创建网页文档，展示企业简介信息，本例文件1-2.html在浏览器中的显示效果如图1-11所示。第18页第19页1.6 本章小结 本章讲