网页设计与制作案例教程-电子教案2

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