青岛网站建设工作室,合肥哪个公司是网络推广,自助优化排名工具,潞城网络营销怎么做“赶快回家网”首页制作一、实验名称#xff1a;二、实验日期#xff1a;三、实验目的#xff1a;四、实验内容#xff1a;五、实验步骤#xff1a;六、实验结果#xff1a;七、源程序#xff1a;八、心得体会#xff1a;一、实验名称#xff1a;
“赶快回家网”首页…
“赶快回家网”首页制作一、实验名称二、实验日期三、实验目的四、实验内容五、实验步骤六、实验结果七、源程序八、心得体会一、实验名称
“赶快回家网”首页制作
二、实验日期
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 xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title赶快回家网/title
link hrefcss/1.cssrelstylesheet typetext/css/
script typetext/javascript srcjs/1.js/script
/head
body onloadchangeColor()
!--头部--
div idtop_bg
div idtop
ul classleft
lia href#登录/a/li
lia href#免费注册/a/li/ul
ul classright
li classlist onmouseoverchange(list_cur,block) onmouseoutchange(list_cur,none)
span个人中心/span
div idlist_cur
a href#已完成订单/a
a href#未完成订单/a
a href#我的保险/a
a href#账户安全/a
a href#个人信息/a
a href#常用联系人/a/div /li
li classline|/li
lispan使用须知/span/li
li classline|/li
lispan收藏夹/span/li
li classline|/li
lispan货物快运/span/li
li classline|/li
lispan联系我们/span/li/ul/div/div
!--导航--
div idnav_bg
div classnav
h2img srcimages/logo.jpg //h2ullia href#汽车票/a/lilia href#时刻表/a/li
lia href#汽车站/a/lilia href#酒店预订/a/li
lia href#旅客问答/a/li/ul/div/div
!--banner--
div idbannerimg srcimages/banner.jpg //div
!--时间--
ul idweek
lia href#01月27日br/周三/a/li
lia href# classnext01月28日br/周四/a/li
lia href# classnext01月29日br/周五/a/li
lia href# classnext01月30日br/周六/a/li
lia href# classnext01月31日br/周日/a/li
lia href# classnext02月01日br/周一/a/li
lia href# classnext02月02日br/周二/a/li/ul
!--客运信息--
table idtbl classtable border1 tr classtitle
th出发时间/thth始发站/首发站/thth计划车型/thth票价/thth购票/th/tr
trtd classtxt106:30/td
td classtxt2span classred始/span省汽车客运站br/span classblue终/span阳江/td
td空调坐席/tdtdspan classcolors100/span/tdtda href# classbuy购票/a/td/tr
trtd classtxt107:30/td
td classtxt2span classred始/span省汽车客运站br/span classblue终/span阳江/td
td空调坐席/td tdspan classcolors100/span/td
tda href# classbuy购票/a/td/tr
trtd classtxt108:30/tdtd classtxt2span classred始/span省汽车客运站br/span classblue终/span阳江/td
td空调坐席/tdtdspan classcolors100/span/td tda href# classbuy购票/a/td /tr
trtd classtxt109:30/td
td classtxt2span classred始/span省汽车客运站br/span classblue终/span阳江/td
td空调坐席/tdtdspan classcolors100/span/tdtda href# classbuy购票/a/td/tr/table
!--底部--
div idfooter赶快回家版权所有2000-2016京ICP备08001421号nbsp;nbsp;京公网安备110108007702/div/body/htmlCSS
/* 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;}js
// JavaScript Document
function change(myid,mode){
document.getElementById(myid).style.displaymode;
if(mode block){//显示下拉菜单
//设置下拉菜单所在div的边框
document.getElementById(myid).style.border1px solid #eee;
document.getElementById(myid).style.borderTopnone;
//设置鼠标划过的li的边框及背景颜色
document.getElementById(myid).parentNode.style.backgroundColor#fff;
document.getElementById(myid).parentNode.style.border1px solid #eee;
document.getElementById(myid).parentNode.style.borderBottomnone;}
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 i2; itrs.length; ii2){
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可以实现动画特效。
