网页项目上机实施

第四章网页项目上机实施 一 设计网页效果图二 建站并布局首页三 添加文字 图片 版权信息等四 根据网页效果设计网页CSS五 设计banner动画和广告动画六 处理视频 声音等信息 第一节设计网页效果图 4 1 1网页设计的基本原则4 1 2网页效果图制作过程 Photoshop 4 1 3切片4 1 4项目1 小型超市 4 1 1网页设计的基本原则 一 反差效果好的反差效果设计可以给用户一个极好的第一印象 如果用户的眼睛没有焦点 注意力就会在处处是相同尺寸的元素和排版界面中迷失 设计师需要设计出很明显的突出视觉元素来引导用户的体验 你可以通过选择图片 颜色和字体等来形成良好的反差效果 1 图片反差 当需要很多小元素后面展示一个大尺寸插图时 这种方法很有效 4 1 1网页设计的基本原则 2 颜色反差恰到好处地使用少量颜色 是网页中另一种制造视觉反差的有效方法 可以在网页的头部和文本拷贝中使用不同的颜色 也可以在一张图片或插图的颜色里面应用 4 1 1网页设计的基本原则 3 字体反差如果你想通过字体来产生反差效果 就应该避免使用2个很相像的字体外观和大小 很相像的字体会造成混淆 并让设计变得模糊 不过把字体大小弄得很不一样就会非常有效果 或者是把字体最细和最粗的版本拼合到一起也同样有效 同样的 如果你将两种外形差别明显的两种字体排在一块 就会对它们带来的视觉冲击效果感到惊奇 4 1 1网页设计的基本原则 二 重复原则重复的设计元素可以使页面显得很连贯 还能提升品牌 在web设计中 可以很好地达到这个目的的一个方式是在网页的头部和脚部重复放元素 4 1 1网页设计的基本原则 三 排列原则在网页中使用格栏可以是你的页面变得很干净 也可以提供一个很好的设计框架 4 1 1网页设计的基本原则 三 分类原则只有在将相关元素分组 将无关元素分开的时候才会用到这个原则 假如你将所有东西都分到同一块文本块中 绝对会摧毁用户的体验 这就是为什么使用头部标签和适当的留空是那么的重要 4 1 2网页效果图的制作过程 Photoshop 一 规划1 布局创意2 颜色选择二 制作 通过项目2进行案例演示 1 背景2 图层3 工具的的使用4 滤镜 各种灯效的效果 5 文字 切片时可以隐藏 6 色彩的调整 4 1 3切片 1 切片软件2 切片注意事项3 切片的保存4 有链接的图片处理方法 4 1 4项目2 装载机企业 第二节建站并布局首页 4 2 1本地站点配置和管理4 2 2网页布局的类型4 2 3表格的基本操作4 2 4表格布局4 2 5项目2 实战演练4 2 6层布局4 2 7框架布局4 2 8项目3 实战演练 4 2 1本地站点配置和管理 1 本地网页站点的配置2 站点的管理3 如何使用dreamweaver连接站点4 连接后如何测试5 项目2实例演示 4 2 2网页布局的类型 1 国 字型2 拐角型3 标题正文型4 左右框架型5 上下框架型6 综合框架型7 封面型8 Flash型9 变化型 4 2 2网页的页面布局 1 关于第一屏一般来讲 在800 600的屏幕显示模式 这也是最常用的 下 在IE安装后默认的状态 即工具栏地址栏等没有改变 下 IE窗口内能看到的部分为778px 435px 4 2 2网页的页面布局 2 有关导航栏的位置一般来讲 导航栏要在 第一屏 能显示出来 但是有时第一屏可能会小于上面所说的435px 基于这点考虑 那种横向放置的导航栏要优于纵向的导航栏考虑 4 2 2网页的页面布局 3 什么样的布局是最好的如果内容非常多 就要考虑用 国字型 或拐角型 如果内容不算太多而一些说明性的东西比较多 则可以考虑标题正文型 那几种框架结构的一个共同特点就是浏览方便 速度快 但结构变化不灵活 而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采 封面性是首选 Flash型更灵活一些 好的Flash大大丰富了网页 但是它不能表达过多的文字信息 4 2 3表格的基本操作 1 插入表格 插入 表格 命令 或单击 插入 栏中的 常用 类型中的 插入表格 按钮 理解单元格 表格 间距 填充 边框 居中 插入一行一列表格 各项值如图 4 2 3表格的基本操作 理解表格 单元格 4 2 3表格的基本操作 4 2 3表格的基本操作 理解表格边框 单元格边框 间距 为了便于观看填充的效果 在属性面板中 填充输入为30 理解填充 单元格边框和内容之间的距离就是填充 4 2 3表格的基本操作 表格包括行 列 单元格3个组成部分 选定整个表格选定行或列选定单元格 2 选定表格和单元格 4 2 3表格的基本操作 选定表格 鼠标拖动 3 调整表格的大小 4 2 3表格的基本操作 2 调整行和列的宽度 鼠标放在一列的上面 出现向下的箭头时 单击 就可以选中一列 在属性面板中可以设置所选列的宽和高 4 2 3表格的基本操作 4 设置表格和单元格的属性 1 设置表格属性 2 设置单元格属性 4 2 3表格的基本操作 5 添加 删除行列 1 通过表格 属性 面板增加与删除表格的行和列 2 通过 修改 菜单完成增加与删除表格的行和列 4 2 3表格的基本操作 4 2 3表格的基本操作 6 单元格的合并和拆分 1 合并单元格按Ctrl 点单元格 选中表格 在属性面板中点 合并所选单元格 使用跨度 4 2 3表格的基本操作 2 拆分单元格在单元格中单击 选中单元格 点击属性面板中的 拆分单元格为行或列 设置拆分方式 4 2 3表格的基本操作 拆分后的效果 4 2 3表格的基本操作 7 单元格的复制 粘贴 移动和清除在设计网页时 可以一次复制 粘贴 移动和清除一个或多个单元格 操作方法如下 1 在网页编辑窗口中选中要复制的对象 2 复制 按Ctrl C 或 编辑 复制 命令 3 移动 按Ctrl X 或 编辑 剪切 命令 4 粘贴 按Ctrl V 或 编辑 粘贴 命令 5 拖动 按住Ctrl 拖 则完成复制操作 直接拖曳可完成对象的操作 6 清除 按Delete 或 编辑 清除 命令 4 2 3表格的基本操作 8 表格的嵌套嵌套表是在表格中的一个表格 在一个单元格中 插入一个表格 就是嵌套表 将光标插入当前表格的某个单元格中 然后可选择 插入 表格 命令 或单击 插入 栏的 常用 类型中的 插入表格 按钮 4 2 4使用表格的其他视图 1 创建布局表格和布局单元格 1 绘制布局表格 2 绘制布局单元格 3 移动布局表格和布局单元格 4 2 4使用表格的其他视图 当不在布局表格中绘制布局单元格时 会自动创建一个布局表格以容纳该单元格 布局单元格不能存在于布局表格之外 插入栏 布局 绘制布局单元格 拖动指针以创建布局单元格 插入栏 布局 绘制布局表格 拖动指针以创建布局单元格 绘制嵌套布局表格 将一个布局表格绘制在另一个布局表格中 创建嵌套表格 Ctrl 绘制布局单元格 或表格 连续创建布局单元格 或表格 4 2 4使用表格的其他视图 2 移动布局单元格和表格及调整它们的大小调整布局单元格的大小 选择一个单元格 按住Ctrl键的同时单击该单元格中的任何位置 该单元格周围出现选择控制点 拖动选择控制点来调整单元格的大小 4 2 4使用表格的其他视图 2 移动布局单元格和表格及调整它们的大小调整布局表格的大小 通过单击表格顶部的标签选择一个表格 该表格周围出现选择控制点 拖动选择控制点来调整表格的大小 4 2 4使用表格的其他视图 2 移动布局单元格和表格及调整它们的大小移动布局单元格 按住Ctrl键的同时单击该单元格中的任何位置 将该单元格拖到其布局表格中的另一个位置 按箭头键每次移动1个像素 Shift 箭头键每次移动10个像素 4 2 4使用表格的其他视图 2 移动布局单元格和表格及调整它们的大小移动布局表格 通过单击表格顶部的标签选择一个表格 该表格周围出现选择控制点 将表格拖到页上的另一个位置 只有当布局表格嵌套在另一个布局表格中时 才可以移动该布局表格 4 2 4使用表格的其他视图 3 设置布局表格和单元格属性 1 设置布局表格属性 2 设置布局单元格的属性 4 2 5项目2 装载机企业 4 2 6层布局 1 层的基本操作2 层的属性设置3 层与表格互换4 结合项目2演示层布局5 框架的基本操作6 框架的功能和使用7 结合项目3演示框架布局 4 2 6层布局 层的基本操作 1 创建层方法 1 插入法插入 布局对象 层 2 拖放法拖层图标到编辑区 3 绘制法单击层图标后 到编辑区拖动鼠标绘制 4 2 6层布局 层的基本操作 2激活和选中层方法 单击层的激活标志 或层内任何地方将光标置于该层内 然后单击标签 单击层边界 在层面板中单击层 shift可选择多个层 4 2 6层布局 层的基本操作 3删除层方法 当选中一个层后 按Delete键或单击 剪切 按钮 可删除该层 也可在层面板中删除该层 4 2 6层布局 层的基本操作 4调整 移动和对齐层 1 调整层的大小方法 选中需要调整的层 此时在层的边框四周出现8个黑色活动块 用鼠标拖曳某个活动块 即可调整层的大小 选中需要调整的层 在层的 属性 面板的 宽 和 高 两个文本框中 输入层的宽度和高度和高度尺寸 可精确调整该层的尺寸 4 2 6层布局 层的基本操作 2 移动层前提 防止重叠 未被勾选 方法 选定层 出现层激活标志 用鼠标左键拖该标志 选定层 用键盘方向键移动层 4 2 6层布局 层的基本操作 3 对齐层选定多个层 对齐的标准是最后一个选择的层 该层控制点的实心点 而其他为空心点 修改 对齐 对齐下缘 4 2 6层布局 层的属性设置 1设置层的属性层编号 层的名称 左和上 距页面或父层的左上角相对位置宽和高 层的宽度和高度 Z轴 层的重叠顺序 可见性 层的初始显示状况 可见或隐藏 背景图像 背景颜色 溢出 确定当层中内容超出设定大小时要采取的行动 剪辑 定义层的可见区域 并用于将该范围外的内容裁剪掉 4 2 6层布局 层的属性设置 2层面板的使用选择 窗口 其他 层 命令 或按F2键 可打开 层 面板 选定某个层更改层名显示 隐藏层改变层的叠放次序创建和取消嵌套层禁止层重叠 4 2 6层布局 层与表格的互换 1将层转换为表格操作步骤如下 选中要转换为层的表格 选择 修改 转换表格到层 命令 系统将打开 转换表格为层 对话框选中合适的布局工具复选框后 单击 确定 按钮 表格就可按要求转换为层 4 2 6层布局 层的基本操作 2表格转换为层问题 不是所有的浏览器都支持层 解决方法 使用层创建网页布局 然后将层转换为表格 打开要将层转换为表格的页面 选择 修改 转换 层到表格 命令 系统将打开 转换层为表格 对话框 选择好对话框中的选项后 单击 确定 按钮 层布局的页面就可转换成表格布局的页面 4 2 6项目2 装载机企业 第三节网页的编辑 4 3 1网页文本的输入和属性设置4 3 2网页图片的输入和属性设置4 3 3项目2 实战演练 4 3 1网页文本的输入和属性设置 一 文本输入1 输入文本文件 导入复制 粘贴直接输入2 输入网页中的空格汉字输入状态下输入属性面板 格式 预先格式化的Shift Ctrl 空格编辑 首选参数 常规 允许多个连续的空格3 文本换行Enter 分段 隔一行 Shift Enter 换行 不分段 4 3 1网页文本的输入和属性设置 二 文本的格式设置Dreamweaver文字格式化主要有三种方式 手工格式化方式用HTML标记格式化方式CSS样式 第9章再讲 二 文本的格式设置1 手工格式化方式属性面板中的字体 样式 大小 颜色等2 用HTML标记格式化方式属性面板中的格式 4 3 1网页文本的输入和属性设置 4 3 2网页图片的插入与属性设置 1 网页图像格式GIF 对色彩要求不高的地方可使用JPEG 用于色彩丰富的图片PNG 保留所有原始层 矢量 颜色和效果信息 2 插入图像插入 图像插入面板 常用 图像直接将图像文件拖入编辑区注意 图像插入网页后 应确定图像文件已存入站点 否则在下次打开网页时 会出现看不到图像的情况 4 3 2图片的插入与属性 3 设置图像的属性图像 设置的名称宽 高 可缩小和放大图片的显示尺寸 源文件 图片的路径和名称 链接 图像超链接的URL地址 替代 图像的说明文字编辑 可打开外部编辑器进行图片的编辑 默认为Fireworks 垂直边距和水平边距 图片四周突出的尺寸低品质源 原图的低品质替换图形边框 图片是否要加边框对齐 在一行中图形和文本的对齐方式地图 创建热区的工具 4 3 3项目2 装载机企业 1 完善首页内的相关文字2 添加相关图片3 添加框架图片4 添加裁切的图片5 添加版权信息 第四节网页CSS设计 4 4 1CSS样式概述4 4 2 CSS样式 面板的使用4 4 3项目2 使用CSS样式格式化网页元素 4 4 1CSS样式概述 1 CSS的特点其特点可以归结为以下3点 控制页面中的每一个元素 精确定位 对HTML语言处理样式的最好补充 把内容和格式处理相分离 减少工作量 4 4 1CSS样式概述 2 CSS的类型自定义CSS样式自定义CSS样式 也称为类样式 可以将样式属性设置为任何文本范围或文本块 HTML标签样式HTML标签样式 用于重新定义特定标签 如H1的格式 创建或更改H1标签的CSS样式时 所有用H1标签设置了格式的文本都立即更新 CSS选择器样式CSS选择器样式重定义特定标签组合的格式 如每当H2标题出现在表格单元格内时都应用tdh2 或重定义包含特定id属性的所有标签的格式 4 4 1CSS样式概述 3CSS的3种存在方式 1 外部文件方式外部CSS样式文件 是一系列存储在一个单独的外部文件 css文件 并非HTML文件 中的CSS样式 CSS文件的引用是在HTML的标签之间编写下列语句 其中的Style css文件应为已编好的样式表文件 2 内部文档头方式内部 或嵌入式 CSS样式表 是一系列包含在HTML文档head部分的style标签内的CSS样式 将风格直接定义在文档头之间 如 4 4 1CSS样式概述 3 直接插入式直接插入式很简单 只需在每个HTML标签后书写CSS属性即可 例如 规定一个Table标志中的字为红色 字体大小为10pt 则可书写如下 4 4 1CSS样式概述 4 CSS在Dreamweaver中的创建方法1 在 页面属性 中设置 4 4 1CSS样式概述 切换到 代码 视图 可以看到对 页面属性 进行的设置 变成了一段CSS样式代码 嵌在文档头之间 2 文本编辑Dreamweaver8在属性检查器中增加了 样式 选项 这一选项的功能是在设计页面时进行添加字体 设置颜色 大小等样式操作时 样式 中套用样式 如果套用的CSS样式不是文字 而是表格 同样可以在属性面板中设置CSS 在属性面板中都有一个类别 Class 在这里就可以设计表格的CSS样式 3 CSS样式面板 CSS样式 面板集成在 CSS 面板组中 在此面板中可以方便地进行CSS样式的添加 编辑 查看属性和删除等样式的管理 4 4 1CSS样式概述 4 4 2 CSS样式 面板的使用 1 CSS样式面板 附加样式 新建样式 编辑样式 删除样式 样式属性 样式列表 2 CSS样式 面板的结构 1 打开 CSS样式 面板 窗口 CSS样式 命令 4 4 2 CSS样式 面板的使用 3 管理样式 查看属性视图按钮 管理CSS规则按钮 4 4 2 CSS样式 面板的使用 3 管理样式包含三个允许在 属性 窗格中改变视图的按钮 类别 视图将Dreamweaver支持的CSS属性划分为8个类别 每个类别的属性都包含在一个列表中 您可以单击类别名称旁边的加号 按钮展开或折叠它 列表 视图按字母顺序显示Dreamweaver所支持的所有CSS属性 设置属性 蓝色 将出现在列表顶部 设置属性 视图仅显示那些已设置的属性 设置属性 视图为默认视图 4 4 2 CSS样式 面板的使用 3 管理样式管理CSS样式按钮 附加样式表 按钮 可调出 链接外部样式表 对话框 从中选择要链接到或导入到当前文档中的外部样式表 新建CSS样式 按钮 单击后可弹出 新建CSS样式 对话框 使用 新建CSS样式 对话框可以选择要创建的样式类型 编辑样式表 按钮 单击后可弹出 CSS样式定义 对话框 编辑当前文档或外部样式表中的任何样式 删除CSS样式 按钮 删除 CSS样式 面板中的所选样式 并从应用该样式的所有元素中删除样式 4 4 2 CSS样式 面板的使用 2 创建新的CSS样式 1 打开 新建CSS样式 对话框 2 定义要创建的CSS样式的类型创建自定义样式 Class 重定义标签使用CSS选择器 选择器 下拉列表中提供的选择器包括 a active a hover a linka visited 3 选择定义样式的位置新建样式表文件 用于创建外部样式表 仅对该文档 在当前文档中嵌入样式 a active 定义页面中的文本链接被激活 即在目标地址文件还没有打开时文本呈现的状态 a hover 光标移动到链接文本上时链接的状态 默认是光标呈现小手的形状 a link 当光标不在链接文本上时链接的状态 默认是蓝色文本 带下划线 a visited 链接目标文件打开后 再一次回到原来的页面时 刚刚单击的链接呈现的状态 默认颜色是深红色 4 4 2 CSS样式 面板的使用 3 编辑CSS样式CSS样式有8种类型 定义CSS样式类型属性定义CSS样式背景属性定义CSS样式区块属性定义CSS样式方框属性定义CSS样式边框属性定义CSS样式列表属性定义CSS样式定位属性定义CSS样式扩展属性 4 4 2 CSS样式 面板的使用 1 定义CSS类型属性使用 CSS样式定义 对话框中的 类型 类别可以定义CSS样式的基本字体和类型设置 4 4 2 CSS样式 面板的使用 2 定义CSS样式背景属性使用 CSS样式定义 对话框中的 背景 类型 可以定义CSS样式的背景设置 可以网页中的任何元素应用背景属性 4 4 2 CSS样式 面板的使用 3 定义CSS样式区块属性使用 CSS样式定义 对话框中的 区块 类别 可以定义标签和属性的间距和对齐设置 4 4 2 CSS样式 面板的使用 4 定义CSS样式方框属性使用 CSS样式定义 对话框中的 方框 类别可以为控制元素在页面上的放置方式的标签和属性定义设置 4 4 2 CSS样式 面板的使用 5 定义CSS样式边框属性使用 CSS样式定义 对话框中的 边框 类别可以定义元素周围的边框的设置 如宽度 颜色和样式 4 4 2 CSS样式 面板的使用 6 定义CSS样式列表属性使用 CSS样式定义 对话框中的 列表 类别可以为列表标签定义列表设置 如项目符号大小和类型 4 4 2 CSS样式 面板的使用 7 定义CSS样式定位属性 定位 样式属性使用 层 首选参数中定义层的默认标签 将标签或所选文本块更改为新层 4 4 2 CSS样式 面板的使用 8 定义CSS样式扩展属性 扩展 样式属性包括过滤器 分页和指针选项 它们中的大部分不受任何浏览器的支持 或者仅受InternetExplorer4 0和更高版本的支持 4 4 2 CSS样式 面板的使用 1 Alpha滤镜 设置透明度 其参数格式是 Alpha Opacity Finishopacity Style StartX StartY FinishX FinishY 2 Blur滤镜 设置3D效果 其参数格式是 8 定义CSS样式扩展属性 Blur Add Direction Strength 4 4 2 CSS样式 面板的使用 3 DropShadow滤镜 设置文本或图像的阴影效果 应用在文本上时 其效果更加明显 其参数格式是 DropShadow Color OffX OffY Positive 4 Glow滤镜 设置发光效果 其参数格式是 Glow Color Strength 8 定义CSS样式扩展属性 4 4 3项目2 使用CSS样式格式化网页元素 1 实现步骤 1 打开HTML网页 2 设置页面属性 添加嵌入头部的CSS样式 3 用 CSS样式 面板创建CSS样式 4 在页面中应用CSS样式 5 链接样式表 统一网站风格 用 CSS样式 面板创建CSS样式 创建表格文字样式td创建表格边框样式 redline创建用于版权信息文字的样式 white创建用于表单元素美化的样式 input创建扩展样式 在默认的情况下 鼠标光标为十字星形 在指向链接上方的时候 光标变为help的光标 第五节网络banner设计制作 4 5 1banner的基本知识4 5 2网络banner设计特点4 5 3Flash设计banner的建议4 5 4项目2 用Flash制作相关banner 4 5 1Banner的基本知识 1 什么是BannerBanner一般翻译为网幅广告 旗帜广告 横幅广告等 在网络营销术语中 BANNER是一种网络广告形式 BANNER广告一般是放置在网页上的不同位置 在用户浏览网页信息的同时 吸引用户对于广告信息的关注 从而获得网络营销的效果 2 Banner的规格和形式 1 BANNER广告有多种表现规格和形式 其中最常用的是486 60像素的标准标志广告 由于这种规格曾处于支配地位 在早期有关网络广告的文章中 如没有特别指名 通常都是指标准标志广告 这种标志广告有多种不同的称呼 如横幅广告 全幅广告 条幅广告 旗帜广告等 通常采用图片 动画 FLASH等方式来制作BANNER广告 4 5 1Banner的基本知识 2 Banner的规格和形式 2 除了标准标志广告 早期的网络广告还有一种略小一点的广告 称为按钮式广告 BUTTON 常用的按钮广告尺寸有四种 125 125 方形按钮 120 90 120 60 88 31 随着网络广告的不断发展 新形式和规格的网络广告不断出现 因此美国交互广告署 IAB 也在不断颁布新的网络广告标准 4 5 1网络Banner的设计特点 1 首页 这是网站的门面 代表公司的形象 应该特别注重设计很规划 2 框架页 网站的主要结构页面 又称次首页或内页 大型网站往往框架页即为首页 如一些门户网站 框架页主要是网站的内部主要栏目的首页 讲究风格的一致性 并与这个 主页呼应 3 普通页 望站主要的承载信息的页面 设计要求不高 但要求连接准确 文字无误 图文并茂 并延续网页的风格 4 弹出页 一般用与广告 新闻 消息 到其他网站的连接等 一般使用很少 通过上面的分析 我们可以得出 从功能上来看 首页主要承载着树立企业形象 当然不仅仅是首页 的作用 所以一个好的banner设计可以给网站增辉添彩 树立网站形象 并达到广告的预期效果 所以如何把握页面中的banner设计就成了各网站美术设计师相当看中的部分 1 尽量减少矢量图形的路径节点数2 作为装饰的比较复杂的小型文字 logo重复使用时尽量用位图3 可以用一小张位图作为颜料填充出一些重复的图形 肌理式的背景4 尽量减少动态MC的多层套嵌5 尽量减少多个MC在同一帧内同时运动6 避免大面积位图的移动 变形 能在外部软件中变形的 就不要放到flash里来做 放大缩小后再导入 7 尽量减少MC做大小 旋转的急剧变化8 在可能的情况下尽量减小Flash动画在屏幕显示中所占的比例9 减少每秒帧数10 使用FLASH5格式生成文件 4 5 3Flash设计banner的建议 相关补充 1 从Flash程序上来说 尽量减少使用循环复制MC 及时删除无用的MC和变量 释放内存 以减少客户端消耗 尽量避免使用复杂的AS运算 2 避免在首帧一次载入大量的元素 因为在此下载过程中 你的Banner是一片空白 3 一定要设置背景颜色 因为投放网站不会每次为你改HTML的背景色代码 4 尽量针对不同尺寸的BANNER单独制作Flash 而非做出一个后 用HTML放大缩小 5 要多预备一个动画GIF版本 香港网站普遍还要加一个clickTag参数作联结 clickTag是variable 真正连结通过flashhtml swf clickTag http 转入 Yahoo要求只能是flash5 制作过程中注意as兼容性 6 静态文字在导出前统统打散 可以减少文件大小 如果嫌以后修改麻烦 可以先复制一个引导层放原始文字 7 所有的图片在外部用图像压缩工具压缩 比如ps 最好是fireworks 不要用flash里面压缩 8 能用纯色 尽量用纯色 不能用的话也尽量用不透明过渡 尽量少用透明过渡色 少用透明渐变 4 5 4项目2 用Flash制作相关banner 第六节声音和视频的处理 4 6 1常见的声音和视频文件格式的介绍4 6 2利用Premiere实现声音文件的常用处理4 6 3利用Premiere软件进行视频编辑4 6 4项目3 处理相关的声音和视频文件 4 6 1常见的声音和视频文件格式的介绍 1 视频格式 MPEG MPGQTMAVIRM RAMOVDATFLC 4 6 1常见的声音和视频文件格式的介绍 1 音频格式 WAVMID MIDIMP3 MP2AIF AIFFAUWMA 4 6 2利用Premiere实现声音文件的常用处理 1 导入声音文件2 精确剪辑声音文件的长度3 增加淡入淡出效果4 混合声音文件5 制作特殊声音效果6 声音文件的输出 1 采集导入素材2 剪辑素材3 添加视频特效4 添加视频转场5 创建字幕6 添加音频特效7 输出作品 4 6 2利用Premiere软件进行视频编辑 4 6 4项目3 处理相关的声音和视频文件 第十节插入多媒体元素 本章重点 如何插入Flash对象 声音 视频等多媒体元素丰富网页 第十节插入多媒体元素 1网页的动感效果设计2插入Flash对象3添加背景音乐4插入其它多媒体元素5插入第三方插件6讲解演示设计项目中添加多媒体元素的操作 1 网页的动感效果设计 1 1案例综述 本章案例主要是通过在网页中插入Flash动画和Applet插件等多媒体元素来美化网页 使网页看上去更加生动 1 网页的动感效果设计 1 2案例分析 本页面的制作分五个步骤进行 页面基本制作Banner条的制作导航条的制作正文区的制作 扩展功能 1 网页的动感效果设计 1 3实现步骤 页面基本制作创建站点 创建主页文件 设置标题Banner条的制作 透明背景的Flash 设置图片背景 插入Flash 设置背景透明参数导航条的制作插入Flash按钮 1 网页的动感效果设计 1 3实现步骤 正文区的制作用CSS样式格式化页面 插入Flash文本 插入图像查看器 插入JavaApplet小程序 插入背景音乐扩展功能扩展命令 扩展对象 扩展行为 2 插入Flash对象 Flash动画的优点 文件小 网上传输快 在Dreamweaver8中可以插入多种Flash对象包括 Flash动画 Flash按钮 Flash文本 Flash视频 Flash元素 图像查看器 Flash文档等 2 插入Flash对象 2 1插入Flash动画插入Flash动画的操作步骤 将插入点置于要插入Flash影片的位置 选择 插入 媒体 Flash 命令 或 常用 媒体 插入栏中Flash按钮 在弹出的对话框中选择一个swf文件 插入的Flash动画显示为一个灰色的方框 里面有Flash标志 单击 属性 面板上的 播放 按钮 可预览动画 2 插入Flash对象 2 1插入Flash动画设置Flash影片属性 Flash 影片的名称 宽 和 高 以像素为单位指定影片的宽度和高度 文件 指定指向Flash或Shockwave文件的路径 源文件 指定指向Flash源文档 fla 的路径 编辑 可以启动MacromediaFlash以更新fla文件 重设大小 将选定影片返回到其初始大小 循环 选中则连续播放 2 插入Flash对象 2 1插入Flash动画设置Flash影片属性 自动播放 选中则在加载页面时自动播放 垂直边距 和 水平边距 指定空白的像素值 品质 控制抗失真度 比例 确定影片如何适合在 宽 和 高 文本框中设置的尺寸 对齐 确定影片在页面上的对齐方式 背景颜色 指定影片区域的背景颜色 参数 打开一个对话框 可在其中输入传递给影片的附加参数 2 插入Flash对象 2 2插入Flash按钮 操作步骤如下 将光标放到要插入Flash按钮对象的位置 选择 插入 媒体 Flash按钮 命令 或单击 插入 面板上 常用 媒体 Flash按钮 打开 插入Flash按钮 对话框 设置完成后单击 确定 按钮 2 插入Flash对象 2 3插入Flash文本 操作步骤如下 将光标放到要插入Flash文本对象的位置 选择 插入 媒体 Flash文本 命令 或单击 插入 栏上 常用 媒体 Flash文本 打开 插入Flash文本 对话框 设置完成后单击 确定 按钮 2 插入Flash对象 2 4插入图像查看器 操作步骤如下 将光标放到要插入Flash元素的位置 选择 插入 媒体 图像查看器 命令 打开 保存Flash元素 对话框 设置完成后单击 确定 按钮 2 插入Flash对象 2 5插入Flash视频 操作步骤如下 选择 插入 媒体 Flash视频 命令 或单击 插入 栏的 常用 类别中的 媒体 下拉框 选择 FlashVideo 设置完成后单击 确定 按钮 2 插入Flash对象 2 6插入FlashPaper文档 操作步骤如下 将插入点放在页面上想要显示FlashPaper文档的位置 然后选择 插入 媒体 FlashPaper 命令 或单击 插入 栏的 常用 类别中的 媒体 下拉框 选择 FlashPager 在 插入FlashPaper 对话框中 浏览到一个FlashPaper文档并将其选定 设置完成后单击 确定 按钮 3 添加背景音乐 具体操作步骤如下 1 首先准备好一首MIDI音乐 它的扩展名为 mid或 rmi 这里我们使用素材mywebsite media mid下的文件bgsound mid 2 新建文档 将它保存到和音乐文件相同的目录中 文件名为mid htm 3 切换到代码窗口 在代码和之间添加标记 标记可以放在这两个标记之间的任何地方 如图3 70所示 3 添加背景音乐 4 保存文件并在浏览器中打开 此时浏览器窗口就会出现一个播放控制器 可以用来控制音乐的播放或停止 4 插入其它多媒体元素 4 1插入JavaApplet小程序 操作步骤如下 将光标放到要插入Applet小程序的位置 选择 插入 媒体 Applet 命令 或者单击 插入 面板上 常规 媒体 Applets 按钮 打开 选择文件 对话框 从对话框中选择扩展名为 class的文件 选中插入到页面中的Applet图标 打开属性面板 设置其属性 4 插入其它多媒体元素 4 2插入ActiveX控件 操作步骤如下 将光标放到要插入ActiveX对象的位置 选择 插入 媒体 ActiveX 命令或者单击 插入 面板上 常规 媒体 ActiveX 按钮 即可在文档中插入ActiveX对象 选中ActiveX对象图标 打开它的属性面板 设置其属性 4 插入其它多媒体元素 4 3插入Shockwave影片 操作步骤如下 将插入点置于要插入Shockwave影片的位置 选择 插入 媒体 Shockwave 命令 或 常用 媒体 插入栏中Shockwave图标 插入的Flash动画显示为一个灰色的方框 里面有Shockwave标志 选中此影片标记 在属性面板中设置其相关属性 5 插入第三方插件 5 1安装扩展插件利用插件可以增强Dreamweaver8的功能 在网站可以下载第三方插件 大部分是免费的 插入第三方插件的操作方法 在 文档 窗口中 将插入点置于要插入ActiveX控件的地方 选择 插入 栏 常用 媒体 插件 图标 或 插入 媒体 插件 出现的图标会标记出页面中插件将在页面上出现的位置 5 插入第三方插件 扩展插件管理器 5 2要保存下载的扩展 单击MacromediaExchangeWeb站点上的扩展链接 开始下载 将扩展保存到扩展管理器应用程序文件夹的DownloadedExtensions文件夹中 执行下列操作之一来安装扩展 在扩展管理器中 选择 文件 安装扩展 浏览到已保存在DownloadedExtensions文件夹中的该文件 然后双击文件图标 5 3安装扩展 用以下方法之一启动扩展管理器 双击Windows资源管理器 Windows 或Finder Macintosh 中的扩展文件 在Windows中 选择 开始 菜单中的 Macromedia Macromedia扩展管理器 在Macintosh中 双击Applications MacromediaExtensionManager文件夹中的扩展管理器图标 在Dreamweaver中 选择 命令 管理扩展 或者在Flash或Fireworks中选择 帮助 管理扩展功能 5 插入第三方插件 扩展插件管理器 5 插入第三方插件 扩展插件管理器 在扩展管理器工具栏的 产品 弹出菜单中 选择您要在其中安装该扩展的Macromedia产品 在扩展管理器中 选择 文件 安装扩展 在出现的文件选择对话框中 选择一个扩展名为 mxp的扩展文件 然后选择 安装 Windows 或 选择 Macintosh 仔细阅读Macromedia扩展免责声明和所有可能附带的第三方扩展许可 选择 接受 继续安装 或者选择 拒绝 取消安装 5 插入第三方插件 扩展插件管理器 如果您已安装了该扩展的另一个版本 或者安装了具有相同名称的另一个扩展 扩展管理器会问您是否禁用已经安装的那个扩展 选择 是 会用新的扩展替换以前安装的扩展 或者选择 否 取消安装 保留现有的扩展 如果系统问您是否替换一个或多个现有文件 选择 是 或者 全是 将接受扩展中包括的一个或多个版本 或者选择 否 则保留当前文件版本 如果您单击 取消 则会取消安装 不安装或替换任何文件 5 插入第三方插件 扩展插件管理器 5 4使用扩展插件Dreamweaver插件一般有三大类 对象 命令 行为对象 将出现在 插入 菜单或 插入 栏中 命令 将出现在 命令 菜单下 行为 在行为面板的动作列表中 6 演示讲解设计项目二 项目三中添加多媒体元素的操作 第11节网站Logo的设计原理和方法 第11节网站Logo的设计原理和方法 本章重点 对LOGO设计的理解 LOGO设计的国际标准规范 LOGO设计的基本原理 11节网站Logo的设计原理和方法一 什么是LOGO二 LOGO的作用三 LOGO示例赏析四 LOGO设计的国际标准规范五 LOGO设计的基本原理六 LOGO的制作工具和方法七 讲解演示项目案例一 二 三的LOGO操作内容 一 什么是LOGO 翻开字典 我们可以找到这样的解释 logn 标识语 在电脑领域而言 LOGO是标志 徽标的意思 而本站主要所收集的LOGO 是互联网上各个网站用来与其它网站链接的图形标志 二 LOGO的作用 1 LOGO是与其它网站链接以及让其它网站链接的标志和门户 INTERNET之所以叫做 互联网 在于各个网站之间可以联接 要让其他人走入你的网站 必须提供一个让其进入的门户 而LOGO图形化的形式 特别是动态的LOGO 比文字形式的链接更能吸引人的注意 在如今争夺眼球的时代 这一点尤其重要 2 LOGO是网站形象的重要体现 试问一个衣冠楚楚的人怎么能让自己的名片污渍不堪 就一个网站来说 LOGO即是网站的名片 而对于一个追求精美的网站 LOGO更是它的灵魂所在 即所谓的 点睛 之处 3 LOGO能使受众便于选择 一个好的LOGO往往会反映网站及制作者的某些信息 特别是对一个商业网站来话 我们可以从中基本了解到这个网站的类型 或者内容 在一个布满各种LOGO的链接页面中 这一点会突出的表现出来 想一想 你的受众要在大堆的网站中寻找自己想要的特定内容的网站时 一个能让人轻易看出它所代表的网站的类型和内容的LOGO会有多重要 三 LOGO示例赏析 新浪的logo底色是白 文字sina和新浪网是黑色 其中i字母上的点用了表象性手法处理成一只眼睛 而这又使整个字母i象一个小火炬 这样 即向人们传达了 世界在你眼中 的理念 激发人们对网络世界的好奇 又使人们容易记住新浪网的域名 百度的logo比较特别 主要有四部分组成 一是汉语拼音 二是一个动物的脚印 很调皮狡猾的样子 脚印里有汉语拼音 三是汉字 百度 字体选择较严肃 拼音汉字协调分布在脚印的两边 四是百度的网址 当然 百度的理念 出门找地图 上网找百度 但愿那只机灵的脚能帮我们找到所有信息 Yahoo的logo 中文站 很简单 英中文站名 红字白底 英文Yahoo字母间的排列和组合很讲究动态效果 加上Yahoo这个词的音感强 使人一见就仿佛要生惊讶 而不禁自问 DoyouYahoo 网易的logo使用了三色 红 网易 黑 NETEAS 白 底色 网易两字用了篆书 体现了古典意味 也许在暗示网易在中文网络的元老地位吧 但是 如果没有从个人主页到虚拟社区 从新闻报道到专题频道等丰富方便的服务 光是从logo上 你是难于相信 轻松上网 易如反掌 四 LOGO设计的国际标准规范 为了便于INTERNET上信息的传播 一个统一的国际标准是需要的 实际上已经有了这样的一整套标准 其中关于网站的LOGO 目前有三种规格 1 88 31这是互联网上最普遍的LOGO规格 本站所收集的均是这种大小 2 120 60这种规格用于一般大小的LOGO 3 120 90这种规格用于大型LOGO 五 设计的基本原理 一个好的LOGO应具备的条件 Poorfish认为 一个好的LOGO应具备以下的几个的条件 或者具备其中的几个条件 1 符合国际标准 废话 2 精美 独特3 与网站的整体风格相融4 能够体现网站的类型 内容和风格 五 设计的基本原理 1 在网络LOGO设计中极为强调统一的原则 统一并不是反复某一种设计原理 应该是将其他的任何设计原理如 主导性 从属性 相互关系 均衡 比例 反复 反衬 律动 对称 对比 借用 调和 变异等设计人员所熟知的各种原理 正确地应用于设计的完整和谐表现 Logo的统一性也表现在网站的整个版面色彩 布局 形式和内容上等 充分体现数字化的视觉魅力 2 构成LOGO要素的各部分 还需要有差异性 这个差异性又称为独特性 或叫做变化 体现不同网站风格和个性 具有辨别性 网络LOGO所强调的辨别性及独特性 导致相关图案字体的设计也要和被标识体的性质有适当的关联 并具备独特的视觉风格的造型 统一是在多个独特性中提炼为一个主要表现体 统一是在各独特部分之中的要素中 精确把握对象的多样统一并突出支配性要素 是设计网络LOGO必备技术因素 六 LOGO的制作工具和方法 目前并没有专门制作LOGO的软件 其实也并不需要这样的一种软件 我们平时所使用的图像处理软件或者还加上动画制作软件 如果你要做一个动画的LOGO的话 都可以很好地胜任这份工作 如PHOTOSHOP FIREWORKS等 而LOGO的制作方法也和制作普通的图片及动画没什么两样 不同的只是规定了它的大小而已 注 前期的PHOTOSHOP课程 同学已经学习过了 七 讲解演示项目案例一 二 三的LOGO具体操作内容 第12节建立网页链接 本章重点 超链接的类型和链接路径 掌握创建内部链接 外部链接 锚点链接 E mail链接的创建方法 12 建立网页链接 1 超链接的类型2 链接路径3 创建超链接的方法4 讲解演示设计项目一 二 三中添加超链接的操作部分 1 超链接的类型 超链接的类型内部链接这种链接的目标端点是本站中的其他文档 利用这种链接 可以跳转到本站点其他的页面上 外部链接这种链接的目标端点是本站点之外的站点或文档 利用这种链接 可以跳转到其他的网站上 1 超链接的类型 超链接的类型Email链接单击这种链接 可以启动电子邮件程序书写邮件 并发送到指定的地址 锚点链接这种链接的目标端点是文档中的命名锚记 利用这种链接 可以跳转到当前文档中的某一指定位置上 也可以跳转到其他文档中的某一指定位置上 热点链接主要指创建图像热区的链接 2 链接路径 1 绝对路径 如果在链接中使用完整的URL地址 这种链接路径就称作绝对路径 路径同链接的源端点无关 2 相对路径 相对路径可以表述源端点同目标端点之间的相互位置 它同源端点的位置密切相关 3 基于目录的路径 所有的路径都是从站点的根目录开始的 它同源端点的位置无关 通常用一个斜线 表示根目录 3 创建超链接 3 1创建超链接的方法 内部 外部 邮件 锚点等 在文档窗口中选中想作为链接的文本或图片在属性面板链接一项的空白处填入链接的路径 或者单击图标 在弹出的 选择文件 对话框中 选定要链接的文档及采用哪种方式表达路径 链接的对象可以是多样的 如图片文件 电子表格 或者某个网站 3 创建超链接 3 2热区链接的创建 1 新建文件 将文件保存在站点目录下 在打开的编辑窗口中插入素材目录下的图片文件 2 选中图片后 在 属性 面板上可以看到有3个分别绘制矩形 椭圆形 多边形热点的工具 3 选中其中的矩形热点工具 然后在要绘制热点的位置上按住鼠标左键并拖动鼠标 就会创建出一个热点区域 3 创建超链接 3 2热区链接的创建 4 如果热点的位置不对 可以用图像 属性 面板上的指针热点工具 拖动该热点区域到合适的位置上 5 用指针热点工具选中热点 在 链接 文本框中输入单击该热点后要打开的文件地址 这里我们输入网址 然后在 目标 下拉列表框中选择 blank 在 替代 文本框中输入 北京政府门户网站 3 创建超链接 3 2热区链接的创建 6 保存并单击其中的链接就能打开指定的网页 并跳转到指定的位置上 3 3锚记链接 如果此时能在该网页创建一个目录 浏览者只需单击目录上的项目就能跳到网页相应的位置上 而要实现这样的效果 就需要用到锚记链接 3 3锚记链接 1 命名锚记 2 创建到命名锚址 选中文本 然后在 属性 面板上的 链接 文本框中输入链接地址 锚记名字 也可以将 属性 面板上的链接定位图标拖动到网页中的锚记图标上 3 修改命名锚记 选中该图标 在 属性 面板上就会显示出该锚记的名称 如果要修改该名称 可以直接在 名称 文本框中输入新的名称 3 4添加E mail链接 E mail链接是连接到E mail地址的链接 如果用户设置了邮件软件 在浏览器中单击E mail链接会自动打开 新邮件 窗口 3 4添加E mail链接 方法1添加E mail链接最直接的方法是 在选中文本或图像后 在 属性 面板上输入以下形式的链接地址mailto image wu 其中image wu 是E mail的接收地址 3 4添加E mail链接 方法2通过 插入 工具栏也可以插入E mail链接 1 在 常用 插入工具栏中单击 电子邮件链接 按钮 打开 电子邮件链接 对话框 2 在打开的对话框的 文本 文本框中填写E mail链接中要显示的文字 在E mail文本框中填写相应的E mail地址 4 讲解演示设计项目一 二 三中添加超链接的操作部分 第13节