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

《实验实训指导(人机交互界面设计)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、实验（上机）一个人简历页面实验（上机）目的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、创建站点：

2、（示例）启动Dreamweaver，执行“站点>管理站点>新建>站点”菜单命令在弹出的如图所示的站点定义对话框中设置新建站点的参数：站点名称、本地根文件夹。根文件夹，放在自己的指定目录中。2、搭建好站点目录目录做到规范，文件要放到对应的文件夹中。3、连接css文件和HTML文件。在DW中，拖动css文件到html的head标签之间。4、在页面中添加个人简历的信息。包括，个人信息，自我推荐等。如：考核内容上交各个同学的个人简历页面。要求：页面代码工整、目录规范、结构清晰实验（上机）二PS蒙板练习-人脸合成实验（上机）目的1、掌握PS中蒙板的用法；2、掌握

3、PS中图层的基本操作；实验（上机）课时2学时实验（上机）环境PhotoshopsCS5+预备知识1、PS画笔工具；2、PS调色板；实验（上机）内容使用PS图层和蒙板，完成两个任务的换脸。实验（上机）步骤1、使用ps打开素材图12、新建一层代开素材图23、给素材2，添加蒙板4、利用黑白画笔，完成人脸的涂抹实现人物的换脸考核内容上交各个同学的作品。要求：细节处理自然，不粗糙。实验（上机）三利用盒子模型，完成人物介绍页面实验（上机）目的1、掌握CSS盒子模型的属性；2、掌握CSS中颜色和投影、圆角等的使用；实验（上机）课时2学时实验（上机）环境Dreamwe

4、arverCS5+预备知识1、CSS盒子模型；2、CSS背景色设定；3、CSS圆角、投影设定实验（上机）内容要求按照“人物介绍.psd”效果，完成页面。页面板块要居中，宽度为620px，高为750px。其他内容详见psd。提示：1、图片要有圆角，且做成圆形，还要有投影效果2、用户名“樱桃小丸子”有文本投影效果，文字大小30px3、个人介绍文字，参考颜色：#a1ffa1,大小16px实验（上机）步骤1、建立站点，目录规范，文件关联正确2、创建页面框架，页面板块要居中，宽度为620px，高为750px。3、依次按照效果图要求添加页面结构。考核内容上交各个同

5、学的作业。要求：页面代码工整、目录规范、结构清晰实验（上机）四登录框美化实验（上机）目的1、掌握HTML中表单的使用方法；2、掌握表单元素文本框、密码框的用法；3、掌握表单元素按钮的用法；实验（上机）课时2学时实验（上机）环境DreamwearverCS5+预备知识1、form标签的使用；2、input标签的使用；3、盒子模型实验（上机）内容要求按照“表单.psd”效果，完成登录页面。提示：1、文本框、密码框、按钮要有圆角2、文本框、密码框聚焦要改变样式3、文本框、密码框要有输入内容提示实验（上机）步骤1、建立站点，目录规范，文件关联正确2、创建页面框

6、架，页面板块要居中，宽度为800px，高度自动拓展3、依次按照效果图要求添加页面结构。考核内容上交各个同学的登录框页面。要求：页面代码工整、目录规范、结构清晰实验（上机）五导航制作实验（上机）目的1、掌握HTML中无序列表ul标签的使用方法；2、掌握浮动用法；3、掌握超链接及其鼠标效果用法；实验（上机）课时2学时实验（上机）环境DreamwearverCS5+预备知识1、无序列表ul标签的基本结构；2、浮动与清除浮动；3、超链接及其相关样式实验（上机）内容要求按照“导航.psd”效果，完成导航页面。实验（上机）步骤1、建立站点，目录规范，文件关联正确2

7、、创建页面导航，页面板块要居中，宽度为800px，高度根据效果图设定3、依次按照效果图要求添加页面结构。完成相关样式：考核内容上交各个同学的导航页面。要求：页面代码工整、目录规范、结构清晰实验（上机）六图片列表制作实验（上机）目的1、掌握HTML中无序列表ul标签的使用方法；2、掌握浮动用法；3、掌握超链接及其鼠标效果用法；4、掌握绝对与相对定位的用法实验（上机）课时2学时实验（上机）环境DreamwearverCS5+预备知识1、无序列表ul标签的基本结构；2、浮动与清除浮动；3、超链接及其相关样式4、掌握绝对与相对定位的使用以及它们各自的作用与区别

8、。实验（上机）内容要求按照“图片列表.psd”效果，完成导航页面。实验（上机）步骤1、建立站点