Dreamweaver网页制作简明教程教学课件优质PPT.ppt

Dreamweaver网页制作简明教程教学课件优质PPT.ppt

《Dreamweaver网页制作简明教程教学课件优质PPT.ppt》由会员分享，可在线阅读，更多相关《Dreamweaver网页制作简明教程教学课件优质PPT.ppt（173页珍藏版）》请在冰豆网上搜索。

,1.1.5按钮,在现实生活中，按钮通常是启动某些装置或机关的开关。

网页中的按钮也沿用了这个概念。

网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。

1.2网页相关知识简介,1.2.1网页的本质,通过前面的学习，我们知道网页中除了包含文字外，还包含图像、动画等内容。

那么，网页是如何将这些元素有机地组合在一起了呢？

打开网站“人民网”，在浏览器中选择“文件”“另存为”菜单，将网页保存到磁盘中，然后看看网页及其组成素材。

1.2.2互联网,互联网（Internet），又叫因特网，它是目前世界上最大的计算机网络，将无数广域网、局域网及单机按照一定的通讯协议组织在一起，方便了计算机之间的信息传递。

1.2.3网站、网页和主页,网站是多个网页的集合，各个网页通过超级链接构成一个网站整体。

网页分为动态网页和静态网页。

动态网页可提供交互式的操作功能，而静态网页则相反，它只供浏览者浏览，而不提供交互功能。

主页也叫首页，即浏览者登录网站时看见的第一个网页，也是网站的入口。

1.2.4IP地址与域名,IP地址由4个小于256的数字组成，数字之间用点间隔。

例如，“61.135.150.126”就是一个IP地址。

由于IP地址在使用过程中难于记忆和书写，人们又发现了一种与IP地址对应的字符来表示地址，这就是域名。

域名是独一无二的。

1.2.5网址,网址又叫URL，它是一种网络上通用的地址格式，用于标识网页文件在网络中的位置。

一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。

1.2.6浏览器,上网浏览网页需要通过浏览器，目前大多数用户使用的是微软公司的IE浏览器（InternetExplorer），其他浏览器还有NetscapeNavigator、Mosaic、Opera、火狐等。

国内厂商开发的浏览器主要有腾讯TT、遨游（MaxthonBrowser）等。

菜单栏,标题栏,地址栏,课堂练习1在浏览器中打开金企鹅网站,本例通过在IE浏览器中打开金企鹅网站，来熟悉一下域名、网址和浏览器的应用。

启动IE浏览器，在地址栏中输入金企鹅网站域名,按【Enter】键，打开网页,1.2.7网站管理与网页制作相关软件,Fireworks：

主要用于制作网页图像、网站标志、GIF动画、图像按钮与导航栏等。

Flash：

主要用于制作矢量动画，如广告条、网站片头动画、动画短片、MTV等。

Photoshop：

Adobe公司出品的一个优秀而且强大的图形图像处理软件，起初它的应用领域主要是平面设计而不是网页设计，但是它所具有的强大功能完全涵盖了网页设计的需要（除了多媒体）。

在进行网页制作时，除需要Dreamweaver外，还会用到Fireworks、Flash、Photoshop等辅助软件。

1.2.8XHTML语言简介,XHTML是ExtensibleHyperTextMarkupLanguage（可扩展超文本标记语言）的英文缩写，它的前身是HTML。

由于HTML代码烦琐，结构松散，所以推出了XHTML。

也可以说，XHTML是HTML的一个升级版本。

1.2.9脚本语言简介,脚本语言是基于对象的编程语言，网页中常用的有VBScript、JScript和JavaScript。

VBScript和JScript是微软的产品，IE都支持。

JavaScript是Netscape的产品，不仅适用于Netscape，同时和IE也有很好的兼容性，可以说是一种通用的脚本语言。

课堂练习2无缝滚动效果的实现,本例通过研究无缝滚动效果的实现，来认识一下XHTML和脚本语言在网页制作中的作用。

XHTML,JavaScript,1.3网站建设流程,1.3.1网站需求分析,1确定网站主要内容2规划网站主要栏目3收集网页所用素材,1.3.2设计制作网站页面,该过程主要包括设计和制作页面，所谓设计，就是用图像处理软件设计好网页的效果图，并将设计好的效果图进行切割导出。

将切割好的图片进行导出后，就可以在Dreamweaver中组织网站内容了。

包括输入文本、插入图片、动画等。

1.3.3空间和域名申请,1申请虚拟空间,所谓虚拟空间，就是互联网上的一台功能相当于服务器级的电脑或虚拟主机，该电脑要用专线或其他形式24小时与因特网相连。

2申请域名,域名的申请方法与虚拟空间相同，凡提供虚拟空间服务的网站一般都提供域名服务。

1.3.4测试和发布网站,有了空间和域名后，就可以测试并发布网站了，网站测试一般包括服务器稳定和安全测试、程序和数据库测试、网页兼容性测试等。

1.3.5网站推广,注册到搜索引擎交换广告条宣传网络广告报纸、杂志,第2章Dreamweaver8入门,熟悉Dreamweaver8工作界面网站创建与管理基本页面属性设置,2.1熟悉Dreamweaver8工作界面,启动Dreamweaver8后，在起始页的“创建新项目”列中单击第一项“HTML”，将会创建一个“.html”格式的新文档，并进入Dreamweaver8工作界面。

2.1.1标题栏和菜单栏,标题栏上显示软件名称、文档标题和程序窗口控制按钮（“最小化窗口”按钮、“最大化窗口”按钮和“关闭窗口”按钮）。

菜单栏中几乎集中了Dreamweaver的全部操作命令，利用这些命令可以编辑网页、管理站点以及设置操作界面等。

2.1.2“插入”栏,“插入”栏包含各种类型的对象按钮（如图像、表格和层等），通过单击这些按钮，可将相应的对象插入到文档中。

2.1.3文档标签与“文档”工具栏,文档标签显示了网页文档名称；

“文档”工具栏用于切换网页视图，设置网页标题，检查浏览器支持等。

2.1.4状态栏,状态栏位于文档编辑窗口底部，它提供了与当前文档相关的一些信息。

课堂练习1利用状态栏中标签选择单元格,在制作网页时，往往会使用一些像素值非常小的图片作为装饰，而要选中这些小图片或小图片所在的单元格就有些困难了，本节我们就来看看如何利用“标签选择器”来选中这些小单元格。

2.1.5属性面板与面板组,在Dreamweaver中，大多数操作都是通过面板实现的。

“属性”面板位于文档窗口的下方，主要用于查看或编辑所选对象的属性。

除“属性”面板外，Dreamweaver8还提供了众多面板，如“文件”面板、“历史记录”面板等。

如要打开或关闭某个面板，可单击“窗口”菜单下的相应选项。

课堂练习2面板基本操作,在了解了面板的种类和作用后，本节来看看如何打开新的面板、隐藏面板，以及完全关闭面板等。

2.2网站创建与管理,2.2.1确定站点目录结构,为便于以后管理和维护网站，在开始创建网页之前，最好先确定站点的目录结构。

它主要包括两项任务，一是在本地磁盘上创建用来保存网站内容（包括网页文件和图像、动画等）的文件夹，该文件夹被称为站点根文件夹；

为便于管理站点中的内容，还要根据网站栏目结构图在站点文件夹中创建若干子文件夹，以存放不同类型的文件。

课堂练习3在Dreamweaver中定义“lily”站点,为便于管理和编辑站点，在创建网页之前，首先要在Dreamweaver中定义站点。

定义站点可以将本地磁盘中的站点同Dreamweaver建立一定的关联，可以使用Dreamweaver上传或下载站点内容。

2.2.2网页文档基本操作,1新建文档,Dreamweaver中的文档也就是网页，创建新网页的方法有多种，下面使用“文件”菜单创建网页。

选择“文件”“新建”菜单，打开“新建文档”对话框。

2保存文档,新建或编辑网页文档后，需要保存文档，才能使所做的设置生效。

选择“文件”“保存”菜单，弹出“另存为”对话框,选择保存位置,输入文件名,单击“保存”按钮,3预览文档,对网页进行编辑或修改后，可在浏览器中预览其效果。

打开文档后，单击文档工具栏中的按钮，在弹出的菜单中选择“预览在IExplore6.0”菜单项,4打开和关闭文档,如果要打开某站点中现有的网页文档，可以选择“文件”“打开”菜单，在弹出的“打开”对话框中选择要打开的文件，然后单击“打开”按钮。

选择目标文件所在文件夹,关闭文件的操作相当简单，只需单击相应文件右上方的“关闭”按钮。

单击选择文件,单击“打开”按钮,课堂练习4利用“文件”面板创建网页,使用“文件”面板，可以非常方便地管理站点和站点中的文件。

本节看一下在“文件”面板中创建和命名文档的方法。

2.2.3网页文档与文件夹命名规则,为便于日后的维护和管理，网站中所有文件和文件夹的命名最好遵循一定的规则。

首先，静态的首页文件一般命名为“index.html”或“index.htm”。

如果是包含程序代码的动态页面，比如ASP文件，则命名为“index.asp”。

总之，后缀名与网页本身所使用的技术是对应的。

2.3基本页面属性设置,2.3.1指定网页文档标题和边距,在浏览网页时，可以看到浏览器上端都会有表示网页特征或欢迎词之类的标题。

另外，一般网页的上、下、左、右边距均为0，它们是如何设置的呢？

下面以“lily”网站中的“index.html”为例，来看看具体设置方法。

2.3.2指定网页背景颜色和背景图像,指定网页背景颜色的方法非常简单，只需在“页面属性”对话框中单击“背景颜色”后的颜色按钮，然后在弹出的调色板中单击选择相应颜色就可以了。

如果用户喜欢的话，也可以将图像设置为网页背景。

2.3.3为网页设置文本和链接属性,通过设置“页面属性”对话框中的“页面字体”、“大小”和“文本颜色”，可以设置网页中文本的属性。

另外，要设置链接文本的属性，可以在“页面属性”对话框左侧的分类列表中选择“链接”选项，然后在右侧设置各项参数。

课堂练习5为“movie”网页设置页面属性,通过前面的学习，相信大家对基本页面属性的设置已经有了个大概的认识。

本节通过编辑“movie”网页，来使读者进一步掌握网页页面属性的设置方法。

设置页面属性前后效果对比,第3章输入与编辑基本网页元素,输入与编辑文本应用图像,3.1输入与编辑文本,3.1.1输入文本,在Dreamweaver中输入文本的方法非常简单，只要将插入点定位在网页的某个位置，然后输入文本就可以了。

此外，用户还可以利用剪贴板将外部文本拷贝到网页中，然后设置其格式和各种属性。

3.1.2设置文本的段落格式和字符格式,Dreamweaver中的文本格式设置与标准字处理程序（如Word）类似。

用户可以利用“属性”面板为文本设置默认格式化样式（段落、标题1、标题2等），或者直接设置所选文本的字体、大小、颜色、粗体、斜体、对齐方式和列表方式等。

1设置字体列表,Dreamweaver中自带的字体有限，一般满足不了大多数网页设计者的需求。

我们可以通过设置字体列表来解决这一问题。

选择字体,单击添加字体,2设置文本字体及大小,学会设置字体列表后，就