网站建设实例之英语素材库备课辅助系统(ppt 24页).ppt

第四周 网页制作与网站设计教程 淮安信息职业技术学院计算机科学与工程系网页制作与网站设计课程组制 第八章网站建设实例英语素材库备课辅助系统主页建设实例 网页制作与网站设计课程讲义 第八章网站建设实例 本章要点 网页效果图的制作流程教育类网站的开发思路Photoshop中路径的使用方法Photoshop中层的样式的使用方法效果图切片的技巧网页导出后的后期修饰 英语素材库备课辅助系统 项目背景 第八章网站建设实例 现代远程高等教育资源库 项目是国家教育部新世纪网络课程建设工程的一个主题项目 该项目的英语教学素材库子模块于2002年3月立项 目前已完成 在现有的素材库的基础上 开发适合教师电子备课的支撑平台 成为了进一步的重点开发目标 本系统是基于现有英语素材库的网上电子备课平台的一个界面 英语素材库备课辅助系统 网站设计草图 第八章网站建设实例 背景图片 系统名称 子模块 子模块 子模块 子模块 子模块 子模块 英语素材库备课辅助系统 效果图制作过程 第八章网站建设实例 过程演示 1 打开Photoshop软件 新建文件命名为 英语素材库备课辅助平台 大小为 770像素 430像素 同时打开素材文件夹中的 楼 jpg 将该图片拖到当前的图中去并且放到适当的位置 如图 英语素材库备课辅助系统 效果图制作过程 第八章网站建设实例 2 用钢笔工具沿着楼体的走势绘制弧形路径 如图所示 英语素材库备课辅助系统 效果图制作过程 第八章网站建设实例 3 新建图层 弧形 选取前景色为与楼体类似的蓝色 回到路径面板中点击 描边 按钮 即可得到一条清晰而平滑的曲线 如图 英语素材库备课辅助系统 效果图制作过程 第八章网站建设实例 4 双击 弧线 图层 给弧线增加投影效果 最终效果如图 英语素材库备课辅助系统 效果图制作过程 第八章网站建设实例 5 打开素材文件夹中的 1 jpg 到 6 jpg 将这些图片拖到当前的图中去并且放到适当的位置 如图 英语素材库备课辅助系统 效果图制作过程 第八章网站建设实例 6 将以上六个小图链接起来后 合并这些图层 再给该层增加阴影效果 如图所示 英语素材库备课辅助系统 效果图制作过程 第八章网站建设实例 7 用文字工具添加 英语素材库辅助备课平台 文字 颜色设置为 F6530B 字体大小为24像素 效果如图所示 英语素材库备课辅助系统 效果图制作过程 第八章网站建设实例 8 用文字工具添加 E Prepare 文字 颜色设置为 F6530B 字体大小为60像素 点击编辑菜单后选择 自由变换 工具将 E Prepare 调整 效果如图8 8所示 英语素材库备课辅助系统 效果图制作过程 第八章网站建设实例 9 将 E Prepare 文字复制一层 底层颜色设置为 897DA3 再通过向下和向右箭头分别移动2像素 给上层文字增加图层样式 斜面与浮雕 与 渐变与叠加效果 选择由蓝色到白色的过渡 的样式设置如图 效果如右图 英语素材库备课辅助系统 效果图制作过程 第八章网站建设实例 9 用文字供给增加 图像资源 字号12pixel 颜色为白色 设置外发光效果 同理 音频资源 视频资源 文字资源 查找资源 帮助信息 效果可以直接复制 或直接将特效拖放到新的图层上就可以了 效果如图 10 通过抓屏法到其他网页中抓取一个含有 按钮 和 文本框 的图片 然后再添加 用户名 和 密码 字样 本例的效果图到此就制作完成了 英语素材库备课辅助系统 主页的输出 第八章网站建设实例 1 打开ImageReadyCS软件 打开 英语素材库备课辅助平台 psd 图片 复制 图像资源 层 设置外发光渐变为F0880A过渡向透明 设置结束后隐藏该层 用切刀对该图片进行切割 如图 演示 英语素材库备课辅助系统 主页的输出 第八章网站建设实例 2 当选中切片4 图像资源 时 打开 Web内容 面板 在该切片上点击右键 选择 增加滚动状态 选项 如左图 之后会发现在该面板下多了一个新的状态 over 状态 此时进入 图层面板 隐藏蓝色的 图像资源 层 显示橙色的 图像资源 层 最终的效果如右图 演示 英语素材库备课辅助系统 主页的输出 第八章网站建设实例 3 采用同样的方式 将其他的几个切片 音频资源 视频资源 文字资源 图像资源 查找资源 帮助信息 都做成类似的效果 4 执行 文件 将优化结果存储为 命令 对效果图进行输出保存 命名为 index html 导出完成后即可使用浏览器预览效果 演示 英语素材库备课辅助系统 后期处理与网页编辑 第八章网站建设实例 演示 1 用DreamWeaver打开上图后 插入表格为2行1列 宽度为100 高度为100 第1行高度为92 水平对齐方式为 水平对齐 垂直对齐方式为 中间对齐 第2行高为8 将输出的网页表格选中剪切后 粘贴到第1行中 预览效果如图所示 英语素材库备课辅助系统 后期处理与网页编辑 第八章网站建设实例 2 在第2行中输入 Copyright 2004 2007HCIT版权所有 淮安信息职业技术学院 字号为2像素 3 选中 index20 gif 用户名 密码所在的图片 观察大小宽308像素 高32像素 将其删除 同时设置背景图片为 index20 gif 然后再次插入一个1行5列的表格 大小为宽308像素 高32像素 4 调整适当的大小 在第1列中输入 用户名 第三列中输入 密码 再往第2列 第4列中分别插入一个文本框 在最后一列中插入一个按钮 最终的预览效果如图所示 英语素材库备课辅助系统 后期处理与网页编辑 第八章网站建设实例 第八章网站建设实例 本章小节 网页效果图的制作流