Hello朋友们！我们又见面了！是不是又到了焦头烂额忙期末设计的作业的时候了，不要担心，我来了，经过不懈的努力写出了一个比较容易懂的网页，完全足够应付你亲爱的老师的网页设计大作业！
哦！！！！！有问题私信我！！！！！！！

目录（有问题可私信我）

前言
一、网站介绍
二、站点资源组织
三、网页内容
- - - - 1.使用元素介绍
        2.页面logo与版权设计
        3.导航菜单设计
        4.javascript脚本应用
四、代码
- - - - 包含
- 1.主函数（index.html）
- 2.gemi.html
- 3.gudong.html
- 4.tupian.html（图片文档没法法，可以私信我）
- 5.xinwen.html
- 6.ziliao.html
- 7.ziyuan.html
五、图片展示
六、心得体会

前言

emmm，网页肯定是有要求的啊

根据你所学的知识进行网页设计编写，里面包含一二三级页面编写

一、网站介绍

设计该网站可以使中国更多喜爱周杰伦的粉丝更方便了解周杰伦自出道以来所有的活动，商业照片，歌曲，演唱会等。

二、站点资源组织

一个完整的站点由各种不同的文件构成，包括页面文件、图片、样式表文件、javascript脚本文件等等，我们将不同类型、不同作用的文件组织在不同的文件夹中，就可以保证站点文件组织合理、结构清晰，更加便于后期对网站的测试修改、管理、更新和维护。

三、网页内容

1.使用元素介绍

①在首页公告栏目加入了8个超链接，并且添加了var属性使每次打开时间都更新与北京时间一致,运用`<class><span><img><a herf>`插入二级页面
②在新闻栏目中加入超链接使每一条新闻可以打开运用` <class><span><img><a herf>`
③在资料栏目中运用`<td>`表单，充分运用div属性使表单更美观，运用`<class><span><img><a herf>`
④在图片栏目中给每一张图片加入超链接，使得点击每一张图片可以 越至图片集，并且加入两条视频元素，运用`<class><span><img><a herf>`
⑤在资源栏目中运用`<td>`表单，充分运用div属性使表单更美观，在公告中加入超链接
⑥在歌迷会栏目中运用`<li><td><div><img><a herf>`
⑦在在线留言栏目中运用`<table><input><class><id><a herf>`

2.页面logo与版权设计

页面用周杰伦的一张照片代替，版权设计成周杰伦中文网

3.导航菜单设计

1.首页2.新闻3.资料4.图片5.资源6.歌迷会7.在线留言
运用平铺的导航菜单使用户更方便定位到想知道的地方。

4.javascript脚本应用

`<script type="text/javascript">`type属性：type属性用来指定HTML中使用的是哪种脚本语言及其版本，此属性在	HTML4.0标准开始，推荐使用type属性来代替language属性。
`<script defer="defer">`defer属性：defer属性的作用是当文档加载完毕后再执行脚本，当脚本语言不需要立即运行时，设置defer属性后，浏览器将不必等待脚本语言加载。这样页面加载会更快。但当有一些脚本需要在页面加载过程中或加载完成后立即执行时，就不需要使用defer属性。
`<script src="01.js">`src属性：src属性用来指定外部脚本文件的路径，外部脚本文件通常使用JavaScript脚本，其扩展名为.js。

四、代码

包含

在这里插入图片描述

1.主函数（index.html）

<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Keywords" content="tzyh">
<title>欢迎来到周杰伦中文网！</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="default.css"  rel="stylesheet" type="text/css"><!-- Copyright � 2005. Spidersoft Ltd -->
<style>A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink       {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info          {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover    {color:green;background:transparent;text-decoration:underline}
body,td,th {font-family: Arial, "微软雅黑", sans-serif;
}
</style>
<!-- /Copyright � 2005. Spidersoft Ltd -->
<!-- start header -->
<div id="aa" style="width:860px; margin:0 auto; height:305px;" ><img src="images/logo.jpg"  alt="" width="860" height="305"></div><div id="nav"><ul><li><a href="index.html" >首页</a></li><li><a href="xinwen.html" >新闻</a></li><li><a href="ziliao.html" >资料</a></li><li><a href="tupian.html" >图片</a></li><li><a href="ziyuan.html" >资源</a></li><li class="current_page_item"><a href="gemi.html" >歌迷会</a></li><li class="last"><a href="gudong.html" >在线留言</a></li></ul></div><!-- end header -->
<!-- start page -->
<div id="wrapper">
<div id="wrapper-btm">
<div id="page" style="background:#fff;">
<!-- start sidebar --><div id="sidebar" style="  clear:both;" ><ul><li id="search"><h2>搜索</h2><form method="get" action=""><fieldset><input type="text" id="s" name="s" value=""><input type="submit" id="x" value="搜索"></fieldset></form></li><li><h2>公告</h2><ul class="vv"><li>1 <a href="http://www.moretickets.com"  title="魔天伦常州站 团购中" target="_blank">魔天伦常州站 团购中</a></li><li>2 <a href="http://www.moretickets.com"  title="摩天轮天津站 团购中" target="_blank">摩天轮天津站 团购中</a></li><li>3 <a href="http://www.moretickets.com"  title="摩天轮上海站 团购中" target="_blank">摩天轮上海站 团购中</a></li><li>4 <a href="http://www.jaycn.com"  title="YY2716 招杰迷 招管理 " target="_blank">YY2716 招杰迷 招管理</a></li><li>5 <a href="http://www.jaycn.com"  title="Jay世界巡迴演唱會場次" target="_blank">Jay世界巡迴演唱會場次</a></li><li>6 <a href="http://www.jaycn.com"  title="周杰伦给JayCn题词。" target="_blank">周杰伦给JayCn题词。</a></li><li>7 <a href="http://www.jaycn.com"  title="JayCn 开通"j="J""认证功能" target="_blank">JayCn 开通"J"认证功能</a></li><li>8 <a href="http://www.jaycn.com"  title="JayCn 全国歌迷会 官方群号" target="_blank">JayCn 全国歌迷会 官方群号</a></li></ul></li><li><!-- end sidebar --><!-- start content --><img src="images/zuo.jpg"  alt="" width="152" height="188"></li></ul><div class="lunhuan"></div></div><div id="content"><div><span style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;</span><div class="cc"><img src="images/cc.jpg"></div>
</div><div class="post"><h1 class="title" style="font-size:22px; color:red; ">杰伦新闻 </h1><div class="entry"><p><img src="images/img06.jpg"  alt="" width="120" height="133" class="left">5月31日晚,周杰伦“魔天伦”世界巡演郑州站在河南省体育中心正式火力开唱。为了给观众最炫的视觉冲击,制作团队使用亚洲最大的“Map-ping”技术,以“timetrack”(时空凝结拍摄技术)创造4D魔幻特效。同时,各种天价舞美道具也华丽登场,合力打造一个极具未来感的魔幻空间,周杰伦化身魔幻天王,带领观众穿梭虚实世界,给人最震撼的现场观感。</p></div><div class="meta"><p class="byline"><SCRIPT language="JavaScript" type="text/javascript">
var day="";
var month="";
var ampm="";
var ampmhour="";
var myweekday="";
var year="";
mydate=new Date();
myweekday=mydate.getDay();
mymonth=mydate.getMonth()+1;
myday= mydate.getDate();
myyear= mydate.getYear();
year=(myyear > 200) ? myyear : 1900 + myyear;
if(myweekday == 0)
weekday=" 星期日 ";
else if(myweekday == 1)
weekday=" 星期一 ";
else if(myweekday == 2)
weekday=" 星期二 ";
else if(myweekday == 3)
weekday=" 星期三 ";
else if(myweekday == 4)
weekday=" 星期四 ";
else if(myweekday == 5)
weekday=" 星期五 ";
else if(myweekday == 6)
weekday=" 星期六 ";
document.write("<font color=#ff0000>北京时间 "+year+"年"+mymonth+"月"+myday+"日 "+weekday+"</font>");
</SCRIPT></p><p class="links"><a href="ziliao.html"  class="more">个人资料</a> <b>|</b> <a href="gemi.html"  class="comments">歌迷会</a></p></div></div></div><!-- end content --><div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
</div>
</div>
<!-- start footer -->
<div id="footer"><div id="footer-wrap"><p id="legal">周杰伦明星网站</p></div>
</div>
<!-- end footer --></body>
</html>

2.gemi.html

<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Keywords" content="tzyh">
<title>欢迎来到周杰伦中文网！</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="default.css"  rel="stylesheet" type="text/css">
<style type="text/css">
body,td,th {font-family: Arial, "微软雅黑", sans-serif;
}
</style>
</head><body><!-- Copyright � 2005. Spidersoft Ltd -->
<style>
A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink       {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info          {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover    {color:green;background:transparent;text-decoration:underline}
</style>
<!-- /Copyright � 2005. Spidersoft Ltd -->
<!-- start header -->
<div id="aa" style="width:860px; margin:0 auto; height:305px;" ><img src="images/logo.jpg"  alt="" width="860" height="305"></div><div id="nav"><ul><li><a href="index.html" >首页</a></li><li><a href="xinwen.html" >新闻</a></li><li><a href="ziliao.html" >资料</a></li><li><a href="tupian.html" >图片</a></li><li><a href="ziyuan.html" >资源</a></li><li class="current_page_item"><a href="gemi.html" >歌迷会</a></li><li class="last"><a href="gudong.html" >在线留言</a></li></ul></div><!-- end header -->
<!-- start page -->
<div id="wrapper">
<div id="wrapper-btm">
<div id="page">
<!-- start sidebar --><div id="sidebar"><ul><li id="search"><h2>搜索</h2><form method="get" action=""><fieldset><input type="text" id="s" name="s" value=""><input type="submit" id="x" value="搜索"></fieldset></form></li><li><h2>公告</h2><ul class="vv"><li>1 <a href="http://www.moretickets.com"  title="魔天伦常州站 团购中" target="_blank">魔天伦常州站 团购中</a></li><li>2 <a href="http://www.moretickets.com"  title="摩天轮天津站 团购中" target="_blank">摩天轮天津站 团购中</a></li><li>3 <a href="http://www.moretickets.com"  title="摩天轮上海站 团购中" target="_blank">摩天轮上海站 团购中</a></li><li>4 <a href="http://www.jaycn.com"  title="YY2716 招杰迷 招管理 " target="_blank">YY2716 招杰迷 招管理</a></li><li>5 <a href="http://www.jaycn.com"  title="Jay世界巡迴演唱會場次" target="_blank">Jay世界巡迴演唱會場次</a></li><li>6 <a href="http://www.jaycn.com"  title="周杰伦给JayCn题词。" target="_blank">周杰伦给JayCn题词。</a></li><li>7 <a href="http://www.jaycn.com"  title="JayCn 开通"j="J""认证功能" target="_blank">JayCn 开通"J"认证功能</a></li><li>8 <a href="http://www.jaycn.com"  title="JayCn 全国歌迷会 官方群号" target="_blank">JayCn 全国歌迷会 官方群号</a></li></ul></li><li><!-- end sidebar --><!-- start content --><img src="images/zuo.jpg"  alt="" width="152" height="188"></li></ul></div><div id="content">
<div class="post"><h1 class="title" style="font-size:22px; font-weight:normal; color:red;">歌迷会 </h1><div class="entry"><br><p><img src="images/map.jpg"  alt="" width="571" height="415" usemap="#Map">
<map name="Map" id="Map"><area shape="rect" coords="373,136,430,171" href=""  target="_blank" alt="">
<area shape="rect" coords="266,180,387,285" href=""  target="_blank" alt="">
<area shape="rect" coords="432,84,504,166" href=""  target="_blank" alt="">
<area shape="rect" coords="406,208,476,288" href=""  target="_blank" alt="">
<area shape="rect" coords="341,330,460,392" href=""  target="_blank" alt="">
</map></p></div>邮件：<a href="mailto:*********@qq.com">*********@qq.com</a></div></div><!-- end content --><div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
</div>
</div>
<!-- start footer -->
<div id="footer"><div id="footer-wrap"><p id="legal">周杰伦明星网站</p></div>
</div>
<!-- end footer --></body>
</html>

3.gudong.html

<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Keywords" content="tzyh">
<title>欢迎来到周杰伦中文网！</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="default.css"  rel="stylesheet" type="text/css"><style type="text/css">
body,td,th {font-family: Arial, "微软雅黑", sans-serif;
}
</style>
</head>
<body><!-- Copyright � 2005. Spidersoft Ltd -->
<style>
A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink       {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info          {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover    {color:green;background:transparent;text-decoration:underline}
</style>
<!-- /Copyright � 2005. Spidersoft Ltd -->
<!-- start header -->
<div id="aa" style="width:860px; margin:0 auto; height:305px;" ><img src="images/logo.jpg"  alt="" width="860" height="305"></div><div id="nav"><ul><li><a href="index.html" >首页</a></li><li><a href="xinwen.html" >新闻</a></li><li><a href="ziliao.html" >资料</a></li><li><a href="tupian.html" >图片</a></li><li><a href="ziyuan.html" >资源</a></li><li class="current_page_item"><a href="gemi.html" >歌迷会</a></li><li class="last"><a href="gudong.html" >在线留言</a></li></ul></div><!-- end header -->
<!-- start page -->
<div id="wrapper">
<div id="wrapper-btm">
<div id="page">
<!-- start sidebar --><div id="sidebar"><ul><li id="search"><h2>搜索</h2><form method="get" action=""><fieldset><input type="text" id="s" name="s" value=""><input type="submit" id="x" value="搜索"></fieldset></form></li><li><h2>公告</h2><ul class="vv"><li>1 <a href="http://www.moretickets.com"  title="魔天伦常州站 团购中" target="_blank">魔天伦常州站 团购中</a></li><li>2 <a href="http://www.moretickets.com"  title="摩天轮天津站 团购中" target="_blank">摩天轮天津站 团购中</a></li><li>3 <a href="http://www.moretickets.com"  title="摩天轮上海站 团购中" target="_blank">摩天轮上海站 团购中</a></li><li>4 <a href="http://www.jaycn.com"  title="YY2716 招杰迷 招管理 " target="_blank">YY2716 招杰迷 招管理</a></li><li>5 <a href="http://www.jaycn.com"  title="Jay世界巡迴演唱會場次" target="_blank">Jay世界巡迴演唱會場次</a></li><li>6 <a href="http://www.jaycn.com"  title="周杰伦给JayCn题词。" target="_blank">周杰伦给JayCn题词。</a></li><li>7 <a href="http://www.jaycn.com"  title="JayCn 开通"j="J""认证功能" target="_blank">JayCn 开通"J"认证功能</a></li><li>8 <a href="http://www.jaycn.com"  title="JayCn 全国歌迷会 官方群号" target="_blank">JayCn 全国歌迷会 官方群号</a></li></ul> </li><li><!-- end sidebar --><!-- start content --><img src="images/zuo.jpg"  alt="" width="152" height="188"></li></ul></div><div id="content">
<div class="post"><h1 class="title" style="font-size:22px; font-weight:normal; color:red;">在线留言</h1><br><table width="600" border="0" cellspacing="10" cellpadding="15" style="margin:20px auto;"><tr><td>昵称</td><td><input name="" type="text" style="width:400px; height:30px;border:1px solid #ccc;"></td></tr><tr><td>电子邮件</td><td><input name="" type="text" style="width:400px; height:30px;border:1px solid #ccc;"></td></tr><tr><td>电话</td><td><input name="" type="text" style="width:400px; height:30px;border:1px solid #ccc;"></td></tr><tr><td>正文</td><td><textarea name="" cols="" rows="" style="width:400px; height:100px;border:1px solid #ccc;"></textarea></td></tr><tr><td></td><td><input name="" type="submit" style="width:200px; height:30px;border:1px solid #ccc;" value="提交信息"></td></tr>
</table>加入周杰伦歌迷会，请发送邮件：<a href="mailto:*********@qq.com">********@qq.com</a></div></div><!-- end content --><div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
</div>
</div>
<!-- start footer -->
<div id="footer"><div id="footer-wrap"><p id="legal">周杰伦明星网站</p></div>
</div>
<!-- end footer --></body>
</html>

4.tupian.html（图片文档没法法，可以私信我）

<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Keywords" content="tzyh">
<title>欢迎来到周杰伦中文网！</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="default.css"  rel="stylesheet" type="text/css"><style type="text/css">
body,td,th {font-family: Arial, "微软雅黑", sans-serif;
}
</style>
</head>
<body><style>
A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink       {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info          {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover    {color:green;background:transparent;text-decoration:underline}
</style><div id="aa" style="width:860px; margin:0 auto; height:305px;" ><img src="images/logo.jpg"  alt="" width="860" height="305"></div><div id="nav"><ul><li><a href="index.html" >首页</a></li><li><a href="xinwen.html" >新闻</a></li><li><a href="ziliao.html" >资料</a></li><li><a href="tupian.html" >图片</a></li><li><a href="ziyuan.html" >资源</a></li><li class="current_page_item"><a href="gemi.html" >歌迷会</a></li><li class="last"><a href="gudong.html" >在线留言</a></li></ul></div><!-- end header -->
<!-- start page -->
<div id="wrapper">
<div id="wrapper-btm">
<div id="page">
<!-- start sidebar --><div id="sidebar"><ul><li id="search"><h2>搜索</h2><form method="get" action=""><fieldset><input type="text" id="s" name="s" value=""><input type="submit" id="x" value="搜索"></fieldset></form></li><li><h2>公告</h2><ul><li>1<a href="javascript:if(confirm('http://bbs.jaycn.com/.html window.location='http://bbs.jaycn.com/.html'"  title="魔天伦常州站 团购中" target="_blank">魔天伦常州站 团购中</a></li><li>2<a href="javascript:if(confirm('http://bbs.jaycn.com/.html window.location='http://bbs.jaycn.com/.html'"  title="YY2716 招杰迷 招管理 " target="_blank">YY2716 招杰迷 招管理</a></li><li>3<a href="javascript:if(confirm('http://bbs.jaycn.com/.html window.location='http://bbs.jaycn.com/.html'"  title="周杰倫世界巡迴演唱會場次" target="_blank">周杰倫世界巡迴演唱會場次</a></li><li>4<a href="javascript:if(confirm('http://bbs.jaycn.com/.html window.location='http://bbs.jaycn.com/.html'"  title="周杰伦给JayCn题词。" target="_blank">周杰伦给JayCn题词。</a></li><li>5<a href="javascript:if(confirm('http://bbs.jaycn.com/.html window.location='http://bbs.jaycn.com/.html'"  title="JayCn 开通“J”认证功能" target="_blank">JayCn 开通“J”认证功能</a></li><li>6<a href="javascript:if(confirm('http://bbs.jaycn.com/.html window.location='http://bbs.jaycn.com/.html'"  title="JayCn 全国歌迷会 官方群号" target="_blank">JayCn 全国歌迷会 官方群号</a></li></ul></li><li><!-- end sidebar --><!-- start content --><img src="images/zuo.jpg"  alt="" width="152" height="188"></li></ul></div><div id="content">
<div class="post"><h1 class="title">杰伦图片 </h1><div class="chanpin"><p><a href="https://movie.douban.com/celebrity/1048000/photos/"><img src="images/tupian1.jpg"  alt=""></a></p><p><a href="https://movie.douban.com/celebrity/1048000/photos/"><img src="images/tupian2.jpg"  alt=""></a></p><p><a href="https://movie.douban.com/celebrity/1048000/photos/"><img src="images/tupian3.jpg"  alt=""></a></p><p><a href="https://movie.douban.com/celebrity/1048000/photos/"><img src="images/tupian4.jpg"  alt=""></a></p><p><a href="https://movie.douban.com/celebrity/1048000/photos/"><img src="images/tupian5.jpg"  alt=""></a></p><p><a href="https://movie.douban.com/celebrity/1048000/photos/"><img src="images/tupian6.jpg"  alt=""></a></p><p><a href="https://movie.douban.com/celebrity/1048000/photos/"><img src="images/tupian7.jpg"  alt=""></a></p><p><a href="https://movie.douban.com/celebrity/1048000/photos/"><img src="images/tupian8.jpg"  alt=""></a></p><p><a href="https://movie.douban.com/celebrity/1048000/photos/"><img src="images/tupian9.jpg"  alt=""></a></p><video src="images/shipin1.mp4" controls="controls" autoplay="autoplay" width="250px" height="200px"></video><video src="images/shipin2.mp4" controls="controls" autoplay="autoplay" width="250px" height="200px"></video><div style="clear: both;">&nbsp;</div></div></div></div><!-- end content --><div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
</div>
</div>
<!-- start footer -->
<div id="footer"><div id="footer-wrap"><p id="legal">周杰伦明星网站</p></div>
</div>
<!-- end footer --></body>
</html>

5.xinwen.html

<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Keywords" content="tzyh">
<title>欢迎来到周杰伦中文网！</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="default.css"  rel="stylesheet" type="text/css"><style type="text/css">
body,td,th {font-family: Arial, "微软雅黑", sans-serif;
}
</style>
</head>
<body><!-- Copyright � 2005. Spidersoft Ltd -->
<style>
A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink       {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info          {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover    {color:green;background:transparent;text-decoration:underline}
</style>
<!-- /Copyright � 2005. Spidersoft Ltd -->
<!-- start header -->
<div id="aa" style="width:860px; margin:0 auto; height:305px;" ><img src="images/logo.jpg"  alt="" width="860" height="305"></div><div id="nav"><ul><li><a href="index.html" >首页</a></li><li><a href="xinwen.html" >新闻</a></li><li><a href="ziliao.html" >资料</a></li><li><a href="tupian.html" >图片</a></li><li><a href="ziyuan.html" >资源</a></li><li class="current_page_item"><a href="gemi.html" >歌迷会</a></li><li class="last"><a href="gudong.html" >在线留言</a></li></ul></div><!-- end header -->
<!-- start page -->
<div id="wrapper">
<div id="wrapper-btm">
<div id="page">
<!-- start sidebar --><div id="sidebar"><ul><li id="search"><h2>搜索</h2><form method="get" action=""><fieldset><input type="text" id="s" name="s" value=""><input type="submit" id="x" value="搜索"></fieldset></form></li><li><h2>公告</h2><ul class="vv"><li>1 <a href="http://www.moretickets.com"  title="魔天伦常州站 团购中" target="_blank">魔天伦常州站 团购中</a></li><li>2 <a href="http://www.moretickets.com"  title="摩天轮天津站 团购中" target="_blank">摩天轮天津站 团购中</a></li><li>3 <a href="http://www.moretickets.com"  title="摩天轮上海站 团购中" target="_blank">摩天轮上海站 团购中</a></li><li>4 <a href="http://www.jaycn.com"  title="YY2716 招杰迷 招管理 " target="_blank">YY2716 招杰迷 招管理</a></li><li>5 <a href="http://www.jaycn.com"  title="Jay世界巡迴演唱會場次" target="_blank">Jay世界巡迴演唱會場次</a></li><li>6 <a href="http://www.jaycn.com"  title="周杰伦给JayCn题词。" target="_blank">周杰伦给JayCn题词。</a></li><li>7 <a href="http://www.jaycn.com"  title="JayCn 开通"j="J""认证功能" target="_blank">JayCn 开通"J"认证功能</a></li><li>8 <a href="http://www.jaycn.com"  title="JayCn 全国歌迷会 官方群号" target="_blank">JayCn 全国歌迷会 官方群号</a></li></ul></li><li><!-- end sidebar --><!-- start content --><img src="images/zuo.jpg"  alt="" width="152" height="188"></li></ul></div><div id="content">
<div class="post"><h1 class="title" style="font-size:22px; font-weight:normal; color:red;">杰伦新闻 </h1><div class="entry" ><ul class="pp"><li><a href="https://tieba.baidu.com/f?kw=%E5%91%A8%E6%9D%B0%E4%BC%A6"  title="05/25 尼坤：我知道周杰伦很有才华 有机会很想与他合作" target="_blank">尼坤：我知道周杰伦很有才华 有机会很想与他合作</a>05-25</li><li><a href="https://tieba.baidu.com/f?kw=%E5%91%A8%E6%9D%B0%E4%BC%A6"  title="05/25 北京站 黄牛最屌的一句话 周杰伦的还能打折？" target="_blank">05/25 北京站 黄牛最屌的一句话 周杰伦的还能打折？</a>05-25</li><li><a href="https://tieba.baidu.com/f?kw=%E5%91%A8%E6%9D%B0%E4%BC%A6"  title="05/15 周杰伦 江蕙 张惠妹金曲宣传大使三巨头大合体" target="_blank">05/15 周杰伦 江蕙 张惠妹金曲宣传大使三巨头大合体</a>05-15</li><li><a href="https://tieba.baidu.com/f?kw=%E5%91%A8%E6%9D%B0%E4%BC%A6"  title="05/11 周杰伦昨长沙开唱 粉丝雨中支持偶像忆青春" target="_blank">05/11 周杰伦昨长沙开唱 粉丝雨中支持偶像忆青春</a>05-11</li><li><a href="https://tieba.baidu.com/f?kw=%E5%91%A8%E6%9D%B0%E4%BC%A6"  title="05/03 魔天伦上海站 冰封世界的场景中揭开序幕" target="_blank">05/03 魔天伦上海站 冰封世界的场景中揭开序幕</a>05-10</li></ul><p><img src="images/xinwen.jpg"  alt="" width="518" height="362"></p></div></div></div><!-- end content --><div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
</div>
</div>
<!-- start footer -->
<div id="footer"><div id="footer-wrap"><p id="legal">周杰伦明星网站</p></div>
</div>
<!-- end footer --></body>
</html>

6.ziliao.html

<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Keywords" content="tzyh">
<title>欢迎来到周杰伦中文网！</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="default.css"  rel="stylesheet" type="text/css"><style type="text/css">
body,td,th {font-family: Arial, "微软雅黑", sans-serif;
}
</style>
</head>
<body><!-- Copyright � 2005. Spidersoft Ltd -->
<style>
A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink       {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info          {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover    {color:green;background:transparent;text-decoration:underline}
</style>
<!-- /Copyright � 2005. Spidersoft Ltd -->
<!-- start header -->
<div id="aa" style="width:860px; margin:0 auto; height:305px;" ><img src="images/logo.jpg"  alt="" width="860" height="305"></div><div id="nav"><ul><li><a href="index.html" >首页</a></li><li><a href="xinwen.html" >新闻</a></li><li><a href="ziliao.html" >资料</a></li><li><a href="tupian.html" >图片</a></li><li><a href="ziyuan.html" >资源</a></li><li class="current_page_item"><a href="gemi.html" >歌迷会</a></li><li class="last"><a href="gudong.html" >在线留言</a></li></ul></div><!-- end header -->
<!-- start page -->
<div id="wrapper">
<div id="wrapper-btm">
<div id="page">
<!-- start sidebar --><div id="sidebar"><ul><li id="search"><h2>搜索</h2><form method="get" action=""><fieldset><input type="text" id="s" name="s" value=""><input type="submit" id="x" value="搜索"></fieldset></form></li><li><h2>公告</h2><ul class="vv"><li>1 <a href="http://www.moretickets.com"  title="魔天伦常州站 团购中" target="_blank">魔天伦常州站 团购中</a></li><li>2 <a href="http://www.moretickets.com"  title="摩天轮天津站 团购中" target="_blank">摩天轮天津站 团购中</a></li><li>3 <a href="http://www.moretickets.com"  title="摩天轮上海站 团购中" target="_blank">摩天轮上海站 团购中</a></li><li>4 <a href="http://www.jaycn.com"  title="YY2716 招杰迷 招管理 " target="_blank">YY2716 招杰迷 招管理</a></li><li>5 <a href="http://www.jaycn.com"  title="Jay世界巡迴演唱會場次" target="_blank">Jay世界巡迴演唱會場次</a></li><li>6 <a href="http://www.jaycn.com"  title="周杰伦给JayCn题词。" target="_blank">周杰伦给JayCn题词。</a></li><li>7 <a href="http://www.jaycn.com"  title="JayCn 开通"j="J""认证功能" target="_blank">JayCn 开通"J"认证功能</a></li><li>8 <a href="http://www.jaycn.com"  title="JayCn 全国歌迷会 官方群号" target="_blank">JayCn 全国歌迷会 官方群号</a></li></ul></li><li><!-- end sidebar --><!-- start content --><img src="images/zuo.jpg"  alt="" width="152" height="188"></li></ul></div><div id="content">
<div class="post"><h1 class="title" style="font-size:22px; font-weight:normal; color:red;">杰伦资料 </h1><div class="entry"><div id="framey7R8pL_left"><div id="portal_block_89"><div id="portal_block_89_content"><div><img src="images/tt.jpg"></div></div></div></div><div id="framey7R8pL_center"><div id="framey7R8pL_center_temp"></div><div id="portal_block_90"><div id="portal_block_90_content"><div><table cellspacing="0" cellpadding="0"><tbody><tr><td id="postmessage_21064551"><br><table cellspacing="0"><tbody><tr><td>姓名：</td><td>周杰伦</td></tr><tr><td>绰号：</td><td>周董、周大侠、周导、周小伦、卤蛋.伦宝、杰王子、小呆周、小周</td></tr><tr><td>英文名：</td><td>Jay Chou</td></tr><tr><td>性别：</td><td>男</td></tr><tr><td>职业：</td><td>演员 歌手 主持人 导演 编剧 制片人</td></tr><tr><td>国家/地区：</td><td>中国</td></tr><tr><td>地域：</td><td>港台</td></tr><tr><td>出生日期：</td><td>1979-01-18</td></tr><tr><td>宗教信仰：</td><td>无</td></tr><tr><td>星座：</td><td>摩羯座</td></tr><tr><td>家乡：</td><td>台湾省桃园县</td></tr><tr><td>身高：</td><td>175</td></tr><tr><td>体重：</td><td>62</td></tr><tr><td>血型：</td><td>O</td></tr><tr><td>三围：</td><td></td></tr><tr><td>毕业院校：</td><td>淡江高级中学</td></tr><tr><td>兴趣爱好：</td><td>音乐创作、打篮球、弹钢琴、大提琴。变魔术</td></tr><tr><td>家庭成员：</td><td>父亲周耀中、母亲叶惠美（已离异）</td></tr></tbody></table></td></tr></tbody></table></div></div></div></div><p>&nbsp;</p></div></div></div><!-- end content --><div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
</div>
</div>
<!-- start footer -->
<div id="footer"><div id="footer-wrap"><p id="legal">周杰伦明星网站</p></div>
</div>
<!-- end footer --></body>
</html>

7.ziyuan.html

<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Keywords" content="tzyh">
<title>欢迎来到周杰伦中文网！</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="default.css"  rel="stylesheet" type="text/css"><style type="text/css">
body,td,th {font-family: Arial, "微软雅黑", sans-serif;
}
</style>
</head>
<body><!-- Copyright � 2005. Spidersoft Ltd -->
<style>
A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink       {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info          {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover    {color:green;background:transparent;text-decoration:underline}
</style>
<div id="aa" style="width:860px; margin:0 auto; height:305px;" ><img src="images/logo.jpg"  alt="" width="860" height="305"></div><div id="nav"><ul><li><a href="index.html" >首页</a></li><li><a href="xinwen.html" >新闻</a></li><li><a href="ziliao.html" >资料</a></li><li><a href="tupian.html" >图片</a></li><li><a href="ziyuan.html" >资源</a></li><li class="current_page_item"><a href="gemi.html" >歌迷会</a></li><li class="last"><a href="gudong.html" >在线留言</a></li></ul></div><!-- end header -->
<!-- start page -->
<div id="wrapper">
<div id="wrapper-btm">
<div id="page">
<!-- start sidebar --><div id="sidebar"><ul><li id="search"><h2>搜索</h2><form method="get" action=""><fieldset><input type="text" id="s" name="s" value=""><input type="submit" id="x" value="搜索"></fieldset></form></li><li><h2>公告</h2><ul class="vv"><li>1 <a href="http://www.moretickets.com"  title="魔天伦常州站 团购中" target="_blank">魔天伦常州站 团购中</a></li><li>2 <a href="http://www.moretickets.com"  title="摩天轮天津站 团购中" target="_blank">摩天轮天津站 团购中</a></li><li>3 <a href="http://www.moretickets.com"  title="摩天轮上海站 团购中" target="_blank">摩天轮上海站 团购中</a></li><li>4 <a href="http://www.jaycn.com"  title="YY2716 招杰迷 招管理 " target="_blank">YY2716 招杰迷 招管理</a></li><li>5 <a href="http://www.jaycn.com"  title="Jay世界巡迴演唱會場次" target="_blank">Jay世界巡迴演唱會場次</a></li><li>6 <a href="http://www.jaycn.com"  title="周杰伦给JayCn题词。" target="_blank">周杰伦给JayCn题词。</a></li><li>7 <a href="http://www.jaycn.com"  title="JayCn 开通"j="J""认证功能" target="_blank">JayCn 开通"J"认证功能</a></li><li>8 <a href="http://www.jaycn.com"  title="JayCn 全国歌迷会 官方群号" target="_blank">JayCn 全国歌迷会 官方群号</a></li></ul></li><li><!-- end sidebar --><!-- start content --><img src="images/zuo.jpg"  alt="" width="152" height="188"></li></ul></div><div id="content">
<div class="post"><h1 class="title" style="font-size:22px; font-weight:normal; color:red;">资源 </h1><div class="entry"><h3 log-set-param="mod-music-albums">专辑</h3><div data-nslog-type="580"><table log-set-param="table_view" width="100%"><thead><tr><th>专辑名称</th><th>发行时间</th><th>语言</th></tr></thead><tbody><tr id="title_0"><td>十二新作</td><td>2012-12-28</td><td>国语</td></tr><tr id="title_1"><td>惊叹号!</td><td>2011-11-11</td><td>国语</td></tr><tr id="title_2"><td>跨时代</td><td>2010-05-18</td><td>国语</td></tr><tr id="title_3"><td>魔杰座</td><td>2008-10-14</td><td>国语</td></tr><tr id="title_4"><td>我很忙</td><td>2007-11-02</td><td>国语</td></tr><tr id="title_5"><td>依然范特西</td><td>2006-09-05</td><td>国语</td></tr><tr id="title_6"><td>十一月的萧邦</td><td>2005-11-01</td><td>国语</td></tr><tr id="title_7"><td>七里香</td><td>2004-08-03</td><td>国语</td></tr><tr id="title_8"><td>叶惠美</td><td>2003-07-31</td><td>国语</td></tr><tr id="title_9"><td>八度空间</td><td>2002-07-19</td><td>国语</td></tr><tr id="title_10"><td>范特西</td><td>2001-09</td><td>国语</td></tr><tr id="title_11"><td>Jay</td><td>2000-12</td><td>国语</td></tr></tbody></table></div><br><p>&nbsp;</p></div></div></div><!-- end content --><div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
</div>
</div>
<!-- start footer -->
<div id="footer"><div id="footer-wrap"><p id="legal">周杰伦明星网站</p></div>
</div>
<!-- end footer --></body>
</html>

五、图片展示

在这里插入图片描述

六、心得体会

我在这次设计网页的过程中，终于体会到做一个网页的主页不是一件容易的事情，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。制作主页要注意：要想一个好的标题。标题在个人主页中起着很重要的作用，它在很大程度上决定了你整套个人主页的定位。一个好的标题必须有概括性、有特色、简短易记，不要符合自己主页的主题和风格。
　　主页中不光要有文字，还要适当地加一些图片。一张好的图片可以胜过你的千言万语。也能让进入你网页的人一目了然，产生兴趣。
　　网页页面整体的排版设计也是不可忽略了，很重要的一个原则是合理也运用空间，让自己的网页井然有序，留下合适空间，会给人轻松的感觉。
　　当然在做这些内容之前，是要找好资料的，我们可以从报纸，杂志，光盘等媒体中把相关的资料收集，再加上一定的编辑后就可以了。另外一个好的方法是从网络上收集，您只要到搜索引擎上查找相应的关键字，就可以找到一大堆的资料。设计制作网页我可以推荐一个不错的软件，那就是sumblime text 3。只需要用到此款软件中的一些基本的功能：图片插入和对齐设置；文字的格式、颜色、背景颜色的设置等就可以制作出一个简单的网页。好了，网页设计制作完毕后，最后一步就是要优化网站了。
就我的观点，我觉得个人认为网页设计应该注重实用性，因为我们用它就是来互动的，所以我建议以简单美为好，太多复制的图片文字和页面排版只会让看的人感觉更不舒服，我会更加深入的学习网页，丰富我的知识。