计算机导论/计算机基础实验/网站建设技术：网页基本操作

2023-02-22 102

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 计算机导论/计算机基础实验/网站建设技术：网页基本操作

一、实验目的及要求

实验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>

计算机导论/计算机基础实验/网站建设技术：网页基本操作

一、实验目的及要求

实验9：HTML基本操作

实验目标：

实验要求：

实验10：样式

实验目标：

实验要求：

实验11：JavaScript

实验目标：

实验要求：

课程目标：

专业毕业要求指标点：

二、实验仪器用具

（1）实验场地：计算机机房。

（2）实验用具：

三、实验方法及步骤

四、实验结果与数据

乱码与成因分析

五、实验心得体会

六、指导教师评语及成绩

附录：源代码

login.html

luanma.html

page1.html

page3.html

page4.html

热门文章

最新文章

相关课程

相关电子书

相关实验场景