第1章 网页制作与HTML5基础知识ppt课件（完整版）.pptx

《第1章 网页制作与HTML5基础知识ppt课件（完整版）.pptx》由会员分享，可在线阅读，更多相关《第1章 网页制作与HTML5基础知识ppt课件（完整版）.pptx（41页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第1章 网页制作与HTML5基础知识ppt课件（完整版）第1章网页制作与HTML5基础知识网页制作与HTML1基础知识第 1 章本书编写组网页设计与制作（微课版第3 版）第1章网页制作与HTML5基础知识1.1网页制作的基础知识1.2Dreamweaver CS6概述1.3网页标准技术与HTML 51.4综合实训案例第1章网页制作与HTML5基础知识学习目标 了解网页制作基础知识；了解网页制作基础知识； 了解网页标准技术及了解网页标准技术及HTML 5HTML 5常用标签，学会使用常用标签，学会使用Dreamweaver Dreamweaver CS6CS6制作网页。制作网页。第1章网页制作与

2、HTML5基础知识1.1网页制作的基础知识1.1.1 1.1.1 网页的定义和分类网页的定义和分类1 1按位置分类按位置分类按在网站中的位置的不同，网页可分为主页和内页。按在网站中的位置的不同，网页可分为主页和内页。2 2按表现形式分类按表现形式分类按表现形式的不同，网页可分为静态网页和动态网页按表现形式的不同，网页可分为静态网页和动态网页1.1.2 1.1.2 网页设计的相关概念网页设计的相关概念在网页制作过程中常常会遇到一些专业名词，如站点、发布、浏览器、在网页制作过程中常常会遇到一些专业名词，如站点、发布、浏览器、导航条、超链接、表单、导航条、超链接、表单、URLURL、IPIP地址及域

3、名，掌握这些专业名词的具地址及域名，掌握这些专业名词的具体含义才能轻松地制作网页。体含义才能轻松地制作网页。第1章网页制作与HTML5基础知识1.1网页制作的基础知识1.1.3 1.1.3 网页的基本组成元素网页的基本组成元素1 1LogoLogoLogoLogo，中文意思为标识、标志等，是整个网站对外的标识，中文意思为标识、标志等，是整个网站对外的标识。2 2BannerBannerBannerBanner，中文意思为旗帜或网幅，是一种由文本、图像和动画结合而，中文意思为旗帜或网幅，是一种由文本、图像和动画结合而成的网页栏目。成的网页栏目。BannerBanner的主要作用是显示网站的各种广

4、告，包括网站的主要作用是显示网站的各种广告，包括网站自身产品的广告和与其他企业合作放置的广告。自身产品的广告和与其他企业合作放置的广告。3 3导航栏导航栏导航栏是网页设计的重要内容，网页中的导航栏用于帮助用户快速访导航栏是网页设计的重要内容，网页中的导航栏用于帮助用户快速访问所需内容。根据网页的大小及内容多少，一个网页可以设置多个导问所需内容。根据网页的大小及内容多少，一个网页可以设置多个导航栏，还可以设置多级的导航栏以显示更多的导航内容。航栏，还可以设置多级的导航栏以显示更多的导航内容。第1章网页制作与HTML5基础知识1.1网页制作的基础知识1.1.3 1.1.3 网页的基本组成元素网页的

5、基本组成元素4 4内容栏内容栏内容栏是网页的主体，通常由一个或多个子栏组成，包含网页提供的内容栏是网页的主体，通常由一个或多个子栏组成，包含网页提供的绝大部分信息和服务项目。绝大部分信息和服务项目。5 5文本文本文本容量小，传输速度快，用户可以快速地浏览和下载，是网页主要文本容量小，传输速度快，用户可以快速地浏览和下载，是网页主要的信息载体。网页中文本的样式多变，风格不一，能吸引用户的网页的信息载体。网页中文本的样式多变，风格不一，能吸引用户的网页通常都具有美观的文本样式。通常都具有美观的文本样式。6 6图像图像图像比文本更具生动性和直观性，它可以传递一些文本不能传递的信图像比文本更具生动性和

6、直观性，它可以传递一些文本不能传递的信息，息，LogoLogo、背景等一般都是图像。、背景等一般都是图像。第1章网页制作与HTML5基础知识1.1网页制作的基础知识1.1.3 1.1.3 网页的基本组成元素网页的基本组成元素7 7按钮按钮按钮的大小没有具体的规定，需注意的是，按钮要和网页的整体效果按钮的大小没有具体的规定，需注意的是，按钮要和网页的整体效果保持协调。按钮一般采用背景较淡、文字颜色较深的形式，也可采用保持协调。按钮一般采用背景较淡、文字颜色较深的形式，也可采用对比度较强的颜色。对比度较强的颜色。8 8FlashFlash动画动画FlashFlash动画越来越多地在网页设计中应用，

7、适合自身风格的动画元素可动画越来越多地在网页设计中应用，适合自身风格的动画元素可以展现网站形象或者展示信息。以展现网站形象或者展示信息。9 9版尾版尾版尾是整个网页的收尾部分。在这部分内容中，可以声明网页的版权、版尾是整个网页的收尾部分。在这部分内容中，可以声明网页的版权、法律依据，以及为用户提供各种提示信息等。法律依据，以及为用户提供各种提示信息等。第1章网页制作与HTML5基础知识1.1网页制作的基础知识1.1.4 网页制作工具1“记事本”程序HTMLHTML代码可以使用代码可以使用WindowsWindows操作操作系统自带的系统自带的“记事本记事本”（NotepadNotepad）进行

8、编写。使用时只需选择进行编写。使用时只需选择“开开始始”“”“程序程序”“”“附件附件”命令命令即可找到即可找到“记事本记事本”程序程序“开始”菜单中的“记事本”程序第1章网页制作与HTML5基础知识1.1网页制作的基础知识1.1.4 网页制作工具2EditPlus编辑器EditPlusEditPlus是一款非常好用的是一款非常好用的HTMLHTML编辑器，除了支持颜色标记、编辑器，除了支持颜色标记、HTMLHTML标记，同时还支持标记，同时还支持C C语言、语言、C+C+、JavaJava等编程语言。另外，等编程语言。另外，它还有完整的它还有完整的CSSCSS指令功能，编指令功能，编写网页代

9、码可达到事半功倍的效写网页代码可达到事半功倍的效果果第1章网页制作与HTML5基础知识1.1网页制作的基础知识1.1.4 网页制作工具2EditPlus编辑器EditPlusEditPlus是一款非常好用的是一款非常好用的HTMLHTML编辑器，除了支持颜色标记、编辑器，除了支持颜色标记、HTMLHTML标记，同时还支持标记，同时还支持C C语言、语言、C+C+、JavaJava等编程语言。另外，等编程语言。另外，它还有完整的它还有完整的CSSCSS指令功能，编指令功能，编写网页代码可达到事半功倍的效写网页代码可达到事半功倍的效果果第1章网页制作与HTML5基础知识1.1网页制作的基础知识1.

10、1.4 网页制作工具2EditPlus编辑器EditPlusEditPlus是一款非常好用的是一款非常好用的HTMLHTML编辑器，除了支持颜编辑器，除了支持颜色标记、色标记、HTMLHTML标记，同时标记，同时还支持还支持C C语言、语言、C+C+、JavaJava等编程语言。另外，它还有等编程语言。另外，它还有完整的完整的CSSCSS指令功能，编写指令功能，编写网页代码可达到事半功倍的网页代码可达到事半功倍的效果效果第1章网页制作与HTML5基础知识1.1网页制作的基础知识1.1.4 网页制作工具3网页开发工具是可视化的网页开发工具，强调是可视化的网页开发工具，强调“所见即所得（所见即所得

11、（What You See is What You What You See is What You GetGet）”，如，如Dreamweaver CS6Dreamweaver CS6。4图像处理软件在制作网页时常用的图像处理软件是在制作网页时常用的图像处理软件是PhotoshopPhotoshop和和FireworksFireworks。5动画制作软件FlashFlash动画是网页中普遍使用的一种动画，它需要使用动画是网页中普遍使用的一种动画，它需要使用FlashFlash软件进行制作。软件进行制作。GIFGIF动画可以使用动画可以使用FireworksFireworks或或Adobe I

12、mageReadyAdobe ImageReady进行制作。进行制作。6网页配色软件使用一些专门的网页配色软件可以方便地创建网页色彩方案，如玩转颜色使用一些专门的网页配色软件可以方便地创建网页色彩方案，如玩转颜色和网页本色等。某些网站也提供网页配色的设计，如蓝色理想等。和网页本色等。某些网站也提供网页配色的设计，如蓝色理想等。第1章网页制作与HTML5基础知识1.1网页制作的基础知识1.1.5 如何学好网页制作网页制作分为前台制作和后台制作，前台制作主要是生成静态网页，而后网页制作分为前台制作和后台制作，前台制作主要是生成静态网页，而后台制作则需要编写程序以实现网页与数据库的交互。台制作则需要

13、编写程序以实现网页与数据库的交互。学习网页制作是一个循序渐进的过程，除了需要勤学多练，还需要在美学学习网页制作是一个循序渐进的过程，除了需要勤学多练，还需要在美学方面有一定的积累。方面有一定的积累。 在学习网页制作时，应先从最简单的网页入手，由易到难。学习过程中在学习网页制作时，应先从最简单的网页入手，由易到难。学习过程中应注重理论联系实际，这样可增强学习兴趣。应注重理论联系实际，这样可增强学习兴趣。 网页制作不能闭门造车，需对优秀的网页进行分析和借鉴，同时也要不网页制作不能闭门造车，需对优秀的网页进行分析和借鉴，同时也要不断创新，大胆尝试各种制作方法。断创新，大胆尝试各种制作方法。 在学习网

14、页制作的初期阶段不必太关注网页设计语言，在有一定网页设在学习网页制作的初期阶段不必太关注网页设计语言，在有一定网页设计基础后，再学习一些语言（如计基础后，再学习一些语言（如HTMLHTML、JavaScriptJavaScript和和CSSCSS等）。等）。第1章网页制作与HTML5基础知识1.2Dreamweaver CS6概述1.2.1 启动与退出Dreamweaver CS6 启动启动DreamweaverDreamweaver的方法有两种：的方法有两种：（1 1）在桌面上找到）在桌面上找到DreamweaverDreamweaver程程序的快捷方式图标，用鼠标左键序的快捷方式图标，用鼠

15、标左键双击图标。双击图标。（2 2）打开）打开“开始开始”菜单菜单“程程序序”“Dreamweaver CS6”“Dreamweaver CS6”，用，用鼠标左键单击启动鼠标左键单击启动Dreamweaver Dreamweaver CS6CS6，打开的界面如图所示。，打开的界面如图所示。第1章网页制作与HTML5基础知识1.2Dreamweaver CS6概述1.2.2 Dreamweaver CS6的工作界面 用新建或打开一个网页的用新建或打开一个网页的方式进入方式进入Dreamweaver CS6Dreamweaver CS6的的工作界面，工作界面，下面将重点介绍工作界面中下面将重点介绍

16、工作界面中的文档工具栏、的文档工具栏、“属性属性”面面板和浮动面板组。板和浮动面板组。第1章网页制作与HTML5基础知识1.2Dreamweaver CS6概述1.2.2 Dreamweaver CS6的工作界面 1文档工具栏此工具栏包含一些按钮，提供各种此工具栏包含一些按钮，提供各种“文档文档”窗口视图（用户可以通过文窗口视图（用户可以通过文档工具栏在档工具栏在“代码代码”视图、视图、“拆分拆分”视图和视图和“设计设计”视图视图3 3种视图中切种视图中切换。换。第1章网页制作与HTML5基础知识1.2Dreamweaver CS6概述1.2.2 Dreamweaver CS6的工作界面2“属

17、性”面板“属性属性”面板主要用来检查和编辑当前选定的页面元素（如文本和插入面板主要用来检查和编辑当前选定的页面元素（如文本和插入的对象）的常用属性。的对象）的常用属性。“属性属性”面板中的内容根据选定的元素会有所不面板中的内容根据选定的元素会有所不同。同。第1章网页制作与HTML5基础知识1.2Dreamweaver CS6概述1.2.2 Dreamweaver CS6的工作界面3浮动面板组Dreamweaver CS6Dreamweaver CS6中的其中的其他面板统称为浮动面板他面板统称为浮动面板组组第1章网页制作与HTML5基础知识1.3 网页标准技术与HTML 51.3.1 网页结构语

18、言1XHTML 1.0结构语言XHTMLXHTML是由是由HTMLHTML发展而来的一种网页编写语言，也是目前最常见的网发展而来的一种网页编写语言，也是目前最常见的网页编写语言之一。页编写语言之一。20002000年年1 1月月2626日，日，XHTMLXHTML正式被正式被W3CW3C批准为网页设计批准为网页设计的国际标准语言，替代了早期的的国际标准语言，替代了早期的HTML 3.2HTML 3.2和和HTML 4.01HTML 4.01。2HTML 5结构语言随着智能手机、平板电脑等便携式数码设备的普及，传统的随着智能手机、平板电脑等便携式数码设备的普及，传统的XHTMLXHTML逐逐渐不

19、能满足人们对网页的图像显示与媒体播放的需求。基于此，渐不能满足人们对网页的图像显示与媒体播放的需求。基于此，W3CW3C和和苹果等公司协作制定了网页结构语言标准，即苹果等公司协作制定了网页结构语言标准，即HTML 5HTML 5标准。标准。20132013年年5 5月月6 6日，日，HTML 5.1HTML 5.1草案正式公布。草案正式公布。第1章网页制作与HTML5基础知识： 网页标题 一个典型的HTML 5文档结构如下所示第1章网页制作与HTML5基础知识1.3 网页标准技术与HTML 51.3.2 网页表现语言CSSCSS是一种由是一种由W3CW3C定义的数据表格式，其作用是为定义的数据

20、表格式，其作用是为XMLXML、HTMLHTML及及XHTMLXHTML等结构化的文档添加样式描述，从而实现对文档中内容的排版等结构化的文档添加样式描述，从而实现对文档中内容的排版和美化。和美化。CSSCSS为标记语言提供了一种样式描述，定义了其中的元素显示方式。为标记语言提供了一种样式描述，定义了其中的元素显示方式。CSSCSS在设计领域是一个突破，仅通过在设计领域是一个突破，仅通过CSSCSS就能够使网页开发者控制所有出现就能够使网页开发者控制所有出现在网页中的外观及布局，并且可以为每种标记语言的元素和应用该元素在网页中的外观及布局，并且可以为每种标记语言的元素和应用该元素的每个页面定义所

21、需要的样式。从而实现，简单地改变样式，所有与之的每个页面定义所需要的样式。从而实现，简单地改变样式，所有与之相关的元素都会自动更新。相关的元素都会自动更新。CSSCSS的出现还使网页文档中结构与表现的分离成为可能。的出现还使网页文档中结构与表现的分离成为可能。第1章网页制作与HTML5基础知识1.3 网页标准技术与HTML 51.3.3 网页行为语言网页行为语言包括多种类型，如网页行为语言包括多种类型，如JavaScriptJavaScript、JScriptJScript和和VBScriptVBScript等。这些语等。这些语言的语法各有特点，且支持的言的语法各有特点，且支持的WebWeb浏

22、览器各不相同，使网页开发者往往浏览器各不相同，使网页开发者往往需要花费大量的精力进行调试，因此，需要花费大量的精力进行调试，因此，ECMAECMA（european computer european computer manufacturers associationmanufacturers association，欧洲计算机制造商协会），一个国际性信息和，欧洲计算机制造商协会），一个国际性信息和电信标准化组织，以电信标准化组织，以NetScapeNetScape（网景）公司开发的（网景）公司开发的JavaScriptJavaScript脚本语言为脚本语言为基础，制定了基础，制定了ECMA

23、ScriptECMAScript脚本语言标准。脚本语言标准。ECMAScriptECMAScript通过一种被称为通过一种被称为DOMDOM（document object modeldocument object model，文档对象模，文档对象模型）的技术实现对各种结构化文档的控制，可以根据程序的指令，动态型）的技术实现对各种结构化文档的控制，可以根据程序的指令，动态地改变文档中的内容及描述文档的地改变文档中的内容及描述文档的CSSCSS代码。代码。第1章网页制作与HTML5基础知识1.3 网页标准技术与HTML 51.3.4 在Dreamweaver CS6中创建HTML 5文档1在Dr

24、eamweaver CS6中创建HTML 5文档的操作步骤在在Dreamweaver CS6Dreamweaver CS6的的“新建文档新建文档”对话对话框中选择文档类型，默认为框中选择文档类型，默认为“XHTML 1.0 “XHTML 1.0 Transitional”Transitional”，若在，若在“文档类型文档类型”下拉列下拉列表中选择表中选择“HTML 5”“HTML 5”，则可创建，则可创建HTML 5HTML 5文档，如图文档，如图1-161-16所示。所示。2 2HTML 5空白文档对应的代码单击单击“文档文档”工具栏中的工具栏中的“代码代码”按钮，按钮，可切换到可切换到“

25、代码代码”视图，如图所示。视图，如图所示。第1章网页制作与HTML5基础知识1.3 网页标准技术与HTML 51.3.4 在Dreamweaver CS6中创建HTML 5文档1在Dreamweaver CS6中创建HTML 5文档的操作步骤在在Dreamweaver CS6Dreamweaver CS6的的“新建文档新建文档”对话框中选择文档类型，默认为对话框中选择文档类型，默认为“XHTML 1.0 Transitional”“XHTML 1.0 Transitional”，若在，若在“文档类型文档类型”下拉列表中选择下拉列表中选择“HTML “HTML 5”5”，则可创建，则可创建HTM

26、L 5HTML 5文档。文档。2HTML 5空白文档对应的代码单击单击“文档文档”工具栏中的工具栏中的“代码代码”按钮，可切换到按钮，可切换到“代码代码”视图。视图。第1章网页制作与HTML5基础知识1.3 网页标准技术与HTML 51.3.4 在Dreamweaver CS6中创建HTML 5文档3HTML 5语法特色（1 1）HTML 5HTML 5所有标签必须闭合所有标签必须闭合（2 2）HTML 5HTML 5所有标签和属性必须小写所有标签和属性必须小写（3 3）属性值必须加引号）属性值必须加引号在在HTML 5HTML 5中，必须为属性值加引号，如：中，必须为属性值加引号，如：。（4

27、 4）所有属性都要被赋值）所有属性都要被赋值与与HTMLHTML不同，在不同，在HTML 5HTML 5中，属性必须要被赋值。如果属性没有值，则把中，属性必须要被赋值。如果属性没有值，则把属性名作为属性值赋给属性，如属性名作为属性值赋给属性，如。（5 5）不要在注释内容中使用）不要在注释内容中使用“-”“-”“-”“-”只能出现在注释的开头和结尾。只能出现在注释的开头和结尾。第1章网页制作与HTML5基础知识1.3 网页标准技术与HTML 51.3.5 HTML 5常用标签1布局标签（1 1）divdiv标签标签divdiv是是divisiondivision（划分）的缩写，其含意是区划、分割

28、区域。在网页文档中，（划分）的缩写，其含意是区划、分割区域。在网页文档中，标签的作用是将标签的作用是将HTML 5HTML 5文档划分成若干个区域，其格式如下：文档划分成若干个区域，其格式如下：此处是此处是divdiv管理的区域管理的区域divdiv标签本身没有默认显示的边框、背景色等修饰，它的高度与网页文字高标签本身没有默认显示的边框、背景色等修饰，它的高度与网页文字高度相等，宽度与父标签的宽度相等。度相等，宽度与父标签的宽度相等。（2 2）ul ul、ol ol、li li标签标签、和和标签用来实现普通的项目列表，其分别表示无序列表、有标签用来实现普通的项目列表，其分别表示无序列表、有序列

29、表和列表的项目。序列表和列表的项目。第1章网页制作与HTML5基础知识 咖啡咖啡 茶茶 红茶红茶 绿茶绿茶 中国茶中国茶 非洲茶非洲茶 牛奶牛奶例如，分别定义一个无序列表和一个有序列表的代码如下：第1章网页制作与HTML5基础知识1.3 网页标准技术与HTML 51.3.5 HTML 5常用标签1布局标签（3 3）dl dl、dt dt、dddd标签标签、标签用来实现定义型列表，可对列表条目进行简短的说标签用来实现定义型列表，可对列表条目进行简短的说明，具有定义术语和定义解释两个功能。明，具有定义术语和定义解释两个功能。（4 4）p p标签标签HTML 5HTML 5中的段落标签中的段落标签，

30、用于将一个网页中包含的文本与上下文分开。，用于将一个网页中包含的文本与上下文分开。在默认状态下，段落文本的上方和下方出现段落时，段落之间的间距默认为在默认状态下，段落文本的上方和下方出现段落时，段落之间的间距默认为字体高度的字体高度的50%50%，以把各段落明显隔开。，以把各段落明显隔开。第1章网页制作与HTML5基础知识1.3 网页标准技术与HTML 51.3.5 HTML 5常用标签1布局标签（5 5）h1h1h6h6标签标签HTML 5HTML 5提供了提供了6 6对标签对：对标签对：，用于对文本中的标题进行操作。使用，用于对文本中的标题进行操作。使用标签对标签对的标题是最大的标题，而使

31、用的标题是最大的标题，而使用标签对的标题则是最小的标题。标签对的标题则是最小的标题。（6 6）tabletable、tr tr、thth、td td、theadthead、tbodytbody、tfoottfoot标签标签表格元素通常由表格的容器标签对表格元素通常由表格的容器标签对、表格标题标签对、表格标题标签对、表格行标签对、表格行标签对、表头单元格标签对、表头单元格标签对、单元格标签对、单元格标签对组成。组成。第1章网页制作与HTML5基础知识例如，插入一个例如，插入一个2行行3列的表格，设计结果如图列的表格，设计结果如图1-23所示。可通过对比所示。可通过对比“设计设计”视图中视图中“属

32、性属性”面板的属性值与这些值在代码中的应用，面板的属性值与这些值在代码中的应用，第1章网页制作与HTML5基础知识1.3 网页标准技术与HTML 51.3.5 HTML 5常用标签2内容标签内容标签是用来显示网页中各种内容的标签。其特点是基于行内布局，相内容标签是用来显示网页中各种内容的标签。其特点是基于行内布局，相邻的内容标签不会换行，在一行中可以显示多个内容标签。常见的内容标邻的内容标签不会换行，在一行中可以显示多个内容标签。常见的内容标签主要有以下几种。签主要有以下几种。（1 1）a a标签标签a a是是anchoranchor（锚）的第一个字母，（锚）的第一个字母，标签是成对出现的，即

33、标签是成对出现的，即。该标签用于给网页添加超链接，它包含的内容可以是文本或图像，是一种该标签用于给网页添加超链接，它包含的内容可以是文本或图像，是一种典型的没有固定形状、大小的标签。典型的没有固定形状、大小的标签。例如，链接到一个主页面的超链接代码如下：例如，链接到一个主页面的超链接代码如下：ahref=返回网站首页返回网站首页第1章网页制作与HTML5基础知识例如，链接到一个主页面的超链接代码如下：a href= 返回网站首页返回网站首页以上代码实现的设计效果如图以上代码实现的设计效果如图1-241-24所示，在浏览器中的运行效果如图所示，在浏览器中的运行效果如图所示。若单击所示。若单击“返

34、回网站首页返回网站首页”，则可打开，则可打开“西安风光西安风光”主页面。主页面。第1章网页制作与HTML5基础知识1.3 网页标准技术与HTML 51.3.5 HTML 5常用标签2内容标签（2 2）brbr标签标签标签是一个简单的换行符，因为标签是一个简单的换行符，因为标签是一个单独的标签，所以在标签是一个单独的标签，所以在使用时必须使用使用时必须使用“/”“/”对其进行闭合处理，代码如下：对其进行闭合处理，代码如下：（3 3）imgimg标签标签imgimg是是imageimage（图像）的缩写，（图像）的缩写，标签的作用是在网页中显示各种图像内标签的作用是在网页中显示各种图像内容。容。标

35、签是一个单独的标签，也要用标签是一个单独的标签，也要用“/”“/”对其进行闭合处理。对其进行闭合处理。（4 4）spanspan标签标签标签用于表示范围，通常用于为文本或者内联标签定义特殊的样式，标签用于表示范围，通常用于为文本或者内联标签定义特殊的样式，修饰特定内容和局部区域等。修饰特定内容和局部区域等。第1章网页制作与HTML5基础知识例如，在下面一段文字中为某些关键词语或语句应用不同的文字样式，代码如下：设计网页是一项从艺术设计到页面制作再到后台开发的设计网页是一项从艺术设计到页面制作再到后台开发的系统工程系统工程，需要应用多种技术，使用各种相关的软件才，需要应用多种技术，使用各种相关的

36、软件才能完成。在学习设计网页时，需要首先能完成。在学习设计网页时，需要首先了解网页的各种技术了解网页的各种技术，网页布局、网页配色，以及涉及的软件。，网页布局、网页配色，以及涉及的软件。除此之外，除此之外，使用最新版本的网页制作软件也可以最大限度地提高网页制作使用最新版本的网页制作软件也可以最大限度地提高网页制作的效率的效率。第1章网页制作与HTML5基础知识1.4 综合实训案例1.4.1 用文本文档编写一个网页文档任务：用文本文档编写网页文档操作步骤：操作步骤： 选择选择“开始开始”“”“程序程序”“”“附件附件”“”“记事本记事本”命令，打开记事本。命令，打开记事本。 在记事本文档中输入下

37、面的代码，浏览器中显示的效果如图所示。在记事本文档中输入下面的代码，浏览器中显示的效果如图所示。第1章网页制作与HTML5基础知识1.4 综合实训案例1.4.2 用Dreamweaver CS6编写网页文档任务：用Dreamweaver CS6制作简单网页操作步骤如下。操作步骤如下。 打开打开Dreamweaver CS6Dreamweaver CS6，在，在“设计设计”视图中输入一首古诗，视图中输入一首古诗， 切换到切换到“代码代码”视图查看代码。保存网页文档。可按视图查看代码。保存网页文档。可按F12F12键进行浏览，查看结果。键进行浏览，查看结果。第1章网页制作与HTML5基础知识1.4

38、 综合实训案例1.4.3 编写代码实现简单网页任务：上网浏览一个网页，并查看其源代码操作步骤如下。操作步骤如下。 打开新浪网首页。打开新浪网首页。 在菜单栏中选择在菜单栏中选择“查看查看”“”“源文件源文件”命令，查看当前网页的源代码。命令，查看当前网页的源代码。 将此段代码复制并粘贴到打开的记事本文档中。将此段代码复制并粘贴到打开的记事本文档中。 在代码中仔细找一找本章讲过的有关标签，看看这些标签在网页中的作用。在代码中仔细找一找本章讲过的有关标签，看看这些标签在网页中的作用。第1章网页制作与HTML5基础知识1.4 综合实训案例1.4.3 编写代码实现简单网页任务：在记事本中编写代码，实现

39、一个网页操作步骤如下。操作步骤如下。 打开记事本，在其中编写代打开记事本，在其中编写代码。码。 保存为保存为shici.txtshici.txt文件后，将其文件后，将其扩展名扩展名.txt.txt改为改为.html.html，即此时，即此时文件名为文件名为shici.htmlshici.html。 双击该文件，在浏览器中的双击该文件，在浏览器中的运行效果如图运行效果如图1-331-33所示。注意所示。注意在浏览器中观察代码中的文字在浏览器中观察代码中的文字“古诗一首古诗一首”的位置。的位置。第1章网页制作与HTML5基础知识1.4 综合实训案例1.4.3 编写代码实现简单网页任务：在“设计”视

40、图中插入图像操作步骤如下。操作步骤如下。 打开打开Dreamweaver CS6Dreamweaver CS6，在，在“设计设计”视图中插入事先视图中插入事先准备好的图像准备好的图像fengjing1.jpgfengjing1.jpg。 切换到切换到“代码代码”视图查看视图查看代码，如图代码，如图1-341-34所示。保存所示。保存网页文档。按网页文档。按F12F12键进行浏键进行浏览，查看结果。览，查看结果。第1章网页制作与HTML5基础知识本章小结本章介绍了网页制作基础知识、网页标准技术及本章介绍了网页制作基础知识、网页标准技术及HTML 5HTML 5常用标签，常用标签，并用并用Dreamweaver CS6Dreamweaver CS6制作了一些简单网页。制作了一些简单网页。