HTML学生个人网站作业设计：旅游景点网站设计——北京故宫(9页) HTML+CSS+JavaScript 简单DIV布局个人介
👨🎓学生HTML静态网页基础水平制作👩🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
🏀 精彩专栏推荐👇🏻👇🏻👇🏻
💝 【作者主页——🔥获取更多优质源码】
💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
@TOC
一、网站题目👨🎓
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。
二、网站描述✍️
旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。
三、网站介绍📖
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言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实现动态轮播特效, 点击事件等等（个别网页中运用到js代码）。
四、网站效果🌐
网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面：计划实现简洁大气的网页设计效果。
网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。
五、网站代码制作部分 📕
（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。
HTML结构代码🧱
<html>
<head>
<title>中国梦</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style=" text-align:center; cursor:sw-resize">
<!-- Save for Web Slices (未标题-1) -->
<table id="__01" width="980" height="808" border="0" cellpadding="0" cellspacing="0" style="text-align:left; margin:0px auto;">
<tr>
<td colspan="5">
<img src="images/index_01.jpg" width="980" height="205" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/index_02.jpg" width="980" height="38" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/index_03.jpg" width="37" height="562" alt=""></td>
<td width="216" height="463" rowspan="3" align="center" valign="top" class="dh">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="dhtable">
<tr>
<td align="center"><a href="index-2.html" class="hover">首页</a></td>
</tr>
<tr>
<td align="center"><a href="Templates/jianzhuziliao.html">建筑资料</a></td>
</tr>
<tr>
<td align="center"><a href="Templates/gugongcangpin.html">故宫藏品</a></td>
</tr>
<tr>
<td align="center"><a href="Templates/gujiziliao.html">古籍资料</a></td>
</tr>
<tr>
<td align="center"><a href="Templates/gugongsan.html">故宫三大殿</a></td>
</tr>
<tr>
<td align="center"><a href="Templates/gugongsi.html">故宫四门</a></td>
</tr>
<tr>
<td align="center"><a href="Templates/mingqinggt.html">明清宫廷</a></td>
</tr>
<tr>
<td align="center"><a href="Templates/wenwu.html">文物保护</a></td>
</tr>
<tr>
<td align="center"><a href="Templates/lianxiwomen.html">联系我们</a></td>
</tr>
<tr>
<td align="center"><a href="#" onClick="alert('感谢您的收藏！')">收藏我们</a></td>
</tr>
</table>
</td>
<td rowspan="4">
<img src="images/index_05.jpg" width="21" height="480" alt=""></td>
<td width="670" height="241" valign="top" class="wh">
<p> 旧称紫禁城。于明代永乐十八年（1420年）建成，建成后3月即失火烧毁，20年后重建。是明、清两代的皇宫，两代24位皇帝在此处理政务和生活起居的地方。它是汉族宫殿建筑之精华，无与伦比的古代建筑杰作，世界现存最大、最完整的木质结构的古建筑群。故宫全部建筑由"前朝"与"内廷"两部分组成，四周有城墙围绕。四面由筒子河环抱。城四角有角楼。四面各有一门，正南是午门，为故宫的正门。故宫被誉为世界五大宫之首（北京故宫、法国凡尔赛宫、英国白金汉宫、美国白宫和俄罗斯克里姆林宫）。</p>
</td>
<td rowspan="5">
<img src="images/index_07.jpg" width="36" height="562" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_08.jpg" width="670" height="24" alt=""></td>
</tr>
<tr>
<td width="670" height="198" valign="top">
<table width="100%" border="0" cellspacing="5" cellpadding="0" class="tp">
<tr>
<td><img src="images/in01.jpg" width="209" height="157">故宫内殿</td>
<td><img src="images/in02.jpg" width="209" height="157">晴天景色</td>
<td><img src="images/in03.jpg" width="209" height="157">雪天景色</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="images/index_10.jpg" width="216" height="17" alt=""></td>
<td>
<img src="images/index_11.jpg" width="670" height="17" alt=""></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
CSS样式代码🏡
/* CSS Document */
*{ padding:0px; margin:0px;}
img{ border:none;}
body{ font-size:12px; line-height:24px; background:url(../images/bg.jpg) repeat-x #ae0000;}
.dh{ background:url(../images/index_04.jpg) no-repeat; padding:20px 30px;}
.dh a{ color:#480201; text-decoration:none; font-size:14px; font-weight:bold; display:block; width:157px; height:33px; background:#f6b213; line-height:33px; margin:5px 0px;}
.dh a:hover{ background:#e9c9c8;}
.dh a.hover{ background:#e9c9c8;}
.wh{ padding:70px 40px 0px; background:url(../images/index_06.jpg) no-repeat;}
p{ font-size:18px; line-height:24px; padding:0px; margin:0px;}
.tp tr td{ background:#480201; padding:5px; text-align:center; color:#fff; font-size:12px; line-height:25px;}
.tp tr td img{ display:block;}
.tp tr td a{ color:#fff; text-decoration:none;}
.wh2{ background:#e9c9c8; border:1px solid #610000; padding:20px;}
.wh2 div{ margin:20px 0px;}
.tit{ background:url(../images/tit.jpg) no-repeat; height:35px; color:#fff; padding-left:50px; font-size:13px;}
.tit a{ color:#fff; text-decoration:none;}
.tit a.tit_bg{ color:#f6b213; font-weight:bold;}
.jp{ border-bottom:1px solid #8f5654; border-right:1px solid #8f5654; margin-top:20px;}
.jp tr td{ border-left:1px solid #8f5654; border-top:1px solid #8f5654; line-height:30px; font-size:12px; padding-left:10px;}
.fh{ float:right; margin:20px 0px; width:100px; height:30px; display:block; text-align:center; line-height:30px; background:#000; color:#fff;}
h4{ padding:0px; margin:0px;}
.sj{ margin:20px 0px; font-size:12px; text-align:center; line-height:25px;}
.sj img{ display:block;}
六、遇到问题及如何解决🔍
实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。
七、实训总结😊
通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。
八、更多干货🎁
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥!
💂【获取方式】
- 点赞
- 收藏
- 关注作者
评论（0）