《网页设计与制作（第2版）》第1章 概述

第

1

章网页制作与html5基础知识网页设计与制作（第2版）2023/1/3第1章概述1第

1

章概述1.1网页制作基础知识1.2DreamweaverCS6概述1.3网页标准技术与HTML51.4综合案例2023/1/3第1章概述21.1网页制作基础知识2023/1/3第1章概述31.1.1网页的定义和分类1.1.2网页设计的相关概念1.1.3网页的基本组成元素1.1.4网页制作开发工具1.1.1网页的定义和分类1.按位置分类主页内页2.按表现形式分类

静态网页动态网页网页(Webpages)是网站的组成部分，制作者可以将需要公布的信息按照一定的方式分类，放在每个网页上，网页里可以有文字、图象、声音及视频信息等。网页可以看成是一个单一体，是网站的一个元素。新浪网首页1.1.2网页设计的相关概念站点发布浏览器导航条超链接导航条表单URLIP地址域名新浪网邮箱注册表单1.1.3网页的基本组成元素1.Logo2.Banner3.导航条4.内容栏5.文本6.图像7.按钮8.Flash动画9.版尾新浪网LOGO当当网的Banner新华网首页导航栏网页版尾1.1.4网页制作开发工具记事本程序EditPlus编辑器Dreamweaver网页编辑器图像处理软件动画制作软件网页配色软件1.1.5如何学好网页制作学习网页制作是一个循序渐进的过程，除勤学多练外，还需要有一定的悟性，学习方法建议：先从最简单的网页入手，由易到难；不能闭门造车，应多分析和借鉴优秀的网页；初期不必学编程语言，有一定基础后再学习一些编程语言，如HTML和JavaScript等。1.2DreamweaverCS6概述2023/1/3第1章概述91.2.1启动与退出DreamweaverCS61.2.2DreamweaverCS6

的主界面1.2.1启动与退出DreamweaverCS6

DreamweaverCS6界面1.2.2DreamweaverCS6的主界面网页编辑窗口文档工具栏1.文档工具栏2.“属性”面板3.浮动面板组（1）插入面板（2）CSS样式面板（3）文件面板1.3网页标准技术与HTML52023/1/3第1章概述121.3.1网页结构语言1.3.2在DreamweaverCS6中创建HTML5文档1.3.3HTML5常用标签1.3.4HTML5新增标签1.3.1网页设计语言XHTML1.0结构语言HTML5结构语言网页表现语言网页行为语言1.XHTML1.0XHTML（ExtensibleHyperTextMarkupLanguage），即可扩展的超文本标记语言，是由HTML（HyperTextMarkupLanguage，超文本置标语言）发展而来的一种网页编写语言，也是目前最常见的网页编写语言之一。在2000年1月26日，XHTML语言正式被W3C批准为网页设计的国际标准语言，替代了早期的HTML3.2和HTML4.0，XHTML与HTML4.01几乎是相同的。2.HTML5结构语言由W3C（WorldWideWebConsortium，万维网联盟）牵头，苹果等公司通力协作开发出了最新的Web结构语言标准，即HTML5标准。2013年5月6日，HTML5.1正式草案公布。该规范定义了第五次重大版本。目前，HTML5标记语言仍处于完善中，HTML5将会取代HTML4.01、XHTML1.0标准，使网络标准符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。

3.网页表现语言网页表现语言的作用是为网页的结构语言定义尺寸、位置、背景，以及文本的各种效果。目前网页表现的国际标准语言为CSS样式表技术。CSS（CascadingStyleSheets，层叠样式表）是一种由W3C定义的数据表格式，其作用是为XML、HTML以及XHTML等结构化的文档添加样式描述，从而实现对文档中内容的排版和美化。4.网页行为语言包括JavaScript、JScript以及VBScript等。由于这些语言之间语法各有特点，且支持的Web浏览器各不相同，使得网页设计者往往需要花费大量的精力进行调试，因此，ECMA国际（EuropeanComputerManufacturersAssociation，欧洲计算机制造商协会，一个国际性信息和电信标准化组织）以NetScape（网景）公司开发的JavaScript脚本语言为基础，定义了ECMAScript脚本语言标准。1.3.2在DreamweaverCS6中创建HTML5文档1.在DreamweaverCS6中创建HTML5文档的操作步骤2.HTML5空白文档对应的代码HTML5文档代码视图

DreamweaverCS6新建文档1.3.3HTML5常用标签在HTML5中根据功能来分主要有3种标签，即布局标签、内容标签和复合标签。项目列表设计结果<ul><li>咖啡</li><li>茶

<ul><li>红茶</li><li>绿茶

<ol><li>中国茶</li><li>非洲茶</li></ol></li></ul></li><li>牛奶</li></ul>项目列表代码

1.3.4HTML5新增标签标签描述<article>定义页面独立的内容区域。<aside>定义页面的侧边栏内容。<bdi>允许您设置一段文本，使其脱离其父元素的文本方向设置。<command>定义命令按钮，比如单选按钮、复选框或按钮<details>用于描述文档或文档某个部分的细节<dialog>定义对话框，比如提示框<summary>标签包含details元素的标题<figure>规定独立的流内容（图像、图表、照片、代码等等）。<figcaption>定义<figure>元素的标题<footer>定义section或document的页脚。<header>定义了文档的头部区域<mark>定义带有记号的文本。<meter>定义度量衡。仅用于已知最大和最小值的度量。<nav>定义导航链接的部分。<progress>定义任何类型的任务的进度。<ruby>定义ruby注释（中文注音或字符）。<rt>定义字符（中文注音或字符）的解释或发音。<rp>在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容。<section>定义文档中的节（section、区段）。<time>定义日期或时间。<wbr>规定在文本中的何处适合添加换行符。表HTML5新增标签1.4综合案例2023/1/3第1章概述211.4.1用记事本编写一个网页文档1.4