网硕互联帮助中心HTML+CSS+JS【旅游网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
- 💥 文章目录
- 一、🏁 网站题目
- 二、🚩 网站描述
- 三、🎌 网站介绍
- 四、🏴 网站效果
- 五、🏳️ 网站代码
- 六、🏳️🌈 如何学习进步
- 七、🏴☠️ 更多干货
💥 文章目录
一、🏁 网站题目
💪💪💪 旅游网站 （河南平顶山） 12页
二、🚩 网站描述
🏅 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞(๑•̀ㅂ•́)و✧）
🥇 一套A+的网页应该包含 (具体可根据个人要求而定)
页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。 所有页面相互超链接，可到三级页面，有5-10个页面组成。 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。 菜单美观、醒目，二级菜单可正常弹出与跳转。 要有JS特效，如定时切换和手动切换图片轮播。 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。 页面清爽、美观、大方，不雷同。 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
三、🎌 网站介绍
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📃网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📜网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📄网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📰网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1）🎥 html文件包含：其中index.html是首页、其他html为二级页面； （2）📺 css文件包含：css全部页面样式,文字滚动, 图片放大等； （3）📷 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等。
四、🏴 网站效果
五、🏳️ 网站代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http–equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[饸饹面]–平顶山地情资讯网</title>
<style type="text/css">
<!—
.STYLE11 {font–size: 12px;
font–family: Verdana, Arial, Helvetica, sans–serif;
color: #000000;
}
.STYLE15 {color: #FFFFFF; font–size: 16px; font–family: Verdana, Arial, Helvetica, sans–serif; }
.STYLE24 {font–size: 14px}
.STYLE27 {font–family: "仿宋"; font–size: 24px; }
a:link {
color: #000000;
text–decoration: none;
}
a:visited {
text–decoration: none;
color: #000000;
}
a:hover {
text–decoration: underline;
color: #0000FF;
}
a:active {
text–decoration: none;
color: #000000;
}
body {
background–image: url(../images/background4.jpg);
}
.STYLE29 {font–family: "华文行楷"; font–size: 50px;}
.STYLE30 {
font–family: "华文楷体";
font–size: 22px;
}
.STYLE31 {color: #FFFFFF}
.STYLE32 {color: #000000}
—>
</style>
<script language="JavaScript">
<!—
function mmLoadMenus() {
if (window.mm_menu_0102004338_0) return;
window.mm_menu_0102004338_0 = new Menu("root",120,26,"华文楷体",20,"#000000","#FFFFFF","#CCCCCC","#000084","center","middle",3,0,1000,–5,7,true,false,true,0,true,true);
mm_menu_0102004338_0.addMenuItem("尧山风景区","location='../spots/spots1.html'");
mm_menu_0102004338_0.addMenuItem("中原大佛","location='../spots/spots2.html'");
mm_menu_0102004338_0.addMenuItem("香山寺","location='../spots/spots3.html'");
mm_menu_0102004338_0.addMenuItem("三苏园","location='../spots/spots4.html'");
mm_menu_0102004338_0.hideOnMouseOut=true;
mm_menu_0102004338_0.bgColor='#555555';
mm_menu_0102004338_0.menuBorder=1;
mm_menu_0102004338_0.menuLiteBgColor='#FFFFFF';
mm_menu_0102004338_0.menuBorderBgColor='#777777';
window.mm_menu_0102004935_0 = new Menu("root",104,26,"华文楷体",20,"#000000","#FFFFFF","#CCCCCC","#000084","center","middle",3,0,1000,–5,7,true,false,true,0,true,true);
mm_menu_0102004935_0.addMenuItem("羊肉冲汤","location='food1.html'");
mm_menu_0102004935_0.addMenuItem("买根烧鸡","location='food2.html'");
mm_menu_0102004935_0.addMenuItem("饸饹面","location='food3.html'");
mm_menu_0102004935_0.hideOnMouseOut=true;
mm_menu_0102004935_0.bgColor='#555555';
mm_menu_0102004935_0.menuBorder=1;
mm_menu_0102004935_0.menuLiteBgColor='#FFFFFF';
mm_menu_0102004935_0.menuBorderBgColor='#777777';
mm_menu_0102004935_0.writeMenus();
} // mmLoadMenus()
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
//–>
</script>
<script language="JavaScript" src="mm_menu.js"></script>
</head>
<body onload="MM_openBrWindow('../images/广告.jpg','饸饹面广告','width=1000,height=750')" onblur="MM_popupMsg('筋面郎饸饹面欢迎您！')">
<script language="JavaScript1.2">mmLoadMenus();</script>
<table width="1004" border="0" align="center">
<tr>
<td height="164" colspan="2"><div align="center" class="STYLE29">舌 尖 上 的 平 顶 山</div></td>
</tr>
<tr>
<td height="44" colspan="2"><table width="1004" height="48" border="0" align="center" cellspacing="2">
<tr>
<td align="center" valign="middle" background="../images/navbj.png"><span class="STYLE15"><a href="../index.html">网站首页</a></span></td>
<td align="center" valign="middle" background="../images/navbj.png"><span class="STYLE15"><a href="../introduction/introduction.html">走进鹰城</a></span></td>
<td align="center" valign="middle" background="../images/navbj.png"><span class="STYLE15"><a href="../spots/spots.html" name="link3" id="link1" onmouseover="MM_showMenu(window.mm_menu_0102004338_0,-20,30,null,'link3')" onmouseout="MM_startTimeout();">特色景点</a></span></td>
<td align="center" valign="middle" background="../images/navbj.png"><span class="STYLE15"><a href="food.html" name="link4" id="link2" onmouseover="MM_showMenu(window.mm_menu_0102004935_0,-20,30,null,'link4')" onmouseout="MM_startTimeout();">特色美食</a></span></td>
<td align="center" valign="middle" background="../images/navbj.png"><span class="STYLE15"><a href="../people/people.html">重要人物</a></span></td>
</tr>
</table></td>
</tr>
<tr>
<td width="200" height="650"><table width="196" height="650" border="1" cellspacing="2">
<tr>
<td width="186" align="center" valign="middle"><div align="center">
<ul>
<li><span class="STYLE27"><a href="food1.html">羊肉冲汤</a></span></li>
</ul>
</div></td>
</tr>
<tr>
<td align="center" valign="middle"><div align="center">
<ul>
<li><span class="STYLE27"><a href="food2.html">买根烧鸡</a></span></li>
</ul>
</div></td>
</tr>
<tr>
<td align="center" valign="middle"><div align="center">
<ul>
<li><span class="STYLE27"><a href="food3.html">饸饹面</a></span></li>
</ul>
</div></td>
</tr>
</table></td>
<td width="800" height="650" align="center" valign="top"><p><img name="" src="../images/noodles2.jpg" width="750" height="450" alt="" /></p>
<p align="justify"><span class="STYLE30"> <span class="STYLE32">郏县饸饹面是河南郏县地区一道用料考究、独具特色，已有千年历史的传统特色名小吃，简称郏县饸饹。郏县饸饹是一种圆形条状面制食品，初以<a target="_blank" href="https://baike.baidu.com/item/%E8%8D%9E%E9%BA%A6%E9%9D%A2/1855875" data–lemmaid="1855875">荞麦面</a>为面料，其加入用纯<a target="_blank" href="https://baike.baidu.com/item/%E7%BE%8A%E6%B2%B9/8679124" data–lemmaid="8679124">羊油</a>熬制的辣椒和百年老锅汤及新鲜味美的<a target="_blank" href="https://baike.baidu.com/item/%E7%BE%8A%E8%82%89/809492" data–lemmaid="809492">羊肉</a>，辅以八角、茴香、辣椒、胡椒、肉桂、葱花、枸杞等十余种佐料，吃起来不仅味道鲜美，香而不腻，而且有暖胃去寒，<a target="_blank" href="https://baike.baidu.com/item/%E6%BB%8B%E9%98%B4%E5%A3%AE%E9%98%B3/6838036" data–lemmaid="6838036">滋阴壮阳，保健防病的功能。清末，始以小麦面替代荞麦面，口感营养更胜一筹。《中华风味饮食总》一书称郏县饸饹“舒脾健胃，养生至宝</span><span class="STYLE31">”。</span></span></p></td>
</tr>
<tr>
<td height="122" colspan="2"><table width="1001" height="102" border="0" align="center">
<tr>
<td width="995" background="../images/hx_bottom.jpg"><div align="center" class="STYLE11">
<div align="center">
<blockquote> <span class="STYLE24">友情链接：<a href="http://www.pds.gov.cn/">平顶山市人民政府</a> <a href="http://www.pdsta.gov.cn/indexzw.html">平顶山旅游政务网</a> <a href="http://www.pdsdqw.com/">平顶山地情网</a> <a href="http://www.tianqi.com/pingdingshan/">平顶山天气预报</a> <a href="http://pingdingshan.city8.com/">平顶山地图</a></span></blockquote>
</div>
</div></td>
</tr>
<tr>
<td background="../images/hx_bottom.jpg"><p align="center" class="STYLE11">版权所有 © 2018 XXXXX学院 XXXXX校区</p>
<p align="center" class="STYLE11">电话：123456789 电子邮件：XXXXX@163.com 邮编：XXXXX</p></td>
</tr>
<tr>
<td height="25" background="../images/hx_bottom.jpg"><div align="center"> <span class="STYLE11">设计制作：</span><span class="STYLE11">XXXXX</span></div></td>
</tr>
</table></td>
</tr>
</table>
<div align="center"></div>
</body>
</html>
六、🏳️🌈 如何学习进步
七、🏴☠️ 更多干货
🌝 关注我 学习更多知识~
🌝 支持我，请 点赞 + 好评 + 收藏 三连，带来更多文章~
🌝 有需要完整源码的同学可以留言、后台私信我（说明要什么主题模板）~
🌝 更多主题网页设计模板
评论前必须登录！
注册