[精品]dreamweaver课件:第2章网页文本操作2教案资料

合集下载

DREAMWEAVER电子教案

DREAMWEAVER电子教案

DREAMWEAVER电子教案第一章:DREAMWEAVER基础入门1.1 课程简介了解DREAMWEAVER的基本功能和应用范围熟悉DREAMWEAVER的工作界面和基本操作1.2 创建和管理网页创建新网页打开和保存网页管理网页标签和属性1.3 文本和图像编辑在DREAMWEAVER中编辑文本插入和编辑图像设置文本和图像的属性第二章:网页布局与设计2.1 表格布局创建表格调整表格的大小和属性合并和拆分表格单元格2.2 框架和iframe创建框架和iframe调整框架的大小和属性嵌套框架和iframe2.3 层和绝对定位创建层和绝对定位元素调整层和绝对定位元素的大小和位置对层和绝对定位元素应用样式第三章:CSS样式和布局3.1 CSS基本概念了解CSS的作用和基本语法创建和应用样式编辑样式表3.2 常用CSS选择器了解常用的CSS选择器应用不同选择器设置样式嵌套选择器和伪类选择器3.3 布局和响应式设计使用CSS布局技术创建响应式设计媒体查询和响应式布局移动设备和桌面设备的布局优化第四章:表单和交互设计4.1 创建表单创建表单和表单元素设置表单的属性和事件添加表单验证和提交功能4.2 表单元素和属性输入框、密码框和单选框下拉列表和多选框按钮和隐藏域4.3 表单验证和交互客户端表单验证服务器端表单处理创建动态交互效果第五章:DREAMWEAVER与数据库5.1 数据库基础了解数据库的基本概念和应用创建和管理数据库连接了解数据源和查询5.2 插入和编辑数据库内容插入和编辑数据库记录创建和应用数据表样式排序和筛选数据库内容5.3 动态网页和数据交互创建动态网页和数据交互显示和更新数据库内容创建分页和搜索功能第六章:DREAMWEAVER与多媒体6.1 多媒体元素的应用插入和编辑音频和视频文件了解不同媒体格式和兼容性应用媒体控制按钮和属性6.2 Flash动画和交互插入Flash动画和视频创建和编辑Flash按钮和交互元素ActionScript基础和简单交互6.3 动态效果和交互设计应用JavaScript和jQuery库创建滚动和动画效果实现复杂交互和用户体验第七章:DREAMWEAVER扩展和插件7.1 扩展和插件的概念了解扩展和插件的作用和类型安装和卸载扩展和插件管理扩展和插件设置7.2 常用扩展和插件应用代码自动完成和格式化工具图像编辑和处理插件网页优化和压缩工具7.3 自定义扩展和插件开发了解扩展和插件开发基础创建简单的扩展和插件发布和共享扩展和插件第八章:DREAMWEAVER与前端技术8.1 HTML5和CSS3应用了解HTML5和CSS3的新特性应用HTML5标签和CSS3样式兼容性和浏览器支持8.2 JavaScript和jQuery库了解JavaScript和jQuery的基础在DREAMWEAVER中使用JavaScript和jQuery 创建动态交互和动画效果8.3 前端框架和库了解流行的前端框架和库应用Bootstrap、Sass等工具创建响应式和移动端网页第九章:DREAMWEAVER团队协作与发布9.1 团队协作工具了解团队协作的重要性和工具使用版本控制和项目管理工具协同编辑和项目管理最佳实践9.2 网页发布和部署了解网页发布的基本流程配置服务器和FTP设置发布和维护网页9.3 网站优化和SEO了解网站优化和SEO的基本概念优化网页内容和结构提高网页在搜索引擎中的排名第十章:DREAMWEAVER项目实战10.1 项目分析和规划了解项目需求和目标制定项目计划和时间表确定项目技术和资源需求10.2 项目实施和开发使用DREAMWEAVER进行项目开发协作和集成前端技术和框架实现项目功能和交互设计10.3 项目测试和上线进行项目测试和缺陷修复优化和调整网页性能和安全性项目上线和后续维护重点和难点解析第一章:DREAMWEAVER基础入门重点:DREAMWEAVER的工作界面和基本操作难点:快速熟悉并掌握DREAMWEAVER的各种功能第二章:网页布局与设计重点:表格布局、框架和iframe的使用难点:灵活运用层和绝对定位技术进行网页设计第三章:CSS样式和布局重点:CSS选择器的应用和样式表的编辑难点:理解和应用复杂的CSS布局技术和响应式设计第四章:表单和交互设计重点:创建和配置表单元素难点:实现表单验证和提交功能,以及动态交互效果第五章:DREAMWEAVER与数据库重点:数据库连接的创建和管理难点:插入和编辑数据库内容,以及实现动态网页和数据交互第六章:DREAMWEAVER与多媒体重点:多媒体元素的应用和控制难点:Flash动画和交互设计,以及动态效果和交互设计第七章:DREAMWEAVER扩展和插件重点:扩展和插件的安装和管理难点:自定义扩展和插件的开发和发布第八章:DREAMWEAVER与前端技术重点:HTML5、CSS3、JavaScript和jQuery的应用难点:理解和应用前端框架和库第九章:DREAMWEAVER团队协作与发布重点:团队协作工具的使用和网页发布流程难点:网站优化和SEO策略的制定与实施第十章:DREAMWEAVER项目实战重点:项目分析和规划,以及项目实施和开发难点:项目测试和上线,以及后续维护和优化本教案全面覆盖了DREAMWEAVER的基础知识、网页设计、CSS样式、表单与交互、数据库应用、多媒体处理、扩展与插件使用、前端技术整合、团队协作与发布,以及项目实战等环节。

Dreamweaver-cs-基础与实例教程第2章PPT课件

Dreamweaver-cs-基础与实例教程第2章PPT课件
•14
2.3.3 重新编辑和删除CSS样式
首先在CSS样式面板中选择一种不需要的样式,然后单 击“编辑样式”按钮,就可以重新编辑CSS样式了;如 果单击“删除CSS规则”按钮,就可以删除“CSS 样式” 面板中的所选样式,并从应用该规则的所有元素中删 除格式。
•15
2.3.4 应用CSS样式
定义了CSS样式后,可以将这些CSS样式应用于网页中 的文本、图像、Flash等对象。具体的方法如下。
•21
3.外观(Layout)设置 (1)滚动文字对齐方式align 基本语法: <marquee align="对齐方式">滚动文字</marquee> 对方方式=top、middle、bottom,对齐上沿、中间、下
沿。 (2)滚动背景颜色属性bgcolor 在滚动文字的后面,可以添加背景颜色。 基本语法: <marquee bgcolor="color_value">滚动文字</marquee>
•7
2.2 制作一个简单的网页
在认识了Dreamweaver之后,接下来我们将利用文字和 图片,完成“数学与计算机”系网站主页的内容,学 习在Dreamweaver中输入并设置文字格式的基本操作, 完成效果如图所示。
•8
2.3 CSS样式
2.3.1 创建CSS样式 2.3.2 将外部样式表导入到当前文档 2.3.3 重新编辑和删除CSS样式 2.3.4 应用CSS样式
•19
(2)滚动方式属性behavior 通过这个属性能够设定不同方式的滚动文字效果。如滚
动的循环往复、交替滚动、单次滚动等。 基本语法: <marquee behavior="value">滚动文字</marquee> (3)滚动循环属性loop 通过这个属性能够让文字滚动循环进行。 基本语法: <marquee loop="次数">滚动文字</marquee>

网页制作 第二章Dreamweaver基础知识共58页PPT资料

网页制作 第二章Dreamweaver基础知识共58页PPT资料

图3-4
图3-5 图3-6 图3-7 图3-8 图3-9
文档工具栏
该栏中放置了“文档”窗口视图(如设计 视图、代码视图、设计和代码混合视图)按钮、 标题设置框和文档管理(如在浏览器中预览网 页)等按钮,如图3-10所示。
“文档”窗口视图各按钮的含义如下。

:单击该按钮可以切换到“代码”视图中。“代
第2章 Dreamweaver基础知识
课前导读 课堂讲解 上机实战 课后练习
课前导读
基础知识 重点知识 提高知识
基础知识
Dreamweaver MX 2019的 工作界面。
重点知识
Dreamweaver MX 2019的工具面板及属性面 板的使用。
提高知识
Dreamweaver MX 2019中创建一般页面 的方法。
“文件”菜单 “编辑”菜单 “视图”菜单 “插入”菜单
“修改”菜单 “文本”菜单 “命令”菜单 “站点”菜单 “窗口”菜单 “帮助”菜单
“文件”菜单
“文件”菜单中包含网页文件操作的基本
项目,如网页文件的新建、打开、保存、关闭、
浏览、导入以及导出等,选择相应的命令即可执
图3-12 图3-13
标签选择器
标签选择器显示了一些常用的HTML标签,灵 活运用这些标签可大大降低设计人员的工作量。 比如想选择表格中的某一行,则可通过单击标签 选择器中的 标签快速选择,如图3-14所示。
图3-14
菜单概述
除了掌握Dreamweaver MX 2019的操作界 面外,还应该熟悉Dreamweaver MX 2019的命 令。在实际的制作过程中,有许多操作是需 要命令来完成的,下面就网页制作中常用的 一些菜单及命令进行简单的介绍。

Dreamweaver网页设计第2章_HTML简介PPT教学课件

Dreamweaver网页设计第2章_HTML简介PPT教学课件

2.1 HTML文档的基本结构—标记和属性
Hale Waihona Puke ⑵ 其他常用属性属性名 background
text link alink vlink leftmargin topmargin
属性用法 background="图像url"
text="颜色" link="颜色" alink="颜色" vlink="颜色" Leftmargin="像素值" topmargin="像素值"
2.1 HTML文档的基本结构—标记和属性
⑴ bgcolor属性 用法二:bgcolor="颜色标识符" “颜色标识符”在HTML的预定义颜色符中取值。 常用的预定义颜色符: black、olive、teal、red、blue、maroon、navy、 gray、lime、fuchsia、white、green、purple、 sliver、yellow、aqua 例如: <body bgcolor=" yellow">
2.1 HTML文档的基本结构—标记和属性
⑵ meta标记 描述网页说明 <meta name="description" content="网页说明信息"> “网页说明信息”是一段文本,它将作为搜索引擎对网页 的描述信息。 搜索引擎就能够根据这些关键字搜索到相应网页,并显 示关于网页的说明信息。
2.1 HTML文档的基本结构—标记和属性
⑴ title标记 title标记用于标识网页标题。 格式如下: <title>字符串</title> 格式中的“字符串”是网页的标题内容,浏览网 页时该内容显示在网页顶部的标题行中。 ⑵ meta标记 meta标记用于描述网页关键字和网页说明、定义 网页语言编码、页面刷新设置等,进行网页浏览 时,这些标记信息是不可见的。

Dreamweaver CS6-第2章文本与文档课件

Dreamweaver CS6-第2章文本与文档课件

2.2.3 修改项目符号或编号
(1)将插入点放在设置项目符号或编号的文本中。
(2)通过以下几种方法启动“列表属性”对话框。 单击“属性”面板中的“列表项目”按钮。 选择“格式 > 列表 > 属性”命令。
2.2.4 设置文本缩进格式
设置文本缩进格式有以下几种方法。 在“属性”面板中单击“内缩区块”按钮 或“删除内缩区块”按 钮 ,使段落向右移动或向左移动。 选择“格式 > 缩进”或“格式 > 凸出”命令,使段落向右移动或向 左移动。 按Ctrl+Alt+] 组合键或Ctrl+Alt+ [ 组合键,使段落向右移动或向左 移动。
2.1.6 设置页边距
按照文章的书写规则,正文与纸的四周需要留有一定的距离,这个距离叫页 边距。网页设计也如此,在默认状态下文档的上、下、左、右边距不为零。
修改页边距的具体操作步骤如下。 (1)选择“修改 > 页面属性”命令,弹出“页面属性”对话框。 (2)根据需要在对话框的“左边距”“右边距”“上边距”“下边 距”“边距宽度”和“边距高度”选项的数值框中输入相应的数值。
“页面属性”对话框
2.1.7 设置网页的标题
HTML 页面的标题可以帮助站点浏览者理解所查看网页的内容,并在 浏览者的历史记录和书签列表中标志页面。文档的文件名是通过保存文件 命令保存的网页文件名称,而页面标题是浏览者在浏览网页时浏览器标题 栏中显示的信息。 更改页面标题的具体操作步骤如下。
(1)选择“修改 > 页面属性”命令,弹出“页面属性”对话框。 (2)在对话框的“分类”选项框中选择“标题/编码”选项,在对话 框右侧“标题”选项的文本框中输入页面标题,单击“确定”按钮,完成 设置。
输入文字后的效果图

Dreamweaver网页制作课件 第二单元

Dreamweaver网页制作课件 第二单元

目录
上一页
下一页
退出
任务一 添加首页文本 举一反三:
1.使用IE浏览器浏览各种类型的页面,分析各个页面中文 本所起作用,并分析是否可以用其他网页元素代替。 ⑴ 启发思路: 在互连网上有各种类型的网站,如搜索引擎类网站,商业 类网站,个人网站等。网页设计中各种类型的页面都可以从这 些网站中借鉴。
⑵ 分组完成任务。 2.新建一个网页“practice2-1.html”,将本单元素材“举 一反三”文件夹中“practice2-1.txt” 的文本内容拷贝到页面中, 使用插入空格的方法修改文本,使每一行文本中的“vs”字样达 到对齐的效果。
目录
上一页
下一页
退出
第二单元 添加首页内容
任务一 添加首页文本 任务二 使用CSS规则美化文本 任务三 添加图像 任务四 创建与应用CSS美化网页
目录
上一页
下一页
退出
第二单元 添加首页内容
任务一 添加首页文本
任务描述:完成首页文本内容的输入与编辑。 任务分析:在第一单元中建立了首页空白文件“index.htm -l”,接下来就要为首页添加内容。 文本是网页制作中最常用的内容,有着其他网页元素无法 替代的功能。在网页上输入、编辑、格式化文本是网页制作者 的重要工作之一。
目录
上一页
下一页
退出
任务二 编辑文本样式
3 .修改文本样式:
CSS是什么?
选中“青春寄语”标题,在CSS模式下“属性”面板中可 以看到其目标规则为“title2”,此时如果将颜色属性修改为 #900,则所有应用了该样式的标题将都发生改变 。还可以通 过通过CSS样式面板修改样式。
选中文字“青春寄语”(其样式 为“title2”),在属性面板中修改其颜 色值为“#900”

Dreamweaver CC网页设计课件第2章第2节

Dreamweaver CC网页设计课件第2章第2节
2.19
第2章 网页元素的添加
2.2 图像的插入和设置
2.2.4实战演练:网页“濒危植物”
7) 同样的操作,在其他单元格中插入图像和文字。
2.20
第2章 网页元素的添加
2.2 图像的插入和设置
2.2.4实战演练:网页“濒危植物”
8)拖拽鼠标从第一个单元格到最后一个单元格,选中所有的单元格,在属性面板中 设“背景颜色”为#EAFFF5 ,“水平”和“垂直”分别为居中对齐,宽为50%。
2.3
第2章 网页元素的添加
2.2 图像的插入和设置
2.2.1 案例制作:网页“考拉”
3)输入文本“考拉”,按回车键另起一段。 4)打开image文件夹中的“考拉资料文字.doc”,将所有文字复制粘贴到网页中,形成网页 中的文字。 5)根据如图所示的样式,依次按Shift+回车键进行换行排列文字。
2.11
第2章 网页元素的添加
2.2 图像的插入和设置
2.2.2 新知解析
3. 图像的属性面板
•重置为原始大小按钮 :单击该按钮即可恢复图像的原始尺寸。
•提交图像大小按钮 :单击该按钮可弹出提示框,提示是否提交对图像尺寸的修改,单击 “确定”确认修改结果。
•目标:指定链接时的目标窗口或框架。
•替换:为图像添加注释。当用户的浏览器不能正常显示图像时,会在图像的位置上用这个 注释替代图像。在浏览器窗口,当鼠标移到图像上时也会显示“替换”中设置的注释文字。
2.21
2.2
第2章 网页元素的添加
2.2 图像的插入和设置
2.2.1 案例制作:网页“考拉”
2)新建网页,保存为kaola.html,设网页的标题为“考拉”。在属性面板中单击“页面属 性”按钮,打开“页面属性”对话框,在外观(CSS)选项下设文字大小为13,文字颜色 为黑色,“背景颜色”为#F2F9FD,单击“确定”按钮,于是为网页添加了背景颜色,同 时为整个网页设置了默认的文字属性。

Dreamweaver课件:第2章网页文本操作2

Dreamweaver课件:第2章网页文本操作2

第二章 校园网站的制作
第一部分: 新建站点 网页标题 表格的使用 制作logo、特效图片 制作导航栏 建立超级链接并设置样式 层的介绍
新建站点
请同学在dreamweaver中新建一站点; 在dreamweaver中打开站点; 在dreamweaver中关闭站点
网页标题的设置
严格把控质量关,让生产更加有保障 。2020 年12 月上午1 2时15 分20.1 2.120 0:15D ecem ber 12, 2020
作业标准记得牢,驾轻就熟除烦恼。 2020年 12月1 2日星 期六12 时15分 32秒0 0:15: 3212 December 2020
好的事情马上就会到来,一切都是最 好的安 排。上 午12时 15分3 2秒上 午12时 15分00 :15:3 220.1 2.12
第二章 文本与文档
本章学习要点:
网页文档的基本操作 网页文档的属性设置 插入普通文本、特殊文本 网页文本的属性设置 插入水平线和时间 项目列表的建立方法 移动文字的制作方法
插入文本
普通文本 特殊文本 在字符之间添加空格 上、下标的制作 水平线 日期
文本是网页制作的核心内容, Dreamweaver MX 2004允许通过以下方 式在Web页中添加文本:直接将文本输入 到页面中、从其他文档复制和粘贴文本或 从其他应用程序中拖放文本。能够合并到 Web页的常见文档类型有ASCII文本文件、 RTF文件和MS Office文档,用 Dreamweaver可以从这些文档类型中的 任何一种程序取出文本,然后将文本插入 到Web页中。
做一枚螺丝钉,那里需要那里上。20 .12.12 00:15 :3200 :15D ec-201 2-Dec -20
日复一日的努力只为成就美好的明天 。00:1 5:320 0:15: 3200: 15Sat urday, December 12, 2020

《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功能特点的深入理解,特别是与其它网页编辑器的区别。

网页设计教程Dreamweaver电子课件第2章

网页设计教程Dreamweaver电子课件第2章

2.7 目录结构规范
(6)如果有多个语言版本,最好分别位于不同的服务器上或存放于不 同的目录中。
(7)多媒体文件存放在根目录下的media文件夹中。 (8)目录层次不要太深,建议不要超过3层。 (9)如果链接目录结构不能控制在3层以内,建议在页面里添加明确 的导航信息,这样可以帮助浏览者明确自己所处的位置。 (10)不要使用过长的目录名。
第2章 创建本地站点
2.1 网站设计总体规划
2.1.1 确定网站的整体风格
2.1 网站设计总体规划
2.1.1 确定网站的整体风格
2.1 网站设计总体规划
2.1.2 创意设计
2.2 新 建 站 点
2.2 新 建 站 点
2.2 新 建 站 点
2.2 新 建 站 点
2.3 修改站点信息
选择 “站点”|“管理站点”,在打开的“管理站点”对话框中单 击“编辑”按钮,此时将重新打开“mywebsite的站点定义为”对话 框。单击其中的“高级”标签,切换到“高级”选项卡。
2.5.5 复制文件到站点内
2.6 文件目录命名规范
1. 不能使用中文 2. 最好使用小写 3. 不能使用特殊字符 4. 不推荐使用拼音命名 5. 合理使用下划线
2.6.1 文件和文件夹的命名
2.6 文件目录命名规范
首页的文件名也可以是default.asp,index.asp或 default.aspx,index.aspx。
2.5.1 新建网页
2.5 创建站点目录结构
2.5.2 文件和文件夹的改名
2.5 创建站点目录结构
课堂练习2.4 移动文件
2.5.3 移动文件和文件夹
2.5 创建站点目录结构
在站点管理器中.4 删除文件或文件夹

Dreamweaver基础PPT学习教案

Dreamweaver基础PPT学习教案
当打开或创建一个项目,进入文档窗口,我们可 以在文档区域中进行输入文字、插入表格和编辑 图片等操作。
文档窗口显示当前编辑的Web页文档。 Dreamweaver提供了文档窗口的三种视图:
“设计”视图:是一个用于可视化 页面布局、可视化编辑和快速应用 程序开发的设计环境,类似于在浏 览器中查看页面时看到的内容。
等。
第8页/共35页
2.插入工具栏
插入面板集成了所有可以在网 页应用的对象包括“插入”菜 单中的选项。插入工具栏其实 就是图像化了的插入指令,通 过一个个的按钮,可以很容易 的加入图像、声音、多媒体动 画、表格。图层、框架、表单、 Flash和ActiveX等网页元素。
第9页/共35页
3.文档窗口
“代码”视图:是一个用于编写和 编辑 HTML、JavaScript、服务器语 言代码以及任何其他类型代码的手 工编码环境。 第10页/共35页
“拆分”视图使您可以在单个窗口
(1)文档工具栏
“文档”工具栏包含各种按钮, 它们提供各种“文档”窗口视 图(如“设计”视图和“代码” 视图)的选项、各种查看选项 和一些常用操作(如在浏览器 中预览)。
Dreamweaver基础
会计学
1
第2章 Dreamweaver基础
Dreamweaver简介 Dreamweaver工作界面 使用Dreamweaver建立和管
理站点(重点) 第1页/共35页
2.1 Dreamweaver简介
Dreamweaver是 Macromedia公司出品的一款 集网页制作和网站管理于一体的 “所见即所得”的网页制作软件。
作业
上机题1,2
第34页/共35页
(2)站点管理(【站点】|【管理 站点】)
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

图3-3 图3-4
在字符之间添加空格
Dreamweaver MX 2004的HTML代 码只允许字符之间包含一个空格,若要 在文档中添加其他空格,必须插入不换 行空格,也可以设置一个在文档中自动 添加不换行空格的参数选择。 插入不换行空格 设置添加不换行空格的参数
插入不换行空格
插入不换行空格,可执行如下操作之一。 在“插入”栏的“文本”选项卡中,单击
特殊文本
在Dreamweaver MX 2004中,可以在文 档中插入多种特殊符号,如版权复制符号、 并列符、注册商标符号等。要插入特殊符号, 具体操作如下。
(1)将光标定位到插入特殊字符的位置。
(2)单击“插入”栏中的“文本”选项卡, 如图3-1所示。
(3)单击 按钮,展开如图3-2所示的“字 符”下拉列表。
“字符”按钮,在下拉列表中选择“插入不 换行空格”选项。 选择[插入][HTML][特殊字符][不换行空 格]菜单命令。 按【Ctrl+Shift+空格键】键输入。 将输入法切换到全角状态再按空格键。
设置添加不换行空格的参数
设置添加不换行空格的参数,具体操作如 下。 (1)选择[编辑][首选参数]菜单命令。 (2)在“分类”列表的“常规”选项中 选中
图3-8 图3-9
项目列表
有序列表 无序列表 创建嵌套列表
有序列表
有序列表又称为编号列表,是有一定排列 顺序的列表,一般前面有数字前导字符, 也可以是阿拉伯数字、英文字母、罗马数 字等符号。
无序列表
无序列表又称为项目列表,是一系列无 顺序级别关系的项目文本组成的列表, 一般前面是用项目符号作为前导字符。
创建嵌套列表
创建嵌套列表的具体操作如下。 (1)选择要嵌套的列表项。 (2)单击属性面板中的“缩进”按钮 ,或 选择[文本][缩进]菜单命令。Dreamweaver 自动缩进文本并创建一个单独的列表,该列表 具有原始列表的HTML属性,如图3-10所示。 (3)按照以上列表的创建方法,对缩进的文 本应用新的列表类型或样式。完成的效果如图 3-11所示。
普通文本
普通文本是指一般的汉字或英文文本,将光标直 接定位到编辑窗口中要输入文字的地方,然后直接 输入文字即可插入。
也可在其他文本编辑器中编辑文本(Word、 WPS等),然后复制该文字,打开要添加该文字的 Web页面,选择[编辑][粘贴] 命令即可粘贴一般 的文本。但Dreamweaver不保留在其他应用程序 中设置的文本格式,只可以保留换行符。如果想保 留文本的格式,可以选择[编辑][带格式粘贴] 命 令,如果不想保留文本格式,还可选择[编辑][粘 贴文本] 命令。
也可以在图形软件中制作一些矩形条后用插入图 形的方法插入到Web页面中,用这种方法做成的 水平线更加丰富多彩。
图3-7
日期
Dreamweaver提供了一个方便的日期对象,该 对象使可以以任何喜欢的格式插入当前日期(包 含或不包含时间都可以),并在每次保存文件时 都自动更新该日期。 将当前日期插入到文档中的具体操作如下。 (1)在“文档”窗口中将插入点放在要插入日 期的位置。 (2)执行下列操作之一。
第二章 文本与文档
本章学习要点:
网页文档的基本操作 网页文档的属性设置 插入普通文本、特殊文本 网页文本的属性设置 插入水平线和时间 项目列表的建立方法 移动文字的制作方法
插入文本
普通文本 特殊文本 在字符之间添加空格 上、下标的制作 水平线 日期
文本是网页制作的核心内容, Dreamweaver MX 2004允许通过以下方 式在Web页中添加文本:直接将文本输入 到页面中、从其他文档复制和粘贴文本或 从其他应用程序中拖放文本。能够合并到 Web页的常见文档类型有ASCII文本文件、 RTF文件和MS Office文档,用 Dreamweaver可以从这些文档类型中的 任何一种程序取出文本,然后将文本插入 到Web页中。
项。
格式化文本
“文本”属性面板中各选项含义及设置方法如下。
格式 样式 粗体 斜体 字体 大小 颜色 对齐方式 链接
格式
设置所选文本(一般是标题文本)的段落样 式。“段落”是应用<p>标签的默认格式, “标题 1”添加<H1>标签,各具体选项如图 3-8所示,设置该选项可以将所选的文本设置 成各种标题。标题号越小,字体越大。 要设置字体的“格式”属性,只需在“格式” 下拉列表中选择相应的选项即可,其效果如图 3-9所示。
选择[插入][日期]菜单命令;
在“插入”栏的“常用”选项中,单击“插入日 期”按钮。
如果Hale Waihona Puke 中了复选框,则在日期格式插入
到文档中后可以对其进行编辑,方法是单击已设
置格式的日期文本,然后在属性面板中单击
按钮,接着在打开的“插入日期”对话框中重新
进行设定即可。
如果希望在每次保存文档时 都更新插入的日期,可选中“存 储时自动更新”复选框。如果希 望日期在插入后变成纯文本并永 远不自动更新,请取消选择该选
创建水平线
(1)在“文档”窗口中,将插入点放在要插入 水平线的位置。 (2)执行以下操作之一。 选择[插入][HTML][水平线]菜单命令; 在“插入”栏的“HTML”选项中单击“水平线” 按钮 。
修改水平线
(1)在“文档”窗口中,选择要修改的水平线。 (2)选择[窗口][属性]菜单命令,打开如图3-7 所示的属性面板,然后根据需要对属性进行设置。
复选框。 (3)单击 按钮保存即可。
添加上、下标的方法
利用标签选择器可以实现上、下标的插入 方法:在快速插入面版中找到 “标签选择器” ——html——sup
点击“插入”后,输入上标内容,确定即可。 注:下标sub的插入方法同上。
水平线
水平线对于信息的组织很有用。在页面上,可 以使用一条或多条水平线以可视方式分隔文本 和对象。 创建水平线 修改水平线
图3-1 图3-2
(4)如果还需要输入其他的特殊字符,可 以在“字符”下拉列表中选择“其他字符” 选项,打开如图3-3所示的“插入其他字符” 对话框。
(5)单击需要的字符后再单击 按钮即 可输入相应的字符,如图3-4所示。
也可以选择[插入][HTML][特殊字符]菜 单命令下的相应命令插入相应字符。
相关文档
最新文档