实验实训指导(人机交互界面设计)

实验 上机 一实验 上机 一 个人简历页面个人简历页面 实验 上机 目的实验 上机 目的 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 2 搭建好站点目录 搭建好站点目录 目录做到规范 文件要放到对应的文件夹中 3 连接 连接 css 文件和文件和 HTML 文件 文件 在 DW 中 拖动 css 文件到 html 的 head 标签之间 4 在页面中添加个人简历的信息 在页面中添加个人简历的信息 包括 个人信息 自我推荐等 如 考核内容考核内容 上交各个同学的个人简历页面 要求 页面代码工整 目录规范 结构清晰 实验 上机 二实验 上机 二 PS 蒙板练习蒙板练习 人脸合成人脸合成 实验 上机 目的实验 上机 目的 1 掌握 PS 中蒙板的用法 2 掌握 PS 中图层的基本操作 实验 上机 课时实验 上机 课时 2 学时 实验 上机 环境实验 上机 环境 Photoshops CS5 预备知识预备知识 1 PS 画笔工具 2 PS 调色板 实验 上机 内容实验 上机 内容 使用 PS 图层和蒙板 完成两个任务的换脸 实验 上机 步骤实验 上机 步骤 1 使用 ps 打开素材图 1 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 依次按照效果图要求添加页面结构 考核内容考核内容 上交各个同学的作业 要求 页面代码工整 目录规范 结构清晰 实验 上机 四实验 上机 四 登录框美化登录框美化 实验 上机 目的实验 上机 目的 1 掌握 HTML 中表单的使用方法 2 掌握表单元素文本框 密码框的用法 3 掌握表单元素按钮的用法 实验 上机 课时实验 上机 课时 2 学时 实验 上机 环境实验 上机 环境 Dreamwearver CS5 预备知识预备知识 1 form 标签的使用 2 input 标签的使用 3 盒子模型 实验 上机 内容实验 上机 内容 要求按照 表单 psd 效果 完成登录页面 提示 1 文本框 密码框 按钮要有圆角 2 文本框 密码框聚焦要改变样式 3 文本框 密码框要有输入内容提示 实验 上机 步骤实验 上机 步骤 1 建立站点 目录规范 文件关联正确 2 创建页面框架 页面板块要居中 宽度为 800px 高度自动拓展 3 依次按照效果图要求添加页面结构 考核内容考核内容 上交各个同学的登录框页面 要求 页面代码工整 目录规范 结构清晰 实验 上机 五实验 上机 五 导航制作导航制作 实验 上机 目的实验 上机 目的 1 掌握 HTML 中无序列表 ul 标签的使用方法 2 掌握浮动用法 3 掌握超链接及其鼠标效果用法 实验 上机 课时实验 上机 课时 2 学时 实验 上机 环境实验 上机 环境 Dreamwearver CS5 预备知识预备知识 1 无序列表 ul 标签的基本结构 2 浮动与清除浮动 3 超链接及其相关样式 实验 上机 内容实验 上机 内容 要求按照 导航 psd 效果 完成导航页面 实验 上机 步骤实验 上机 步骤 1 建立站点 目录规范 文件关联正确 2 创建页面导航 页面板块要居中 宽度为 800px 高度根据效果图设定 3 依次按照效果图要求添加页面结构 完成相关样式 考核内容考核内容 上交各个同学的导航页面 要求 页面代码工整 目录规范 结构清晰 实验 上机 六实验 上机 六 图片列表制作图片列表制作 实验 上机 目的实验 上机 目的 1 掌握 HTML 中无序列表 ul 标签的使用方法 2 掌握浮动用法 3 掌握超链接及其鼠标效果用法 4 掌握绝对与相对定位的用法 实验 上机 课时实验 上机 课时 2 学时 实验 上机 环境实验 上机 环境 Dreamwearver CS5 预备知识预备知识 1 无序列表 ul 标签的基本结构 2 浮动与清除浮动 3 超链接及其相关样式 4 掌握绝对与相对定位的使用以及它们各自的作用与区别 实验 上机 内容实验 上机 内容 要求按照 图片列表 psd 效果 完成导航页面 实验 上机 步骤实验 上机 步骤 1 建立站点 目录规范 文件关联正确 2 创建页面导航 页面板块要居中 宽度 高度根据效果图设定 3 依次按照效果图要求添加页面结构 完成相关样式 考核内容考核内容 上交各个同学的图片列表页面 要求 页面代码工整 目录规范 结构清晰 实验 上机 七实验 上机 七 模拟购物车模拟购物车 实验 上机 目的实验 上机 目的 1 掌握 JS 中事件与函数的用法 2 掌握获取页面标签的方式 3 掌握获取 更改标签内容的方式 实验 上机 课时实验 上机 课时 2 学时 实验 上机 环境实验 上机 环境 Dreamwearver CS5 预备知识预备知识 1 JS 中的事件 2 函数的使用 3 通过 ID 获取页面标签 4 获取更改页面内容 实验 上机 内容实验 上机 内容 要求按照淘宝 购物车 效果 完成购物页面 点击按钮能够增加 删除数量且能更改相 应的总价 实验 上机 步骤实验 上机 步骤 1 建立站点 目录规范 文件关联正确 2 创建页面导航 页面板块要居中 宽度 高度根据效果图设定 3 依次按照效果图要求添加页面结构 完成相关 JS 代码 考核内容考核内容 上交各个同学的购物车页面 要求 页面代码工整 目录规范 结构清晰 实验 上机 八实验 上机 八 时间走动效果时间走动效果 实验 上机 目的实验 上机 目的 1 掌握时间对象的创建 2 时间的获取 年月日 时分秒 3 掌握计时器 setInterval 的使用 实验 上机 课时实验 上机 课时 2 学时 实验 上机 环境实验 上机 环境 Dreamwearver CS5 预备知识预备知识 1 时间的创建 new Date 2 时间的获取 时间对象的常用方法 3 时间的走动 计时器的使用 实验 上机 内容实验 上机 内容 实验 上机 步骤实验 上机 步骤 1 建立站点 目录规范 文件关联正确 2 创建页面导航 页面板块要居中 宽度 高度根据效果图设定 3 依次按照效果图要求添加页面结构 显示时间 今天 2009 年 7 月 19 星期天 完成相关 JS 代码 考核内容考核内容 上交各个同学的时间页面 要求 页面代码工整 目录规范 结构清晰 实验 上机 九实验 上机 九 时钟效果时钟效果 实验 上机 目的实验 上机 目的 1 掌握时间对象的创建 2 时间的获取 年月日 时分秒 3 掌握计时器 setInterval 的使用 4 CSS3 旋转样式 实验 上机 课时实验 上机 课时 2 学时 实验 上机 环境实验 上机 环境 Dreamwearver CS5 预备知识预备知识 1 时间的创建 new Date 2 时间的获取 时间对象的常用方法 3 时间的走动 计时器的使用 4 CSS3 旋转样式 实验 上机 内容实验 上机 内容 实验 上机 步骤实验 上机 步骤 1 建立站点 目录规范 文件关联正确 2 创建页面导航 页面板块要居中 宽度 高度根据效果图设定 3 依次按照效果图要求添加页面结构 完成相关 JS 代码 考核内容考核内容 上交各个同学的时间页面 要求 页面代码工整 目录规范 结构清晰 实验 上机 十实验 上机 十 利用利用 JSON 给表单元素传值给表单元素传值 实验 上机 目的实验 上机 目的 1 掌握 JSON 的数据格式 2 掌握 JSON 的遍历方式 3 掌握表单元素的获取方式 实验 上机 课时实验 上机 课时 2 学时 实验 上机 环境实验 上机 环境 Dreamwearver CS5 预备知识预备知识 1 JSON 的概念 2 JSON 的遍历循环 for in 3 通过 form elements 获取表单元素 4 给表单元素赋值的方法 实验 上机 内容实验 上机 内容 实验 上机 步骤实验 上机 步骤 1 建立站点 目录规范 文件关联正确 2 创建页面导航 页面板块要居中 宽度 高度根据效果图设定 3 依次按照效果图要求添加页面结构 完成相关 JS 代码 var info document forms info var json uname John school MySchool myself 这家伙很懒 什么都没有 for var key in info elements info elements key json key 考核内容考核内容 上交各个同学的表单页面 要求 页面代码工整 目录规范 结构清晰 实验 上机 十一实验 上机 十一 图片切换效果 图片切换效果 1 实验 上机 目的实验 上机 目的 1 掌握数组的概念和遍历 2 掌握 getElementsByTagName 的用法 3 掌握给标签动态添加事件的方法 实验 上机 课时实验 上机 课时 2 学时 实验 上机 环境实验 上机 环境 Dreamwearver CS5 预备知识预备知识 1 数组概念 2 数组的遍历 for 3 标签事件的添加方式 实验 上机 内容实验 上机 内容 点击缩略图 上面的大图更换地址 实验 上机 步骤实验 上机 步骤 1 建立站点 目录规范 文件关联正确 2 创建页面导航 页面板块要居中 宽度 高度根据效果图设定 3 依次按照效果图要求添加页面结构 完成相关 JS 代码 考核内容考核内容 上交各个同学的页面 要求 页面代码工整 目录规范 结构清晰 实验 上机 十二实验 上机 十二 图片切换效果 图片切换效果 2 实验 上机 目的实验 上机 目的 1 掌握数组的概念和遍历 2 掌握 getElementsByTagName 的用法 3 掌握给标签动态添加事件的方法 实验 上机 课时实验 上机 课时 2 学时 实验 上机 环境实验 上机 环境 Dreamwearver CS5 预备知识预备知识 1 数组概念 2 数组的遍历 for 3 标签事件的添加方式 实验 上机 内容实验 上机 内容 点击小点 上面的大图更换地址 实验 上机 步骤实验 上机 步骤 1 建立站点 目录规范 文件关联正确 2 创建页面导航 页面板块要居中 宽度 高度根据效果图设定 3 依次按照效果图要求添加页面结构 完成相关 JS 代码 考核内容考核内容 上交各个同学的页面 要求 页面代码工整 目录规范 结构清晰 实验 上机 十三实验 上机 十三 登录页面登录页面 实验 上机 目的实验 上机 目的 1 掌握正则表达式的基本用法 2 掌握正则表达式常用规则的使用 3 掌握正则表达式对字符串的检测方法 实验 上机 课时实验 上机 课时 2 学时 实验 上机 环境实验 上机 环境 Dreamwearver CS5 预备知识预备知识 1 正则表达式的概念 2 正则表达式的常用规则 3 正则表达式的 test 方法的使用 实验 上机 内容实验 上机 内容 按照要求对用户输入的内容进行检测 判断是否正确 实验 上机 步骤实验 上机 步骤 1 建立站点 目录规范 文件关联正确 2 创建页面导航 页面板块要居中 宽度 高度根据效果图设定 3 依次按照效果图要求添加页面结构 完成相关 JS 代码 考核内容考核内容 上交各个同学的页面 要求 页面代码工整 目录规范 结构清晰 实验 上机 十四实验 上机 十四 注册页面注册页面 实验 上机 目的实验 上机 目的 1 掌握正则表达式的基本用法 2 掌握正则表达式常用规则的使用 3 掌握正则表达式对字符串的检测方法 实验 上机 课时实验 上机 课时 2 学时 实验 上机 环境实验 上机 环境 Dreamwearver CS5 预备知识预备知识 1 正则表达式的概念 2 正则表达式的常用规则 3 正则表达式的 test 方法的使用 实验 上机 内容实验 上机 内容 按照要求对用户输入的内容进行检测 判断是否正确 实验 上机 步骤实验 上机 步骤 1 建立站点 目录规范 文件关联正确 2 创建页面导航 页面板块要居中 宽度 高度根据效果图设定 3 依次按照效果图要求添加页面结构 完成相关 JS 代码 考核内容考核内容 上交各个同学的页面 要求 页面代码工整 目录规范 结构清晰 实验 上机 十五实验 上机 十五 动态生成广告并能删除动态生成广告并能删除 实验 上机 目的实验 上机 目的 1 DOM 创建标签的方法 2 DOM 删除标签的方法 3 DOM 添加内容的方法 实验 上机 课时实验 上机 课时 2 学时 实验 上机 环境实验 上机 环境 Dreamwearver CS5 预备知识预备知识 1 DOM 创建标签 document createElement 2 DOM 删除标签的方法 目标 parentNode removeChild 目标 3 DOM 添加内容的方法 父标签 appendChild 目标 实验 上机 内容实验 上机 内容 用 JS 动态生成广告 点击 删除 能删除它 实验 上机 步骤实验 上机 步骤 1 建立站