Dreamweaver CS5自学教程-第二课：制作网页的基本操作

合集下载

第二章 DWCS5基本操作

15
在设计页面时需要设置页面元素的位置或对齐页面元素，Dreamweaver CS5提供了“标尺”和“网格”功能。选择“查看”|“标尺”|“显示”命令，可以在文档中显示“标尺”，选择“查看”|“网格”|“显示网格”命令，可以在网页文档中显示网格，如图所示。重复操作，可以隐藏显示标尺和网格。
16
在Dreamweaver CS5中，使用跟踪图像功能可以载入某个网页的布局(或图片)，然后借助该网页的布局来安排正在制作的网页布局。选择“查看”|“跟踪图像”|“载入”命令，打开“选择图像源文件”对话框，如图2-33所示。
17
18
每一个网页都是由HTML脚本所组成的*.html文件，一个完整的HTML网页文件包含head和body两个部分，head 部分包括许多不可见的信息，例如语言编码、版权声明、关键字等，使用Dreamweaver CS5，可以设置这些信息。
1
Dreamweaver CS5是一款专业的网页制作软件，可以制作单独的网页文件，但制作网页的根本目的是为了构建一个完成的网站。Dreamweaver既是一个网页的创建和编辑工具，又是一个站点创建和管理的工具。因此，在创建网页之前必须规划和设计好网站。本章主要讲述了 Dreamweaver CS5的一些基本操作，包括规划和创建站点以及网页文件的基本操作。
10
创建了本地站点后，就可以创建文档并将保存在站点文件夹中。在创建和编辑文档时，Dreamweaver CS5会自动生成文档的HTML代码和JavaScript代码，使用 Dreamweaver代码编辑器可以测试和编辑这些代码。 Dreamweaver CS5提供了多种创建文档的方法，可以创建一个新的空白HTML文档，或使用模板创建新文档。同时，还提供了功能强大的“新建文档”对话框来满足用户创建不同类型的文档的需求。创建网页文档打开和保存网页文档

Dreamweaver CS5.5中文版案例教程第2章

Dreamweaver是最佳的站点创建和管理工具，使用它不仅可以创建单独的文档，还可以创建完整的站点。具体操作步骤如下。
2.6 知识与技能梳理
一个网站的建立通常要遵循以下顺序：首先是合理规划站点，这是创建任何网站的前提，在创建网站之前必须先明确站点目标、用户及站点结构；其次是构建本地站点和远程站点；接着是站点的测试、维护与管理；最后是站点的上传与发布。
第2章站点的搭建与管理
站点是一系列文件的组合，这些文件通过各种链接联系起来。Dreamweaver CS5.5 是创建和管理站点的工具，使用它不仅可以创建单独的文件，还可以创建完整的站点。本章主要讲解创建站点、管理站点地图、设置站点的参数，以及规划与构建站点结构等内容。
2.1 创建本地站点
2.1.1 使用“管理站点”向导创建站点
重要工具：管理站点、弹出菜单工具。核心技术：通过创建本地站点，将位于本地的文件夹当作远程站点的镜像，最后上传至服务器，完成网站的上传。实际应用：使用“管理站点”向导搭建站点、编辑和管理站点。
2.2.4 删除站点如果不再需要利用Dreamweaver对某个本地站点进行操作，则可以将其从站点列表中删除，具体操作步骤如下。
2.3 管理站点中的文件
2.3.1 创建文件夹和文件网站每个栏目中的所有文件被统一存放在单独的பைடு நூலகம்件夹内，根据包含的文件多少，又可以细分到子文件夹里。
2.3 管理站点中的文件
2.3.2 移动和复制文件同大多数的文件管理一样，Dreamweaver CS5.5也可以利用剪切、复制和粘贴功能来实现对文件的移动和复制，具体操作步骤如下。
2.4 管理站点地图
站点地图是以树形结构图方式显示站点中文件的链接关系。在站点地图中可以添加、修改、删除文件之间的链接关系。

项目一初识Dreamweavercs5(上机)2

项目一网页制作基础任务二初识Dreamweaver CS5一、教学目标1、知道创建站点。

2、掌握创建网站的首页及子页。

二、学生特征分析学生利用Dreamweaver cs5软件，尝试创建站点，首页、子页，并制作一个简单的首页页面。

三、课型实训课四、教学重点创建一个网站站点：名称为“青春我美丽”。

五、教学难点创建一个首页，另创建子页名称为“新闻、文章、下载、图片”。

六、课前准备机房七、课时安排2课时（45分钟×2）八、教学过程1、复习思考与组织教学初步创建站点，首页、子页及首页页面。

2、引入新课老师先讲解步骤方法及演示引入课题。

3、讲授新课在首页中编辑内容《见素材》。

1、准备好网页素材。

2、创建青春我美丽的站点。

3、创建子页“新闻、文章、下载、图片”并在主页中编辑内容。

4、保存并用浏览器浏览网页看其较果。

如下图所示。

4、巩固深化尝试建立首页页面。

5、课堂小结A、教学内容与时间分配：第一节课：一、在软件中定义站点（10分钟）二、在软件中管理站点（10分钟）三、网站文档的基本操作（25分钟）第二节课上机操作（45分钟）B、教学活动：通过软件功能解析深入学习软件功能和制作特点。

C、教师活动：通过软件相关功能的解析学习Dreamweaver CS5工作界面的基本操作和设置文件头的基本方法。

D、学生活动：除了课堂讲解的软件功能外，还可以根据相关的工具特点进行简单的练习和操作。

布置作业上机作业（见素材）。

九、板书设计十、教学反思我和学生一起学习了怎样建立一个自己的站点，并且在自己的站点内建立一张网页，然后在这张网页内输入文字、插入图片、设置网页背景等，并进行一些格式的设置。

但仍然有一小部分学生没有完成，于是我就查看了一下学生的来源，发现有的学生初中来自农村中学，动手能力相对较差一点。

Dreamweaver cs5标准实例教程配套全册教学课件

2.2.3 “插入”面板
单击文档窗口右侧浮动面板组中的“插入”按钮，即可弹出以前熟悉的“插入”面板。
“插入”面板共有8类对象元素，包含一些最常用的项目：常用、布局、表单、数据、Spry、InContext Editing、文本和收藏夹。“插入”面板的初始视图为“常用” 面板，单击“插入”面板中“常用”面板右侧的倒三角形按钮，即可在弹出的下拉列表中选择需要的面板，从而在不同的面板之间进行切换。如图所示。
所谓动态网页，是指服务器会针对不同的使用者以及不同的要求执行不同的程序，从而提供不同的服务，一般与数据库有关。这种网页通常在服务器端以扩展名asp、 jsp或是aspx 等储存。动态网页的页面自动生成，无须手工维护和更新HTML文档；不同的时间、不同的人访问同一网址时会产生不同的页面。
动态网页与静态网页的最大不同就是Web服务器和用户之间的动态交互，这也是 Internet强大生命力的体现。
第1章网页制作基础知识
本章重点
本章和网页制作的基本步骤，然后简要介绍设计制作网页的常用工具，重点介绍Adobe公司最新推出的Dreamweaver CS5，它涵盖了网页制作与站点管理，是使用最多的网页制作工具之一。
学习目的
通过本章的学习，您可以：
网页与网站网站建设的基本步骤
1.1 网页与网站
网页是网络上的基本文档，网页中包含文字、图片、声音、动画、影像以及链接等元素，通过对这些元素的有机组合，就构成了包含各种信息的网页。简单地说，通过浏览器在WWW上所看到的每一个超文本文件都是一个网页，而通过超链接连接在一起的若干个网页的集合即构成网站。
通常我们看到的网页，都是以.htm、.html、.shtml等为后缀的文件。在网站设计中，这种纯粹HTML格式的网页通常被称为静态网页。静态网页的内容是固定的，当用户浏览网页内容时，服务器仅仅是将已有的静态HTML文档传送给浏览器供用户阅读。若网站维护者要更新网页的内容，就必须手工更新所有的HTML文档。

ch2 Dreamweaver_CS5快速入门

12/10/2014
二、编辑文本 1）网页中输入的文本可以像Word文档一样，进行编辑。 – 1. 拖动鼠标选中一个或多个文字、一行或多行文本，也可以选中网页中的全部文本。 – 2. 按BackSpace键或Delete键实现删除文本操作。 – 3. 实现复制、剪切、粘贴等操作。 – 4. 实现查找与替换操作。5. 实现撤消或重做操作。 2）设置文本格式 – 字体(通用性问题)、大小、颜色、风格 – 注：CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。
第二课：制作网页的基本操作
一、在网页中添加文本添加普通文本方法： A、直接输入（1）用鼠标单击网页编辑窗口中的空白区域，窗口中随即出现闪动的光标，标识输入文字的起始位置。（2）选择适当的输入法输入文字 B、复制和粘贴 C、从其他文件导入
12/10/2014
3
文档标签
文档标签位于应用程序栏下方，左侧显示当前打开的所有网页文档的名称及其关闭按钮；右侧显示当前文档在本地磁盘中的保存路径以及向下还原按钮；下方显示当前文档中的包含文档以及链接文档。
当用户打开多个网页时，通过单击文档标签可在各网页之间切换。另外，单击下方的包含文档或链接文档，同样可打开相应文档。
分门别类地将文件保存在不同的目录下,在大型网站中，分支页面的文件应存放在单独的文件夹中存放网页图像的文件夹一般命名为“images”或者“img”。在动态网站中，用来存放数据库的文件夹一般被命名为“data”或者“database”。目录的层次不要太深，建议不要超过3层不要使用中文文件名和中文目录名不要使用过长的目录名,比较长的文件名可使用下划线 “_”来隔开多个单词或关键字。

网页设计第2章 Dreamweaver CS5基础

站点按站点文件夹所在位置分为两类：本地站点和远程站点。本地站点是指本地计算机上的一组文件，远程站点是远程Web服务器上的一组文件。创建本地站点首先要在本地硬盘上新建一个文件夹或者选择一个已经存在的文件夹作为站点的文件夹，那么这个文件夹就是本地站点的根目录。
2.2.2新建和保存网页
1．新建网页文档 2．保存网页文档
2.5网页文档头部信息设置
META标签位于在网页<head>…</head>标签之间，用来记录当前页面的相关信息，如作者和版权信息、搜索关键字等，它也可以用来向服务器提供信息，如页面的失效日期、刷新时间间隔等。 META标签分为http-equiv属性和name 属性。name属性主要用于描述网页，如Keywords（关键字）、description （网站内容描述）等。http-equiv属性类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容，如Refresh（刷新）等。
第2章 Dreamweaver CS5基础
网页设计与制作 Dreamweaver CS5 标准教程邢帅教育
本章学习主要内容：

1.Dreamweaver CS5工作界面 2.创建网站站点 3.管理站点文件和文件夹 4.管理站点 5.网页文档头部信息设置学习QQ群69364320
2.6课堂案例-慈善救助中心
案例学习目标：学会创建站点、管理站点文件和文件夹。案例知识要点：创建站点、移动文件、重命名文件。素材所在位置：光盘/案例素材/ch02/课堂案例-慈善救助中心。案例效果如图2-29所示。
2.5网页文档头部信息设置
2.5.1插入搜索关键字 2.5.2设置描述信息 2.5.4插入版权信息 2.5.3设置刷新时间可以指定浏览器在一定的时间后重新加载当前页面或转到不同的页面，比如论坛网站中通常要定时刷新页面，以便实时反映在线用户信息、离线用户信息以及动态文档的实时改变情况。

11.4.3 使用Dreamweaver CS5制作页面[共5页]

规则”对话框，直接单击
图１１－３７　新建文件图１１－３８　创建ＤＩＶ图１１－３９　设置方框样式
（4）　依次单击按钮确认设置，然后删除默认的文本，使用相同的方法创建一个名称为“top”的DIV，设置大小为“1000×404”像素，初学者为了便于查找和观看，可先为其设置一个背景颜色，这里设置将该标签背景设置为“＃FC9”，如图11－40所示。

（5）　将插入点定位到名称为all的DIV中，再次插入一个名称为“maid”的DIV，大小为“1000×499”像素，设置背景颜色为“＃”，效果如图11－41所示。

（6）使用相同的方法在底部创建一个名称为“
图１１－４０　设置ｔｏｐ样式图１１－４１　设置ｍａｉｄ样式图１１－４２　设置ｂｏｔｔｉｏｎ样式）将插入点定位到名称为的DIV中，再次插入一个名称为“top＿tb”的DIV，大小为“1000×121”像素，设置背景颜色为白色。

在“top”中单击定位插入点，选择【插入】→【布局对象】→【Div标签】菜单命令，插入一个AP　Div标签，选择该标签，在“属性”面板中设置大小为“606×121”像素，背景颜色为白色。

）选择创建的AP　Div标签，然后在“CSS面板”中单击“编辑”按钮，在打开的面板中。

Dreamweaver-cs5-网页制作教程ppt全册

打开最近编辑的文件
创建新的文件或者Dreamweaver站点
教学网站与资源连接
前往 ADOBE功能介绍网站
是否禁用开始项
2021年2月4日星期四
5
官方的重要信息
教育学院
菜单栏文档工具栏文档窗口
状态栏属性面板
2021年2月4日星期四
应用程序栏工作区切换器插入面板文件面板
Dreamweaver-cs5-网页制作教程ppt全册
第一节认识Dreamweaver
Dreamweaver是由Macromedia公司推出的一款网页制作软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。
状态栏：位于文档窗口底部，包括3个功能区：
标签面板（又称为：标签选择器，显示和控制文档当前插入点位置的HTML源代码标签，可查看网页内容的代码标签，也可以单击标签，选中该元素。）
标签选择器
选取工具
缩放工具
文档大小和估计下载时间
手形工具窗口大小
① 标签选择器用来显示环绕当前选定内容的标签的层次结构。若单击该层次结构Байду номын сангаас的任何标签，则选定该标签全部内容。如单击状态栏的<body>标签，则选定文档中整个正文。 ② 选取工具用于启动和禁用手形工具。 ③ 手形工具用于在文档窗口中单击并拖动文档。
下载指示器（估计下载时间，查看传输时间）。注意： “8秒钟原则”：一般来说，大多数用户浏览网页时等待一个页面的时间不会超过8秒。所以要随时注意网页的大小，超过8秒，要及时优化。 Web页下载时间和大小的设计应遵从该原则。

使用Dreamweaver搭建网站的基本步骤

使用Dreamweaver搭建网站的基本步骤第一步：准备工作在使用Dreamweaver搭建网站之前，我们需要先完成一些准备工作。

首先，我们需要确定网站的目标和需求，包括网站的主题、页面结构以及所需功能等。

其次，我们需要规划网站的导航结构，确定各个页面之间的联系和布局。

第二步：创建网站在打开Dreamweaver之后，我们需要按照以下步骤创建一个新的网站：1. 点击菜单栏的“文件”，选择“新建”。

2. 在弹出的对话框中，选择“网站”选项，并点击“下一步”。

3. 在“站点名”栏中输入你的网站名称，并选择一个文件夹作为网站的保存位置。

4. 在“网址”栏中输入你的网站域名或者本地测试服务器的地址。

5. 选择合适的服务器技术和目录，然后点击“完成”。

第三步：设计网页在创建好网站之后，我们可以开始设计网页了。

以下是一些设计网页的基本步骤：1. 在“文件”菜单中选择“新建”，创建新的网页文件。

2. 在页面中添加标题、页眉、页脚等基本元素。

3. 使用工具栏上的各种工具来添加图片、文本框、按钮等页面元素。

4. 调整页面元素的位置、大小、颜色等属性。

5. 使用CSS样式来对页面进行排版和美化。

第四步：建立导航一个好的导航系统对于网站的用户友好性至关重要。

以下是建立导航的一些基本步骤：1. 创建一个导航栏，可以使用水平导航栏或者垂直导航栏。

2. 将各个页面之间的链接嵌入到导航栏中。

3. 使用CSS样式来美化导航栏，并在选中状态下给予特殊样式。

第五步：添加内容网站的内容是吸引用户的关键，以下是添加内容的基本步骤：1. 创建一个新的网页，供添加内容使用。

2. 使用文字工具添加网站的文字内容。

3. 添加图片、视频或者其他媒体以丰富网站的内容。

4. 使用表格或者列表来结构化和组织内容。

第六步：测试和发布在完成网站设计和内容添加之后，我们需要进行测试和发布。

以下是一些测试和发布的基本步骤：1. 使用预览功能来测试网站在不同浏览器和设备上的显示效果。

DreamweaverCS5网页设计教程课程设计

Dreamweaver CS5网页设计教程课程设计一、教学目标本课程的主要目标是：1.了解网页设计的基本原理与规范。

2.掌握Dreamweaver CS5的使用方法和网页设计技巧。

3.能够独立完成基本网页设计与制作。

二、教学内容2.1 网页设计概述本章主要介绍网页设计的概念和原理，阐述网页设计的规范和流程。

包括以下内容：1.网页设计的概念和作用。

2.网页设计的规范和流程。

3.网页设计中常用的设计软件和工具介绍。

2.2 Dreamweaver CS5入门本章主要介绍Dreamweaver CS5的基本界面和功能，让学生熟悉Dreamweaver CS5的基本操作。

包括以下内容：1.Dreamweaver CS5的安装和界面介绍。

2.Dreamweaver CS5的基本功能介绍。

3.Dreamweaver CS5的基本操作。

2.3 网页设计基础本章主要介绍网页设计的基础知识和技巧，包括页面布局、图片处理、文字处理和颜色搭配等。

包括以下内容：1.页面布局的概念和方法。

2.图片处理和文字处理的技巧。

3.颜色搭配的原则和方法。

2.4 网页设计实战本章主要介绍如何使用Dreamweaver CS5实现网页设计，通过实战让学生熟练掌握Dreamweaver CS5的使用和网页设计的流程。

包括以下内容：1.Dreamweaver CS5实现网页设计的流程。

2.网页设计实战案例介绍和指导。

3.指导学生独立完成网页设计任务。

三、教学方法本课程采用教师授课和学生实践相结合的教学方法。

具体包括：1.教师讲课。

2.演示Dreamweaver CS5的使用。

3.学生模仿和操作。

4.学生独立完成网页设计任务。

四、考核方式本课程的考核方式主要采用网页设计实战任务和学生作业。

具体包括：1.网页设计实战任务：由教师给出网页设计题目，要求学生独立完成。

任务要求设计符合规范、美观大方的网页，并在规定时间内提交。

2.学生作业：要求学生根据教师课堂讲解和演示，完成与课程相关的作业。

Dreamweaver CS5中文版基础教程02

2.2.2 修改项目符号或编号
（1）将插入点放在设置项目符号或编号的文本中。
（2）通过以下几种方法启动“列表属性”对话框。
单击“属性”面板中的“列表项目”按钮选择“格式 > 列表 > 属性”命令。。
2.2.3 设置文本缩进格式
设置文本缩进格式有以下几种方法。在“属性”面板中单击“文本缩进”按钮按钮，使段落向右移动或向左移动。选择“格式 > 缩进”或“格式 > 凸出”命令，使段落向右移动或向左移动。按Ctrl+Alt+] 快捷键或Ctrl+Alt+ [ 快捷键，使段落向右移动或向左移动。或“文本凸出”
“网格设置”对话框
“网格设置”对话框
2.3.3 标尺
标尺显示在文档窗口的上方和左侧，用以标志网页元素的位
置。标尺的单位分为像素、英寸和厘米。
2.3.4 课堂案例——艺术摄影网
使用“水平线”命令在文档中插入水平线。使用“属性”面板
改变水平线的高度。使用代码改变水平线的颜色。
效果图
2.4 课堂练习——家具装饰网
具按钮
，弹出13个特殊字符按钮。在其中选择需要的特殊字符
的工具按钮，即可插入特殊字符。
2.2.7 课堂案例——电器城网店
使用“项目列表”按钮创建列表。
效果图
2.3 水平线、网格与标尺
水平线显示和隐藏网格标尺课堂案例——艺术摄影网
2.3.1 水平线
分割线又叫做水平线，可以将文字、图像、表格等对象在视觉上分割
2.2.1 设置项目符号或编号
通过项目列表或编号列表按钮设置项目符号或编号，步骤如下。（1）选择段落。（2）在“属性”面板中，单击“项目列表”按钮号列表”按钮，为文本添加项目符号或编号。通过列表设置项目符号或编号，步骤如下。（1）选择段落。（2）选择“格式 > 列表”命令，弹出其子菜单，选择“项目列表”或“编号列表”命> 网格设置 > 网格设置”命令，弹出“网格设置”对话框。在“间隔”选项的文本框中输入一个数字，并从下拉列表中选择间隔的单位，单击“确定”按钮关闭对话框，完成网格线间隔的修改。 4．修改网格线的形状和颜色选择“查看 > 网格设置 > 网格设置”命令，弹出“网格设置”对话框，在对话框中，先单击“颜色”按钮并从颜色拾取器中选择一种颜色，或者在文本框中输入一个十六进制的数字，然后单击“显示”选项组中的“线”或 “点”单选项单击“确定”按钮，完成网格线颜色和线型的修改。

Dreamweaver CS5网页制作基础教程-教学大纲

《Dreamweaver CS5网页制作基础教程》课程教学大纲一、课程性质和任务本课程是网页制作的一门实用课程，是网络类专业的一门实践性很强的技术基础课。

它的主要任务是培养学生规划、设计和制作网站的实际技能。

二、课程教学目标1、掌握Dreamweaver CS5界面的组成2、掌握创建和发布站点的基本方法3、掌握首选参数及页面属性的设置方法4、掌握添加和设置文本、图像和媒体的方法5、掌握创建和设置超级链接的方法6、掌握创建、编辑表格及其属性设置方法7、掌握使用框架创建网页的方法8、掌握使用Div和CSS样式布局网页的方法9、掌握使用模板和库创建网页的方法10、掌握使用行为的基本方法11、掌握使用表单设计网页的方法12、掌握创建ASP应用程序的方法四、教学内容和基本要求第1章网页制作基础∙ 了解与网页有关的一些常用名词术语。

∙ 了解HTML和CSS的一些基本知识。

∙ 了解Dreamweaver CS5的工具栏和功能面板。

∙ 掌握Dreamweaver CS5设置首选参数的方法。

第2章旅游网站站点设计∙ 了解旅游网站的基本知识。

∙ 了解站点规划的基本知识。

∙ 掌握定义和管理站点的基本方法。

∙ 掌握创建文件夹和文件的基本方法。

第3章旅游网站文本设置∙ 掌握设置页面属性的方法。

∙ 掌握插入文件头标签的方法。

∙ 掌握添加文本和特殊对象的方法。

∙ 掌握设置字体属性的方法。

∙ 掌握设置段落属性的方法。

第4章旅游网站CSS样式设置∙ 了解CSS速记规则与普通规则的区别。

∙ 了解设置CSS样式首选参数的方法。

∙ 了解CSS类型等属性的基本涵义的设置技巧。

∙ 掌握创建、编辑、管理和应用CSS样式的方法。

第5章旅游网站CSS和Div布局设计∙ 了解常用的页面布局类型和技术。

∙ 掌握插入和编辑Div标签的基本方法。

∙ 掌握使用CSS+Div布局页面的基本方法。

∙ 掌握创建和设置AP Div的基本方法。

∙ 掌握使用Spry布局构件的基本方法。

DreamweaverCS5自学教程第二课：制作网页的基本操作.doc

第二课：制作网页的基本操作2-1 添加文本1
1、网页文本的输入方式
(1)、导入预先保存的文档
(2)、直接输入或复制粘贴
2、首页命名
3、网页的背景图
片通过下方的页
面属性来设置。

2-2 添加文本2
1、在网页中添加一个能自动更新的日期时间。

2、在网页中连续输入多个空格的设置。

在“编辑”菜单中选择“首选参数—常规--允许多个连续的空格”，确定。

3、添加水平线。

选中需要添加的位置，选择“插入—HTML—水平线”
在下放的属性面板中设置水平线
水平线的颜色需要通过代码进行设置，<hr>代码表示一条水平线，括号内加空格设置属性，保存后预览即能看见设置的效果。

4、特殊字符的插入。

2-3 编辑文本
1、网页文件中的文本输入、删除、复制和粘贴等编辑与DOC文档的操作相似。

2、搜索网页中查找或替换某一字词
搜索结果的显示点击每一项即显示精确位置替换和撤销Ctrl+Z。

Dreamweaver CS5网页设计与制作教程第二章

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> </body> </html>
2.1 XHTML概念-常见的XHTML标签
表格标签表格是传统网页布局的常用标签，它允许我们把各种内容、数据放在表格单元格内。创建表格一定包含下面三个标签。 <table>：表格标签，用来定义HTML表格。 <tr>：表格行标签，定义HTML表格中的行。 <td>：单元格标签，定义HTML 表格中的标准单元格。框架标签
<!DOCTYPE>, <html>与</html>, <head>与</head>,<body>与</body>标签
2.1 XHTML概念-常见的XHTML标签
网页可以包含文字、图片、表格、声音等元素，因此有各种各样的标签来描述这些元素。特别地，不同的元素可能以不同的方式呈现给浏览者，所以标签又将会有属性与之对应。浏览器则对这些标签及属性进行解释并生成页面，于是就得到现在所看到的各式各样的网页效果。基本标签 <style>：样式标签，用于定义HTML文档的样式 <h1>-<h6>：标题标签，可以用来定义文档中不同等级的标题 <p>：段落标签，用于定义文档的段落 <hr>：水平线标签，作用是在文档中插入水平线，起分隔内容的作用 <br />：换行标签，在文档中插入一个换行 ：注释标签

网页设计实用教程

第3章 Dreamweaver CS5基本操作在学习过程中，不可避免的需要应用到一些基本的操作，例如新建、打开和保存文件等操作。

为了更顺畅的学习Dreamweaver CS5，我们应该了解一些基本操作，对这些操作有个基本的认识。

【本章学习目标】¾掌握设置首选参数¾熟悉新建、保存和关闭HTML文档¾理解设置网页的页面属性¾熟悉添加文字和图像的基本操作3.1 首选参数设置为了使Dreamweaver CS5更加适合工作的需要，在正式使用前需要进行一些基础设置。

如是否打开或关闭一些即时提示信息框、选择默认的网页语言版本等。

（1）启动Dreamweaver CS5，执行“编辑/首选参数”命令，打开如图3-1所示的“首选参数”对话框。

图3-1 “首选参数”对话框‐19-选框，将复选框中的√去掉，如图3-2所示。

图3-2 分类栏中的“辅助功能”这样设置可以阻止在插入表单、框架、媒体和图像时弹出属性提示框，简化操作步骤。

（3）如图3-3所示，选择分类栏中的“新建文档”，根据需要设置默认文档的类型。

图3-3 分类栏中的“新建文档”本例中选择默认文档为HTML ，默认扩展名为.html ，默认编码为简体中文（GB2312）。

默认编码可以根据实际工作的需要进行选择，例如制作英文网页可以选择UTF-8编码。

中文网页默认的编码为GB2312，所以这里选择GB2312编码。

（4）单击“确定”按钮，完成首选参数设置。

‐20- 3.2 文档的基本操作3.2.1 新建文档（1）启动Dreamweaver CS5，显示如图3-4所示的起始页面。

图3-4 Dreamweaver CS5的起始页面（2）单击新建栏中的“HTML”，新建HTML文档并进入到编辑界面。

也可以单击菜单“文件/新建”，打开图3-5所示的“新建文档”对话框。

在新建文档对话框中选择“空白页”中的“HTML”，单击“创建”按钮，新建HTML文档。

Dreamweaver CS5网页设计教程第2章

设置段落格式
设置CSS字体格式
（2）设置对齐方式
Dreamweaver中的对齐方式包括左对齐、右对齐、居中对齐和两端对齐等。
设置段落格式
设置CSS字体格式
（3）设置文本缩进
文本缩进是指文本与页面边缘的距离，其设置方法很简单，只需选择文本或将插入点定位到该文本中，单击“属性”面板中的按钮，单击“内缩区块”按钮可增加缩进距离；单击“删除内缩区块”按钮可减少缩进距离。
选择需要添加项目符号的段落，单击“属性”面板中的钮，然后单击“项目列表”按钮。按
创建列表
编辑项目符号和编号
无论是项目符号还是编号，只要选择了相应的段落，并在“属性” 面板中单击按钮，均可在打开的“列表属性”对话框中进行设置。
设置水平线
在需要插入水平线的位置的前一段定位插入点，选择【插入】/ 【HTML】/【水平线】菜单命令。
为网页中的文本设置HTML字体格式的操作非常简单，选择文本后，在操作界面下方的“属性”面板中单击按钮，然后通过调节面板中的参数进行设置即可。
设置文本字体格式
设置CSS字体格式
在“属性”面板中进行设置。
设置段落格式
设置CSS字体格式
（1）设置标题格式
选择需设置格式的标题文本（也可选择其他文本），单击“属性” 面板中的按钮，在“格式”下拉列表框中选择需要的标题格式即可。
第2章输入与格式化文本
高等职业院校立体化精品系列规划教材
学习目标
知识目标
● 掌握文本段落的输入与换行分段的操作。 ● 熟练设置文本格式的方法。 ● 熟悉项目列表的设置和水平线的创建方法。
课堂实例预览
主要内容
1
2 3 制作“公司简介”页面制作“企业文化”页面实训——制作“快乐旅游”网站首页

第二课时初识Dreamweaver cs5

邹城高级职业技术学校
Dreamweaver CS5网页制作
初识DW CS5
2、搜集资料和素材一般是指网站制作是用到的图片、文字、动画、网页以及各种格式的音乐、视频等相关资料利用搜索引擎，在Internet上找现成的素材库，可以平时积累好素材，也可以购买商店出售的网站素材库专用光盘，来获取素材。我们考试时用的素材是已经提供好的素材。
邹城高级职业技术学校齐刘锋
Dreamweaver CS5网页制作
初识DW CS5
第二课时初识Dreamweaver
邹城高级职业技术学校
Dreamweaver CS5网页制作
一、制作网站流程
1、规划网站类型及主题设计
初识DW CS5
网站系统规划关键是找到准确的定位。不同类型的网站不仅内容不同，主要的功能、营销的策略都有区别。随着企业规模、经营内容的区别，网站千差万别，类型繁多。有的网站包括几百万个到几亿个网页，有的可能只有不到10个网页。我们一般是做新闻网站。主题就是你做这个网站为了啥，主要内容是什么。风格就是样式是怎样的。简明的，复古的，色彩的等等。
1、打开Dreamweaver CS5
邹城高级职业技术学校
Dreamweaver CS5网页制作
制作一个简单的网页，新建，选择HTML方式。输入内容，插入图片保存网页浏览查看
初识DW CS5
邹城高级职业技术学校
Dreamweaver CS5网页制作
三、Dreamweaver CS5工作环境
邹城高级职业技术学校
Dreamweaver CS5网页制作
3、使用软件进行网页制作
常用软件很多，我们一般用Dreamweaver。
初识DW CS5

1.3.1 Dreamweaver CS5的操作基础[共2页]

第1章 Dreamweaver CS5网页设计基础133. 预览网页。

(1) 按+组合键保存文档。

(2)在文档工具栏中单击按钮，在弹出的下拉菜单中选择【预览在IExplore 】选项，即可在IE 中预览网页的设计效果，如图1-23所示。

1.3 Dreamweaver CS5网页设计基础Dreamweaver 与Flash 、Fireworks 合在一起被称为网页制作三剑客，这3款软件相辅相承，是制作网页的最佳选择。

Dreamweaver CS5是设计Web 站点和应用程序的专业工具，它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的标准网站和应用程序。

1.3.1 Dreamweaver CS5的操作基础工欲善其事，必先利其器，下面先认识一下Dreamweaver 的发展史及其工作界面。

一、 Dreamweaver 发展简介Dreamweaver 是集网页制作和网站管理于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

其先后经历了Dreamweaver 4.0、Dreamweaver MX 、Dreamweaver MX 2004、Dreamweaver 8.0、Dreamweaver CS3、Dreamweaver CS4和Dreamweaver CS5。

图1-32所示为Dreamweaver 4.0版本。

图1-32 Dreamweaver 4.0的操作界面二、 Dreamweaver CS5界面介绍(1) 起始界面启动Dreamweaver CS5，即可进入起始界面，如图1-33所示。