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

《网页设计与制作案例教程-电子教案2.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作案例教程-电子教案2.ppt（53页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第2 2章章 网页制作基础网页制作基础 第第1 1章我章我们们欣欣赏赏了多个了多个赏赏心悦目的网站，心悦目的网站，重点分析了重点分析了这这些网站首些网站首页页的的结结构布局、构布局、颜颜色色搭配、搭配、视觉视觉效果等。欣效果等。欣赏赏完完这这些网些网页页后，你后，你是否是否对对制作网制作网页产页产生了生了兴兴趣，一定想知道趣，一定想知道这这些网些网页页是如何是如何设计设计、制作的。、制作的。l 课程引导课程引导 别别着着急急，首首先先让让我我们们学学习习网网页页制制作作的的基基础础知知识识，了了解解网网页页的的相相关关概概念念和和术术语语、分分析析网网页页中中主主要要的的构构成成元元素素，认

2、认识识一一些些制制作作网网页页、处处理理图图像、制作像、制作动动画的画的专业专业工具。工具。重重点点熟熟悉悉DreamweaverDreamweaver 8 8的的启启动动与与退退出出、界面布局和工作界面布局和工作环环境。境。l 知识技能目标知识技能目标 （1 1）了了解解网网页页的的相相关关概概念念和和术术语语，认认识识网网页页中的主要构成元素；中的主要构成元素；（2 2）了了解解一一些些制制作作网网页页、处处理理图图像像、制制作作动动画的画的专业专业工具；工具；（3 3）熟悉）熟悉DreamweaverDreamweaver 8 8的启的启动动与退出；与退出；（4 4）熟熟悉悉Dreamw

3、eaverDreamweaver 8 8的的界界面面布布局局和和工工作作环环境。境。2.12.1网网站站和和网网页页的的基基础础知知识识2.22.2 网网 页页 的的 基基 本本 构构 成成 元元 素素2.32.3制制 作作 网网 页页 的的 工工 具具 概概 述述2.42.4初初识识D Dr re ea ammwwe ea av ve er r 8 8中中文文版版 2.1 2.1 网站和网页的基础知识网站和网页的基础知识 在在InternetInternet中中经经常常会会遇遇到到一一些些专专用用英英文文单单词词的的缩缩写写，掌掌握握这这些些术术语语对对浏浏览览和和制制作作网网页页有很大的帮

4、助。有很大的帮助。1 1WWWWWW WWWWWW是是“World World Wide Wide WebWeb”的的首首字字母母缩缩写写，也也称称为为万万维维网网。万万维维网网是是因因特特网网主主要要的的部部分分，万万维维网是基于超文本网是基于超文本结结构体系。构体系。从从技技术术上上讲讲，WWWWWW包包含含三三个个基基本本组组成成部部分分：URLURL（统统一一资资源源定定位位器器）、HTTPHTTP（超超文文本本传输协议传输协议）、）、HTMLHTML（超文本（超文本标记语标记语言）。言）。2 2URLURL URLURL是是“UniformUniform Resource Resou

5、rce LocatorLocator”的的缩缩写写，通通常常翻翻译译为为”统统一一资资源源定定位位器器“，它它是是一一个个指指定定InternetInternet上上资资源源位位置置的的标标准准，也就是人也就是人们们常常说说的网址的网址。3 3ServerServer与与BrowserBrowser ServerServer即即服服务务器器，BrowserBrowser即即浏浏览览器器。用用户户必必须须通通过过浏浏览览器器连连接接到到WebWeb服服务务器器上上，才能才能阅读阅读WebWeb服服务务器上的文件器上的文件。4 4网页网页 万万维维网网中中的的文文档档又又称称为为网网页页，网网页页

6、中中可可以以包包含含文文本本、图图像像、动动画画、音音频频、视视频频等等信信息息。网网页页按按其其表表现现形形式式可可以以分分为为静静态态网网页页和和动态动态网网页页。5 5网站网站 网网站站是是网网页页的的集集合合。通通过过超超级级链链接接将将网网站站中中多多个个网网页页建建立立联联系系，形形成成一一个个主主题题鲜鲜明明、风风格格一一致致的的站站点点。通通常常，网网站站都都有有一一个个主主页页，包括网站的包括网站的LogoLogo和和导导航航栏栏等内容等内容。6 6HypertextHypertext HypertextHypertext（超超文文本本）是是一一种种可可以以指指向向其其他他文

7、文件件的的文文字字或或图图片片，这这种种功功能能称称为为超超级级链链接（接（HyperLinkHyperLink）。）。7 7HTTPHTTP HypertextHypertext（超超文文本本）是是一一种种可可以以指指向向其其他他文文件件的的文文字字或或图图片片，这这种种功功能能称称为为超超级级链链接（接（HyperLinkHyperLink）。）。8 8HTMLHTML HTMLHTML是是“HyperTextHyperText MarkupMarkup LanguageLanguage”的的缩缩写写，意意为为超超文文本本标标记记语语言言，是是InternetInternet中中编编写网写

8、网页页的主要的主要标识语标识语言言。9 9CSSCSS CSSCSS是是“Cascading Cascading Style Style SheetSheet”的的缩缩写写，意意为为层层叠叠样样式式表表，用用于于对对网网页页布布局局、字字体体、颜颜色、背景和其他色、背景和其他图图文效果文效果实现实现更加精确的控制更加精确的控制。1010JavaScriptJavaScript JavaScriptJavaScript是是一一种种脚脚本本语语言言，可可以以和和HTMLHTML语语言言混混合合在在一一起起使使用用，用用来来实实现现在在一一个个WebWeb页页面面中中与与用用户户交交互互作作用用。有

9、有关关JavaScriptJavaScript的的详详细细内容将在第内容将在第1313章章讲讲解。解。网网页页由文本、由文本、图图像、像、动动画、超画、超链链接等基接等基本元素构成，本本元素构成，本节节我我们对这们对这些基本元素有一些基本元素有一个初步的了解，个初步的了解，为为后面各章中运用后面各章中运用这这些元素些元素制作网制作网页页奠定基奠定基础础。2.22.2网页的基本构成元素网页的基本构成元素1 1文本文本 一一般般网网页页中中最最多多的的内内容容是是文文本本，可可以以根根据据需需要要对对其其字字体体、大大小小、颜颜色色、底底纹纹、边边框框等等属属性性进进行行设设置置2 2图像图像 丰

10、丰富富多多彩彩的的图图像像是是美美化化网网页页必必不不可可少少的的元元素素，用用于于网网页页上上的的图图像像一一般般为为jpgjpg格格式式和和gifgif格格式，即以式，即以jpgjpg和和gifgif为扩为扩展名的展名的图图像文件像文件。3 3超链接超链接 超超链链接接是是WebWeb网网页页的的主主要要特特色色，是是指指从从一一个网个网页页指向另一个目的端的指向另一个目的端的链链接接。4 4导航栏导航栏 导导航航栏栏是是一一组组超超链链接接，用用来来方方便便地地浏浏览览站站点点。导导航航栏栏一一般般由由多多个个按按钮钮或或者者多多个个文文本本超超链链接接组组成成。5 5动画动画 动动画画

11、是是网网页页中中最最活活跃跃的的元元素素，创创意意出出众众、制制作作精精致致的的动动画画是是吸吸引引浏浏览览者者眼眼球球有有效效方方法法之之一一。6 6表格表格 表表格格是是HTMLHTML语语言言中中的的一一种种元元素素，主主要要用用于于网网页页内内容容的的布布局局，组组织织整整个个网网页页的的外外观观，通通过过表表格格可可以以精精确确地地控控制制各各网网页页元元素素在在网网页页中中的的位位置。置。7 7框架框架 框框架架是是网网页页的的一一种种组组织织形形式式，将将相相互互关关联联的的多多个个网网页页的的内内容容组组织织在在一一个个浏浏览览器器窗窗口口中中显显示示。8 8表单表单 表表单单

12、是是用用来来收收集集访访问问者者信信息息或或实实现现一一些些交交互互作作用用的的网网页页，访访问问者者填填写写表表单单的的方方式式是是输输入入文文本本、单单击击单单选选按按钮钮或或复复选选框框、从从下下拉拉菜菜单单中中选择选项选择选项等等。制作网制作网页页的的专业专业工具功能越来越完善、工具功能越来越完善、操作越来越操作越来越简单简单，处处理理图图像、制作像、制作动动画、画、发发布网站的布网站的专业软专业软件件应应用也非常广泛。用也非常广泛。2.32.3制作网页的工具概述制作网页的工具概述 常用制作网常用制作网页页的工具如下的工具如下：（1 1）制制 作作 网网 页页 的的 专专 门门 工工

13、具具：DreamweaverDreamweaver、FrontPageFrontPage。（2 2）图图 像像 处处 理理 工工 具具：PhotoshopPhotoshop、FireworksFireworks。（3 3）动动画制作工具：画制作工具：FlashFlash、SwishSwish。（4 4）图图标标制制作作工工具具：小小榕榕图图标标编编辑辑器器、超超级图标级图标。（5 5）抓抓图图工工具具：HyperSnapHyperSnap、HyperCamHyperCam、CamtasiaCamtasiaStudioStudio。（6 6）网站）网站发发布工具：布工具：CuteFTPCuteF

14、TP。（1 1）直）直观观的工作区的工作区 （2 2）完善的模板和）完善的模板和库库 （3 3）快捷的）快捷的编码编码功能功能2.42.4初识初识Dreamweaver 8Dreamweaver 8中文版中文版2.4.12.4.1Dreamweaver 8Dreamweaver 8简介简介1 1Dreamweaver 8Dreamweaver 8的特点的特点（4 4）有效的网站管理）有效的网站管理（5 5）可）可扩扩展性好展性好（6 6）支持多种服）支持多种服务务器端开器端开发语发语言言（7 7）与）与Flash 8Flash 8和和Fireworks 8Fireworks 8的良好集成的良好

15、集成2 2DreamweaverDreamweaver8 8的启动与退出的启动与退出 （1 1）启）启动动DreamweaverDreamweaver8 8 单单击击【开开始始】按按钮钮指指向向【程程序序】菜菜单单指指向向【MacromediaMacromedia】菜菜单单单单击击【MacromediaMacromedia DreamweaverDreamweaver 8 8】即可启】即可启动动。（2 2）退出）退出DreamweaverDreamweaver 8 8 单单击击DreamweaverDreamweaver 8 8窗窗口口右右上上方方的的关关闭闭按按钮钮 ；按下按下“Alt+F4

16、Alt+F4”组组合合键键；单击单击菜菜单单【文件文件】【退出退出】。DreamweaverDreamweaver 8 8的工作界面主要包括：菜的工作界面主要包括：菜单栏单栏、工具、工具栏栏、文档窗口、属性面板、面板、文档窗口、属性面板、面板组组等。等。2.4.22.4.2Dreamweaver 8Dreamweaver 8的工作环境的工作环境1 1菜单栏菜单栏 DreamweaverDreamweaver 8 8的的菜菜单单栏栏包包含含1010类类菜菜单单：文文件件、编编辑辑、查查看看、插插入入、修修改改、文文本本、命命令令、站点、窗口、帮助。站点、窗口、帮助。2 2工具栏工具栏 Dream

17、weaverDreamweaver 8 8的的工工具具栏栏主主要要分分为为插插入入工工具具栏栏、标标准准工工具具栏栏、文文档档工工具具栏栏、样样式式呈呈现现工工具具栏栏。（1 1）插入工具）插入工具栏栏 插插入入工工具具栏栏包包含含用用于于将将各各种种类类型型的的“对对象象”（例例如如图图像像、声声音音、动动画画、表表格格、框框架架、层层、表表单单等）插入到文档中的按等）插入到文档中的按钮钮。显显示示插插入入工工具具栏栏的的方方法法：选选择择菜菜单单【窗窗口口】【插插入入】选选项项，文文档档窗窗口口上上方方将将显显示示出出插插入工具入工具栏栏。通常情况下会。通常情况下会显显示示“常用常用”工具

18、工具栏栏。切切换换不不同同类类型型的的插插入入工工具具栏栏的的方方法法：单单击击插插入入工工具具栏栏上上的的“向向下下箭箭头头”按按钮钮 ，选选择择不不同同种种类类的的对对象象，各各种种类类型型对对象象对对应应的的按按钮钮将将会会显显示在工具示在工具栏栏上。上。（2 2）标标准工具准工具栏栏 标标准准工工具具栏栏包包含含网网页页文文档档的的基基本本操操作作工工具具，例例如如新新建建、打打开开、保保存存、剪剪切切、复复制制、粘粘贴贴等等按按钮钮。（3 3）文档工具）文档工具栏栏 文文档档工工具具栏栏包包含含用用于于选选择择所所需需开开发发环环境境的的“代代码码”、“拆拆分分”、“设设计计”按按钮

19、钮和和多多个个弹弹出出式式菜菜单单，它它们们提提供供各各种种“文文档档”视视图图、各各种种查查看看选选项项和一些常用操作。和一些常用操作。（4 4）样样式呈式呈现现工具工具栏栏 使使用用样样式式呈呈现现工工具具栏栏可可以以切切换换到到“设设计计”视视图图，以以查查看看在在打打印印媒媒体体类类型型、手手持持型型媒媒体体类类型型、投影媒体投影媒体类类型上的型上的显显示效果。示效果。3 3文档窗口文档窗口 文文档档窗窗口口也也称称为为文文档档编编辑辑区区。文文档档窗窗口口中中所所显显示示的的内内容容可可以以是是代代码码、网网页页，或或者者两两者者的的共同体共同体。4 4属性面板属性面板 属属性性面面

20、板板用用于于查查看看和和更更改改所所选选取取的的对对象象或或文本的各种属性，每个文本的各种属性，每个对对象有不同的属性象有不同的属性。5 5面板组面板组 DreamweaverDreamweaver 8 8包包括括多多个个面面板板，这这些些面面板板都都有有不不同同的的功功能能，将将它它们们叠叠加加在在一一起起便便形形成成了了面面板板组组。面面板板组组主主要要包包括括“CSSCSS”面面板板、“应应用用程程序序”面面板板、“标标签签检检查查器器”面面板板、“文文件件”面面板板、“框架框架”面板、面板、“历历史史记录记录”面板。面板。各各个个面面板板可可以以打打开开或或关关闭闭，平平常常没没有有用

21、用到到时时可可以以关关闭闭，要要使使用用时时再再显显示示出出来来，这这样样可可能能充分利用有限的屏幕空充分利用有限的屏幕空间间。显显示示面面板板的的方方法法：单单击击选选择择【窗窗口口】菜菜单单相相应应的的菜菜单单项项即即可可。要要单单独独关关闭闭某某一一个个面面板板，在在对对应应面面板板标标题题位位置置单单击击右右键键，打打开开快快捷捷菜菜单单，然后然后单击单击【关关闭闭面板面板组组】即可即可。DreamweaverDreamweaver 8 8提供了操作方便、功能完提供了操作方便、功能完备备的帮助系的帮助系统统，对对Dreamweaver 8Dreamweaver 8的使用方法的使用方法提

22、供了提供了详细详细的的说说明。明。2.4.32.4.3Dreamweaver 8Dreamweaver 8的帮助系统的帮助系统1 1打开帮助打开帮助 在在DreamweaverDreamweaver 8 8主主窗窗口口中中，单单击击菜菜单单【帮帮助助】，会会弹弹出出下下拉拉菜菜单单，该该菜菜单单列列出出了了多多种种打开帮助系打开帮助系统统的方法。的方法。2 2提供帮助的方式提供帮助的方式 DreamweaverDreamweaver 8 8主主要要提提供供了了三三种种获获取取所所需需信信息息的的途途径径：目目录录、索索引引和和搜搜索索，最最快快捷捷的的方方法是按快捷法是按快捷键键F1F1。3

23、3帮助系统的目录列表帮助系统的目录列表 切切换换到到“目目录录”选选项项卡卡，依依次次单单击击【DreamweaverDreamweaver入入门门】【DreamweaverDreamweaver基基础础】【了了解解DreamweaveDreamweave 8 8 工工作作区区】【工工作作区区布布局局】，在在右右边边的的窗窗格格中中便便会会显显示示有有关关“工工作作区区布局布局”的的详细说详细说明明。4 4使用索引查找所需的信息使用索引查找所需的信息 使使用用DreamweaverDreamweaver 8 8帮帮助助系系统统的的索索引引可可以以快快速速找找到到所所需需的的信信息息。例例如如查

24、查找找有有关关“不不换换行行空格空格”的相关内容，操作方法如下：的相关内容，操作方法如下：（1 1）打开）打开DreamweaverDreamweaver 8 8帮助系帮助系统统的窗口。的窗口。（2 2）单单击击“索索引引”标标题题，切切换换到到“索索引引”选选项项卡。卡。（3 3）在在文文本本框框中中输输入入“HTMLHTML”。下下方方的的列列表表框框中中自自动动显显示示与与“HTMLHTML”相相关关内内容容的的标标题题，例如，例如“不不换换行空格行空格”、“设设置格式和插入置格式和插入”等。等。（4 4）在在下下方方的的列列表表框框中中双双击击“不不换换行行空空格格”，右，右侧侧便会便

25、会显显示示详细详细内容。内容。5 5搜索帮助信息搜索帮助信息 Dreamweaver8Dreamweaver8帮帮助助系系统统可可以以对对DreamweaverDreamweaver帮帮助助执执行行全全文文搜搜索索。例例如如查查找找有有关关“CSSCSS”的的内内容，操作方法如下：容，操作方法如下：（1 1）打开）打开Dreamweaver 8Dreamweaver 8帮助系帮助系统统的窗口。的窗口。（2 2）单单击击“搜搜索索”标标题题，切切换换到到“搜搜索索”选选项项卡。卡。（3 3）在在文文本本框框中中输输入入要要查查找找的的单单词词：CSSCSS，然然后后单单击击【列列出出主主题题】按

26、按钮钮，在在下下方方的的列列表表框中便会列出有关内容的框中便会列出有关内容的标题标题。（4 4）双双击击结结果果列列表表中中一一个个主主题题，例例如如双双击击“使使用用CSSCSS样样式式面面板板”主主题题，右右侧侧列列表表框框中中便便会会显显示示该该主主题题的的相相关关内内容容，并并且且所所搜搜索索的的单单词词会呈会呈选选中状中状态态。课堂实践课堂实践 （1 1）启）启动动Dreamweaver 8Dreamweaver 8，认识认识Dreamweaver 8Dreamweaver 8的工作的工作环环境。境。（2 2）在）在Dreamweaver 8Dreamweaver 8主窗口中主窗口中

27、观观察其各察其各个菜个菜单单、工具、工具栏栏、面板的、面板的组组成。成。（3 3）利用）利用Dreamweaver 8Dreamweaver 8的帮助，的帮助，查查找有找有关关“JavaScriptJavaScript”的内容，的内容，请请分分别别利用利用“目目录录”、“索引索引”、“搜索搜索”三种途径完成。三种途径完成。课外拓展实践课外拓展实践 （1 1）熟悉）熟悉DreamweaverDreamweaver 8 8的工作的工作环环境。境。（2 2）熟）熟练练使用使用DreamweaverDreamweaver 8 8的帮助系的帮助系统统。本章小结本章小结 本章主要介本章主要介绍绍了有关网站和网了有关网站和网页页的基的基础础知知识识，网，网页页的基本构成元素、的基本构成元素、DreamweaverDreamweaver 8 8的的启启动动与退出、工作与退出、工作环环境、帮助系境、帮助系统统的使用。的使用。认认识识和掌握制作网和掌握制作网页页的基的基础础知知识识，为为后面后面设计设计和和制作网制作网页页提供理提供理论论支持。支持。