使用DW制作简单网页PPT课件
合集下载
DW制作简单网页PPT课件
DW设计网页的流程
整个网站的制作流程：在Photoshop或者Fireworks中作出效果 图→切图→在Dreamweaver中添加文字，定义样式。
DW网站制作流程 新建站点→站点文件命名→定义页面属性→插入表格→定义 页面大小→转换到布局视图→添加内容→插入导航条→转换 到标准视图工作→添加链接→使用代码片断→定义及应用 CSS→添加动态交互→链接站点各个页面。
META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键 词、页面刷新等。
文本标签 <h#> <font> 分隔标签 <p> <br> <hr> 列表标签 超链接标签 图像标签
DW基本内容
Dreamweaver基本介绍 定义站点 设置文件头 使用文本 使用图像 使用Flash动画 使用音频 使用视频
设置文件头
1、meta标签说明 2、设置网页的编码 3、设置文档标题 4、定义关键字 5、设置说明文字 6、设置网页的刷新
meta标签说明
属性名 name
值 keywords description robots Content-type
http-equiv refresh expires
说明 定义网页的关键词 提供网页的简短描述 定义网页的搜索引擎索引方式 定义用户的浏览器或相关设备如何显示将要加 载的数据，eg.定义网页编码 用于刷新与跳转（重定向）页面 用于网页缓存过期时间，一旦网页过期将服务 器上重新下载页面
HTML的基本语法
标签 HTML通过标签文档的内容和外观，标签就是HTML的命令。
标签以<>开始，以</>结束 eg. <table></table> <a></a> <div></div> 标签必须是闭合的。大部分成对出现，ex.<br /> <hr /> 标签大小写无关。但建议html代码小写
49第4章 Dreamweaver设计网页PPT课件
→【文本对象】，弹出文本对象选择菜单。 第三种，利用标签选择器添加标签，在插入
栏里选择【常用】→【标签选择器】，选择 【HTML】标签。 插入文字标签首先要选中被修饰的文字对象。
13
4.2.2 排版标签
HTML语言中常用的排版标签主要有<P>、 <BR>、<HR>、<CENTER>、<PRE>、 <DIV>，主要用于页面对象排版。常用排 版标签可以对页面的文本、表格和图像等对 象排版以符合页面版式要求。
16
4.3.1 插入图像
在Dreamweaver中插入图像操作类似插入 文字，可以在菜单栏选择【插入】→【图像】 执行插入图像操作，也可以通过插入栏里 【标签选择器】插入图像，还可以使用插入 栏里的图像快捷工具按钮实现。在代码视图 或设计视图中选中插入图像位置，然后选择 菜单栏的【插入】→【图像】，选择插入图 像路径并确定完成操作。
17
4.3.2 图像文字的混排
图像在与文字混排时可以对图像与文字的位置关系进行定义。 <img src=“images/Cherry.bmp” align=“top”>
与一行文字垂直居上对齐方式。<br><br> <img src=“images/Cherry.bmp” align=“middle”>
14
4.2.3 特殊符号标签
HTML语言提供了特殊符号标签，特殊符号 标签可以向页面内添加一些特殊符号 ，例 如，“<”、“<”、“@”等。
15
4.3 图像
图像作为网页设计的主要艺术元素，是实现 网站艺术风格和版式设计的主要载体，因此， 图像广泛的应用于网页设计过程中，图像与 文字、视频等其它对象有效的配合可以实现 不同的网站风格。
栏里选择【常用】→【标签选择器】，选择 【HTML】标签。 插入文字标签首先要选中被修饰的文字对象。
13
4.2.2 排版标签
HTML语言中常用的排版标签主要有<P>、 <BR>、<HR>、<CENTER>、<PRE>、 <DIV>，主要用于页面对象排版。常用排 版标签可以对页面的文本、表格和图像等对 象排版以符合页面版式要求。
16
4.3.1 插入图像
在Dreamweaver中插入图像操作类似插入 文字，可以在菜单栏选择【插入】→【图像】 执行插入图像操作，也可以通过插入栏里 【标签选择器】插入图像，还可以使用插入 栏里的图像快捷工具按钮实现。在代码视图 或设计视图中选中插入图像位置，然后选择 菜单栏的【插入】→【图像】，选择插入图 像路径并确定完成操作。
17
4.3.2 图像文字的混排
图像在与文字混排时可以对图像与文字的位置关系进行定义。 <img src=“images/Cherry.bmp” align=“top”>
与一行文字垂直居上对齐方式。<br><br> <img src=“images/Cherry.bmp” align=“middle”>
14
4.2.3 特殊符号标签
HTML语言提供了特殊符号标签，特殊符号 标签可以向页面内添加一些特殊符号 ，例 如，“<”、“<”、“@”等。
15
4.3 图像
图像作为网页设计的主要艺术元素，是实现 网站艺术风格和版式设计的主要载体，因此， 图像广泛的应用于网页设计过程中，图像与 文字、视频等其它对象有效的配合可以实现 不同的网站风格。
《Dw CC网页制作案例教程》教学课件 第3章 创建简单图文网页
步骤 01 将本书附赠素材“素材与实例
\ch03〞目录下的“text〞文
件夹拷贝至第2章创立的站点
“test〞根目录下。
步骤 02 在Dreamweaver中翻开“text
〞文件夹中的“index-
1x.html〞文档，单击“文档
工具栏〞中的“拆分〞按钮，
使文档窗口左侧显示HTML代码，
第3章 创建如简下单图图文。网页
第3章 创建简单图文网页
26
2三．、编网号页列的表本质
编号列表前通常有数字或字母作前导字符。这些字符可以是阿拉伯数字、英文字母或罗 马数字等，效果如右图所示。
步骤 01 将插入点置于需要创立编号列表的位置，单击“属性〞面板中的 按钮，数字前导字符 将出现在鼠标光标前，如以下图所示。
步骤 02 在阿拉伯数字前导符后面输入相应的文本内容，按【Enter】键分段后， 下一个数字前导符会自动出现。
7
步骤 三02 、弹网出页“的页本面属质性〞对话框，对话框
左侧的“分类〞列表中显示可以设 置的类别，右侧显示相应的设置项， 默认显示“外观〔CSS〕〞设置项， 如以下图所示。
步骤 03
在左侧的“分类〞列表中选择“标 题/编码〞，然后在“标题〞编辑 框中输入网页标题“海的女儿〞， “编码〞类型保持默认，如以下图 所示。
“xinwen_1x.html 〞，将其翻开，如 右图所示。
第3章 创建简单图文网页
10
案例实施
一、网页、网站和主页
步骤 03 参照相关知识第一节中的操作，将插入点置于代码界面<meta charset=“utf-8“>标签 的后面，选择“插入〞>“Head〞>“关键字〞菜单命令，弹出“关键字〞对话框，在
DW网页布局(表格、布局表格)PPT课件
第4章 构建网页布局
使用表格 使用布局表格
精选PPT课件
4.1 使用表格
所谓表格就是由一个或多个单元格构成的集合，
表格中横向的多个单元格称为行，垂直的多个单
元格称为列。行与列的交叉区域称为单元格，网
页中的元素通常都被放置在这些单元格中，以使
其“各安其位”。
此处表示未 明确设置单 元格的宽度
此处显示了表格的宽 度。如果只显示一个 “▼”符号，表示未
布布局局单单元元格格只只能能添添 加加在在布布局局表表格格中中
可以在原有布局表格 的下方添加布局表格
不不能能在在原原有有内内 容容的的右右侧侧，，添添 加加布布局局表表格格了了
布布局局表表格格不不能能互互相相 重重叠叠，，只只能能嵌嵌套套
精选PPT课件
绘制完布局表格后的代码：
<table width="250" border="0" cellpadding="0" cellspacing="0">
精选PPT课件
4.使用间隔图像： 间隔图像是不可见的、单像素的、透明 GIF图像，用于控 制自动伸展表格中的间距，以维持表格和单元格的宽度。 若不在自动伸展表格中使用间隔图像，则表格列的大小将 发生改变或消失（如果表格不包括内容）。若要将列的最 小宽度限制到某一特定值，可在该列中插入一个间隔图像 。单击列标题菜单，然后选择“添加间隔图像”（也可同 法 “删除间隔图像 ）。 5.网格线：从任何新布局单元格的边缘向外延伸到包含该 单元格的布局表格的边缘，这些线可以方便将新单元格和 以前的单元格对齐，并显现基础 HTML 表格的结构。 Dreamweaver 网格已设置，并且这种网格不会根据单元格 的位置发生更改，因此可以用它来设计页面的布局。
使用表格 使用布局表格
精选PPT课件
4.1 使用表格
所谓表格就是由一个或多个单元格构成的集合，
表格中横向的多个单元格称为行，垂直的多个单
元格称为列。行与列的交叉区域称为单元格，网
页中的元素通常都被放置在这些单元格中，以使
其“各安其位”。
此处表示未 明确设置单 元格的宽度
此处显示了表格的宽 度。如果只显示一个 “▼”符号，表示未
布布局局单单元元格格只只能能添添 加加在在布布局局表表格格中中
可以在原有布局表格 的下方添加布局表格
不不能能在在原原有有内内 容容的的右右侧侧，，添添 加加布布局局表表格格了了
布布局局表表格格不不能能互互相相 重重叠叠，，只只能能嵌嵌套套
精选PPT课件
绘制完布局表格后的代码：
<table width="250" border="0" cellpadding="0" cellspacing="0">
精选PPT课件
4.使用间隔图像： 间隔图像是不可见的、单像素的、透明 GIF图像，用于控 制自动伸展表格中的间距，以维持表格和单元格的宽度。 若不在自动伸展表格中使用间隔图像，则表格列的大小将 发生改变或消失（如果表格不包括内容）。若要将列的最 小宽度限制到某一特定值，可在该列中插入一个间隔图像 。单击列标题菜单，然后选择“添加间隔图像”（也可同 法 “删除间隔图像 ）。 5.网格线：从任何新布局单元格的边缘向外延伸到包含该 单元格的布局表格的边缘，这些线可以方便将新单元格和 以前的单元格对齐，并显现基础 HTML 表格的结构。 Dreamweaver 网格已设置，并且这种网格不会根据单元格 的位置发生更改，因此可以用它来设计页面的布局。
第3章 使用Dreamweaver制作简单网页(ppt)
第3章 使用Dreamweaver制作简单网页
3.3.2 CSS的基本语法
+
3.3 初识CSS
CSS语言由两部分构成：选择符（selector），以及一条或多条声明，其中声明 由一个属性（property）和一个属性值（value）组成。
属性
值
属性
值
选择器
声明
声明
图3-29 CSS语法结构
第3章 使用Dreamweaver制作简单网页
11/26/2014
清华大学
第3章 使用Dreamweaver制作简单网页
+
3.4 CSS选择符
3.4.2 ID选择符与类选择符
1．ID选择符 ID选择符是以“#”开头，在一个XHTML文件中id具有唯一性是不可以 重复的。 2．类选择符 类选择符，通过直接引用元素中类属性的值而产生效果，这个应用前面 总是有一个句点“.”，这个句点用来标识一个类选择符，类名可以随 意命名。
+
3.2 创建站点
3.2.3 在文件面板中处理文件 2．站点内的基本操作 在“文件”面板中，可以方便地对站点内的文件执行复制、移动和删除等操作， 这里以示例的方式讲述操作方法。
第3章 使用Dreamweaver制作简单网页
+
3.2 创建站点
3.2.4 站点的管理 创建好本地站点后，必要时还需对站点进行多方面的管理，如打开站点、 复制站点、编辑站点、删除站点等。
3.3.3 盒模型
图3-32 页面效果
图3-33 修改代码后页面效果
第3章 使用Dreamweaver制作简单网页
+
3.3 初识CSS
3.3.4 如何将CSS文档应用到网页中 1．内联样式 内联样式的使用是直接在XHTML标签中加 入style参数，而style参数的内容就是CSS的 属性和值。
dreamweaver课件.ppt
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
2．在“资源”面板中从模板创建新网 页
➢在“资源”面板中只能使用当前站点的 模板创建网页。
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
3．将当前网页应用模板
➢如果要为当前编辑的网页应用已有模 板。
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
11.2.1 认识“资源”面板
➢选择“窗口/资源”命令或按F11键，打 开“资源”面板。
➢将把dt.htm网页文档存为模板文档，并 为其创建可编辑区域，然后将“大唐双 龙传”网页应用该模板。
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
电脑基础·实例·上机系列丛
清华大学出版社
11.2
Dreamweaver中文版网页制作教程
使用资源列表
➢ 在网页中用到的各种元素，如图像或影片等就 是资源。在网页制作的过程中通常会往站点里 添加资源，如果资源太多，查找起来就会不太 方便，所以需要进行资源管理，而资源列表就 是资源管理的场所。
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
11.1.2 编辑模板
➢1．创建可编辑区域 ➢2．更改可编辑区域的名称 ➢3．取消对可编辑区域的标记
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
1．创建可编辑区域
➢可编辑区域是指通过模板创建的网页中 可以进行添加、修改和删除网页元素等 操作的区域。
《dw网页设计基础》课件
代码优化
精简代码，减少冗余，提 高网页加载速度。
SEO优化技巧
关键词优化
合理设置关键词，提高网站在搜索引擎 中的排名。
链接优化
建立内外链接，提高网站的权重和信 任度。
内容优化
提供有价值的内容，吸引用户点击和 停留。
移动端优化
适配移动设备，提高用户体验和搜索 引擎友好度。
网站发布与推广
发布流程
介绍网站发布的基本流程， 包括测试、上线、备份等环
固定布局
网页的宽度和位置固定，适合设计有固定框 架的网站。
响应式布局
根据不同设备屏幕大小自适应调整，实现跨 平台访问。
流动布局
网页宽度自适应，适合设计灵活多变的网站 。
混合布局
结合固定、流动和响应式布局的特点，满足 多种需求。
文字排版技巧
选择合适的字体
根据网站风格选择合适的字体，如宋 体、微软雅黑等。
对比色方案
使用对比强烈的颜色，突出重点内容，增加 视觉冲击力。
字体在网页设计中的应用
信息传达
选择合适的字体，能够清晰地传达信息，提高用户体 验。
品牌识别
独特的字体可以成为品牌的标志，增强品牌识别度。
可读性
选择易读的字体，确保用户在浏览网页时能够快速获 取信息。
04
网页交互与动画
常见网页交互效果
传达品牌形象
通过色彩的选择，传达网站的品牌形象和风格 。
引导视觉流程Biblioteka 色彩可以引导用户的视线，突出重点内容，使 页面更加有序。
营造氛围
色彩可以营造出不同的氛围，如温馨、活力、科技等，影响用户情感。
常见网页配色方案
单色方案
使用单一颜色，通过调整透明度或饱和度来 创造层次感。
精简代码，减少冗余，提 高网页加载速度。
SEO优化技巧
关键词优化
合理设置关键词，提高网站在搜索引擎 中的排名。
链接优化
建立内外链接，提高网站的权重和信 任度。
内容优化
提供有价值的内容，吸引用户点击和 停留。
移动端优化
适配移动设备，提高用户体验和搜索 引擎友好度。
网站发布与推广
发布流程
介绍网站发布的基本流程， 包括测试、上线、备份等环
固定布局
网页的宽度和位置固定，适合设计有固定框 架的网站。
响应式布局
根据不同设备屏幕大小自适应调整，实现跨 平台访问。
流动布局
网页宽度自适应，适合设计灵活多变的网站 。
混合布局
结合固定、流动和响应式布局的特点，满足 多种需求。
文字排版技巧
选择合适的字体
根据网站风格选择合适的字体，如宋 体、微软雅黑等。
对比色方案
使用对比强烈的颜色，突出重点内容，增加 视觉冲击力。
字体在网页设计中的应用
信息传达
选择合适的字体，能够清晰地传达信息，提高用户体 验。
品牌识别
独特的字体可以成为品牌的标志，增强品牌识别度。
可读性
选择易读的字体，确保用户在浏览网页时能够快速获 取信息。
04
网页交互与动画
常见网页交互效果
传达品牌形象
通过色彩的选择，传达网站的品牌形象和风格 。
引导视觉流程Biblioteka 色彩可以引导用户的视线，突出重点内容，使 页面更加有序。
营造氛围
色彩可以营造出不同的氛围，如温馨、活力、科技等，影响用户情感。
常见网页配色方案
单色方案
使用单一颜色，通过调整透明度或饱和度来 创造层次感。
05第五章 可视化网页设计工具DW 网页设计PPT课件
<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.2 Dreamweaver的站点管理
5.2.2在Dreamweaver中创建一个站点 5.2.3管理本地站点 1.向站点中添加内容
❖（1）添加文件夹 ❖（2）添加主页 ❖（3）添加普通网页
5.2 Dreamweaver的站点管理
5.2.3管理本地站点
❖2.管理本地站点 ❖（1）打开站点 ❖（2）编辑站点 ❖（3）打开和删除网页文件
----Dreamweaver
1
Dreamweaver是美国著名的软件公司Macrome
dia推出的一个“所见即所得”的可视化网 站开发工具。也是深受国内外专业Web开发 人员喜欢的一款软件。本章重点介绍Dreamw eaver MX的工作界面、站点管理、组织排版、 制作网页、网页发布等功能。
5.1 Dreamweaver的工作界面
5.2 Dreamweaver的站点管理
5.2.4上传和更新Web站点
❖1.设置远程站点属性
5.2 Dreamweaver的站点管理
5.2.4上传和更新Web站点
❖1.设置远程站点属性
5.2 Dreamweaver的站点管理
5.2.4上传和更新Web站点
❖2.连接和上传文件到远程站点 ❖设置好远程站点的属性后，就可以连接到远程
dreamweaver课件.ppt
打开“外观”选项卡，在其中可设置各 菜单项的外观以及菜单项文本的字体。
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
3． “高级”选项卡
打开“高级”选项卡设置各菜单项的单 元格属性。
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
“行为”菜单中选择“显示弹出式菜单”命
令，打开“显示弹出式菜单”对话框，其中
包括“内容”、“外观”、“高级”和“位
电脑置基”础4·实个例选·上项机卡系列。丛
清华大学出版社
Dreamweaver中文版网页制作教程
12.4.5 显示弹出式菜单
1．“内容”选项卡 2． “外观”选项卡 3． “高级”选项卡 4． “位置”选项卡
12.1.2 事件
onFinish onHelp onKeyDown onKeyPress。 onKeyUp onLoad onMouseDown onMouseUp
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
12.1.2 事件
onMouseMove onMouseOut onMousOver onMouseWheel onMove onPropertyChange
电脑基础·实例·上机系列丛
清华大学出版社
12.1
Dreamweaver中文版网页制作教程
行为简介
通过行为可以在页面上制作一些简单的交互 效果，行为是Macromedia预置的JavaScript程 序库。行为能实现用户与网页间的交互，通 过某个动作来触发某项计划。Dreamweaver MX 2004内置了21种行为，都是一些比较常 用的功能。如果用户有较高的JavaScript编写 能力也可以自己编写行为。
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
3． “高级”选项卡
打开“高级”选项卡设置各菜单项的单 元格属性。
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
“行为”菜单中选择“显示弹出式菜单”命
令，打开“显示弹出式菜单”对话框，其中
包括“内容”、“外观”、“高级”和“位
电脑置基”础4·实个例选·上项机卡系列。丛
清华大学出版社
Dreamweaver中文版网页制作教程
12.4.5 显示弹出式菜单
1．“内容”选项卡 2． “外观”选项卡 3． “高级”选项卡 4． “位置”选项卡
12.1.2 事件
onFinish onHelp onKeyDown onKeyPress。 onKeyUp onLoad onMouseDown onMouseUp
电脑基础·实例·上机系列丛
清华大学出版社
Dreamweaver中文版网页制作教程
12.1.2 事件
onMouseMove onMouseOut onMousOver onMouseWheel onMove onPropertyChange
电脑基础·实例·上机系列丛
清华大学出版社
12.1
Dreamweaver中文版网页制作教程
行为简介
通过行为可以在页面上制作一些简单的交互 效果，行为是Macromedia预置的JavaScript程 序库。行为能实现用户与网页间的交互，通 过某个动作来触发某项计划。Dreamweaver MX 2004内置了21种行为，都是一些比较常 用的功能。如果用户有较高的JavaScript编写 能力也可以自己编写行为。
DW创建框架网页 PPT
设置框架集属性 选中框架集，打开【属性】面板，在【属性】面板中设置框架集的属性。 框架集【属性】面板参数如下。如图7-13：
【边框】：设置是否有边框，包括【是】、【否】、【默认】3个选项。 选择【默认】选项，将由浏览器端的设置来决定。 【边框宽度】：设置整个框架集的边框宽度，以像素为单位。 【边框颜色】：用来设置整个框架集的边框颜色。 【行或列】：【属性】面板中显示的是行或列，是由框架集的结构而定。 【单位】：行、列尺寸的单位，包括【像素】、【百分比】、【相对】3 个选项。
选择菜单中的【插入】|【HTML】|【框架】|【左侧及下方嵌套】命 令，即可创建框架网页。
插入预定义框架集 插入预定义框架集的具体操作步骤如下。 1．标放置在头部框架中，选择菜单中的【修改】|【页面属性】 命令，打开【页面属性】对话框中将【左边距】设置为0像素， 【右边距】设置为0像素。如图7-4：
总结
•了解框架网页概述 •掌握创建框架和框架集 •掌握框架和框架集的选择 •掌握框架和框架集属性的设置 •掌握完整的框架网页创建 •掌握嵌入式框架的创建 •掌握框架的使用技巧
课后任务
1．．利用框架知 识制作如下页 面效果。
2．利用框架知识制 作如下页面效果。
保存框架和框架集文件 在浏览器中预览框架集之前，必须保存框架集文件以及要在 框架中显示的所有文档。可以单独保存每个框架集文件和带 框架的文档，也可以同时保存框架集文件和框架中出现的所 有文档。保存框架和框架集文件的具体操作步骤如下。 1．新建一上方固定，左侧嵌套的框架网页。选择菜单中的 【文件】|【保存全部】命令，打开【另存为】对话框，此时 整个框架集内侧出现阴影，所以询问的是框架集的名称，在 【文件名】文本框中输入index.htm。如图7-5：
网页设计教程Dreamweaver电子课件第1章
1.3 启动网页设计工具
1.3 启动网页设计工具
1.4 使用开始页
1. 打开最近项目
1.4 使用开始页
2. 创建新项目 3. 从范例创建 4. 扩展 5. 帮助 6. 关闭开始页
1.5 窗 口 布 局
1.5 窗 口 布 局
“文件”菜单 “编辑”菜单 “查看”菜单 “插入”菜单 “修改”菜单
1.7 获 取 帮 助
1.7 获 取 帮 助
“文本”菜单 “命令”菜单 “站点”菜单 “窗口”菜单 “帮助”菜单
1.5.2 “插入”工具栏
1.5 窗 口 布 局
1. 打开与关闭面板 2. 展开与折叠面板组 3. 移动面板组 4. 开启与关闭全部面板
1.5.3 面板与面板组
1.6 网页编辑视图
1. 可视化视图 2. 源代码视图 3. 拆分视图
第1章
初识Dreamweaver MX 2004
1.1 网页设计理念及工具
就是你对自己主页的定位。
1.1.1 网页设计理念
1.1 网页设计理念及工具
一类是所见即所得的编辑工具。 另一类是直接编写HTML源代码的软件。
1.1.2 网页设计工具
1.2 网页中的基本元素
1. 文字 2. 图像 3. 音频 4. 视频 5. 动画 6. 版式 7. 色彩 8．链接和路径
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
©(版权号)
> < " ©
3、段落与换行 段落换行：<p>标记，直接enter键 换行符换行：<br />，shift键+ enter键
4、添加注释与空格
添加注释
<!--注释内容 -->
2、设置网页的编码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
设置网页的编码
在所有情况下都用 GB2312么？
设置网页的编码
2、设置网页的编码
3、设置文档标题
<title>+++我的个人主页+++</title>
专题三 使用DW制作简单网页
学习内容
Dreamweaver基本介绍 定义站点 设置文件头 使用文本 使用图像 使用Flash动画 使用音频 使用视频
About Dreamweaver
Dreamweaver是一款专业的 HTML 编辑器，用于对 Web 站点、 Web 页和 Web应用程序进行设计、编码和开发。
Dreamweaver是Adobe(Macromedia)公司出品的一种专业化的 网页创建工具,它采用所见即所得的编辑方式,通过特有的行 为,模板,时间线等技术,能够快速高效地创建极具表现力和动 感效果的网页,使网页创建过程变得简单.
DW设计网页的流程
整个网站的制作流程：在Photoshop或者Fireworks中作出效 果图→切图→在Dreamweaver中添加文字，定义样式。
说明 定义网页的关键词 提供网页的简短描述 定义网页的搜索引擎索引方式 定义用户的浏览器或相关设备如何显示将要加 载的数据，eg.定义网页编码 用于刷新与跳转（重定向）页面 用于网页缓存过期时间，一旦网页过期将服务 器上重新下载页面 用于定义页面缓存。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
DW网站制作流程 新建站点→站点文件命名→定义页面属性→插入表格→定
义页面大小→转换到布局视图→添加内容→插入导航条→转 换到标准视图工作→添加链接→使用代码片断→定义及应用 CSS→添加动态交互→链接站点各个页面。
DW界面介绍
视图切换 代码提示 属性面板 标签选择器
锚点用于网页中的定位，如网页的上、中、下等； 图像占位符在需要使用图形的地方插入一个占位图形先 “占领”着“地盘” ；Fireworks HTML为用Fireworks软 件切割出来的图片；交换图像为鼠标移上去时变为另一图 片，增强动感；表格数据可以将其它文件的数据转化为表 格，插进网页；标签选择器可以插入其它不常用的HTML标
定义站点
Why 避免错误的出现：路径错误，链接错误
HOW
1.建立一个文件夹用于存放网站的所有文件 2.再按栏目分类 (将图片放置在image文件夹中) 3.命名规则：使用英文或者拼音命名
网页文件的后缀名*.htm 或者*.html， 网站首页命名规则index.htm或者default.htm
<meta name="description" content="wjb的个人站点，网页设计" />
6、设置网页的刷新 打开网站后的若干秒内，让 浏览器自动跳转到一个新网 页。 用于需要经常需要刷新的网 页。 注意URL的输入
<meta http-equiv="refresh" content=“3;URL=" /
说明 粗体 斜体 对文本加下划线 对文本加强效果，相当于粗体 在当前文字大小的基础上再增大一级 在当前文字大小的基础上再减小一级 上标 下标 强调文本，通常以斜体显示
SUCCESS
THANK YOU
2019/7/25
１、设置文本格式 文本属性设置窗口
Dreamweaver 8
Dreamweaver CS4
设置颜色
颜使用一个16进制的数值表示，如#FF0000，“#”是颜色 标志。
任何一种颜色都是由红绿蓝3个颜色通道按不同亮度的比例混 合而成。
前两位代表颜色中红色的亮度 中间两位代表绿色通道的亮度 后面两位代表蓝色的亮度。
2、插入特殊符号
空格 > (大于号) < (小于号) “ (引号)
4、定义关键字
多个关键字用逗号分隔开 来。
输入的关键字能反映主页 的内容
关键字不宜太多，一般在 5个以内。
<meta name="keywords" content="网页设计，浙江工业大学" />
5、设置说明文字 说明文字和关键字一样， 可供搜索引擎寻找网页。 内容尽量要简明扼要。
设置文件头
1、meta标签说明 2、设置网页的编码 3、设置文档标题 4、定义关键字 5、设置说明文字 6、设置网页的刷新
1、meta标签说明
属性名 name
值 keywords description robots Content-type
http-equiv refresh expires
pragma与no-cache
二、使用文本
１、设置文本格式 ２、插入特殊符号 ３、段落与换行 ４、添加注释与空格 5、插入并设置水平线<hr> 6、设置段落缩进<blockquote> 7、使用列表
１、设置文本格式
标题标签
<h# align=“对齐方式”>内容</h#> #代表字体大小，取值1~6 align属性设置对齐方式，left center right
字体标签
<font face=“字体类型” size=“字号” color=“颜色”>内容 </font>
１、设置文本格式
字符标签 <b>...</b> <i>...</i> <u>...</u> <strong>...</strong> <big>...</big> <small>...</small> <sup>...</sup> <sub>...</sub> <em>...</em>
> < " ©
3、段落与换行 段落换行：<p>标记，直接enter键 换行符换行：<br />，shift键+ enter键
4、添加注释与空格
添加注释
<!--注释内容 -->
2、设置网页的编码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
设置网页的编码
在所有情况下都用 GB2312么？
设置网页的编码
2、设置网页的编码
3、设置文档标题
<title>+++我的个人主页+++</title>
专题三 使用DW制作简单网页
学习内容
Dreamweaver基本介绍 定义站点 设置文件头 使用文本 使用图像 使用Flash动画 使用音频 使用视频
About Dreamweaver
Dreamweaver是一款专业的 HTML 编辑器，用于对 Web 站点、 Web 页和 Web应用程序进行设计、编码和开发。
Dreamweaver是Adobe(Macromedia)公司出品的一种专业化的 网页创建工具,它采用所见即所得的编辑方式,通过特有的行 为,模板,时间线等技术,能够快速高效地创建极具表现力和动 感效果的网页,使网页创建过程变得简单.
DW设计网页的流程
整个网站的制作流程：在Photoshop或者Fireworks中作出效 果图→切图→在Dreamweaver中添加文字，定义样式。
说明 定义网页的关键词 提供网页的简短描述 定义网页的搜索引擎索引方式 定义用户的浏览器或相关设备如何显示将要加 载的数据，eg.定义网页编码 用于刷新与跳转（重定向）页面 用于网页缓存过期时间，一旦网页过期将服务 器上重新下载页面 用于定义页面缓存。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
DW网站制作流程 新建站点→站点文件命名→定义页面属性→插入表格→定
义页面大小→转换到布局视图→添加内容→插入导航条→转 换到标准视图工作→添加链接→使用代码片断→定义及应用 CSS→添加动态交互→链接站点各个页面。
DW界面介绍
视图切换 代码提示 属性面板 标签选择器
锚点用于网页中的定位，如网页的上、中、下等； 图像占位符在需要使用图形的地方插入一个占位图形先 “占领”着“地盘” ；Fireworks HTML为用Fireworks软 件切割出来的图片；交换图像为鼠标移上去时变为另一图 片，增强动感；表格数据可以将其它文件的数据转化为表 格，插进网页；标签选择器可以插入其它不常用的HTML标
定义站点
Why 避免错误的出现：路径错误，链接错误
HOW
1.建立一个文件夹用于存放网站的所有文件 2.再按栏目分类 (将图片放置在image文件夹中) 3.命名规则：使用英文或者拼音命名
网页文件的后缀名*.htm 或者*.html， 网站首页命名规则index.htm或者default.htm
<meta name="description" content="wjb的个人站点，网页设计" />
6、设置网页的刷新 打开网站后的若干秒内，让 浏览器自动跳转到一个新网 页。 用于需要经常需要刷新的网 页。 注意URL的输入
<meta http-equiv="refresh" content=“3;URL=" /
说明 粗体 斜体 对文本加下划线 对文本加强效果，相当于粗体 在当前文字大小的基础上再增大一级 在当前文字大小的基础上再减小一级 上标 下标 强调文本，通常以斜体显示
SUCCESS
THANK YOU
2019/7/25
１、设置文本格式 文本属性设置窗口
Dreamweaver 8
Dreamweaver CS4
设置颜色
颜使用一个16进制的数值表示，如#FF0000，“#”是颜色 标志。
任何一种颜色都是由红绿蓝3个颜色通道按不同亮度的比例混 合而成。
前两位代表颜色中红色的亮度 中间两位代表绿色通道的亮度 后面两位代表蓝色的亮度。
2、插入特殊符号
空格 > (大于号) < (小于号) “ (引号)
4、定义关键字
多个关键字用逗号分隔开 来。
输入的关键字能反映主页 的内容
关键字不宜太多，一般在 5个以内。
<meta name="keywords" content="网页设计，浙江工业大学" />
5、设置说明文字 说明文字和关键字一样， 可供搜索引擎寻找网页。 内容尽量要简明扼要。
设置文件头
1、meta标签说明 2、设置网页的编码 3、设置文档标题 4、定义关键字 5、设置说明文字 6、设置网页的刷新
1、meta标签说明
属性名 name
值 keywords description robots Content-type
http-equiv refresh expires
pragma与no-cache
二、使用文本
１、设置文本格式 ２、插入特殊符号 ３、段落与换行 ４、添加注释与空格 5、插入并设置水平线<hr> 6、设置段落缩进<blockquote> 7、使用列表
１、设置文本格式
标题标签
<h# align=“对齐方式”>内容</h#> #代表字体大小，取值1~6 align属性设置对齐方式，left center right
字体标签
<font face=“字体类型” size=“字号” color=“颜色”>内容 </font>
１、设置文本格式
字符标签 <b>...</b> <i>...</i> <u>...</u> <strong>...</strong> <big>...</big> <small>...</small> <sup>...</sup> <sub>...</sub> <em>...</em>