dreamweaver网页制作教案

1 dreamweaver 网页制作教案 Dreamweaver MX 一 Dreamweaver MX 中文版建站初步 建立一个网站 首先要在本地机器上做好网站 再传到网上的虚拟空间上 现在免费 的网页空间很少了 在 还可以申请到可以使用几个月的免费空间 这 对于学习网页制作已经够了 接下来主要介绍本地站点的建立 站点文件命名 简明步骤 在 C 盘新建一个文件夹 在 Dreamweaver 中定义站点 新建文件和文件夹 给 文件和文件夹命名 目标是做一个个人网站 打开 我的电脑 打开 C 盘 点鼠标右键 选择新建 选择文件夹选项 C 盘下会出现一个新建文件夹图标 2 输入你想要的站点名称 这里输入 media 其实可以任意输入名称的 要注意的是 尽量不 要用中文命名 以免出现意想不到的麻烦 现在开始在 Dreamweaver MX 中把 media 这个文件夹定义为站点 打开 Dreamweaver 在菜单栏上 点击站点菜单 选择新建站点 接下来需要给站点起一个名字 可以起任意一个名字 3 这里起名为 media 按下一步 按下一步按钮 选择是否使用服务器技术 因为实例建立的是一个静态站点 就选择 否 我不想使用服务器技术 4 按下一步按钮 因为要传到网上的虚拟主页空间 就要选择 编辑我的计算机上的本地副 本 完成后再传到服务器上 按下一步 选择要定义的本地根文件夹 5 这里选择 media 文件夹 点 选择 按钮 因为没有使用远程服务器 就选择 无 6 按下一步 按完成按钮 一个站点就定义好了 7 二 二 文件命名及修改默认扩展名 站点定义好之后 就要开始新建网页文件和文件夹了 在站点中点击右键 选择新建文件 给新建的文件输入名称 8 新建文件夹与新建文件类似 就不重复了 在文件命名和站点结构方面 养成良好的习惯 很重要 网站首页默认的文件名 取决于你申请的主页空间 一般是 index htm index html default htm 等 同类型的文件 最好放在一个文件夹中 例如把图片 文件 都放在 image 文件夹中 不要把所有文件都放在根目录下 把一个栏目的所有文件 放在一个文件夹中 在链接网页和维护时 会很方便 文件和文件夹的命名 可以用栏目 名称的拼音 也可以用栏目名称的英文 团队开发时 有统一的命名规则相当重要 例如 个人简历这个栏目 命名的文件夹名称可以是 jianli 如果命名成英文 可以是 me 论坛 这个栏目的命名 大家都是用 bbs 作文件夹名称 应该有人发现了 怎么 Dreamweaver MX 默认扩展名是 htm 可我的空间默认扩展名是 html 啊 难道要一个一个改扩展名 有办法的 修改 Dreamweaver MX 的一个配置文件 就可以把默认扩展名从 htm 改到 html 以 windows2000 操作系统 Dreamweaver MX 默认安装路径为例 找到 文件名 MMDocumentTypes xml 这个文件 此文件位于 C Program Files Macromedia Dreamweaver MX Configuration DocumentTypes 文件夹下 双击 MMDocumentTypes xml 在 Dreamweaver MX 中打开 把第三行的 html 移动到 htm html shtml shtm stm lasso xhtml 这部分最前面的位置 就是改 成 html htm shtml shtm stm lasso xhtml 9 保存文件 重新打开 Dreamweaver MX 新建一个文件 默认扩展名变成 html 了 其它扩 展名修改方法类似 三三 页面属性的设置 双击 media 站点中的 index htm 打开一个空白的页面 我们将从这个空白页面开始 制作 了解页面属性的设置和作用 在工作区点鼠标右键 选择页面属性 10 打开页面属性对话框 下面是我设置的一个页面属性 在标题上输入 5dmedia 在背景 文本 链接 访问过的链接 活动链接几部分选取颜色 Dreamweaver MX 有强大的颜色选取功能 将在下一篇中详细介绍 设置左边界 顶部边界 边界宽度 边界高度都为 0 可以使页面中的表格与背景没有空隙 11 如果不设置设置左边界 顶部边界 边界宽度 边界高度 就会与顶部和左边有明显的空 隙 在中国大陆 使用的是简体中文 GB2312 编码 繁体网站 使用的是繁体中文 big5 码 英文网站使用的是西欧语系 Latinl 用得比较多的还有背景图像 选择一个已经做好的图像 就可以设置成页面的背景图 像 12 四 四 用表格搭建页面 现在有好几种尺寸的显示器 14 15 17 19 英寸 网页要在每个显示器上显示 正常 就要设置恰当的参数 常用的是在页面中插入表格放内容 采用象素和百分比两种 采用象素为单位 是以使用最多的显示器为参照的 现在数量最多的显示器是 15 英寸和 17 英寸的 所以页面使用象素为单位时 是以 15 英寸为标准 常用 800 600 的分辨率 使用百分比 可以在各种显示器上有相同的效果 宽度设置为 100 时 在各种显示器上 全屏显示 下面分别介绍这两种方法 简明步骤 打开一个页面 插入表格 设置表格宽度 在以前建立的 media 站点中 新建 index htm 文件 双击打开 点击插入表格图标 13 打开 插入表格 对话框 设置行数为 1 列数为 1 宽度选百分比 值为 100 边框为 0 在下面直接按确定 一个可以在各种显示器上全屏幕显示的网页就搭建好了 以后要做的是在表格里填充内容 14 下面介绍象素大小的表格设置 选择像素为单位 值为 768 可以在 15 英寸显示器上全屏 幕显示 在 17 英寸显示器上也有好的显示效果 相对使用百分比制作网页 采用像素比较 简单 使用像素作单位时 可以用不同的值 下面是一些站点的宽度值 5D 多媒体 760 像素 Microsoft 中文主页 100 Apple 中国主页 宽 680 像素 三星电子 700 像素 联想 725 像素 以上这些站点的网页宽度 说明宽度没有一个固定值 做一个在 800 600 分辨率下满屏幕显示的页面 可以大致选择一个近似的值 宽 768 高 430 宽 776 高 430 等 用像素为单位的表格 大多是把表格设置为居中对齐 选中表格 在属性面板选择对齐方 式为居中对齐 15 完全下载一个表格的内容 才能在 IE 中显示出来 如果页面文件小 可以只有一个表 格放内容 如果页面文件很大 可以在页面中 从上到下放几个宽度相同的表格 分别放 不同的内容 这样就会一个一个显示表格里面的内容 不用等整个网页的内容下载完 下 面是 Apple 中国主页的结构 五 五 版式设计 设计精美的网站 都是采用了优秀的版式设计 做一个网页 先要规划好版式 本篇 主要介绍制作网页时的版式设计 主要内容 16 几种常用的版式 分栏结构 LOGO 标志 尺寸 Banner 横幅 尺寸 导航栏类型 导航菜单位置 网页内容 版权声明 以上是一个主页的简单结构 由三个表格组成 第一个表格 二行一列 第一行放 LOGO 和 Banner 第二行放导航菜单 中间一个表格 一行二列 里面再分别插入两个表格 左边表格放导航或者图片 右边表 格放网页内容 典型的二分栏结构 下面一个表格 一行一列 放版权声明 几种国际尺寸的 Banner 468 60 全尺寸 Banner 392 72 全尺寸带导航条 Banner 234 60 半尺寸按钮 LOGO 88 31 实际中 Banner 和 LOGO 尺寸是根据设计需要选择大小 并不受标准的限制 常见的 LOGO 在 页面的左上方 Banner 在页面的右上方 也有相反的例子 例如三星电子 说明在设计时 并不受什么标准的限制 常见的分栏结构 还有三分栏 四分栏 下面是一个三分栏的结构 最下面的表格 一行一列 放版权声明 联系方式 导航栏在网页的设计中 直接关系到使用网页的方便 和整个网页的美观也有很大关 系 如果是以内容为主的网页 直接放入文字作为栏目 以键盘上的 分隔 一行一列的表 格 如果栏目多 可以变成二行一列的表格 常见于门户网站 如 17 如果内容很多 兼顾美观 推荐使用弹出式菜单 在 Dreamweaver MX 中文版中可以直接做 出弹出式菜单 不象以前的版本那么复杂 将在以后的文章中介绍 如果是个人网站 内容较少 可以使用尺寸较大的图片作菜单 应用 CSS 滤镜后 可以有 很好的效果 现在最流行的就是 Flash 导航菜单了 晃到一个按钮上时 有动画有声音 效果非常好 但是在没有装 Flash 播放器的电脑上 不能显示 现在国内使用较多的是使用按钮做导航 在 Dreamweaver MX 中文版提供了直接制作 Flash 按钮的功能 输入文字就可以做出中文的 Flash 按钮 网页的内容主要是文字和一些图片 为了方便阅读 两行文字之间的距离不宜太近 需要 在 CSS 中设置行距 六 六 移动布局单元格和表格及调整它们的大小 调整布局单元格的大小 选择一个单元格 按住 Ctrl 键的同时单击该单元格中的任 何位置 该单元格周围出现选择控制点 拖动选择控制点来调整单元格的大小 移动布局单元格 按住 Ctrl 键的同时单击该单元格中的任何位置 将该单元格拖到其布 局表格中的另一个位置 按箭头键移动该单元格 每次移动 1 个像素 在按住 Shift 键 的同时按箭头键移动该单元格 每次 10 个像素 18 调整布局表格的大小 通过单击表格顶部的标签选择一个表格 该表格周围出现选择控制 点 拖动选择控制点来调整表格的大小 移动布局表格移动布局表格 通过单击表格顶部的标签选择一个表格 该表格周围出现选择控制点 将 表格拖到页上的另一个位置 只有当布局表格嵌套在另一个布局表格中时 才可以移动该 布局表格 19 七 七 在布局视图中设置对象属性 在布局视图中可以设置各种对象的属性 本篇的主要内容是了解各种设置的作用 1 给图像描边 作用 增加图片的美观 简明步骤 选中一个图像 边框设置为 1 就给图像加了一个像素的边框 选中页面中的 一个图像 在属性面板 边框 中填 1 经过描边后的图像在浏览器中显示如下图 2 设置图文混排 图文混排的作用 当没有设置图文混排 页面看起来很不美观 要使图像和文字在一起美 观 必须设置好图文混排 简明步骤 选中图片 在属性面板中设置对齐方式为左对齐或者右对齐 采用默认设置时的图片和文字 选中图片 在属性面板中选择对齐方式为 左对齐 20 图文混排的结果 3 给图片增加提示 作用 使用浏览者知道所选择项目的内容 简明步骤 选中一个图片 在属性面板的替代下拉栏 输入提示文字 选中一个图片 在属性面板的替代下拉栏 输入提示文字 在浏览器中 当指向这个图片时 就会出现文字提示 4 创建图像地图 作用 当点击一个图像的不同部分 可以链接到一个新的网页 也可以在当前窗口打开 简明步骤 选中目标图片 选择属性面板中的热点工具 用热工具在图片中画出热点区域 在属性面板中输入链接地址 选择目标窗口打开方式 选中目标图片 选择属性面板中的矩形热点工具 21 用热工具在图片中画出热点区域 在属性面板中输入链接地址 选择目标窗口打开方式 5 设置图像边距 作用 设置图像边距 可以使图像和表格边框产生一个边距 也会和相邻的文字或者其它 图片产生一个边距 有时候设置边距为一个非 0 的数值可以起到美观的作用 但是有的时 候输入数值为 0 的边距可以使用页面紧凑 简明步骤 选中一个图片 在属性面板中 给垂直边距和水平边距输入数值 没有设置边距的图片 输入了垂直边距和水平边距的效果 明显和表格边框有距离 22 八 八 表格的使用 虽然您能够在 布局 视图中调整绝大部分设计元素 但有一些改变却必须在 标准 视图中才能完成 本文主要内容是表格的使用 主要内容 1 理解单元格 表格 间距 填充 边框 2 调整行和列的宽度 高度 3 制作一象素表格 4 拆分和合并单元格 第一部分 第一部分 当单元格边距和单元格间距没有指定数值时 Netscape Navigator Microsoft Internet Explorer 和 Dreamweaver 都将以间距 2 填充 1 的设置显示表格 填充 单元格内容和单元格边框之间的距离 单位 象素 间距 单元格之间的距离 单位 象素 插入一个表格 为了便于分析表格 这里单元格间距设置为 10 插入一个表格 单元格 在表格中点击以选定单元格 也可以在标签选择器里点击标签以选择单元 格 23 表格 在标签选择器里点击标签以选择表格 一行 在标签选择器里点击标签选择一行 本实例是以一个一行二列的表格为基础 的 一个 一行一列 的表格 至少有两个边框 设置边框为 1 边框颜色黑色的表格如下图 24 红色为表格边框 绿色为单元格边框 表格边框和单元格边框的颜色可以分别指定 间距 边框和边框之间的距离就是间距 为了便于观看填充的效果 在属性面板中 填充输入为 30 填充 单元格边框和内容之间的距离就是填充 25 第二部分 调整行和列的宽度第二部分 调整行和列的宽度 鼠标放在一列的上面 出现向下的箭头时 单击 就可以选中一列 在属性面板中可以 设置所选列的宽和高 鼠标放在一行的左边 出现横向的箭头时 单击 就可以选中一行 在属性面板中可以设 置所选行的宽和高 26 第三部分 制作一像素表格第三部分 制作一像素表格 制作一像素的表格 实质上是设置间距的大小和颜色 实例为便于观看效果 把间距设 置为 10 单元格填充和边框设置为 0 单元格填充和边框不输入数值效果类似 在单元格中点击 或者选中标签选择器中的选中单元格 设置单元格的背景颜色为白 色 27 选中表格 设置表格的背景颜色为黑色 一个 10 象素宽的表格就做好了 实际上是把间距 的颜色设置成了黑色 把间距改成 1 28 发布在浏览器中的效果 第四部分 拆分和合并单元格第四部分 拆分和合并单元格 嵌套表是在表格中的一个表格 在一个单元格中 插入一个表格 就是嵌套表 29 合并单元格 按 Ctrl 点单元格 选中表格 在属性面板中点 合并所选单元格 使用 跨度 合并后的效果 拆分单元格 插入一个表格 30 在单元格中单击 选中单元格 点击属性面板中的 拆分单元格为行或列 设置拆分 方式 拆分为二行一列的表格如下图 九九 各种链接的功能和实现方法 指向文档 图象 多媒体文件或可下载软件的超文本链接称作超级链接 我们可以为 文档内任何地方的任何文本或图象创建链接 包括在标题 列表 表格 层或框架中的任 何文本或图象 31 超级链接的作用是 可以把一个网站的网页连接起来 点击链接时从一个网页跳转到另一 个网页 或者跳转到页面指定的位置 本文主要内容 各种链接的功能和实现方法 1 导航链接 实现站点内文档的链接 方法一 使用属性检查器 方法二 指向文件图标 链接文档 方法三 使用拖放创建链接 相关内容 在链接时使用的路径 目标文件的打 开方式 2 链接到文档中的指定位置 使用锚 3 空链接 是一个无指向的链接 使用空链接可以为页面上的对象或文本附加行为 4 创建 javascript 脚本链接 用于执行 JavaScript 代码或者调用 JavaScript 函数 这样 可以让来访者不用离开当前 Web 页面就可以得到关于一个项目的其他信息 当来访者点击 某指定项目时 脚本链接也可以用于执行计算 表单确认和其他处理任务 5 创建电子邮件链接 6 链接到站点中的文档或者其它站点 可以使用跳转菜单 跳转菜单是文档中的一种来访 者可以看见的弹出式菜单 其中列出了链接的文档或文件 7 给链接增加提示 给链接增加快捷键 第一部分 创建导航链接第一部分 创建导航链接 使用指向文件图标链接文档 选中图像 将 属性 检查器的 链接 域右边的 指向 文件 图标拖动到站点窗口的文档中 这种方法方便快捷 推荐使用 示例中指向一个文 件夹 如果发布到网上后 自动会打开这个文件夹下的默认首页文件 index htm 使用属性检查器 选中示例中的图像 也可以是文字 点击属性面板中的 浏览文件 图标 32 选中一个文件 会出现一个文件相对于 文档 站点根目录的选择 文档相对路 径是最适合用于本地链接的路径类型 适合绝大多数 Web 站点 推荐使用 根相对路径 如果在一个使用多台服务器的大型 Web 站点或一台服务器上有多个站点的 情况下工作 可能需要使用这种类型的路径 很少用到这种路径 如果没有服务器的控制 权限 不要使用这种方式 33 绝对路径 完整的 URL 称作绝对路径 例如在链接域输入 从打开文档的选取中创建链接 选中文字 按 Shift 键 拖动出现 指向文件 图标 把 指向文件 图标拖向目标文件 就会建立链接 选择被链接文档要打开的位置 若要使被链接文档不出现在当前窗口或框架中 从属性面板的 目标 弹出式菜单选取一 个选项 blank 在新的未命名的浏览器窗口中加载链接文档 parent 在父框架页或包含该链接的框架窗口中加载链接文档 如果包含链接的框架不是 嵌套的 则链接文档将加载到整个浏览器窗口中 34 self 将链接文档加载到与链接相同的框架或窗口中 该目标是默认值 所以通常您不需 要指定它 top 将在整个浏览器窗口中加载链接文件 同时移除所有框架 一个网站中 第一级链接或者导航链接选择 self 第二级链接和友情链接选择 blank 第二部分 使用锚第二部分 使用锚 简明步骤 选中文本 在目标文档中插入锚标记 命名 拖动 指向文件 图标到文本 链接到文档中的指定位置 在需要插入锚的地方 点一下光标 然后单击常用面板上的 命名锚记工具 键入锚记名称 一个站点中的锚记名称只可以是唯一的 否则会出现错误 在文档中选取要创建链接的文本 打开您需要链接的命名锚记所在文档 不一定要是当前 文档 可以是站点中的其它文档 点击属性面板中的 指向文件 图标 并将它拖动到您 需要链接的锚记处 35 第三部分 使用空链接第三部分 使用空链