使用DW制作简单网页

１、设置文本格式 文本属性设置窗口
Dreamweaver 8
Dreamweaver CS4
设置颜色 颜色使用一个16进制的数值表示，如#FF0000， 颜色使用一个16进制的数值表示，如#FF0000，“#”是颜色标 志。 任何一种颜色都是由红绿蓝3 任何一种颜色都是由红绿蓝3个颜色通道按不同亮度的比例混 合而成。
设置网页的编码
在所有情况下都用 GB2312么？ 么
设置网页的编码
2、设置网页的编码
3、设置文档标题
<title>+++我的个人主页 <title>+++我的个人主页+++</title> 我的个人主页+++</title>
4、定义关键字 多个关键字用逗号分隔开 来。 输入的关键字能反映主页 的内容 关键字不宜太多，一般在 5个以内。
DW界面介绍 DW界面介绍
视图切换 代码提示 属性面板 标签选择器
锚点用于网页中的定位，如网页的上、中、下等；图 图 锚点 像占位符在需要使用图形的地方插入一个占位图形先“占 像占位符 领”着“地盘” ；Fireworks HTML为用Fireworks软件切 割出来的图片；交换图像 交换图像为鼠标移上去时变为另一图片， 交换图像 增强动感；表格数据 表格数据可以将其它文件的数据转化为表格， 表格数据 插进网页；标签选择器 标签选择器可以插入其它不常用的HTML标签。 标签选择器
<meta name="keywords" content="网页设计，浙江工业大学 /> 网页设计， 网页设计 浙江工业大学"
5、设置说明文字 说明文字和关键字一样， 可供搜索引擎寻找网页。 内容尽量要简明扼要。
<meta name="description" content="wjb的个人站点，网页设计" /> content="wjb的个人站点，网页设计" 的个人站点
目标（Target）的说明： 目标（Target）的说明：
_blank为在新窗口中打开链接； _blank为在新窗口中打开链接；站外链接 为在新窗口中打开链接 _parent为当前文档的父级框架集中展开网页； _parent为当前文档的父级框架集中展开网页； 为当前文档的父级框架集中展开网页 _seft为在当前文档的框架集中展开页面； _seft为在当前文档的框架集中展开页面；站内链接 为在当前文档的框架集中展开页面 _top为上级窗口（使用多级框架时） _top为上级窗口（使用多级框架时） 为上级窗口
网页文件的后缀名*.htm 或者*.html， 网站首页命名规则index.htm或者default.htm
设置文件头 1、meta标签说明 meta标签说明 2、设置网页的编码 3、设置文档标题 4、定义关键字 5、设置说明文字 6、设置网页的刷新
1、meta标签说明 meta标签说明
属性名 值 keywords name description robots Content-type 说明 定义网页的关键词 提供网页的简短描述 定义网页的搜索引擎索引方式 定义用户的浏览器或相关设备如何显示将要加 载的数据，eg.定义网页编码 载的数据，eg.定义网页编码 httphttp-equiv refresh expires pragma与nopragma与no-cache 用于刷新与跳转（重定向）页面 用于网页缓存过期时间，一旦网页过期将服务 器上重新下载页面 用于定义页面缓存。
字体标签
<font face=“字体类型” size=“字号” color=“颜色”>内容</font> face=“字体类型” size=“字号” color=“颜色” 内容</font>
１、设置文本格式
字符标签 <b>...</b> <i>...</i> <u>...</u> <strong>...</strong> <big>...</big> <small>...</small> ^... _... <em>...</em> 说明 粗体 斜体 对文本加下划线 对文本加强效果，相当于粗体 在当前文字大小的基础上再增大一级 在当前文字大小的基础上再减小一级 上标 下标 强调文本，通常以斜体显示
4、添加注释与空格
添加注释
<!--注释内容 --> <!--注释内容 -->
添加空格
输入代码&nbsp; 输入代码&nbsp; 使用中文全角输入法
5、插入并设置水平线
语法：<hr width=“” size=“” color=“” aligh=“” 语法：<hr width=“” size=“” color=“” aligh=“” noshade /> width 设置宽度，单位px 设置宽度，单位px size 设置厚度 ， color 设置颜色 align 设置对齐方式 noshae 设置是否需要阴影
超链接的概念
指的是将分别独立的网页文档紧密地连接起来的不可见的连接线。 利用超级链接可以实现在网页间和网页中的跳转
文字 图像
源端点 （源锚） 超级链接的结构
一个网址 目标端点 （目标锚） 一个网页 一幅图像 一段程序 页面中的某个位置
超链接的HTML标记 超链接的HTML标记
链接的HTML标记 链接的HTML标记 <a href=“链接路径” target=“标题” title=“打开方式”>链接文字 </a>
6、设置网页的刷新 打开网站后的若干秒内，让 浏览器自动跳转到一个新网 页。 用于需要经常需要刷新的网 页。 注意URL的输入 注意URL的输入
<meta http-equiv="refresh" content=“3;URL=http://www.zjut.edu.cn" /> httpcontent=“
在DW中新建站点 DW中新建站点 完成index.htm页面 完成index.htm页面
网页标题为+++我的个人网站+++ 网页标题为+++我的个人网站+++ 插入图像，输入文字，做链接 使用meta标签，实现自动跳转 使用meta标签，实现自动跳转
完成exapmle.htm页面 完成exapmle.htm页面
定义站点
Why 避免错误的出现：路径错误，链接错误 HOW
1.建立一个文件夹用于存放网站的所有文件 1.建立一个文件夹用于存放网站的所有文件 2.再按栏目分类 (将图片放置在image文件夹中) 2.再按栏目分类 将图片放置在image文件夹中) 3.命名规则：使用英文或者拼音命名 3.命名规则：使用英文或者拼音命名
前两位代表颜色中红色的亮度 中间两位代表绿色通道的亮度 后面两位代表蓝色的亮度。
2、插入特殊符号
空格 > (大于号) (大于号) < (小于号) (小于号) “ (引号) 引号)
&nbsp; &gt; &lt; &quot; &copy;
©(版权号) 版权号)
3、段落与换行 段落换行：<p>标记，直接enter键 段落换行：<p>标记，直接enter键 换行符换行：<br />，shift键 enter键 换行符换行：<br />，shift键+ enter键
超链接的HTML标记 超链接的HTML标记
链接的四种状态 1. a:link（未访问） 2. a:active （正在访问） 3. a:visited （访问过） 4. a:hover （悬停时）
超链接的种类
外部链接 （站点外部） 内部链接 E-mail链接（mailto:wjb@zjut.edu.cn?subject=“邮件标题”） mail链接（mailto:wjb@zjut.edu.cn?subject= 邮件标题” 锚点链接 图像热区 创建空链接
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="网页设计，浙江工业大学" />
2、设置网页的编码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
将article.txt中的文字作素材 article.txt中的文字作素材 文字“散文《四季》”使用标题1,居中 文字“散文《四季》”使用标题1,居中 标题目录内容的文字分别使用有序列表，无序列表 春、夏、秋、冬分别实现简单图文混排。
ห้องสมุดไป่ตู้
四、使用超链接
超链接的概念 超链接的HTML标记 超链接的HTML标记 超超链接的种类 关于文档路径
网页中的图像种类
BMP（格式简单、图像信息丰富、不压缩） BMP（格式简单、图像信息丰富、不压缩） GIF（压缩比高、动画、像素图qq、256色） GIF（压缩比高、动画、像素图qq、256色） JPEG（压缩率极高、有损压缩、照片） JPEG（压缩率极高、有损压缩、照片） PNG（透明显示、兼有gif和jpeg的色彩模式） PNG（透明显示、兼有gif和jpeg的色彩模式） 参考文献 web图像格式简述 web图像格式简述
二、使用文本
１、设置文本格式 ２、插入特殊符号 ３、段落与换行 ４、添加注释与空格 5、插入并设置水平线<hr> 、插入并设置水平线<hr> 6、设置段落缩进<blockquote> 、设置段落缩进<blockquote> 7、使用列表
１、设置文本格式
标题标签
<h# align=“对齐方式”>内容</h#> align=“对齐方式” 内容</h#> #代表字体大小，取值1~6 代表字体大小，取值1~6 align属性设置对齐方式，left align属性设置对齐方式，left center right
6、使用列表 创建无序列表 创建有序列表 转换列表类型
三、使用图像
网页中的图像种类 图像的HTML标记 图像的HTML标记 图片与文字的对齐方式 调整图片大小、替换图像、Alt属性 调整图片大小、替换图像、Alt属性 鼠标经过图像（Rollover Image） 鼠标经过图像（Rollover Image） 简单的图文混排
专题三 使用DW制作简单网页 使用DW制作简单网页
学习内容
Dreamweaver基本介绍 Dreamweaver基本介绍 定义站点 设置文件头 使用文本 使用图像 使用Flash动画 使用Flash动画 使用音频 使用视频
About Dreamweaver
Dreamweaver是一款专业的 Dreamweaver是一款专业的 HTML 编辑器，用于对 Web 站点、 编辑器，用于对 Web 页和 Web应用程序进行设计、编码和开发。 Web应用程序进行设计、编码和开发。 Dreamweaver是Adobe(Macromedia)公司出品的一种专业化的网 Dreamweaver是Adobe(Macromedia)公司出品的一种专业化的网 页创建工具,它采用所见即所得的编辑方式,通过特有的行为, 页创建工具,它采用所见即所得的编辑方式,通过特有的行为,模 板,时间线等技术,能够快速高效地创建极具表现力和动感效果 时间线等技术, 的网页,使网页创建过程变得简单. 的网页,使网页创建过程变得简单.
DW设计网页的流程 DW设计网页的流程
整个网站的制作流程：在Photoshop或者Fireworks中作出效果 整个网站的制作流程：在Photoshop或者Fireworks中作出效果 图→切图→在Dreamweaver中添加文字，定义样式。 切图→ Dreamweaver中添加文字，定义样式。 DW网站制作流程 DW网站制作流程 新建站点→站点文件命名→定义页面属性→插入表格→ 新建站点→站点文件命名→定义页面属性→插入表格→定义 页面大小→转换到布局视图→添加内容→插入导航条→ 页面大小→转换到布局视图→添加内容→插入导航条→转换 到标准视图工作→添加链接→使用代码片断→ 到标准视图工作→添加链接→使用代码片断→定义及应用 CSS→添加动态交互→ CSS→添加动态交互→链接站点各个页面。
图像的HTML标记 图像的HTML标记
<img src=“路径” alt=“替代文字” width=“” height=“” align=“”> src=“路径” alt=“替代文字” width=“” height=“” align=“”>
课内练习—站点、文本、 课内练习—站点、文本、图像的使用