Dreamweaver CS3网页制作-电子教案PPT文档格式.pptx

1、,目录,前进,结束,后退,WWW服务的基本原理,1.1网页基础知识,Dreamweaver CS3的启动界面,打开 最近 编辑,过的 网页 文件,新建网页文件 或其他对象,选用已有的范例 创建CSS样式表 等网页文件,1.2 Dreamweaver CS3的工作界面,目录,前进,结束,后退,Dreamweaver CS3的工作界面,目录,前进,结束,后退,菜单栏,目录,前进,结束,后退,“文件”：提供新建、打开、保存、预览、转换文档格式等命令。,“编辑”：提供用于基本操作的标准菜单命令。“查看”：用于切换文档的各种视图，显示或隐藏各种页面元素。“插入记录”：向页面中插入各种页面元素，创建超链接

2、。“修改”：用于设置页面属性及更改选定页面元素的属性。“文本”：用于设置文本及段落的格式。“命令”：提供了对各种命令的访问。“站点”：提供了创建、编辑站点的命令。“窗口”：用于设置工作区布局和各种面板的打开和隐藏。,插入栏,目录,前进,结束,后退,“常用”类别：用于创建和插入最常用的对象。“布局”类别：用于插入表格、div标签、框架和 Spry构件。,还可以选择表格的两种视图：标准（默认）视图和扩展 视图。,“表单”类别：包含一些按钮，用于创建表单和插入表单元 素。“数据”类别：可以插入Spry数据对象和其它动态元素。“Spry”类别：包含一些用于构建 Spry 页面的按钮。“文本”类别：用于

3、插入各种文本格式和列表格式的标签。“收藏夹”类别：用于将最常用的按钮分组和组织到某一公,文档工具栏,目录,前进,结束,后退,“文档标题”：显示当前网页的标题。新建文档时，默认的 网页标题是“无标题文档”。“文件管理”：显示“文件管理”菜单，包括上传、下载等 命令。“在浏览器中预览/调试”：选择一种浏览器预览或调试文档。“可视化助理”：用户可以使用各种可视化助理来设计页面。“检查浏览器兼容性”：用于检查CSS是否对各种浏览器均 兼容。,“文档”窗口显示当前打开的文档，用户在这里进行网页的 编辑制作，分为“代码”视图、“设计”视图和同时显示“代码”视图和“设计”视图的“拆分”视图三种视图模式。,文

4、档窗口,目录,前进,结束,后退,标签选择器标签选择器位于状态栏的最左边，以HTML标记显示页面对 象信息，通过它可以选择各种页面元素。状态栏,目录,前进,结束,选取工具：用于选取“文档”窗口内的对象。手形工具：用来移动对象的位置。,缩放工具：增大或减小窗口的显示比例。窗口大小：显示当前文档窗口的大小，以像素为单位。文件大小和估计的下载时间：显示页面的预计文档大小和预计下 载时间。,后退“属性”面板用于查看和编辑当前选定对象（如文本、图像等）,的各种属性。不同页面元素对应的的“属性”面板也不同。,属性面板,打开属性面板的方法,选择“窗口”“属性”,命令,按Ctrl+F3快捷键,目录,前进,结束,

5、后退,面板组,Dreamweaver CS3的面板 组中包含许多面板，每个,面板都可以展开或折叠，如右图所示，关闭或打开 面板可以通过“窗口”菜 单来完成。,在调整网页中一些对象的位置和大小时，利用Dreamweaver,CS3提供的标尺和网格工具，可以使操作更加准确。,标尺和网格只在网页文档窗口内显示，在浏览器中不会显示。,选择“查看标尺显示”命令，可打开标尺。选择“查看网格设置显示网格”命令可打开网格。,标尺和网格,目录,前进,结束,后退,1.3 HTML语言的基础知识,HTML文档基本结构头部信息正文主体部分,用HTML语言制 网页的作两种方 法,记事本,Dreamweaver、Fron

6、tPage等软件,HTML语言HTML语言即超文本标记语言，是目前网络上应用最为广泛的 语言，也是构成网页文档的主要语言。,目录,前进,结束,后退,HTML常用标记标题标记格式：网页的标题说明：该标记在标记中，所包含的文字将出现在浏 览器的标题栏上。主体标记格式：主体内容说明：包括所有主体内容，可以设置页面的背景颜色、背景图像、文字颜色等属性。,目录,前进,结束,后退,提示,在HTML文档中，所有的标记都要用括号括起来，如、。,HTML标记不区分大小写。标记中如果包含多个参数，各参数之间用空格分隔，参数位置不 受限制。,（3）段落标记格式：段落文本,说明：用来划分段落，在该标记中可以输入一段文

7、字。换行标记 格式：说明：用来标记一个换行动作，换行后的内容仍属于同一段落。水平线标记格式：在页面中插入一条水平线，通常用于分割文档。图像标记格式：在页面中插入一幅图像。,目录,前进,结束,后退,（7）超链接标记格式：文本或 图像,说明：为标记中的文本或图像添加超链接目标，浏览网页时单 击可打开指定的目标文件。（8）表格标记表格标记由表格标记、行标记和单元格标记3部分组成。表格标记行标记 单元格标记,目录,前进,结束,后退,上机实训,实训1：在记事本中创建如图1所示的网页，保存在D:chapter1文,件夹中，网页文件名为lx1.html。实训2：在Dreamweaver CS3打开D:cha

8、pter1lx2.html网页文件，在“代码”视图中修改源代码，完成以下操作。将页面背景颜色设置为“#FF99FF”。将“太平洋电脑网”链接到http:/。将表格设置为居中对齐。为图像添加注释文本“笔记本电脑”。修改网页标题为“首页”。,图1 lx1.html,图2 lx2.html,目录,前进,结束,后退,目录,前进,结束,后退,本章导读 本章任务 知识细目 上机实训,第2章站点的创建与管理,本章导读,前进,结束,后退,本章主要介绍了网站的开发流 程、本地站点的创建及站点管 理，网页文件的创建、保存、预览等基本操作。,目录,本章任务,前进,结束,后退,掌握站点的创建方法；,了解网站的开发流程

9、；,学会网页文件的新建、保存、预览等操作。,掌握站点的编辑、导入和导出等操作；,目录,前进,结束,后退,知识细目,创建本地站点,网站规划创建站点站点的分类,使用“文件”面板,删除站点,导出站点 导入站点,2.3 管理站点编辑站点,2.4 操作站点文件创建网站目录结构,预览文档,保存文档,新建网页文件,设置首页文件,目录,2.1 网站规划,网站的开发流程:,网站 规划设计,网站发布和 更新维护,网站创建及 网页制作,前进,结束,后退,网站的规划流程:,确定网站的 主题,收集素材,规划网站的 目及目栏录结 构,确定网站的 风格,目录,2.2 创建站点,按站点的交互性,动态站点,站点的分类概念：站点

10、可以简单地理解为存放网页及各种 素材的文件夹。本地站点按地理位置远程站点站点的分类静态站点,前进,结束,后退,目录,前进,结束,后退,创建本地站点,选择“站点新建站点”命令,输入站点的名称,选择如何连接到远程服务器,选择本地站点文件夹,选择服务器技术,目录,2.3 管理站点,前进,结束,后退,目录,选择“站点管理站点”命令，或在“文件”面板的下拉列表中选择“管理站点”命令，打开“管理站点”对话框，如下图所示。,“管理站点”对话框,编辑站点,选择“站点管理站点”命令，打开“管理站点”对话框。选择编辑的站点，单击“编辑”按钮，弹出“站点定义”对 话框。选择“基本”选项卡，可对站点基本信息进行修改。

11、选择“高级”选项卡，可对站点信息进行更为详细的修改。,前进,结束,后退,目录,修改站点基本信息,修改站点详细信息,前进,结束,后退,本地站点站点定义文件,导出,导入,站点的导入和导出,提示在更换一台机器继续网站开发时，通常先将本地站点导出到站,点定义文件中，然后在另一台机器上将站点信息导入。站点定义文件的扩展名为.ste。删除站点选择“站点管理站点”命令，打开“管理站点”对话框，选择要 删除的站点，单击“删除”按钮。提示站点被删除后，只是删除了站点的定义信息，硬盘中相应位 置的文件和文件夹并不会被删除。,目录,2.4 操作站点文件,前进,结束,后退,创建网站目录结构在“我的电脑”或“资源管理器

12、”中创建。在“文件”面板中选择站点名称或父级文件夹，右单击，在弹,出的快捷菜单中选择“新建文件夹”命令，如下图所示。,目录,在“文件”面板中创建目录结构,前进,结束,后退,提示,建立网站目录结构时要注意以下问题：,不要将所有文件都存放在根目录下，以免造成文件管理混乱。按栏目内容建立子目录。在每个栏目目录下都建立独立的images目录保存图像资源。目录的层次不要太深，建议不要超过3层。目录使用英文名称，不要使用中文名称。不要使用过长的目录名称。,新建网页文件使用启动界面创建网页。使用“文件”面板创建网页。在“文件”面板中选择站点，右单击，在弹出的快捷菜单 中选择“新建文件”命令，输入文件的名称，

13、按Enter键。使用菜单命令创建网页。选择“文件新建”命令，打开“新建文档”对话框，选 择“空白页HTML”选项，在“布局”列表中选择“无”，单 击“创建”按钮。,目录,前进,结束,后退,根据不同服务器的命名要求，网页文件名通常使用小写英文、阿拉伯数字以及符号的组合，不能使用空格、特殊字符、中文等，否则在显示时会出错，因为很多服务器不支持中文。,提示,网址后网,设置首首页，站自动打开的在“文件,的快捷菜,单中选择“设成首页”命令。,目录,前进,结束,后退,保存文档,选择“文件保存”命令,按 Ctrl+S快捷键,提示如果对打开的文档进行了修改，但尚未保存，文件名后将自 动添加一个“*”，保存后“

14、*”将消失。,预览文档,选择“文件在浏览器中预览IExplore”命 令单击“文档”工具栏上的“在浏览器中预览/调试”按钮，选择“预览在IExplore”按F12键,目录,前进,结束,后退,“文件”面板的基本操作,双击网页文件打开文件,右单击网页文件，选择“打开”命 令,目录,“文件”面板,“文件”面板工具栏,前进,结束,后退,移动文件（夹）,右单击，选择“编辑剪切”，在目的位置右单击 选择“编辑粘贴”,直接用鼠标拖动,删除文件（夹）,右单击，在快捷菜单中选择“编辑删除”命 令,按Delete键,创建文件或文件夹,在“文件”面板中，选择一个文件（夹）,输入名称,右单击选择“新建文件（夹）”,目录,前进,结束,后退,实训1：新建一个以自己姓名命名的个人站点，该站点使用“ASPJavascript”服务器