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

实验（上机）一 个人简历页面 实验（上机）目的 掌握Dw中站点的建立方法； 掌握HTML结构； 练习网页title、关键字、描述的写法； 练习div标签、标题标签、p标签、超链接的用法 2学时 实验（上机）环境 Dreamweaver CS5+ 预备知识 1、HTML结构；2、网页title、关键字、描述的作用； 1、p、a 1、创建站点：（示例） 在弹出的如图所示的站点定义对话框中设置新建站点的参数：站点名称、本地根文件夹。 根文件夹，放在自己的指定目录中。 目录做到规范，文件要放到对应的文件夹中。 在DW中，拖动css文件到html的head标签之间。 4、在页面中添加个人简历的信息。 包括，个人信息，自我推荐等。如： 考核内容 上交各个同学的个人简历页面。要求：页面代码工整、目录规范、结构清晰  实验（上机）课时 2学时 实验（上机）环境 Photoshops CS5+ 预备知识 1、PS画笔工具；2、PS调色板； 1、使用ps打开素材图1 2、新建一层代开素材图2 3、给素材2，添加蒙板 4、利用黑白画笔，完成人脸的涂抹实现人物的换脸 考核内容 上交各个同学的作品。要求：细节处理自然，不粗糙。 实验（上机）三 利用盒子模型，完成人物介绍页面 实验（上机）目的 掌握CSS盒子模型的属性； 掌握CSS中颜色和投影、圆角等的使用； 实验（上机）课时 2学时 实验（上机）环境 Dreamwearver CS5+ 预备知识 1、CSS盒子模型；2、CSS背景色设定； 实验（上机）步骤 1、建立站点，目录规范，文件关联正确 2、创建页面框架， 考核内容 上交各个同学的作业。要求：页面代码工整、目录规范、结构清晰 2、 3、2学时 实验（上机）环境 Dreamwearver CS5+ 预备知识 1、form标签的使用；2、input标签的使用； 实验（上机）步骤 1、建立站点，目录规范，文件关联正确 2、创建页面框架，800px，高度自动拓展 考核内容 上交各个同学的登录框页面。要求：页面代码工整、目录规范、结构清晰 实验（上机）五 导航制作 实验（上机）目的 1、掌握HTML中无序列表ul标签的使用方法； 2、 3、2学时 实验（上机）环境 Dreamwearver CS5+ 预备知识 1、无序列表ul标签的基本结构；2、浮动与清除浮动； 实验（上机）步骤 1、建立站点，目录规范，文件关联正确 2、创建页面导航，800px，高度根据效果图设定 完成相关样式： 上交各个同学的导航页面。要求：页面代码工整、目录规范、结构清晰 2、 3、 4、掌握绝对与相对定位的用法 实验（上机）课时 2学时 实验（上机）环境 Dreamwearver CS5+ 预备知识 1、无序列表ul标签的基本结构；2、浮动与清除浮动； 4、掌握绝对与相对定位的使用以及它们各自的作用与区别。 实验（上机）内容 要求按照“图片列表.psd”效果，完成导航页面 。 实验（上机）步骤 1、建立站点，目录规范，文件关联正确 2、创建页面导航，，高度根据效果图设定 完成相关样式： 考核内容 上交各个同学的图片列表页面。要求：页面代码工整、目录规范、结构清晰实验（上机）七 模拟购物车 实验（上机）目的 1、掌握JS中事件与函数的用法 2、掌握获取页面标签的方式 2学时 实验（上机）环境 Dreamwearver CS5+ 预备知识 1、JS中的事件；2、函数的使用； 4、获取更改页面内容。 实验（上机）内容 要求按照淘宝“购物车”效果，完成购物页面，点击按钮能够增加、删除数量且能更改相应的总价 。 实验（上机）步骤 1、建立站点，目录规范，文件关联正确 2、创建页面导航，，高度根据效果图设定 完成相关JS代码： 考核内容 上交各个同学的购物车页面。要求：页面代码工整、目录规范、结构清晰  2、时间的获取：年月日，时分秒Interval的使用 实验（上机）课时 2学时 实验（上机）环境 Dreamwearver CS5+ 预备知识 1、时间的创建；new Date（）2、时间的获取；时间对象的常用方法 实验（上机）步骤 1、建立站点，目录规范，文件关联正确 2、创建页面导航，，高度根据效果图设定 h2显示时间：/h2 div id=nr span id=showtime今天：2009年7月19 星期天/span /div 完成相关JS代码： 考核内容 上交各个同学的页面。要求：页面代码工整、目录规范、结构清晰  时钟 2、时间的获取：年月日，时分秒Interval的使用 4、CSS3旋转样式2学时 实验（上机）环境 Dreamwearver