Dreamweaver8学习笔记
更新时间：2024-01-20 20:54:01 阅读量： 教育文库 文档下载
- dreamweaver推荐度：
- 相关推荐
第一课
1、网站的设计流程：规划阶段（网站策划）、设计阶段（页面美工）、实施阶段(网页制作)
2、网页制作过程中若需要保存，最好不要使用中文名，为以后发布更方便；在操作过程中若需要浏览时，最好是点击
，同时选择在哪个浏览器中预览。
3、如果要查看某一个网页的html代码：（菜单栏的）查看?源文件。
第二课
1、制作网站不是从一个网页开始，而是从站点开始。而建立在本地硬盘上的网站，称为本地站点；上传至服务器上的网站被称为远程站点。
2、创建站点：打开Dreamweaver?（窗口右边）文件面版的桌面下拉菜单（
）?管理站点（或
直接点击后面的“管理站点”）?新建?站点?弹出站点建立对话框【如果是新手，选择左上边的“基本”；如果．．．．．．．．．．．．．．．．．．．比较熟练，选择“高级”；（．．．．．．．．．．．）】?基本?站
点名字（最好英文名）?站点地址（网址）【如果建立本地站，则不管它】?下一步?否【如果使用ASP、JSP、PHP等，则选择“是，我想使用服务器技术”】?下一步?一般选择默认的在本地编辑，再上传至服务器?输入网站所存储在本地的位置?下一步?如何连接远程服务器？选择
1
“无”?下一步?完成?返回到最初的对话框，再单击“完成”。此时在面版上出现自己设置的站点，如：
——已经搭建好了一个空的本地站点。
注：“高级”的操作与“基本”的过程一样，但要方便．．．．．．．．．．．．．．．．．．．．．．而快速的多。只是在选择位置的时注意，只能选在已做好的．．．．．．．．．．．．．．．．．．．．．．．．．．网页的那个文件夹为止。其它的都直接选“默认”最后单击．．．．．．．．．．．．．．．．．．．．．．．．．．“完成”，回到初始对话框后，再点“完成”。 ．．．．．．．．．．．．．．．．．．．．．3、规划站点结构的原则： A、用文件夹来保存文档；
B、使用合理的文件名称，首页名称。文件名必须是英文、数字等，不能是中文，这是原则性问题。首页约定定义为：index.html
C、将本地和远程站点设为同样的结构。 4、创建站点文档：添加文件和文件夹。
①建立网站主页：在文件面版右击站点名称?新建文．．．．件?输入文件名：index.html(扩展名可以是html或htm) ?回车。
②建立栏目文件夹：右击站点名称?新建文件夹?输．．．．．入文件夹名称?回车。
③给栏目文件建立文件：右击栏目名称（即那一个文件．．．．夹）?新建文件?输入文件名【（英文或数字） (扩展名
2
可以是html或htm)】?回车。
④如果文件夹或文件建立错误，需要从硬盘上站点存放的位置中的那个文件夹里面去删除；右击根目录建立的文件（夹）都在根目录下面，右击某个栏目建立的文件（夹）就在那个栏目的文件夹下面；在建立文件时，注意后面的文件扩展名。这些新建的文件都是空的文件，直接双击就能打开进行编辑。
⑤必．须．要建．立．的文．件．与文．件．夹．：根目录下的主页（．index.html）；图片文件夹（．images）；各主要栏目文件夹；．．．．．．．．．．．．．．．．．．．．．一般也少不了视频文件夹和音频文件夹，具体视网站内容而定。
5、Html代码的基本结构：头部和主体。
①在头部中
中charset=gb2312是定义页面是简笔中文。（gb2312是国标码）②
之间为主体部分。第三课
1、设定Meta内容：Meta是指Html类网页头部的一些．．．．．．．信息，即
至之间设置的内容。①通用头元素的设置：在“设计”面版内右击?页面属性（Ctrl+J也可直接打开对话框）?（左边分类栏里）标题/编码?进行设置修改。
3
②添加Meta元素：先打开index.html页面，再进行如下操作。
A、添加作者的信息：把网页编辑区选定为“拆分”形．．．．．式，先在代码和设计中间的空白区任意地方单击，此时光标．．．显示在代码的前边?再点击．．．（菜单栏的）插入．．?HTML?文件头标签（H）?Meta（M），在弹出的对话框中“属性”选：名称；值：author(即作者)；内容：可以输入自己的名字（中英文均可）?确定。【（这时在前边便出现一行代码，同时“代码”与“设计”中间便多了一个图标：
，单击此图标，在“设计”窗口下边属性栏中便
出现这个元素的相关信息，可以直接在此修改，回车确定），（浏览网页时，这些信息不会在网页上显示）】
B、添加关键字：前面同添加作者作息一样，只是最后．．．一步：??文件头标签（H）?关键字（K），在弹出的对话框中输入能被其它网页搜索引擎搜索到的关键字，关键字与．．．．关键字之间要用英文半角的逗号隔开（中英文均可）?确定。．．．．．．．．．．．．．．．．
（这时在前边便出现一行代码，同时“代码”与“设计”中间便多了一个图标：
，单击此图标，在“设计”
窗口下边属性栏中便出现关键字的相关信息，可以直接在此修改，回车确定）
4
C、添加说明：方法同添加关键字一样，图标是：．．
，
修改方法同作者信息、关键字一样。添加说明的目的是给搜索引擎提供信息，并且在搜索结果中显示一些信息，填写对网站内容的描述。
D、添加刷新：方法与添加说明一样，图标是：．．
；在
弹出的对话框中输入时间后，选择“刷新此文档”；功能：一是页面自身的刷新，即页面打开后每隔一段时间就自动刷新一次，常用于对页面更新比较快的网站，如具有新闻性的网站。它不需要用户手动刷新，按设置的时间自动刷新。二是到了设置的时间后自动打开新的网址，即在延迟多少秒后，在URL后面输入要打开的网址（最好是把已经打开了的网址复制在里面，如果直接输入www.http://www.wodefanwen.com/之类的是不能打开的，要是http://www.http://www.wodefanwen.com//才能打开）。
E、作者信息、关键字、说明、刷新是网站几个常用的最重要的Meta内容。
2、设定页面的整体属性（快捷键：Ctrl+J）：把光标．．．．．．．定在页面中的任意一个位置（指“设计”面版内），单击（菜单栏的）修改?页面属性
①外观：页面字体、大小（一般常用的是点数或像数）、．．文本颜色、背景颜色、背景图像（开始可以不设定，最后再作调整）、边距等，最后单击确定。
5
②链接：链接字体、大小（字的字号）、链接颜色（默．．认为白色）、变换图像链接（鼠标指在图像上可以更改颜色）、已访问链接（已经访问过后的，鼠标已经点击过后的颜色）、活动链接（正在激活状态，鼠标正在点击时的颜色），下划线样式。
③标题：字体、大小、颜色。 ．．
④标题/编码：见第三课第一节第一部分内容。 ．．．．．⑤跟踪图像：打开图像、透明度设置。 ．．．．
⑥要对Meta和设计内容进行可视化操作，弹出拆分状态下代码和设计中间的图标（
）的方法：
点击“查看”?文件头内容（H）。快捷键是Ctrl+Shift+H。
3、添加文本：（制作文字页面）
①可以直接从其它地方复制好，Ctrl+V再粘贴在设计面版内。
②插入特殊字符：点击菜单栏下边
，选择“文
），
本”?如果没有就点击后面的“字符：其它字符”图标（
如果里面还没有，再继续点击下面最后一个其它字符的图标。
③段落换行：
A、单独击Enter（回车）：段落之间有很大的行距，在代码中的代码是
——段落换行。
6
B、Shift+Enter（上档键和回车键）：段落之间有的行距很小，在代码中的代码是
——紧凑换行。
C、Ctrl+Enter（控制键和回车键）：光标在任意地方，光标将移到文末。
第四课（中途可以Ctrl＋Z撤销）
1、插入图像：浏览器支持的影像格式一般有：Gif、Jpeg、Jpg、Png格式。
①将图片拷贝到站点下，如果没拷贝过去，Dreamweaver会提示拷贝过去。具体操作如下：
A、把鼠标移向要插入图片的地方单击，即光标放在插入图片的位置。
B、点击“插入”?“图像”，快捷键：Ctrl+Alt+I。 C、选择本地图片，单击要选的图片（此时在对话框最下边有：选择的文件不在站点根目录下。）?确定?提示愿意把该文件复制到根文件夹中吗？单击“是”?已打开站点根文件夹，选择存放图片的文件夹（images）?点击“保存”?弹出“图像标签辅助功能属性”对话框，替换文本内输入内容（网页浏览时鼠标停在上面时显示的内容），详细说明暂时不管它?确定。图片便被插入页面内。
②调整图片：一般刚插入的图片在页面中都比较大，要做必要的调整。先单击图片，在下面弹出图片的属性栏。
A、调整图片大小：可以直接修改宽和高，但这样图像
7
缩小没有按照比例缩小，因而常用的方法是单击图片后，直接在图片的右下角往斜上拖，直到合适的大小。可是图片所占的空间大小仍然没有改变，原来是多少K/M，现在仍然是那么多，要改变其空间大小，须点击右边“编辑”后面的“重新取样”图标（也变成了灰色（
），这时图片空间的大小改变，图标颜色）
B、调整对齐方式：单击属性右下角的“对齐”?选择要对齐的方式。同时根据情况设置好图片的边距，即图片与文本之间的距离。
C、图像的编辑：可以点击图片下方的属性栏中的编辑（默认的是Fireworks软件），用本软件中只能调整亮度和对比度(
)、锐化（）、裁剪（）。
D、如果要想Dreamweaver与Photoshop软件等其它外部软件相连，即在Dreamweaver里可以直接打开那些软件进行图片操作：单击要编辑的图片?右击?编辑以?如果有该软件就直接点击该软件，如果没有就点击“浏览”?找到该软件的位置并单击它。
③图文混排时，应使用资源面版（方便快捷）：点击右．．．．边资源（
竖列资源名称：图像（（
），打开资源面版，在其左边有一）、颜色（
）、URLs（
）、Flash
）、
）、Shockwave：冲击波（）、影片（）、脚本（
8
模板（
）、库（）点击某一类图标，在同一站点下的那．．．．．．
一类所有的相关文件全罗列在面版内名称下面【因此，应该先把相关文件复制到站点下，同时配合下面的刷新按钮（
）
使用】，上面是预览图像。在使用时直接将它拖到要插入的．．．．．．．．．．．．．地方。【在使用时：“设计”的编辑区内单击，弹出属性框，．．
在属性框内点击左对齐、右对齐、居中、两端对齐中的任意一个，便在编辑区出现一个虚线表格（不特别设置，此表格在浏览器内浏览时看不见），同时光标也根据设置在表格的左、中或右，这时直接拖动图片或其它文件到该地方就行了，其它再另行设置；文本内容也是先用同样的方法点出虚线框，再粘贴内容。】
④在页面插入其它元素：
A、插入日期：把光标点在需要插入日期的地方再单击插入?日期?选择星期、日期、时间?确定。
B、插入水平线： ?HTML ?水平线?下面属性栏里修改它，如果中途修改就先单击水平线，弹出属性栏再修改。【为水平线设置颜色：单击水平线属性栏右下角的“快速标签编辑器”（
）?在代码最后边（斜杠前面）先输入一
个空格，再输入color=”颜色的英语单词”（如color=”blue”，英语单词必须用半角的引号引起来）】。
C、插入注释：是在源代码里面的操作，用来注释源代
9
码的，它显示为灰白色。把光标点在源代码内需要插入注释的地方再单击插入?注释。
第五课
1、插入Flash动画： ① 插入标准的Flash文件： A、把光标定位在要插入的位置?菜单栏下边的“常用”工具栏（?媒休Flash图标（
）右边的下拉三角形?
）。
B、用资源面版本，用上一节课中图文方式，直接将其文件拖到要插入的地方。
D、插入Flash文件后，像设置图片一样去在下面的属性面版中设置大小、边距等，与图片不一样的是还可以在属性面版中去定义播放的循环方式。
C、操作过程同插入图片是一样的。也要把文件移到当前的站点下（选择文件的对话框下有提示）。
2、Flash按钮：（调试不成功） ．．．．．．．．．．．．．．．．．
A、把光标定在需要插入按钮的空白处。
B、单击菜单栏下边的“常用”工具栏（同插入标准Flash文件第一步）?媒休Flash图标（?
。
C、从弹出的对话框中去选择样式。很多按钮还是动态的，可以从上面的预览中观察到；下面的按钮文本是指显示
10
）右边的下拉三角形
在按钮上面的文字（中文，英文均可），下面可以定义字体和字号，有链接的就设置，后面根据情况自己设定。
D、注意最后设置好保存位置（如站点下多媒体夹）；文件名为*.swf 。 ．．．．．．．．．
3、插入文本：（调试不成功）） ．．Flash．．．．．．．．．．．．．．．
A、先选择文本内容，再像前面操作一样，找到常用工具栏?同插入Flash文件、Flash按钮一样，最后选择
。
B、从对话框中设置好字体初始颜色、鼠标移向字体时的颜色、字体等等?确定。同样可以通过下面的属性栏随时进行修改。
4、Flash图像播放器：
A、把要播放的图片复制到站点目录images里面。 B、单击图像查看器按钮：
a、在工具栏里点Flash元素，再单击图像查看器按钮（
）。
b、单击“插入”?多媒体?图像查看器。 C、弹出“保存Flash元素”对话框，输入文件名（扩展名为 *.swf）?保存?弹出Flash元素面版。
D、在面版里面修改参数：
①把图像URLs（imageURLs）后面的参数删除掉，自己重新定义：单击参数生面的“编辑数组值”按钮
11
（），在对话框中，可
以通过点击上面的“+”、“—”来增加或减少图片，点击后面的文件夹图标来选择图片。选择完了之后，点击“确定”，于是所有被选择的图片均被进入imageURLs后面参数。（此步操作即在选中要查看的图片）
②每张图片后面都默认链接了一个网站，单击删除链接。点击生需要链接时再自己定义。（
）?
，而下面
“_blank”的参数含义是用新网页打开（如没有链接时也删除）。
③添加标题：据情况自定）。
④定义是否自动播放：⑤定义播放是否循环：
?
（内容根
⑥这些定义都根据具体情况而定，其它参数都可以选择默认。
E、关掉对话框，也可以通过下面的属性框修改一些其它参数。存盘，F12查看效果。
5、FlashPaper文件（未调试）：可以将Word、PPT等．．．．．．．．．．．．．．．．．等文件很方便转换为 *.swf 格式，而且之前的排版、格式等都不会受多大的影响，在浏览器页面可以随意放大，缩小，打印等，有利于文档的传播。
12
①安装FlashPaper程序文件。
②将源Word、PPT等文件利用FlashPaper转换为*.swf文件。
③跟前面操作一样，将刚转换成*.swf的Word、PPT等文件插入网页内。
6、插入Java：（未调试成功） ．．．．．．．
①复制一张图片（如*.jpg）和一个Java文档——是一个类文件：*.class（用Java程序编写，被编译后）到站点目录下某个网页（要插入的那个网页）的同一文件夹下，与该网页同级，以便设置路径。
②打开Dreamweaver，定好光标位置： A、单击
（与Flash同一菜单，图标如咖啡杯）
?从弹出的对话框中找到第①步的文件（指类文件，而非图片）
B、点击属性面版定义参数，参数名称为image，参
数的值就是第①步复制的那一张图片（即输入那张图片的文件名，包括扩展名）。
C、改变Java在网页上的图片大小：先打开图片，知道其高度和宽度，根据插入的Java程序内容来设置【如Java文件是倒影，则就可以将图片的宽度不变，高度应在原图高度的基础之上乘以2要少一点，具体可以通过调试来确定，直接在属性栏里面改动】。
13
第六课
1、插入交互图像： (1)翻转图片：
A、准备架子和素材：首先创建好站点，建立好相应的文件和文件夹；其次把所有图片复制到站点下图片文件夹内（images），在复制的图片中，如果有在浏览器中当鼠标经过图片时，需要该图片变亮，则此图片需要两张——一张原始图，一张亮度要高一些（即一张暗，一张亮）；音乐文件复制到音乐文件夹内；文本文件复制到文本文件夹内??。
B、创建网站首页：
①定主好页面属性：【a、（菜单栏的）修改?页面属性。b、直接点击属性栏上的“页面属性”；c、在编辑区右击?页面属性）】；在定义页面属性时，定义好各种状态下的链接颜色及下划线的样式?确定。
②修改好“页面标题”：
③插入图片等内容：在资源面版下?点击图像列表图标（
）?点击刷新按钮（）【或右击?刷新站点列表】
?找到要插入的图像?单击图片并拖入到编辑区相应的地方（可以输入替换文本，也可默认，直接单击确定）?下面的属性栏对图片进行修改设置。（插入的水平线也可以复制、粘贴）
E、创建网站内页（主页）：——鼠标交互图片
14
第①②步同创建网站首页相同，其基本的设置都应相似总体风格要一致。
③单击常用工具栏的图像按钮（弹出“鼠标经过图像”对话框。
a、图像名称：可以默认，不修改。
b、原始图像：默认的那张图片（一般是准备两张一模一样的素材中较暗的那一张）通过“浏览”找到那张图片。
c、鼠标经过图像：鼠标在上方时，鼠标本身会发生变化（较上一步“原始图像”中较亮的那一张图片）?浏览?确定。
d、预载鼠标经过图像：指网页一打开时，两张图片都下载好了（存在本地硬盘上），当鼠标没在图片上时，显示默认的图片；当鼠标移向图片时，显示第二张图片。因此，一般要选择前面的复选框，不用鼠标移向图片时再临时下载，以提高网页图片显示的速度。
e、替换文本：中英文都可以。
f、按下时：前往的URL：没有链接就暂时不设置。 g、点击“确定”后，图片便插入编辑区?通过下面的属性栏进行进一步的设置。
(2)导航条：与上面的“翻转图片”功能相似，最大不同是导航条是同时进行多张图片的交互——翻转图一次只能做一张，导航条一次能做多张。
15
）?，便
A、定义好光标?单击常用工具栏的图像按钮（?
，便弹出“插入导航条”对话框。 a、项目名称：默认的名称可以不调整。 b、状态图像：就是原始图。
）
c、鼠标经过图像：就是刚才原始图一样但亮度较高的图。
d、按下图像：可以自己再另行设置图片加入，方式同上。
e、按下时鼠标经过图像：可以自己再另行设置图片加入，方式同上。
f、替换文本：鼠标移向图片上时显示的文字。 g、按下时，前往的URL：没有链接的可以不设置。 h、插入：多张图片时，是水平方向还是垂直方向排列图片。
g、是否使用表格：默认使用。
i、可以通过上面的“+”、“—”来增加图片，上下箭头来改变图片的顺序。
B、最后单击“确定”后，图片便被插入到编辑区，再点进下面的属性栏进行进一步的设置。
（3）插入图片翻转和导航条部分代码：onclick：鼠标单击时；onmouseover：鼠标上滚；onmouseout：鼠标离开。这些代码是靠脚本实现的，不是默认的Html代码所能完成
16
了，默认的Html代码是建立基本结构。脚本是为了页面的交互性更强，现在的脚本以标记结束。
2、插入音视频：（这里不是指下载，而是指单纯的页面上音视频的一种显示） （1）音频：
A、在编辑区定义好光标?点击常用工具栏Flash这类图标下的插件（
）
B、此时在编辑区内便出现一个音乐播放器图标，便可以在下面的属性栏里修改设置，也可以直接在编辑区里拖动，再存盘后按F12预览，直到调整到合适大小。
（2）视频：（测试成功） ．．．．．．．．．．．．
方法同插入音频的方法完全相同，也是通过插件来完．．．．．．．．．．．．．．．．．．．．．．．成。 ．．
（3）插入音视频部分代码：
音频：，在插入Flash视频时也有此标记。在插入的音乐中，如果想在网页打开时就自动播放，在此源代码已设置好的高度后面：先输入一个空格，再输入aotostart=”true”；反之如果不想网页打开后就自动播放音乐，在输入空格后，就输入autostart=”false”。
第七课
17
1、插入滚动文字：(通过Html代码来实现) ①滚动文字：
A、把光标定义在可视化设计中要滚动的文字的左边(即前边)，这时再看源代码，光标也在相应文字的左侧。
B、直接输入：。即：
C、设置滚动文字的方向，速度等属性各参数详解：
a、进入内部。在Html代码内部添加属性参数时，必须要加上一个空格。
b、滚动的速度：scrollAmount。值越大速度越快。建议设为1～3比较好。
c、滚动的区域大小：width和height。width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。
d、滚动的方向：direction。默认为从右向左：←。可选的值有right、down、up。滚动方向分别为：right表示→，up表示↑，down表示↓。
e、scrollDelay：这也是用来控制速度的，不添加，即默认为90。值越大，速度越慢。通常scrollDelay是不需要设置的。
18
f、控制属性：behavior。默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动) 如实例：
正在阅读：
Dreamweaver8学习笔记01-20
管理学原理习题集及答案109-11
科技节开幕式作文400字06-23
移动通信光缆线路工程施工技术标准和要求05-27
2011年高考北京卷标杆作文08-10
今日基督徒普遍的可怜的光景01-26
工艺工程师试题02-01
北师大版小学三年级下册单元练习题汇总10-26
- exercise2
- 铅锌矿详查地质设计 - 图文
- 厨余垃圾、餐厨垃圾堆肥系统设计方案
- 陈明珠开题报告
- 化工原理精选例题
- 政府形象宣传册营销案例
- 小学一至三年级语文阅读专项练习题
- 2014.民诉 期末考试 复习题
- 巅峰智业 - 做好顶层设计对建设城市的重要意义
- （三起）冀教版三年级英语上册Unit4 Lesson24练习题及答案
- 2017年实心轮胎现状及发展趋势分析（目录）
- 基于GIS的农用地定级技术研究定稿
- 2017-2022年中国医疗保健市场调查与市场前景预测报告（目录） - 图文
- 作业
- OFDM技术仿真（MATLAB代码） - 图文
- Android工程师笔试题及答案
- 生命密码联合密码
- 空间地上权若干法律问题探究
- 江苏学业水平测试《机械基础》模拟试题
- 选课走班实施方案
- Dreamweaver8
- 笔记
- 学习
- 量化管理实施细则
- 《有趣的浮沉现象》教案
- 侵权责任法解析文档
- 福建工程学院CA6136车床采购项目招标文件 - 图文
- WEB编程基础练习题及答案
- 混凝土加气块砌体工程作业指导书 - 图文
- 10、中共浙江省委组织部、浙江省人力资源和社会保障厅《关于事业单位岗位设置管理有关问题的处理意见》
- 2007年法律硕士研究生入学联考民法学测试题
- 2017-2023年中国低聚木糖行业细分市场研究及重点企业深度调查分析报告（目录）
- 柔性制造物流系统软件使用说明书 - 图文
- 农贸市场新建工程实施建设方案
- 《小足球》教学设计
- 国家标准循环链接技术规范高铝粉煤灰提取氧化铝
- 敦煌网考试试题及答案-成交不卖处罚申诉
- 国际城市及机场三字代码
- 许世友将军纪念馆讲解词
- 2008年城市规划师考试城市规划相关知识模拟试题(5)-中大网校
- Dreamweaver考证10套试题
- 2009-2010学年七年级（上）数学期末复习综合水平测试
- 考试：低碳知识与低碳广东—低碳中国