第6章 Dreamweaver 8网页制作工具PPT课件
合集下载
Dreamweaver 8入门
– – 11第2章 Dreamweaver 8入门Dreamweaver8是美国Adobe 公司最新开发的优秀的网页制作工具，可以方便、快捷地制作出充满丰富动感的网页。
本章主要介绍Dreamweaver8的工作环境，网页制作的基本方法：包括文本、图像和动画的插入，超级链接的创建，表格、层和框架以及表单的使用等。
2.1 Dreamweaver 8的工作环境2.1.1 选择工作区布局安装完Dreamweaver 8后，第一次启动时，会弹出一个“工作区设置”的对话框，如图2-1所示，让用户选择一种工作区布局，包括“设计器”和“编码器”两个选项，它们分别面向设计者和代码编写者。
图2-1 “工作区设置”对话框本书是在设计者布局中进行介绍的，建议用户选择“设计器”选项进入，进入后会出现如图2-2所示的工作区布局。
图2.2 设计者工作区布局Dreamweaver 8入门– – 122.1.2 软件起始页的用法启动Dreamweaver 8之后，进入起始页，如图2-2所示，点击向右的箭头，可将右边的面板隐藏起来。
也可以点击向下的箭头，将属性面板隐藏起来。
起始页面分为左中右3栏，左侧一栏显示最近曾经打开过的文档；中栏是创建新的项目，可以创建Html 的文档，也可以创建一些动态文档，比如ASP VBScript 、JavaScript 、PHP 等，也可以直接创建站点；右侧是从范例创建，这里提供了Dreamweaver 8已经做好的基础范例，比如已经做好的框架集和一些入门页面等等。
当Dreamweaver 本身无法完成一些功能的时候，可以用Dreamweaver Exchange 从网上下载一些插件来实现。
左下角是Dreamweaver 8的一些学习资料，可以帮助大家更好的学习Dreamweaver 8这个软件。
如果计算机联网的话，右下角的信息是不断变化的，显示一些最新的信息。
如果不想使用这个起始页，而是手工打开一些文档的话，可以将起始页关闭。
《网页设计与制作》第六章
6.2 通过邮件接收表单
表单中的信息输入完毕以后需要将信息提供给 服务器端的相关人员，用户可以通过表单域属性 面板中的“动作”属性指定通过电子邮件接收表 单数据。 在属性面板的“动作”文本框中输入 mailto:***@***.***,也就是在mailto后面加上邮 件地址。在浏览者提交表单后，会弹出窗口询问 是否继续以电子邮件形式提交，单击“确定”按 钮，浏览器会自动打开Outlook或Outlook Express， 将表单中的数据整理为E-mail内容发送到设定的 信箱中去。
《网页设计与制作》
第六章 交互式表单制作源自讲解提纲• 6.1 创建表单 • 6.2 通过邮件接收表单
• 6.3 制作跳转菜单
6.1 创建表单
使用表单，可以帮助Internet服务器从用户 那里收集信息，它由两部分组成：前台显示页面 和后台处理程序。前台显示页面用于显示表单的 内容，主要包括文本域、单选按钮、复选框、菜 单和提交按钮等。后台处理程序用于处理用户提 交的表单数据。 在 Dreamweaver 中，表单输入类型称为表 单对象。可以通过选择“插入”菜单“表单”子 菜单来插入表单对象，或者通过 “插入”工具栏 的“表单”子工具栏来插入表单对象。
3.插入单选按钮 要求浏览者只能从一组选项中选择一个选项 时，使用单选按钮。单选按钮通常成组地使用，在 同一组中的每个单选按钮的名称必须一致，这样整 个单选组才能有效。 要插入单选按钮，将光标定位后，单击“表 单”工具栏上的“单选按钮”按钮，即可插入一个 单选按钮。
4.插入复选框 复选框允许在一组选项中选择多项，用户可 以选择任意多个适用的选项。 要插入复选框，将光标定位后，单击“表单” 工具栏上的“复选框”按钮，即可插入一个复选 框。 5.插入文件域 文件域使用户可以浏览到其硬盘上的文件， 并将这些文件作为表单数据上传， 要插入文件域，将光标定位后，单击“表单” 工具栏上的“文件域”按钮，即可插入一个文件 域。
网页设计第6章ppt
bordercolor 单元格边框颜色 bordercolorlight 单元格边框向光部分的颜色 bordercolordark 单元格边框背光部分的颜色 background 单元格背景图片 <TD> 的参数设定格式: 例如:<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif"> 举例6-6
பைடு நூலகம்
6.2 使用表格设计页面布局 在网页设计中表格还有一个重要的作用,就是设计页面 布局. 一个空白网页布置起来比较困难,尤其是一些复杂的页 面.这时可以利用表格将网页分成若干个单元格,每个单元 格对应网页中的一个部分.然后,对每一部分分别进行设计 和制作,这样就可以使复杂的网页设计简化,而且所设计的 网页清晰,有条理性.
6.单元格的设定 <th>和<td>都是插入单元格的标签,这两个标签必须嵌套在<tr> 标签内.是成对出现的.<th>用于表头标签,表头标签一般位于首 行或首列,标签之间的内容就是位于该单元格内的标题内容,其中 的文字以粗体居中显示.数据标签<td>就是该单元格中的具体数据 内容,<th>和<td>标签的属性都是一样的,属性设定如下: width/height 单元格的宽和高,接受绝对值(如 80)及相对 值(如 80%). colspan 单元格向右打通的栏数 rowspan 单元格向下打通的列数 align 单元格内字画等位置,可选值为:left, center, right. valign 单元格内字画等位置,可选值为:top, middle, bottom. bgcolor 单元格的底色
网页制作与实训教程第六章
4.5.2 媒体对象的插入
操作步骤： 选择“设计”视图→选择插入点→“插入”→“常用”→“媒 体”→选择原文件→设置媒体参数→“确定”。
4.5.3 Flash影片的插入
插入Flash影片之前，首先应在Flash制作软件中完成影片的制作，最
好将其制作好后保存在站点相应文件夹中。 操作步骤：
绑定IP地址
选择“Web站点”子页面→“IP地址”后的下拉菜单中选择所
需用到的本机IP地址，比如本机的IP地址为“127.0.0.1”，或采用具体的IP 地址，如“192.168.0.1”。 设置主目录 选择“主目录”子页面→“本地路径”→输入(或用“浏览” 选择“文档”子页面→“添加”→“默认文档名”→
右击已存在的“默认 WEB 站点”，选择“属性”，可以看到默认
Web站点属性，其中包含“网站”、“主目录”、“文档”、“目录 安全性”等子页面。
现假设在本机配置IIS，已知IP地址，本地站点的网页放在“D:\MyWeb”目录 下，网页的首页文件名为“Index.htm”，据此建立远程站点的Web服务，发布 站点。 具体步骤如下：
文件的的链接。对文档内任意位置的文本、图像(包括标题、列表、
表、层或框架中的文本或图像)或图像局部都可以建立链接。链接目 标可以是文档内的一个位置，也可以是其他文档、图像、多媒体文
件或可下载的软件。
4.4.1 文档的位置与路径
路径通常有以下几种表示方式：
绝对路径 相对路径 根相对路径
1.绝对路径
步骤如下： （1）选择编辑窗口中的文字或图像。 （2）选择“窗口”｜“属性”命令，打开“属性面板”，单击“链接 ”文本框右边的“选择文件”图标按钮，在打开的“选择文件”对话框 中浏览并选择一个文件。 或者在“链接”文本框中直接输入要链接的文件的路径和文件名。 （3）选择被链接文件的载入目标。默认情况下，被链接文件在当前窗 口或框架中打开。要是被链接文件显示在其他地方，需要从属性面板的 “目标”下列列表中选择一个选项。
网页制作ppt教学课件
$item1_cJavaScript提供了许多内置函数，如Math.max()、Math.min()、Date()等，用于执行各种常见的数学和日期计算操作。
JavaScript提供了许多内置函数，如Math.max()、Math.min()、Date()等，用于执行各种常见的数学和日期计算操作。
网页制作实例
01
02
03
04
文本
图像
视频
音频
包括动画、电影、直播等视频元素。
包括图片、图标、背景等图像元素。
包括标题、段落、列表等文本元素。
包括音乐、声音、音效等音频元素。
01
02
03
04
05
建站工具介绍
官方介绍：Dreamweaver是一款网页制作软件，它使用了视觉方式创建和管理网页，是创建动态网页的工具之一。
可以选择使用现有的AJAX框架，如jQuery、Axios等，以简化开发流程。
使用AJAX框架实现异步请求，包括发送请求、处理响应、更新页面内容等。
通过优化请求频率、减少服务器响应时间等方式，提高网页的性能和响应速度。
THANK YOU
感谢聆听
CSS的主要作用是描述网页文档的外观和格式，如颜色、高度、宽度、边距等。它能够使网页更加美观、易于阅读和维护。
CSS是一种相对较新的技术，它于1990年代末期由Håkon Wium Lie和Bert Bos共同发明，并由W3C（万维网联盟）进行标准化。
选择器
属性
值
声明块
CSS选择器用于选择要应用样式的HTML元素。例如，元素选择器会选择所有给定的HTML元素。
完成前后端连接后，进行测试和调试，确保动态网页的功能和稳定性。
动态网页通常使用后端技术实现，如PHP、Java、Python等，根据需求选择合适的技术。
JavaScript提供了许多内置函数，如Math.max()、Math.min()、Date()等，用于执行各种常见的数学和日期计算操作。
网页制作实例
01
02
03
04
文本
图像
视频
音频
包括动画、电影、直播等视频元素。
包括图片、图标、背景等图像元素。
包括标题、段落、列表等文本元素。
包括音乐、声音、音效等音频元素。
01
02
03
04
05
建站工具介绍
官方介绍：Dreamweaver是一款网页制作软件，它使用了视觉方式创建和管理网页，是创建动态网页的工具之一。
可以选择使用现有的AJAX框架，如jQuery、Axios等，以简化开发流程。
使用AJAX框架实现异步请求，包括发送请求、处理响应、更新页面内容等。
通过优化请求频率、减少服务器响应时间等方式，提高网页的性能和响应速度。
THANK YOU
感谢聆听
CSS的主要作用是描述网页文档的外观和格式，如颜色、高度、宽度、边距等。它能够使网页更加美观、易于阅读和维护。
CSS是一种相对较新的技术，它于1990年代末期由Håkon Wium Lie和Bert Bos共同发明，并由W3C（万维网联盟）进行标准化。
选择器
属性
值
声明块
CSS选择器用于选择要应用样式的HTML元素。例如，元素选择器会选择所有给定的HTML元素。
完成前后端连接后，进行测试和调试，确保动态网页的功能和稳定性。
动态网页通常使用后端技术实现，如PHP、Java、Python等，根据需求选择合适的技术。
dreamweaver8网页设计 第六章 使用超链接和行为
1．“弹出信息”行为 弹出信息”
有时候，我们在打开某个网页或单击网页中的某 个元素时可以看到弹出信息框。应用“弹出信息” 行为可以轻松实现该功能，本节我们就来看看 “弹出信息”行为的应用。
2．“设置状态栏文本”行为 设置状态栏文本”
所谓“状态栏文本”，就是在网页运行时浏览器 下方的状态栏中显示的文本。好多个人网站都设 置了状态栏文本，以表达网站主人的心声。本节 我们来看看如何为网页设置状态栏文本。
6.1.3 设置图片链接和下载链接
所谓图片链接，就是在单击网页中的某个小图片 时在新窗口中打开一幅大图片；下载链接是指单 击某个超链接时会打开一个“文件下载”对话框 （或自动启动下载工具），通过在该对话框中单 击“打开”或“保存”按钮，可以打开或下载文 件。
6.1.4 设置电子邮件链接
很多网站上留有电子邮件地址，单击该地址可 打开“Outlook Express”的“新邮件”窗口，这 是一种特殊类型的链接，又叫电子邮件链接。
综合实例2 综合实例2—为“SM”网站主页添加伴随窗 SM” 口
本例将在综合实例1中制作好的“index.html”网页 文档的基础上，为网站主页添加伴随窗口。
“行为”面板是应用行为所不可缺少的工具，本 节来认识一下“行为”面板。选择“窗口”>“行 为”菜单，或按【Shift+F4】组合键，即可打开 “行为”面板。
6.2.3 应用行为
如果要对某个对象应用行为，需要先选中该对象， 然后单击“行为”面板上方的“添加行为”按钮 ， 在打开的行为列表中选择动作，并在打开的窗口 中设置效果，最后指定设定的动作在什么情况下 发生，也就是指定事件。
3．“打开浏览器窗口”行为 打开浏览器窗口”
应用“打开浏览器窗口”行为，可实现单击目标 文字或图片打开固定大小窗口的效果。许多站点 都使用这种方式来弹出重要的通知、广告信息等 页面。
dreamweaver8网页设计教程
d re a m w e a v e r8网页设计教程本页仅作为文档封面，使用时可以删除This document is for reference only-rar21year.March《dreamweaver8网页设计》目录第一章遨游DREAMWEAVER8精彩世界错误!未定义书签。
第二章创建与规划站点错误!未定义书签。
第三章文本及其格式化错误!未定义书签。
第四章表格错误!未定义书签。
第五章图像错误!未定义书签。
第六章框架错误!未定义书签。
第七章页面布局视图的使用错误!未定义书签。
第八章链接错误!未定义书签。
第九章层与时间轴错误!未定义书签。
第十章表单错误!未定义书签。
第十一章行为错误!未定义书签。
第十二章制作动态页面错误!未定义书签。
第十三章代码片断、库项目和模板错误!未定义书签。
第十四章网页的制作错误!未定义书签。
第十五章网站的测试与上传错误!未定义书签。
第十六章使用FIREWORKS 8处理网页图像错误!未定义书签。
第一章遨游Dreamweaver8精彩世界课题：Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型：新授课三、课时：2个课时四、教学重点与难点重点：熟悉Dreamweaver8工作界面中各个工具的作用难点：1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入（1）为什么要用Dreamweaver而不用FrontpageDreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。
（2）相关工具的介绍因为这是第一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具，比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。
网页设计与制作PPT课件
1.1 网页和网站
1.1.3 网页的基本功能
1、媒介的作用。使用者与信息之间的媒介。 一方面是发布者，功能是发布信息；另一方面 是浏览者，功能是提供浏览的信息，通过浏览 网页找寻需要的信息。
2、互动的作用。浏览者与网页制作单位之 间互动的窗口，可以单向或双向传递信息。
3、传输的作用。作为传输各种电子文件或 信息之用，如下载说明书、更新文件、驱动程 序等。
超链接的标志一般有：文本、图像、热区 三种。要注意的是，所有超链接标志均应清晰 无误地向浏览者标识出来，让人一看就知道。
1.2 网页中的主要元素
1.2.4其他的基本要素
除上述几种要素之外，在网页上经常使用 的还有动画、视频、声音等各种信息的形式。
1．动画。目前网络上常用的动画类型有 gif和Flash动画两种。
第2讲 HTML语言基础
$ [知识目标]
了解HTML文件的基本结构 掌握HTML中文本的编辑及图像的语法 掌握HTML中各种设置超级链接的语法 掌握HTML中表格和框架的基本语法
8 [能力目标]
掌握进行文本及图像的编辑操作 掌握创建各种超级链接的操作 能够编写简单的HTML网页 掌握HTML文件中表格和框架的使用
1.4 网页设计的基本流程
1.4.3网页的测试
1．浏览器兼容性测试。目前浏览器有： Internet Explorer与Netscape两大主流浏览器，二 者对HTML和CSS等语法的支持度是不同的。在 Dreamweaver中提供了可以检查网页中是否含有某版本浏 览器不能识别的语法功能，设计者可以借助其进行检查。
1.4 网页设计的基本流程
1.4.4网页上传和发布
网页设计好，必须把它发布到互联网上， 否则网站形象仍然不能展现出去。发布的服务 器可以是远程，也可以是本地。如果是发布到 互联网上，要先申请域名和主页空间，然后再 利用专用软件（如：CuteFTP）上传，FTP有很 多种软件，最著名的是 CuteFTP 和 LeapFTP， 也可以用Dreamweaver内置的FTP上传。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
25
• （14）插入文本区域：合并第10行所有单元格， 输入文本“你的建议：”，然后插入文本区域
• （15）插入按钮：在第12行相应的单元格位置插 入“提交”和“清除”两个按钮
2020/11/6
计算机应用基础
26
6.4 Dreamweaver的表格
• 6.4.1 插入表格
2020/11/6
计算机应用基础
6.1 Dreamweaver8界面介绍 6.1.1 Dreamweaver 8 激活方法
2020/11/6
计算机应用基础
3
6.1.2 Dreamweaver8的标准界面
2020/11/6
计算机应用基础
4
6.2 Dreamweaver简单网页编辑
• 6.2.1 网页的基本操作 • 1. 创建网页 • 2. 打开网页 • 3. 保存文件
2020/11/6
计算机应用基础
5
6.2.2 页面的设置
• 1. 设置页面的头内容 • 2 设置页面属性
2020/11/6
计算机应用基础
6
6.2.3 在网页中加入文本
• 1. 文本的插入 • 2.文本段落的分隔 • 3. 修改文本颜色与字体 • 4. 列表的设置 • 5. 分隔线的插入 • 6. 时间的插入 • 7. 特殊符号的插入
• (7)向主页文件中添加文本，内容来自于素材 “海大简介.txt”，可用记事本复制/粘贴来实现，
2020/11/6
计算机应用基础
16
• (8) 把光标定位在第一行，选中“上海海事大学介 绍”，设为居中、华文新魏、36像素、蓝色，其 他文字设为宋体、16像素
• (9) 在标题与正文之间插入蓝色的水平线，“插入” 菜单中选“HTML”“水平线”
2020/11/6
计算机应用基础
22
• （5）插入文本域：在表格的第1行第1个单元格 输入“姓名：”，在后面一个单元格插入表单里 的文本框
• （6）插入单选按钮：在表格的第2行的第1个单 元格输入“性别：”，在后面一个单元格插入单 选按钮“男”，在第三个单元格插入单选按钮 “女”。
• （7）插入列表：在表格的第3行的第1个单元格 输入“学历：”，在后面一个单元格插入列表， 并添加列表值
项，设置站点名称为“海事大学介绍”，本地根 文件夹为桌面DW13文件夹。
2020/11/6
计算机应用基础
15
• （4）确认设置的内容准确后，单击“确定”按钮， 完成站点的设置。
• （5）复制配套的素材的所有文件到桌面DW13文 件夹中，其中图片放在DW13\images文件夹中。
• （6）新建一个主页文件index.htm。
• （11）插入复选框：在第7行的各单元格分别输入 复选框，“晚6-7点”，“晚7-8点”，“周六”， “周日”，
• （12）在第8行合并所有单元格。输入文本“你 喜欢参加社团的活动？”
• （13）在第9行分别输入单选按钮： “喜欢”， “不喜欢”，“一般”，“无所谓”
2020/11/6
计算机应用基础
计算机应用基础
19
表单制作实例
• 本例用到的素材文件
2020/11/6
计算机应用基础
20
步骤:
• （1）将本实验素材复制到桌面DW15文件夹，新 建站点“海大社团调查”，本地根文件夹为 DW15
• （2）创建新的网页，名为form.htm，网页中输入 第一行文本为“上海海事大学学生社团调查问卷 表”，并设为居中、魏、36像素
dreamweaver/contents.html）。 • 站点根目录相对路径（例如
/support/dreamweaver/contents.html）
2020/11/6
计算机应用基础
10
• 1.创建文本链接
2020/11/6
计算机应用基础
11
• 2. 电子邮件链接 • 3. 创建锚点链接 • 4. 下载链接
2020/11/6
计算机应用基础
7
6.2.4 在网页中加入图像
• 1. 插入图像 • 2. 设置图像属性
2020/11/6
计算机应用基础
8
6.2.5 网页背景图的设置
2020/11/6
计算机应用基础
9
6.2.6 在网页中加入链接
• 三种类型的链接的区别： • 绝对路径（例如 ）。 • 文档相对路径（例如
2020/11/6
计算机应用基础
1
• Dreamweaver 8是建立Web站点和应用程序的专 业工具。它将可视布局工具、应用程序开发功能 和代码编辑支持组合在一起，其功能强大，使得 各个层次的开发人员和设计人员都能够快速创建 基于标准的网站和应用程序的优美界面。
2020/11/6
计算机应用基础
• 在网页空白处单击右键，在“页面属性”窗口 中，设置网页的背景图片为hudie.jpg，网页默认 文本大小为12像素
2020/11/6
计算机应用基础
21
• （3）插入表单：“插入”菜单中选“表单”，出 现表单的红色虚线框
• （4）在表单中插入一个12行*4列的表格：“插入” 里选“表单”中的“表格”
2020/11/6
计算机应用基础
12
• 5. 热点链接
2020/11/6
计算机应用基础
13
简单网页制作实例
• 所用的素材文件链接
2020/11/6
计算机应用基础
14
步骤：
• （1）在桌面上建文件夹DW13和子文件夹images。 • （2）启动Dreamweaver 8，执行“站点”和“新
建站点命令”。 • （3）弹出“站点定义”对话框，单击“高级”选
• (10)在文本的最后插入图片，插入/图像里选素材 图片smu1.jpg，设置图片的宽为440、高为150像 素
2020/11/6
计算机应用基础
17
6.3 Dreamweaver的表单
• 6.3.1 插入表单
2020/11/6
计算机应用基础
18
6.3.2 表单域内插入表单元素
2020/11/6
27
6.4.2 选择单元格对象
• 选择整个表格 • 要选中某一单元格
2020/11/6
2020/11/6
计算机应用基础
23
• （8）合并第4行所有单元格，输入“你通过哪种 方式参加社团？”。
• （9）在第5行各单元格中分别输入参加社团的方 式：“自行报名”，“同学介绍”，“网上报 名”，“老师推荐”，采用表单中的单选按钮。
2020/11/6
计算机应用基础
24
• （10）合并第6行所有单元格，输入“你哪个时 段方便参加社团活动?”。