第1章 WEB01-HTML篇-视频教程-第二部分

2022-11-25 17:35:03 浏览数 (1)

1.4 网站的首页显示

1.4.1 需求分析：

在浏览器中显示网站的首页效果如下：

1.4.2 分析：

1.4.2.1 技术分析

【HTML的表格标签】

代码语言：javascript复制
表格标签：
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>表格的属性：border	：表格边框
width	：表格宽度
height	：表格高度
align	：水平方向对齐方式 left center right
bgcolor	：背景色
1.4.2.2 步骤分析：
  • 步骤一：创建8行表格
  • 步骤二：实现第一行，嵌套一个一行三列表格。
  • 步骤三：实现第二行，实现导航，设置背景色。
  • 步骤四：放置一张图片
  • 步骤五：显示热门商品，创建一个三行七列的表格。对表格进行跨行，跨列的操作。
  • 步骤六：引入一张广告图片。
  • 步骤七：显示最新商品，创建一个三行七列的表格。对表格进行跨行，跨列的操作。
  • 步骤八：广告信息
  • 步骤九：链接版权信息。

1.4.3 代码实现

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站首页</title>
</head>
<body>
<table width="1400" border="0" align="center">
<tr>
<td>
<!-- LOGO部分 -->
<table width="100%">
<tr height="40">
<td>
<img src="../img/logo2.png"/>
</td>
<td>
<img src="../img/header.png"/>
</td>
<td>
<a href="#">登录</a>
<a href="../案例五：网站注册页面显示/网站的注册页面.html">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<tr height="30" bgcolor="black">
<td>
<!--导航部分-->
<a href="#"><font color="white">首页</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">手机数码</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">电脑办公</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr>
<td>
<img src="../img/1.jpg" width="100%" />
</td>
</tr>
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="7"><font size="5"><b>最新商品</b></font><img src="../img/title2.jpg"></td>
</tr>
<tr>
<td rowspan="2"  width="200" height="500">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</td>
<td colspan="3" width="600" height="250">
<img src="../products/hao/middle01.jpg" width="100%" height="250"/>
</td>
<td width="200" align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200"  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200"  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
</tr>
<tr>
<td  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!--广告-->
<a href="#"><img src="../products/hao/ad.jpg" width="100%"></a>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="7"><font size="5"><b>最新商品</b></font><img src="../img/title2.jpg"></td>
</tr>
<tr>
<td rowspan="2"  width="200" height="500">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</td>
<td colspan="3" width="600" height="250">
<img src="../products/hao/middle01.jpg" width="100%" height="250"/>
</td>
<td width="200" align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200"  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200"  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
</tr>
<tr>
<td  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td  align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr>
<tr>
<td align="center">
<a href="../案例一：网站信息页面显示/网站信息页面显示.html">关于我们</a>
<a href="">联系我们</a>
<a href="">招贤纳士</a>
<a href="">法律声明</a>
<a href="../案例三：网站列表页面显示/网站列表页面显示.html">友情链接</a>
<a href="">支付方式</a>
<a href="">配送方式</a>
<a href="">服务声明</a>
<a href="">广告声明</a>
<br/>
Copyright © 2005-2016 传智商城 版权所有
</td>
</tr>
</table>
</body>
</html>

1.5 网站的注册页面案例：

1.5.1 需求分析：

在浏览器中显示如下的效果：

1.5.2 分析：

1.5.2.1 技术分析：

【HTML的表单标签】

表单标签：

  • 需要提交的表单需要使用<form></form>括起来
    • method：提交方式
    • action：提交路径
  • 文本框:
    • name
    • value
    • size
    • maxlength
    • readonly
    • <input type=”text”/>
  • 密码框：
    • <input type=”password”/>
  • 单选按钮：
    • Checked：默认选中
    • <input type=”radio”/>
  • 复选框
    • Checked：默认选中
    • <input type=”checkbox”/>
  • 下拉列表框
    • Selected：默认选中
    • Multiple：全部显示
    • <select><option></option></select>
  • 文件上传项
    • <input type=”file” name=”file”/>
  • 文本区
    • <textarea name=”” cols=”” rows=””></textarea>
  • 提交按钮
    • <input type=”submit” value=”注册”>
  • 重置按钮
    • <input type=”reset” value=”重置”>
  • 普通按钮
    • <input type=”button” value=”普通按钮”>
  • 隐藏字段
    • <input type=”hidden” name=”id”/>

提交方式：

  • GET ：默认值
    • 提交的数据的时候是有大小的限制
    • 提交的数据都会在地址栏中进行显示
  • POST ：
    • 提交的数据没有大小限制
    • 提交的数据不会再地址栏中进行显示
1.5.2.2 步骤分析：
  • 步骤一：创建一个5行表格
  • 步骤二：完成每行显示
  • 步骤三：中间行设置一个背景图片，嵌套一个表格居中显示。在表格中显示表单的内容

1.5.3 代码实现：

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
<!-- LOGO部分 -->
<table width="100%">
<tr height="40">
<td>
<img src="../img/logo2.png"/>
</td>
<td>
<img src="../img/header.png"/>
</td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="black" height="30">
<td>
<a href="#"><font color="white">首页</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">手机数码</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">电脑办公</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp;
<a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr height="600">
<td>
<table width="100%" height="100%" background="../img/regist_bg.jpg">
<tr>
<td align="center">
<table width="60%" height="80%" border="1" bgcolor="white">
<tr>
<td>
<form>
<table width="100%" height="100%" border="0" align="center" cellspacing="10">
<tr>
<td>用户名</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="repassword"/></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女</td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>生日</td>
<td><input type="text" name="birthday"/></td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text" name="checkcode" size="10"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"/></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr>
<tr>
<td align="center">
<a href="../案例一：网站信息页面显示/网站信息页面显示.html">关于我们</a>
<a href="">联系我们</a>
<a href="">招贤纳士</a>
<a href="">法律声明</a>
<a href="../案例三：网站列表页面显示/网站列表页面显示.html">友情链接</a>
<a href="">支付方式</a>
<a href="">配送方式</a>
<a href="">服务声明</a>
<a href="">广告声明</a>
<br/>
Copyright © 2005-2016 传智商城 版权所有
</td>
</tr>
</table>
</body>
</html>

1.6 网站后台页面显示

1.6.1 需求分析：

在浏览器中显示网站的后台页面，效果如下图：

1.6.2 分析：

1.6.2.1 技术分析：

【HTML的框架标记】

代码语言：javascript复制
<frameset>
</frameset>
* 使用了frameset标签，不需要使用body.
* 属性：* rows：横向切分页面
* cols：纵向切分页面
<frame>标签代表切分每个部分的页面
* src：引入页面的路径
1.6.2.2 步骤分析：
  • 步骤一：先将页面切分成上下两个部分。
  • 步骤二：将下部分切分成左右两个部分。
  • 步骤三：分别引入不同的页面。

1.6.3 代码实现：

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="15%,*">
<frame src="top.html" />
<frameset cols="15%,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</frameset>
</html>

1.6.4 扩展需求：

点击分类管理，将数据放入到表格中显示到右侧区域中！

在frame上添加一个属性name，在超链接的target属性上设置这个名称。点击超链接的时候，跳转到指定的位置。

<h3><a href=”data.html” target=”right”>分类管理</a></h3>

1.7 HTML5中的一些扩展表单标签：

1.7.1 HTML5扩展的表单标签及属性：

代码语言：javascript复制
<input type=”email”>
<input type=”date”>
<input type=”number”>
* placeholder:
网站 html html5

0 人点赞