第七章-设计与制作教学网站PPT课件.ppt

第七章设计与制作教学网站 1 7 1网页制作工具简介 网页制作的工具很多 按照制作方式分 可分为标注型 编程型和 所见即所得 型 所谓 所见即所得 是指创建中的文件在编辑过程中的显示与文件最终在浏览器中的显示是一样的 常用的 所见即所得 型网页编辑器有FrontPage和Dreamweaver等 后面将详细讲解用Dreamweaver制作网站的方法 2 7 2教学网页设计的艺术性及一般程序 网页艺术设计是伴随着互联网络的产生而形成的 网页设计者以所处时代所能获取的技术和艺术经验为基础 依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动 必然要成为网站设计的重要组成部分 并随着网络技术的发展而发展 从表面上看 它不过是关于网页版式编排的技巧与方法 而实际上 它不仅是一种技能 更是艺术与技术的高度统一 3 7 2 1网页的色彩设计 1 网页色彩设计的原则网页色彩设计总的原则应该是 整体调和 局部对比 即网页色彩设计要以色彩的三要素中的某一种或二种要素作调和基础 在其他一种或两种要素中进行对比处理 或者在这三要素取得调和的基础上 在某些局部用一些对比强烈的色彩 4 网页色彩设计具有四个原则 独特性 针对性 相关性 视认性 5 7 2 2网页色彩设计的方法 1 明确网站的主题 服务对象及所用色彩要表达的目的2 确定网页的主色调 根据主调色选择辅助色 可选一至两种辅助色 要控制在三种之内 确定背景和文本的色彩 通常的做法是 主要内容文字用非彩色 黑色 边框 背景 图片用彩色 确定超链接 超链接翻转效果 当前超链接及已访问的超链接的色彩 6 7 2 3网页色彩心理感觉 红色 是一种激奋的色彩 使人产生冲动 热情 活力的感觉 绿色 介于冷暖色彩之间 给人和睦 宁静 健康 安全的感觉 黄色 充满快乐和希望 它的亮度最高 蓝色 是凉爽 清新 专业的色彩 白色 给人明快 纯真 清洁的感受 黑色 给人深沉 神秘 寂静的感觉 灰色 是一种中庸 平凡 温和 谦让 中立和高雅的颜色 7 7 2 4网页页面元素的设计 网站是由多个网页组成的 网页又是由多个页面元素构成的 合理地组织编排这些元素 对于页面设计都有重要的意义 根据不同的网站的信息存储和不同的页面信息内容 每个页面不可能放置相同固定的元素 但大多数网页 都包含导航 网站标志 图片 文字 动画和超级链接等页面元素中的一项或几项 其中前四项对网页设计的艺术美的影响最大 这里着重谈谈这些元素的设计技巧 8 1 导航2 网站标志 Logo 3 图片4 文字互联网是一个很大的信息共享空间 而信息主要是以文字的形式展现的 因此 文字是页面主要组成元素之一 针对不同需要 选择字体 字号 内文编排和版式设计等 都属于文字的设计 9 7 2 4教学网页设计的一般程序 1 教学网页的教学设计2 教学网页的结构设计3 稿本准备4 素材准备5 技术合成6 网站的发布与推广 10 7 3Dreamweaver简介 Dreamweaver由Macromedia公司出品 是一个简单易用的网页制作软件 他的最大特点是 所见即所得 即在Dreamweaver的编辑状态下看到的网页效果与在浏览器中看到的效果一样 11 12 7 4网页设计前的基本设置 定义本地站点设置页面属性定义样式表 13 定义本地站点 定义本地站点就是在本地电脑硬盘上建立一文件目录 将所有的网页和相关文件都放在里面 再用Dreamweaver的站点管理功能统一管理他们 步骤为网站起名字 用鼠标单击 站点 菜单 选择 管理站点 命令 弹出 管理站点 对话框 单击 新建 按钮 选择其中的 站点 命令 在弹出的 站点定义 对话框中 键入站点的名称 14 设置网站在本地硬盘的位置 即本地根目录 以后所有的网页文件以及要用到的文件都要放在这个文件夹下 创建文档或文件夹 15 7 5制作一个简单的网页 在网页中输入文字在网页中插入图片设置网页背景 16 7 5 1在网页中输入文字 在文件面板中新建文件 打开 文件 菜单 选择 新建文件 选项 将默认名字改名 双击文件名 进入编辑状态 插入文字注意空格的插入方式设置文字属性 在属性面板上可设置文字的大小 字体等等 17 7 5 2在网页中插入图片 将光标定位于要插入图片的地方 点一下 插入 栏上的 图像 按钮 弹出 选择源图像 对话框 选择好图片 单击 确定 按钮 选中这张图 拖动图片四周的控制点 可以缩放图片 保持这张图处于选中状态 看一下 属性 面板 注意其中的 替代 一项的设置 可以在浏览器中预览一下 18 7 5 3设置网页背景 在页面的空白处单击鼠标右键 从弹出的菜单中 选择 页面属性 选项 弹出 页面属性 对话框 单击 背景颜色 项后面的颜色块 弹出调色板 从中选取颜色 单击 确定 按钮 也可以用图片作为背景 在页面的空白处 单击鼠标右键 从弹出的菜单中选择 页面属性 选项 弹出 页面属性 对话框 19 单击 背景图像 项后的 浏览 按钮 从 选择图像源文件 对话框中 选择所需文件 点 确定 按钮 再点 页面属性 对话框中的 确定 按钮 注意 作为背景的图片的尺寸一定要合适 太大的图片在页面上显示不下 太小会在页面上重复码放 由于网速的原因 不推荐背景使用尺寸很大的图片 通常使用尺寸较小的底纹图片 让它在页面上重复码放 20 7 5 4设置标题 在窗口的标题栏直接键入说明性文字 页面属性 中选 标题 编码 项 输入文字即可 21 7 6插入水平线 时间 特殊字符 动画 背景声音和滚动字幕 可以在页面上继续添加一些元素 使页面看起来更完整 更专业 如 插入水平线 时间和特殊字符等 22 7 6 1插入水平线 一些网站会在页面下部用一条水平线将正文内容与一些诸如版权 联系方式等的内容分隔开来 如何做这条水平线 将光标定位于要插入水平线的位置转入HTML选项卡下 单击 水平线 按钮选中这条线 可以在属性面板上设置它的属性 注意颜色的设置不能在属性面板上完成 需要单击鼠标右键 在快捷菜单中的编辑标签命令中设置颜色 23 7 6 2插入特殊字符 以版权符为例 在水平线下 先输入文字 Copyright 然后然后转到 插入 栏的 文本 选项卡下 然后单击最右侧的按钮 从弹出的菜单中选所需的字符 单击 版权 命令 版权符号就插入进来了 24 7 6 3插入时间 单击 常用 选项卡下的 时间 按钮 在弹出的 插入日期 对话框中选择合适的日期格式 25 7 6 4插入Flash动画 单击 插入 栏中 常用 选项卡下的 媒体 按钮 在弹出的菜单中选择 Flash 即可 26 7 6 5插入声音 插入手写代码光标定位到之前的位置写下代码 希望循环播放音乐 则修改为 27 直接嵌入音频文件 将声音直接插入页面中 但只有浏览者在浏览网页时具有所选声音文件的适当插件后 声音才可以播放 如果希望在页面显示播放器的外观 可以使用这种方法 将光标放置于我们想要显示播放器的位置 单击快捷栏上的 媒体 按钮 从下拉列表中选择 插件 插入要播放的声音文件 选中该图标 在属性面板中可以对播放器的属性进行设置 单击属性面板中的 参数 按钮 然后单击 按钮 在 参数 列中输入loop 并在 值 列中输入true 依次加入autostart参数 单击 确定 按钮 28 7 6 6插入滚动字幕 使用 标签选择器 插入marquee标签把光标插入点放在需要插入滚动字幕的地方 点插入栏 常用 下的 标签选择器 选择marquee标签 点 插入 按钮 29 使用 标签检查器 设置marquee的属性转换到代码视图 把光标插入点放marquee标签内 选择 窗口 标签检查器 在 标签检查器 中设置标签的各种用法 尤其是behavior和direction两项的设置 30 7 7建立超级链接 为文字添加超级链接为图片设置超级链接创建电子邮件链接创建热区链接创建锚点超级链接 31 7 7 1为文字添加超级链接 选中需要加链接的文字 点一下 属性 检查器 链接 项后面的文件夹图标 弹出 选择文件 对话框 选择所需文件 对话框下面有个 相对于 列表框 里面有 文档 和 站点根目录 两项 他们代表两种不同的链接文件路径类型 文档 是最简单的路径 一半多用于链接保存在同一文件夹中的文档 我们用得最多的就是文档相对路径 单击 确定 按钮 32 回到编辑状态 将光标定位在链接文字中间 在 属性 检查器上 链接 栏中列出的是所链接的文件 单击 目标 的下拉列表 选择 blank 项 这个选项的作用是使链接页面在一个新窗口中打开 33 文档路径类型绝对路径 是包括网站域名在内的完全路径 如果要链接当前站点之外的文档 就必须使用绝对路径 根相对路径 其中 根 是什么意思呢 前面说过 在本地磁盘上编辑网页时 需要选定一个文件夹来定义本地站点 模拟服务器上的根文件夹 系统就根据这个文件夹来确定所有链接的本地文件位置 根相对路径中的根就是指这个文件夹 根相对路径以 开头 路径是从当前站点的根目录开始计算 文档相对路径 是指包含当前文档的文件夹 也就是以当前网页所在文件夹为基础开始计算路径 34 7 7 2为图片设置超级链接 为图片设置超级链接与文字基本相同 但要注意属性面板上 边框 一项的意义 35 7 7 3创建电子邮件链接 将光标定位于要插入电子邮件链接的位置 单击 插入 工具栏 常用 选项卡下的 电子邮件链接 按钮 弹出 电子邮件链接 对话框 在 文本 栏中输入文字 在 E Mail 栏中输入地址 单击 确定 按钮 36 7 7 4创建热点链接 热区链接就是在一幅图片上建立多个链接 创建热点链接范围 用鼠标点选图片 单击属性面板上相应的热区工具按钮 作出一个蓝色半透明的链接范围 单击属性面板上的 指针热点工具 黑色箭头 拖动图中覆盖范围周围的控制点 可以改变链接范围 设置热点链接属性 使链接范围处于选中状态 在属性面板的 链接 项中设置所要链接的文件 再设置好 目标 和 替代 项 注意 相邻的热点链接范围不要有重叠的部分 否则点击链接文件时 就会出现意想不到的错误 37 7 7 5创建锚点链接 当一个页面的主题或文字较多 页面较长时 可以在一个网页内建立多个标记点 可以将链接直接指定到这些标记点上 能够使浏览者点击链接后 快速跳转到要浏览的内容 将这些标记点成为锚点 Anchor 锚点链接实际上也是一种超级链接 利用锚点链接 可以实现在一个文件中跳转 也可以从一个文件链接到另一个文件的某一个锚点标记处 38 在一个文件中跳转的例子 在网上你一定看到过这样的页面 页面很长 当浏览到最下面的时候 有一个 TOP 标志 点一下可以回到页面的顶端 这就是用锚点链接制作的 步骤 在页面顶端插入一个锚点标记 给此锚点命名 在链接文字的属性面板的 链接 栏中输入 锚点名称 39 在不同文件间用锚点链接时 连接文字的 链接 项中输入 链接文件名 锚点标记名 即可 40 7 8表格的使用 表格在网页制作中有着举足轻重的地位 网页制作过程中 精确的定位和排版都要依靠表格来完成 可以说 现在的网页制作离不开表格 绝大多说网站的网页都是以表格为主体制作的 表格在内容的组织 页面中文本和图形的位置控制方面都有很强的功能 使用表格设计页面应注意 最好先在纸上画出页面的布局 并用表格分隔好 尽可能的减少表格的数量 尤其要减少表格嵌套的个数 层数 以免造成修改上的困难 41 插入表格用表格定位使用透明GIF图 可以方便地作出各种颜色 各种高度的水平线以及各种宽度的竖直线 还可以利用透明图控制表格的高度以及表格间的距离表格的嵌套 42 7 9模板的使用 制作模板文件 跟做普通页面文件相同 只是保存时要选为 另存为模板 设置模板的可编辑区域利用模板制作新文件 43 7 10框架的使用 建立框架 单击布局框架按钮向框架中添加内容直接在框架中制作将已做好的页面文件插入框架中设置框架属性 重点是框架尺寸的设定框架之间的超级链接 即是锚点链接 44 选中要插入页面文件的框架点击属性面板上源文件后面的文件夹图标选中文件 插入框架中 45 7 12测试并上传网站 将网站上传 需要有一个FTP软件 在Dreamweaver中上传网站是很容易的 因为它本身就具有FTP的上传和下载功能 可以很方便地进行网站管理 也可以用工具软件来上传网站 如CuteFTP LeapFTP等 46 申请主页空间 挑选主页空间时 一般要选择空间在50M以上 支持CGI技术 能使用FTP以及WWW上传方式的 有一些网站提供个人主页空间 有免费的也有收费的 有很多网站都提供主页空间 申请到主页空间 也就找到了可以发布网页的地方 47 设置远程站点 选择 Site 菜单中的 DefineSites 选项 选择站点 单击 Edit 按钮 从左侧的 C