web前端设计与开发-实验目的及要求web前端设计与开发实验实验须知:
1. 本实验课程一共有6个实验,围绕“个人主页”的主题,(1)使用Axure制作网站
的页面原型;(2)使用HTML标签设计页面的结构;(3)使用CSS控制页面的表现;(4)使用JavaScript脚本实现网页的交互效果;(5)并使用PhotoShop完善网站
的视觉设计(6)最终呈现一个完整的“个人主页”网站。 2. 网站推荐使用“一页式”的“响应式设计”,但这不是必须的。 3. 网站如果采用“一页式”设计,则必须有三屏内容;如果是多网页设计,则必须
有三个页面,包括首页。
实验1:网站页面原型设计
实验目的:
1. 掌握Axure工具的使用;
2. 领会网站设计的思想;
3. 理解页面原型的作用。
实验要求:
1. 网站主题:“个人主页”或“个人求职主页”;
2. 网站推荐使用“一页式”的“响应式设计”,但这不是必须的;
3. 网站如果采用“一页式”设计,则必须有三屏内容;如果是多网页设计,则必须有三个页面,包括首页在内;
4. 要求设计出网页的基本结构,并有一定的交互效果;
5. 尽可能设计出高保真型原型。
实验2:网站页面HTML设计与实现
实验目的:
1. 掌握HTML标签的使用;
2. 理解HTML标签的语义;
3. 合理使用HTML标签结构化页面元素。
实验要求:
1. 要求使用HTML语言将实验一设计的网页原型实现;
2. 要求语义化使用HTML标签,合理地结构化页面元素及内容;
3. 要求可适当分析页面布局,加入控制布局的标签;
4. 要求设计一个合适的前端框架,即能分类存放不同的文档。
实验3:使用DIV+CSS布局并美化网页
实验目的:
1. 掌握CSS基本语法;
2. 掌握DIV+CSS布局的基本技术;
3. 灵活运用CSS美化页面。
实验要求:
1. 要求使用HTML+CSS语言将实验一设计的网页原型实现;
2. 要求在实验二的基础上,开始编写CSS控制页面布局;
3. 要求尽可能使用CSS呈现页面原型中的设计;
4. 要求在CSS代码中能够清晰地看到所定义CSS代码所起的作用。
实验4:使用JavaScript实现页面的动态交互设计
实验目的:
1. 掌握JavaScript的基本使用方法;
2. 掌握JavaScript控件的使用;
3. 理解JavaScript脚本在页面中的作用。
实验要求:
1. 要求使用HTML+CSS+JavaScript语言将实验一设计的网页原型实现;
2. 要
求在实验三的基础上,开始加入JavaScript脚本实现原型设计中的动态交互部分;
3. 鼓励自己编写脚本代码,但还可以在互联网上下载相关控件,运用到页面中,实
现交互效果;
4. 要求页面中至少有两处使用JavaScript;
5. 可使用jQuery框架支持下的脚本代码。
长春大学 20 15 —2016学年第二学期Web前端开发技术课程 实验报告 学院:计算机科学技术专业:软件工程 班级:软件15402
学号:041440210 姓名:王悦 任课教师:车娜 实验三 CSS网页布局 一、实验目的 1.掌握CSS盒子模型的概念,能够灵活运用盒子模型布局页面; 2.掌握盒子模型相关属性,能够使用它们熟练地控制网页元素; 3.理解块元素与行内元素的区别,能够对它们进行转换。 二、内容及要求 运用盒子模型的相关属性实现网页弹出框效果,满足如下要求: 1.网页弹出框由上面的标题和下面的宣传内容两部分组成; 2.标题通过h2定义; 3.在段落文本中内容部分由h3和p标记进行定义; 4.应用
Web程序设计实验报告 姓名:冯刚 学号:200905030324 班级:计科3班
Html代码: 1.首页代码