HTML静态页面设计
１．编写一个自我介绍的HTML页面，要求使用HTML文档常用的文本、超链接、图片、表格、行级、块级等标签，页面要求布局合理，内容图文并茂，将源文件和素材保存在exp01\1\文件夹下。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自我介绍title>
<style>
table{
width:500px;
height:300px;
margin:0 auto;
border-radius:8px;
box-shadow:3px 3px 8px #000000;
background-color:rgba(100,100,00,0.1);
}
.bottom{ border-bottom: 6px #000066 double;
}
style>
head>
<body>
<table >
<tr>
<td colspan="2" align="center" ><h2>自我介绍h2> td>
tr>
<tr>
<td width="97">姓名：td>
<td width="391" >Marytd>
tr>
<tr>
<td>年龄：td>
<td >20td>
tr>
<tr>
<td>班级：td>
<td >计本170td>
tr>
<tr>
<td height="32">专业：td>
<td class="">计算机科学与技术td>
tr>
<tr >
<td colspan="2" >
自我评价 ：
<hr/>
<p>本人适应能力强，性格开朗大方，待人热情，能吃苦耐劳。
不断学习，工作认真负责积极主动，善于创新，
敢于迎接挑战，敢于承担责任，有较强的精力投入工作。
富有工作激情，乐业敬业。有良好的交际技能、
沟通交流谈判技巧及较强的团队合作精神，有良好的职业道德和素质。p>
td>
tr>
table>
body>
html>
页面间导航：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超链接title>
head>
<body bgcolor="#CCCCCC">
<div >
<div >
<p> <img src="images/logo.jpg" >
<a href="login.html">登录a>
| 关于贵美 | 贵美助理 |
<a href="#">联系我们a>
p>
<p>手机 - 诺基亚 -
<a href="anchor.html">MOTOa> - 索爱p>
div>
<div >
<h4>导购资讯h4>
参观电玩达人的宝贝仓库 <br />
炎炎夏日，冰凉家具两折起 <br />
周末折扣，品牌三折热卖
<hr/>div>
<div ><br />
<dt >网游专区<dt>
<ol>
<li > QQ幻想100点卡只需￥8.8元 li>
<li>热血江湖250点只需￥8.8元 li>
<li>问道30元卡只需￥25.0元 li>
<li>跑跑点卡200点只需￥16.8元 li>
ol>
div>
<div >
<dt>数码产品 dt>
<ul>
<li>最酷音乐手机导购 li>
<li>最强街机6300仅售1450 li>
<li>99元热销学生Mp3推荐 li >
<li>漫步者音箱76元搞定li>
ul>
div>
<hr/>
<div >
<dt>MOTO E2 音乐手机dt>
<br/>
<dd> 130W像素摄像头 Linux智能系统dd>
<dd>Intel XScale 处理器dd>
<dd>A2DP蓝牙立体声 市场价：1690dd>
<dd>开学价：1045dd>
div>
<p>版权信息：Copyright © 1997-2008 Guimei Shopping Inc. All Rights Reservedp>
div>
body>
html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>综合案例：贵美商品分类title>
head>
<body>
<img src="images/list_bg.gif" >
<tr >
<th width="61" scope="col"> th>
<th width="136" height="36" scope="col">商品图片th>
<th width="382" scope="col">商品名称/卖家th>
<th width="162" scope="col">价格th>
tr>
<tr >
<th scope="row" height="110"><input type="checkbox" name="chose" />th>
<td><img src="images/list0.jpg" />td>
<td><div align="center">
<p>三国群英会免费区p>
<p>卖家：lingturep>
<p><img src="images/online_pic.gif" width="77" height="19" /> <img src="images/list_tool_fav1.gif" width="11" height="12" />收藏p>
div>td>
<td><div align="center"><p>一口价p>
<p>283.3p>
div>td>
tr>
<tr>
<th scope="row" height="110"><input type="checkbox" name="chose1" />th>
<td><img src="images/list1.jpg" width="122" height="110" />td>
<td><div align="center">
<p>HDMI促销活动p>
<p>卖家：yueyuep>
<p><img src="images/online_pic.gif" width="77" height="19" /> <img src="images/list_tool_fav1.gif" width="11" height="12" />收藏p>
div>td>
<td><div align="center"><p>一口价p>
<p>254p>
div>td>
tr>
<tr>
<th scope="row" height="110"><input type="checkbox" name="chose3" />th>
<td><img src="images/list2.jpg" width="128" height="110" />td>
<td ><div align="center">
<p>精美液晶电视p>
<p>卖家：yuep>
<p><img src="images/online_pic.gif" width="77" height="19" /> <img src="images/list_tool_fav1.gif" width="11" height="12" />收藏p>
div>td>
<td><div align="center"><p>一口价p>
<p>2800p>
div>td>
tr>
table>
body>
html>
用户注册页面：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贵美商城注册title>
head>
<body >
<table align="center" width="1000" height="300" >
<tr>
<td width="130" >登录名：td>
<td width="330" ><input type="text" maxlength="10"> td>
<td width="193" >(可包含a-z、0-9和下划线) td>
<td width="327" ><img src="images/read.gif" width="35" height="26" />阅读贵美网服务协议
td>
tr>
<tr>
<td >密码： td>
<td><input type="text" maxlength="10">td>
<td>（至少包含6个字符）td>
<td rowspan="8"> <textarea rows="25" cols="30" readonly="readonly">欢迎阅读服务条款协议……textarea> td>
tr>
<tr>
<td >再次输入密码：td>
<td><input type="text" maxlength="10"> td>
<td> td>
<tr>
<td>电子邮箱：td>
<td><input type="text">td>
<td>（必须包含@字符）td>
tr>
<tr>
<td>性别：td>
<td><input type="radio" >
<img src="images/Male.gif" width="22" height="21" /> 男
<input type="radio">
<img src="images/Female.gif" width="23" height="21" />女td>
<td rowspan="4" >td>
tr>
<tr>
<td>头像:td>
<td><input type="file"/>td>
<tr>
<td>爱好：td>
<td><input type="checkbox">
运动 <input type="checkbox">
聊天 <input type="checkbox">
玩游戏td>
tr>
<tr>
<td>喜欢的城市:td>
<td><select name="city">
<option selected="selected">[请选择]opiton>select>
td>
tr>
<tr>
<td > td>
<td><input type="submit" disabled="disabled" value="同意右侧服务条款，提交注册信息"><input type="reset" value="重填">td>
<td> td>
tr>
table>
body>
html>
使用框架完成如下help.html页面设计，要求左边按钮超链接的页面分别在右下主窗口内显示。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贵美商城title>
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<script type="text/JavaScript">
var strHome = 'http://www.gmgw.com';
function addFav(){
switch(getNav()){
case 1:
window.external.addFavorite(strHome,'贵美商城');
break;
case 2:
window.sidebar.addPanel('贵美商城',strHome,'');
break;
case 0:
alert("加入收藏失败");
break;
}
function getNav(){
if(navigator.userAgent.indexOf("MSIE")!=-1) return 1;
if(navigator.userAgent.indexOf("Firefox")!=-1) return 2;
return 0;
}
}
function setHome(oThis){
oThis.style.behavior='url(#default#homepage)';
oThis.setHomePage(strHome);
return false;
}
script>
head>
<body>
<div id="container">
<div id="header">
<div id="logo">div>
<div class="upright_menu">
<ul>
<li class="pic pic1">li>
<li class="h_text"><a href="buy_commodity.htm" target="_parent">购物车a>li>
<li class="pic pic2">li>
<li class="h_text"><a href="help.htm" target="_parent">帮助中心a>li>
<li class="pic pic5">li>
<li class="h_text"><a href="JavaScript:void(0);" onclick="addFav();">加入收藏a>li>
<li class="pic pic6">li>
<li class="h_text"><a href="JavaScript:void(0);" onclick="setHome(this);">设为首页a>li>
<li class="bt login h_text"><a href="login.htm" target="_parent">登录a>li>
<li class="bt reg h_text"><a href="register.htm" target="_parent">注册a>li>
ul>
div>
<div class="upright_bottom">
<ul>
<li class="h_text hello">你好，欢迎访问贵美商城！
<script type="text/JavaScript">
now=new Date;
document.write(now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日"+now.getHours()+"点"+now.getMinutes()+"分");
script>
li>
ul>
div>
<div class="nav">
<ul>
<li><a href="index.htm" target="_parent"> 首 页 a>li>
<li><a href="commoditys_show.htm" target="_parent">家用电器a>li>
<li><a href="commoditys_show.htm" target="_parent">手机数码a>li>
<li><a href="commoditys_show.htm" target="_parent">日用百货a>li>
<li><a href="commoditys_show.htm" target="_parent"> 书 籍 a>li>
<li><a href="help.htm" target="_parent">帮助中心a>li>
<li><a href="help.htm" target="_parent">免费开店a>li>
<li><a href="help.htm" target="_parent">全球咨询a>li>
ul>
div>
div>
body>
html>
html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册＆认证title>
<style type="text/css">
style>
head>
<body>
<h3>知识堂首页 >> 注册＆认证 h3>
<p><img src="images/reg_line.jpg" width="580" height="12" alt="alt" />p>
<p>享受贵美网免费网上交易乐趣，并且在超人气的社区尽情交流您的网上购物经验，您需要先注册成为贵美的会员，具体的步骤如下：p>
<p><img src="images/reg_step.jpg" width="495" height="47" alt="alt" />p>
<ul type="square">
<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>
body>
html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
<style type="text/css">
style>
head>
<body>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p> p>
<p>
<a href="right.html" target="rightname"><img src="images/reg.jpg" border="0" alt="alt" />a>
p>
<p>
<img src="images/buy.jpg" border="0" alt="alt" />a>
p>
<p>
<img src="images/sale.jpg" border="0" alt="alt" />a>
p>
<p><img src="images/person.jpg" border="0" alt="alt" />p>
body>
html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贵美商城title>
head>
<frameset rows="100,*" border="1">
frame>
<frameset cols="22%,*" bordercolor="#000000">
frame>
<frame name="rightname" src="right.html" noresize="noresize" scrolling="no">
frame>
frameset>
frameset><noframes>noframes>
html>
总结
1）什么是表单，表单在网页中的作用是什么？
可以收集用户的信息和反馈意见，是网站管理者与浏览者之间沟通的桥梁。
主要负责数据采集的功能。
2）表格与框架都具有页面布局的作用，他们在进行页面布局时各有什么优缺点？
表格用于划分页面区域的，而框架是用于分割浏览器窗口的，即使用框架结构的页面可以将一个浏览器窗口划分为多个相互独立又相互联系的小窗口，每个区域都可以显示不同的HTML文档，从而实现将多个HTML文件组织到一个浏览器窗口中显示。
使用框架的优点：
访问者的浏览器不需为每个页面重新加载导航条；每个框架都具有自己的滚动条，因此访问者可以独立滚动这些框架进行浏览。
使用框架的缺点：
a）并不是所有浏览器都提供良好的框架支持
b）难以实现在不同框架中精确的对齐各个页面元素
**使用表格布局页面的好处：**网上绝大部分的页面都是使用表格来美化的，因为表格有很好的兼容性，可被绝大部分的浏览器所支持，而且使用表格会使页面结构清晰、布局整齐。
你可能感兴趣的:(Web前端)