dream weaver网页设计
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
父级元素 APDIV
position: relative; position:absolute;
PNG 网页图像文件格式 GIF JPG GIF动画图像
【插入】→【图像】 【插入】（常用）面板→单击【图像】按钮
【选择图像源文件】
修改图像大小 设置图像属 性 图像的对齐方式（P66） 为图像添加替换文本
插入图像点位符 插入鼠标经过图像
插入多媒体
【插入】
插入Flash 插入Shockwave动画 插入FlashPaper 插入Flv
复合内容 通用选择符
a:link 超级链接的默认样式
伪类
a:visited 访问过的链接样式 a:hover 鼠标经过的链接样式
属性值
* {backgroundcolor: #0C6;}
a:active 鼠标按下的链接样式
创建CSS样式
【格式】 【新建】 【CSS样式】 【新建CSS规 则】对话框 点击【新建】按钮 【CSS样式面板】
链接代码是：<a href="mailto:abc@">
【插入】→【电子邮件链接】
【插入】 【属性】面板输入 【命名锚记】 【命名锚记】对话框 键入该锚记的名称 链接到锚记名称 mailto:abc@
图像热区链接设置
同一张图像上不同区域的超链接。
【属性】面板
热点工具
画出热区
Div
可定义文档中的分区或节（division/section） <div> 是一个块级元素
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head> <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> Web设计者 用户 浏览器
DIV＋CSS布局实例
Head
外框
contain
Nav navigation
(
)
Left_contain
Right_contain
footer
超级链接
超链接是指从一个网页指向一个目标的连接关系。 这个目标可以是另一个网页,也可以是相同网页上 的不同位置，还可以是一个图片，一个电子邮件地
址，一个文件，甚至是一个应用程序等。而在一个
文件夹名、 文件名
采用英文或拼音+数字
要预先将网页素材存放到相应的目录
画出网站地图
S-03
S-05
S-01
主页
导航 链接1 链接1 链接1 链接1
首页设计与布局
S-02 S-04
表格的应用
表格在网页中的作用
整体布局
局部排版
网页元素的定位 显示数据
文字 视频 图片
音频 动画
创建表格
【插入】 【插入】 面板 【表格】 【表格】 按钮
“媒体”
SWF Shockwave FlashPaper Flv
设置属性
插入视频
【插入】
“媒体”
“插件”
<embed> </embed>
添加音频 声音 添加背景音乐
【插入】
“媒体”
“插件”
<embed> </embed>
输入标签代码<bgsound>
Flv
累进式下载视频将 Flash 视频 (FLV) 文件下载到站点访问者 的硬盘上，然后播放。但是，与传统的“下载并播放”视频 传送方法不同，累进式下载允许在下载完成之前就开始播放 视频文件。
APDIV
Absolute Position Division
插入APDIV
【插入】 【布局对象】 【APDIV】
插入面板
【布局对象】
绘制APDIV
DIV标签转换为APDIV
DIV标签
CSS属性
position:absolute; APDIV
多个APDIV对齐
【修改】 【排列顺序】
APDIV父级定位法
图片
视频
Flash
插件
CSS链接
相关程序
图片之类的网页元素文件在非站点目录，生成绝对 路径。网页不能移动到别的电脑上去运行，到别的 电脑上，网页元素因找不到绝对路径而无法显示。
新建站点实质就是给网页和网页元素建立一个共同 的目录（文件夹），网页元素链接使用相对路径。 只要把整个目录拷贝到别的电脑上就可以正常运行。
插入 布局
选择“Iframe”
设定浮动框架 的属性
name
src
class
height
width
scrolling
在浮动框架中显示网页
target=" myframe"
<iframe name="myframe" height="300" width="520" scrolling="auto"> </iframe>
输入文本
输入文本
段落换行(Enter)<P></P>
直接输入文本
手动换行(shift+Enter)<br />
自动换行 输入多个空格（trl+Shift+Spqce） 
复制添加文本
编辑——选择性粘贴——仅文本
插入特殊文本
插入——文本——字符
创建列表
无序列表
<ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul>
网页中用来超链接的对象，可以是一段文本或者是
一个图片。
<a href="网址、链接地址" target="目标" title="说明">被链接内容</a>
超级链接载体
超级链接目标
目标网页显示位置
文本链接 图像链接 图像热区 链接
网页 锚点链接
_blank：超链接的网页 会在另外一个窗口中打 开显示。 _self：超链接的网页会 显示在当前网页的同一 窗口或框架中，这是默 认设置。 _parent：超链接的网页 会显示在父框架或父窗 口中。 _top：超链接的网页会显 示在父窗口中。
内部CSS样式移至外部样式文件
CSS面板 全选CSS规则 右击弹出快捷菜单
移动CSS规则
移至外部样式表对话框
样式表
新建样式表
连接外部样式CSS文件
【格式】 【CSS样式】 【附加样式表】 附加样式表按钮 CSS属性面板
选择附加样式表文件
DW菜单导航介绍
浮动框架
浮动框架
在网页中选定位置
插入浮动框架
电子邮件链接
空链接 文件（包括应用程序） 文件夹
网页链接路径
/imgs/123.jpg 绝对路径 D:/mysite/music/123.mp3
相对路径
“../” 表示向上一级文件夹。 ../../index.htm “/..”表示下一级文件夹
站点根目录相对路径
} }
选择器
ID
（元素的 唯一标识）
<table id=” table_1”>……</table>
#table_1 {color : #f60 ;font-size:14px ; border:1pt #999 solid;}
派生选择符
#ssd table tr td{ }
CSS 规则 构成
属性 声明
空链接设置
空链接也叫无址链接，也就是没有链接对象的链接即是未指派的链接。
<a href="#">
当点击该链接时，页面会默认跳 到网页头部---默认的锚点。
javascript:;
不会出现上面情况
javascript:alert('您点击的是空链接，请返回重新选择！'); 带警告提示的空链接
CSS美化链接
伪类：CSS链接样式
通常简写为： a
a:link a:visited a:hover a:active 初始状态
访问过的状态
鼠标悬停的状态 鼠标点击的状态
设置样式与一般 文字相同
四个伪类可以省略不必要的伪类。如：visited、active. 排列顺序固定（LVHA）: LoVe and HAte 。 否则就会有某些状态的样式失效。 对a标签样式加display:block;或者display:inline-block; 实现成块状属性 ,加宽点击面。
/article/index.htm
创建超级链接
选择超链接的载体（源端点） 链接到目标位置（目标端点）
【插入】
【超级链接】 超级链接对话框
选中超级链接载体
【浏览文件】按钮
文本链接 图像链接
【属性】面板 【指向文件】按钮
鼠标经过 图像链接
图像热区 链接
拖动至目标网页
锚点链接设置
光标定位
电子邮件链接设置
菜单 创建
选择“选择 器类型”
输入“选择 器”名称
保存规则的 位置
【确定】
仅限于 该文档 （内部） 样式表 文件 (外部)
面板 创建
【CSS规则定义】 对话框
【CSS样式】
【窗口】
应用CSS样式
只有选择器为类（Class）时，才需要应用（套用）。 其它类型，是针对于标签或ID，只要名字对应，就直接应用。 选择器为类（Class）时，样式应用（套用）方法
大小 行列
弹出【表格】 对话框
边框 背景
设定表格 基本属性
间距 填充
【确定】 插入表格
表 格 的 基 本 操 作
添加 删除
行
列
单元格
表格的嵌套
在单元格中插入表格
合并 拆分
单元格
DIV＋CSS布局
/css/index.asp div+css网页标准版式布局 div+css模板下载 /layout/index.shtml
全站超链接样式化
a{color:#333;text-decoration:none; } a:hover {color:#CC3300;text-decoration:underline;}
链接内设置类控制超链接样式 <a href=“#” class=“yangshi” >A内控制</a>
a.yangshi{color:#333;text-decoration:none; } a.yangshi:hover {color:#CC3300;text-decoration:und<ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol>
定义列表
<dl> <dt>标题1</dt> <dd>列表项</dd> <dd>列表项</dd> <dt>标题2</dt> <dd>列表项</dd> <dd>列表项</dd> </dl>
插入图像
创建站点
站点名字
【站点】 【新建站点】
是否使用服务器技术（否）
依据对话提示设置 站点属性参数
编辑本地副本
网站建立的位置
如何连接到远程服务器（无）
完成
管理站点 【站点】 【管理站点】
新建 编辑
管理站点对话框
复制
删除 导入 导出
规划站点结构
为站点创建一个根文件夹（根目录）
创建多级子文件夹 语义性
分类存放网页、网页元素
内部 样式表
CSS
外部 样式表
Cascading Style Sheet，通常称为“层叠样式表” 解决内容与表现样式分离的问题
三种样式规则的层叠
类（class）
可应用于任何元素
.red {color : #ff0000;}
CSS 语法
标签 (元素)
单个选择符 群选择符
td { p, td, li{
选择网页元素
在属性面板选定类名
在CSS面板选定类名 【右击】——快捷菜单 【套用】
CSS盒模型
margin-top border-top padding-top padding-right padding-left margin-left border-left border-right margin-right width height padding-bottom border-bottom margin-bottom
链接外父级的css类或ID控制超链接样式
<div class=“yangshi”><a href=“#”>父级控制</a></div>
.yangshi a{color:#333;text-decoration:none; } .yangshi a:hover {color:#CC3300;text-decoration:underline;}
流视频将 Flash 视频内容进行流处理并立即在 Web 页面中播放。若要在 Web 页面中启用流视频，您必须具有对Macromedia Flash Communication Server 的访问权限，这是唯一可对 Flash 视频内容进行流 处理的服务器。
创建站点及网站规划
为何要建立站点？
网页元素并没有真正嵌 入网页，而是以链接方 式来展示在网页中。