DW制作简单网页
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
载的数据，eg.定义网页编码 用于刷新与跳转（重定向）页面
expires
pragma与no-cache
用于网页缓存过期时间，一旦网页过期将服务
器上重新下载页面 用于定义页面缓存。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
说明
粗体 斜体 对文本加下划线 对文本加强效果，相当于粗体 在当前文字大小的基础上再增大一级 在当前文字大小的基础上再减小一级 上标
<sub>...</sub>
<em>...</em>
下标
强调文本，通常以斜体显示
设置文本格式
文本属性设置窗口
Dreamweaver 8
Dreamweaver CS4
内容尽量要简明扼要。
<meta name=“description” content=“搜房网是中国最大的房地产家居网络 平台,提供全面及时的房地产新闻资讯内容" />
设置网页的刷新
打开网站后的若干秒内，让 浏览器自动跳转到一个新网 页。 用于需要经常需要刷新的网 页。
注意URL的输入
<meta http-equiv="refresh" content=“3;URL=http://www.zjut.edu.cn" />
3、设置文档标题
4、定义关键字
5、设置说明文字
6、设置网页的刷新
meta标签说明
属性名 值 说明
keywords
name description robots
定义网页的关键词
提供网页的简短描述 定义网页的搜索引擎索引方式
Content-type
http-equiv refresh
定义用户的浏览器或相关设备如何显示将要加
<meta name="keywords" content="网页设计，设计" />
设置网页的编码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
设置网页的编码
在所有情况下都用 GB2312么？
设置网页的编码
meta标签
在网页的HTML源代码中一个重要的代码“”（即通常所说的META标签）。
META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键 词、页面刷新等。
文本标签 <h#> <font>
分隔标签 <p> <br> 列表标签 超链接标签 图像标签 <hr>
DW基本内容
Dreamweaver基本介绍 定义站点
设置文件头
使用文本 使用图像 使用Flash动画 使用音频
使用视频
About Dreamweaver
Dreamweaver是一款专业的 HTML 编辑器，用于对 Web 站点、
Web 页和 Web应用程序进行设计、编码和开发。 Dreamweaver是Adobe(Macromedia)公司出品的一种专业化的网
DW网站制作流程
新建站点→站点文件命名→定义页面属性→插入表格→定义 页面大小→转换到布局视图→添加内容→插入导航条→转换
到标准视图工作→添加链接→使用代码片断→定义及应用
CSS→添加动态交互→链接站点各个页面。
DW界面介绍
视图切换
代码提示
属性面板 标签选择器
定义站点
Why 避免错误的出现：路径错误，链接错误
需要大家多练习
谢谢大家
width 设置宽度，单位px
size 设置厚度 ，
color 设置颜色 align 设置对齐方式 noshae 设置是否需要阴影
使用列表
wk.baidu.com
创建无序列表 创建有序列表
转换列表类型
三、使用图像
网页中的图像种类
图像的HTML标记 图片与文字的对齐方式 调整图片大小、替换图像、Alt属性 鼠标经过图像（Rollover Image）
大家先了解一下
HTML的基本结构 HTML的基本语法
常用HTML标签
HTML结构
html标签每个文档必须使用，浏览器遇到<html>开始解释，</html>结束解释。 head部分用于对页面中使用的字符集、样式、窗口标题、脚本语言等进行说明和设置。 body部分是文档的主体，包含绝大部分html元素。
二、使用文本
１、设置文本格式 ２、插入特殊符号
３、段落与换行
４、添加注释与空格 5、插入并设置水平线<hr> 6、设置段落缩进<blockquote> 7、使用列表
设置文本格式
标题标签
<h# align=“对齐方式”>内容</h#> #代表字体大小，取值1~6 align属性设置对齐方式，left center right
页创建工具,它采用所见即所得的编辑方式,通过特有的行为,模
板,时间线等技术,能够快速高效地创建极具表现力和动感效果 的网页,使网页创建过程变得简单.
DW设计网页的流程
整个网站的制作流程：在Photoshop或者Fireworks中作出效果 图→切图→在Dreamweaver中添加文字，定义样式。
©(版权号)
段落与换行
段落换行：<p>标记，直接enter键 换行符换行：<br />，shift键+ enter键
添加注释与空格
添加注释
<!--注释内容 -->
添加空格
输入代码
使用中文全角输入法
插入并设置水平线
语法：<hr width=“” size=“” color=“” aligh=“” noshade />
设置颜色
颜色使用一个16进制的数值表示，如#FF0000，“#”是颜色标 志。
任何一种颜色都是由红绿蓝3个颜色通道按不同亮度的比例混
合而成。
前两位代表颜色中红色的亮度
中间两位代表绿色通道的亮度
后面两位代表蓝色的亮度。
插入特殊符号
空格 > (大于号) < (小于号) “ (引号)
> < " ©
HOW
1.建立一个文件夹用于存放网站的所有文件 2.再按栏目分类 (将图片放置在image文件夹中)
3.命名规则：使用英文或者拼音命名
网页文件的后缀名*.htm 或者*.html， 网站首页命名规则index.htm或者default.htm
设置文件头 1、meta标签说明 2、设置网页的编码
字体标签
<font face=“字体类型” size=“字号” color=“颜色”>内容</font>
设置文本格式
字符标签
<b>...</b> <i>...</i> <u>...</u> <strong>...</strong> <big>...</big> <small>...</small> <sup>...</sup>
HTML的基本语法
属性语法
属性的值需要在双引号中 属性名和属性值必须成对出现 属性语法 <标签名 属性名1＝“属性值” 属性名2 ＝“属性值” >内容</标签
名>
Eg. <a href=“http://esf.soufun.com” target=“_blank”>超文本</a>
HTML常用基本标签
HTML的基本语法
标签
HTML通过标签文档的内容和外观，标签就是HTML的命令。
标签以<>开始，以</>结束
<a></a> <div></div> 标签必须是闭合的。大部分成对出现，ex.<br /> <hr />
eg. <table></table>
标签大小写无关。但建议html代码小写
简单的图文混排
网页中的图像种类
BMP（格式简单、图像信息丰富、不压缩） GIF（压缩比高、动画、像素图qq、256色）
JPEG（压缩率极高、有损压缩、照片）
PNG（透明显示、兼有gif和jpeg的色彩模式） 参考文献 web图像格式简述
图像的HTML标记
<img src=“路径” alt=“替代文字” width=“” height=“” align=“”>
设置网页的编码
设置文档标题
<title>+++我的个人主页+++</title>
定义关键字
多个关键字用逗号分隔开
来。
输入的关键字能反映专题 的内容
关键字不宜太多，一般在
5个以内。
<meta name=“keywords” content=“个人主页，网页设计" />
设置说明文字
说明文字和关键字一样， 可供搜索引擎寻找网页。
expires
pragma与no-cache
用于网页缓存过期时间，一旦网页过期将服务
器上重新下载页面 用于定义页面缓存。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
说明
粗体 斜体 对文本加下划线 对文本加强效果，相当于粗体 在当前文字大小的基础上再增大一级 在当前文字大小的基础上再减小一级 上标
<sub>...</sub>
<em>...</em>
下标
强调文本，通常以斜体显示
设置文本格式
文本属性设置窗口
Dreamweaver 8
Dreamweaver CS4
内容尽量要简明扼要。
<meta name=“description” content=“搜房网是中国最大的房地产家居网络 平台,提供全面及时的房地产新闻资讯内容" />
设置网页的刷新
打开网站后的若干秒内，让 浏览器自动跳转到一个新网 页。 用于需要经常需要刷新的网 页。
注意URL的输入
<meta http-equiv="refresh" content=“3;URL=http://www.zjut.edu.cn" />
3、设置文档标题
4、定义关键字
5、设置说明文字
6、设置网页的刷新
meta标签说明
属性名 值 说明
keywords
name description robots
定义网页的关键词
提供网页的简短描述 定义网页的搜索引擎索引方式
Content-type
http-equiv refresh
定义用户的浏览器或相关设备如何显示将要加
<meta name="keywords" content="网页设计，设计" />
设置网页的编码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
设置网页的编码
在所有情况下都用 GB2312么？
设置网页的编码
meta标签
在网页的HTML源代码中一个重要的代码“”（即通常所说的META标签）。
META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键 词、页面刷新等。
文本标签 <h#> <font>
分隔标签 <p> <br> 列表标签 超链接标签 图像标签 <hr>
DW基本内容
Dreamweaver基本介绍 定义站点
设置文件头
使用文本 使用图像 使用Flash动画 使用音频
使用视频
About Dreamweaver
Dreamweaver是一款专业的 HTML 编辑器，用于对 Web 站点、
Web 页和 Web应用程序进行设计、编码和开发。 Dreamweaver是Adobe(Macromedia)公司出品的一种专业化的网
DW网站制作流程
新建站点→站点文件命名→定义页面属性→插入表格→定义 页面大小→转换到布局视图→添加内容→插入导航条→转换
到标准视图工作→添加链接→使用代码片断→定义及应用
CSS→添加动态交互→链接站点各个页面。
DW界面介绍
视图切换
代码提示
属性面板 标签选择器
定义站点
Why 避免错误的出现：路径错误，链接错误
需要大家多练习
谢谢大家
width 设置宽度，单位px
size 设置厚度 ，
color 设置颜色 align 设置对齐方式 noshae 设置是否需要阴影
使用列表
wk.baidu.com
创建无序列表 创建有序列表
转换列表类型
三、使用图像
网页中的图像种类
图像的HTML标记 图片与文字的对齐方式 调整图片大小、替换图像、Alt属性 鼠标经过图像（Rollover Image）
大家先了解一下
HTML的基本结构 HTML的基本语法
常用HTML标签
HTML结构
html标签每个文档必须使用，浏览器遇到<html>开始解释，</html>结束解释。 head部分用于对页面中使用的字符集、样式、窗口标题、脚本语言等进行说明和设置。 body部分是文档的主体，包含绝大部分html元素。
二、使用文本
１、设置文本格式 ２、插入特殊符号
３、段落与换行
４、添加注释与空格 5、插入并设置水平线<hr> 6、设置段落缩进<blockquote> 7、使用列表
设置文本格式
标题标签
<h# align=“对齐方式”>内容</h#> #代表字体大小，取值1~6 align属性设置对齐方式，left center right
页创建工具,它采用所见即所得的编辑方式,通过特有的行为,模
板,时间线等技术,能够快速高效地创建极具表现力和动感效果 的网页,使网页创建过程变得简单.
DW设计网页的流程
整个网站的制作流程：在Photoshop或者Fireworks中作出效果 图→切图→在Dreamweaver中添加文字，定义样式。
©(版权号)
段落与换行
段落换行：<p>标记，直接enter键 换行符换行：<br />，shift键+ enter键
添加注释与空格
添加注释
<!--注释内容 -->
添加空格
输入代码
使用中文全角输入法
插入并设置水平线
语法：<hr width=“” size=“” color=“” aligh=“” noshade />
设置颜色
颜色使用一个16进制的数值表示，如#FF0000，“#”是颜色标 志。
任何一种颜色都是由红绿蓝3个颜色通道按不同亮度的比例混
合而成。
前两位代表颜色中红色的亮度
中间两位代表绿色通道的亮度
后面两位代表蓝色的亮度。
插入特殊符号
空格 > (大于号) < (小于号) “ (引号)
> < " ©
HOW
1.建立一个文件夹用于存放网站的所有文件 2.再按栏目分类 (将图片放置在image文件夹中)
3.命名规则：使用英文或者拼音命名
网页文件的后缀名*.htm 或者*.html， 网站首页命名规则index.htm或者default.htm
设置文件头 1、meta标签说明 2、设置网页的编码
字体标签
<font face=“字体类型” size=“字号” color=“颜色”>内容</font>
设置文本格式
字符标签
<b>...</b> <i>...</i> <u>...</u> <strong>...</strong> <big>...</big> <small>...</small> <sup>...</sup>
HTML的基本语法
属性语法
属性的值需要在双引号中 属性名和属性值必须成对出现 属性语法 <标签名 属性名1＝“属性值” 属性名2 ＝“属性值” >内容</标签
名>
Eg. <a href=“http://esf.soufun.com” target=“_blank”>超文本</a>
HTML常用基本标签
HTML的基本语法
标签
HTML通过标签文档的内容和外观，标签就是HTML的命令。
标签以<>开始，以</>结束
<a></a> <div></div> 标签必须是闭合的。大部分成对出现，ex.<br /> <hr />
eg. <table></table>
标签大小写无关。但建议html代码小写
简单的图文混排
网页中的图像种类
BMP（格式简单、图像信息丰富、不压缩） GIF（压缩比高、动画、像素图qq、256色）
JPEG（压缩率极高、有损压缩、照片）
PNG（透明显示、兼有gif和jpeg的色彩模式） 参考文献 web图像格式简述
图像的HTML标记
<img src=“路径” alt=“替代文字” width=“” height=“” align=“”>
设置网页的编码
设置文档标题
<title>+++我的个人主页+++</title>
定义关键字
多个关键字用逗号分隔开
来。
输入的关键字能反映专题 的内容
关键字不宜太多，一般在
5个以内。
<meta name=“keywords” content=“个人主页，网页设计" />
设置说明文字
说明文字和关键字一样， 可供搜索引擎寻找网页。