实验实训指导人机交互界面设计资料.docx
- 文档编号:4456985
- 上传时间:2022-12-01
- 格式:DOCX
- 页数:33
- 大小:3.71MB
实验实训指导人机交互界面设计资料.docx
《实验实训指导人机交互界面设计资料.docx》由会员分享,可在线阅读,更多相关《实验实训指导人机交互界面设计资料.docx(33页珍藏版)》请在冰豆网上搜索。
实验实训指导人机交互界面设计资料实验实训指导人机交互界面设计资料实验(上机)一个人简历页面实验(上机)目的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打开素材图12、新建一层代开素材图23、给素材2,添加蒙板4、利用黑白画笔,完成人脸的涂抹实现人物的换脸考核内容上交各个同学的作品。
要求:
细节处理自然,不粗糙。
实验(上机)三利用盒子模型,完成人物介绍页面实验(上机)目的1、掌握CSS盒子模型的属性;2、掌握CSS中颜色和投影、圆角等的使用;实验(上机)课时2学时实验(上机)环境DreamwearverCS5+预备知识1、CSS盒子模型;2、CSS背景色设定;3、CSS圆角、投影设定实验(上机)内容要求按照“人物介绍.psd”效果,完成页面。
页面板块要居中,宽度为620px,高为750px。
其他内容详见psd。
提示:
1、图片要有圆角,且做成圆形,还要有投影效果2、用户名“樱桃小丸子”有文本投影效果,文字大小30px3、个人介绍文字,参考颜色:
#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.elementskey=jsonkey;考核内容上交各个同学的表单页面。
要求:
页面代码工整、目录规范、结构清晰实验(上机)十一图片切换效果
(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(divsi.className=”box”)boxes.push(divsi);divsi.getElementsByTagName(“div”)0.style=divsi.getAttirbue(“data-jd”);考核内容上交各个同学的页面。
要求:
页面代码工整、目录规范、结构清晰
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 实验 指导 人机交互 界面设计 资料