DreamWeaver完整教案第八章
中文版Dreamweaver8实用教程
中文版Dreamweaver 8实用教程
8.2.3 创建链接
在Dreamweaver 8中可以创建各种超链接。当在本地站点内移动或重命名 文档或其他链接文件时,Dreamweaver 还可自动更新指向文档的链接。 创建链接的类型和方法 创建网页间超链接 创建网页内的超链接 创建E-Mail链接创 建虚链接及脚本链接 创建图形热点链接
中文版Dreamweaver 8实用教程
在Dreamwe在网页中创建超链接,首先选中要创建链接的对象 。然后在该 对象的属性检查器的“链接”文本框里输入要链接对象的URL或路径即可.
中文版Dreamweaver 8实用教程
中文版Dreamweaver 8实用教程
8.2.2 认识URL和链接路径
URL和链接路径的概念,以及它们之间相互的关系,是用户在设置网页超 链接之前所必须要掌握的基本常识。 URL 绝对路径 相对路径
中文版Dreamweaver 8实用教程
URL(Uniform Resoure Locator,统一资源定位器)指的是Internet文件在网 上的地址,是使用数字和字母按一定顺序排列来确定的Internet地址,由访问 方法、服务器名、端口号,以及文档位置组成。格式为Access-method :// server-name:port / document-location。 比如/dw/index.htm,这是一个典型的URL,它 指出使用http协议访问域名所在服务器下dw这个目录中的 index.htm文件。
中文版Dreamweaver 8实用教程
要创建图形热点链接,首先需要在文档窗口中选中插入的图像,然后使用图 像属性检查器中的“地图名称”文本框和“热点工具”按钮在该图像中绘制热 点区域 。最后,选中所创建的热点区域后,在”热点”的属性检查器的”链接”文 本框中输入链接目标的URL或路径即可.
Dreamweaver-8基础与实例教程省名师优质课赛课获奖课件市赛课一等奖课件
8.1.2 保存框架文件
保存框架旳全部文档旳详细操作环节如下。 1.选择“文件”菜单中旳“保存全部”命令,出现“保
存为”对话框,在整个框架集周围都出现粗边框,为 整个框架集命名。 2.单击“保存”按钮,粗边框切换到左边旳框架四面, 在“文件名”文本框中为其命名。按照此措施将全部 框架文件保存。
8.2 框架旳属性
8.4框架实例
8.4.1框架实例 8.4.2嵌入式框架实例
8.4.1框架实例
框架能够把页面提成相对独立旳几种部分,各个部分组 合在一起,就构成了这个页面。本节将经过一种制作 一种“精品课程”旳网站实例,来学习怎样在网页中 制作框架构造旳网页。
8.4.2嵌入式框架实例
嵌入式框架也称作iframe,嵌入式框架与框架网页类似, 它能够把一种网页旳框架和内容嵌入既有旳网页中。 下面来以“精品课程建设”网站为例向大家详细演示 一下嵌入式框架旳操作环节.
2.设置框架属性
在“属性”面板中,单击右下角旳“”展开箭头,查看 框架旳全部属性
8.2.2框架组属性
1.选择框架集:选择框架集时,单击框架边框即可,选 用旳全部框架边框呈虚线。
2.选择一种框架集后,属性面板如图
8.3为框架设置链接
要在一种框架中使用链接打开另一种框架中旳文档,必 须设置链接目旳,详细操作环节如下:
第8章 框架第8章 框架源自8.1 设置框架 8.2 框架旳属性 8.3 为框架设置链接 8.4 框架实例
8.1 设置框架
8.1.1 创建框架 8.1.2 保存框架文件
8.1.1 创建框架
在“插入”菜单中选择“HTML”选项,然后单击“框架” 子菜单中选择预定义旳框架集。
也能够经过“插入”工具栏插入菜单,在插入工具栏 “布局”类别中,单击“框架”按钮上旳下拉箭头, 然后选择预定义旳框架集。
Dreamweaver8网页全教案
网页制作基础(Dreamwaver 8 教程)第一章Dreamweaver8.0的操作环境第一天的内容可能让你觉得枯燥乏味,不过,“工欲善其事,必先利其器”,让我们一起来理解Dreamweaver8的操作环境,完成站点的创建。
一、Dreamweaver8 的操作环境在首次启动Dreamweaver8时会出现一个“工作区设置”对话框,在对话框左侧是Dreamweaver8的设计视图,右侧是Dreamweave 8的代码视图。
Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。
我们选择面向设计者的设计视图布局。
在Dreamweave 8 中首先将显示一个起始页,能够勾选这个窗口下面的“不在显示此对话框”来隐藏它。
在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目,建议大家保留。
新建或打开一个文档,进入Dreamweaver8的标准工作界面。
Dreamweaver8的标准工作界面包括:标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。
1、标题显示栏启动Macromedia Dreamweave 8后,标题栏将显示文字Macromedia Dreamweave 8.0,新建或打开一个文档后,在后面还会显示该文档所在的位置和文件名称。
2、菜单栏Dreamweave 8的菜单共有10个,即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和协助。
其中,编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。
文件:用来管理文件。
例如新建,打开,保存,另存为,导入,输出打印等。
编辑:用来编辑文本。
例如剪切,复制,粘贴,查找,替换和参数设置等。
查看:用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。
插入:用来插入各种元素,例如图片、多媒体组件,表格、框架及超级链接等。
修改:具有对页面元素修改的功能,例如在表格中插入表格,拆分、合并单元格,对其对象等。
DREAMWEAVER8教案
DREAMWEAVER8教案多媒体课件制作教案使用专业:教育学、心理学使用年级:三年级撰写人:潘威课程性质:选修课使用教材:授课时数:34第一章网页制作概述 2学时教学目的:了解网页及网站基本概念及网页的基本要素分析及网站设计流程教学重点与难点:网页、网站设计流程,网页基本要素第一节网页和网站一、网页网页又称为Web页,是网站的基本信息单位二、网站互联网上服务器所承载的一组相关网页。
三、网页的基本功能第二节网页中的主要元素一、文本网页发布信息所用的主要形式。
二、图像网页上的图形格式一般使用JPEG和GIF,四、链接标志通过链接可以从一个网页转到另一个网页,也可以从一个网站转到另一个网站。
链接有网页外、网页内、邮件链接五、其他的基本要素第三节网页制作工具一、网页编辑工具二、网页图像编辑工具三、动态网页技术第四节网页设计的基本流程一、网站的设计流程二、网页的设计与制作三、网页的测试四、网页上传和发布第二部分 FRONTPAGE讲解 16学时第三部分DREAMWEAVER讲解 16学时第一章 Dream weaver基础 2学时教学目的:了解DW8的操作界面及常用命令,掌握规划和创建站点的操作,掌握基本的网页操作知识。
教学重点与难点:规划站点的结构、网页的基本操作第一节 Dream weaver 8工作界面一、启动和退出Dreamweaver二、Dreamweaver8操作界面第二节规划与创建站点一、规划网站的整体结构规划站点结构是设计站点的必要前提,其操作是将不同的文件分类存放在文件夹中以便于设计者管理。
●在制作站点之前需要先建立一个文件夹以保存在网页制作过程中产生的文件,从而方便管理。
发布站点时只需将这个文件夹上传到WEB服务器上即可。
●在制作网页过程中合理地命名文件和文件夹是很重要的,一般以易于记忆和理解的英文或汉语拼音命名。
站点规划好后,可以绘制网站结构草图。
还需要确定整个网站的风格和样式,颜色及页面的布局等。
Dreamweaver8和Flash8案例教程》第8章中文Flash8基础
(2)“查看”栏:工具箱内的“查 看”栏中有“手形工具”和“缩放工 具”,使用这两个工具可以调整舞台 工作区的显示比例和观察的位置。这 两个工具的名称与它们的作用如表81-3所示。
Page 16
表8-1-3“查看”栏中工具按钮的名称与作用
序号 1
图标 英文名 中文名
Hand
手形工 具
热键 H
作用
第8章 中文Flash 8基础
8.1 【案例25】“计算机产品展示”动 画
8.2 【案例26】“简单的图像切换”动 画
8.3 【案例27】“沿矩形框架移动的鼠标”动画
8.4 【案例28】“跳跃彩球”动画
Page 1
8.1 【案例25】“计算机产品展示” 动画
8.1.1 学习目标
“计算机产品展示”动画是制作的第1 个Flash动画(也叫做影片),该动画播放 后,在黄色背景的演示窗口内的上边,红 色文字“最新计算机产品”逐渐水平展开 显示,同时一幅计算机图像从小到大逐渐 显示出来。该动画播放中的两个画面如图 8-1-1所示。
Page 30
Page 31
图8-2-7 “文件类型”下拉列表框
如果选择的文件名是以数字序号结尾 的,则会弹出“中文Flash 8”提示框,询问 是否将同一个文件夹中的一系列文件全部 导入。单击“否”按钮,则只将选定的文 件导入。单击“是”按钮,即可将一系列 文件全部导入舞台工作区内。例如,在文 件夹内有PC1.jpg…PC10.jpg图像文件,在选 中PC1.jpg文件后,单击“是”按钮,即可 将这些文件都导入舞台工作区内。
Page 2
图8-1-1 第1个Flash影片播放中的两个画面
Page 3
通过制作该案例,可以对中文Flash 8 的工作环境和一些基本操作方法有一个初 步的了解。
Dreamweaver电子教案课件第8章
激活“插入”/“布局”面板,单击图标 下拉菜单,如图所示。
中的向下箭头弹出“框架的类型”
第8章 AP元素和框架
本章重点
本章将介绍AP元素和框架的基本知识及使用方法,内容包括:AP元素及嵌 套AP元素的创建、AP元素的属性设置、AP元素的管理、AP元素的操作、实 现AP元素与表格之间的相互转化以及显示与隐藏AP元素;框架的创建、框架 的基本操作、框架和框架集的属性设置、设置框架背景、保存框架和框架集 文件、使用链接控制框架的内容及框架的实际应用等。
1.能够精确定位
2.插入自如
3.加速浏览
4.可叠加 (1)单击“插入”面板上的“布局”标签,切换到“布局”面板。 (2)单击“布局”面板中的“绘制AP Div”图标,此时鼠标将会变成形状。 (3)在文档窗口中需要插入AP元素的位置,按下鼠标左键拖出一个矩形AP元素。
技巧:如果需要绘制多个AP元素,在单击“绘制AP Div”图标之后,按住Ctrl 键的同时在文档窗口中绘制一个AP元素,只要不释放Ctrl键,就可以连续绘制多个 AP元素。
(2)在绘制子AP元素的同时,按下键盘上的Alt键。 先创建的AP元素成为父AP元素,在父AP元素内创建的AP元素成为子AP元素。
(3)执行“窗口”/“AP元素”菜单命令,调出“AP元素”管理面板。然后在AP元 素列表中选中将作为子元素的AP元素,按住Ctrl键将该AP元素拖动到父AP元素上,释 放鼠标即可。
8.2 创建AP元素
执行“窗口”|“AP元素”命令,可以显示AP元素管理面板。如图所示。
第8章网页制作工具Dreamweaver8
相关的属性,用于为“文件”面板设置站点首选参数,如图814所示。
图8-14 站点参数设置
8
8.2 站点管理
所谓站点,可以看做是一系列文档的组合,这些文档之 间通过各种链接关联起来,可能拥有相似的属性,例如,描 述相关的主体,采用相似的设计,或者实现相同的目的等, 也可能只是毫无意义的链接。利用浏览器,就可以从一个文 档跳转到另一个文档,实现对整个网站的浏览。 8.2.1 本地站点和远端站点
图8-64 实例效果
【例8-8】
22
8.7 使用表格
8.7.1 插入表格 表格是页面布局极为有用的设计工具。在设计页面时,往
往要利用表格来定位页面元素。使用表格可以导入表格化数据, 设计页面分栏,定位页面上的文本和图像等。 在Dreamweaver中插入表格的方法如下。 ① 将光标放到要插入表格的位置。 ② 执行下列操作之一:
(1)插入工具栏 Dreamweaver 8的插入工具栏如图8-4(a)所示,插入工
具栏中默认显示的是“常用”类的主要功能按钮。单击“常用”按 钮会弹出一个下拉菜单,其中包含了插入工具栏中的其他功能 菜单,如图8-4(b)所示。用户选择不同的分类,插入工具栏 中包含的功能按钮也随之改变。
图8-4 插入工具栏及其功能分类菜单
如果需要设置网页的其他属性,可以打开“页面属性”对 话框进行设置。
14
8.3 制作第一个网页
8.3.3 网页基本元素 在通常情况下,网页上一般都包含文本、日期、特殊符号
及水平线等基本元素。 1.文本和特殊符号
文本的操作主要包括:输入文字、设置文字大小、设置字 体、设置文本颜色、设置文本对齐方式等。 2.日期
网页设计教程Dreamweaver电子课件第8章
课堂练习8.7 使用重定义HTML样式来定义整个文档的背景
8.2.2 本文档内重定义HTML样式
8.2 本文档内的样式
课堂练习8.8 使用重定义HTML样式来定义标题文本
8.2.2 本文档内重定义HTML样式
8.2 本文档内的样式
8.2.3 本文档内CSS选择器样式
8.2 本文档内的样式
8.2.3 本文档内CSS选择器样式
8.4 CSS文件中的样式
5.定义表单元素的样式
8.4.1 CSS文件中的重定义HTML样式
8.4 CSS文件中的样式
8.4.1 CSS文件中的重定义HTML样式
8.4 CSS文件中的样式
8.4.1 CSS文件中的重定义HTML样式
8.4 CSS文件中的样式
6.设置页面中的滚动条
8.4.1 CSS文件中的重定义HTML样式
8.2.1 本文档内自定义样式
8.2 本文档内的样式
课堂练习8.1 设置本文档内的自定义样式
8.2.1 本文档内自定义样式
8.2 本文档内的样式
2. 背景
8.2.1 本文档内自定义样式
8.2 本文档内的样式
课堂练习8.2 给表格设置背景图片
8.2.1 本文档内自定义样式
8.2 本文档内的样式
3.区块
8.2.1 本文档内自定义样式
8.2 本文档内的样式
课堂练习8.3 设定左侧单元格中文字的格式
8.2.1 本文档内自定义样式
8.2 本文档内的样式
4.方框 5.边框
8.2.1 本文档内自定义样式
8.2 本文档内的样式
课堂练习8.4 给文本框设定边框
8.2.1 本文档内自定义样式
8.2 本文档内的样式
Dreamweaver8教案
教学进度计划表周周节教学内容备注7 6 1、第1章Dreamweaver8简述和操作界面2、第2章规划站点3、第3章创建文档8 6 1、第4章编辑文本2、第5章图像的应用9 6 1、第6章使用CSS样式2、第7章网络多媒体应用10 6 1、第8章使用链接2、第9章使用表格11 6 1、第10章使用表格的“布局模式”2、第11章层的使用12 6 1、第12章创建交互式菜单2、第13章使用行为13 6 1、第14章使用框架和框架集2、第15章使用模板和库14 6 1、第16章站点管理2、第17章综合实例(课程设计)课题第1章Dreamweaver8简述和操作界面课时 2 日期10月.9 课节 3.4教学目的1、了解Dreamweaver 8 的界面组成以及面板的使用方法。
2、掌握Dreamweaver 8 工作区的布局,并能够使用工具栏中的快速按钮以及界面板组。
重点与难点Dreamweaver 8 的操作界面及界面板组教学方法讲授与演示法教学内容及过程与环节备注要从事网页设计工作,就必须学习如何制作网页。
在过去,只有掌握了HTML(超文本标记语言)才能编写出网页。
如今,即使不了解任何网页编写语言,也一样可以快速地创建出精美的网页。
1.1教学目标1、了解Dreamweaver 8 的界面组成、新增功能以及面板的使用方法。
2、掌握Dreamweaver 8 工作区的布局,并能够使用工具栏中的快速按钮以及界面板组。
1.2 理论指导1.2.1 Dreamweaver 8 简述使用Dreamweaver 不仅可以制作出任何结构复杂的静态网页,而且在以下几个方面也有着强大的功能。
完美的操作界面强大的模板功能创建动态网页强大的代码编辑功能1.2.2 Dreamweaver 8 的新功能1. 新的工作流程2. 增强的CSC支持3. 快速的文件传输功能4. 对XML/XSLT的远景支持1.2.3 Dreamweaver 8 的操作界面1. 查看Dreamweaver 8 的操作界面Dreamweaver 8 的操作界面由“文档”窗口、工具栏、状态栏、上下文菜单、工具栏和属性检查器等部分组成。
《Dreamweaver 8中文版实用教程》 第8章_扩展Dreamweaver 8
“移除扩展” 按钮 以移除
插件应用实例
8.3 插件应用实例
使用FormBuilder创建表单 使用Custom Scrollbars编辑滚动条 使用Page Transitions给页面添加过渡效果 使用MFX_SlideMenu创建动态导航菜单 使用Calendar Object创建日历
安装PD On-Line Html Editor 重启程序
使用PD On-Line Html Editor创建HTML编辑器
使用PD On-Line Html Editor创建HTML编辑器
使用ChromelessWin创建特殊窗口
“窗口”→ “行为”打开 行为面板,单 击行为面板上 的“+”按钮 在行为面板中为触 发该动作选择事件
安装MFX SlideMenu
选择层标识符,编 辑菜单中的内容, 设置层的背景色
设置导航菜单初始属性
使用Calendar Object创建日历
安装Calendar Object
设定参数 以表格形式 出现日历
使用Calendar Object创建日历
选定日历表 格→“命 令”→“格 式化表格”
使用Gradient Text创建渐变文字
852007第第88章章扩展扩展dreamweaver8282下载和安装插件下载插件安装插件862007第第88章章扩展扩展dreamweaver下载插件macromedia站点管理器在下拉菜单中选择dreamweaver命令文件转到macromediaexchange搜索并下载插件872007第第88章章扩展扩展dreamweaver安装插件扩展管理器上的安装新扩展按钮移除扩展按钮以移除882007第第88章章扩展扩展dreamweaver8383插件应用实例使用formbuilder创建表单使用customscrollbars编辑滚动条使用pagetransitions给页面添加过渡效果使用mfxslidemenu创建动态导航菜单使用calendarobject创建日历使用gradienttext创建渐变文字892007第第88章章扩展扩展dreamweaver使用dhtmlscrollablearea创建滚动布告栏使用pdonlinehtmleditor创建html编辑器使用chromelesswin创建特殊窗口使用floatimage创建浮动广告8102007第第88章章扩展扩展dreamweaver使用formbuilder创建表单安装formbuilder8112007第第88章章扩展扩展dreamweaver使用customscrollbars编辑滚动条安装customscrollbars8122007第第88章章扩展扩展dreamweaver使用pagetransitions给页面添加过渡效果安装pagetransitions命令pagetransitions8132007第第88章章扩展扩展dreamweaver使用mfxslidemenu创建动态导航菜单安装mfxslidemenu设置导航菜单初始属性选择层标识符编辑菜单中的内容设置层的背景色8142007第第88章章扩展扩展dreamweaver使用calendarobject创建日历安装calendarobject设定参数以表格形式出现日历8152007第第88章章扩展扩展dreamweaver式化表格使用calendarobject创建日历8162007第第88章章扩展扩展dreamweaver使用gradienttext创建渐变文字安装gradienttext8172007第第88章章扩展扩展dreamweaver使用gradientt
dreamweaver教程第8章
第8章提高工作效率在Dreamweaver 8中,如果设计了一种好的布局,页面看上去很美观,那么可以把它生成相应的模板保留下来,必要时可以直接套用该模板,会迅速生成风格一致的页面。
在网页设计过程中,会发现经常有文本、图像或者其他元素在不同的网页中被反复地使用,如果逐个地去更新这些元素的话,需要做大量且繁琐的工作。
通过使用库技术和资源管理,可以方便、快捷地管理和更新这些元素。
对于较复杂的网页,则需要使用Dreamweaver 8的【资源】面板,从而使工作变得轻松愉快起来。
功能扩展是一些可以容易添加到Dreamweaver中的新功能。
可以使用许多类型的功能扩展,比如设置网页中的快捷菜单、IE浏览器窗口中的滚动条颜色设置,以及浏览器标题栏显示带有时间的滚动网站标题等。
本章将详细介绍有关模板的使用方法与技巧,如何使用库和【资源】面板来管理复杂、重复的网页对象,以及利用Dreamweaver的插件丰富网页的制作。
本章学习要点:创建与应用模板创建与应用库应用资源管理应用扩展管理器第8章第8章提高工作效率2178.1 创建与应用模板模板是一种将较好的格式保留以备反复使用的文件,其扩展名为.dwt。
通常在一个网站中会有几十个甚至几百个风格基本相似的页面,如果每次都重新设定网页结构以及相同栏目下的导航栏、各类图标就会显得非常麻烦,借助Dreamweaver 8的模板功能可以简化操作。
8.1.1 创建模板8.1.2 应用模板8.2 设置模板属性在Dreamweaver 8中模板是一种特殊的文档,可以按照模板创建新的网页。
模板中有些区域是不能编辑的,称为锁定区;有些区域则是可以编辑的,称为可编辑区。
通过编辑可编辑区中的内容,可以得到与模板相似但又有所不同的新网页。
使用模板创建网页的最大好处就是,当修改模板时使用该模板创建的所有网页可以一次自动更新,这就大大提高了网页更新维护的效率。
Dreamweaver 8提供了4种模板区域类型,分别是可编辑区域、重复区域、可选区域和可编辑标签属性。
Dreamweaver8教案
第一章遨游Dreamweaver8精彩世界课题:Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型:新授课三、课时:1个课时四、教学重点与难点重点:熟悉Dreamweaver8工作界面中各个工具的作用难点:1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识,激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入(1)为什么要用Dreamweaver而不用Frontpage?Dreamweaver是Macromedia公司的出品,它以程序小、运行速度快、所制作网页代码少这些优点,赢得了网页制作人员的喜爱。
(2)相关工具的介绍因为这是第一节网页制作课,所以首先要简单介绍下制作网页的一些相关工具,比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。
2、讲授新课(1) Dreamweaver的界面a.文档窗口:主菜单、工具栏、底部启动条、文档编辑区b.对象面板:标准、表格、表单、框架、特殊、文件廷冖隐藏、字符c.启动面板:站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理d.属性面板:随目前对象不同而内容不同(2)创建HTML网页(3)在网页中插入图像输入文字以后,插入图像,并对图像设置对齐的方式,使之与文字呈混排的状态。
3、巩固练习练习使用界面中的各个工具七、作业处理根据本节所学的内容,课堂上练习创建一个空白网页,并且输入一段文字,在文本的左边插入一张图片八、教具所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。
Dreamweaver8ppt教程第08章PPT教学课件
8.6 思考与练习
8.1层的基础知识
层在Dreamweaver中有其特殊的意义,使用过Photoshop的用户或许会联想到 Photoshop中的层,但是Dreamweaver中的层与其不用。在众多的网页编辑软件 中,只有Dreamweaver拥有层这一功能。下面列举出Dreamweaver中的层的一 些主要功能。
2020/12/12
PPT教学课件
谢谢观看
Thank You For Watching
2020/12/12
Dreamweaver 8 入门与实例教程
第08章 使用层
2020/12/12
主 讲:—— 祝:大家学习愉快
□ 本章知识点及学习目标
本章从层的基础知识开始讲起,为读者 介绍了层的创建、层的基本操作和属性设 置。另外还介绍了表格与层的关系,表格 与层的相互转换是网页的布局更加灵活、 高效。关于层的相关内容本章没有完全讲 完,还有一部分讲在本书的第12章中接续 介绍与层相关的内容。
8.3.1选择层
8.3.2调整层大小
8.3.3插入层对象
8.3.4移动层
8.3.5对齐层
8.3.6把层转换成表格
8.3.7把表格转换成层
8.4设置层属性
8.4.1单个层的属性
8.4.2多个层的属性
8.5实战演练
8.5.1 范例1 阴影文字
8.5.2 范例2 利用层制作个人简介
8.6 思考与练习
1. 简答题 (1)简述层的概念及其使用特点是什么? (2)简述层都有那些基本操作? (3)简述实现层与表格相互转换的方法是什
么? (4)层的嵌套和表格的嵌套有什么不同? 2. 操作题 (1)画出多个层,并将多个层对齐。 (2)利用层布局一个首页面的框架结构,然
Dreamweaver网页制作教案
Dreamweaver网页制作教案第一章:Dreamweaver概述1.1 课程介绍了解Dreamweaver作为网页制作工具的优势熟悉Dreamweaver的工作界面1.2 创建和管理网页创建新文档打开和保存网页管理标签库1.3 实践操作制作一个简单的网页学会使用Dreamweaver的实时视图和代码视图第二章:网页基本结构2.1 网页元素文本图像表格表单2.2 排版和格式化字体和大小颜色和样式段落对齐和间距2.3 实践操作制作一个包含文本、图像和的网页学习使用Dreamweaver的排版和格式化工具第三章:CSS样式3.1 CSS介绍了解CSS的作用和优势熟悉CSS的基本语法3.2 创建和应用CSS样式创建样式表应用样式到网页元素编辑和删除样式3.3 实践操作制作一个使用CSS样式的网页学习使用Dreamweaver的CSS面板第四章:网页布局4.1 布局技术表格布局CSS布局框架布局4.2 常用布局方法固定布局可变布局响应式布局4.3 实践操作制作一个使用表格布局的网页学习使用CSS布局和响应式布局第五章:表单和交互5.1 表单元素表单标签输入框选择框文件5.2 验证和提交表单表单验证方法提交表单到服务器接收服务器返回的数据5.3 实践操作制作一个简单的表单页面学习表单的验证和交互功能第六章:Dreamweaver 网站管理6.1 网站结构规划了解网站结构的重要性学习如何规划网站结构熟悉网站的目录和文件组织方式6.2 站点设置和管理创建和定义站点管理站点文件和目录更新和网站文件6.3 实践操作规划并创建一个简单的网站结构配置和管理Dreamweaver 站点第七章:Dreamweaver 模板和框架7.1 模板的概念和应用理解模板的作用学习如何创建和使用模板掌握模板的插入点和使用技巧7.2 框架和框架集了解框架和框架集的概念学习如何创建和编辑框架掌握框架的布局和内容管理7.3 实践操作创建一个简单的模板文件使用模板创建网站的多个页面制作一个使用框架的网页布局第八章:Dreamweaver 动画和多媒体8.1 动画技术概述了解Dreamweaver 支持的视频和动画格式学习如何插入和编辑动画元素8.2 多媒体元素的应用插入图像、音频和视频设置多媒体属性和行为掌握交互式多媒体元素的制作8.3 实践操作制作一个包含动画和多媒体元素的网页学习使用Dreamweaver 的行为面板为网页添加交互功能第九章:Dreamweaver 网页编程9.1 行为和事件理解行为和事件的概念学习如何使用行为为网页添加功能掌握常见行为的使用方法9.2 JavaScript 基础了解JavaScript 的基本概念学习如何在Dreamweaver 中编写JavaScript 代码掌握Dreamweaver 的JavaScript 调试工具9.3 实践操作编写简单的JavaScript 代码为网页添加功能学习使用Dreamweaver 的JavaScript 面板和调试工具第十章:Dreamweaver 网站发布和维护10.1 网站测试学习网站在不同浏览器和设备上的测试方法掌握网站性能测试和优化技巧10.2 网站发布了解网站发布的流程和注意事项学习如何使用Dreamweaver 发布网站10.3 网站维护和更新学习网站的日常维护和更新技巧掌握网站安全和备份方法10.4 实践操作对一个网站进行全面的测试和优化发布和维护一个简单的网站第十一章:Dreamweaver 数据库和动态内容11.1 数据库基础了解数据库的概念和作用学习如何连接和操作不同类型的数据库11.2 动态内容创建学习如何创建动态网页和表单掌握Dreamweaver 内置的服务器模型和数据源11.3 实践操作连接一个数据库并创建一个动态表单使用Dreamweaver 插入动态内容到网页第十二章:Dreamweaver 扩展性和高级技巧12.1 扩展Dreamweaver学习如何安装和使用Dreamweaver 插件和扩展掌握Dreamweaver 扩展的创建和分享12.2 高级网页技术学习如何使用CSS3 和HTML5掌握响应式设计和移动网页制作技巧12.3 实践操作制作一个使用CSS3 和HTML5 的网页创建一个响应式设计的网页layout第十三章:Dreamweaver 与其他工具的集成13.1 图像和图形编辑工具学习如何使用Adobe Photoshop 和Fireworks 与Dreamweaver 协同工作掌握图像和图形的导入和编辑技巧13.2 代码编辑和调试工具学习如何使用Dreamweaver 的代码编辑功能掌握使用外部代码编辑器和调试工具的技巧13.3 实践操作使用Photoshop 和Fireworks 制作网页素材在Dreamweaver 中导入和应用图像和图形第十四章:Dreamweaver 项目管理和团队协作14.1 项目管理学习如何管理Dreamweaver 项目文件和资源掌握Dreamweaver 项目的备份和版本控制14.2 团队协作了解团队协作的重要性学习如何在团队中使用Dreamweaver 和版本控制系统14.3 实践操作管理一个Dreamweaver 项目并实现版本控制在团队中使用Dreamweaver 进行协作第十五章:Dreamweaver 综合实战项目15.1 项目规划和设计学习如何进行项目规划和设计熟悉项目的时间管理和资源分配15.2 项目实施学习如何实施Dreamweaver 项目掌握项目的时间管理和问题解决技巧15.3 项目评估和优化学习如何评估Dreamweaver 项目的效果掌握项目的优化和维护技巧15.4 实践操作完成一个Dreamweaver 综合实战项目进行项目评估和优化以提高网站质量和性能重点和难点解析重点:Dreamweaver的工作界面和基本操作网页基本结构元素的插入和编辑CSS样式的创建和应用网页布局技术,包括表格布局、CSS布局和响应式布局表单的创建和交互功能的实现网站的管理和站点的设置模板和框架的使用动画和多媒体元素的插入网页编程,包括行为和事件的应用、JavaScript基础网站的测试、发布和维护数据库连接和动态内容的创建扩展性和高级技巧的运用与其他工具的集成和项目管理的实践团队协作和综合实战项目的实施难点:CSS样式的复杂应用和调试网页布局的高级技巧,如响应式布局的实现表单验证和交互逻辑的编写网站管理和站点配置的细节处理模板和框架的精细操作JavaScript代码的编写和调试数据库连接和动态内容的管理扩展性和高级技巧的深入应用团队协作和项目管理的策略制定综合实战项目的规划和实施通过理解和掌握这些重点和难点,学生将能够熟练使用Dreamweaver进行网页制作,并能够应对真实世界的网页设计挑战。
Dreamweaver教程第8章ppt课件
CSS样式一般为分嵌入式和外部链接式两种类型。 嵌入式是在独立的文档中应用的CSS样式;外部链接 式样式应用于多个文档,生成专门的*.css文件。
•内部样式表文件:创建的样式只对当前文档起作用, 这样的样式称为内部样式表文件。
•外部样式表文件:保存在外部但可以链接到当前文档 中的样式称为外部样式表文件。
•a:link:正常的未被访问过的链接的文本显示样式。
•a:visited:被访问过的超级链接文本的显示样式。
最新版整理ppt
11
8.1 创建CSS样式
8.1.3 CSS样式规则对话框
在【分类】栏中,选择【边框】选项
最新版整理ppt
12
8.1 创建CSS样式
8.1.3 CSS样式规则对话框 (2)应用该样式 在网页中插入一个2行2列的表格,表格的边框为1, 将光标定位到表格第一行的第1个单元格,在文档 窗口左下角的标签中选择<td>,选中这个单元格。 打开【属性】面板,单击【样式】后面的下拉列表 从中选择“left”
在“全部规则”窗格中选择一条规则,然后单击
“CSS”样式”面板右下角中的“编辑样式”按钮。
最新版整理ppt
6
8.1 创建CSS样式
8.1.2 CSS样式面板
3. 添加属性
(1)在“所有规则”窗格中选择一条属性(“所 有”模式),或者在“所选内容的摘要”窗格中选 择一个属性(“当前”模式)。
(2)执行下列操作之一
如果在“属性”窗格中选择了“只显示设置属性” 视图,请单击“添加属性”链接并添加属性。
如果在“属性”窗格中选择了“类别”视图或“列 表”视图,则为要添加的属性填入一个值。
最新版整理ppt
7
8.1 创建CSS样式
Dreamweaver 8中文版网页制作-教学大纲第8章 使用库和模板-电子教案
的知识点
【资源】面板、库的概念、模板的概念、创建库项目、删除库项目、插入库项目、修改库项目、分离库项目、创建模板文件、可编辑区域、重复表格、重复区域、删除模板文件、从模板新建网页、在已存在页面应用模板、分离模板
1、教学思路
2、教学手段
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
3、让学生自己动手重新制作教学案例。
中等职业学校教案
教研室:
课程名称:Dreamweaver 8中文版网页制作
任课教师:
XXXX学校教务处制
中等职业学校教案
第8次课讲授2学时实践3学时
章节
第8章使用库和模板
讲授主
要内容
1.库和模板的概念。
2.创建和应用库的方法。
3.创建和应用库的方法
创建和应用模板的方法
在模板中插入模板对象的方法
作业布置
作业:一~三
主要
参考资料
备注
网页设计Dreamweaver教案
网页设计Dreamweaver教案第一章:Dreamweaver简介1.1 课程目标了解Dreamweaver的发展历程和版本更新掌握Dreamweaver的基本功能和操作界面熟悉Dreamweaver在网页设计中的应用场景1.2 教学内容Dreamweaver的起源和发展历程Dreamweaver的版本更新及特点Dreamweaver的操作界面及功能介绍Dreamweaver在网页设计中的应用案例1.3 教学方法讲授与示范相结合,让学生了解Dreamweaver的发展历程和版本更新实践操作,让学生掌握Dreamweaver的基本功能和操作界面案例分析,让学生熟悉Dreamweaver在网页设计中的应用场景1.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例1.5 教学评估课后作业:让学生制作一个简单的网页,巩固所学内容课堂讨论:引导学生分享自己在网页设计中使用Dreamweaver的经验和心得第二章:创建和管理网页2.1 课程目标掌握Dreamweaver的网页创建和管理功能熟悉网页编辑区的基本操作了解网页、描述和关键词的设置方法2.2 教学内容Dreamweaver的网页创建和管理功能介绍网页编辑区的基本操作网页、描述和关键词的设置方法2.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver的网页创建和管理功能实践操作,让学生熟悉网页编辑区的基本操作案例演示,让学生了解网页、描述和关键词的设置方法2.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例2.5 教学评估课后作业:让学生创建一个简单的网页,并设置网页、描述和关键词课堂讨论:引导学生分享自己在网页设计中关于网页、描述和关键词设置的经验和心得第三章:编辑和排版文本3.1 课程目标掌握Dreamweaver中文本的编辑和排版功能熟悉字体、颜色、大小和样式的设置方法了解文本对齐、行间距和段落格式的设置方法3.2 教学内容Dreamweaver中文本的编辑和排版功能介绍字体、颜色、大小和样式的设置方法文本对齐、行间距和段落格式的设置方法3.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中文本的编辑和排版功能实践操作,让学生熟悉字体、颜色、大小和样式的设置方法案例演示,让学生了解文本对齐、行间距和段落格式的设置方法3.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例3.5 教学评估课后作业:让学生编辑和排版一个文本内容丰富的网页课堂讨论:引导学生分享自己在网页设计中关于文本编辑和排版的经验和心得第四章:添加图像和媒体元素4.1 课程目标掌握Dreamweaver中图像和媒体元素的操作功能熟悉图像和媒体元素的插入、编辑和格式设置方法了解图像和媒体元素在网页设计中的应用场景4.2 教学内容Dreamweaver中图像和媒体元素的操作功能介绍图像和媒体元素的插入、编辑和格式设置方法图像和媒体元素在网页设计中的应用场景4.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中图像和媒体元素的操作功能实践操作,让学生熟悉图像和媒体元素的插入、编辑和格式设置方法案例分析,让学生了解图像和媒体元素在网页设计中的应用场景4.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例4.5 教学评估课后作业:让学生添加图像和媒体元素到一个网页中,提升网页视觉效果课堂讨论:引导学生分享自己在网页设计中关于图像和媒体元素应用的经验和心得第五章:创建和应用超5.1 课程目标掌握Dreamweaver中超的创建和应用功能熟悉超的类型和创建方法了解超的目标设置和命名规则5.2 教学内容-第六章:表格和布局6.1 课程目标掌握Dreamweaver中表格的创建和编辑功能熟悉表格的布局和样式设置方法了解表格在网页设计中的应用场景6.2 教学内容Dreamweaver中表格的创建和编辑功能介绍表格的布局和样式设置方法表格在网页设计中的应用场景6.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中表格的创建和编辑功能实践操作,让学生熟悉表格的布局和样式设置方法案例分析,让学生了解表格在网页设计中的应用场景6.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例6.5 教学评估课后作业:让学生创建一个表格布局的网页,展示信息列表课堂讨论:引导学生分享自己在网页设计中关于表格布局的经验和心得第七章:表单和动画7.1 课程目标掌握Dreamweaver中表单的创建和编辑功能熟悉表单元素和属性的设置方法了解动画在网页设计中的应用场景和创建方法7.2 教学内容Dreamweaver中表单的创建和编辑功能介绍表单元素和属性的设置方法动画在网页设计中的应用场景和创建方法7.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中表单的创建和编辑功能实践操作,让学生熟悉表单元素和属性的设置方法案例分析,让学生了解动画在网页设计中的应用场景和创建方法7.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例7.5 教学评估课后作业:让学生创建一个包含表单和动画的网页,实现用户互动课堂讨论:引导学生分享自己在网页设计中关于表单和动画应用的经验和心得第八章:CSS样式和模板8.1 课程目标掌握Dreamweaver中CSS样式的创建和应用功能熟悉CSS选择器和属性的设置方法了解模板在网页设计中的应用场景和创建方法8.2 教学内容Dreamweaver中CSS样式的创建和应用功能介绍CSS选择器和属性的设置方法模板在网页设计中的应用场景和创建方法8.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中CSS样式的创建和应用功能实践操作,让学生熟悉CSS选择器和属性的设置方法案例分析,让学生了解模板在网页设计中的应用场景和创建方法8.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例8.5 教学评估课后作业:让学生创建一个CSS样式和模板应用的网页,提升网页美观度课堂讨论:引导学生分享自己在网页设计中关于CSS样式和模板应用的经验和心得第九章:网站发布和管理9.1 课程目标掌握Dreamweaver中网站的发布和管理功能熟悉FTP协议和网站方法了解网站维护和优化的基本方法9.2 教学内容Dreamweaver中网站的发布和管理功能介绍FTP协议和网站方法网站维护和优化的基本方法9.3 教学方法讲授与示范相结合,让学生掌握Dreamweaver中网站的发布和管理功能实践操作,让学生熟悉FTP协议和网站方法案例分析,让学生了解网站维护和优化的基本方法9.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例9.5 教学评估课后作业:让学生将所学网页发布到服务器,进行实际操作课堂讨论:引导学生分享自己在网站发布和管理中的经验和心得第十章:网页设计案例分析10.1 课程目标分析实际网页设计案例了解网页设计中的创新点和不足之处提高学生网页设计的能力和审美水平10.2 教学内容分析实际网页设计案例讨论网页设计中的创新点和不足之处提高学生网页设计的能力和审美水平10.3 教学方法讲授与示范相结合,让学生分析实际网页重点和难点解析1. 章节一和二:Dreamweaver简介和创建与管理网页重点解析:理解Dreamweaver的历史和发展,熟悉其操作界面和基本功能,以及如何有效地创建和管理网页。
《Dreamweaver网页设计》教案
《Dreamweaver网页设计》教案第一章:Dreamweaver简介1.1 课程目标:了解Dreamweaver的发展历程和功能特点掌握Dreamweaver的基本操作界面1.2 教学内容:Dreamweaver的历史和发展Dreamweaver的功能特点Dreamweaver的操作界面及基本操作1.3 教学方法:讲解与演示相结合学生实际操作练习1.4 教学资源:PowerPoint课件Dreamweaver软件1.5 教学评估:课堂问答学生操作练习情况第二章:网页制作基础2.1 课程目标:掌握HTML标签的使用学会使用Dreamweaver的代码视图2.2 教学内容:HTML标签的基本概念和使用方法Dreamweaver代码视图的操作方法常用的HTML标签及其功能2.3 教学方法:讲解与演示相结合学生实际操作练习2.4 教学资源:PowerPoint课件Dreamweaver软件2.5 教学评估:课堂问答学生操作练习情况第三章:图像和多媒体的使用3.1 课程目标:学会在网页中插入图像和多媒体文件了解图像和多媒体文件的基本属性设置3.2 教学内容:图像和多媒体文件在网页中的作用在Dreamweaver中插入图像和多媒体文件的方法图像和多媒体文件的基本属性设置3.3 教学方法:讲解与演示相结合学生实际操作练习3.4 教学资源:PowerPoint课件Dreamweaver软件图像和多媒体文件素材3.5 教学评估:课堂问答学生操作练习情况第四章:超的使用4.1 课程目标:学会创建和设置超了解超的类型及应用场景4.2 教学内容:超的概念和作用在Dreamweaver中创建和设置超的方法超的类型及应用场景4.3 教学方法:讲解与演示相结合学生实际操作练习4.4 教学资源:PowerPoint课件Dreamweaver软件超素材4.5 教学评估:课堂问答学生操作练习情况第五章:表格的使用5.1 课程目标:学会使用Dreamweaver创建和编辑表格了解表格的基本属性设置5.2 教学内容:表格在网页中的作用在Dreamweaver中创建和编辑表格的方法表格的基本属性设置5.3 教学方法:讲解与演示相结合学生实际操作练习5.4 教学资源:PowerPoint课件Dreamweaver软件表格素材5.5 教学评估:课堂问答学生操作练习情况第六章:CSS样式应用6.1 课程目标:掌握CSS样式的概念和作用学会在Dreamweaver中创建和应用CSS样式6.2 教学内容:CSS样式的基本概念Dreamweaver中的CSS面板操作创建和应用CSS样式的方法CSS选择器及属性设置6.3 教学方法:讲解与演示相结合学生实际操作练习6.4 教学资源:PowerPoint课件Dreamweaver软件CSS样式素材6.5 教学评估:课堂问答学生操作练习情况第七章:布局页面7.1 课程目标:学会使用Dreamweaver进行页面布局了解常用的页面布局方法7.2 教学内容:页面布局的基本概念使用Dreamweaver的布局工具进行页面布局常用的页面布局方法(如:固定布局、百分比布局、弹性布局等)7.3 教学方法:讲解与演示相结合学生实际操作练习7.4 教学资源:PowerPoint课件Dreamweaver软件页面布局素材7.5 教学评估:课堂问答学生操作练习情况第八章:表单的使用8.1 课程目标:学会在网页中创建和使用表单了解表单的基本属性设置8.2 教学内容:表单在网页中的作用在Dreamweaver中创建和编辑表单的方法表单的基本属性设置表单元素(如:文本框、复选框、单选按钮等)的使用8.3 教学方法:讲解与演示相结合学生实际操作练习8.4 教学资源:PowerPoint课件Dreamweaver软件表单素材8.5 教学评估:课堂问答学生操作练习情况第九章:Dreamweaver与服务器端编程9.1 课程目标:了解Dreamweaver与服务器端编程的关系学会在Dreamweaver中插入服务器端代码9.2 教学内容:服务器端编程语言(如:PHP、JavaScript等)的基本概念在Dreamweaver中插入服务器端代码的方法Dreamweaver与服务器端代码的交互方式9.3 教学方法:讲解与演示相结合学生实际操作练习9.4 教学资源:PowerPoint课件Dreamweaver软件服务器端代码素材9.5 教学评估:课堂问答学生操作练习情况第十章:综合案例实训10.1 课程目标:学会运用所学知识完成一个完整的网页设计项目提高实际操作能力和网页设计水平10.2 教学内容:网页设计项目的需求分析网页设计的基本流程综合运用所学知识完成网页设计项目10.3 教学方法:学生分组进行实际操作教师指导与解答疑问10.4 教学资源:Dreamweaver软件案例素材及设计工具10.5 教学评估:学生完成的项目成果展示重点和难点解析第一章:Dreamweaver简介1. Dreamweaver的功能特点2. Dreamweaver的操作界面及基本操作难点解析:Dreamweaver功能特点的深入理解,特别是与其它网页编辑器的区别。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
插入命名锚记的单元格
创建文件下载链接
创建电子邮件链接
创建命名锚记链接
1、了解文档位置和路径
对于网页设计而言,路径有“绝对路径”和“相对路径”两种,而相对路径 又 可细分为“文档相对路径”和“站点根目录相对路径”两种。 它们的路径示例如下: 绝对路径:/support/user/contents.html 文档相对路径:user/contents.html 站点根目录相对路径:/support/user/contents.html
2、插入各种超链接
文本超链接
文本超链接即以文本作为对象,与站点内或外的文档建立关联的链接。 它是网页设计上最常用的链接之一。
图像超链接 图像超链接即以图像作为对象,与站点内或外的文档建立关联的链接。 它与文本超链接一样,也是常用的超链接方式。
电子邮件链接 电子邮件链接的对象可以是文本,亦可以是图像,但它们的链接URL 都必须是电子邮件地址。用户可以在网页中创建电子邮件链接,以提供浏 览者通过电子邮件联系站主的途径。
了解站点根目录相对路径 站点根目录相对路径就是提供从站点的根文件夹到文档的路径。站点根 目录相对路径以一个正斜杠开始,该正斜杠表示站点根文件夹。 例如“/support/text.html”是文件text.html的站点根目录相对路径,该文件位于 站点根文件夹的support子文件夹中。 在Web站点的资料移动处理中,站点根目录相对路径非常有用,因为当 移动含有根目录相对链接的文档时,不需要更改这些链接,如此可以有效避 免用户在移动文档后遗失链接的问题。
3、制作图像地图链接
创建图像地图热点链接 在制作图像地图时,必须先创建一个热点(亦称为链接区域),然后再 定义用户单击此热点时所打开的链接。Dreamweaver 8为用户提供了“矩形热 点工具、椭圆形热点工具、多边形热点工具”三种创建热点的工具,这三种工 具的使用如下: 选择椭圆形热点工具,并将鼠标指针拖至图像上,创建一个圆形或椭圆形热点。 选择矩形热点工具,并将鼠标指针拖至图像上,创建一个矩形或正方形热点。 选择多边形热点工具,并将鼠标指针拖至图像上,在各个顶点上单击一下,定义 一个不规则形状的热点,然后单击箭头工具封闭此形状。 修改图像地图 出于设计的需要,用户可以对在图像地图中所创建的热点进行编辑, 例如选择热点、移动热点、调整热点大小,或者在热点层(即热点区域重 叠)之间向上或向下移动热点。 选择热点 移动热点 调整热点大小或形状
第八章 网页的内部与外部链接
课堂演示讲授时间:4小时 主要内容:
了解文档位置和路径 插入各种超链接 制作图像地图链接 创建特定位置的链接
学习目的:
了解文档位置和路径的基本概念与差别 学习插入和设置各种超级链接的方法 学习制作图像热点链接的方法 学习插入锚记并创建锚记链接的方法
4、创建特定位置的链接
插入命名锚记 要创建锚记链接,就必须先插入命令锚记,然后通过命名锚记让对象链 接到文档的特定部分。命名锚记可以使用户在文档中设置标记,这些标记通常 放在文档的特定主题处或顶部,然后创建到这些命名锚记的链接,即可将访问 者带到指定位置。
创建命令锚记链接 创建到命名锚记的链接的过程分为两步,就是创建命名锚记,然后创建到 该命名锚记的链接。
站外URL链接 除了在站点内创建各种链接外,还可以创建从站点内到站点外的链接。 它的设置很简单,只需在对象的“链接”设置中输入目标URL的绝对路径即可。
文件下载链接 文件下载链接创建的方法与文本链接、图像链接一样,它不同的是链接 目标文件不能直接在浏览器中打开,如此即可让浏览者在执行链接后因无法 在浏览器中打开文件,而转为保存到电脑中,从而达到下载文件的目的。不 能被浏览器直接打开文件有很多种,而最常用的就是RAR格式的压缩文件, 亦人们常说的打包文件。
6、本章习题
3.操作题 请先打开光盘中练习素材\Ch08\practice.html文档,然后为页面顶端的图像 设置到“”的站点外链接,接着在图像左下方的空白单元格中 插入名为“top”的命名锚记,并为页面底下的“Top”文本创建到此命名锚记的链接, 再为页面右下角的“联系我们”文本创建“webmaster@”电子链接,最 后选择“名表故事”标题下的“more”文本,创建“练习素材\Ch08\images.rar”的各位了解了文档位置和路径的概念以及使用差别,接着介绍 Web页中各种超链接的创建与设置,最后延伸到图像地图链接和命名锚记 链接的制作,让各位由浅入深掌握网页的内部与外部链接知识。
6、本章习题
1.填充题 (1)对于网页设计而言,路径有________和________两种,而________又可细分 为________和___________两种。 (2)对于本地链接而言,绝对路径就是按________、________和________来指明 所链接文件的确切位置。 (3)文档相对路径的基本思想是省略对于_________和__________都相同的绝对 URL部分,而只提供______的路径部分。 (4)图像地图指__________________的图像,当用户单击某个________时,即可 会发生某种操作。 (5)创建到命名锚记的链接的过程分为两步,就是_________,然后 __________________。 (6)站点根目录相对路径就是____________________的路径。站点根目录相对路 径以一个_________开始,该__________表示站点根文件夹。
了解绝对路径 对于Internet而言,绝对路径就是提供所链接文档的完整URL,而且包 括所使用的协议(如对于Web页,通常使用http://), 例如/support/user/contents.html就是一个绝对路径。 对于本地链接(即到同一站点内文档的链接)而言,绝对路径就是按驱 动器、文件夹和文件名来指明所链接文件的确切位置。 例如C:/Example/images/pic.jpg就是一个本地链接的绝对路径。 了解文档相对路径之一 文档相对路径对于大多数Web站点的本地链接来说,是最适用的路径。 在当前文档与所链接的文档处于同一文件夹内,而且可能保持这种状态的情 况下,相对路径就特别有用。因为文档相对路径的基本思想是省略对于当前 文档和所链接的文档都相同的绝对URL部分,而只提供不同的路径部分。
了解文档相对路径之二
文档相对路径还可用来链接到其它文件夹中的文档,方法是利用文件夹层次 结构,指定从当前文档到所链接的文档的路径。以下图的站点结构为例,不同的 链接就有不同的相对路径:
若从text.html链接到pic2.jpg,那么它的相对路径就是“pic.jpg”,即文件名 若从text.html链接到pic1.jpg,那么它的相对路径 就是“chinese/pic1.jpg”,其中每个正斜杠(/)表示 在文件夹层次结构中下移一级; 若从text.html链接到index.html(在父文件夹中, text.html向上一级),那么它的相对路径就是 “../index.html”,其中每个“../”表示在文件夹层次结构中 上移一级。 若从text.html链接到pic3.jpg(在父文件夹的其它子文件 夹中),那么它的相对路径就是“../images/pic3.jpg”, 其中“../”向上移至父文件夹,“images/”向下移至images 子文件夹中。
6、本章习题
2.选择题 (1)请问以下哪种是文档相对路径的正确格式? /support/user/contents.html B./support/user/contents.html er/contents.html D./support/user/contents.html (2)以下哪个目标设置可以让链接的文件载入一个未命名的新浏览器窗口中? A._parent B._blank C._top D._self (3)请问链接目标文件使用以下哪种格式,才可以实现文件下载的目的? A.HTML B.ASP C.RAR D.JPG (4)以下哪种不属于Dreamweaver 8为用户提供的热点创建工具? A.矩形热点工具 B.椭圆形热点工具 C.多边形热点工具 D.指针热点工具 (5)选择热点后,使用哪个键和箭头键可以将热点向选定方向一次移动10个像素? A.Shift B.Ctrl C.Alt D.Home (6)请问按下哪个快捷键,可以打开【命名锚记】对话框,籍此插入命名锚记? A.Ctrl+Alt+I B.Ctrl+Shift+I C.Ctrl+Shift+A D.Ctrl+Alt+A