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