Dreamweaver-第五节课
中文版Dreamweaver CS4入门与进阶ch05简明教程PPT课件
5.2.2
新建CSS样式规则
在Dreamweaver CS4中,可以很方便地创建、编辑CSS样 式表定义,并且不需要直接编辑CSS代码,即使不懂CSS层叠 样式表定义语法,也能轻松完成定义。 在Dreamweaver CS4中新建CSS样式规则,可以在【新建文 档】对话框中创建,也可以在【CSS样式】对话框面板中创 建。
。
5.3
编辑CSS样式
对于创建的CSS样式,可以进行编辑操作,主要包括修改 CSS样式属性、设置CSS样式首选参数以及链接和导入CSS样 式等 。
5.3.1
修改创建的样式
CSS样式表通常包含一个或多个规则。可以在【CSS规则 定义】对话框中修改已经创建的CSS样式表中的各个规则, 也可以直接在【CSS样式】面板中操作。
5.3.2
移动CSS规则样式
在Dreamweaver CS4中的CSS规则,可以很方便地移动到 不同位置,例如将规则在文档间移动、从文档头移动到外部 样式表、在外部CSS文件之间移动等等 。
5.3.3
链接与导入CSS样式
单击【CSS样式】面板中的【附加样式表】按钮,打开【 链接外部样式表】对话框,可以链接和导入样式表 。
本 章 重 点
CSS样式的基础知识 使用CSS样式 编辑CSS样式 设置CSS样式
5.1
CSS样式的基础知识
CSS样式是Cascading Style Sheets(层叠样式单)的简称,也 可以称为【级联样式表】,它是一种网页制作的新技术,利用 它可以对网页中的文本进行精确的格式化控制。
5.1.3
CSS样式规则
CSS样式规则由两部分组成:选择器和声明(大多数情况 下为包含多个声明的代码块)。选择器是标识已设置格式元素 的术语,例如p、h1、类名称或ID,而声明块则用于定义样 式属性。例如下面CSS规则中,h1是选择器,大括号({})之间 的所有内容都是声明块。 h1 { font-size: 12 pixels; font-family: Times New Roman; font-weight:bold; }
Dreamweaver(30课时)
Dreamweaver(30课时)第一讲基本界面、基本工具的使用Dreamweaver是制作网页的工具,我们平时上网看到的各个网站的网页都是用Dreamweaver编辑的,然后再加入一些动态语句。
这些网页都是由Html语言编写生成,而我们在使用Dreamweaver编辑网页的同时,这个软件就已经自动生成这种语言了。
首先,我们先来说说最简单的Html语言。
Html语言Html语言有自己特有的格式:<html><head><title>标题</title></head><body>正文内容</body></html>。
这就是最基本的格式了,其中<html>...</html>是该语言的基本格式,所有的内容都包含在它们之间,<head>...</head>部分是头的部分,主要是放置标题,而标题就放在<title>...</title>之间,<body>...</body>之间是编辑正文的地方,所有的内容都放在这里。
至于其中的一些语句,我们在这里就不再多提。
注意事项Dreamweaver中是有一个相对路径的概念的,我们做网页过程中用到的所有图片和所有的网页文件,还有声音、SWF等等的文件都要放在一个总的文件夹里,而这个文件夹就是我们所说的站点,Dreamweaver中可以建立一个站点,但是现在来讲是非常的抽象的,所以我们先用前面的办法代替,后面再来讲解有关站点的概念。
另外,我们在做网页文件的时候要记得,打开软件后,就先把我们要做的网页文件保存到事先建好的站点里,这样是为了避免你插入图片时出现错误。
最后,站点里的所有文件的名称都不能为汉语名,必须为英文名或者是数字命名的。
介绍软件界面打开Dreamweaver软件,我们会发现它的界面和我们前面学过的软件有些不同。
《Dreamweaver网页制作实训教程》课件 第5章
的文本或图像后,可以在“属性”面板上的“链
接”编辑框中直接输入要链接到的网址或网页名
称;也可以通过单击“属性”面板上“链接”编
辑框后的文件夹图标 ,在弹出的“选择文件”
对话框中选择要链接到的文件。
选择目标 文件所在 文件夹
选择 目标 文件
单击“确 定”按钮
2.外部超链接
外部超链接只能采用一种方法设置,就是在选 中对象后,在“属性”面板的“链接”编辑框 中输入要链接到的网址。
5.2.3 应用“设置状态栏文本”行为
如果为自己的网页设置一些比较有个性的状 态栏文本,那一定很吸引人,下面就来看看 如何设置自己的状态栏文本。
行为外,读者还可以到 Adobe或其他网站去下载并安装第三方行为。
综合实训2——为“macaco”网页制作下拉菜单
5.1.4 设置热点链接
热点链接又叫图像映射,就是使用热点工具将 一张图片划分成多个区域,并为这些区域分别 设置链接。
5.1.5 设置命名锚记链接
要创建命名锚记链接,应首先插入命名锚记, 然后创建跳转到该命名锚记的链接。
5.1.6 使用跳转菜单
我们可以把跳转菜单看作是一种超链接的集合, 它以弹出式下拉菜单的形式在网页中展现出来。 弹出菜单内的链接没有类型上的限制,可以是本 地链接,也可以是到其他网站的链接,还可以是 电子邮件链接或命名锚记链接。
2.应用行为的方法
应用行为时需要先选中要应用行为的对象,然 后单击“行为”面板中的“添加行为”按钮, 在打开的“动作”列表中选择效果,之后在打 开的对话框中设置效果,最后指定设定的动作 在什么情况下发生,也就是指定事件。
5.2.2 应用“打开浏览器窗口”行为
应用“打开浏览器窗口”行为,可实现单击目 标文字或图片,打开固定大小窗口的效果。本 节通过一个实例,来看看“打开浏览器窗口” 行为在网页中的具体应用。
AdobeDreamweaver教程第4章超级链接精品PPT课件
(3)站点根目录相对路径:所有路径都开始于当前站点的根目录。
站点的根目录相对路径都以“/”开始,如/images/loge.gif
javascript:window.close()
设为首页
<a onclick="this.style.behavior='url(#default#hom epage)';this.setHomePage('');" href="#">设为 首页</a>
创建远程登陆链接
在链接地址输入:telnet://站点地址,如 telnet://
javascript:history.back(-1)
javascript:history.go(-1)
2.3创建打印链接:
javascript:window.print()
2.4创建收藏链接:
javascript:window.
external.AddFavorite(‘网址’,’名称’)
2.5关闭窗口:
下载、邮件链接和锚点
1 下载文件 2 下载软件 3 邮件链接 mailto:?subject=咨询问题&cc= &bcc=
下载、邮件链接和锚点
4. 创建命名锚记链接
1.创建命名锚记
2.创建到该命名锚记的链接
空链接和脚本链接
1 空链接 #(或javascript:) 2 脚本链接
2.1创建简单的脚本链接:javascript:alert(‘弹出的内容’) 2.2创建前进和后退链接:javascript:history.go(1)
Dreamweaver CS5网页设计与制作教程第五章
5.1 认识行为
行为是由对象、动作和事件构成的,事件是产生行为的条件,动作是行为 的具体结果。 对象:是产生行为的主体。对象可以是网页中的很多元素,如网页中的一 段文字、一幅图片等元素,也可以整个网页文档。 动作:通常是一段JavaScript代码,用于完成某些特殊的任务。如打开一 个窗口自动弹出“欢迎”窗口、鼠标经过图片图片晃动等效果。 事件:是由用户或浏览器引发动作产生的事情。事件经常是针对页面元素 的,也就是行为的对象,如鼠标经过、鼠标离开、鼠标单击等。
5.2 使用行为
文本域文字的行为 页面中的用户登录需要输入用户名、密码,因此在页面会插入给用户输入的 文本域。常常可以设计这样的效果:当鼠标移到文本域时,文本域中显示“ 请输入用户名”,当文本域获得焦点时,之前的文字消失,用户则可以输入 用户名信息。这种效果是添加了文本域文字的行为
5.2 使用行为
制作交换图像 “交换图像”这一动作的特效是恢复交换的图像。当鼠标经过图像时,原图 像会变成另外一幅图像,否则恢复原图像。其实,一个交换图像是由两幅图 像组成的,包括原始图像和鼠标经过时显示的交换图像。
5.2 使用行为
制作交换图像 2.选择行为的事件。
<img src="images2/cp2.jpg" alt="" name="Image1" width="256" height="226" hspace="10" vspace="10" id="Image1" onmouseover="MM_swapImage('product', '','images2/cp2.jpg',1)" onmouseout="MM_swapImgRestore()" />
dreamweaver 课件 第5课
1.11 插件的应用
一、插件的安装
1. 开始——程序——macromedia—— Macromedia Extension Manger, 打开Macromedia扩展管理器。 2.选择Dremweaver8,——点击“安装新 扩展”按钮”。 3.删除插件。
二、使用插件 制作页面中固定的图像效Hale Waihona Puke (浮动广告)1.9 制作表单
表单的主要功能是收集信息,具体 来说就是收集浏览者的信息。通常用于 调查、注册、订购商品等。
一、创建表单 二、插入各种表单域并设置其属性
1.10 模板的应用
一、创建模板
文件——新建——常规——HTML模板
二、定义模板可编辑区域
插入——模板对象——可编辑区域
三、使用模板创建网页
文件——新建——选择“模板”选项卡 ——选择做好的模板——编辑页面 ——保存在站点下,为.htm文件
Dreamweaver CS6-第5章使用表格课件
5.2.3 排序表格
日常工作中,常常需要对无序的表格内容进行排序,以便浏览者可以 快速找到所需的数据。表格排序功能可以为网站设计者解决这一难题。
将插入点放到要排序的表格中,然后选择“命令 > 排序表格”命令, 弹出“排序表格”对话框。根据需要设置相应选项,单击“应用”或“确定” 按钮完成设置。
5.2 网页中的数据表格
课堂案例——典藏博物馆网页 导入和导出表格的数据 排序表格
5.2.1 课堂案例—典藏博物馆网页
使用“导入表格式数据”命令,导入外部表格数据;使用“排序表格” 命令,将表格的数据排序。
效果图
5.2.2 导入和导出表格的数据
有时需要将Word文档中的内容或Excel文档中的表格数据导入到网 页中进行发布,或将网页中的表格数据导出到Word文档或Excel文档中进 行编辑,Dreamweaver CS6提供了实现这种操作的功能。
5.3 复杂表格的排版
当一个表格无法对网页元素进行复杂的定位时,需要在表格的一个单 元格中继续插入表格,这叫做表格的嵌套。单元格中的表格是内嵌入式表格, 通过内嵌入式表格可以将一个单元再分成许多行和列,而且可以无限地插入 内嵌入式表格,但是内嵌入式表格越多,浏览时花费在下载页面的时间越长, 因此,内嵌入式的表格最多不超过3层。
5.1.4 表格各元素的属性
插入表格后,通过选择不同的表格对象,可以在“属性”面板中看到 它们的各项参数,修改这些参数可以得到不同风格的表格。
1.表格的属性 2.单元格和行或列的属性
5.1.5 在表格中插入内容
建立表格后,可以在表格中添加各种网页元素,如文本、图像和表格 等。在表格中添加元素的操作非常简单,只需根据设计要求选定单元格,然 后插入网页元素即可。一般当表格中插入内容后,表格的尺寸会随内容的尺 寸自动调整。当然,还可以利用单元格的属性来调整其内部元素的对齐方式 和单元格的大小等。
网页设计教程Dreamweaver电子课件第5章
5.6 嵌 套 表 格
课堂练习5.3 利用嵌套表格留空白
5.7 导入表格化数据
5.8 套用现成格式
5.9 表格数据排序
5.10 细线边框表格
1. 第1种方法
5.10 细线边框表格
2. 第2种方法 (1)插入一个1行1列的表格,设置表格的背景颜色为所要的边 框线颜色,边框为0,单元格填充设为1,间距为0,高度值为空。 (2)在这个表格的单元格内再插入一个新表格,将新表格的背 景颜色设置为白色,宽度设为100%,高度值设为一个较大的数值, 将外部的表格撑大,单元格填充和单元格间距均设为0,得到表格。
5.4.4 单元格的拆分与合并
5.5 设置单元格属性
5.5.1 设置单元格宽度和高度
5.5 设置单元格属性
5.5.2 对齐设置
5.5 设置单元格属性
选中单元格后单击“属性”面板中的“标题”复选框就可以 了。
5.5.3 将单元格转换为表头
5.6 嵌 套 表 格
5.6 嵌 套 表 格
课堂练习5.2 让两个表格并排 先插入一个1行2列的表格,然后在每个单元格里嵌套新表格 就可以了。
5. 填充和间距 6. 对齐 7. 背景颜色和背景图像 8. 边框颜色
5.3 表格的属性
课堂练习5.1 利用表格的单元格填充留空白
5.4 调整表格结构
5.4.1 插入单行或单列
5.4 调整表格结构
5.4.2 插入多行或多列
5.4 调整表格结构
将光标置于要删除的行或列中的任意一个单元格内,然后在 右键菜单中选择“表格”|“删除行”或者“删除列”命令即可。
5.10 细线边框表格
课堂练习5.4 简单导航条的2. 创建间隔图像
5.11 水 平 细 线
Dreamweaver基础教程
提供了表单作为网站与访问者之间交流信息的主要工具。
表单工作的基本过程如下: (1)访问者在浏览有表单的网页时,可填写必须的信息,然后按某个按钮提交信息。 (2)这些信息通过Internet传送到服务器上。 (3)服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要
<ol start=5> <li>Today <li>Tommorow </ol> 显示结果如下: 5. Today 6. Tommorow
5.3 处理基本网页元素
5.3.3图像处理
1.插入图像 2.设置图像的属性
5.3 处理基本网页元素
5.3.4超级链接
1.创建文档链接 2.创建命名锚记链接
5.3 处理基本网页元素
5.3.5 表格
(1)布局视图
为了简化使用表格进行排版的过程,Dreamweaver MX提供了布
局视图。在布局视图中,用户可以使用表格作为基础结构来设 计网页,避免了使用传统的方法创建基于表格的页面布局经常 出现的一些难题。在布局视图中,用户可以在页面上方便地绘 制布局单元格,然后将这些单元格移动到所需的位置。
<font>……</font>属性:size=“”;color=“”;face=“” Face属性给出了一个用逗号分隔的字体样式列表。
②设置文本的大小
Size的值是1-7级,默认是3级,可以在当前级的基础上增大或减小。
③设置文本的颜色 ④设置文本样式 示例
文本样式是指文本的显示方式,如加粗、倾斜、下划线等 <B>……</B>加粗 <i>……</i>斜体、 <u>…… </u>下划线 <strike>…… </strike>删除线 <sub>…… </sub>下标 <sup>…… </sup>上标
网页设计制作_Dreamweaver全套课件
第四节 创建静态页
二、添加图像占位符 • 插入—图像对象—图像占位符,用于后期添加图像内容 • 在图像占位符对话框中,输入占位符的名称 • 占位符名称必须以字母开头,只能包含字母和数字
第四节 创建静态页
三、设置标题 • 显示文档工具栏:视图—工具栏—文档 • 在标题文本框中,选择文本“无标题文本”,然后按backspace,输入标题即
谢谢同学们!
二、创建导航条 • 切换到主页,光标放到要插入导航条文本框中输入“navbar”,确
定,然后删除显示的占位符文本 • 点击新建CSS样式,选择“区块”,在“空格”选择不换行 以上步骤用于定义样式,保证导航条在一行,不受不同浏览器的影响 • 选择插入—图像对象—导航条,依次设置按钮名称,弹起图像、鼠标经过图像、
第九章 Dreamweaver
二、Dreamweaver的安装与激活 • 将Dreamweaver CD插入计算机的CD-ROM驱动器(若网上下载安装包则忽略
此步骤) • 双击安装程序包 • 按照屏幕上的提示,点击下一步,进行安装 • 如果出现提示,则重启您的计算机 • 安装成功后,须通过序列号进行激活
可
第四节 创建静态页
四、添加具有样式的文本 ① 页面切换到“设计视图” ② 在CSS样式面板中,单击“附加样式表” ③ 单击“范例样式表”
第四节 创建静态页
四、添加具有样式的文本 ④ 选择一个样式,单击“浏览” ⑤ 单击确定即可
第四节 创建静态页
四、添加具有样式的文本 添加样式到样式表中: 在CSS面板中,选择一个样式,单击“新建CSS样式”按钮 选择器类型选择“h1”,“在CSS样式定义”对话框中进行样式定义
创建了web站点后,下一步就是通过将文件上传到远程web服务器来发布该站 点,操作如下: 1、在远程站点(位于服务器上),创建一个空文件夹(确保有远程服务器权限) 2、在Dreamweaver中选择“站点—管理站点”,选择“mysite”站点,单击 几次下一步,在标有“您如何连接到远程服务器”菜单中,选择“ftp” 3、输入对应的服务器主机名、输入服务器从ftp根文件夹到远程服务器站点的 文件夹路径 4、单击测试连接,点击下一步即可
DreamWeaver基本教程
DreamWeaver建设网站第一节:同学们,我们上网看的都是别人做的网页,我们总是在看别人的网页,是不是觉得好像还不过隐呢?好了,从这节课开始,我们将会一起来学习网页的制作,以后我们就可以让别人来欣赏我们的作品了。
专门制作网页的工具有很多种,比较有名气的有FrontPage和DreamWeaver两个,由于这两个工具是不同公司的产品,所以他们的风格有着很大的区别,其中FrontPage的风格和我们前面学过的Word的风格非常相似,在我们已经学习过Word的基础上使用FrontPage来制作网页也会非常容易上手,你会发现做网页原来如此简单,但是我们现在却来学习DreamWeaver,可能有的同学会觉得刚开始的时候有点难,我们的目的正是在于,不但要学习网页的制作,更要培养使用不同风格的软件的能力。
第二节:一切从站点开始--建立个人站点站点的定义与设置定义站点也就是建立网站,可以将已建立的网页转换成网站,也可以从零开始建立一个全新的站点。
在DreamWeaver里面站点的定义可以通过文档窗口中的“站点”->“新建站点”来进行定义。
上图中三个红色框框的地方都可以开始定义站点=====>也可以通过文档窗口右下角的显示站点按钮打开站点窗口,然后从站点窗口中的“站点”下拉单中选取“定义站点”在定义站点对话框中通过“新建”按钮打"开站点定义"对话框在定义站点的对话框中:通过①分类信息设置站点的各种相关信息,在②的文本框中输入站点的名称,在③的文本框中输入你的站点要保存的位置,或着通过④的文件夹按钮在你的电脑里选择一个位置。
设置好以后按确定就完成了一个简单的站点的定义,这时可以在站点窗口里的“站点”下拉单中看到刚才定义的站点,选中了我们定义的站点后旧可以在站点窗口右半边的文件夹视图中看到站点的内容了从我们刚建立的站点上点击鼠标右键,在弹出菜单中选择新建文件或文件夹来建立我们网站里的内容。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
表单的制作:
一、表单功能:表单一个容器,里面放的是表单控件,通过控件接收用户输入的信息,并能对此进处理,进而实现网站与用户的一个信息交互。
注:控件必须放在表单里,因为只有这样才能接收控件的里值;
表单通常必须配合着JA V A Script程序或是ASP程序来运作,不然表单单独存在的意义并不大。
不过,一旦有机会将表单运用到网页中时,您的网页将进入和用户互动的阶段;
二、表单的制作
1、文字输入框(文本框)
2、密码表单
3、单选核取表单
4、复选核取表单
5、文本区域(大量文字输入元件)
6、下拉式选单
7、列表框
8、图像域
9、文件域10、送出按钮11、按钮元件
注:
A、单选按钮和复选按钮他们的名字要一样!
B、列表”选项在滚动列表中显示选项值,并允许用户在列表中选择多个选项。
“菜单”选项在弹出式菜单中显示选项值,而且只允许用户选择一个选项。
C、图像域
“图像域”使您可以在表单中插入图像。
可以使用图像域替换“提交”按钮,以生成图形化按钮。
表单中的属性值:
表单的设置:
在“动作”文本框中指定处理该表单的动态也或脚本的路径。
在“方法”下拉列表中,选择将表单数据传输到服务器的方法。
表单“方法”有:
POST 在HTTP 请求中嵌入表单数据。
GET 将值追加到请求该页的URL 中。
默认使用浏览器的默认设置将表单数据发送到服务器。
通常,默认方法为GET 方法。
不要使用GET 方法发送长表单。
URL 的长度限制在8,192 个字符以内。
如果发送的数据量太大,数据将被截断,从而导致意外的或失败的处理结果。
而且,在发送机密用户名和密码、信用卡号或其他机密信息时,不要使用GET 方法。
用GET 方法传递信息不安全。
在“目标”弹出式菜单指定一个窗口,在该窗口中显示调用程序所返回的数据。
如果命名的窗口尚未打开,则打开一个具有该名称的新窗口。
目标值有:_blank,在未命名的新窗口中打开目标文档。
_parent,在显示当前文档的窗口的父窗口中打开目标文档。
_self,在提交表单所使用的窗口中打开目标文档。
_top,在当前窗口的窗体内打开目标文档。
此值可用于确保目标文档占用整个窗口,即使原始文档显示在框架中。
name
文本框:单行/多行(文本域)/密码;出始值的设置
多行文本框:对于很长的行是否进行换行的设置;
不换行:是缺省设置。
软换行:软回车Shift + Enter(<br>。
);硬换行:硬回车
Enter(<p>.. </p>,);设置初始状态 <readonly>
多选按钮:
单选按钮:
单选按钮组:
列表框:列表和菜单的区别列表:列表”选项在滚动列表中显示选项值,并允许用户在列表中选择多个选项。
“菜单”选项在弹出式菜单中显示选项值,而且只允许用户选
择一个选项。
图像域:替换那里输入图像的名字(注:鼠标放上的时候显示)图像一个对齐位置;onclick="this.form.reset();"
文件域:
命令按钮:-----三个动作(提交、重设、无)
1、submit: 创建一个提交按钮。
在表单中添加提交按钮后,站点访问者可以在填写好表单之后提交。
当提交表单时,表单数据(包括提交按钮的名称和值)以ASCII文本形式送到由表单的action属性指定的表单处理程序。
一般来说,表单中必须有一个提交按钮。
2、reset: 创建一个重置按钮。
在表单中添加重写按钮后,站点访问者可以将表单重新设回其默认值。
单击该按钮时,将删除任何已经输入到域中的文本并清除所做的任何选择。
但是,如果框中含有默认文本或选项为默认,单击重置按钮将会恢复这些设置值。
3、button: 创建一个自定义按钮。
在表单中添加自定义按钮时,为了赋予按钮某种操作,必须为按钮编写脚本。