计算机导论/计算机基础实验/网站建设技术：网页基本操作
目录
- 一、实验目的及要求
- 实验9：HTML基本操作
- 实验目标：
- 实验要求：
- 实验10：样式
- 实验目标：
- 实验要求：
- 实验11：JavaScript
- 实验目标：
- 实验要求：
- 课程目标：
- 专业毕业要求指标点：
- 二、实验仪器用具
- （1）实验场地：计算机机房。
- （2）实验用具：
- 三、实验方法及步骤
- 四、实验结果与数据
- 乱码与成因分析
- 五、实验心得体会
- 六、指导教师评语及成绩
- 附录：源代码
- login.html
- luanma.html
- page1.html
- page3.html
- page4.html
一、实验目的及要求
实验9：HTML基本操作
实验目标：
（1）掌握Html基本结构
（2）掌握Html标签操作
实验要求：
（1）完成实验要求文档，综合运用html基本知识
实验10：样式
实验目标：
（1）掌握CSS选择器
（2）掌握字体样式、文本样式边框样式等
实验要求：
（1）完成实验要求文档，综合运用css等相关知识
实验11：JavaScript
实验目标：
（1）掌握JavaScript的基本类型和结构
（2）掌握事件驱动和处理
（3）了解JQuery
实验要求：
（1）完成实验要求文档，综合运用JavaScript相关知识
课程目标：
课程目标4：能够撰写HTML、CSS以及JavaScript文档，设计简单的网页
课程目标5：培养学生能够通过书籍、网络等手段进行学习完成任务的能力
课程目标6：对计算机实际应用的各种工具有所了解并能够选择
专业毕业要求指标点：
指标点5.2：能够理解工程活动中获取相关信息的必要性与基本方法，了解本专业重要资料来源及获取方法。
指标点10.3：能够就计算机领域复杂工程问题与社会公众和同行进行有效交流和沟通，包括陈述发言、清晰表达和回应指令。
二、实验仪器用具
（1）实验场地：计算机机房。
（2）实验用具：
1.xmapp服务器工具
2.Apache服务器工具
3.记事本
4.Dreamweaver网页开发工具
5.Google chrome 浏览器测试环境
三、实验方法及步骤
1.安装xmapp，xmapp为服务器工具
2.在xmapp控制程序中打开Apache服务器
3.如启动失败，将端口改为8080，继续运行
4.配置完服务器后，浏览器输入http://localhost可进入网页主页
5.安装Dreamweaver开发工具并打开
6.新建一个html文档
7.生成一个html文档的模板
8.对html文档的body部分做适当补充完善，便形成了一个可以显示一定内容的网页。
9.利用<img scr=url alt=>，在网页内插入图片
10.向网页内插入超链接
11.制作一个表单，利用<form></form>
12.利用css3制作网页背景
13.利用css3制作文本框样式
14.利用css3制作“登录”按钮的样式
15.当鼠标划过“登录”按钮，其样式会发生改变
16.利用JavaScript的alert制作弹窗
17.综合利用JavaScript的date，document对象、属性、方法等知识，设计一个简单的计时器
四、实验结果与数据
乱码与成因分析
五、实验心得体会
六、指导教师评语及成绩
附录：源代码
login.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"><style type="text/css">
body { background:#F2F2F2;}
label {display:inline-block;margin-right:6px;width:3em;text-align:right;
}
input[type="text"], input[type="password"] {padding: 4px;width:10em;border:solid 1px #F2F2F;
}
input[type="submit"] {margin-left:4.2em;border:solid 1px; padding: 0.5em 3em; color: #444; background: #F8F8F8; border-color: #fff #aaab9c #aaab9c #fff; zoom:1;
}
input[type="submit"]:hover {color: #800000; background: transparent; border-color: #aaab9c #fff #fff #aaab9c;
}</style>
<title>水课管理系统</title>
</head><body><h1>用户登录</h1><form><label for="校园卡卡号2">卡号</label><input type="text" id="校园卡卡号" name="校园卡卡号" placeholder="一卡通号"/><br><br><label for="密码">密码</label><input type="password" id="password" name="password" placeholder="密码" /><h6><a href="luanma.html">忘记密码？</a></h6><a href="page1.html"><input type="submit" href="page1.html" value="登录"/></a></form></body>
</html>luanma.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<img src="乱码.png" alt="乱码" title="乱码示意"/>
<body><img src="乱码原因.png" alt="乱码原因" title="乱码原因"/>
</body>
</html>
page1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<title></title>
<script type="text/javascript">
window.onload=function(){
setInterval(function(){
var date=new Date();
var year=date.getFullYear();
var mon=date.getMonth()+1;
var da=date.getDate();
var day=date.getDay();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
var d=document.getElementById('Date');
d.innerHTML='当前时间:'+year+'年'+mon+'月'+da+'日'+'星期'+day+' '+h+':'+m+':'+s; },1000) }
</script>
</head>
<body>
<div id="Date"> </div><a href="page3.html"><input type="submit" href="page3.html" value="入口一"/></a><a href="page4.html"><input type="submit" href="page4.html" value="入口二"/></a>
</body>
</html>page3.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>500</title><style>html,body{margin: 0;position: relative;background: #f6f6f6;height: 100%;}*{box-sizing: border-box;}.body{position: relative;height: 100%;min-height: 700px;}.main{position: absolute;top: 300px;left: 0;right: 0;margin: auto;/*width: 100%;*/width: 1000px;}.main_msg{position: absolute;left: 0;top: 194px;color:rgb(153, 153, 153);}.footer{height: 70px;position: absolute;bottom: 0;width: 100%;border-top: 1px solid grey;padding: 14px 0;}</style>
</head>
<body>
<div class="body"><div class="main"><img src="500.jpg" alt="404"><div class="main_msg"><h3> 内部服务器错误</h3><h3>您查找的资源存在问题，无法显示</h3></div></div></div></body>
</html>
page4.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>page4</title>
</head><body><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function myFunction(){alert("上课时间冲突！");
}
</script>
</head>
<body><input type="button" onclick="myFunction()" value="快速选课" /></body>
</html>
</body>
</html>计算机导论/计算机基础实验/网站建设技术：网页基本操作相关推荐
- 计算机导论操作系统基础实验报告,计算机导论：实训篇
<计算机导论:实训篇>是2009年电子工业出版社在出版的图书,作者是李云峰.李婷.本书既适合计算机专业和非计算机专业的计算机基础课程使用,也适合各类培训班以及自学读者使用.[1] 书 ...
- 计算机网络应用基础实验指导,计算机及网络应用基础实验指导书.PDF
计算机及网络应用基础实验指导书 <计算机及网络应用基础> 实验指导书 计算机及网络应用基础 实验指导书 西安交通大学计算机教学实验中心 程向前 1.1 网络试验环境 考虑到普通高等院校目前 ...
- lr分析器的设计与实现实验报告_《计算机导论》课程实验报告（一维数组）
<计算机导论>课程实验报告 专业班级: 姓名: 学号: 实验类型:设计型实验 时间: 实验题目:一维数组 实验目的: 1.掌握数组定义.初始化和元素引用的方法: 2.掌握数组的输入.输出方 ...
- .dat文件写入byte类型数组_《计算机导论》课程实验报告（文件）
<计算机导论>课程实验报告 专业班级: 姓名: 学号: 实验类型: 设计型实验 时间: 实验题目:文件 实验目的: 1．掌握文件和文件指针的概念: 2．掌握文件打开和关闭的方法. 3．掌握 ...
- 网站建设技术――智能建站系统
2019独角兽企业重金招聘Python工程师标准>>> 第一代网站建设技术 运用一般的网页制作软件,把一些平面页面效果转化成网页,然后把网页链接起来成为一个企业网站.采用" ...
- 做自适应网站专业乐云seo_网站建设技术很 棒乐云seo:SEO技术这碗青春饭，跪
SEO从一个岗位到一份职位,从少很多人知到全是都是万人空巷,无论是自身愿资金分配互联网技术技术从事SEO制造行业,还是听信了这种行骗的讲诉,但构想变为一名技术高层次人才,是否一次次的想像,一年后的本身 ...
- 网站建设在网页界面设计中该如何做到简约
网站建设在网页界面设计中该如何做到简约是关于网站建设在网页界面设计中该如何做到简约的文章,同信长春网站公司帮您了解网站建设在网页界面设计中该如何做到简约的方面的知识. 提供的服务或产品,是供年轻人或孩 ...
- 【无标题】小程序开发网站建设前端网页制作美工H5
精通系统开发,程序开发,微信公众号开发,小程序开发,网站建设,网页设计制作,微信增粉/APP开发/h5前端制作/seo网络推广/网站推广/推广小程序/商务拍摄摄影摄像航拍宣传片微电影抖音快手短视频/视 ...
- 网站建设企业网页设计要具备的6个步骤
在企业网站建设中网页设计的细节问题会非常多,因此呢建站公司需要和企业进行多次频繁的沟通,以满足企业的实际需求,下面小编给大家分享网站建设企业网页设计要具备的6个步骤,我们一起来看下! 1,网页构思规划 ...
最新文章
- 深度学习计算机视觉常见的29道面试题及解析
- 明明白白学C#第0章准备工作
- 配置apache虚拟主机
- 服务器用户编码是什么,涨知识：英特尔服务器CPU编号是啥意思?
- 数据库的两个好帮手：pagehack和pg_xlogdump
- linux两文件对比,linux对比两个文件的差异
- [译] Architecture Components 之 Adding Components to your Project
- C#6.0 十大常用特性
- Realsense无法启动彩色摄像头
- mac 10.15上 CornerStone4.1 显示已经损坏
- 营山天气预报软件测试,营山天气预报15天
- K3 设置为AP,用于软件路由的后级。
- Ability、capability 和 capacity
- POJ1759Garland题解
- 一加5应用未安装怎么解决_如何解决一加手机x安装不了软件下载的问题？
- ROUND_UP、ROUND_DOWN、ROUND_HALF_UP(BigDecimal四舍五入)、ROUND_HALF_DOWN
- 大数据如何助力“驯服”火灾？
- y空间兑换代码_【游戏流体力学基础及Unity代码（三）】用波动方程模拟三维落雨池塘，连续性方程...
- Linux操作系统下复现github上的项目（一）：下载项目、配置环境
- OpenCV-霍夫线变换