版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
西安欧亚学院《HTML5网页设计》大作业姓名《TravelStore》制作说明1.网站规划1.1确定网站主题（旅游网站)网站功能:了解各地旅游风景区的基本情况网站色调：蓝色网站风格：对景点进行详细的介绍并配上风景图1.2规划网站结构1.3准备素材文本素材、图片素材1.4建立站点1.5页面布局1.5.1一级页面布局1.5.2二级页面布局 1.5.3三级页面布局代码以及效果图2.1首页效果图首页结构代码<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""://./TR/html4/loose.dtd"><html><head><metaname="keywords"content="tzyh"/><title>TravelStore</title><meta-equiv="Content-Type"content="text/html;charset=utf-8"><linkrel="stylesheet"type="text/css"href="style.css"/></head><body> <divid="header"> <divid="meta"> <ahref="#"class="marr">注册</a>|<ahref="#"class="marlmarr">邮件</a>|<ahref="#"class="marl">搜索</a> </div> <ulid="menu"> <li><ahref="index.html">首页</a></li> <li><ahref="index2.html">夏威夷</a></li> <li><ahref="index1.html">韩国</a></li> <li><ahref="index1.html">阿拉斯加</a></li> </ul> <ulid="forum"> <li><ahref="index.html">更多»</a></li> </ul> </div> <divid="wrapper"> <divid="left"> <divid="left_navigation"> <imgsrc="img/gtop.gif"alt=""width="191"height="8"/> <divclass="title1">我们拥有的国家</div> <ulclass="contries"> <li><ahref="#">中国</a></li> <li><ahref="#">美国</a></li> <li><ahref="#">英国</a></li> <li><ahref="#">德国</a></li> <li><ahref="#">法国</a></li> <li><ahref="#">西班牙</a></li> <li><ahref="#">日本</a></li> <li><ahref="#">韩国</a></li> <li><ahref="#">朝鲜</a></li> <li><ahref="#">意大利</a></li> <li><ahref="#">土耳其</a><spanclass="new">-NEW</span></li> <li><ahref="#">沙特阿拉伯</a></li> <li><ahref="#">印度</a><spanclass="new">-NEW</span></li> <li><ahref="#">太过</a></li> </ul> <ahref="#"class="more">更多»</a> <imgsrc="img/gbot.gif"alt=""width="191"height="8"/> </div> <ahref="#"class="banner"><imgsrc="img/banner.jpg"alt=""width="191"height="346"/></a> </div> <divid="central"> <divclass="welcome"> <p>国际旅行社集团有限公司魏公村门市部是首都旅游集团旗下、经国家旅游局批准、工商局注册、从事入境旅游及相关服务、国内旅游及相关服务、特许经营中国公民出境旅游业务的全资质大型旅行社集团公司。</p> </div> <divclass="search"> <formaction="#"> </form> </div> <divclass="block"> <ahref="#"><imgsrc="img/img1.jpg"alt=""width="180"height="126"/></a> <div> <h4><德法瑞意4国12日>温泉美食</h4> <p>☆乘坐德国高速火车ICE，欣赏从法兰克福到斯图加特一路迷人风光。<br>☆漫步因特拉肯，可以欣赏到阿尔卑斯少女峰的美丽身影，碧澄如镜的湖。<br>☆参观著名的花宫娜香水博物馆，探知美妙迷人的香水是如何制造出来的。</p> <spanclass="price">$1500</span> <ahref="#"class="more">查看详情»</a> </div> </div> <divclass="block"> <ahref="#"><imgsrc="img/img2.jpg"alt=""width="180"height="126"/></a> <div> <h4><法瑞意10日>经典永驻</h4> <p>☆乘坐法瑞意高速火车ICE，欣赏从法兰克福到斯图加特一路迷人风光。<br>☆漫步因特拉肯，可以欣赏到阿尔卑斯少女峰的美丽身影，碧澄如镜的湖。<br>☆参观著名的花宫娜香水博物馆，探知美妙迷人的香水是如何制造出来的。</p> <spanclass="price">$2500</span> <ahref="#"class="more">查看详情»</a> </div> </div> <divclass="block"> <ahref="#"><imgsrc="img/img3.jpg"alt=""width="180"height="126"/></a> <div> <h4><奥德法瑞意梵6国12日>水晶世界</h4> <p>☆乘坐奥德法瑞意梵高速火车ICE，欣赏从法兰克福到斯图加特一路迷人风光。<br>☆漫步因特拉肯，可以欣赏到阿尔卑斯少女峰的美丽身影，碧澄如镜的湖。<br>☆参观著名的花宫娜香水博物馆，探知美妙迷人的香水是如何制造出来的。</p> <spanclass="price">$3500</span> <ahref="#"class="more">查看详情»</a> </div> </div> </div> <divid="right"> <divclass="right_block"> <pclass="title2">业内新闻</p> <divclass="item"> <span>26日</span> <marqueedirection="up"scrollamount="1"><p>《卢浮宫（MuséeduLouvre）位于巴黎市中心的赛纳河北岸（右岸），是巴黎的心脏，始建于1204年，历经700多年扩建重修达到今天的规模。占地约198公顷，长680米，分为新老两部分，老的建于路易十四时期，新的建于拿破仑时代。它是世界上最著名、最大的艺术宝库之一，是举世瞩目的万宝之宫。</p></marquee> <ahref="#">更多»</a> </div> <imgsrc="img/right_bot.gif"alt=""width="261"height="21"/><br/> </div> <divclass="right_block"> <pclass="title3">景区照片</p> <divclass="item"> <divclass="photo"><imgsrc="img/photo.jpg"alt=""width="197"height="148"/></div> <pclass="name"><u>个人影集</u>-<strong>武藤兰的相册</strong></p> <ahref="#"class="details">更多»</a> </div> <imgsrc="img/right_bot.gif"alt=""width="261"height="21"/><br/> </div> </div> </div> <divid="footer"> <div> <ahref="index.html">首页</a>|<ahref="index2.html">美国</a>|<ahref="index2.html">韩国</a>|<ahref="index2.html">英国</a>|<ahref="index2.html">法国</a>|<ahref="index2.html">Forum</a> </div> </div></body></html>2.2css代码*{ margin:0px; padding:0px;}img{ border:0px}html{ width:100%; height:100%; background-image:url(img/smallbg.gif); background-position:topleft; background-repeat:repeat-x}body{ width:100%; height:100%; margin:auto; background-image:url(img/bg.jpg); background-position:topcenter; background-repeat:no-repeat;}h1,h2,h3,h4,h5,h6{ font-family:"微软雅黑"; font-size:14px;}p{ font-size:12px; line-height:20px;}a{ text-decoration:none;}#header{ width:1000px; height:321px; margin:0auto; background-image:url(img/bg.jpg); background-position:topleft; background-repeat:no-repeat; position:relative;}#meta{ width:170px; border-top:6pxsolid#DDDDDD; padding-top:42px; text-align:center; font-size:11px; color:#5B5B5B; margin:000310px}#metaa{ color:#5B5B5B; text-decoration:underline}#metaa:visited{ text-decoration:underline}#metaa:hover{ text-decoration:none}.marl{ margin-left:8px;}.marr{ margin-right:8px;}#menu{ position:absolute; top:275px; left:23px;}#menuli,#forumli{ list-style-type:none; float:left; margin:020px00}#menua,#foruma{ background-image:url(img/circle.gif); background-position:0px4px; background-repeat:no-repeat; font-family:Arial; font-size:14px; color:#323232; text-decoration:none; padding:00014px}#forum{ position:absolute; top:275px; left:755px;}#menua:hover{ color:#F90}#wrapper{ width:1000px; margin:0auto;}#left{ width:191px; float:left;}#left_navigation{ background-image:url(img/gbg.gif); background-position:topleft; background-repeat:repeat-y; width:191px; float:left;}#left_navigationimg{ float:left}.title1{ background-image:url(img/title1.jpg); background-position:topleft; background-repeat:no-repeat; height:24px; width:114px; padding:12px0053px; margin:0009px; display:inline; font-family:Arial; font-size:12px; color:#FFFFFF; font-weight:bold; float:left}.contries{ width:170px; display:block; float:left; padding:13px015px19px; font-family:Arial; font-size:12px;}.contriesli{ list-style-type:none; line-height:18px}.contrieslia{ background-image:url(img/arrow.gif); background-position:0px3px; background-repeat:no-repeat; padding:00011px; color:#323232; text-decoration:none}.contrieslia:visited{ text-decoration:underline}.contrieslia:hover{ text-decoration:underline}.new{ color:#E60404; font-weight:bold}.more{ font-family:Arial; font-size:12px; color:#009EDC; margin:005px30px; float:left}.banner{ margin:5px0; float:left}#central{ width:507px; float:left; margin:0px12px020px; display:inline;}.welcome{ background-image:url(img/welcome_bg.jpg); background-position:topleft; background-repeat:no-repeat; width:374px; font-family:Tahoma; font-size:11px; color:#565656; padding:93px025px133px;}.welcomep{ display:block; width:360px; font-size:12px; line-height:22px;}.search{ background-color:#448AAE; text-align:center; font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#FFFFFF; font-weight:bold; padding:11px09px0; margin:0030px0}.searchinput{ width:165px; height:17px; border-style:inset; border-color:#CECECE; margin:09px}#ok{ position:absolute}#okimg{ position:relative; top:0px; left:0px;}.block{ width:470px; margin:0020px13px; display:inline; float:left}.blockimg{ float:left}.blockdiv{ float:left; margin:00025px;}.blockdivh4{ color:#565656; font-weight:bold}.blockdivp{ color:#565656; display:block; width:259px; border-bottom:1pxsolid#D2D2D2; padding:15px010px0; margin:005px0; font-size:12px; line-height:20px;}.price{ font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#E63309; font-weight:bold; display:block; float:left; width:160px;}.more{ font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#009EDC; text-decoration:underline; float:left}.more:visited{ text-decoration:underline}.more:hover{ text-decoration:none}#right{ width:261px; float:left;}.right_block{ background-image:url(images/block_bg.gif); background-position:topleft; background-repeat:repeat-y; width:261px; margin:005px0}.title2{ font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#FFFFFF; font-weight:bold; background-image:url(images/title_bg.jpg); background-position:topleft; background-repeat:no-repeat; width:261px; padding:20px035px0; text-align:center}.title3{ font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#FFFFFF; font-weight:bold; background-image:url(img/title3_bg.jpg); background-position:topleft; background-repeat:no-repeat; width:261px; padding:20px035px0; text-align:center}.item{ width:220px; padding:00025px; font-family:Tahoma; font-size:11px;}.itemspan{ display:block; font-weight:bold; color:#448AAE; font-family:Arial,Helvetica,sans-serif; font-size:12px;}.itemp{ padding:5px0;}.itema{ font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#009EDC; text-decoration:underline}.itema:visited{ text-decoration:underline}.itema:hover{ text-decoration:none}.photo{ background-image:url(img/photo_bg.gif); background-position:topleft; background-repeat:no-repeat; padding:13px;}.name{ margin:005px9px; color:#565656}.details{ margin:5px009px;}#footer{ width:100%; float:left; padding:50px000}#footerdiv{ background-color:#448AAE; text-align:center; padding:10px0; font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#F3FBFF;}#footerdiva{ color:#F3FBFF; margin:05px;}#footerdiva:visited{ text-decoration:underline}#footerdiva:hover{ text-decoration:none}#copy{ font-family:Arial,Helvetica,sans-serif; font-size:11px; color:#323232; text-align:center; line-height:40px;}#copya{ color:#B94304; text-decoration:underline}#copya:visited{ text-decoration:underline}#copya:hover{ text-decoration:none}#big{ padding:62px0020px; float:left; background-image:url(img/big_bg.jpg); background-position:22px-1px; background-repeat:no-repeat;}#bigh2{ font-family:"微软雅黑"; font-size:18px; color:#F90; width:765px; padding:005px0; border-bottom:1pxsolid#DBDBDB; margin:0010px0}.other{ font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#009EDC; text-decoration:underline}.other:visited{ text-decoration:underline}.other:hover{ text-decoration:none}.big_photo{ width:260px; text-align:center; float:left; margin:018px00}.big_photoimg{ margin:0010px0}.text{ float:left; width:485px; font-family:Tahoma; font-size:11px; color:#565656}.textp{ padding:005px0}.login_bd{ margin:50pxauto; width:400px;}.login_bddt{ width:70px; float:left; font-size:12px; font-weight:bold; height:22px; line-height:22px; margin-bottom:10px;}.login_bddd{ width:300px; float:left; height:22px; line-height:22px; margin-bottom:10px;}.login_bdddinput{ height:20pxline-height:20px; padding:02px; border:1pxsolid#ccc; height:20px; width:200px;}.login_btnarea{ clear:both; display:block; width:120px; height:30px; font-family:"微软雅黑"; background-color:#09F; border:1pxsolid#00F; color:#fff; line-height:30px; text-align:center; margin:50px00300px;}.hgpicbpx{ width:660px; margin:30pxauto; overflow:hidden;}.hgpicbpxul{ width:800px;}.hgpicbpxli{ width:150px; height:125px; padding:2px; border:1pxsolid#eee; float:left; margin:010px10px0; _display:inline; list-style:none;}2.3二级页面效果图二级页面代码<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""://./TR/html4/loose.dtd"><html><head><metaname="keywords"content="tzyh"/><title>TravelStore</title><meta-equiv="Content-Type"content="text/html;charset=utf-8"><linkrel="stylesheet"type="text/css"href="style.css"/></head><body> <divid="header"> <divid="meta"> <ahref="#"class="marr">注册</a>|<ahref="#"class="marlmarr">邮件</a>|<ahref="#"class="marl">搜索</a> </div> <ulid="menu"> <li><ahref="index.html">首页</a></li> <li><ahref="index2.html">夏威夷</a></li> <li><ahref="index1.html">韩国</a></li> <li><ahref="index1.html">阿拉斯加</a></li> </ul> <ulid="forum"> <li><ahref="index.html">更多»</a></li> </ul> </div> <divid="wrapper"> <divid="left"> <divid="left_navigation"> <imgsrc="img/gtop.gif"alt=""width="191"height="8"/> <divclass="title1">我们拥有的国家</div> <ulclass="contries"> <li><ahref="#">中国</a></li> <li><ahref="#">美国</a></li> <li><ahref="#">英国</a></li> <li><ahref="#">德国</a></li> <li><ahref="#">法国</a></li> <li><ahref="#">西班牙</a></li> <li><ahref="#">日本</a></li> <li><ahref="#">韩国</a></li> <li><ahref="#">朝鲜</a></li> <li><ahref="#">意大利</a></li> <li><ahref="#">土耳其</a><spanclass="new">-NEW</span></li> <li><ahref="#">沙特阿拉伯</a></li> <li><ahref="#">印度</a><spanclass="new">-NEW</span></li> <li><ahref="#">太过</a></li> </ul> <ahref="#"class="more">更多»</a> <imgsrc="img/gbot.gif"alt=""width="191"height="8"/> </div> <ahref="#"class="banner"><imgsrc="img/banner.jpg"alt=""width="191"height="346"/></a> </div> <divid="big"> <h2>激情夏威夷狂野盛宴</h2> <divclass="big_photo"> <imgsrc="img/big_photo.jpg"alt=""width="260"height="217"/><br/> <ahref="#"class="other">景区图片</a> </div> <divclass="text"> <p>夏威夷（英语：Hawaii，是美国唯一以3个元音结尾的州）在1959年8月21日成为美国的第50个州，由夏威夷群岛所组成，位于北太平洋中，距离美国本土3,700公里，总面积16,633平方公里，属于太平洋沿岸地区。2000年夏威夷州的常住人口为1,211,537人。约五世纪时，夏威夷原住民玻利尼西亚人从南太平洋移居到此。是太平洋上，海空交通要地，战略位置十分重要。夏威夷（Hawaii）是夏威夷群岛中最大的岛屿，又称大岛，位于岛链最南端，有丰富的火山活动，设有火山国家公园，华人又称火山岛。全岛属夏威夷县范围。主要都市有东侧的希洛(Hilo）与西侧的科纳市(Kona）。</p><p>夏威夷州是距今最近加入美国的州份，与美国其他各州有着明显的区别：它除了是美国最南方的州外，也是美国唯一一个全部位于热带的州；它与阿拉斯加州是美国各州中，仅有的两个不与其他各州相连的州份，也是美国唯一一个没有任何土地位在美洲大陆的州。论美国所有领土而言，夏威夷州是除了美国海外属地和群岛以外，最南端的一州，但非最南端的领土（美国最南端的领土落在美属萨摩亚群岛）。在族群分布上，它是两个非白种人居多数州份的其中之一，是美国唯一白种人不过半数的州。白种人约占三分之一，其余为日本人、玻利尼西亚人、菲律宾人、中国人、朝鲜人。比起其他各州，夏威夷州拥有最大的亚裔人口比例。生态及农业方面，它是全世界拥有最多濒临绝种物种的地方，也是美国唯一生产咖啡具有工业规模的州份。</p><p>夏威夷的州府是檀香山Honolulu，为旅游胜地，最引人的地方是威基基海滩WaikikiBeach。全年风和日丽水蓝天青，宜游泳、冲浪、可以荡舟，也可以捕鱼，每年进出檀香山的船舶，约两千艘。每天进出檀香山国际机场的旅客，多至四十万人。市内有夏威夷大学，创于1907年，学生两万多。校内有美国国会的研究机构东西方中心EastWestCenter，甚著名。</p><p>主要有8个大岛和120多个小岛，自东南向西北斜跨北回归线，延伸2400多公里，即从东南端的夏威夷岛到西北端的库雷岛（不包括中途岛）。主要的8个岛屿在北回归线南侧，相当于狭义的夏威夷群岛，即夏威夷岛、毛伊岛、卡胡拉韦岛、拉奈岛、莫洛凯岛、瓦胡岛、考爱岛、尼豪岛。各岛是从洋底巨大裂隙喷发形成的火山岛。夏威夷岛上的冒纳罗亚火山（海拔4170米）、基拉韦厄火山（海拔1247米）都是活火山，常常从山顶火口和山腰裂隙溢出熔岩流。终年盛行东北信风，各岛迎风的东北坡降水丰富，多热带雨林；背风的西南坡干燥少雨，多热带草原，是举世闻名的旅游胜地。</p> </div> </div> </div> <divid="footer"> <div><ahref="index.html">首页</a>|<ahref="index2.html">美国</a>|<ahref="index2.html">韩国</a>|<ahref="index2.html">英国</a>|<ahref="index2.html">法国</a>|<ahref="index2.html">Forum</a> </div> </div></body></html>2.4三级页面效果三级页面代码<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""://./TR/html4/loose.dtd"><html><head><metaname="keywords"content="tzyh"/><title>TravelStore</title><meta-equiv="Content-Type"content="text/html;charset=utf-8"><linkrel="stylesheet"type="text/css"href="style.css"/></head><body> <divid="header"> <divid="meta"> <ahref="#"class="marr">注册</a>|<ahref="#"class="marlmarr">邮件</a>|<ahref="#"class="marl">搜索</a> </div> <ulid="menu"> <li><ahref="index.html">首页</a></li> <li><ahref="index2.html">夏威夷</a></li> <li><ahref="index1.html">韩国</a></li> <li><ahref="index1.html">阿拉斯加</a></li> </ul> <ulid="forum"> <li><ahref="index.html">更多»</a></li> </ul> </div> <divid="wrapper"> <divid="left"> <divid="left_navigation"> <imgsrc="img/gtop.gif"alt=""width="191"height="8"/> <divclass="title1">我们拥有的国家</div> <ulclass="contries"> <li><ahref="#">中国</a></li> <li><ahref="#">美国</a></li> <li><ahref="#">英国</a></li> <li><ahref="#">德国</a></li> <li><ahref="#">法国</a></li> <li><
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论