《Web前端技术》实验教学大纲一、实验教学内容及要求实验一利用HTML设计一个主题网站【实验类型】设计性【目的与要求】巩固第一阶段HTML知识，熟悉HTML制作网页的基础知识，并能熟练运用学过的内容制作、设计较为简单的网页。【内容提要】运用学过的HTML知识，设计一个网页，其中要求运用到以下知识点：1.不同的文字样式设计。2.插入背景图片。3.运用文件地址插入视频、图片、音频等。4.设计多窗口页面。5.设计超链接。6.运用表单设计登陆页面。7.表格、搜索引擎等的简单使用。【所需主要仪器设备】硬件要求：每名学生微型计算机一台（Win7或以上）软件要求：HBuilderX，谷歌浏览器实验二利用HTML+CSS设计一个主题网站【实验类型】设计性【目的与要求】巩固第二阶段所学的CSS知识，掌握CSS基本语法和选择器，掌握CSS控制页面样式的方法，掌握DIV+CSS布局。【内容提要】
《Web 前端技术》实验教学大纲 一、实验教学内容及要求 实验一 利用 HTML 设计一个主题网站 【实验类型】 设计性 【目的与要求】 巩固第一阶段 HTML 知识，熟悉 HTML 制作网页的基础知识，并能熟练运用学过的内 容制作、设计较为简单的网页。 【内容提要】 运用学过的 HTML 知识，设计一个网页，其中要求运用到以下知识点： 1．不同的文字样式设计。 2．插入背景图片。 3．运用文件地址插入视频、图片、音频等。 4．设计多窗口页面。 5．设计超链接。 6．运用表单设计登陆页面。 7．表格、搜索引擎等的简单使用。 【所需主要仪器设备】 硬件要求：每名学生微型计算机一台（Win7 或以上） 软件要求：HBuilderX，谷歌浏览器 实验二 利用 HTML+CSS 设计一个主题网站 【实验类型】 设计性 【目的与要求】 巩固第二阶段所学的 CSS 知识，掌握 CSS 基本语法和选择器，掌握 CSS 控制页面样 式的方法，掌握 DIV+CSS 布局。 【内容提要】
运用HTML+CSS技术设计一个网站，至少包含如下内容：1.确立网站的主题，网站主题要积极向上。2.使用DIV+CSS技术对页面进行布局，并绘出主页面的布局图。3.运用丰富的HTML标签，并使用CSS进行美化，页面需整齐美观，配色简洁大方，主题表达清晰，重点突出。4：网站至少需包含一个登录页面、一个主页面和至少三个功能页面。【所需主要仪器设备】硬件要求：每名学生微型计算机一台（Win7或以上）软件要求：HBuilderX，谷歌浏览器实验三：利用JavaScript实现一个抽奖程序【实验类型】设计性【目的与要求】巩固第三阶段所学的JavaScript知识，掌握JavaScript基本语法和DOM操作，实现一个简单的抽奖程序。【内容提要】本次实验重点考查学生对所学的JavaScript的知识掌握程度，要求综合利用JavaScript基本语法和DOM操作，实现一个抽奖程序1.构建页面结构，设计一个抽奖程序的应用场景。2.设计页面样式，要求配色简洁大方，主题突出。3.基于JavaScript实现抽奖过程，要求使用Random和计时器。4.程序需具备一定的鲁棒性，有容错处理，没有明显bug。【所需主要仪器设备】硬件要求：每名学生微型计算机一台（Win7或以上）软件要求：HBuilderX，谷歌浏览器实验四用Vue改写实验3【实验类型】设计性
运用 HTML+CSS 技术设计一个网站，至少包含如下内容： 1．确立网站的主题，网站主题要积极向上。 2．使用 DIV+CSS 技术对页面进行布局，并绘出主页面的布局图。 3．运用丰富的 HTML 标签，并使用 CSS 进行美化，页面需整齐美观，配色简洁 大方，主题表达清晰，重点突出。 4．网站至少需包含一个登录页面、一个主页面和至少三个功能页面。 【所需主要仪器设备】 硬件要求：每名学生微型计算机一台（Win7 或以上） 软件要求：HBuilderX，谷歌浏览器 实验三 利用 JavaScript 实现一个抽奖程序 【实验类型】 设计性 【目的与要求】 巩固第三阶段所学的 JavaScript 知识，掌握 JavaScript 基本语法和 DOM 操作，实 现一个简单的抽奖程序。 【内容提要】 本次实验重点考查学生对所学的 JavaScript 的知识掌握程度，要求综合利用 JavaScript 基本语法和 DOM 操作，实现一个抽奖程序： 1．构建页面结构，设计一个抽奖程序的应用场景。 2．设计页面样式，要求配色简洁大方，主题突出。 3．基于 JavaScript 实现抽奖过程，要求使用 Random 和计时器。 4．程序需具备一定的鲁棒性，有容错处理，没有明显 bug。 【所需主要仪器设备】 硬件要求：每名学生微型计算机一台（Win7 或以上） 软件要求：HBuilderX，谷歌浏览器 实验四 用 Vue 改写实验 3 【实验类型】 设计性
【目的与要求】通过对MVVM模式的理解和传统开发模式的对比，让学生认识Vue.js，通过对Vue.js运行环境的配置，完成实验3的Vue重构，加深学生对Vue.js工作原理的理解。【内容提要】本次实验重点考查学生对MVVM模式的理解和对Vue指令的运用，要求综合利用Vue指令，实现一个抽奖程序：1.构建页面结构，设计一个抽奖程序应用场景。2.设计页面样式，要求配色简洁大方，主题突出。3.基于Vue改写抽奖过程，要求使用Random和计时器。4.程序需具备一定的鲁棒性，有容错处理，没有明显bug。【所需主要仪器设备】硬件要求：每名学生微型计算机一台（Win7或以上）软件要求：HBuilderX，谷歌浏览器实验五综合利用Web前端技术设计一个主题网站【实验类型】综合性【目的与要求】掌握HTML、CSS、JavaScript等前端技术，熟悉主题网站的设计原则和实现方法。【内容提要】综合应用HTML、CSS及JavaScript的知识，设计并实现一个主题网站，要求网页布局合理、网页效果美观、流程条理清晰、技术应用合理、网页内容积极向上并且有一定的创新。至少包含如下内容：1.确立网站的主题，网站主题要积极向上。2.使用DIV+CSS技术对页面进行布局，并绘出主页面的布局图。3.运用丰富的HTML标签，并使用CSS进行美化，页面需整齐美观，配色简洁大方，主题表达清晰，重点突出。4.基于JavaScript技术实现图片轮播或者页面动态交互。5.网站至少需包含一个登录页面、一个主页面和至少三个功能页面。【所需主要仪器设备】
【目的与要求】 通过对 MVVM 模式的理解和传统开发模式的对比，让学生认识 Vue.js，通过对 Vue.js 运行环境的配置，完成实验 3 的 Vue 重构，加深学生对 Vue.js 工作原理的理解。 【内容提要】 本次实验重点考查学生对 MVVM 模式的理解和对 Vue 指令的运用，要求综合利用 Vue 指令，实现一个抽奖程序： 1．构建页面结构，设计一个抽奖程序应用场景。 2．设计页面样式，要求配色简洁大方，主题突出。 3．基于 Vue 改写抽奖过程，要求使用 Random 和计时器。 4．程序需具备一定的鲁棒性，有容错处理，没有明显 bug。 【所需主要仪器设备】 硬件要求：每名学生微型计算机一台（Win7 或以上） 软件要求：HBuilderX，谷歌浏览器 实验五 综合利用 Web 前端技术设计一个主题网站 【实验类型】 综合性 【目的与要求】 掌握 HTML、CSS、JavaScript 等前端技术，熟悉主题网站的设计原则和实现方法。 【内容提要】 综合应用 HTML、CSS 及 JavaScript 的知识，设计并实现一个主题网站，要求网页 布局合理、网页效果美观、流程条理清晰、技术应用合理、网页内容积极向上并且有一 定的创新。至少包含如下内容： 1．确立网站的主题，网站主题要积极向上。 2．使用 DIV+CSS 技术对页面进行布局，并绘出主页面的布局图。 3．运用丰富的 HTML 标签，并使用 CSS 进行美化，页面需整齐美观，配色简洁 大方，主题表达清晰，重点突出。 4．基于 JavaScript 技术实现图片轮播或者页面动态交互。 5．网站至少需包含一个登录页面、一个主页面和至少三个功能页面。 【所需主要仪器设备】
硬件要求：每名学生微型计算机一台（Win7或以上）软件要求：HBuilderX，谷歌浏览器二、实验学时分配《Web前端技术技术》课程实验教学一览表必做/选实验所需主要仪器是否为开放序号实验项目名称实验类型备注设备做实验学时利用HTML设计一个是设计性微型计算机必做12主题网站利用CSS+DIV设计一是2设计性微型计算机必做个主题网站利用JavaScript实现一设计性是微型计算机必做个抽奖程序是设计性利用Vue改写实验32微型计算机必做A综合利用Web前端技是综合性微型计算机必做术设计一个主题网站(课程设计)制订：数学与信息技术学院（系）教研室：数字媒体技术教研室执笔人：王琦审订人：韩瑞东
硬件要求：每名学生微型计算机一台（Win7 或以上） 软件要求：HBuilderX，谷歌浏览器 二、实验学时分配 《Web 前端技术技术》课程实验教学一览表 序号 实验项目名称 实验 学时 实验类型 所需主要仪器 设备 必做/选 做 是否为开放 实验 备注 1 利用 HTML 设计一个 主题网站 2 设计性 微型计算机 必做 是 2 利用 CSS+DIV 设计一 个主题网站 4 设计性 微型计算机 必做 是 3 利用 JavaScript 实现一 个抽奖程序 4 设计性 微型计算机 必做 是 4 利用 Vue 改写实验 3 2 设计性 微型计算机 必做 是 5 综合利用 Web 前端技 术设计一个主题网站 （课程设计） 4 综合性 微型计算机 必做 是 制 订：数学与信息技术学院（系） 教研室：数字媒体技术教研室 执笔人：王琦 审订人：韩瑞东