HTML5+CSS3 Web前端设计基础教程 第3版（第2章）HTML 5页面的构建与简单控制.pptx

第2章本章除了介绍Dreamweaver的基本使用方法以外，还着重介绍HTML5的文档结构和常见标签等内容。HTML5页面的构建与简单控制

2.1Dreamweaver的工作环境概述2.1.1界面介绍

2.1Dreamweaver的工作环境概述2.1.2常用工具栏和面板1．工具栏图2-2工具栏新版Dreamweaver的工具栏在整个操作界面的左侧，如图2-2所示，单击按钮可以在弹出的“自定义工具栏”对话框中，增加或减少按钮的显示。

2.1Dreamweaver的工作环境概述2．属性检查器图2-3属性检查器（选定对象为文本）图2-4属性检查器（选定对象为图像）

2.1Dreamweaver的工作环境概述3．插入面板图2-5HTML类别图2-6表单类别图2-7Bootstrap类别

2.1Dreamweaver的工作环境概述4．CSS面板5．设置主、次浏览器图2-9CSS面板图2-10设置主、次浏览器

2.2创建和管理站点2.2.1创建站点进行网页制作的第一步就是创建本地站点，站点管理会让用户的工作变得简单而富有成效，况且许多功能必须在站点中才能实现。总之，如果不是仅编辑需要的单个页面，那么就必须创建站点。图2-12站点设置对象图2-13创建“MySite”站点

2.2创建和管理站点2.2.2“文件”面板的使用方法1．新建文件夹和文件图2-14右键菜单图2-15新建文件夹图2-16嵌套文件夹

2.2创建和管理站点2.2.2“文件”面板的使用方法图2-18站点内的基本操作图2-19更新文件2．站点内的基本操作

2.2创建和管理站点2.2.3管理站点图2-20“管理站点”对话框

2.3HbuilderX工作环境概述2.3.1HBuilderX的安装与启动图2-21HBuilderX工作环境

2.3HbuilderX工作环境概述2.3.2使用HBuilderX创建项目图2-22新建普通项目图2-23编辑文档

2.3HbuilderX工作环境概述2.3.3安装扩展插件图2-25安装扩展插件

2.4HTML5入门2.4.1使用Dreamweaver构建“H5标准页面”图2-21结构示意图

2.4HTML5入门图2-22标签1．标签的含义2．元素的含义3．属性和值

2.4HTML5入门2.4.2DOCTYPE文档类型与基本结构元素!DOCTYPEhtmlhtmlheadmetacharset=UTF-8title凤凰网/titlemetacontent=凤凰,凤凰网,凤凰新媒体,凤凰卫视,凤凰卫视中文台,phoenixname=keywords/metaname=descriptioncontent=凤凰网是中国领先的综合门户网站，提供含文图音视频的全方位综合新闻资讯、深度访谈、观点评论、财经产品等服务。/metacontent=index,followname=robots/metacontent=凤凰网name=author/metacontent=Copyright1999-2014..AllRightsReserved.name=copyright/scriptsrc=fa.min.js/scriptlinkhref=/index/72x72_2520ifeng.pngrel=apple-touch-icon//head?body/body/html?

2.4HTML5入门?1．DOCTYPE文档类型以下是HTML5的DOCTYPE声明：!doctypehtml以下是XHTML的DOCTYPE声明：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd以下是HTML4.01的DOCTYPE声明：!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN/TR/html4/loose.dtd

2.4HTML5入门?2．基本结构元素——html元素3．基本结构元素——head元素、title元素、meta元素、script元素、link元素（3）script元素（4）link元素（1）title元素图2-28title元素预览效果（2）meta元素name属性：