网页设计与制作案例教程 PPT
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Page 31
2.4.2 Dreamweaver 8的工作环境
Dreamweaver 8的工作界面主要包括： 菜单栏、工具栏、文档窗口、属性面板、面 板组等。
Page 32
1．菜单栏
Dreamweaver 8的菜单栏包含10类菜单： 文件、编辑、查看、插入、修改、文本、命 令、站点、窗口、帮助。
Page 17
1．文本
一般网页中最多的内容是文本，可以根 据需要对其字体、大小、颜色、底纹、边框 等属性进行设置
Page 18
2．图像
丰富多彩的图像是美化网页必不可少的 元 素 ， 用 于 网 页 上 的 图 像 一 般 为 jpg 格 式 和 gif格式，即以jpg和gif为扩展名的图像文件。
Page 40
4．属性面板
属性面板用于查看和更改所选取的对象 或文本的各种属性，每个对象有不同的属性。
Page 41
5．面板组
Dreamweaver 8包括多个面板，这些面板 都有不同的功能，将它们叠加在一起便形成 了 面 板 组 。 面 板 组 主 要 包 括 “ CSS” 面 板 、 “应用程序”面板、“标签检查器”面板、 “文件”面板、“框架”面板、“历史记录” 面板。
Page 47
4．使用索引查找所需的信息
使用Dreamweaver 8帮助系统的索引可以 快速找到所需的信息。例如查找有关“不换 行空格”的相关内容，操作方法如下：
（1）打开Dreamweaver 8帮助系统的窗口。
Page 48
（2）单击“索引”标题，切换到“索引” 选项卡。
（3）在文本框中输入“HTML”。下方的 列表框中自动显示与“HTML”相关内容的标 题，例如“不换行空格”、“设置格式和插 入”等。
URL是“Uniform Resource Locator” 的缩写，通常翻译为”统一资源定位器“， 它是一个指定Internet上资源位置的标准， 也就是人们常说的网址。
Page 7
3．Server与Browser
Server 即 服 务 器 ， Browser 即 浏 览 器 。 用户必须通过浏览器连接到Web服务器上， 才能阅读Web服务器上的文件。
课程引导
第1章我们欣赏了多个赏心悦目的网站， 重点分析了这些网站首页的结构布局、颜色 搭配、视觉效果等。欣赏完这些网页后，你 是否对制作网页产生了兴趣，一定想知道这 些网页是如何设计、制作的。
Page 1
别着急，首先让我们学习网页制作的基础 知识，了解网页的相关概念和术语、分析网 页中主要的构成元素，认识一些制作网页、 处理图像、制作动画的专业工具。
Page 42
各个面板可以打开或关闭，平常没有用 到时可以关闭，要使用时再显示出来，这样 可能充分利用有限的屏幕空间。
显示面板的方法：单击选择【窗口】菜 单相应的菜单项即可。要单独关闭某一个面 板，在对应面板标题位置单击右键，打开快 捷菜单，然后单击【关闭面板组】即可。
Page 43
2.4.3 Dreamweaver 8的帮助系统
Page 13
8．HTML
HTML是“HyperText Markup Language” 的缩写，意为超文本标记语言，是Internet 中编写网页的主要标识语言。
Page 14
9．CSS
CSS 是 “ Cascading Style Sheet” 的 缩 写，意为层叠样式表，用于对网页布局、字 体、颜色、背景和其他图文效果实现更加精 确的控制。
Dreamweaver 8提供了操作方便、功能 完备的帮助系统，对Dreamweaver 8的使用 方法提供了详细的说明。
Page 44
1．打开帮助
在 Dreamweaver 8 主 窗 口 中 ， 单 击 菜 单 【帮助】，会弹出下拉菜单，该菜单列出了 多种打开帮助系统的方法。
Page 45
2．提供帮助的方式
常用制作网页的工具如下： （1）制作网页的专门工具： Dreamweaver、FrontPage。 （2）图像处理工具：Photoshop、 Fireworks。 （3）动画制作工具：Flash、Swish。
Page 26
（4）图标制作工具：小榕图标编辑器、超 级图标。
（ 5 ） 抓 图 工 具 ： HyperSnap 、 HyperCam 、 Camtasia Studio。
8．表单
表单是用来收集访问者信息或实现一些 交互作用的网页，访问者填写表单的方式是 输入文本、单击单选按钮或复选框、从下拉 菜单中选择选项等。
Page 24
2.3 制作网页的工具概述
制作网页的专业工具功能越来越完善、 操作越来越简单，处理图像、制作动画、发 布网站的专业软件应用也非常广泛。
Page 25
（6）网站发布工具：CuteFTP。
Page 27
2.4 初识Dreamweaver 8中文版
2.4.1 Dreamweaver 8简介
1．Dreamweaver 8的特点
（1）直观的工作区 （2）完善的模板和库 （3）快捷的编码功能
Page 28
（4）有效的网站管理 （5）可扩展性好 （6）支持多种服务器端开发语言 （7）与Flash 8和Fireworks 8的良好集成
Page 21
6．表格
表 格 是 HTML 语 言 中 的 一 种 元 素 ， 主 要 用 于网页内容的布局，组织整个网页的外观， 通过表格可以精确地控制各网页元素在网页 中的位置。
Page 22
7．框架
框架是网页的一种组织形式，将相互关 联的多个网页的内容组织在一个浏览器窗口 中显示。
Page 23
Page 5
1．WWW
WWW是“World Wide Web”的首字母缩 写，也称为万维网。万维网是因特网主要的 部分，万维网是基于超文本结构体系。
从技术上讲，WWW包含三个基本组成部 分：URL（统一资源定位器）、HTTP（超文 本传输协议）、HTML（超文本标记语言）。
Page 6
2．URL
切换不同类型的插入工具栏的方法：单 击插入工具栏上的“向下箭头”按钮 ，选择 不同种类的对象，各种类型对象对应的按钮 将会显示在工具栏上。
Page 36
（2）标准工具栏 标准工具栏包含网页文档的基本操作工
具，例如新建、打开、保存、剪切、复制、 粘贴等按钮。
Page 37
（3）文档工具栏 文档工具栏包含用于选择所需开发环境
Page 33
2．工具栏
Dreamweaver 8的工具栏主要分为插入工 具栏、标准工具栏、文档工具栏、样式呈现 工具栏。
Page 34
（1）插入工具栏 插入工具栏包含用于将各种类型的“对
象”（例如图像、声音、动画、表格、框架、 层、表单等）插入到文档中的按钮。
Page 35
显示插入工具栏的方法：选择菜单【窗 口】→【插入】选项，文档窗口上方将显示 出插入工具栏。通常情况下会显示“常用” 工具栏。
Page 29
2．Dreamweaver 8的启动与退出
（1）启动Dreamweaver 8 单击【开始】按钮→指向【程序】菜单 →指向【Macromedia】菜单→单击【 Macromedia Dreamweaver 8】即可启动。
Page 30
（2）退出Dreamweaver 8 ➢ 单击Dreamweaver 8窗口右上方的关闭按 钮； ➢ 按下“Alt+F4”组合键； ➢ 单击菜单【文件】－【退出】。
的“代码”、“拆分”、“设计”按钮和多 个弹出式菜单，它们提供各种“文档”视图、 各种查看选项和一些常用操作。
Page 38
（4）样式呈现工具栏 使用样式呈现工具栏可以切换到“设计”
视图，以查看在打印媒体类型、手持型媒体 类型、投影媒体类型上的显示效果。
Page 39
3．文档窗口
文档窗口也称为文档编辑区。文档窗口 中所显示的内容可以是代码、网页，或者两 者的共同体。
Page 11
wk.baidu.com
6．Hypertext
Hypertext （ 超 文 本 ） 是 一 种 可 以 指 向 其他文件的文字或图片，这种功能称为超级 链接（HyperLink）。
Page 12
7．HTTP
Hypertext （ 超 文 本 ） 是 一 种 可 以 指 向 其他文件的文字或图片，这种功能称为超级 链接（HyperLink）。
（2）在Dreamweaver 8主窗口中观察其 各个菜单、工具栏、面板的组成。
（3）利用Dreamweaver 8的帮助，查找 有关“JavaScript”的内容，请分别利用“ 目录”、“索引”、“搜索”三种途径完成。
Page 52
★ 课外拓展实践 ★
（1）熟悉Dreamweaver 8的工作环境。 （2）熟练使用Dreamweaver 8的帮助系统。
Page 53
★ 本章小结 ★
本章主要介绍了有关网站和网页的基础知 识，网页的基本构成元素、Dreamweaver 8的 启动与退出、工作环境、帮助系统的使用。认 识和掌握制作网页的基础知识，为后面设计和 制作网页提供理论支持。
Page 15
10．JavaScript
JavaScript 是 一 种 脚 本 语 言 ， 可 以 和 HTML语言混合在一起使用，用来实现在一个 Web页面中与用户交互作用。有关JavaScript 的详细内容将在第13章讲解。
Page 16
2.2 网页的基本构成元素
网页由文本、图像、动画、超链接等基 本元素构成，本节我们对这些基本元素有一 个初步的了解，为后面各章中运用这些元素 制作网页奠定基础。
（4）在下方的列表框中双击“不换行空 格”，右侧便会显示详细内容。
Page 49
5．搜索帮助信息
Dreamweaver8帮助系统可以对Dreamweaver 帮助执行全文搜索。例如查找有关“CSS”的内 容，操作方法如下： （1）打开Dreamweaver 8帮助系统的窗口。
Page 50
（2）单击“搜索”标题，切换到“搜索” 选项卡。
Page 19
3．超链接
超链接是Web网页的主要特色，是指从一 个网页指向另一个目的端的链接。
4．导航栏
导航栏是一组超链接，用来方便地浏览 站点。导航栏一般由多个按钮或者多个文本 超链接组成。
Page 20
5．动画
动画是网页中最活跃的元素，创意出众、 制作精致的动画是吸引浏览者眼球有效方法 之一。
（3）在文本框中输入要查找的单词： CSS，然后单击【列出主题】按钮，在下方的 列表框中便会列出有关内容的标题。
（4）双击结果列表中一个主题，例如双 击“使用CSS样式面板”主题，右侧列表框中 便会显示该主题的相关内容，并且所搜索的 单词会呈选中状态。
Page 51
★ 课堂实践 ★
（1）启动Dreamweaver 8，认识 Dreamweaver 8的工作环境。
重点熟悉Dreamweaver 8的启动与退出、 界面布局和工作环境。
Page 2
知识技能目标
（1）了解网页的相关概念和术语，认识 网页中的主要构成元素；
（2）了解一些制作网页、处理图像、制 作动画的专业工具；
（3）熟悉Dreamweaver 8的启动与退出； （4）熟悉Dreamweaver 8的界面布局和 工作环境。
Page 8
4．网页
万维网中的文档又称为网页，网页中可 以包含文本、图像、动画、音频、视频等信 息。网页按其表现形式可以分为静态网页和 动态网页。
Page 9
大家有疑问的，可以询问和交流
Page 10
可以互相讨论下，但要小声点
5．网站
网站是网页的集合。通过超级链接将网 站中多个网页建立联系，形成一个主题鲜明、 风格一致的站点。通常，网站都有一个主页， 包括网站的Logo和导航栏等内容。
Page 3
2.1 网 站 和 网 页 的 基 础 知 识 2.2 网 页 的 基 本 构 成 元 素 2.3 制 作 网 页 的 工 具 概 述 2.4 初识Dreamweaver 8中文版
Page 4
2.1 网站和网页的基础知识
在Internet中经常会遇到一些专用英文 单词的缩写，掌握这些术语对浏览和制作网 页有很大的帮助。
Dreamweaver 8主要提供了三种获取所需 信息的途径：目录、索引和搜索，最快捷的 方法是按快捷键F1。
Page 46
3．帮助系统的目录列表
切换到“目录”选项卡，依次单击 【Dreamweaver入门】→【Dreamweaver 基础】 →【了解Dreamweave 8 工作区】→【工作区 布局】，在右边的窗格中便会显示有关“工 作区布局”的详细说明。
2.4.2 Dreamweaver 8的工作环境
Dreamweaver 8的工作界面主要包括： 菜单栏、工具栏、文档窗口、属性面板、面 板组等。
Page 32
1．菜单栏
Dreamweaver 8的菜单栏包含10类菜单： 文件、编辑、查看、插入、修改、文本、命 令、站点、窗口、帮助。
Page 17
1．文本
一般网页中最多的内容是文本，可以根 据需要对其字体、大小、颜色、底纹、边框 等属性进行设置
Page 18
2．图像
丰富多彩的图像是美化网页必不可少的 元 素 ， 用 于 网 页 上 的 图 像 一 般 为 jpg 格 式 和 gif格式，即以jpg和gif为扩展名的图像文件。
Page 40
4．属性面板
属性面板用于查看和更改所选取的对象 或文本的各种属性，每个对象有不同的属性。
Page 41
5．面板组
Dreamweaver 8包括多个面板，这些面板 都有不同的功能，将它们叠加在一起便形成 了 面 板 组 。 面 板 组 主 要 包 括 “ CSS” 面 板 、 “应用程序”面板、“标签检查器”面板、 “文件”面板、“框架”面板、“历史记录” 面板。
Page 47
4．使用索引查找所需的信息
使用Dreamweaver 8帮助系统的索引可以 快速找到所需的信息。例如查找有关“不换 行空格”的相关内容，操作方法如下：
（1）打开Dreamweaver 8帮助系统的窗口。
Page 48
（2）单击“索引”标题，切换到“索引” 选项卡。
（3）在文本框中输入“HTML”。下方的 列表框中自动显示与“HTML”相关内容的标 题，例如“不换行空格”、“设置格式和插 入”等。
URL是“Uniform Resource Locator” 的缩写，通常翻译为”统一资源定位器“， 它是一个指定Internet上资源位置的标准， 也就是人们常说的网址。
Page 7
3．Server与Browser
Server 即 服 务 器 ， Browser 即 浏 览 器 。 用户必须通过浏览器连接到Web服务器上， 才能阅读Web服务器上的文件。
课程引导
第1章我们欣赏了多个赏心悦目的网站， 重点分析了这些网站首页的结构布局、颜色 搭配、视觉效果等。欣赏完这些网页后，你 是否对制作网页产生了兴趣，一定想知道这 些网页是如何设计、制作的。
Page 1
别着急，首先让我们学习网页制作的基础 知识，了解网页的相关概念和术语、分析网 页中主要的构成元素，认识一些制作网页、 处理图像、制作动画的专业工具。
Page 42
各个面板可以打开或关闭，平常没有用 到时可以关闭，要使用时再显示出来，这样 可能充分利用有限的屏幕空间。
显示面板的方法：单击选择【窗口】菜 单相应的菜单项即可。要单独关闭某一个面 板，在对应面板标题位置单击右键，打开快 捷菜单，然后单击【关闭面板组】即可。
Page 43
2.4.3 Dreamweaver 8的帮助系统
Page 13
8．HTML
HTML是“HyperText Markup Language” 的缩写，意为超文本标记语言，是Internet 中编写网页的主要标识语言。
Page 14
9．CSS
CSS 是 “ Cascading Style Sheet” 的 缩 写，意为层叠样式表，用于对网页布局、字 体、颜色、背景和其他图文效果实现更加精 确的控制。
Dreamweaver 8提供了操作方便、功能 完备的帮助系统，对Dreamweaver 8的使用 方法提供了详细的说明。
Page 44
1．打开帮助
在 Dreamweaver 8 主 窗 口 中 ， 单 击 菜 单 【帮助】，会弹出下拉菜单，该菜单列出了 多种打开帮助系统的方法。
Page 45
2．提供帮助的方式
常用制作网页的工具如下： （1）制作网页的专门工具： Dreamweaver、FrontPage。 （2）图像处理工具：Photoshop、 Fireworks。 （3）动画制作工具：Flash、Swish。
Page 26
（4）图标制作工具：小榕图标编辑器、超 级图标。
（ 5 ） 抓 图 工 具 ： HyperSnap 、 HyperCam 、 Camtasia Studio。
8．表单
表单是用来收集访问者信息或实现一些 交互作用的网页，访问者填写表单的方式是 输入文本、单击单选按钮或复选框、从下拉 菜单中选择选项等。
Page 24
2.3 制作网页的工具概述
制作网页的专业工具功能越来越完善、 操作越来越简单，处理图像、制作动画、发 布网站的专业软件应用也非常广泛。
Page 25
（6）网站发布工具：CuteFTP。
Page 27
2.4 初识Dreamweaver 8中文版
2.4.1 Dreamweaver 8简介
1．Dreamweaver 8的特点
（1）直观的工作区 （2）完善的模板和库 （3）快捷的编码功能
Page 28
（4）有效的网站管理 （5）可扩展性好 （6）支持多种服务器端开发语言 （7）与Flash 8和Fireworks 8的良好集成
Page 21
6．表格
表 格 是 HTML 语 言 中 的 一 种 元 素 ， 主 要 用 于网页内容的布局，组织整个网页的外观， 通过表格可以精确地控制各网页元素在网页 中的位置。
Page 22
7．框架
框架是网页的一种组织形式，将相互关 联的多个网页的内容组织在一个浏览器窗口 中显示。
Page 23
Page 5
1．WWW
WWW是“World Wide Web”的首字母缩 写，也称为万维网。万维网是因特网主要的 部分，万维网是基于超文本结构体系。
从技术上讲，WWW包含三个基本组成部 分：URL（统一资源定位器）、HTTP（超文 本传输协议）、HTML（超文本标记语言）。
Page 6
2．URL
切换不同类型的插入工具栏的方法：单 击插入工具栏上的“向下箭头”按钮 ，选择 不同种类的对象，各种类型对象对应的按钮 将会显示在工具栏上。
Page 36
（2）标准工具栏 标准工具栏包含网页文档的基本操作工
具，例如新建、打开、保存、剪切、复制、 粘贴等按钮。
Page 37
（3）文档工具栏 文档工具栏包含用于选择所需开发环境
Page 33
2．工具栏
Dreamweaver 8的工具栏主要分为插入工 具栏、标准工具栏、文档工具栏、样式呈现 工具栏。
Page 34
（1）插入工具栏 插入工具栏包含用于将各种类型的“对
象”（例如图像、声音、动画、表格、框架、 层、表单等）插入到文档中的按钮。
Page 35
显示插入工具栏的方法：选择菜单【窗 口】→【插入】选项，文档窗口上方将显示 出插入工具栏。通常情况下会显示“常用” 工具栏。
Page 29
2．Dreamweaver 8的启动与退出
（1）启动Dreamweaver 8 单击【开始】按钮→指向【程序】菜单 →指向【Macromedia】菜单→单击【 Macromedia Dreamweaver 8】即可启动。
Page 30
（2）退出Dreamweaver 8 ➢ 单击Dreamweaver 8窗口右上方的关闭按 钮； ➢ 按下“Alt+F4”组合键； ➢ 单击菜单【文件】－【退出】。
的“代码”、“拆分”、“设计”按钮和多 个弹出式菜单，它们提供各种“文档”视图、 各种查看选项和一些常用操作。
Page 38
（4）样式呈现工具栏 使用样式呈现工具栏可以切换到“设计”
视图，以查看在打印媒体类型、手持型媒体 类型、投影媒体类型上的显示效果。
Page 39
3．文档窗口
文档窗口也称为文档编辑区。文档窗口 中所显示的内容可以是代码、网页，或者两 者的共同体。
Page 11
wk.baidu.com
6．Hypertext
Hypertext （ 超 文 本 ） 是 一 种 可 以 指 向 其他文件的文字或图片，这种功能称为超级 链接（HyperLink）。
Page 12
7．HTTP
Hypertext （ 超 文 本 ） 是 一 种 可 以 指 向 其他文件的文字或图片，这种功能称为超级 链接（HyperLink）。
（2）在Dreamweaver 8主窗口中观察其 各个菜单、工具栏、面板的组成。
（3）利用Dreamweaver 8的帮助，查找 有关“JavaScript”的内容，请分别利用“ 目录”、“索引”、“搜索”三种途径完成。
Page 52
★ 课外拓展实践 ★
（1）熟悉Dreamweaver 8的工作环境。 （2）熟练使用Dreamweaver 8的帮助系统。
Page 53
★ 本章小结 ★
本章主要介绍了有关网站和网页的基础知 识，网页的基本构成元素、Dreamweaver 8的 启动与退出、工作环境、帮助系统的使用。认 识和掌握制作网页的基础知识，为后面设计和 制作网页提供理论支持。
Page 15
10．JavaScript
JavaScript 是 一 种 脚 本 语 言 ， 可 以 和 HTML语言混合在一起使用，用来实现在一个 Web页面中与用户交互作用。有关JavaScript 的详细内容将在第13章讲解。
Page 16
2.2 网页的基本构成元素
网页由文本、图像、动画、超链接等基 本元素构成，本节我们对这些基本元素有一 个初步的了解，为后面各章中运用这些元素 制作网页奠定基础。
（4）在下方的列表框中双击“不换行空 格”，右侧便会显示详细内容。
Page 49
5．搜索帮助信息
Dreamweaver8帮助系统可以对Dreamweaver 帮助执行全文搜索。例如查找有关“CSS”的内 容，操作方法如下： （1）打开Dreamweaver 8帮助系统的窗口。
Page 50
（2）单击“搜索”标题，切换到“搜索” 选项卡。
Page 19
3．超链接
超链接是Web网页的主要特色，是指从一 个网页指向另一个目的端的链接。
4．导航栏
导航栏是一组超链接，用来方便地浏览 站点。导航栏一般由多个按钮或者多个文本 超链接组成。
Page 20
5．动画
动画是网页中最活跃的元素，创意出众、 制作精致的动画是吸引浏览者眼球有效方法 之一。
（3）在文本框中输入要查找的单词： CSS，然后单击【列出主题】按钮，在下方的 列表框中便会列出有关内容的标题。
（4）双击结果列表中一个主题，例如双 击“使用CSS样式面板”主题，右侧列表框中 便会显示该主题的相关内容，并且所搜索的 单词会呈选中状态。
Page 51
★ 课堂实践 ★
（1）启动Dreamweaver 8，认识 Dreamweaver 8的工作环境。
重点熟悉Dreamweaver 8的启动与退出、 界面布局和工作环境。
Page 2
知识技能目标
（1）了解网页的相关概念和术语，认识 网页中的主要构成元素；
（2）了解一些制作网页、处理图像、制 作动画的专业工具；
（3）熟悉Dreamweaver 8的启动与退出； （4）熟悉Dreamweaver 8的界面布局和 工作环境。
Page 8
4．网页
万维网中的文档又称为网页，网页中可 以包含文本、图像、动画、音频、视频等信 息。网页按其表现形式可以分为静态网页和 动态网页。
Page 9
大家有疑问的，可以询问和交流
Page 10
可以互相讨论下，但要小声点
5．网站
网站是网页的集合。通过超级链接将网 站中多个网页建立联系，形成一个主题鲜明、 风格一致的站点。通常，网站都有一个主页， 包括网站的Logo和导航栏等内容。
Page 3
2.1 网 站 和 网 页 的 基 础 知 识 2.2 网 页 的 基 本 构 成 元 素 2.3 制 作 网 页 的 工 具 概 述 2.4 初识Dreamweaver 8中文版
Page 4
2.1 网站和网页的基础知识
在Internet中经常会遇到一些专用英文 单词的缩写，掌握这些术语对浏览和制作网 页有很大的帮助。
Dreamweaver 8主要提供了三种获取所需 信息的途径：目录、索引和搜索，最快捷的 方法是按快捷键F1。
Page 46
3．帮助系统的目录列表
切换到“目录”选项卡，依次单击 【Dreamweaver入门】→【Dreamweaver 基础】 →【了解Dreamweave 8 工作区】→【工作区 布局】，在右边的窗格中便会显示有关“工 作区布局”的详细说明。