02初识Dreamweaver.pptVIP

第2章 初识Dreamweaver 开始了解Dreamweaver的环境及基本操作 为后续内容打基础 内容 Dreamweaver 8的安装 Dreamweaver 8的工作窗口 创建网站 网页基本编辑操作 2.1 Dreamweaver 8的安装 见安装视频 Dreamweaver版本按时间和版本的高低分别是 dreamweaver mx dreamweaver 8 dreamweaver cs系列 现在最高版本是dreamweaver cs4 从低到高，功能是越来越多，用起来也越来越方便。 最早的版本是macromedia公司出品的，后来公司被adobe收购了（2005年04月18日 Adobe换股收购Macromedia 总金额34亿美元）。 2.2 Dreamweaver 8的工作窗口（1/4） 2.2 Dreamweaver 8的工作窗口（2/4） 【文档】窗口 显示当前文档 【文档】工具档上的【代码】、【设计】和【拆分】按钮决定了显示方式 【文档】工具栏 【代码】按钮：主要用来书写网页脚本语言、网页标记、程序代码 【设计】按钮：主要用来制作静态网页，通过图形化操作完成 【拆分】按钮：把窗口拆分成“设计”与“代码”两部分 2.2 Dreamweaver 8的工作窗口（3/4） 【属性】检查器 用户可以检查和编辑当前选定页面元素的属性 【插入】工具栏 包含8个类别 用户在制作网页时，大部分的操作都可以通过该工具栏来实现 2.2 Dreamweaver 8的工作窗口（4/4） 【面板】组 包含多个面板，每个面板包含不同的选项，功能强大 标签选择器 用来选择网页标记 2.3 创建网站 在制作网页之前，首先要创建和设置本地站点 在 Dreamweaver 中，“站点”一词既表示 Web 站点，又表示属于 Web 站点的文档的本地存储位置。 建立站点后 Dreamweaver 站点可组织与 Web 站点相关的所有文档，跟踪和维护链接，管理文件，共享文件以及将站点文件传输到 Web 服务器。 2.3 创建网站 站点 本地站点 把网站建立在自己计算机的硬盘里，把网站里的内容全部放在一个文件里，这个文件夹可以理解为本地站点 远程站点 通过将文件上传到远程文件夹来发布本地站点。远程文件夹是存储文件的位置，Dreamweaver 将此文件夹称为远程站点 2.3 创建网站 创建本地站点步骤 在开始构建 Web 站点之前，您需要建立站点文档的本地存储位置 在【资源管理器】或【我的电脑】中创建本地站点文件夹 如 e:\learn，在其下再创建一个images文件夹用于存图片 用于存放站点的网页、图片等文件 2.3 创建网站 创建本地站点步骤 在Dreamweaver中创建并设置本地站点 菜单：站点/新建站点 在出现的对话框（如后图所示）中指定站点名称与本地根文件夹 其他选项采用默认值即可 2.3 创建网站 2.3 创建网站 课堂练习1 在Dreamweaver中建立一个本地站点 网站名称为：Myweb 本地根文件夹为：c:\myweb 默认图像文件夹为：c:\myweb\images 其它设置默认 然后从Glearn网站 “第2周课堂练习”中下载source.rar 解压后，将dw_new_feature.html和source.txt文件复制到c:\myweb下，将dreamweaver.jpg图片文件复制到c:\myweb\images下 2.4 新建网页 方法一 选择菜单：文件/新建 打开如图所示的对话框 选择“基本页”中的“HTML”选项，单击创建 2.4 新建网页 方法二 在“文件”面板的空白处，单击鼠标右键 在弹出菜单中选择“新建文件”，在“文件”面板的当前文件夹中新建一个名为untitled.html的网页文件 重命名该网页 2.4 新建网页 编辑 后续课程会详细讲述 保存 快捷键 Ctrl+S 预览 按 F12 在浏览器中预览当前网页 2.5 网页基本编辑操作 网页标题 设置其他页面属性 网页文字编辑 图像操作 超链接 表格 查看代码 1 网页标题 2 设置其他页面属性 菜单：修改/页面属性 在网页中单击鼠标右键，在弹出菜单中选择“页面属性” 文本颜色 背景图象 背景颜色 边距 3 网页文字编辑 设置字体、大小、颜色、对齐 插入空格 在代码中写入 nbsp; 或 全角空格 段落 行回车：Shift+Enter Br 段落回车：Enter P 项目列表 3 网页文字编辑 插入水平线 菜单：插入/HTML/水平线 工具栏： “插入”工具栏中“HTML”类 插入特殊字符 菜单：插入/HTML/特殊字符 工具栏：“插入”工具栏中“文本”类 4 图像操作 支持GIF、JPEG和PNG图像格