Web前端开发实验教学指导书
更新时间:2023-04-26 17:39:01 阅读量: 实用文档 文档下载
- Web前端开发推荐度:
- 相关推荐
Web前端开发实验指导书
20XX年09月
目录
实验1 HTML基础与布局元素 (3)
实验2 表格与表单的应用 (6)
实验3 框架 (8)
实验4 CSS样式表基础 (12)
实验5 CSS样式布局 (16)
实验6 Dreamweaver制作网页 (19)
实验7 网站设计 (22)
实验8 JavaScript基础 (26)
实验9 JavaScript对象 (29)
实验10 DOM编程 (33)
实验11 JavaScript常用特效 (36)
3实验1 HTML 基础与布局元素
一、实验目的
1.
掌握使用HTML 的基本结构创建网页 2.
掌握使用行级和块级标签组织页面内容 3. 掌握使用图像标签实现图文并茂的页面
二、实验内容
使用HTML 基本元素设计基本网页
三、实验环境
(1) 使用的操作系统及版本。
Windows XP Professional
(2) 使用的编译系统及版本。
Dreamweaver CS6
四、实验步骤及说明
任务1基本块级元素
使用HTML 编辑工具,编写HTML 代码,实现如图所示的页面效果
任务2用于布局的块级元素
4编写HTML 代码,实现如图所示的页面效果
任务3行级元素
编写HTML 代码,实现如图所示的页面效果。
任务4超链接
编写HTML 代码,实现导航菜单的链接
● 单击lj 页面的“人物简介”,将跳转到ww 的介绍页。
● 单击lj 页面的“王孟”,将跳转到设置锚点的ww 页面相应位置。 ● 单击ww 的返回链接可以返回到lj 。
● 单击“联系我们”,将自动打开本机的电子邮件程序。
扩展训练:实现如图所示的页面效果
5
实验2 表格与表单的应用
一、实验目的
1. 掌握表格的基本结构,熟悉表格标签的使用。
2. 会使用表格标签属性修饰美化表格。
3. 了解表单的基本形式,掌握表单元素的使用方法。
二、实验内容
使用表单标签与表格标签设计应用网页
二、实验环境
1. 使用的操作系统及版本。
Windows XP Professional
2. 使用的编译系统及版本。
Dreamweaver CS6
四、实验步骤及说明
任务1表格嵌套和表格内的标签
任务2 跨多行多列的表格
6
7
任务3给表单加分类边框
任务4注册表单布局
小结及思考题
编写HTML 代码,实现如图所示的页面效果。
使用所学的表单元素相关知识,制作商城网站注册页。实现如图所示的页面效果。
实验3 框架
一、实验目的
1、会使用框架集来创建框架,掌握target属性的使用方法。
2、实现基于框架基础上的页面跳转
3、会使用iframe实现页面重用
二、实验内容
1 行列划分的框架
2 窗口间的关联
3 iframe的基本用法
4 利用框架技术布局页面
三、实验环境
(1)使用的操作系统及版本。
Windows XP Professional
(2)使用的编译系统及版本。
Dreamweaver CS6
四、实验步骤及说明
任务1 行列划分的框架
使用HTML编辑工具,编写HTML代码,实现如图所示的页面效果
8
9
任务2窗口间的关联
编写HTML 代码,实现如图所示的页面效果
1、右边框架设置name 属性为"showFrame";
2、左边框架文件中,将链接目标设置为"showFrame"。以此实现窗口间的关联。 任务3
iframe 的基本用法
编写HTML 代码,实现如图所示的页面效果。
任务4利用框架技术布局页面
使用HTML编辑工具,编写HTML代码,实现一个简单的帮助中心页面,并实现基于框架的页面跳转,如图所示的页面效果。
框架结构分为上下两个部分,在下面部分中再分为左右两个部分。
target=#value,#value为页面跳转区域的框架名称。
框架上部及跳转页面内容可采用截图方式。
小结及思考题
考虑如何实现这个页面?
10
实验4 CSS样式表基础
一、实验目的
1.掌握类选择器和ID选择器的使用
2.掌握文本和字体样式美化网页的使用
3.掌握背景样式美化网页的使用
4.掌握伪类样式控制超链接样式的使用
二、实验内容
使用HTML基本元素设计基本网页
三、实验环境
(3)使用的操作系统及版本。
Windows XP Professional
(4)使用的编译系统及版本。
Dreamweaver CS6
四、实验步骤及说明
任务1 ID选择器
使用HTML编辑工具,编写HTML代码,实现如图所示样式的页面效果
11
任务2 背景设置,重复背景
编写HTML代码,实现如图所示样式的页面效果
任务3无序列表的修饰
编写HTML代码,实现如图所示样式的页面效果。
任务4超链接
编写HTML代码,实现如下图样式的链接
12
小结及思考题
扩展训练:实现如图所示的页面效果
CSS各类选择器应用
编写HTML代码,实现如图所示的页面效果。
列表修饰风格
超链接
13
实验5 CSS样式布局
一、实验目的
1. 掌握表格的基本结构,熟悉表格标签的使用。
2. 会使用表格标签属性修饰美化表格。
3. 了解表单的基本形式,掌握表单元素的使用方法。
二、实验内容
CSS样式应用及p+css布局
三、实验环境
(5)使用的操作系统及版本。
Windows XP Professional
(6)使用的编译系统及版本。
Dreamweaver CS6
四、实验步骤及说明
任务1表格嵌套和表格内的标签
14
任务2 跨多行多列的表格
任务3给表单加分类边框
任务4注册表单布局
15
小结及思考题
扩展训练:
编写HTML代码,实现如图所示的页面效果。
使用所学的表单元素相关知识,制作商城网站注册页。实现如图所示的页面效果。
16
实验6 Dreamweaver制作网页一、实验目的
1.使用Dreamweaver实现图文混编
2.使用Dreamweaver实现表格
3.使用Dreamweaver实现表单
4.使用Dreamweaver实现框架
5.使用Dreamweaver工具实现样式表
二、实验内容
使用Dreamweaver工具设计网页
三、实验环境
(1)使用的操作系统及版本。
Windows XP Professional
(2)使用的编译系统及版本。
Dreamweaver CS6
四、实验步骤及说明
任务1 使用Dreamweaver实现表格布局和图文混编
任务2 使用Dreamweaver实现表格和表单页面
任务3使用Dreamweaver实现样式表
任务4使用Dreamweaver实现框架页面
17
扩展训练:使用Dreamweaver工具,利用表格制作一个用户注册的表单页面,最后用CSS修饰。实现如图所示的页面效果。
使用Dreamweaver实现框架页面布局,页面效果如图所示。
18
实验7 网站设计
一、实验目的
1. 根据网站开发流程制作网站
2. 掌握使用制作网页模板
3. 学会使用DIV+CSS制作简单的页面布局
4. 学会使用Dreamweaver工具制作网页
二、实验内容
使用Dreamweaver工具设计网站,合理布局网页
三、实验环境
1. 使用的操作系统及版本。
Windows XP Professional
2. 使用的编译系统及版本。
Dreamweaver CS6
四、实验步骤及说明
任务1 创建站点
按照步骤创建dangdang网站,并建立相应目录结构,如图所示。
任务2制作首页
任务3制作模板
19
任务4复用模板制作商品列表页面
扩展训练:
1、使用Dreamweaver工具,制作dangdang注册页面,页面效果如图所示
2、制作购物车页面,页面效果如图所示。
20
实验8 JavaScript基础
一、实验目的
1. 掌握Javascript的变量定义与使用
2. 掌握Javascript的运算符与表达式的应用
3. 掌握Javascript的控制语句的使用
4. 掌握Javascript的常用函数的使用
5. 掌握Javascript的自定义函数的设计与调用
二、实验内容
JavaScript基础编程练习
三、实验环境
(1)使用的操作系统及版本。
Windows XP Professional
(2)使用的编译系统及版本。
Dreamweaver CS6
四、实验步骤及说明
任务1 用户输入成绩,程序输出相应的成绩等级。要求成绩必须在0~100之间,否则提示错误并要求重新输入,等级分为优秀、良好、中等、及格和不及格。如下图所示。
21
正在阅读:
Web前端开发实验教学指导书04-26
月光下的身影作文400字07-13
园林绿化工作总结范本参考04-03
我心中的教育作文02-05
美在这里作文600字07-15
银保07-03
如何撰写医学综述08-08
关于加格达奇区2014年预算执行情况07-24
保健品客户回访话术02-11
- 教学能力大赛决赛获奖-教学实施报告-(完整图文版)
- 互联网+数据中心行业分析报告
- 2017上海杨浦区高三一模数学试题及答案
- 招商部差旅接待管理制度(4-25)
- 学生游玩安全注意事项
- 学生信息管理系统(文档模板供参考)
- 叉车门架有限元分析及系统设计
- 2014帮助残疾人志愿者服务情况记录
- 叶绿体中色素的提取和分离实验
- 中国食物成分表2020年最新权威完整改进版
- 推动国土资源领域生态文明建设
- 给水管道冲洗和消毒记录
- 计算机软件专业自我评价
- 高中数学必修1-5知识点归纳
- 2018-2022年中国第五代移动通信技术(5G)产业深度分析及发展前景研究报告发展趋势(目录)
- 生产车间巡查制度
- 2018版中国光热发电行业深度研究报告目录
- (通用)2019年中考数学总复习 第一章 第四节 数的开方与二次根式课件
- 2017_2018学年高中语文第二单元第4课说数课件粤教版
- 上市新药Lumateperone(卢美哌隆)合成检索总结报告
- 实验教学
- 指导书
- 前端
- 开发
- Web
- 2019秋期末一年级班主任评语大全
- 第二章第3节化学平衡
- 欧盟色情视频惊现YouTube一托福阅读机经背景
- 伺服驱动系统通用手册0403
- 北大清华夏令营招生简章
- 文化公园植物配置调研报告
- 山东省东营市第二中学八年级物理《32生活中的透镜》学案
- 2020年新编三类安全人员继续教育网上考试试题与答案名师精品资料
- 红色经典诗歌朗诵(经典12首)
- 导师对毕业生的评语及从事工作的建议
- 新人教版2016-2017学年高一英语下学期期末考试试题
- 初中几何常见辅助线作法口诀及习题大全
- 2020年人教部编版小学二年级语文下册总复习资料汇总
- 2020-2021学年度高一上学期期中考试化学试卷及答案(含六套题)
- 细菌的分离纯化和接种实验
- 土建工程师职位说明书
- 单晶金刚石刀具的加工
- 立法进入“释法时代
- 《红瓦黑瓦》四年级读后感600字范文
- 首届校园文化艺术节活动方案