当前位置:文档之家› 使用DW制作简单网页

使用DW制作简单网页

前两位代表颜色中红色的亮度 中间两位代表绿色通道的亮度 后面两位代表蓝色的亮度。
2、插入特殊符号
空格 > (大于号) (大于号) < (小于号) (小于号) “ (引号) 引号)
&nbsp; &gt; &lt; &quot; &copy;
©(版权号) 版权号)
3、段落与换行 段落换行:<p>标记,直接enter键 段落换行:<p>标记,直接enter键 换行符换行:<br />,shift键 enter键 换行符换行:<br />,shift键+ enter键
在DW中新建站点 DW中新建站点 完成index.htm页面 完成index.htm页面
网页标题为+++我的个人网站+++ 网页标题为+++我的个人网站+++ 插入图像,输入文字,做链接 使用meta标签,实现自动跳转 使用meta标签,实现自动跳转
完成exapmle.htm页面 完成exapmle.htm页面
DW设计网页的流程 DW设计网页的流程
整个网站的制作流程:在Photoshop或者Fireworks中作出效果 整个网站的制作流程:在Photoshop或者Fireworks中作出效果 图→切图→在Dreamweaver中添加文字,定义样式。 切图→ Dreamweaver中添加文字,定义样式。 DW网站制作流程 DW网站制作流程 新建站点→站点文件命名→定义页面属性→插入表格→ 新建站点→站点文件命名→定义页面属性→插入表格→定义 页面大小→转换到布局视图→添加内容→插入导航条→ 页面大小→转换到布局视图→添加内容→插入导航条→转换 到标准视图工作→添加链接→使用代码片断→ 到标准视图工作→添加链接→使用代码片断→定义及应用 CSS→添加动态交互→ CSS→添加动态交互→链接站点各个页面。
1、设置文本格式 文本属性设置窗口
Dreamweaver 8
Dreamweaver CS4
设置颜色 颜色使用一个16进制的数值表示,如#FF0000, 颜色使用一个16进制的数值表示,如#FF0000,“#”是颜色标 志。 任何一种颜色都是由红绿蓝3 任何一种颜色都是由红绿蓝3个颜色通道按不同亮度的比例混 合而成。
将article.txt中的文字作素材 article.txt中的文字作素材 文字“散文《四季》”使用标题1,居中 文字“散文《四季》”使用标题1,居中 标题目录内容的文字分别使用有序列表,无序列表 春、夏、秋、冬分别实现简单图文混排。
四、使用超链接
超链接的概念 超链接的HTML标记 超链接的HTML标记 超超链接的种类 关于文档路径
<meta name="keywords" content="网页设计,浙江工业大学 /> 网页设计, 网页设计 浙江工业大学"
5、设置说明文字 说明文字和关键字一样, 可供搜索引擎寻找网页。 内容尽量要简明扼要。
<meta name="description" content="wjb的个人站点,网页设计" /> content="wjb的个人站点,网页设计" 的个人站点
6、使用列表 创建无序列表 创建有序列表 转换列表类型
三、使用图像
网页中的图像种类 图像的HTML标记 图像的HTML标记 图片与文字的对齐方式 调整图片大小、替换图像、Alt属性 调整图片大小、替换图像、Alt属性 鼠标经过图像(Rollover Image) 鼠标经过图像(Rollover Image) 简单的图文混排
6、设置网页的刷新 打开网站后的若干秒内,让 浏览器自动跳转到一个新网 页。 用于需要经常需要刷新的网 页。 注意URL的输入 注意URL的输入
<meta http-equiv="refresh" content=“3;URL=" /> httpcontent=“
网页文件的后缀名*.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 用于刷新与跳转(重定向)页面 用于网页缓存过期时间,一旦网页过期将服务 器上重新下载页面 用于定义页面缓存。
<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" />
4、添加注释与空格
添加注释
<!--注释内容 --> <!--注释内容 -->
添加空格
输入代码&nbsp; 输入代码&nbsp; 使用中文全角输入法
5、插入并设置水平线
语法:<hr width=“” size=“” color=“” aligh=“” 语法:<hr width=“” size=“” color=“” aligh=“” noshade /> width 设置宽度,单位px 设置宽度,单位px size 设置厚度 , color 设置颜色 align 设置对齐方式 noshae 设置是否需要阴影
定义站点
Why 避免错误的出现:路径错误,链接错误 HOW
1.建立一个文件夹用于存放网站的所有文件 1.建立一个文件夹用于存放网站的所有文件 2.再按栏目分类 (将图片放置在image文件夹中) 2.再按栏目分类 将图片放置在image文件夹中) 3.命名规则:使用英文或者拼音命名 3.命名规则:使用英文或者拼音命名
二、使用文本
1、设置文本格式 2、插入特殊符号 3、段落与换行 4、添加注释与空格 5、插入并设置水平线<hr> 、插入并设置水平线<hr> 6、设置段落缩进<blockquote> 、设置段落缩进<blockquote> 7、使用列表
1、设置文本格式
标题标签
<h# align=“对齐方式”>内容</h#> align=“对齐方式” 内容</h#> #代表字体大小,取值1~6 代表字体大小,取值1~6 align属性设置对齐方式,left align属性设置对齐方式,left center right
网页中的图像种类
BMP(格式简单、图像信息丰富、不压缩) BMP(格式简单、图像信息丰富、不压缩) GIF(压缩比高、动画、像素图qq、256色) GIF(压缩比高、动画、像素图qq、256色) JPEG(压缩率极高、有损压缩、照片) JPEG(压缩率极高、有损压缩、照片) PNG(透明显示、兼有gif和jpeg的色彩模式) PNG(透明显示、兼有gif和jpeg的色彩模式) 参考文献 web图像格式简述 web图像格式简述
设置网页的编码
在所有情况下都用 GB2312么? 么
设置网页的编码
2、设置网页的编码
3、设置文档标题
<title>+++我的个人主页 <title>+++我的个人主页+++</title> 我的个人主页+++</title>
4、定义关键字 多个关键字用逗号分隔开 来。 输入的关键字能反映主页 的内容 关键字不宜太多,一般在 face=“字体类型” size=“字号” color=“颜色”>内容</font> face=“字体类型” size=“字号” color=“颜色” 内容</font>
1、设置文本格式
字符标签 <b>...</b> <i>...</i> <u>...</u> <strong>...</strong> <big>...</big> <small>...</small> <sup>...</sup> <sub>...</sub> <em>...</em> 说明 粗体 斜体 对文本加下划线 对文本加强效果,相当于粗体 在当前文字大小的基础上再增大一级 在当前文字大小的基础上再减小一级 上标 下标 强调文本,通常以斜体显示
专题三 使用DW制作简单网页 使用DW制作简单网页
学习内容
Dreamweaver基本介绍 Dreamweaver基本介绍 定义站点 设置文件头 使用文本 使用图像 使用Flash动画 使用Flash动画 使用音频 使用视频
About Dreamweaver
相关主题