DreamWeaver CS4教案
第1章网页设计学前基础1.1 网站和网页的基础知识一、网站类型展示型内容型电子商务型门户型二、网页的概念1．网页的元素：基本元素：文本、图像和超链接其他元素：声音、Flash动画、视频、表格、层、CSS、导航栏、表单、行为、模板2．网页的分类静态网页：指该网页文件里只有HTML标签，没有其他可执行的程序代码。
页面一经制作完成，其内容就不会再变化，静态网页的扩展名一般为.htm。
动态网页：指“具有交互性的页面”，即在网页源代码不变的情况下，网页的内容可根据访问者、访问时间或者访问目的的不同而显示不同的内容，如留言板和聊天室等。
动态网页的扩展名一般为.asp、.jsp、.php、.aspx。
3．动态网页开发工具：ASP、PHP、JSP、1.2 网页的设计构思一、网页的布局通常采用Table+CSS或者DIV+CSS对网页进行布局二、网页的设计原则三、网页大体构思在制作网页之前，首先对网页大体上的设计有个系统的构思，主要包括网页的主题、网页的命名、网站标志、色彩搭配和字体等要素。
1.3 DreamWeaver CS4的工作界面①标题栏②菜单栏③文档编辑区④文档工具栏、标准工具栏、状态栏⑤插入面板⑥属性面板⑦面板组第2章创建和管理站点一、创建本地站点：在本地进行编辑与测试1．创建本地静态站点①为站点起一个名字；②选择【不想使用服务器技术】；③确定文件储存在计算机中的位置：即确定站点根文件夹的位置，站点根文件夹可以与站点名相同，也可以不同。
④在【如何连接到远程服务器】中选择“无”。
2．创建本地动态站点①为站点起一个名字；②选择服务器技术中的一种；③确定文件储存在计算机中的位置：即确定站点根文件夹的位置，站点根文件夹可以与站点名相同，也可以不同。
④选择“管理工具”|“Internet信息服务”，将“主目录”设置为站点的根文件夹二、HTML基础1．Html标签：<元素属性名=值>例:<a href="1.asp">进入</a>大多数Html标签是成对出现的，但<img>、<br>、<hr>只有开始符号。
2．Html文件：扩展名为.html的文件以标签<html>开头，</html>结尾，中间包含两部分：文件头：<head>与</head>之间的部分文件主体：<body>与</body>之间的部分三、设置页面属性第3章规划网页布局3.1 可视化助理3.2 使用表格1．表格的html代码：①一个表格由<table>开始，</table>结束。
②<tr>表示表的一行，一个表有多少行，就有多少个<tr>。
③<td>表示行内的一个单元格，某行有多少个单元格，该行内就有多少个<td>④可将表格第一行的td元素改为th。
2．可以利用表格来设计网页的版面。
3．注意：表格→行→单元格用户只能对单元格操作，包括：在单元格插入表格、表单、另一张网页。
若在一个网页中加入<!--#include file="网页文件"-->时，该网页的扩展名必须为.asp。
4．文档工具栏的【可视化助理】按钮当选中表格时，会显示表格宽度和表格边框。
5．表格的应用①排序表格②导入表格式数据：文本文件->表格③利用表格制作长为400的水平线、垂直线水平线：制作1行1列的表格，设置表格的宽度为400，边框为0；单元格的高度为2，背景色为黑色。
垂直线：制作1行1列的表格，设置表格的宽度为2，边框为0；单元格的高度为400，背景色为黑色。
3.3 使用框架布局网页1．框架集文件的作用：将浏览器分割成若干个小窗口，每个小窗口用于显示一个网页文件。
2．创建框架集和框架①执行“文件/新建”，创建框架网页。
②设置框架和框架集的属性：每个框架对应着一个网页文件。
③执行“文件/保存全部”，保存框架集文件以及各个框架对应的文件。
3．选择框架和框架集在【框架】面板中，单击某个框架的内部，就选中该框架。
单击某个框架集的外边框，就选中该框架集。
4．注意事项①不管选择框架或框架集，【设计】视图总显示框架集文件。
②将插入点放置在框架中，【设计】视图显示该框架对应的网页文件。
第4章插入文本和图像4.1 在网页中插入文本1．基本标签：页面属性标签：<body>段落标签：<p>段内换行标签：<br>水平线标签：<hr>图像：<img>标题标签： <h1>空格字符： 2．插入动态日期<script language="javascript">var today=new Date();//若指定日期为星期天，则today.getDay返回0；//若指定月份为1月，则today.getMonth()返回0。
document.write("日期：",today.getYear(),"-",today.getMonth()+1,"-",today.getDate(),"<br>"); document.write("时间：",today.getHours(),":",today.getMinutes(),":",today.getSeconds(),"<br>"); switch (today.getDay()){ case 0: weekday="星期日"; break;case 1: weekday="星期一"; break;case 2: weekday="星期二"; break;case 3: weekday="星期三"; break;case 4: weekday="星期四"; break;case 5: weekday="星期五"; break;case 6: weekday="星期六"; break;}document.write(weekday);</script>3．表示颜色有三种方式：英文单词、十六进制、RGB函数，例：Red，#FF0000，RGB(255,0,0)均表示红色。
4.2 项目列表与编号列表若把每个段落作为一个列表项，则把<p></p>改写成<li>与</li>即可。
1．项目列表：使用ul元素定义，例：<ul><li>解放思想</li><li>实事求是</li><li>与时俱进</li></ul>2．编号列表：使用ol元素定义，例：<ol><li>解放思想</li><li>实事求是</li><li>与时俱进</li></ol>3．创建多级列表①选取列表项目文字，生成第一级列表。
②选取次级项目文字，单击【文本缩进】按钮，生成次级列表。
4.3 在网页中插入图像1．图像的格式①网页中图像的格式可以是：GIF、JPEG、BMP、PNG；一般采用GIF、JPEG。
② GIF格式最多只能256色，图像文件短小，下载速度快；③同一图像的GIF格式最小，JPG次之，Bmp格式最大（可使用ACDSee转换）。
2. 制作图文混排效果将图像的对齐方式设置为“左对齐”和“右对齐”，再设置图像的垂直边距与水平边距。
3．插入鼠标经过图像：当鼠标经过图像时，图像会发生相应的改变4. 插入图像占位符5. 插入导航条：由多个文本超链接或多个图像超链接组成制作由多个图像超链接组成的导航条，也可使用【导航条】命令。
第6章使用CSS样式美化6．1 CSS样式表概述一、CSS样式表的作用CSS真正实现了网页内容和格式定义的分离，通过修改CSS样式表文件就可以修改整个站点的风格。
二、样式表（CSS）类型内部（嵌入式）样式表外部样式表1．嵌入式样式表：①进入某个网页，打开“CSS样式”面板,在“新建CSS规则”对话框中，选择仅对该文档。
②语法格式：<style><!--选择器{样式表定义}：选择器{样式表定义}--></style>③ CSS注释方式：/*……*/，不能用//④每个样式表可包含3类选择器：标签、类名、ID名。
⑤在Dreamweaver CS4中，新建CSS规则，就是新建一个选择器。
2．外部样式表：①特点：独立存在于.CSS文件中，让多个网页共享的样式表。
②创建.CSS文件：Ⅰ.打开“CSS样式”面板,在“新建CSS规则”对话框中，创建一个“选择器”，并选择“新建样式表文件”。
Ⅱ.进入该样式表文件，在其中创建其它“选择器”，选择“仅对该文档”。
③把.CSS文件应用到网页中。
进入某一个网页→打开【CSS样式】面板，选择“附加样式表”。
三、具有复合内容的选择器1．定义指定范围内的元素规则：在元素名称中间用空格隔开。
例如，定义单元格内的水平线为红色。
2．同时定义多个选择器：多个选择器可以共用一个样式表定义，例：td,.c01,#chen{font-size:12pt;font-family:宋体}四、选择器定义方法1．设置类型参数行高：可为网页设置行间距修饰：可去掉超链接的下划线2．设置背景参数背景图像：可为网页设置背景图像附件：可使背景图像不随内容滚动重复：决定背景图像的重复显示方式设置区块参数：设置文字段落的文字间距、对齐方式、首行缩进。
设置边框参数：可设置每条边的宽度、颜色及样式。
设置列表参数：可重新定义项目列表的符号、编号列表的编号。
设置扩展参数：可控制鼠标的形状、以及对文字或图片作特效处理。
第5章制作精美的网页一、插入导航条由多个文本超链接或多个图像超链接组成制作由多个图像超链接组成的导航条，也可使用【导航条】命令二、插入Flash动画1．Flash文件格式fla格式：Flash源文件，可以在Flash中打开和编辑的文件。
swf格式：fla文件发布后的格式，称为播放文件，可以由Flash播放器播放。
exe格式：fla文件发布后的格式，可直接在Windows环境下运行。
第2篇 Dreamweaver CS4 网页制作课件
高等职业教育“十二五”规划教材
the end
高等职业教育“十二五”规划教材 （2） 安装过程
1）图2-5 输入序列号
2）图2-6 协议许可
高等职业教育“十二五”规划教材
3）图2-7 选择安装选项
4）图2-8 安装进行中
高等职业教育“十二五”规划教材
5）图2-9 安装成功
高等职业教育“十二五”规划教材 （3）案例 Dreamweaver CS4工作窗口 本案例将介绍Dreamweaver CS4的工作环境中各窗口的作用。
高等职业教育“十二五”规划教材
第2篇 Dreamweaver CS4
第2章 初识Dreamweaver CS4
教学目标 通过本章学习，掌握Dreamweaver CS4的最新功能，了解安装最新 版本软件对系统的要求，并能完成软件的安装和设置。熟悉 Dreamweaver的工作环境，如文档窗口、插入面板、属性面板和浮动面 板。掌握文档的常见操作，如命名、设置标题、切换视图模式等。 重点和难点 重点：软件的安装、软件环境的熟悉、自定义工具栏和工作面板。
图2-10 设置默认编辑器
高等职业教育“十二五”规划教材
图2-11 启动界面
高等职业教育“十二五”规划教材
图2-12 Dreamweaver CS4操作界面
高等职业教育“十二五”规划教材 （1） 文档窗口 文档窗口也称文档编辑区，如图2-13所示，在此可以进行Web页面的编 辑。
图2-13 文档窗口
高等职业教育“十二五”规划教材
（2） “插入”面板 Dreamweaver CS4将“插入”栏整合成了一个浮动面板，停靠在界
面右侧的浮动面板组中。
图2-16 “常用”“插入”面板
Dreamweaver_CS4_课件与自学教程 6共7
第5章 Dreamweaver与网络课件
1．插入AP Div ．插入 AP元素通常是绝对定位的Div标签，它是分配有绝对位 置的HTML网页元素，在Dreamweaver CS4中可以轻松地创 建AP Div。在网页中插入AP Div的操作比较简单，只需在 【插入】工具栏的【布局】标签中单击 按钮，然后按住
CSS是层叠样式表的简称，它是一组格式设置规则，用 于控制网页内容的外观。使用CSS可以非常灵活地控制页面 的外观，可以控制许多文本属性，如字体、大小、粗体、下 划线、文本阴影等，还可以确保在多个浏览器中以更加一致 的方式处理页面外观。除此之外，CSS还可以控制网页中块 级别元素的格式与定位，这将涉及到DIV标签。DIV标签是 用来定义网页内容中的逻辑区域的标签，使用DIV标签可以 将内容居中、创建列效果、创建不同的颜色区域等，另外还 可以绝对定位，这时的DIV标签视为AP元素。AP Div元素与 以前版本中的图层有一定的相似性，可以用于绝对定位网页 元素。
第5章 Dreamweaver与网络课件
■选择【不能调整大小】复选框时，浏览者在浏览页面 时不能通过拖曳框架边框改变框架大小。 ■ 【边框】：用于设置是否显示框架的边框。选择 “是”选项时，将显示框架的边框；选择“否”选项时，将 隐藏框架的边框；选择“默认”选项时，将显示默认的框架 边框。 ■ 【边框颜色】：用于设置框架边框的颜色。该颜色 将覆盖框架集的边框颜色。 ■ 【边界宽度】：用于设置框架中的内容距框架左右 边界之间的空白宽度。 ■ 【边界高度】：用于设置框架中的内容距框架上下 边界之间的空白宽度。
第5章 Dreamweaver与网络课件
图5-65 【网格设置】子菜单
第5章 Dreamweaver与网络课件
■选择【显示网格】命令，可以在编辑窗口中显示网格。 ■选择【靠齐到网格】命令，可以使要移动的AP Div自 动吸附到网格线上。 ■选择【网格设置】命令，可以打开【网格设置】对话 框，如图5-66所示。在该对话框中可以设置网格线的颜色、 网格线的间隔大小以及网格线的显示方式等选项。
Dreamweaver CS4教程1—4章
Dreamweaver CS4教程一前言Dreamweaver是一个很好的软件它终究会被淘汰淘汰它的可能是更加便捷的模版类软件，虽没变化但快捷硬件的变化也会淘汰它包括：智能终端的兴起平板的兴起，这两者带来的操作系统的改变。
3D立体虚拟投影的兴起佩戴设备的兴起（这两者带来的显示的变化）（介绍一下谷歌眼镜、苹果手表。
牙齿硬盘等）就是浏览器本身的市场争夺都已经白热化（飞行、火狐、库塔等）我们怎么做？100个人取第85位作为基线讲解。
讲述的方式也是最基本的傻瓜型讲解。
（跟着一个有录像的、比较好的教材走）reamweaver、FLASH 以及在 DREAMWEAVER 之后推出的针对专业网页图像设计的 FIREWOR KS，三者被 MACROMEDIA 公司称为 DREAMTEAM(梦之队)，也叫三剑客。
但是，随着互联网飞速的发展，情况有了变化。
主要变化我们会专门讲解，主要是，互联网的移动性越来越强，硬件变化越来越剧烈，引起的软件和格式的变化很剧烈，总之，现在的互联网是一个动荡的世界。
希望大家了解。
前十年，随着HTML 技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，你在所见即所得网页编辑器进行网页制作和在 WORD 中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点——效率低下，慢！Dreamweaver CS4 的界面几乎是做了一次脱胎换骨的改进，从中看到了更多的设计元素，让DW 也稍稍带着点苹果的味道。
这是Adobe 的功劳。
但是：PS是美术人员的设计，DW是工科人的设计，二者不同的思维方式造成了我们学习这个软件的艰难。
讲述理科男的特点。
举买饭的例子，从CS4以后的特点：布局按钮：这个按钮似乎和下方的代码、分割、设计按钮功能重复，目前还不明白DW 的意图，唯一增加的新功能是垂直分割，让代码和设计界面以垂直对比的方式呈现。
dwcs4课程设计
dwcs4课程设计一、课程目标知识目标：1. 学生能掌握DWCS4的基本概念和功能，理解其在网页设计中的应用。
2. 学生能运用DWCS4进行网页布局、文本编辑、图像插入和链接设置等基本操作。
3. 学生了解HTML5和CSS3的基本语法，能够使用DWCS4进行简单的代码编写和修改。
技能目标：1. 学生能够运用DWCS4独立完成一个简单网页的设计与制作。
2. 学生能够运用DWCS4进行基本的网页布局和样式调整，提高网页的美观性和用户体验。
3. 学生能够通过DWCS4对网页进行调试和优化，提高网页的性能。
情感态度价值观目标：1. 培养学生对网页设计兴趣，激发学生创造力和创新能力。
2. 培养学生团队合作意识，学会与他人分享和交流网页设计经验。
3. 培养学生严谨、细致的学习态度，养成良好的编程习惯。
课程性质：本课程为实践性课程，注重培养学生的动手能力和实际操作能力。
学生特点：四年级学生已具备一定的计算机操作基础，对网页设计有一定的好奇心和兴趣，但需进一步培养编程思维和实际操作技能。
教学要求：教师应以学生为主体，采用任务驱动法、案例教学法和分组讨论法，引导学生主动探索、实践和解决问题，确保学生在课程中学有所获，提高网页设计能力。
二、教学内容1. 网页设计基础知识：介绍网页设计的基本概念，如网页、网站、HTML、CSS等，使学生了解网页设计的基本构成和原理。
相关教材章节：第一章 网页设计概述2. DWCS4软件操作：讲解DWCS4软件的基本界面和功能，学会使用软件进行网页设计和制作。
相关教材章节：第二章 DWCS4软件介绍3. 网页布局与排版：学习使用DWCS4进行网页布局，掌握div+css布局方法，了解网页排版的基本原则。
相关教材章节：第三章 网页布局与排版4. 文本编辑与格式设置：学习在DWCS4中对文本进行编辑、格式设置以及段落排版等操作。
相关教材章节：第四章 文本编辑与格式设置5. 图像与多媒体应用：介绍如何在网页中插入图像、音频和视频等多媒体元素，并学会进行相应的样式设置。
DreamweaverCS4教学与自学教程
框，其中显示了用户的设置概要，如图5-14所示。
7) 单击
站点。
按钮，则通过向导建立了一个本地教学
第5章 Dreamweaver与网络课件
图5-14 第五个向导对话框
第5章 Dreamweaver与网络课件
建立了本地站点以后，新建的站点将显示在【文件】面
板中。单击菜单栏中的【窗口】\【文件】命令，或者按下F8 键，可以打开【文件】面板。该面板中显示了本地站点的名 称以及本地站点的文件夹等选项，如图5-15所示。 现在我们已经创建了一个教学站点，不过，目前为止这 个站点还是空的，没有实际内容，因此必须向站点中添加相 关的内容。
第5章 Dreamweaver与网络课件
图5-15 【文件】面板
第5章 Dreamweaver与网络课件
2．添加网页文件与站点文件夹
新建的站点是空白的，其中没有任何内容。根据站点的 规划，需要向其中添加网页文件或站点文件夹。网页文件即 上网时浏览的HTML文件；站点文件夹则用于管理站点内容， 因为站点中会有很多文件，为了有效地管理文件，可以将它 们分门别类地存放在文件夹中，如图像文件夹可以专门用于 存放图像、动画等。
第5章 Dreamweaver与网络课件
图5-4 【文档】工具栏
第5章 Dreamweaver与网络课件
【文档】工具栏中的前三个按钮用于切换视图模式。单
击 按钮可以进入代码视图，这是一个用于编写和编辑 按钮 HTML、JavaScript、服务器语言代码(如ASP或ColdFusion标 记语言)以及其他类型代码的手工编码环境。单击 可以进入代码视图与设计视图，在该视图中，窗口被分成上、 下两部分，顶部窗口用于编写HTML代码，底部窗口用于可 视化编辑网页。单击 按钮可以进入设计视图，这是一 个用于可视化页面布局、可视化编辑和快速应用程序开发的 设计环境。在该视图中，Dreamweaver中显示的文档处于可 视化编辑状态，页面效果类似于在浏览器中查看页面时看到 的内容。
DW教案
《网页设计Dreamweaver CS3》教案二、网页的基本构成要素《网页设计Dreamweaver CS3》教案成修改。
步骤三：创建文件夹。
在站点的根本件夹中可以创建若干子文件夹。
我们要建设一个完整、成功的网站，其中必然要包含很多内容，如：网页文件、图片文件、声音文件、动画文件等等。
为了方便开发者分类管理、维护这些文件，使得站点中各类文件的存放有条理性、结构性，可以通过在站点根文件夹中建立若干子文件夹的形式，对各种类型的文件分类保存管理，如：建立images文件夹来存放图片文件；建立music音文件等等。
当然也可以按照其他方法分类进行保存管理步骤四：创建网页文件。
在站点的根本件夹中创建一个空白页面并命名，本例中重新将网页文件命名为index.html，该名称在站点中一般作为首页的名称。
当然，除了可以直接在站点根文件下创建网页外，还可以在根文件夹中的子文件夹里创建网页。
【知识链接】Dreamweaver简介三、创建站点的必要性Dreamweaver中的站点可组织与网站相关的所有文档，跟踪和维护链接，管理文件，共享文件以及将站点文件传输到Web Dreamweaver 站点根据站点中文件的存放地点，可以分为本地站点和远程站点，本教材中所有项目中所建立站点均为本地站点。
四、首页和网站结构通常所说的网站是由一个或多个网页组成的，而进入网站时首先打开的网页称为首页或主页。
按照行业习惯命名为“index.htm”(“index.html default.htm”(“default.html”)。
本书中站点首页名称一律采用了为。
网站结构图：主页页《网页设计Dreamweaver CS3》教案【项目目标】•能新建并保存网页文件•能掌握普通文本的输入方法、复制、粘贴。
•能设置页面背景•插入图像，图像对齐方式设置。
步骤五：插入特殊字符和日期《网页设计Dreamweaver CS3》教案【项目目标】•能正确插入普通图像•能合理设置图像属性制作要点提示1.创建一个本地站点并且新建一个子文件夹images来管理素材文件2.新建一个网页，保存网页文件，将其命名为“index.html”3.插入一个3行3列的表格4.在每个单元格中分别插入一幅图像5.保存文件，预览最终效果《网页设计Dreamweaver CS3》教案【项目目标】•能正确插入Flash动画•能掌握Flash对象的插入方法•能学会视频的插入•能正确添加背景音乐【项目分析】具体工作任务：1.一个网页，主题为“与青春有约”2.置页面背景，使效果更加完美3.入文字，进行适当的格式化设置4.入Flash动画，设置对齐方式，放置一个合适位置5.Flash文本，内容为版权信息，设置动态变换方式6.入Flash按钮，设置链接7.置背景音乐8.入视频操作方法：选中要编辑的插件，然后编辑、修改插件属性面板的参数。
Dreamweaver_CS4_课件与自学教程 2共7
框，如图5-13所示。该对话框询问用户如何连接到远程服务 器，这里从下拉列表中选择“无”。
第5章 Dreamweaver与网络课件
图5-12 第三个向导对话框
第5章 Dreamweaver与网络课件
图5-13 第四个向导对话框
第5章 Dreamweaver与网络课件
6) 单击 按钮，进入站点定义向导的第五个对话
框，其中显示了用户的设置概要，如图5-14所示。 7) 单击 站点。 按钮，则通过向导建立了一个本地教学
第5章 Dreamweaver与网络课件
图5-14 第五个向导对话框
第5章 Dreamweaver与网络课件
建立了本地站点以后，新建的站点将显示在【文件】面 板中。单击菜单栏中的【窗口】\【文件】命令，或者按下F8 键，可以打开【文件】面板。该面板中显示了本地站点的名 称以及本地站点的文件夹等选项，如图5-15所示。 现在我们已经创建了一个教学站点，不过，目前为止这 个站点还是空的，没有实际内容，因此必须向站点中添加相 关的内容。
第5章 Dreamweaver与网络课件
●单击 按钮，可以打开【CSS样式】面板。
● 【字体】：用于选择所需的字体。如果字体列表中 没有所需的字体，可以选择列表中的【编辑字体列表】选项， 这时将打开【编辑字体列表】对话框，如图5-22所示。在对 话框的【可用字体】列表框中选择所需的字体后单击 将其添加到【字体列表】中，单击 将出现在【属性】面板的字体列表中。 按钮，
按钮，则该字体
第5章 Dreamweaver与网络课件
图5-22 【编辑字体列表】对话框
第5章 Dreamweaver与网络课件
●【大小】：用于设置文本的字号大小。 ●单击文本颜色块 文本的颜色。 ●单击 斜。 ●分别单击 按钮，可以使光标所在的段落 按钮和 按钮，可以将所选文本加粗和倾 ，在弹出的颜色列表中可以选择
Dreamweaver_CS4_课件与自学教程 4共7
第5章 Dreamweaver与网络课件
■【状态图像】：用于输入一般状态下要显示的图像的
路径和文件名。 ■ 【鼠标经过图像】：用于输入鼠标经过时要显示的 图像的路径和文件名。 ■ 【按下图像】：用于输入按下鼠标时要显示的图像 的路径和文件名。 ■ 【按下时鼠标经过图像】：用于输入单击一般状态
图像后将光标移过时所显示的图像的路径和文件名。
图5-45 【表格】对话框
第5章 Dreamweaver与网络课件
3) 在对话框中进行选项设置。
■【行数】和【列】：用于设置插入表格的行数和列数。 ■ 【表格宽度】：用于设置表格的宽度，选择“像素” 为单位时，表格的宽度为固定像素的宽度；选择“百分比” 为单位时，表格的宽度与浏览器窗口的宽度将保持相同的百 分比。 ■ 【边框粗细】：用于设置表格的边框宽度。
是控制页面整体布局的重要工具。
第5章 Dreamweaver与网络课件
1．插入表格
在网页中插入表格的操作步骤如下： 1) 在网页中要插入表格的位置处定位光标。 2) 在【插入】工具栏中选择【常用】标签，单击其中的 按钮，则弹出【表格】对话框，如图5-45所示。
第5章 Dreamweaver与网络课件
立热点，如图5-38所示。
第5章 Dreamweaver与网络课件
图5-38 建立的热区
第5章 Dreamweaver与网络课件
■选择工具 后在图像上拖曳鼠标，可以建立矩形热
点。按住Shift键的同时拖曳鼠标，可以建立正方形热点。
■选择工具
点。
后在图像上拖曳鼠标，可以建立圆形热
■选择工具
多边形热点。 ■选择工具
第5章 Dreamweaver与网络课件
■【单元格边距】：用于设置表格中单元格内的元素距
DW-studty第1章
1.4.1 新建文档
本节从新建文档开始，从头讲解如何一步一步创建文档 ，对于初学者来说，打好基本是学会设计网页的第一步。
1.4.2 编辑页面
（1）将光标移到文档编辑区。 （2）输入一段文字，作为网页的显示内容。 （3）选择第一行文本，并在属性面板中单击按钮，将 这行文本加粗突出显示。
1.4.3 保存文档
1.1 Dreamweaver CS4简介
Dreamweaver CS4 是Adobe公司推出的最新版本的网 页设计软件，用于对WEB站点的页面及程序开发和设计，而 且设计师可以根据自已的使用习惯切换工作环境。
相对于老版本的Dreamweaver，Dreamweaver CS4新 增了许多令人惊喜的新功能。 实时视图。 针对 Ajax 和 JavaScript 框架的代码提示。 相关文件和代码导航器。 Adobe InContext Editing。 全新用户界面新增功能 HTML 数据集新增功能
1.1 Dreamweaver CS4简介
Adobe AIR 创作支持。 FLV 支持。 支持领先技术。 学习最佳做法。 CSS 最佳做法。 Adobe Photoshop智能对象。 HTML 数据集。 全新用户界面。 跨产品集成。 Subversion 集成。 跨平台支持。
1.2 启动Dreamweaver CS4
启动Dreamweaver CS4很简单，和其他软件的启动方 式基本一致。
1.3 Dreamweaver CS4的工作界面
Dreamweaver CS4的界面和以前的版本相比，对界面 几乎是完全颠覆，类似于“苹果” 的界面，操作更简洁。 而且Dreamweaver CS4的工作区非常灵活，用户完成可以 根据自己的习惯来定制。
Dreamweaver_CS4_课件与自学教程 3共7
选项只有在图像建立了超链接时才可用。
第5章 Dreamweaver与网络课件
●【原始】：用于显示图像被载入之前预先载入的低品
质图像的URL地址，以便缩短用户的等待时间。 ● 【边框】：在其后面的文本框中输入数值，可以为 图像添加相应宽度的边框。取值为0时图像没有边框。另外， 其右侧的按钮可以对图像裁剪、重新取样、调整亮度/对比度、 锐化等。 ● 【对齐】：用于设置图像与其周围对象之间的对齐
6) 在【属性】面板的【格式】列表中选择“标题2”选
项，设置网页的标题。然后切换到CSS属性面板，单击居中
对齐按钮，设置文字居中对齐 ，结果如图5-26所示。
7) 将光标定位在标题文字后面，在【插入】工具栏的
【常用】标签中单击 如图5-27所示。 按钮，在页面中插入一条水平线，
第5章 Dreamweaver与网络课件
第5章 Dreamweaver与网络课件
图5-23 【页面属性】对话框(1)
第5章 Dreamweaver与网络课件
3) 单击【背景图像】文本框右侧的 按钮，选择
一幅图片作为网页背景，然后切换到【标题/编码】分类，在
【标题】文本框中输入“唐诗欣赏”作为网页的标题栏文字，
如图5-24所示。
4) 单击对话框中的
第5章 Dreamweaver与网络课件
1．插入图像
在网页中插入图像时有两种情况：一种情况是图像已经 规划在站点中；另一种情况是图像位于站点之外。如果在建 站前期没有将图像规划在站点之内，插入图像时将弹出一个 提示框，如图5-29所示，提示用户将图像复制到站点中。 插入图像的操作比较简单，只要单击菜单栏中的【插入】 \【图像】命令，或者在【插入】工具栏的【常用】标签中单
按钮，则将所选图像插入到网页中，如图