Dreamweaver网页制作-第二单元
TP-4702.0101Dreamweaver网页设计与制作第1章
Dreamweaver
Dreamweaver是Macromedia公司推出的，是目前国 内公认的最佳的网页制作工具，最近版本为 Dreamweaver 8
教学进程
1.2 网站的策划和设计
1.2.1 网站的风格
风格，是指站点的整体形象给访问者的综合感受，比 较抽象。 网站的整体形象包含以下因素 ☻网站标志的设计 ☻ 色彩 ☻ 版面布局 ☻ 浏览方式 ☻交互性 ☻文字 ☻价值
合理的版面布局
精美的网站标志
注重色彩搭配
网页内容便于浏览
网页内容要精彩
简约、美观
教学进程
1.1.2 网页设计常用的工具
FrontPage
FrontPage是Microsoft公司推出的Web站点创建和管理 工具，它是微软Office成员之一。 FrontPage是一个所见即所得的“傻瓜”型网页制作软 件，你可以在对HTML毫不了解的情况下轻松地制作 出自己的网页来，你需要做的只是用鼠标以及键盘的 简单操作。
紫色
紫色：给人神秘、压迫的感觉。
白色
白色：具有洁白、明快、纯真、清洁的个性。
灰色
灰色：具有中庸、平凡、温和、谦让、中立和 高雅的个性。
ห้องสมุดไป่ตู้
教学进程
1.2.3 设计草图
根据实际需要，画出网站的设计草图
教学进程
1.3 Dreamweaver 8介绍
1.3.1 Dreamweaver简介
Dreamweaver 8 是一款专业的HTML编辑器 用于对Web站点、Web页和Web应用程序进行设计、 编码和开发。
第4章 超级链接的应用
第5章 图像与多媒体 第6章 使用CSS样式表
第7章 交互式表单的应用
网页设计教程 Dreamweaver CS4 动态效果网页制作
图10.5 “打开浏览器”对话框 步骤3：单击“浏览”按钮，选择要打开的文件或在文本框中输入 URL地址。 步骤4：在“窗口宽度”和“窗口高度”文本框中输入新浏览器窗口 的高度与宽度，单位是像素。 步骤5：在属性设置区域设置浏览器新窗口是否显示相应的元素。具 体设置如下。
“导航工具栏”：带有前进、后退、刷新等按钮的工具栏。 “菜单条”：提供菜单命令的工具栏。 “地址工具栏”：显示地址栏。 “状态栏”：在窗口底部显示状态信息，如：剩余加载时间、相关 URL链接等。 “需要时使用滚动条”：根据内容多少自动决定是否显示滚动条。 “调整大小手柄”：允许用户通过拖动窗口右下角来重新调整窗口 大小。 步骤6：在窗口名称文本框中输入相应的内容，单击“确定”按钮。 步骤7：检查添加行为动作的事件是否正确，若不正确，选择所需事 件。 步骤8：按F12键预览网页，效果如图10.6所示，单击下层浏览器的 小图片，弹出大图片的浏览器。
步骤 5：按F12键预览网页，当单击对象时，弹出信息框如图10.4所 示。
10. 3 为对象附加的行为
10 .4 弹出的信息框
提示：如果附加行为的对象是整个页面，事件可以设置为onLoad， 表示载入页面时即同时弹出信息框。
打开浏览器窗口
打开浏览器窗口行为，可以在一个新的窗口中打开指定的URL地址， 同时还可以指定打开浏览器窗口的属性，包括大小、名称等。例如 在单击图像缩略图时，用户可以使用该行为在一个新窗口打开对应 的大幅图像，并且使打开的窗口大小与图像大小适配。 如果不指定新窗口的尺寸，则打开的新窗口将与当前窗口属性一致。 如果指定了任何一个属性，将同时取消原来的其他继承属性。 实例预览：打开第10章“本章实例目录下的”“第10章\本章实例\ Open Brower \final\ Open Brower.htm”文件，单击图片可打开一个 新的窗口。 实例操作步骤如下： 步骤 1：打开“本章实例”目录下的“第10章\本章实例\ Open Brower \ Open Brower.htm”文件，选择要附加行为的对象，打开“行为” 面板。 步骤 2：单击“添加行为”按钮，从弹出的菜单中选择“打开浏览器 窗口”，这时会打开如图10.5所示的对话框。
Dreamweaver中怎样制作超链接
Dreamweaver中怎样制作超链接【页面之间的超级连接】在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。
1、在网页中选中要做超级链接的文字或者图片。
2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的'网页文件就完成了。
做好超级链接属性面板出现链接文件显示。
3、按F12预览网页。
在浏览器里光标移到超级链接的地方就会变成手型。
〖提示〗你也可以手工在链接输入框中输入地址。
给图片加上超级链接的方法和文字完全相同。
如果超级链接指向的不是一个网页文件。
而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。
超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。
例如，在链接框里写上那么，单击链接就可以跳转到老小孩网站。
【邮件地址的超级连接】在网页制作中，还经常看到这样的一些超级链接。
单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。
这也是一种超级链接。
制作方法是：在编辑状态下，先选定要链接的图片或文字(比如：欢迎您来信赐教!)，在插入栏点或点插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。
提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。
创建完成后，保存页面，按F12预览网页效果。
【制作图片上的超级链接】注意，我们这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。
比如一张中国地图的图片，单击了不同的省跳转到不同的网页。
可点的区域就是热区。
为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。
鼠标移动到省份的热区，会显示提示，如果有预先设置的网站，点击会进入对方的网站。
【制作方法】1、首先插入图片。
单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。
2、属性面板改换为热点面板如图：链接输入框：填入相应的链接。
替代框：填入你的提示文字说明。
dreamweaver制作网页常用代码
meta是用来在HTML文档中模拟HTTP协议的响应头报文。
meta 标签用于网页的<head>与</head>中，meta 标签的用处很多。
meta 的属性有两种：name和http-equiv。
name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。
这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。
比较常用的有以下几个：name 属性<meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等；<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词；<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容；<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者；<meta name="Robots"contect="all|none|index|noindex|follow|nofollow">其中的属性说明如下：设定为all：文件将被检索，且页面上的链接可以被查询；设定为none：文件将不被检索，且页面上的链接不可以被查询；设定为index：文件将被检索；设定为follow：页面上的链接可以被查询；设定为noindex：文件将不被检索，但页面上的链接可以被查询；设定为nofollow：文件将不被检索，页面上的链接可以被查询。
Dreamweaver CC教案
《Dreamweaver网页设计与制作》项目一创建站点
《Dreamweaver网页设计与制作》项目二制作简单的文字页面
《Dreamweaver网页设计与制作》项目三制作图像页面
《Dreamweaver网页设计与制作》项目四使用表格布局网页
《Dreamweaver网页设计与制作》项目五运用CSS样式美化网页
《Dreamweaver网页设计与制作》项目六制作图像页面
《Dreamweaver网页设计与制作》项目七制作图像页面
《Dreamweaver网页设计与制作》项目八设置页面中的超链接
《Dreamweaver网页设计与制作》项目九使用框架布局页面
《Dreamweaver网页设计与制作》项目十使用浮动框架布局页面
《Dreamweaver网页设计与制作》项目十一 AP Div在网页中的应用
《Dreamweaver网页设计与制作》项目十二使用模板提高网页制作效率
《Dreamweaver网页设计与制作》项目十三库项目在网页中的应用
《Dreamweaver网页设计与制作》项目十四使用行为和JavaScript为网页添加特效。
DREAMWEAVER网页设计复习题--全版答案
《Deamweaver8网页设计与制作》复习题一一、填空题1、在Dreamweaver 编辑区中共有三种视图模式分别指的是代码视图、代码和设计视图和设计视图。
P92、deamweaver8默认的首页文件名是index.htm。
P163、搭建站点可以有两种方式，一是使用向导完成完成，二是利用高级设定完成。
P114、有两种设置deamweaver8站点的方法：一是使用向导完成，二是利用高级设定完成。
5、deamweaver 8的标题栏会显示网页标题、所在位置及文件名称等。
P9.26、对多个网站进行管理是通过文件面板进行。
P18.47、初次启动Dreamweaver 8时，会弹出“工作区设置”对话框，供用户选择的有设计器和编码器工作区布局。
在这里选择默认的“设计器”就可以了。
P38、导航条可以存在4种状态，它们是状态图像、鼠标经过图像、按下图像和按下时鼠标经过图像。
P52.59、META标记记录当前网页的相关信息，如编码、作者、版权等。
P2710、头内容在浏览器中是不可见的，但却携带网页的重要信息，如关键字、描述文字等。
P2111、预览网页效果的快捷键是F12 。
P2212、规划网站，一般要从三个方面去思考，即网站的主题、网站的内容和网站的对象。
13、页面的标题“音乐欣赏”是由HTML标签中的 <title>定义的。
14、网页中常用的图像格式有 GIF JPG PNG ，其中 GIF 格式支持动画格式。
(JPG与JPEG一样的，只需要写第一个即可。
)二、单项选择题1、创建完全空白的静态页面应选择（B ）A. 基本页类别中的“HTML模板”选项B. 基本页类别中的“HTML”选项C. 动态页类别中的选项D. 入门页面中的选项2、下列（ C ）不能在网页的“页面属性”中进行设置。
（页面属性有背景图，但不能对它进行设置。
）A.文档编码B.背景颜色、文本颜色、链接颜色C.网页背景图及其透明度D.跟踪图像及其透明度3、关于在Dreamweaver中插入Flash文本，说法错误的是（ A ）A.可以设置Flash文本的动态效果，如淡入淡出等B.通过插入Flash文本，用户可以直接创建一个Flash文本对象的动画C.可以设置Flash文本的字体、字号、文本颜色、鼠标转滚颜色等属性D.可以为Flash文本设置链接4、使用Dreamweaver8 创建网站的叙述，不正确的是( C )A.站点的命名最好用英文或英文和数字组合B.网页文件应按照分类分别存入不同文件夹C.必须首先创建站点，网页文件才能够创建D.静态文件的默认扩展名为.htm或.html5、在IE浏览器中预览网页的快捷键是（ D ）A.F9B.F10C.F11D.F126、对插入文件中的Flash动画，不能在属性面板中设置动画的（B ）属性。
网页制作三剑客之DreamWeaverMX2004.
DreamWeaver MX 2004-lstcxw
10
CSS样式
认识CSS样式表
Cascading Style Sheets(层叠样式表)
内部CSS和外部CSS
CSS实战练习
改变鼠标形态: 新建样式 .mouse {cursor: url(img/cursor/01.ani)}应用于body 改变链接样式: a:link
导入表格数据和表格排序
4
DreamWeaver MX 2004-lstcxw
超级链接
链接到其他文档或文件
给文字、图片创建超级链接[插入]->[超级链接],设置好
URL和Target 绝对路径,相对路径(推荐),站点根目录相对路径 图像热点链接:”属性”面板中的热点工具
其他几种基本超级链接的创建
DreamWeaver MX 2004-lstcxw
14
扩展DreamWeaver MX 2004的应用
DreamWeaver MX 2004与JavaScript结合
用各种搜索引擎搜索关键字”网页特效”就能得到丰富
的网页特效,将Script代码嵌入html代码即可
DreamWeaver MX 2004与Fireworks结合
DreamWeaver经典插件的应用
打字机效果
滚动标题栏效果 精美日历效果
DreamWeaver MX 2004-lstcxw
16
模板,库和站点管理
模板和库
站点测试
站点发布 站点管理
DreamWeaver MX 2004-lstcxw
Dreamweaver制作网页经典问题大整理
Dreamweaver制作网页经典问题大整理1> 在DW中,如何输入一个空格呢?输入空格的问题,在DW似乎已成了一个老生常谈的问题,我们可能在许多介绍DW使用方面的书籍或文章中看到过N次。
DW中对空格输入的限制是针对“半角”文字状态而言的,因此通过将输入法调整到全角模式就可以避免了,方法是:打开中文输入法(以人工智能ABC为例),按Shift+Space切换到全角状态,现在应该没问题了。
此外,你还可以通过许多“变通”的方法达到录入空格的目的,比如常用的是:直接在源代码中加入代表空格的HTML代码“ ”;输入一定长度的文字对象后,然后调整文字的颜色与当前的背景颜色相同等等,不过注意的是后者在一些浏览器中可能显示上有点问题。
2> 如何在浏览器地址栏前添加自定义的小图标?你是不是记得有时在浏览网易网站的首页时,在地址前会显示一个“易”字样的小图标。
而默认情况下,这个图标是一个IE浏览器的指定图片。
其实这也不是什么高深技术,只不过在网站目录下添加了一个特定文件而已。
这时,我们需要预先制作一个图标文件,大小为16*16像素。
文件扩展名为ico,然后上传到相应目录中。
在HTML源文件“<head></head>”之间添加如下代码: <Link Rel="SHORTCUT ICON" href="http://图片的地址(注意与刚才的目录对应)"> 其中的“SHORTCUT ICON”即为该图标的名称。
当然如果用户使用IE5或以上版本浏览时,就更简单了,只需将图片上传到网站根目录下,即可自动识别!3> 为什么,我本来设计很好的网页,在浏览器窗口最小化时会变的丑陋难堪?这应该是个很值得大家注意的问题,也就是说,在全屏状态下浏览网页内容时,一点问题也没有。
当我们使用窗口的最小化命令或手动的调整窗口的大小时,问题就慢慢出现了。
一些dw网页制作实例
目录分割线 (1)弹出菜单 (5)滑动折叠菜单 (10)多彩文字链接 (17)极酷的鼠标 (26)网站个性小图标 (28)网站过度特效 (30)插入flash按钮 (32)插入flash文字 (34)插入透明背景的flash (35)Flash个性播放界面 (38)制作电子相册 (43)随机播放音乐 (45)滚动布告栏 (47)数据库连接 (51)验证用户注册 (62)在线音乐网站 (74)实现购物车 (84)实现产品搜索 (90)Blog日历事件 (94)随笔管理及评论 (106)分割线是网页中不可缺少的元素，它主要用于分隔网页内容，也可以用于装饰网页。
效果说明在网页中间会出现一条漂亮的分隔线，并且能够不断闪动，从而充分体现出网站的个性，如图32-1 所示。
创作思想本实例使用层作为定位，然后在层中插入表格，在表格中插入图片并在时间轴中分别添加样式滤镜效果。
操作步骤（ 1 ）新建一个网页文件，并在网页中插入一个层，然后在层中插入一个1 行 2 列的表格，如图32-2 所示。
（ 2 ）设置表格的间距，然后在表格的单元格中插入图片，如图32-3 所示。
（ 3 ）设置时间轴。
调出时间轴，在时间轴的第5 帧处添加【改变属性】行为，并设置层对象的属性，如图32-4 所示。
（ 4 ）添加行为和改变属性。
在其他帧中分别添加行为，并根据需要改变属性，在第40 帧处添加转到时间轴的第 1 帧行为，再勾选【自动播放】复选框，如图32-5 所示。
本图代码如下所述：Glow(Color=red, Strength=1)Glow(Color=red, Strength=2)Glow(Color=red, Strength=3)Glow(Color=red, Strength=4)Glow(Color=red, Strength=3)Glow(Color=red, Strength=2)Glow(Color=red, Strength=1)实例制作完成。
网页设计与制作(Dreamweaver CS6)教案(第2版 杨杰版)
隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案教学过程一、Dreamweaver的工作界面1．工作区切换器设计器：可以弥补编程能力较差带来的缺陷，直观可视，设计和修改简单方便。
编码人员（高级）：用于那些主要用代码来制作网页的用户使用.经典：便于习惯使用之前版本布局模式的设计者使用.双重屏幕：适用于在计算机上有两个显示器的用户。
2．菜单栏提供了10个主菜单项，利用菜单栏基本上能够实现Dreamweaver的所有功能。
菜单项按照功能的不同进行划分，使用户使用方便。
例如，“文件”菜单中包含了对文档操作的命令；“插入”菜单中包含了向网页中插入各种页面元素和创建超链接的命令；“站点”菜单中包含了创建和管理站点的相关命令。
3．文档工具栏和文档窗口“文档”工具栏包含了“文档”窗口视图模式的切换按钮，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项; “文档”窗口用来显示当前打开的文档，用户在这里进行网页的编辑制作。
4．状态栏5．“属性”面板“属性”面板用于查看和设置当前选定对象（如文本、图像等）的最常用属性。
该面板的内容会根据选择对象的不同而显示不同的属性。
6．面板组Dreamweaver中的面板通常被组织到面板组中，其中的面板以选项卡的形式显示。
单击面板组右上角的“展开面板”或“折叠为图标”按钮，可以展开或折叠面板组。
单击面板标签名称可以切换到该面板，双击标签名称，可以展开或折叠该面板。
拖动面板标签可以在面板组内改变该面板的排列位置，或将面板拖动到另一个面板组的标签处，当出现蓝色突出显示的区域时，释放鼠标可创建新的面板组。
向外拖动面板或面板组可使其变为浮动的状态。
浮动的面板或面板组可以停靠在一个固定的位置，拖动面板或面板组到要停靠位置的边缘，当出现蓝色线时释放鼠标即可。
7．“插入”面板面板包含将各种网页元素插入到文档的快捷按钮。