Dreamweaver MX讲义Word文档下载推荐.docx
- 文档编号:17882960
- 上传时间:2022-12-11
- 格式:DOCX
- 页数:33
- 大小:617.93KB
Dreamweaver MX讲义Word文档下载推荐.docx
《Dreamweaver MX讲义Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《Dreamweaver MX讲义Word文档下载推荐.docx(33页珍藏版)》请在冰豆网上搜索。
图像不仅可以直接表达信息,而且还能起到装饰和美化网页的作用。
在网页里经常使用的图像格式有GIF和JPEG两种。
GIF采用无损压缩的方式,图像没有细节上的损失,并且解压打开的速度非常快。
同时GIF图像还支持透明背景,放在网页中能够和网页背景很好地融合,结合得像一个整体,视觉效果非常协调。
另外,GIF还支持动态效果,使网页效果更为生动。
但GIF最多支持256种颜色,不适合照片、风景画等颜色丰富的素材的压缩。
JPEG使用先进的压缩算法,使文件比GIF格式的图像文件小,因而下载速度更快。
JPEG支持高达1670万种颜色,非常适于存储颜色丰富的画面,如风景画、照片等。
(3)多媒体元素
网页中的多媒体元素有许多种,常用的有三种:
音频、视频和动画。
常用的音频文件格式有声音文件WAV和MIDI音乐文件;
常用的视频格式有RM、AVI、WMV等格式;
常用的动画文件有FLASH动画(SWF格式)和GIF格式。
如果一些多媒体要素要在网页上显示、播放、需要安装相应插件才行。
(4)超链接
超链接是网页中最具特色的功能。
为了实现在网页之间自由地跳转,可以在网页上的文字或图像中加入目标网页或网站的地址,这就生成了一个超链接。
当用户在浏览网页的时候,鼠标经过有超链接的地方时,光标就会变为小手的形状,这时单击鼠标,浏览器就会打开超链接所指向的网页。
超链接使网页与网页、网站与网站之间相互成为一个有机的整体,用户只需点击鼠标就可以轻松地转到所需要浏览的网页上。
(5)脚本语言(Script)
脚本程序使用于扩充网页功能而能在网页上直接解释的程序语言,常用的有显示访问的时间、让文字在屏幕上滚动等。
1.1.2什么是网站
简单地说,网站就是许多相关网页有机结合而形成的一个信息服务中心。
网站的设计者将要提供的内容和服务制作成许多个网页,并且经过组织规划,让网页互相链接,然后把相关的文件存放在Web服务器上。
只要用户连接Internet,就可以使用浏览器访问到这些信息。
这样一个完整的结构就称为“网站”,又常被称为“站点”。
现在的往回走哪不仅可以向用户发布信息,而且还为用户提供各种各样的网络服务,如电子邮件服务、资源下载、域名服务和主页空间服务等。
一个网站一般都有一个首页,常称为主页,指的是用户在浏览器地址栏里输入网址后网站自动打开的默认页面。
而且网站的其他页面都会通过超链接与这个主页相连,这些页面通常称为子页面。
用户要访问感兴趣的子页面,只要单击主页上相应的超链接就可以了。
①首页的主名一般定义为index或Default,如果首页类型是静态网页,那么首页名称一般为index.htm或Default.htm;
如果首页是动态网页类型并是用ASP语言编写的,那么首页名称为index.asp或Default.asp。
②主页是用户访问该网站时第一眼所看到的页面,所以主页的设计至关重要。
主页既要表达出站点的风格、内容、又要美观醒目、吸引用户的注意力。
1.1.3HTML语言简介
HTML是HypertextMarkupLanguage的缩写,意思为“超文本标记语言”。
WWW服务中的网页要让使用不同计算机和操作系统的用户都能浏览,就必须有一套统一的编写标准。
HTML就是用于编写网页的统一的语言规范。
只有采用HTML制作的网页,浏览器才能正确地阅读和运行。
用HTML语言制作网页,一般有两种方法:
一是使用记事本之类的工具,输入HTML标记和网页的内容进行直接编写,然后保存为以html或htm为扩展名的网页文件;
另一种方法是使用可视化的网页制作工具,根据用户的可视化操作自动生成HTML代码,这样可以使用户在不了解HTML语言的情况下也能做出很好的网页。
下面通过Windows操作系统自带的记事本软件来制作一个简单网页,来了解HTML语言的一些基本使用方法,以对组成网页的HTML语言代码有个整体认识。
如果想了解某些网页的源代码,可以在用IE浏览器打开相应网页后,执行“查看”菜单下的“源文件”命令,将可以用记事本软件查看到这个网页的源代码文件。
跟我学:
我的第一个网页
①执行菜单的【开始】【程序】【附件】【记事本】命令。
②将以下代码完整正确地输入到记事本软件中:
<
HTML>
<
HEAD>
title>
欢迎大家光临<
/title>
/HEAD>
BODY>
P>
这是我用记事本编写的第一个网页,
fontsize=”+7”color=”red”>
欢迎光临!
/font>
/P>
/BODY>
/HTML>
③执行菜单的【文件】【另存为】命令。
将对话框中的文件名改为“1.htm”,注意必须加上扩展名.htm.或html,前面的主名可以随意。
然后单击【保存】按钮将文件保存。
④双击打开刚才保存的文件。
现在来分析这段代码,从而学习、了解网页文件中HTML源代码的一些基础知识。
1.标记的写法
HTML语言中所有的标记都要用括号<
>
括起来,如<
,括号中的标记字母不用区别大小写,<
与标记中间不能用空格隔开。
2.标记的类型
Html语言中的标记可以分为两类:
对称标记和单独标记。
对称标记中的HTML标记是对称的,表示方式是:
标记>
内容<
/标记>
。
其中<
称为起始标记,表示某种格式功能的开始,而后面的<
称为结束标记,表示这种格式功能的结束,如:
“上例中的<
这是我用记事本编写的第一个网页<
”。
单独标记中的HTML标记是不成对的,表示方法是:
标记中只有起始标记没有结束标记,如:
BR>
标记的作用是换行,功能相当于Word文档中的回车符。
3.文件标记
(1)从上例可以看出,所有的HTML文件都必须用特定的标记<
起始,表示这是个网页文件,网页内容一直持续到<
标记结束。
(2)网页文件的内容分为两大部分:
Head>
/Head>
对称标记称为头部分,主要包含着和网页文件有关的一些头信息,除了标记<
外,其他内容不会显示在浏览器中:
Body>
/Body>
对称标记称为正文部分,里面的内容会显示在IE浏览器中。
HTML语言的其他标记都必须写在这两大标记中。
(3)网页头部分中的<
对称标记是标题标记,该标记的作用是在浏览器的标题栏中显示网页的标题。
(4)网页正文部分中的<
对称标记是段落标记,该标记的作用是用来划分段落。
在该标记中,可以输入一段文字。
4.标记参数
(1)标记中可以加上参数设定,但参数必须加在起始的标记内,如<
fontsize=”+7”>
(2)如果一个标记中有多个参数要设定,那么用空格隔开参数,如:
fontsize=”+7”color=”red”>
跑马灯效果
基本语法<
marquee>
/marquee>
该语法只适用与在IE浏览器中显示,只能放在<
标记中使用,作用是实现标记中的内容在页面移动的效果。
实例1:
让网页上显示的文字在网页上从右到左滚动。
将以下代码用记事本编辑成2.htm页面:
这是我用记事本编写的第二个网页<
实例2:
让“我会滚动”几个字在网页上从左到右滚动。
将以下代码用记事本编辑成3.htm页面:
这是我用记事本编写的第三个网页<
marqueedirection=right>
我会滚动!
实例3:
让“我会滚动”几个字在网页上来回滚动,并且滚动的宽度是300px。
将以下代码用记事本编辑成4.htm页面:
这是我用记事本编写的第四个网页<
marqueeBehavior=alternatewidth=300>
实例4:
让“我会滚动”几个字在网页中向上滚动,并且滚动的高度是300px,滚动速度是29。
将以下代码用记事本编辑成5.htm页面:
这是我用记事本编写的第五个网页<
marqueedirection=upheight=300scrollamount=29>
2.1DreamweaverMX的工作界面和基本操作
◆掌握DreamweaverMX软件的启动方法
◆熟悉DreamweaverMX软件的界面
◆掌握DreamweaverMX软件的基本操作
2.1.1DreamweaverMX软件的启动
启动DreamweaverMX软件的方法和其他应用软件差不多:
【开始】【程序】【Macromedia】【MacromediaDreamweaverMX】。
(如图2-1所示)第一次启动DreamweaverMX软件,它会让你选择工作界面,共有两种选择,分别适合设计者和代码编写者使用(如图2-2所示)。
图2-1启动DreamweaverMX软件示意图
图2-2DreamweaverMX的工作区设置
切换界面风格的方法:
①在DreamweaverMX的主菜单中选择菜单的【编辑】【首选参数】命令,打开“首选参数”对话框(如图2-3所示)。
②在对话框中的“分类”列表框中选择“常规”选项,然后单击右边的
按钮,再次打开“工作区设置”对话框。
③在对话框中选择要转换的选项,单击
按钮,系统将弹出如图2-4所示的“提示”对话框。
④重新启动DreamweaverMX,操作界面将转换为新的风格。
图2-4“提示对话框”
图2-3“参数选择”的对话框
2.1.2DreamweaverMX软件的工作界面
DreamweaverMX把它所有的功能都集中成在一个个功能面板上,用户除了可以像其他软件一样通过菜单命令操作外,还可以通过MX界面上的各类面板直接进行操作。
●菜单栏:
与其他Windows软件菜单栏一样,集成了DreamweaverMX软件的所有功能。
用户可以在菜单中找到自己所需要的命令。
●工具栏:
放置常用的工具,主要实现网页“编辑窗口”视图的切换、标题修改等功能。
●
:
称为“代码”视图。
单击这个工具,“网页编辑窗口”将以源代码方式显示。
称为“设计”视图。
“网页编辑窗口”默认显示方式。
在这种方式下,用户可以直接看到网页编辑效果,而且网页编辑排版的最终效果与最终浏览器显示的效果一致,即常说的“所见即所得”。
称为“代码和设计”视图。
“网页编辑窗口”将分成上下两部分,上半部分显示网页源代码,下半部分以最终效果方式显示。
●对象面板:
由于该面板的主要功能是提供各类对象以供用户方便插入到网页中,所以又称为“插入面板”。
用户只要直接单击面板上相应的文字可以打开相应种类的标签,然后从中选取自己所需要的对象。
●网页编辑窗口:
这是设计网页的主窗口。
在该窗口中,用户可以对各种网页元素进行编辑和排版。
●属性面板:
用于调整编辑窗口中被选中的各种元素属性。
值得注意的是被选中的元素类型不同,面板上的属性也会相应变化。
●其他各功能面板组:
包括了在编辑网页时所需要的一些特定功能,如设计、代码、应用程序、文件等,以方便用户使用。
2.2.站点的建立与规划
◆掌握建立站点的一般步骤
◆掌握如何对站点进行管理
用户设计的网页和相关素材,一般都要求放在同一个文件夹内,这样方便对网站进行维护和管理,特别是将网站发布到服务器上时,这点尤其重要。
我们建立站点的目的也在于此。
因此,用户在用Dreamweaver软件设计制作网页之前,应先将站点建立好,同时将做好的网页全都保存在这一个站点内。
DreamweaverMX软件的站点管理器的功能非常强大,通过它,用户对站点的管理将会非常方便。
下面讲解站点管理器的功能。
2.2.1站点的建立
创建站点,其实就是绑定一个文件夹。
通过站点的相关功能,不仅可以常见空白网页和创建各网页之间的相互关系,而且与网页相关的素材都会自动放到这个文件夹中。
接下来用一个实例来阐述如何建立一个站点。
我的家园网站的建立
①执行菜单的【站点】【管理站点】命令或者在右侧“文件”功能面板中选择“管理站点”,会出现如图2-4所示的安装向导。
图2-4站点定义向导1
②如图2-4所示,在文本框中输入网站的名称,以便在Dreamweaver中识别站点。
站点名称可以是任何名称,用户可以随意取。
这里输入“我的家园”,然后点击
进入下一步向导,如图2-5所示。
图2-5站点定义向导2
③当站点定义向导2的功能是询问“您是否要使用服务器技术”,选择【否】,表示目前该站点是一个静态站点,没有动态页。
选择【是】,则需要进一步选择动态网页类型。
这里,我们制作的网站是一个静态网站,所以选择【否】,然后单击
④站点定义向导3主要实现两个功能:
第一个功能是指网页存放的处理方式:
编辑我的计算机上的本地副本,完成后再上传到服务器(推荐):
适合在不连接网络、单机、还没申请WWW服务或网络状态不好的情况下编辑、制作网站。
使用本地网络直接在服务器上进行编辑:
适合网络状态很好、网速很快的情况下远程修改、制作网站,从而保证网站上的内容实时更新。
第二个功能是在文本框内指定站点所指向的位置,即指定“我的网站的网页存放在本地人盘的哪个文件夹内?
默认的文件夹一般都是指向“我的文档”内,并建立一个以上一步向导指定的网站名称命名的文件夹,如图2-6所示。
也可以在文本框中输入其他文件夹路径来重新修改网站文件夹的位置,或者单击文本框右边的
来选择其他的文件夹。
指定的文件夹就是你所建立的网站的根文件夹,注意必须是本地盘的文件夹。
完成后点击
进入下一个向导。
⑤站点定义向导4是询问你如何连接到远程服务器,如果没有远程服务器,这里可以选择“无”(如图2-7所示),再单击
进入站点定义向导5,出现如图2-8所示的设置概要。
单击
完成站点的设置。
至此,“我的家园”网站的站点已建立,在“站点”面板上会显示站点中所有的文件和文件夹。
我们可以通过“站点”面板来新建网页文件和文件夹。
当站点中存放在文件时,就可以像使用资源管理器一样来管理网站的文件,如拷贝、粘贴、删除、移动和打开文件等。
图2-6站点定义向导3
图2-7站点定义向导4
图2-8站点定义向导5
2.2.2站点的管理
网站内所有的文件和文件夹都会显示在站点管理器内。
所有文件都会放在为网站定义的目录中,这个目录就是网站根目录。
而且一个网站建立好后,下次启动DreamweaverMX时会自动打开这个网站,用户所创建的每一个文件都会保存在这个网站内。
通过站点管理器,可以实现网站的大部分功能。
下面就用站点管理器来管理网站。
修改站点信息
①执行菜单【站点】【管理站点】命令,出现如图2-9所示的“管理站点”对话框,选择右边的“编辑”命令。
②弹出如图2-10所示的“高级选项”对话框,在对话框的左边选择相应的选项,右边就会出现相应的信息。
修改好后单击
保存设置。
图2-9“管理站点”对话框
图2-10站点的高级选项
③在“站点名称”文本框中重新定义站点的名称。
④在“本地根文件夹”文本框中重新定义站点的路径,或单击右侧的
图标,重新选择根文件夹。
2.2.3创建网站的文件和文件夹
上面建的站点就像一个空空的大房子,没有隔间,也没有家具。
下面学习如何在网站中建立网页文件和文件夹。
建立文件夹的目的是方便对文件进行分类管理。
在DreamweaverMX中创建网页的方法主要有两种:
一种是传统的通过文件菜单创建网页文件。
执行菜单的【文件】【新建】命令,或用快捷键【Ctrl】+【N】,便可以打开“新建文档”对话框,如图2-11所示。
图2-11“新建文档”对话框
“新建文档”对话框包括“常规”和“模板”两个选项卡。
通过“常规”选项卡可新建通用的网页,包括基本的HTML网页、动态网页、CSS样式表等DreamweaverMX支持的基本文件类型。
通过“模板”选项卡可以选择模板,并从模板中创建网页。
“常规”选项卡又分为“类型”、“基本页”、“预览”三块内容。
“首选参数”项相当于执行菜单命令“编辑”菜单下的“首选参数”命令,可以进行有关文件类型的设置。
我们只要讲解的是静态网页的制作,因此执行菜单的【类别】【基本页】【HTML】命令,最后单击
按钮就可以创建出网页。
第二种方法是通过站点管理器来新建文件和文件夹。
首先,单击站点管理器右角的
(展开/折叠)按钮将站点管理器展开。
接下来,通过如下实例演示来讲解如何利用站点光力气创建文件和文件夹。
利用站点管理器新建image文件和网页文件
①在站点功能面板上用鼠标右键单击刚才新建的站点,弹出如图2-12所示菜单.选择“新建文件夹”就会在站点文件夹下建立一个新的文件夹,如图2-13所示。
将这个文件夹取名为image,专门用来存放各类图像文件,与网页存放分开,进行分类管理。
图2-12站点的快捷菜单图2-13新建的image文件夹及index.htm
②在站点名称上单击右键,在弹出的快捷菜单中国选择“新建文件”,取名为index.htm,即网站的首页文件,如图2-13所示。
③按照步骤②的方法一次建立网站的其他网页文件:
jianjie.htm(个人简介)、jiaxiang.htm(我的家乡)、xuexiao.htm(我的学校)、banji.htm(我的班级)。
给网站中的网页文件夹命名(包括以后引入的图片、动画文件名),应该用小写英文字母、阿拉伯数字以及符号的组合,不要用中文名称,否则在显示时会出错,因为很多服务器都不支持中文。
此外,文件主名长度要≤8个字符。
2.3网页页面属性的设置
◆了解页面属性的各类选项的设置
◆掌握页面属性中标题、页边距、背景色和背景图的设置方法
网站有自己的各种设置和属性,网页亦如此。
页面的属性设置很简单,在页面的任何一个空白位置单击鼠标右键,然后在快捷菜单上选择“页面属性”,或执行菜单的【修改】【页面属性】命令。
用页面属性给网站首页设置页面标题
步骤如下:
①双击右边站点中的index.htm文件,在“页面编辑窗口”打开index.htm文件。
②执行菜单的【修改】【页面属性】命令,打开页面属性对话框。
③在标题栏中输入“我的个人主页”。
④单击【确定】结束设置,回到编辑窗口。
然后将当前页面保存,按【F12】功能键预览网页,可以看到在IE标题栏上出现“我的个人主页”。
相关代码,可以用
或
视图查看到。
也可以通过编辑区上方的标题框直接给网页输入标题。
用页面属性给网站“个人简介”页面设置背景颜色
默认建立的网页背景色是白色,但可以通过“页面属性”给页面更换背景颜色。
①在编辑区打开jianjie.htm文件,执行菜单的【修改】【页面属性】命令,打开页面属性对话框。
②鼠标单击“背景”边上的颜色拾取器
,弹出取色面板,如图2-14所示。
图2-14颜色拾取器
左上角为选中的颜色,中间为颜色的十六进制代码值。
右边三个按钮中:
第一个按钮的作用是只使用默认颜色(白色);
第二个按钮的作用是单用户在调色盘内找不到想要的颜色时,跳出调色盘,自定义颜色;
点击第三个按钮会弹出子菜单,用于用户选择不用色系的颜色(默认是立方色)。
③用取色器吸取想作为背景色的颜色,一般用浅色,这里设成浅黄色,也可以在右边方框中输入#FFFFCC。
单击【确定】结束设置。
④执行菜单的【文件】【保存】将网页文件保存。
按【F12】键,可以在浏览器中看到被家了背景色的页面。
插入背景色的源代码是:
bodybgcolor=”#FFFFCC”>
/body>
用页面属性给网站“我的家乡”页面设置背景图片
①在编辑区打开jiaxiang.htm文件,执行菜单的【修改】【页面属性】命令,打开页面设置属性对话框。
②单击“背景图像”文本框边上的
,弹出选择图像对话框。
选择所需要的图片,点击【确定】。
如果这张图片不在所建网站的目录中,会弹出如图2-15所示的对话框,点击
,弹出“复制文件到”对话框,将这张图片保存到网站的image文件夹中。
图2-15文件复制提示
③回到“页面属性”对话框,单击【确定】结束设置。
这时可以看到在网页编辑窗口的页面被加上了漂亮的背景图,在执行菜单的【文件】【保存】命令将网页保存。
按【F12】键可以在浏览器中看到被加了背景的页面。
插入背景的源代码为:
backbackground=”image/background,jpg”>
2.4文本格式化
◆熟悉文本设置属性面板的各选项功能
◆熟悉文本设置相
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver MX讲义 MX 讲义
![提示](https://static.bdocx.com/images/bang_tan.gif)