网页设计多媒体之Dreamweaver教程Word下载.docx
- 文档编号:1437135
- 上传时间:2023-04-30
- 格式:DOCX
- 页数:71
- 大小:58.01KB
网页设计多媒体之Dreamweaver教程Word下载.docx
《网页设计多媒体之Dreamweaver教程Word下载.docx》由会员分享,可在线阅读,更多相关《网页设计多媒体之Dreamweaver教程Word下载.docx(71页珍藏版)》请在冰点文库上搜索。
显示代码视图和设计视图,在代码视图中修改后,点击设计视图会立即刷新,在设计视图修改,代码视图会立即刷新。
③设计视图:
显示设计视图。
④标题:
显示在浏览器的标题栏中
⑤浏览错误检查器:
检查代码与浏览器的兼容性
⑥文件管理:
管理文件
⑦预览/调试:
在浏览器中预览或调试网页
⑧刷新设计视图:
在代码视图中修改内容,点此按钮刷新视图。
⑨视图选项:
对代码视图和设计视图进行设置
(3)文档窗口:
显示代码视图、拆分试图、设计视图内容的地方。
(4)面板组:
设置CSS样式、管理文件等
(5)标签选择器:
显示各种标签的地方。
(6)属性检查器:
查看和更改所选对象或文本的各种属性。
3、菜单概述
文件:
包含对文件的各种操作,如新建、打开、保存、导入、导出等
编辑:
包含了对文件的拷贝、粘贴、查找与替换、快捷键、首选参数等命令
查看:
查看文档的相关内容,如代码,显示标尺与网格。
插入:
用于将对象,如图象、表格、表单、超级链接等插入到文档中。
修改:
更改选定页面元素的属性。
文本:
设置文本的格式,如段落格式、字体、颜色等。
命令:
提供对各种命令的访问,如录制、播放、设定网页配色方案。
站点:
用于管理站点以及上传和下载文件,管理站点中可以新建站点和编辑已有站点。
窗口:
提供对Dreamweaver中的所有面板、窗口和检查器的访问。
帮助:
提供了对Dreamweaver文档的访问,如入门和教程,创建DW扩展功能的帮助系统。
4、常用工具栏的使用
①超级链接:
创建一个文本链接,点击时从一个页面跳转到另一个页面。
电子邮件链接:
用来链接电子邮件。
命名锚记:
用来实现网页内容在同一个页面中的跳转。
选中一段文字B,点击命名锚记,给其命名,再选中另一段文字A,在属性下面的链接中输入#锚记名,当点击文字A时,便会跳转到文字B。
②表格:
对文本和图形进行布局,可以在表格中输入文字、插入图片以固定他们在网页中的位置。
图像:
用于在文档窗口中插入图像,插入的图片最好和网页保存在同一个文件夹。
媒体:
在文档窗口中插入Flash影片、Flash按钮等。
日期:
在窗口中插入当前日期。
注释:
用于在html代码中插入描述性文本,文本不会显示在浏览器中。
③模板:
在文档窗口中创建模板,插入重复表格会自动转换为模板。
标签选择器:
选择标签,插入在代码中。
5、布局工具栏的使用
①表格:
插入图片和文字,固定位置
②插入Div标签:
创建布局的内容块
③描绘层:
层可以放在视图中任何一个位置。
④标准模式:
网页在文档中的标准样式
⑤扩展模式:
又称扩展表格模式,可以向临时文档中的所有表格添加单元格、边距和间距。
⑥布局模式:
使用布局表格和布局单元格对页面进行布局,包括布局表格、绘制布局单元格、在上面插入行、在下面插入行、在左边插入列、在右边插入列。
⑦框架:
显示文档的容器,任何一个框架都可以显示任意一个文档,可以插入上下左右的框架。
⑧表格数据:
把另一个应用程序的表格数据导入DW中,并设置为表格的格式。
6、表单工具栏的使用
①表单:
所有表单域对象都必须放在表单中
②文本字段:
接受文本的空白块,可输入文本、字母和数字等信息
隐藏域:
内容不显示在表单上,但传送给服务器。
文本区域:
即多行的文本字段,可输入更多文本,属性中设置宽度、行数等。
③复选框:
一组选项内选择一个或多个选项。
单选按钮:
一组选项内选择一个。
单选按钮组:
一次性插入多个单选按钮。
④列表/菜单:
从一系列选项中选择适当的选项,属性中切换菜单格式或列表格式。
跳转菜单:
设置一个或多个选项,每个选项都指向一个网页。
⑤图像域:
使用图像代替提交按钮的使用。
文件域:
使用户浏览本地计算机中的文件或文件夹。
按钮:
单击按钮时执行标准任务,如提交表单、重制表单等,按钮上的标签可在属性面板中自定义。
⑥标签:
用于设置表单对象辅助功能选项,附加标签标记,使文本和按钮关联起来。
字段集:
为表单增加注释方框。
7、文本工具栏的使用
①字体标签编辑器:
对输入文字的字体、颜色、大小等进行设置。
粗体:
使文字加粗斜体:
使文字倾斜加强:
效果同粗体强调:
效果同斜体
②段落:
对格式统一的文本,在文档窗口每输入一段文字,按回车键,生成一个段落。
块引用:
实现页面文字段落缩排
已编排格式:
称为预格式化,保留文字在源代码中的格式,页面显示的格式与源代码中的相同。
③标题:
分为标题1(一级标题)、标题2(二级标题)、标题3(三级标题),用来强调段落所要表现的内容,标题1字号最大,标题2、标题3次之。
④项目列表、编号列表、列表项
⑤定义列表:
一种两个层次的列表,用于解释名词的定义。
定义术语:
也称名词,定义列表中的第一层次
定义说明:
也称解释,定义列表中的第二层次,一个名词可以有多个解释。
8、HTML工具栏的使用
①水平线:
用于组织信息,分隔文本和对象。
②文件头:
包含在网页代码<
/head>
标记之间,用于定义网页元素基本信息的代码。
③脚本编制:
用于在代码中添加表格标记,制作表格
④框架:
用于在代码中添加框架标记,制作框架。
⑤脚本:
实现一些HTML不能实现的功能
9、Flash元素工具栏
①图像查看器:
设置一个文件名和保存路径,文档中出现一个flash元素,可以调整大小。
imageURLS中添加图片,imageLinks中为每张图片添加一个链接地址,imageCaptions中为图片设置标题。
10、收藏夹工具栏的使用
在工具栏上右键单击选择自定义收藏夹,选择最常用的工具栏和对象,添加到收藏夹中,利用添加分隔符将收藏夹中的对象分组。
这样收藏夹工具栏就有了常用工具。
11、设计面板组的使用
①CSS样式:
可以引用外部样式表附加到文档,也可以创建、编辑和删除CSS样式
②层:
可以改变Z轴数值(数值大的在最顶层)、显示/隐藏层、防止重叠。
12、代码面板组
①代码片断:
提供文本、导航、页眉、页脚等代码可供插入,还可以新建代码片断。
②参考:
可以选择参考书籍、标签,标签中会列出名称、使用方法和实例。
13、标签检查器面板组
(1)属性:
①标签库编辑器中列出了绝大部分各种语言所用到的标签以及属性参数。
②在代码视图中单击标签名称或其内容中的任何地方,可使用标签检查器编辑属性。
在设计视图中选择一个对象,可用属性检查器编辑属性。
③显示类别视图是按类别组织的属性,显示列表视图是按字母排序在列表中显示的属性。
(2)行为
为文档中的对象附加行为,并能够方便的管理和修改这些行为。
有两种显示状态,显示设置事件:
只显示指定的动作;
显示所有事件:
显示所有适用于所选对象的事件。
(3)相关CSS
改变文档中引用CSS样式对象的相关属性。
三、HTML
1、HTML概念
HTML语言是超文本标记语言(HyperTextMarkupLanguage)的缩写,是因特网用于编写网页的主要语言。
2、HTML实例
HTML代码分为三部分:
文件的开始和结束部分、头部内容、主体内容
<
html>
开始
head>
头部内容
title>
标题
/title>
body>
主体内容
/body>
/html>
结束
如:
欢迎光临我的博客<
我的网易博客开张拉,上面一定有你想看的内容,欢迎光临,多多捧场~!
3、HTML头部标记
包含页面基本描述,当前文档的有关信息,如标题、关键字等,不直接显示在网页上
常用的头部标记:
①<
base>
当前文档的url全称(基底网址):
basehref="
"
target="
空白(_B)"
>
②<
basefont>
设定基准的文字字体、字号和颜色
③<
设定显示在浏览器左上方的标题内容:
<
④<
isindex>
表明该文档是一个可用于检索的网关脚本,由服务器自动建立。
⑤<
meta>
有关文档本身的元信息,例如用于查询的关键词,用于获取该文档的有效期等
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
⑥<
style>
设定CSS层叠样式表的内容,在设计面板下的CSS样式中显示。
⑦<
link>
设定外部文件的链接:
linkhref="
⑧<
script>
设定页面中程序脚本的内容。
(1)标题标记<
Title语句的语法是<
标题内容<
,位于html文档头部,即<
和<
之间。
(2)基底网址标记<
单击html工具—文件头—基础,在Href中输入网址,选择打开目标。
例:
父(_P)"
相对路径会附在基底网址中设置的绝对路径后面,如:
p>
ahref="
111.htm"
12345<
/a>
/p>
点击12345,显示的是
绝对路径不受基底网址设定的绝对路径控制,如:
6789<
点击6789,直接显示
(3)基底文字标记<
basefont属性有face(设定字体)、size(设定字号)、color(设定颜色)
basefontface="
汉仪凌波体简"
size="
6"
color="
yellow"
(4)元信息标记<
位于<
之间,只显示在源代码中,一个好的meta标签设计可以提高网站被搜索到的可能性。
[META]:
属性指定名称或http标签信息,值指定属性中名称的信息类型,内容是实际的信息。
例如提供的信息类型是设定作者:
metaname="
author"
kiki"
,其中name是描述网页的,对应于网页内容content,以便于搜索引擎机器人查找、分类。
A:
名称(name)
①关键字(keywords):
是为搜索引擎提供的,关键字不要过多,应切中要害,关键字之间用逗号分隔。
keywords"
博客,网易,惊异传奇,周海媚"
②描述(description):
可以在代码中添加说明语句,用于将网站主题描述清晰。
description"
欢迎光临kikizuo的博客!
③Copyright(版权):
标注版权信息
Copyright"
版权所有,XXXX、摘编、复制或建立镜像"
④Generator(编辑器):
编辑器的说明
用法:
Generator"
你所用的编辑器名称"
⑤revisit-after(重访)
revisit-after"
"
⑥Build(网站建设时间)
举例:
build"
2007-1-10"
⑦Reply-to(记载联系人邮箱)
Reply-to"
kikizuo@"
B:
HTTP标签(HTTP-EQUIV)
类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确的显示网页内容。
①Content-Type:
设定页面使用的字符集,说明主页制作所使用的文字和语言,浏览器会根据此调用相应的字符集显示page内容。
text/html:
设定的文档类型。
charset:
设定语系,即语言编码。
②转场效果:
即网页过渡,是指进入或离开网站时页面具有不同的切换效果
page-enter:
进入网页时的过渡效果。
page-exit:
离开网页时的过渡效果。
duration:
滤镜特效持续时间。
transition:
滤镜类型,表示使用哪种特效,取值为0-23
基本语法:
page-enter"
revealtrans(duration=value,transition=number)"
transition可取以下数值:
0矩形减小1矩形扩大2圆形缩小3圆形扩大4向上擦除5向下擦除6向左擦除7向右擦除
8垂直百叶窗9水平百叶窗10横向棋盘式11纵向棋盘式12溶解13左右向中部收缩
14中部向左右展开15上下向中部收缩16中部向上下展开17阶梯状向左下展开18阶梯状向左上展开
19阶梯状向右下展开20阶梯状向右上展开21随机水平线22随机垂直线23以上随机选择
③Expires(期限)
说明:
指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅。
Expires"
Sun,14Jan200717:
20:
30GMT"
0"
注意:
必须使用GMT时间格式,或直接设为0(数字表示多少时间后过期)
④Pragma(cach模式)
禁止浏览器从本地机的缓存中调阅页面内容
Pragma"
No-cach"
网页不存在缓存中,每次访问都刷新页面。
这样设定,访问者将无法脱机浏览。
⑤Window-target(显示窗口的设定)
强制网页在当前窗口以独立页面显示
Window-target"
_top"
这个属性是用来防止别人在框架里调用你的页面,content选项:
_blank、_top、_self、_parent
[刷新]:
让网页多长时间刷新或多久后自动连接到其他网页。
4、html内部主体标记
之间,常用的有:
①bgcolor设定页面背景颜色
text设定页面文字颜色
②background设定页面背景图像
bgproperties设定页面背景图像为固定
③link设定页面默认的链接颜色
vlink设定访问过后的链接颜色
alink设定鼠标正在单击时的链接颜色
④leftmargin设定页面的左边距
rightmargin设定页面的左边距
topmargin设定页面的上边距
bottommargin设定页面的下边距
设定背景颜色为黑色、文字为白色:
bodybgcolor="
#000000"
text="
#FFFFFF"
设定背景图像固定:
bodybackground="
file:
///D|/图片素材/漫画卡通/情侣壁纸/1.jpg"
bgproperties="
fixed"
设定默认链接颜色为紫色、正在点击时为黄色、访问过后为蓝色:
bodylink="
#9933FF"
alink="
#FFFF00"
vlink="
#3399FF"
设定页面的上边距、左边距为200:
bodytopmargin="
200"
leftmargin="
5、文字包括的内容
之间,主要包括普通文字、空格符号、特殊符号、页面的注释语句
(1)特殊符号
符号一般由三部分组成:
&
(前缀),#8220(对应的名称),;
(后缀)
空格符:
nbsp;
换行符:
br>
左引号:
#8220;
右引号:
#8221;
破折线:
#8212;
英镑符号(£
):
pound;
欧元符号(€):
#8364;
日元符号(¥
yen;
版权(©
copy;
注册商标(®
reg;
商标(™):
#8482;
(2)注释语句
插入注释语句的方法有两种:
comment>
注释语句<
/comment>
;
!
--注释语句-->
6、标题字标记
(1)标题字是指以某种固定的字号显示的文字,在html中一共有6种标记,输入文字后,将光标停留在一行文字末,通过属性面板的格式下拉列表中选择标题,在代码中显示为<
h1>
/h1>
~<
h6>
/h6>
。
(2)从标题1到标题6,文字的大小会递减,在属性面板中单击页面属性—标题,可以修改标题的属性。
(3)标题字标记的对齐(align):
center(居中)、left(左对齐)、right(右对齐)、justify(两端对齐)
h1align="
center"
,<
left"
right"
justify"
7、文字和段落的修饰标记
1)<
b>
粗体标记:
将所选文字加粗
strong>
加强标记:
2)<
em>
斜体标记:
将所选文字倾斜
3)<
s>
删除线标记:
在文字上添加删除线
u>
下划线标记:
为文字添加下划线
4)<
sup>
上标标记:
将文字以小字体显示在另一段文字左上角或右上角
sub>
下标标记:
将文字以小字体显示在另一段文字左下角或右下角
5)<
big>
大字号标记:
将文字加大字号
small>
小字号标记:
将文字减小字号
6)<
font>
字体标记:
改变文字的大小、字体、颜色
fontface="
+6"
#FF6600"
蝴蝶泉边我要的世界<
/font>
7)<
段落标记:
之间的文字就代表一个段落,也可以只用一个<
,用align属性对齐。
palign="
我要我们在一起<
,这里的align有三个:
lefe,center,right
8)<
pre>
预格式化标记:
页面显示的效果和源代码中的一致
9)<
center>
居中对齐标记:
使文字或段落居中对齐
10)<
hr>
水平线标记:
向页面添加水平线,用来分隔段落,可以更改宽度、高度、颜色、对齐方式
宽100、高10,颜色紫色,居中对齐<
hrwidth="
100"
10"
#9900FF"
align="
11)<
kbd>
标记:
提示用户键盘输入的信息,就像注册时旁边的提示信息,通常用固定的宽度显示。
请输入密码,区分大小写。
/kbd>
12)<
var>
表示变量,通常用斜体显示,以便用户对代码的分析。
13)<
address>
用于显示文档中比较重要的信息,如作者的姓名、Email,通常为斜体显示。
14)<
blink>
使文字闪烁,频率为1秒钟一次,不支持IE4.0及更高版本。
15)<
tt>
使文字以标准打字机字体显示。
16)<
plaintext>
:
令后面的标签失去其标示作用,标签渲染效果没了,代码和文字直接显示在浏览器上。
17)<
ruby>
文字上方标注说明标记,被rt标记标示的文字会缩小字号显示在以ruby标记标示的文字上方。
语法为:
被提示的文字<
rt>
说明文字<
/rt>
/ruby>
,如:
Thankyou!
谢谢你<
8、列表的标记
①项目列表,也叫无序列表,是指以圆点、圆圈、方块等开头的没有顺序的列表项目。
项目列表标记:
ul>
/ul>
,列表项标记:
li>
/li>
②编号列表,也叫有序列表,是指按照数字、字母等顺序排列的列表项目。
编号列表标记:
ol>
/ol>
③定义列表,是一种两个层次的列表。
定义列表标记:
dl>
/dl>
,定义术语标记:
dt>
/dt>
,定义说明标记:
dd>
/dd>
(1)有序列表
即编号列表,基本语法为:
文字<
,属性有2个:
①type,可以设置数字、小写字母、
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 多媒体 Dreamweaver 教程