“赶快回家网”首页制作
Posted 稚皓君
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了“赶快回家网”首页制作相关的知识，希望对你有一定的参考价值。
“赶快回家网”首页制作
一、实验名称：
“赶快回家网”首页制作
二、实验日期：
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、制作导航模块
“导航”模块整体由一个
定义，各个子栏目结构清晰、并列显示，可以通过无序列表
-
嵌套
- 标记定义。
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号 京公网安备110108007702</div></body></html>
CSS
/* CSS Document */
body,ul,input,p,dl,dt,dd,h1,table,tr,td,th,h2,limargin:0;padding:0; list-style:none; 以上是关于“赶快回家网”首页制作的主要内容，如果未能解决你的问题，请参考以下文章
Dreamweaver网页作业——紫罗兰永恒花园动漫价绍网页 7页，含有table表格，js表单验证还有首页视频。以及列表页。浮动布局。div+css+js