Dreamweaver网页制作-第二单元
- 格式:ppt
- 大小:3.51 MB
- 文档页数:81
Dreamweaver中怎样制作超链接【页面之间的超级连接】在网页中,单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。
1、在网页中选中要做超级链接的文字或者图片。
2、在属性面板中单击黄色文件夹图标,在弹出的对话框里选中相应的'网页文件就完成了。
做好超级链接属性面板出现链接文件显示。
3、按F12预览网页。
在浏览器里光标移到超级链接的地方就会变成手型。
〖提示〗你也可以手工在链接输入框中输入地址。
给图片加上超级链接的方法和文字完全相同。
如果超级链接指向的不是一个网页文件。
而是其他文件例如zip、exe文件等等,单击链接的时候就会下载文件。
超级链接也可以直接指向地址而不是一个文件,那么单击链接直接跳转到相应的地址。
例如,在链接框里写上那么,单击链接就可以跳转到老小孩网站。
【邮件地址的超级连接】在网页制作中,还经常看到这样的一些超级链接。
单击了以后,会弹出邮件发送程序,联系人的地址也已经填写好了。
这也是一种超级链接。
制作方法是:在编辑状态下,先选定要链接的图片或文字(比如:欢迎您来信赐教!),在插入栏点或点插入菜单选“电子邮件链接”弹出如下对话框,填入E-Mail地址即可。
提示:还可以选中图片或者文字,直接在属性面板链接框中填写“mailto:邮件地址”。
创建完成后,保存页面,按F12预览网页效果。
【制作图片上的超级链接】注意,我们这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。
比如一张中国地图的图片,单击了不同的省跳转到不同的网页。
可点的区域就是热区。
为了演示制作效果下面的中国地图我加了一些链接,你可以用鼠标测试。
鼠标移动到省份的热区,会显示提示,如果有预先设置的网站,点击会进入对方的网站。
【制作方法】1、首先插入图片。
单击图片,用展开的属性面板上的绘图工具在画面上绘制热区。
2、属性面板改换为热点面板如图:链接输入框:填入相应的链接。
替代框:填入你的提示文字说明。
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网页设计与制作》项目一创建站点
《Dreamweaver网页设计与制作》项目二制作简单的文字页面
《Dreamweaver网页设计与制作》项目三制作图像页面
《Dreamweaver网页设计与制作》项目四使用表格布局网页
《Dreamweaver网页设计与制作》项目五运用CSS样式美化网页
《Dreamweaver网页设计与制作》项目六制作图像页面
《Dreamweaver网页设计与制作》项目七制作图像页面
《Dreamweaver网页设计与制作》项目八设置页面中的超链接
《Dreamweaver网页设计与制作》项目九使用框架布局页面
《Dreamweaver网页设计与制作》项目十使用浮动框架布局页面
《Dreamweaver网页设计与制作》项目十一 AP Div在网页中的应用
《Dreamweaver网页设计与制作》项目十二使用模板提高网页制作效率
《Dreamweaver网页设计与制作》项目十三库项目在网页中的应用
《Dreamweaver网页设计与制作》项目十四使用行为和JavaScript为网页添加特效。
《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 )属性。
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> 为什么,我本来设计很好的网页,在浏览器窗口最小化时会变的丑陋难堪?这应该是个很值得大家注意的问题,也就是说,在全屏状态下浏览网页内容时,一点问题也没有。
当我们使用窗口的最小化命令或手动的调整窗口的大小时,问题就慢慢出现了。
目录分割线 (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的工作界面1.工作区切换器设计器:可以弥补编程能力较差带来的缺陷,直观可视,设计和修改简单方便。
编码人员(高级):用于那些主要用代码来制作网页的用户使用.经典:便于习惯使用之前版本布局模式的设计者使用.双重屏幕:适用于在计算机上有两个显示器的用户。
2.菜单栏提供了10个主菜单项,利用菜单栏基本上能够实现Dreamweaver的所有功能。
菜单项按照功能的不同进行划分,使用户使用方便。
例如,“文件”菜单中包含了对文档操作的命令;“插入”菜单中包含了向网页中插入各种页面元素和创建超链接的命令;“站点”菜单中包含了创建和管理站点的相关命令。
3.文档工具栏和文档窗口“文档”工具栏包含了“文档”窗口视图模式的切换按钮,以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项; “文档”窗口用来显示当前打开的文档,用户在这里进行网页的编辑制作。
4.状态栏5.“属性”面板“属性”面板用于查看和设置当前选定对象(如文本、图像等)的最常用属性。
该面板的内容会根据选择对象的不同而显示不同的属性。
6.面板组Dreamweaver中的面板通常被组织到面板组中,其中的面板以选项卡的形式显示。
单击面板组右上角的“展开面板”或“折叠为图标”按钮,可以展开或折叠面板组。
单击面板标签名称可以切换到该面板,双击标签名称,可以展开或折叠该面板。
拖动面板标签可以在面板组内改变该面板的排列位置,或将面板拖动到另一个面板组的标签处,当出现蓝色突出显示的区域时,释放鼠标可创建新的面板组。
向外拖动面板或面板组可使其变为浮动的状态。
浮动的面板或面板组可以停靠在一个固定的位置,拖动面板或面板组到要停靠位置的边缘,当出现蓝色线时释放鼠标即可。
7.“插入”面板面板包含将各种网页元素插入到文档的快捷按钮。