《HTML-CSS-JavaScript网页制作三合一案例教程》教学课件-01第一章

主编：徐照兴、谭鸿健、郑宁健HTML+CSS+JavaScript网页制作

三合一案例教程第一章网站开发入门HTML+CSS+JavaScript网页制作三合一案例教程

1

了解网站开发流程

2

创建Dreamweaver站点

3

制作简单的HTML+CSS

页面

目录页ContentsPage案例一了解网站开发流程网站的创立需要经历前期准备〔需求分析〕、中期制作和后期测试发布3个大的阶段。前期准备包括了解网站的业务背景、明确网站的设计风格、确定网站的内容等；中期制作主要包括创立站点、制作页面、制作样式；后期的测试和发布工作包括检查页面效果是否美观、链接是否完好、是否与浏览器兼容，以及如何发布网站等。在本案例中，我们将以一个汽车厂商网站MACACO的开发流程为例，让读者能够从宏观上掌握一个网站的制作流程，为后面的学习奠定根底。案例说明案例一了解网站开发流程网站开发流程从整体上来说可以分成3大局部，分别是网站设计、网站制作和后期维护，如图1-1所示。在这3局部中，本书着重介绍的是网站制作局部，强调3个要点的讲解：设置站点、搭建网页主体结构层、搭建网页样式层。案例步骤一、网页、网站和主页简单来说，网页就是我们上网时在浏览器中翻开的一个个画面。网页中可以包含文字、图像、表格、超链接、声音、影像等，其中文字、图像、超链接是组成网页最根本的3个元素。网站就是一组相关网页的集合，是通过Internet向全世界发布信息的载体。主页就是翻开某个网站时显示的第一个网页，又叫首页。每个网站都有一个主页，通过它可以翻开网站的其他页面。主页文件根本名一般为index或default，如、、和等。二、Internet，IP地址和域名Internet的全称是Internetwork，中文称为因特网，是集现代计算机技术和通信技术于一体，基于TCP/IP协议将全世界不同国家、不同地区、不同部门和不同类型的计算机、国家骨干网、广域网、局域网通过网络互联设备连接而成的、全球最大的开放式计算机网络。因特网上连接了不计其数的效劳器和客户机，每一个主机在因特网上都有一个唯一的地址，我们称这个地址为IP地址〔InternetProtocolAddress〕。IP地址由4个小于256的数字组成，数字之间用点间隔。例如，“26〞就是一个IP地址。由于IP地址在使用过程中难于记忆和书写，人们又开发了一种与IP地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们只需要在浏览器地址栏中输入搜狐网站的域名“sohu〞，然后按【Enter】键就可以访问搜狐网站了。三、WWW，HTTP，URL和浏览器URL：统一资源标识符，也称为网址，这是世界通用的负责给万维网上的资源〔如网页〕定位的系统。一个完整的URL由通信协议名称、域名或IP地址、资源在效劳器中的路径和文件名4局部组成，如图1-5所示。WWW是WorldWideWeb的缩写，中文称为“万维网〞，也可简称为Web，它是互联网上的一个资料空间，在这个空间中，任何一个资源都由“统一资源标识符〞〔URL〕标识，并利用超文本传输协议〔HypertextTransferProtocol，HTTP〕传送给使用者。HTTP：超文本传送协议，它负责规定浏览器和效劳器怎样互相交流。HTML：超文本标记语言，它使用标签来定义网页结构，我们将在后面具体学习。浏览器：是WWW效劳的客户端浏览程序。使用它可以向万维网效劳器发送各种请求，并对从效劳器发来的超文本信息进行解释和显示。案例二创立Dreamweaver站点Dreamweaver是由美国Adobe公司推出的一款专业的网页编辑软件，它集网页制作和网站管理于一体，并提供网页的可视化编辑和HTML代码编辑两种操作界面，能够有效地开发和维护基于Web标准的网站和应用程序，是网页制作者的首选。本案例通过创立一个贯穿全书的站点，学习Dreamweaver操作界面和站点的创立。养成在制作网页前先建立站点的好习惯，可以为以后系统地管理和维护网站打好根底。案例说明案例二创立Dreamweaver站点站点是一个网站中所有文件和资源的集合。用户可以使用Dreamweaver在计算机上创立站点和网页，然后将站点上传到Web效劳器，还可以随时上传更新的文件来对站点进行维护。使用Dreamweaver创立站点的方法很简单，下面我们便来学习在本机上创立静态站点的方法。案例步骤导出当前选定的站点复制当前选定的站点编辑当前选定的站点删除当前选定的站点一、DREAMWEAVER工作界面介绍启动Dreamweaver后，默认情况下将进入其起始页。在其起始页中单击“新建〞列中的任一项，将会创立一个相应格式的新文档，并进入DreamweaverCS6工作界面。此处我们单击“HTML〞项，创立一个.html格式的文档并进入DreamweaverCS6工作界面，如图1-11所示。应用程序栏位于工作区顶部，左侧包括常用功能区和菜单栏，右侧包括工作区切换器和程序窗口控制按钮。

菜单栏几乎集中了DreamweaverCS6的全部操作命令，利用这些命令可以编辑网页、管理站点以及设置操作界面等。要执行某项命令，可首先单击主菜单名翻开其下拉菜单，然后用鼠标单击相应菜单项。1．应用程序栏文档标签栏位于应用程序栏下方，左侧显示当前翻开的所有网页文档的名称及其关闭按钮；右侧显示当前文档在本地磁盘中的保存路径以及复原按钮；下方显示当前文档中的包含文档〔如CSS文档〕以及链接文档。当用户翻开多个网页时，通过单击文档标签可在各网页之间切换。另外，单击下方的包含文档或链接文档，可翻开相应文档，如图1-12所示。2．文档标签栏利用文档工具栏中左侧的按钮可以在文档的不同视图之间快速切换，如图1-13所示。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档相关的常用命令和选项。3．文档工具栏A．显示“代码〞视图B．显示“代码〞视图和“设计〞视图

C．显示“设计〞视图D．实时预览视图E．多屏幕

F．在浏览器中预览/调试G．文件管理H．W3C验证

I．检查浏览器兼容性J．可视化助理K．刷新设计视图L．文档标题状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息，如图1-15所示。4．状态栏其中，标签选择器的作用很大，它显示了当前光标所在位置或当前选定内容的标签层次结构〔HTML网页文档就是由一个个标签组成的，我们将在后面讲解〕，单击某个标签可以选中网页中该标签所代表的内容，如单击<table>标签，可选中网页中与之对应的表格。使用属性检查器可以检查和编辑当前选定网页元素〔如文本和插入的对象〕的最常用属性。属性检查器的内容会根据选定元素的变化而变化。例如，如果选择页面中的图像，那么属性检查器将显示图像属性〔如图像的文件路径、图像的宽度和高度、图像周围的边框等〕，如图1-16〔a〕所示；如果选择文本，那么属性检查器又会显示文本的相关属性，如图1-16〔b〕所示。5．属性检查器〔a〕〔b〕“插入〞面板包含用于创立和插入对象〔如表格、图像和链接〕的按钮，这些按钮按几个类别进行组织，默认显示“常用〞类别，如图1-17〔a〕所示；也可以单击其右侧的下拉三角按钮，从弹出的列表中选择其他类别，如图1-17〔b〕所示。例如，要在页面中插入图像，可先定位插入点，然后单击“插入〞面板“常用〞类别中的“图像:图像〞按钮。6．“插入〞面板〔a〕〔b〕“文件〞面板用于管理站点中的所有文件和文件夹，包括素材文件和网页文件，如图1-18〔a〕所示。

使用“CSS样式〞面板可以非常方便地新建、删除、编辑和应用样式，以及附加外部样式表等，如图1-18〔b〕所示。7．“文件〞和“CSS样式〞面板〔a〕〔b〕利用“首选参数〞对话框可以修改Dreamweaver的系统参数。选择菜单栏中的“编辑〞>“首选参数〞菜单或按快捷键【Ctrl+U】可翻开该对话框，如图1-19所示。8．工作环境参数设置二、新建和保存网页文档在DreamweaverCS6中可以创立两种形式的网页文档，一种是直接创立空白网页文档，另一种是通过DreamweaverCS6的内置模板创立具有一定内容和样式的网页文档。三、翻开、预览和关闭网页文档假设要对已有的网页文档进行编辑，就需要在Dreamweaver中翻开该文档。另外，在Dreamweaver中对文档进行编辑后，如果想查看它在浏览器中的效果，可执行预览操作。案例三制作简单的HTML+CSS页面本案例制作的网页效果如图1-25所示。学习本案例的主要目的是让初学者在开始学习网页制作之前先了解一下网页的主要构成。符合Web标准的网页一般由3局部组成：结构、表现和行为，其中结构层由HTML代码构成，表现层由CSS层叠样式表构成，行为层由JavaScript脚本语言构成。案例说明案例二创立Dreamweaver站点本案例的实施过程分为“构建HTML结构〞和“构建CSS样式〞两个局部。案例步骤一、构建HTML结构二、构建CSS样式12图1-29设置CSS样式前后的效果图比照一、HTML与CSS简介HTML是HyperTextMarkupLanguage〔超文本标记语言〕的英文缩写，是用于设计网页的主要语言。网页中的文本、图像、表格、超链接等内容，都是由HTML中的标签定义和组织的。用HTML编写的超文本文档称为HTML文档，扩展名为“.html〞，也就是网页。CSS〔CascadingStyleSheets〕中文名为“层叠样式表〞，用于设置网页中各标签的样式。“样式〞是指网页中文本的大小、颜色以及图片的边框、位置等。“层叠〞是指当在HTML文件中引用多个样式文件时，浏览器将依据层叠顺序处理，以防止发生冲突。在网页制作中，HTML属于网页的结构层局部，用来确定网页的内容和结构；CSS属于网页的表现层局部，用于设置网页的样式，主要包括各种标签的外观、大小和位置等。HTML和CSS既相互独立又相互联系，熟练掌握它们就能制作出各种精彩的网页。二、HTML根底语法HTML不是一种编程语言，而是一种标记语言，它使用标记标签〔简称标签〕来描述网页。也就是说，HTML文档中实质上只包含HTML标签和纯文本〔如在Dreamweaver的代码视图中看到的内容〕。浏览器的一个作用就是读取HTML文档，并解释其中的一个个标签，然后以我们熟悉的“网页〞形式来显示。<html><body><h1>MyFirstHeading</h1><p>Myfirstparagraph.</p></body></html>图1-30简单标签例如HTML标签是由尖括号括起来的关键词，绝大多数HTML标签都是成对出现的，包含标记头<>和标记尾</>。标记头是开始标签，标记尾是结束标签，中间是元素内容，如段落标签<p></p>。除双标签外也存在少量的单标签，如换行标签<br/>。

HTML文档源码中一行可以写多个不同的标签，也可将一对标签写在不同的行中，但每对标签必须嵌套使用，不能交叉使用。下面的列表中列出了标签的正确用法和错误用法。1．HTML标签概述格式1：2．HTML标签格式<标签名>标签内容〔文本或超文本〕<／标签名>例如，定义一个标题的标签及格式：<h1>这是一号标题</h1>格式2：<标签名属性名1＝"属性值1"属性名2＝"属性值2">标签内容〔文本或超文本〕</标签名>格式3：<标签名/>此种标签称为单标签，比方换行标签<br/>属性都是可选择的，如果标签中有属性，那么标签名和属性名之间要用空格隔开，各属性值用英文输入法下的双引号括起来。例如，实现超链接的代码如下所示。<ahref="web/index.html"target="_blank">点击我吧</a>三、网页的根本结构HTML文档默认被分为两局部：文档头<head>和文档体<body>，它们都包含在<html></html>标签对中。1．整个文档<html></html>网页中的所有代码内容都包含在<html></html>标签对中。起始标签<html>用于HTML文档的最前边，用来标识HTML文档的开始；而结束标签</html>恰恰相反，它放在HTML文档的最后面，用来标识HTML文档的结束，两个标签必须成对使用。<head>标签是HTML文档所有头部元素的容器，它里面的元素用来描述HTML文档的相关信息，如指定网页标题、指示浏览器在何处找到CSS样式表等，不会在浏览器中显示。下面讲解在<head>标签中常用的标签元素，这些标签只能放在<head></head>标签对中。2．文档头<head></head>1〕<title></title>2〕<meta/>3〕<style></style>4〕<link></link>5〕<script></script><body>标签是HTML文档的主体局部，在此标签对之间可包含<p></p>、<h1></h1>、<div></div>、<a/>和<br/>等众多标签，它们定义的文本和图像等都会在浏览器中显示出来。3．文档体<body></body>DOCTYPE是英文“documenttype〔文档类型〕〞的简写，是HTML与XHTML中的文档声明，简称为DTD声明，其作用是告知浏览器当前文档所使用的是哪种HTML或XHTML标准。DOCTYPE声明位于文档最前端，标签为<!DOCTYPE>，它不属于文档的结构局部。

只有确定了一个正确的DOCTYPE，HTML或XHTML中的标签和CSS才能生效，它甚至对网页中的JavaScript脚本都会有所影响。该标签可声明3种DTD类型，分别表示严格版〔Strict〕、过渡版〔Transitional〕和基于框架〔Frameset〕的HTML文档。4．文档类型<!DOCTYPE>四、静态页面与动态页面从大的方面来讲，网页可分为静态网页〔HTML〕和动态网页〔DHTML〕。静态网页完全采用HTML语言编写，后缀名一般为.htm、.html、.shtml和.xml等。动态网页使用的语言一般为HTML＋ASP、HTML＋PHP或HTML＋JS