最新版实验实训指导(人机交互界面设计).docxVIP

精品 精品 可编辑 可编辑 实验（上机）一 个人简历页面 实验（上机）目的 1、 掌握 Dw 中站点的建立方法； 2、 掌握 HTML 结构； 3、 练习网页 title 、关键字、描述的写法； 4、 练习网站目录的搭建 5、 练习 div 标签、标题标签、 p 标签、超链接的用法 实验（上机）课时 2 学时 实验（上机）环境 Dreamweaver CS5+ 预备知识 1、 HTML 结构； 2、网页 title 、关键字、描述的作用； 3、常用标签： div 、h1、p、a 的作用 实验（上机）内容 使用 DW 创建站点，并建立好站点目录和相关站点文件；在 HTML 中完成 title 、关键 字、描述；完成个人简历页面，正确使用各个标签。 实验（上机）步骤 1 、创建站点： （示例） 启动 Dreamweaver ，执行“站点 管理站点 新建 站点”菜单命令 在弹出的如图所示的站点定义对话框中设置新建站点的参数：站点名称、本地根文件夹。 根文件夹，放在自己的指定目录中。 2、搭建好站点目录 7本地 品（Q ? ? / Ji 0 S] i車地文件 —r大小i姐 ［曰馳姑点-个人简历. 文件夹 ■ IKE KDIL D. ■ 1 liases 文件夹 ￡ ■ 文件夹 ■ stylt. ass 1KE 层叠样- 目录做到规范，文件要放到对应的文件夹中。 3、连接css文件和HTML 文件。 在DW 中，拖动css文件到html的head标签之间。 Idoctype head ti tle无标起文丰％ /title /headtneta charset^^utf-A1 ti tle无标起文丰％ /title /head KUnX= 占hEEt t￥pg*g*t/匸ss” h「gf「tss/stylicsa ■ body /body 4、在页面中添加个人简历的信息。 包括，个人信息，自我推荐等。如: ALICE k Cfe^ifvi? dhdi dmlgncr frofn : k Cfe^ifvi? dhdi dmlgncr frofn : 考核内容 上交各个同学的个人简历页面。要求：页面代码工整、目录规范、结构清晰 实验（上机）二PS蒙板练习-人脸合成 实验（上机）目的 1、 掌握 PS 中蒙板的用法； 2、 掌握 PS 中图层的基本操作； 实验（上机）课时 2 学时 实验（上机）环境 Photoshops CS5+ 预备知识 1、 PS 画笔工具； 2、 PS 调色板； 实验（上机）内容 使用 PS 图层和蒙板，完成两个任务的换脸。 实验（上机）步骤 1 、使用 ps 打开素材图 1 PS 文件旧镇口至惊W图层I］文宁凹选弄潇Se 3D(D) 1MM 奮口阿和旳 匸「 ■ ■ tl ? 硕：7鱷 :■ |.^...槛去 正當 2、新建一层代开素材图 2 3、给素材2，添加蒙板 4、利用黑白画笔，完成人脸的涂抹实现人物的换脸 考核内容 上交各个同学的作品。要求：细节处理自然，不粗糙。 实验（上机）三 利用盒子模型，完成人物介绍页面 实验（上机）目的 1、 掌握 CSS 盒子模型的属性； 2、 掌握 CSS 中颜色和投影、圆角等的使用； 实验（上机）课时 2 学时 实验（上机）环境 Dreamwearver CS5+ 预备知识 1、 CSS 盒子模型； 2、 CSS 背景色设定； 3、 CSS 圆角、投影设定 实验（上机）内容 要求按照“人物介绍 .psd ”效果，完成页面。 页面板块要居中，宽度为 620px ，高为 750px 。 其他内容详见 psd 。 提示： 1、图片要有圆角，且做成圆形，还要有投影效果 2 、用户名“樱桃小丸子”有文本投影效果，文字大小 30px 3 、个人介绍文字，参考颜色： #a1ffa1, 大小 16px 实验（上机）步骤 1、建立站点，目录规范，文件关联正确 2、创建页面框架，页面板块要居中，宽度为 620px，高为 750px 。 3、依次按照效果图要求添加页面结构。 樱桃小丸子 爱生活r 考核内容 上交各个同学的作业。要求：页面代码工整、 目录规范、结构清晰 实验（上机） 实验（上机）目的 1、掌握 HTML 中表单的使用方法； 2、掌握表单元素文本框、密码框的用法； 3、掌握表单元素按钮的用法； 实验（上机）课时 2 学时 实验（上机）环境 Dreamwearver CS5+ 预备知识 1、 form 标签的使用； 2、 input 标签的使用； 3、盒子模型 实验（上机）内容 要求按照“表单 .psd ”效果，完成登录页面 提示： 1、文本框、密码框、按钮要有圆角 2、文本框、密码框聚焦要改变样式 3、文本框、密码框要有输入内容提示 实验（上机）步骤 1、建立站点，目录规