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

主编：徐照兴、谭鸿健、郑宁健;第一章 网站开发入门;;案例一 了解网站开发流程;案例一 了解网站开发流程;一、网页、网站和主页;二、Internet，IP地址和域名;三、WWW，HTTP，URL和浏览器;HTTP：超文本传送协议，它负责规定浏览器和服务器怎样互相交流。 HTML：超文本标记语言，它使用标签来定义网页结构，我们将在后面具体学习。 浏览器：是WWW服务的客户端浏览程序。使用它可以向万维网服务器发送各种请求，并对从服务器发来的超文本信息进行解释和显示。;案例二 创建Dreamweaver站点;案例二 创建Dreamweaver站点;一、DREAMWEAVER工作界面介绍;应用程序栏位于工作区顶部，左侧包括常用功能区和菜单栏，右侧包括工作区切换器和程序窗口控制按钮。菜单栏几乎集中了Dreamweaver CS6的全部操作命令，利用这些命令可以编辑网页、管理站点以及设置操作界面等。要执行某项命令，可首先单击主菜单名打开其下拉菜单，然后用鼠标单击相应菜单项。;文档标签栏位于应用程序栏下方，左侧显示当前打开的所有网页文档的名称及其关闭按钮；右侧显示当前文档在本地磁盘中的保存路径以及还原按钮；下方显示当前文档中的包含文档（如CSS文档）以及链接文档。当用户打开多个网页时，通过单击文档标签可在各网页之间切换。另外，单击下方的包含文档或链接文档，可打开相应文档，如图1-12所示。;利用文档工具栏中左侧的按钮可以在文档的不同视图之间快速切换，如图1-13所示。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档相关的常用命令和选项。;状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息，如图1-15所示。;使用属性检查器可以检查和编辑当前选定网页元素（如文本和插入的对象）的最常用属性。属性检查器的内容会根据选定元素的变化而变化。例如，如果选择页面中的图像，则属性检查器将显示图像属性（如图像的文件路径、图像的宽度和高度、图像周围的边框等），如图1-16（a）所示；如果选择文本，则属性检查器又会显示文本的相关属性，如图1-16（b）所示。;“插入”面板包含用于创建和插入对象（如表格、图像和链接）的按钮，这些按钮按几个类别进行组织，默认显示“常用”类别，如图1-17（a）所示；也可以单击其右侧的下拉三角按钮，从弹出的列表中选择其他类别，如图1-17（b）所示。例如，要在页面中插入图像，可先定位插入点，然后单击“插入”面板“常用”类别中的“图像:图像”按钮。;“文件”面板用于管理站点中的所有文件和文件夹，包括素材文件和网页文件，如图1-18（a）所示。使用“CSS样式”面板可以非常方便地新建、删除、编辑和应用样式，以及附加外部样式表等，如图1-18（b）所示。;利用“首选参数”对话框可以修改Dreamweaver的系统参数。选择菜单栏中的“编辑”“首选参数”菜单或按快捷键【Ctrl+U】可打开该对话框，如图1-19所示。;二、新建和保存网页文档;三、打开、预览和关闭网页文档;案例三 制作简单的HTML+CSS页面;案例二 创建Dreamweaver站点;一、HTML与CSS简介;二、HTML基础语法;HTML标签是由尖括号括起来的关键词，绝大多数HTML标签都是成对出现的，包含标记头 和标记尾 / 。标记头是开始标签，标记尾是结束标签，中间是元素内容，如段落标签p/p。除双标签外也存在少量的单标签，如换行标签br/。HTML文档源码中一行可以写多个不同的标签，也可将一对标签写在不同的行中，但每对标签必须嵌套使用，不能交叉使用。下面的列表中列出了标签的正确用法和错误用法。;;三、网页的基本结构;head标签是HTML文档所有头部元素的容器，它里面的元素用来描述HTML文档的相关信息，如指定网页标题、指示浏览器在何处找到CSS样式表等，不会在浏览器中显示。下面讲解在head标签中常用的标签元素，这些标签只能放在head/head标签对中。;body标签是HTML文档的主体部分，在此标签对之间可包含p/p、h1/h1、div/div、a/和br/等众多标签，它们定义的文本和图像等都会在浏览器中显示出来。;DOCTYPE是英文“document type（文档类型）”的简写，是HTML与XHTML中的文档声明，简称为DTD声明，其作用是告知浏览器当前文档所使用的是哪种HTML或XHTML规范。DOCTYPE声明位于文档最前端，标签为!DOCTYPE，它不属于文档的结构部分。只有确定了一个正确的DOCTYPE，HTML或XHTML中的标签和CSS才能生效，它甚至对网页中的JavaScript脚本都会有所影响。该标签可声明3种DTD类型，分别表示严格版（Strict）、过渡版（Transitional）和基于框架（Fram