实验实训指导人机交互界面设计.docx
- 文档编号:24499332
- 上传时间:2023-05-28
- 格式:DOCX
- 页数:35
- 大小:3.71MB
实验实训指导人机交互界面设计.docx
《实验实训指导人机交互界面设计.docx》由会员分享,可在线阅读,更多相关《实验实训指导人机交互界面设计.docx(35页珍藏版)》请在冰豆网上搜索。
实验实训指导人机交互界面设计
实验(上机)一个人简历页面
实验(上机)目的
1、掌握Dw中站点的建立方法;
2、掌握HTML结构;
3、练习网页title、关键字、描述的写法;
4、练习网站目录的搭建
5、练习div标签、标题标签、p标签、超链接的用法
实验(上机)课时
2学时
实验(上机)环境
DreamweaverCS5+
预备知识
1、HTML结构;
2、网页title、关键字、描述的作用;
3、常用标签:
div、h1、p、a的作用
实验(上机)内容
使用DW创建站点,并建立好站点目录和相关站点文件;在HTML中完成title、关键字、描述;完成个人简历页面,正确使用各个标签。
实验(上机)步骤
1、创建站点:
(示例)
启动Dreamweaver,执行“站点>管理站点>新建>站点”菜单命令
在弹出的如图所示的站点定义对话框中设置新建站点的参数:
站点名称、本地根文件夹。
根文件夹,放在自己的指定目录中。
2、搭建好站点目录
目录做到规范,文件要放到对应的文件夹中。
3、连接css文件和HTML文件。
在DW中,拖动css文件到html的head标签之间。
4、在页面中添加个人简历的信息。
包括,个人信息,自我推荐等。
如:
考核内容
上交各个同学的个人简历页面。
要求:
页面代码工整、目录规范、结构清晰
实验(上机)二PS蒙板练习-人脸合成
实验(上机)目的
1、掌握PS中蒙板的用法;
2、掌握PS中图层的基本操作;
实验(上机)课时
2学时
实验(上机)环境
PhotoshopsCS5+
预备知识
1、PS画笔工具;
2、PS调色板;
实验(上机)内容
使用PS图层和蒙板,完成两个任务的换脸。
实验(上机)步骤
1、使用ps打开素材图1
2、新建一层代开素材图2
3、给素材2,添加蒙板
4、利用黑白画笔,完成人脸的涂抹实现人物的换脸
考核内容
上交各个同学的作品。
要求:
细节处理自然,不粗糙。
实验(上机)三利用盒子模型,完成人物介绍页面
实验(上机)目的
1、掌握CSS盒子模型的属性;
2、掌握CSS中颜色和投影、圆角等的使用;
实验(上机)课时
2学时
实验(上机)环境
DreamwearverCS5+
预备知识
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学时
实验(上机)环境
DreamwearverCS5+
预备知识
1、form标签的使用;
2、input标签的使用;
3、盒子模型
实验(上机)内容
要求按照“表单.psd”效果,完成登录页面。
提示:
1、文本框、密码框、按钮要有圆角
2、文本框、密码框聚焦要改变样式
3、文本框、密码框要有输入内容提示
实验(上机)步骤
1、建立站点,目录规范,文件关联正确
2、创建页面框架,页面板块要居中,宽度为800px,高度自动拓展
3、依次按照效果图要求添加页面结构。
考核内容
上交各个同学的登录框页面。
要求:
页面代码工整、目录规范、结构清晰
实验(上机)五导航制作
实验(上机)目的
1、掌握HTML中无序列表ul标签的使用方法;
2、掌握浮动用法;
3、掌握超链接及其鼠标效果用法;
实验(上机)课时
2学时
实验(上机)环境
DreamwearverCS5+
预备知识
1、无序列表ul标签的基本结构;
2、浮动与清除浮动;
3、超链接及其相关样式
实验(上机)内容
要求按照“导航.psd”效果,完成导航页面。
实验(上机)步骤
1、建立站点,目录规范,文件关联正确
2、创建页面导航,页面板块要居中,宽度为800px,高度根据效果图设定
3、依次按照效果图要求添加页面结构。
完成相关样式:
考核内容
上交各个同学的导航页面。
要求:
页面代码工整、目录规范、结构清晰
实验(上机)六图片列表制作
实验(上机)目的
1、掌握HTML中无序列表ul标签的使用方法;
2、掌握浮动用法;
3、掌握超链接及其鼠标效果用法;
4、掌握绝对与相对定位的用法
实验(上机)课时
2学时
实验(上机)环境
DreamwearverCS5+
预备知识
1、无序列表ul标签的基本结构;
2、浮动与清除浮动;
3、超链接及其相关样式
4、掌握绝对与相对定位的使用以及它们各自的作用与区别。
实验(上机)内容
要求按照“图片列表.psd”效果,完成导航页面。
实验(上机)步骤
1、建立站点,目录规范,文件关联正确
2、创建页面导航,页面板块要居中,宽度,高度根据效果图设定
3、依次按照效果图要求添加页面结构。
完成相关样式:
考核内容
上交各个同学的图片列表页面。
要求:
页面代码工整、目录规范、结构清晰
实验(上机)七模拟购物车
实验(上机)目的
1、掌握JS中事件与函数的用法
2、掌握获取页面标签的方式
3、掌握获取、更改标签内容的方式
实验(上机)课时
2学时
实验(上机)环境
DreamwearverCS5+
预备知识
1、JS中的事件;
2、函数的使用;
3、通过ID获取页面标签
4、获取更改页面内容。
实验(上机)内容
要求按照淘宝“购物车”效果,完成购物页面,点击按钮能够增加、删除数量且能更改相应的总价。
实验(上机)步骤
1、建立站点,目录规范,文件关联正确
2、创建页面导航,页面板块要居中,宽度,高度根据效果图设定
3、依次按照效果图要求添加页面结构。
完成相关JS代码:
考核内容
上交各个同学的购物车页面。
要求:
页面代码工整、目录规范、结构清晰
实验(上机)八时间走动效果
实验(上机)目的
1、掌握时间对象的创建
2、时间的获取:
年月日,时分秒
3、掌握计时器:
setInterval的使用
实验(上机)课时
2学时
实验(上机)环境
DreamwearverCS5+
预备知识
1、时间的创建;newDate()
2、时间的获取;时间对象的常用方法
3、时间的走动:
计时器的使用
实验(上机)内容
实验(上机)步骤
1、建立站点,目录规范,文件关联正确
2、创建页面导航,页面板块要居中,宽度,高度根据效果图设定
3、依次按照效果图要求添加页面结构。
显示时间:
2009年7月19星期天
完成相关JS代码:
考核内容
上交各个同学的时间页面。
要求:
页面代码工整、目录规范、结构清晰
实验(上机)九时钟效果
实验(上机)目的
1、掌握时间对象的创建
2、时间的获取:
年月日,时分秒
3、掌握计时器:
setInterval的使用
4、CSS3旋转样式
实验(上机)课时
2学时
实验(上机)环境
DreamwearverCS5+
预备知识
1、时间的创建;newDate()
2、时间的获取;时间对象的常用方法
3、时间的走动:
计时器的使用
4、CSS3旋转样式
实验(上机)内容
实验(上机)步骤
1、建立站点,目录规范,文件关联正确
2、创建页面导航,页面板块要居中,宽度,高度根据效果图设定
3、依次按照效果图要求添加页面结构。
完成相关JS代码:
考核内容
上交各个同学的时间页面。
要求:
页面代码工整、目录规范、结构清晰
实验(上机)十利用JSON给表单元素传值
实验(上机)目的
1、掌握JSON的数据格式
2、掌握JSON的遍历方式
3、掌握表单元素的获取方式
实验(上机)课时
2学时
实验(上机)环境
DreamwearverCS5+
预备知识
1、JSON的概念;
2、JSON的遍历循环:
for-in;
3、通过form.elements获取表单元素
4、给表单元素赋值的方法
实验(上机)内容
实验(上机)步骤
1、建立站点,目录规范,文件关联正确
2、创建页面导航,页面板块要居中,宽度,高度根据效果图设定
3、依次按照效果图要求添加页面结构。
完成相关JS代码:
varinfo=document.forms[“info”];
varjson={
uname:
”John”,
school:
”MySchool”,
myself:
”这家伙很懒,什么都没有”
};
for(varkeyininfo.elements){
info.elements[key]=json[key];
}
考核内容
上交各个同学的表单页面。
要求:
页面代码工整、目录规范、结构清晰
实验(上机)十一图片切换效果
(1)
实验(上机)目的
1、掌握数组的概念和遍历
2、掌握getElementsByTagName的用法
3、掌握给标签动态添加事件的方法
实验(上机)课时
2学时
实验(上机)环境
DreamwearverCS5+
预备知识
1、数组概念;
2、数组的遍历:
for;
3、标签事件的添加方式
实验(上机)内容
点击缩略图,上面的大图更换地址。
实验(上机)步骤
1、建立站点,目录规范,文件关联正确
2、创建页面导航,页面板块要居中,宽度,高度根据效果图设定
3、依次按照效果图要求添加页面结构。
完成相关JS代码:
考核内容
上交各个同学的页面。
要求:
页面代码工整、目录规范、结构清晰
实验(上机)十二图片切换效果
(2)
实验(上机)目的
1、掌握数组的概念和遍历
2、掌握getElementsByTagName的用法
3、掌握给标签动态添加事件的方法
实验(上机)课时
2学时
实验(上机)环境
DreamwearverCS5+
预备知识
1、数组概念;
2、数组的遍历:
for;
3、标签事件的添加方式
实验(上机)内容
点击小点,上面的大图更换地址。
实验(上机)步骤
1、建立站点,目录规范,文件关联正确
2、创建页面导航,页面板块要居中,宽度,高度根据效果图设定
3、依次按照效果图要求添加页面结构。
完成相关JS代码:
考核内容
上交各个同学的页面。
要求:
页面代码工整、目录规范、结构清晰
实验(上机)十三登录页面
实验(上机)目的
1、掌握正则表达式的基本用法
2、掌握正则表达式常用规则的使用
3、掌握正则表达式对字符串的检测方法
实验(上机)课时
2学时
实验(上机)环境
DreamwearverCS5+
预备知识
1、正则表达式的概念;
2、正则表达式的常用规则;
3、正则表达式的test方法的使用
实验(上机)内容
按照要求对用户输入的内容进行检测,判断是否正确
实验(上机)步骤
1、建立站点,目录规范,文件关联正确
2、创建页面导航,页面板块要居中,宽度,高度根据效果图设定
3、依次按照效果图要求添加页面结构。
完成相关JS代码:
考核内容
上交各个同学的页面。
要求:
页面代码工整、目录规范、结构清晰
实验(上机)十四注册页面
实验(上机)目的
1、掌握正则表达式的基本用法
2、掌握正则表达式常用规则的使用
3、掌握正则表达式对字符串的检测方法
实验(上机)课时
2学时
实验(上机)环境
DreamwearverCS5+
预备知识
1、正则表达式的概念;
2、正则表达式的常用规则;
3、正则表达式的test方法的使用
实验(上机)内容
按照要求对用户输入的内容进行检测,判断是否正确
实验(上机)步骤
1、建立站点,目录规范,文件关联正确
2、创建页面导航,页面板块要居中,宽度,高度根据效果图设定
3、依次按照效果图要求添加页面结构。
完成相关JS代码:
考核内容
上交各个同学的页面。
要求:
页面代码工整、目录规范、结构清晰
实验(上机)十五动态生成广告并能删除
实验(上机)目的
1、DOM创建标签的方法
2、DOM删除标签的方法
3、DOM添加内容的方法
实验(上机)课时
2学时
实验(上机)环境
DreamwearverCS5+
预备知识
1、DOM创建标签:
document.createElement();
2、DOM删除标签的方法:
目标.parentNode.removeChild(目标);
3、DOM添加内容的方法:
父标签.appendChild(目标);
实验(上机)内容
用JS动态生成广告,点击“删除”能删除它。
实验(上机)步骤
1、建立站点,目录规范,文件关联正确
2、创建页面导航,页面板块要居中,宽度,高度根据效果图设定
3、依次按照效果图要求添加页面结构。
完成相关JS代码:
考核内容
上交各个同学的页面。
要求:
页面代码工整、目录规范、结构清晰
实验(上机)十六进度条
实验(上机)目的
1、DOM获取标签属性的方法
2、DOM控制标签样式的方法
实验(上机)课时
2学时
实验(上机)环境
DreamwearverCS5+
预备知识
1、DOM获取标签属性:
ID.getAttribute(“xxxx”);
2、DOM更改样式的方法:
ID.style.display=”xxxx”;
实验(上机)内容
实验(上机)步骤
1、建立站点,目录规范,文件关联正确
2、创建页面导航,页面板块要居中,宽度,高度根据效果图设定
3、依次按照效果图要求添加页面结构。
完成相关JS代码:
varbig=document.getElementById(“big”);
vardivs=big.getElementsByTagName(“div”);
varboxes=[];
for(vari=0;i<=divs.length-1;i++){
if(divs[i].className==”box”){
boxes.push(divs[i]);
divs[i].getElementsByTagName(“div”)[0].style=divs[i].getAttirbue(“data-jd”);
}
}
考核内容
上交各个同学的页面。
要求:
页面代码工整、目录规范、结构清晰
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 实验 指导 人机交互 界面设计
![提示](https://static.bdocx.com/images/bang_tan.gif)