地址淮安市高教园区枚乘路3号.pptVIP

情境5：班级通讯录管理网站的实现 情境5：班级通讯录管理网站的实现 情境5：班级通讯录管理网站的实现 情境5：班级通讯录管理网站的实现 情境5：班级通讯录管理网站的实现 情境5：班级通讯录管理网站的实现 情境5：班级通讯录管理网站的实现 情境5：班级通讯录管理网站的实现 地址：淮安市高教园区枚乘路3号　 邮 编：223003 淮安信息职业技术学院 地址：地 址：淮安市高教园区枚乘路3号　 邮 编：223003 网页制作与网站设计教学课件 淮安信息职业技术学院 网页制作与网站设计课程组开发 任务分解 分项任务1前期策划与效果图的设计 分项任务2框架布局网站页面 分项任务框架布局网站页面 分项任务4通用查询系统的实现 分项任务5通讯录管理系统的实现 1. 任务解析与项目目标 2. 任务计划与决策 3. 任务实施 任务1：前期策划与效果图的设计 网页制作与网站设计教程 网站需求分析 班级通讯录管理网站模块 登录系统 精确查询 模糊查询 详细信息 添加信息 教学成果 修改信息 删除信息 系统退出 项目计划与决策 班级通讯录管理登录系统 用户名 密 码 登 录 重 置 图 5-3 网站登录界面草图 项目计划与决策 图 5-4网站主界面草图 班级通讯录管理登录系统 信息查询 信息添加 信息修改 信息删除 系统退出 主界面 项目实施——登录页效果图的设计 1）使用Photoshop软件打开素材文件夹中的“登录界面参考.jpg”图片，打开“联想校企合作专班运作管理平台.psd”图片，将“网站参考.psd”中的文本图层“联想校企合作专班运作管理平台”拖到“登录界面参考.jpg”图片上，最后将文本修改为“班级通讯录登录系统”，将文件保存为“班级通讯录登录界面.psd”，效果如图5-5所示。 图 5-5 参考界面上的修改图 项目实施——登录页效果图的设计 2）打开“登录框.psd”图片，将其中的“登录”相链接的图层一并拖动到“班级通讯录登录界面.psd”文件中，最后调整一下图像的位置，效果如图5-6所示。 图 5-6 添加登录框后的图 项目实施——主界面效果图的设计 1）在Photoshop中新建一个文件，宽为1000px，高734px，新建一个图层，使用矩形选框工具选区一个宽为1000px，高为118px的矩形选区，设置前景色为深蓝色（#419ccb）与背景色浅蓝色（#5cc3e2），使用渐变工具填充选区。在“网站参考.psd”文件中将院标拖动到参考图中并调整位置，打开“班级通讯录登录界面.psd”文件，将“班级通讯录登录系统”文本拖动到效果图中，并将文本内容修改为“班级通讯录管理系统”，效果如图5-7所示。 图 5-7 制作的主界面头部效果 项目实施——主界面效果图的设计 2）新建一个图层，执行“视图”→“新建参考线”命令，添加一条垂直的，位置为200px的辅助线，使用矩形选框工具选择左侧区域（除头部区域）并填充为浅灰色（#f1f2f2），在“网站参考.psd”文件中将导航按钮复制到效果图中，将“公告通知”文本拖动到效果图中，并将文本修改为“信息查询”，使用同样的方法制作其他按钮和文本，继续将在“网站参考.psd”文件中的图标与“图片新闻”内容复制并修改，使用切刀工具对文件进行切片，最后将文件保存为“班级通讯录管理系统界面.psd”，效果如图所示。 项目实施——效果图的切片与导出 对于“班级通讯录登录界面.psd”文件直接另存为“login.jpg”（登录框隐藏）即可使用。 对于“班级通讯录管理系统界面.psd”文件直接执行“文件”→“存储为Web和设备所用格式”命令，将效果图导出为网页。 将导出的后的文件index_03.gif文件中的文字“信息浏览”依次修改为“信息添加”、“信息修改”、“信息删除”，并依次保存为index_031.gif（032、033图片），如图5-9所示。 图 5-9 修改图片 1. 任务解析与项目目标 2. 任务计划与决策 3. 任务实施 前期策划与效果图的设计 小结 网页制作与网站设计教程