当前位置：首页 > news >正文

“赶快回家网”首页制作

news 2025/9/8 11:01:41

“赶快回家网”首页制作

一、实验名称：
二、实验日期：
三、实验目的：
四、实验内容：
五、实验步骤：
六、实验结果：
七、源程序：
八、心得体会：

一、实验名称：

“赶快回家网”首页制作

二、实验日期：

2020年12月21日星期一

三、实验目的：

1、掌握JavaScript基本语法
2、掌握运算符和表达式的使用方法
3、掌握条件语句、循环语句及跳转语句
4、掌握JavaScript中函数的调用及变量的作用域
5、能够通过运算符和表达式进行简单计算
6、学会使用流程控制语句编写JavaScript程序

四、实验内容：

1、按照特定要求制作一个网页
2、使用Dreamweaver 、火狐浏览器制作
3、上交的文件，以“学号+姓名”的形式

五、实验步骤：

1、建立站点
（1）创建网站根目录
在计算机本地磁盘E盘中新建一个文件夹作为网站根目录，命名为“赶快回家网”。
（2）在根目录下新建文件
在根目录下新建images和css文件夹与js文件夹，分别用于存放网站所需要的图像和CSS样式表文件与js文件。
在这里插入图片描述

（3）新建站点
打开Dreamweaver工具，新建站点，并命名为“赶快回家网”，然后浏览并选择站点根目录的存储位置，并保存。
在这里插入图片描述

2、页面布局
将页面制作分为“头部”模块、“导航”模块、“banner和时间”模块。、“客运信息”模块、“底部”模块。
在这里插入图片描述

3、制作“头部”模块
“头部”模块通栏显示，整体上由一个大盒子控制。“头部”导航模块的内容居中对齐，由一个

搭建结构。另外，登录和个人中心栏目结构清晰，可以分别通过无序列表

嵌套
标记进行定义。

在这里插入图片描述

4、制作导航模块
“导航”模块整体由一个

大盒子构成，由logo和六个子栏目构成。其中，“导航”模块背景图片通栏显示，使用

布局。另外，logo模块使用

定义，各个子栏目结构清晰、并列显示，可以通过无序列表
嵌套
标记定义。

在这里插入图片描述

5、制作“banner”和“时间”模块
“banner”模块由一张图片构成，使用标记定义。“时间”模块由无序列表

构成，每个时间栏目分别由
标记搭建结构。另外，时间栏目中的文字说明可以通过标记定义。

6、制作“客运信息”模块
“客运信息”，模块主要由一个表格构成。另外，每一行的信息整体由标记定义。其中，表格标题由标记定义，其余的每条客运信息由定义。

在这里插入图片描述

7、制作“底部”模块
“底部”模块通栏显示，整体上由一个

大盒子构成。

六、实验结果：

在这里插入图片描述

七、源程序：

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>赶快回家网</title>
<link href="css/1.css"rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/1.js"></script>
</head>
<body onload="changeColor()">
<!--头部-->
<div id="top_bg">
<div id="top">
<ul class="left">
<li><a href="#">登录</a></li>
<li><a href="#">免费注册</a></li></ul>
<ul class="right">
<li class="list" onmouseover="change('list_cur','block')"  onmouseout="change('list_cur','none')">
<span>个人中心</span>
<div id="list_cur" >
<a href="#">已完成订单</a>
<a href="#">未完成订单</a>
<a href="#">我的保险</a>
<a href="#">账户安全</a>
<a href="#">个人信息</a>
<a href="#">常用联系人</a></div> </li>
<li class="line">|</li>
<li><span>使用须知</span></li>
<li class="line">|</li>
<li><span>收藏夹</span></li>
<li class="line">|</li>
<li><span>货物快运</span></li>
<li class="line">|</li>
<li><span>联系我们</span></li></ul></div></div>
<!--导航-->
<div id="nav_bg">
<div class="nav">
<h2><img src="images/logo.jpg" /></h2><ul><li><a href="#">汽车票</a></li><li><a href="#">时刻表</a></li>
<li><a href="#">汽车站</a></li><li><a href="#">酒店预订</a></li>
<li><a href="#">旅客问答</a></li></ul></div></div>
<!--banner-->
<div id="banner"><img src="images/banner.jpg" /></div>
<!--时间-->
<ul id="week">
<li><a href="#">01月27日<br/>周三</a></li>
<li><a href="#" class="next">01月28日<br/>周四</a></li>
<li><a href="#" class="next">01月29日<br/>周五</a></li>
<li><a href="#" class="next">01月30日<br/>周六</a></li>
<li><a href="#" class="next">01月31日<br/>周日</a></li>
<li><a href="#" class="next">02月01日<br/>周一</a></li>
<li><a href="#" class="next">02月02日<br/>周二</a></li></ul>
<!--客运信息-->
<table id="tbl" class="table" border="1" ><tr class="title">
<th>出发时间</th><th>始发站/首发站</th><th>计划车型</th><th>票价</th><th>购票</th></tr>
<tr><td class="txt1">06:30</td>
<td class="txt2"><span class="red">始</span>省汽车客运站<br/><span class="blue">终</span>阳江</td>
<td>空调坐席</td><td>￥<span class="colors">100</span></td><td><a href="#" class="buy">购票</a></td></tr>
<tr><td class="txt1">07:30</td>
<td class="txt2"><span class="red">始</span>省汽车客运站<br/><span class="blue">终</span>阳江</td>
<td>空调坐席</td> <td>￥<span class="colors">100</span></td>
<td><a href="#" class="buy">购票</a></td></tr>
<tr><td class="txt1">08:30</td><td class="txt2"><span class="red">始</span>省汽车客运站<br/><span class="blue">终</span>阳江</td>
<td>空调坐席</td><td>￥<span class="colors">100</span></td> <td><a href="#" class="buy">购票</a></td> </tr>
<tr><td class="txt1">09:30</td>
<td class="txt2"><span class="red">始</span>省汽车客运站<br/><span class="blue">终</span>阳江</td>
<td>空调坐席</td><td>￥<span class="colors">100</span></td><td><a href="#" class="buy">购票</a></td></tr></table>
<!--底部-->
<div id="footer">赶快回家版权所有2000-2016京ICP备08001421号&nbsp;&nbsp;京公网安备110108007702</div></body></html>

CSS

/* CSS Document */
body,ul,input,p,dl,dt,dd,h1,table,tr,td,th,h2,li{margin:0;padding:0; list-style:none; outline:none; border:0;}
body{color:#6C6C6C;font-size:12px; font-family:"微软雅黑";}
a:link,a:visited{text-decoration:none; color:#6C6C6C;}
a:hover{text-decoration:none;}
/*头部*/
#top_bg{width:100%; height:30px; background:#F7F7F7;}
#top{width:980px; height:30px; line-height:30px; margin:0 auto;}
.left{float:left;}.right{float:right;}
#top li{float:left;padding:0px 10px 0px 0px;}
#top .line{color:#CCC;}
.right li{cursor:pointer; border:1px solid #f7f7f7;}
.right li span{padding:0px 9px;}
/*下拉菜单*/
.right .list{position:relative;}
.right #list_cur{
width:95px; display:none; position:absolute; left:-1px; top:30px; background-color:#FFF; border:1px solid #EEE;}
.right #list_cur a{display:block; padding:0 10px; line-height:28px; color:#6C6C6C;}
.right #list_cur a:hover{background:#F5F5F5;}
/*导航*/
#nav_bg{width:100%; height:95px; background:#fff; border-bottom:5px solid #d3d3d3;}
.nav{width:980px; margin:5px auto 0; height:100px; }
.nav h2{ height:70px; padding-top:25px; float:left;}
.nav ul{float:left;}
.nav ul li{float:left;}
.nav ul li a{display:block; padding:0 40px; height:95px; line-height:95px; font-size:14px; 
border-bottom:5px solid #d3d3d3;}
.nav ul li a:hover{color:#e67616;  border-bottom:5px solid #e67616;}
/*banner*/
#banner{width:980px; height:519px; margin:0 auto;}
/*时间*/
#week{width:980px; height:80px; margin:30px auto;}
#week li{float:left;}
#week a{display:inline-block;width:137px; height:50px; border:2px solid #ffc393; 
text-align:center;padding-top:28px; background:#fff8f2; }
#week .next{border-left:0;}
#week a:hover{background:#fff; border-bottom:2px solid #fff;}
/*客运信息*/
.table{width:980px;border-collapse:collapse; margin:0 auto; border:1px solid #e8e8e8; font-size:14px;}
.table tr{height:90px; text-align:center;background-color:#ffe8c8;}
.table .title{background-color:#f8f8f8; height:30px; color:#999; font-size:16px;}
.table .even{background-color:#fff5e6;}
.txt1,.colors{font-size:24px; color:#ff7000;}
.table .txt2{width:120px; text-align:left}
.red,.blue{display:inline-block; width:18px; height:18px; background:#ff7600; color:#fff; 
line-height:18px; text-align:center;}
.blue{background:#06F;}
.buy{ width:100px; height:30px; background:#ff7600; display:inline-block; line-height:30px; color:#fff;}
.buy:link,.buy:visited{color:#fff;}
.buy:hover{background:#ff9942;}
/*底部*/
#footer{width:100%; height:80px; background:url(../images/footer_bg.png)repeat-x; 
color:#555; text-align:center; line-height:80px; 
margin-top:50px; font-size:14px;}

// JavaScript Document
function change(myid,mode){
document.getElementById(myid).style.display=mode;
if(mode == 'block'){//显示下拉菜单
//设置下拉菜单所在div的边框
document.getElementById(myid).style.border="1px solid #eee";
document.getElementById(myid).style.borderTop="none";
//设置鼠标划过的li的边框及背景颜色
document.getElementById(myid).parentNode.style.backgroundColor="#fff";
document.getElementById(myid).parentNode.style.border="1px solid #eee";
document.getElementById(myid).parentNode.style.borderBottom="none";}
else{
//当不显示下拉列表时，鼠标划过的li的边框及背景颜色
document.getElementById(myid).parentNode.style.backgroundColor="";
document.getElementById(myid).parentNode.style.border="";}}
/*客运信息*/
function changeColor(){
//获取所有行
var trs  = document.getElementById("tbl").getElementsByTagName("tr");
//为偶数行添加class属性，且不包括标题行
for(var i=2; i<trs.length; i=i+2){
trs[i].className = "even";}}

八、心得体会：

1、通过该项目的制作，更好的理解了JavaScript基本语法，并且掌握了运算符和表达式的使用方法，同时，也理解了条件语句、循环语句及跳转语句。
2、制作项目时，为了更好的创建，在编辑代码过程中，先进行整体把控页面的结构，每完成一部分通过火狐浏览器查看效果图，随时进行修改。
3、在编写时，由于需要引入JavaScript，了解到，在HTML文档中引入JavaScript有两种方式，一种是在HTML文档直接嵌入JavaScript脚本，另一种是链接外部JavaScript脚本文件，称为外链式。
4、了解到alert（）方法主要用于弹出警示对话框，通常用于对用户进行提示。prompt()方法用于显示和提示用户输入信息的对话框。
5、明白了在网页制作中与编程语言对于函数的编写类似，在JavaScript程序设计中，为了使代码更为简洁并可以重复使用，通常会将某段实现特定功能的代码定义成一个函数。
6、在实际工作中，函数的应用非常广泛。熟练的掌握函数的调用。
7、深入了解了JavaScript的基本语法，包括执行顺序、大小写敏感、每行结尾的分号可有可无、注释等。
8、了解到使用JavaScript可以在客户端对用户输入的内容进行验证，并且在设计网页时，JavaScript可以实现动画特效。

“赶快回家网”首页制作

一、实验名称：

二、实验日期：

三、实验目的：

四、实验内容：

五、实验步骤：

定义，各个子栏目结构清晰、并列显示，可以通过无序列表嵌套标记定义。

六、实验结果：

七、源程序：

八、心得体会：

相关文章：

定义，各个子栏目结构清晰、并列显示，可以通过无序列表
嵌套
标记定义。