02初识Dreamweaver

第2章初识Dreamweaver 开始了解Dreamweaver的环境及基本操作为后续内容打基础 内容 Dreamweaver8的安装Dreamweaver8的工作窗口创建网站网页基本编辑操作 2 1Dreamweaver8的安装 见安装视频Dreamweaver版本按时间和版本的高低分别是dreamweavermxdreamweaver8dreamweavercs系列现在最高版本是dreamweavercs4从低到高 功能是越来越多 用起来也越来越方便 最早的版本是macromedia公司出品的 后来公司被adobe收购了 2005年04月18日Adobe换股收购Macromedia总金额34亿美元 2 2Dreamweaver8的工作窗口 1 4 面板组 标签选择器 属性 检查器 文档 窗口 文档 工具栏 插入 工具栏 2 2Dreamweaver8的工作窗口 2 4 文档 窗口显示当前文档 文档 工具档上的 代码 设计 和 拆分 按钮决定了显示方式 文档 工具栏 代码 按钮 主要用来书写网页脚本语言 网页标记 程序代码 设计 按钮 主要用来制作静态网页 通过图形化操作完成 拆分 按钮 把窗口拆分成 设计 与 代码 两部分 2 2Dreamweaver8的工作窗口 3 4 属性 检查器用户可以检查和编辑当前选定页面元素的属性 插入 工具栏包含8个类别用户在制作网页时 大部分的操作都可以通过该工具栏来实现 2 2Dreamweaver8的工作窗口 4 4 面板 组包含多个面板 每个面板包含不同的选项 功能强大标签选择器用来选择网页标记 2 3创建网站 在制作网页之前 首先要创建和设置本地站点在Dreamweaver中 站点 一词既表示Web站点 又表示属于Web站点的文档的本地存储位置 建立站点后Dreamweaver站点可组织与Web站点相关的所有文档 跟踪和维护链接 管理文件 共享文件以及将站点文件传输到Web服务器 2 3创建网站 站点本地站点把网站建立在自己计算机的硬盘里 把网站里的内容全部放在一个文件里 这个文件夹可以理解为本地站点远程站点通过将文件上传到远程文件夹来发布本地站点 远程文件夹是存储文件的位置 Dreamweaver将此文件夹称为远程站点 概念 开发站点时一般在本地站点进行 2 3创建网站 创建本地站点步骤在开始构建Web站点之前 您需要建立站点文档的本地存储位置在 资源管理器 或 我的电脑 中创建本地站点文件夹如e learn 在其下再创建一个images文件夹用于存图片用于存放站点的网页 图片等文件 第1步 2 3创建网站 创建本地站点步骤在Dreamweaver中创建并设置本地站点菜单 站点 新建站点在出现的对话框 如后图所示 中指定站点名称与本地根文件夹其他选项采用默认值即可 第2步 2 3创建网站 输入站点名称 指定站点文件夹 如e learn 指定站点存放图像的文件夹 不是必需的 如e learn images 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 5网页基本编辑操作 2设置其他页面属性 菜单 修改 页面属性在网页中单击鼠标右键 在弹出菜单中选择 页面属性 文本颜色背景图象背景颜色边距 或 2 5网页基本编辑操作 3网页文字编辑 设置字体 大小 颜色 对齐插入空格在代码中写入或全角空格段落行回车 Shift Enter段落回车 Enter项目列表 2 5网页基本编辑操作 3网页文字编辑 插入水平线菜单 插入 HTML 水平线工具栏 插入 工具栏中 HTML 类插入特殊字符菜单 插入 HTML 特殊字符工具栏 插入 工具栏中 文本 类 2 5网页基本编辑操作 4图像操作 支持GIF JPEG和PNG图像格式GIF 最多256色的存储 适合存储非连续色调或颜色比较单一的图像JPEG 适合存储照片或连续色调图像 最多支持16M色 有损压缩PNG插入图像菜单 插入 图像 插入 工具栏 2 5网页基本编辑操作 在网页中恰当运用图像 可以体现出一个网页的特色和风格 4图像操作 若站点设置了 默认图像文件夹 如图上图 当所选图像存储于当前站点之外 会自动复制一份图像到指定的默认图像文件夹中否则会出现如右下图所示的对话 2 5网页基本编辑操作 4图像操作 图像属性源文件定图像来源宽 高调整大小时同时按下Shift替换指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本 2 5网页基本编辑操作 5超链接 选定所需设置链接的对象 如文字 图片等在属性面板中设置链接 指定链接指向的文件或对象相对地址绝对地址目标 blank表示在新窗口中显示链接指向的内容 2 5网页基本编辑操作 网页的最大特点就是超链接 6表格 表格是用来在HTML页上显示表格式数据以及对文本和图形进行布局的强有力工具表格由一行或多行组成 每行又由一个或多个单元格组成 2 5网页基本编辑操作 6表格 插入表格选择 插入 表格 或单击 插入 工具栏上的 表格 按钮 出现 表格 对话框设置表格属性单击确定 2 5网页基本编辑操作 6表格 当选定了表格或表格中有插入点时 Dreamweaver会显示表格宽度和表格选择器 由绿色线条指示 中的每个表格列的列宽 宽度旁边是表格标题菜单与列标题菜单的箭头 使用菜单可以快速访问一些与表格相关的常用命令 2 5网页基本编辑操作 7查看代码 拆分 按钮该窗口会拆分 同时显示 设计 视图和基础HTML代码 代码视图 设计视图 7查看代码 代码 按钮窗口显示 代码 视图 其中列出网页的HTML代码 课堂练习2 首先下载source rar 若已在课堂练习1中下载文件 跳过此步 然后制作两个网页 dw htm和dw2 htm 如下两页所示压缩并上传至Glearn网站Assignments中的 第2周课堂练习 中 课堂练习2 单击此链接 在新窗口中打开dw2 htm 大小 24颜色 cc0000 标题 Dreamweaver8的新增功能 水平线 版权符 项目列表 Dw htm网页中文字可取自dw text txt 课堂练习2 单击此链接 打开dw htm 表格宽