“甜蜜约会”首页制作

最新推荐文章于 2024-06-05 21:07:49 发布

茗~569

最新推荐文章于 2024-06-05 21:07:49 发布

阅读量2.4k

点赞数 23

文章标签： html

本文链接：https://blog.csdn.net/weixin_74878822/article/details/136609228

版权

1.建立站点

(1)创建网站根目录

在计算机本地磁盘任意盘符下创建网站根目录。本书在“D盘:案例源码chapter08”文件夹中新建一个文件夹作为网站根目录，并命名为“food"。

(2)在根目录下新建文件

打开网站根目录“food",在根目录下新建“images”文件夹用于存放图片，新建“css"文件夹用于存放
CSS样式表文档，新建“js"文件夹用于存放JavaScript文件。

(3)新建站点

打开Dreamweaver，在菜单栏中选择“站点一新建站点”选项，在弹出的对话框中输入站点名称“ food"。浏览并选择站点根目录的存储位置，单击“保存”按钮，站点即创建成功。

2.CSS样式分析

页面中的各个模块居中显示，宽度为980px,因此，页面的版心为980px。此外，页面中的所有字体均设置为“微软雅黑”，大小为14px,超链接访问前和访问后的文字颜色均设置为#r,字体大小16px。

3.JavaScript效果分析

"banner”模块实现了焦点图切换效果，并通过定时器控制切换的时间间隔。“简介”模块的图片通过滚动的方式展现，并定义了图片滚动的速度及滚动方向。

定义基础样式

1.页面布局

下面对“甜蜜约会”首页进行整体布局。在站点根目录下新建一个HTML文件，并命名为"project08",然后使用<div>标签对页面进行布局。

2.定义基础样式

在站点根目录下的CSS文件夹内新建样式表文件style08.css,使用外链式CsS在project08.html文件中入样式表文件。

3.引入JavaScript文件

在站点根目录下的JavaScrijpt文件夹内新建jg08.js文件，使用外链式在project08.html文件中引人该文件，具体代码如下:
<script type="text/javascript" src="js/js08.js"</script>

html中代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>甜蜜约会</title>
		<link href="css/style08.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/js08.js"></script>
	</head>
	<body>
		<!-- head begin-->
		<div class="head">
			<div class="left"><img src="img/logo.png" /></div>
			<div class="right"><img src="img/phone.jpg" /></div>
		</div>
		<!-- head end-->
		<!-- nav begin-->
		<div id="nav">
			<ul class="nav">
				<li><a href="#" class="color_in">首页</a></li>
				<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>
				<li><a href="#">分店地址</a></li>
			</ul>
		</div>
		<!-- nav end-->
		<!-- banner begin-->
		<div class="banner">
			<ul class="banner_pic" id="banner_pic">
				<li class="current"><img class="one" src="img/01.jpg" /></li>
				<li class="pic"><img class="one" src="img/02.jpg" /></li>
				<li class="pic"><img class="one" src="img/03.jpg" /></li>
			</ul>
			<ol id="button">
				<li class="current"></li>
				<li class="but"></li>
				<li class="but"></li>
			</ol>
		</div>
		<!-- banner end-->
		<!-- learn begin-->
		<div id="learn">
			<h2>甜蜜约会品牌简介</h2>
			<dl>
				<dt></dt>
				<dd class="txt1">想和甜蜜有个约会吗？</dd>
				<dd class="txt2">
					甜品不仅女孩子喜欢，很多男孩子也不例外，在人们越来越会享受生活的今天，甜品品牌发展的可谓风生水起，“甜蜜约会”就是其中一个。1995年，“甜蜜约会”的创始人在西贡区创办了首家港式甜品店，凭借着甜品细腻的口感和独特的风味，获得了很多消费者的青睐。以创新、品质、价格作为营销系理念，“甜蜜约会”很快“俘获”了一大批忠实粉丝，并在2002年于新港中心开设了分店。到2020年，“甜蜜约会”更是在北京、上海、杭州、苏州、珠海、湖南、广州等地区开设了60多家特许经营店，这样的成绩着实耀眼。
				</dd>
			</dl>
			<div class="imgbox" id="imgbox">
				<span>
					<a href="#"><img src="img/1.jpg" /></a>
					<a href="#"><img src="img/2.jpg" /></a>
					<a href="#"><img src="img/3.jpg" /></a>
					<a href="#"><img src="img/4.jpg" /></a>
				</span>
			</div>
		</div>
		<!-- learn end-->
		<!-- features begin-->
		<div id="features">
			<h2>甜蜜约会特色美食推荐</h2>
			<div class="list0">
				<div id="SwitchBigPic">
					<span class="sp"><a href="#"><img src="img/111.jpg" /></a></span>
					<span><a href="#"><img src="img/222.jpg" /></a></span>
					<span><a href="#"><img src="img/333.jpg" /></a></span>
				</div>
				<ul id="SwitchNav">
					<li><a class="txt_img1" href="#"></a></li>
					<li><a class="txt_img2" href="#"></a></li>
					<li><a class="txt_img3" href="#"></a></li>
				</ul>
			</div>
			<div class="list1">
				<h3></h3>
				<form action="#" method="post" class="biaodan">
					<table class="content">
						<tr>
							<td class="left">姓名：</td>
							<td><input type="text" class="txt01" /></td>
						</tr>
						<tr>
							<td class="left">手机：</td>
							<td><input type="text" class="txt01" /></td>
						</tr>
						<tr>
							<td class="left">邮箱：</td>
							<td><input type="text" class="txt01" /></td>
						</tr>
						<tr>
							<td class="left">店址：</td>
							<td>
								<select class="course">
									<option>请选择最近的店铺地址</option>
									<option>北京三里屯12号</option>
									<option>上海南京路3号</option>
									<option>广州淮阳路12号</option>
									<option>深圳大都会3号</option>
								</select>
							</td>
						</tr>
						<tr>
							<td colspan="2"><input class="no_border" type="button" /></td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		<!-- features end-->
		<!-- footer begin-->
		<div class="footer">甜蜜约会版权所有2020-2036京ICP备2232333号&nbsp;&nbsp;京公网安备2342434324343</div>
		<!-- footer end-->
	</body>
</html>

jso8.js中代码：

// JavaScript Document
//焦点图轮播
window.onload = function() {
	//顶部的焦点图切换
	function hotChange() {
		var current_index = 0;
		var timer = window.setInterval(autoChange, 3000);
		var button_li = document.getElementById("button").getElementsByTagName("li");
		var pic_li = document.getElementById("banner_pic").getElementsByTagName("li");
		for (var i = 0; i < button_li.length; i++) {
			button_li[i].onmouseover = function() {
				if (timer) {
					clearInterval(timer);
				}
				for (var j = 0; j < pic_li.length; j++) {
					if (button_li[j] == this) {
						current_index = j;
						button_li[j].className = "current";
						pic_li[j].className = "current";
					} else {
						pic_li[j].className = "pic";
						button_li[j].className = "but";
					}
				}
			}
			button_li[i].onmouseout = function() {
				timer = setInterval(autoChange, 3000);
			}
		}

		function autoChange() {
			++current_index;
			if (current_index == button_li.length) {
				current_index = 0;
			}
			for (var i = 0; i < button_li.length; i++) {
				if (i == current_index) {
					button_li[i].className = "current";
					pic_li[i].className = "current";
				} else {
					button_li[i].className = "but";
					pic_li[i].className = "pic";
				}
			}
		}
	}
	hotChange();

	//展示
	function school() {
		//定义滚动速度
		var speed = 50;
		//获取<div id="imgbox">元素
		var imgbox = document.getElementById("imgbox");
		//复制一个<span>，用于无缝滚动
		imgbox.innerHTML += imgbox.innerHTML;
		//获取两个<span>元素
		var span = imgbox.getElementsByTagName("span");
		//启动定时器，调用滚动函数
		var timer1 = window.setInterval(marquee, speed);
		//鼠标移入时暂停滚动，移出时继续滚动
		imgbox.onmouseover = function() {
			clearInterval(timer1);
		}
		imgbox.onmouseout = function() {
			timer1 = setInterval(marquee, speed);
		};
		//滚动函数
		function marquee() {
			//当第1个<span>被完全卷出时
			if (imgbox.scrollLeft > span[0].offsetWidth) {
				//将被卷起的内容归0
				imgbox.scrollLeft = 0;
			} else {
				//否则向左滚动
				++imgbox.scrollLeft;
			}
		}
	}
	school();


	function tableChange() {
		//Table栏
		//获得#SwitchNav中所有的<li>元素
		var lis = document.getElementById("SwitchNav").getElementsByTagName("li");
		//获得#SwitchBigPic中所有的<a>元素
		var spans = document.getElementById("SwitchBigPic").getElementsByTagName("span");
		//保存当前焦点元素的索引
		var current_index = 0;
		//启动定时器
		var timer = setInterval(autoChange, 3000);
		//遍历lis，为各<li>元素添加事件
		for (var i = 0; i < lis.length; i++) {
			//<li>的鼠标移入事件
			lis[i].onmouseover = function() {
				//定时器存在时清除定时器
				if (timer) {
					clearInterval(timer);
				}
				//遍历lis
				for (var i = 0; i < lis.length; i++) {
					//设置当前焦点元素的样式
					if (lis[i] == this) {
						spans[i].className = "sp";
						//保存当前索引，当恢复自动切换时继续切换
						current_index = i;
						//设置非当前焦点元素的样式
					} else {
						spans[i].className = "";
					}
				}
			}
			//<li>的鼠标移出事件
			lis[i].onmouseout = function() {
				//启动定时器，恢复图片自动切换
				timer = setInterval(autoChange, 3000);
			}
		}
		//定时器周期函数-图片自动切换
		function autoChange() {
			//自增索引
			++current_index;
			//当索引自增达到上限时，索引归0
			if (current_index == lis.length) {
				current_index = 0;
			}
			//遍历lis，将所有元素取消焦点样式
			for (var i = 0; i < lis.length; i++) {
				spans[i].className = "";
			}
			//为当前索引元素添加焦点样式
			spans[current_index].className = "sp";
		}
	}
	tableChange();
}

style08.css中代码：

@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0; list-style:none; outline:none; border:0; background:none;}
body{font-size:14px; font-family:"微软雅黑";}
a:link,a:visited{color:#fff; text-decoration:none;}
a:hover{text-decoration:none;}
/*head*/
.head{
	width:980px; 
	margin:0 auto; 
	height:50px; 
	padding-top:30px;
}
.head .left{float:left;}
.head .right{float:right;}
/*nav*/	
#nav{
	width:100%; 
	background:#000;
}
.nav{
	width:980px;  
	height:35px;
	line-height:35px;
	margin:0 auto; 
	text-align:center; 
	font-size:14px;
}
.nav li{float:left;}
.nav a{
	display:inline-block; 
	padding:0 40px;
}
.nav a:hover{background:#e3da35;}
.nav .color_in{background:#e3da35;}
/*banner*/
.banner{
	width:100%; 
	height:580px; 
	position:relative; 
	overflow:hidden;
}
.one{
	position:absolute; 
	left:50%; 
	top:0; 
	margin-left:-960px;
}
.banner .banner_pic .pic{display:none;}
.banner .banner_pic .current{display:block;}
.banner ol{
	position:absolute; 
	left:50%; 
	top:90%;
	margin-left:-62px;
}
.banner ol .but{
	float:left; 
	width:28px; 
	height:1px; 
	border:1px solid #d6d6d6; 
	margin-right:20px;
}
.banner ol li{cursor:pointer;}
.banner ol .current{
	background:#90d1d5; 
	float:left; 
	width:28px; 
	height:1px; 
	border:1px solid #90d1d5; 
	margin-right:20px;
}
/*简介*/
#learn{
	width:980px; 
	margin:0 auto;
}
h2{ 
	font-weight:100; 
	font-size:24px; 
	color:#585858; 
	padding:40px 0; 
	border-bottom:7px solid #ececec;
}
#learn dl{
	width:980px;
	height:220px;
}
#learn dt{
	width:145px; 
	height:220px; 
	background:url(../img/learn.jpg) center center no-repeat; 
	float:left;
}
#learn dd{
	width:780px; 
	padding:20px 0 0 30px; 
	float:left;
}
#learn .txt1{
	font-size:24px; 
	color:#e3da35;
}
#learn .txt2{
	color:#6b6862; 
	line-height:24px;
}
/*展示*/
.imgbox{
	width:940px;
	padding:0 20px;
	white-space:nowrap;
	overflow:hidden;
}
.imgbox img{
	width:226px; 
	height:129px; 
	padding:2px;
}
.imgbox a{margin-right:20px;}
/*特色*/
#features{
	width:980px;
	height:565px; 
	margin:0 auto; 
}
/* Table切换 */
.list0{
	width:638px; 
	margin-top:25px; 
	float:left;
	position:relative;
}
#SwitchBigPic{border: 1px solid #ddd;}
#SwitchBigPic span{display:none;}
#SwitchBigPic img{
	width:448px;
	height:375px;
}
#SwitchBigPic .sp{display:block;}
#SwitchNav{
	width:190px;
	position:absolute;
	top:0px; 
	left:447px;
}
#SwitchNav li{
	width:190px;
	height:125px;
	margin-bottom:1px;
}
#SwitchNav a{
	display:block;
	width:190px;
	height:125px; 
	background:url(../img/txt_111_1.jpg) no-repeat;
}
#SwitchNav .txt_img2{background:url(../img/txt_222_2.jpg) no-repeat;}
#SwitchNav .txt_img3{background:url(../img/txt_333_3.jpg) no-repeat;}
#SwitchNav .txt_img1:hover{background:url(../img/txt_111.jpg) no-repeat ;}
#SwitchNav .txt_img2:hover{background:url(../img/txt_222.jpg) no-repeat ;}
#SwitchNav .txt_img3:hover{background:url(../img/txt_333.jpg) no-repeat ;}
/*列表*/
.list1{
	width:326px;
	height:375px; 
	float:right;  
	margin-top:25px;
	}
.list1 h3{ 
	width:326px; 
	height:74px; 
	background:url(../img/zhuce.jpg) no-repeat;
}
.list1 .biaodan{
	width:326px; 
	height:200px;
}
.left{
	width:80px; 
	text-align:right; 
	font-size:18px;
}
tr{height:50px;}
td{text-align:center;}
/*表单*/
input{
	width:204px; 
	height:28px; 
	border:1px solid #d2d2d2;
}
.course{
	width:204px; 
	height:28px; 
	border:1px solid #d2d2d2; 
	padding:3px 0;
}
.no_border{
	border:none; 
	width:222px; 
	height:53px; 
	background:url(../img/btn.jpg) right top no-repeat; 
	margin-top:30px; 
	cursor:pointer;
}
/*footer*/
.footer{
	width:100%; 
	height:60px; 
	line-height:60px; 
	text-align:center; 
	background:#000; 
	color:#FFF;
}

【注意】图片路径不一样，分为相对路径和绝对路径

(1)绝对路径

绝对路径就是网页上的文档或目录在盘符(即C盘、D盘等)中的真正路径，例如，"D:案例源码lchapter03limages bannerl.jpg”就是一个盘符中的绝对路径。再如，完整的网络地址 “http://www.zcool.com.cn/ images/logo.gif”也是一个绝对路径。

(2)相对路径

相对路径就是相对于当前文档的路径，相对路径没有盘符，通常是以HTML网页文档为起点，通过层级关系描述目标图像的位置。

运行结果：

屏幕录制 2024-03-10 213530

茗~569

关注

23
点赞
踩
29

收藏

觉得还不错? 一键收藏
2
评论
“甜蜜约会”首页制作

1.页面布局下面对“甜蜜约会”首页进行整体布局。在站点根目录下新建一个HTML文件，并命名为"project08",然后使用<div>标签对页面进行布局。2.定义基础样式在站点根目录下的CSS文件夹内新建样式表文件style08.css,使用外链式CsS在project08.html文件中入样式表文件。
复制链接

扫一扫