基于HTML旅游酒店主题网页项目的设计与实现——度假酒店预订网站(5页面)HTML+CSS+JavaScript...

原创

@码出未来④-web网页设计 2022-10-30 10:25:28 ©著作权

文章标签 html css javascript 旅游 dreamweaver 文章分类 运维

©著作权归作者所有：来自51CTO博客作者@码出未来④-web网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录🌰

一、网站题目👨‍🎓
二、网站描述✍️
三、网站介绍📖
四、网站效果🌐
五、网站代码制作部分 📕
HTML结构代码🧱
CSS样式代码🏡
六、遇到问题及如何解决🔍
七、实训总结😊
八、更多干货🎁

一、网站题目👨‍🎓

🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。

二、网站描述✍️

旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。

三、网站介绍📖

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言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代码)。

四、网站效果🌐

网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。网站设计方面：计划实现简洁大气的网页设计效果。网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。

基于HTML旅游酒店主题网页项目的设计与实现——度假酒店预订网站(5页面)HTML+CSS+JavaScript..._dreamweaver

五、网站代码制作部分 📕

(1)网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

(2)页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

(3)表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。

HTML结构代码🧱

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>国际酒店</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Stylesheets -->
  <!-- Dropdown Menu -->
  <link rel="stylesheet" href="css/superfish.css">
  <!-- Owl Slider -->
  <!-- <link rel="stylesheet" href="css/owl.carousel.css"> -->
  <!-- <link rel="stylesheet" href="css/owl.theme.default.min.css"> -->
  <!-- Date Picker -->
  <link rel="stylesheet" href="css/bootstrap-datepicker.min.css">
  <!-- CS Select -->
  <link rel="stylesheet" href="css/cs-select.css">
  <link rel="stylesheet" href="css/cs-skin-border.css">

  <!-- Themify Icons -->
  <link rel="stylesheet" href="css/themify-icons.css">
  <!-- Flat Icon -->
  <link rel="stylesheet" href="css/flaticon.css">
  <!-- Icomoon -->
  <link rel="stylesheet" href="css/icomoon.css">
  <!-- Flexslider  -->
  <link rel="stylesheet" href="css/flexslider.css">

  <!-- Style -->
  <link rel="stylesheet" href="css/style.css">

  <!-- Modernizr JS -->
  <script src="js/modernizr-2.6.2.min.js"></script>
  <!-- FOR IE9 below -->
  <!--[if lt IE 9]>
  <script src="js/respond.min.js"></script>
  <![endif]-->

</head>
<body>
  <div id="fh5co-wrapper">
  <div id="fh5co-page">
  <div id="fh5co-header">
    <header id="fh5co-header-section">
      <div class="container">
        <div class="nav-header">
          <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
          <h1 id="fh5co-logo"><a href="index.html">hotel</a></h1>
          <nav id="fh5co-menu-wrap" role="navigation">
            <ul class="sf-menu" id="fh5co-primary-menu">
              <li><a  href="index.html">网站首页</a></li>
              <li><a href="hotel.html">房间介绍</a></li>
              <li><a href="services.html">服务介绍</a></li>
              <li><a class="active" href="blog.html">新闻中心</a></li>
              <li><a href="contact.html">联系我们</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>

  </div>
  <!-- end:fh5co-header -->
  <div class="fh5co-parallax" style="background-image: url(images/slider1.jpg);" data-stellar-background-ratio="0.5">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-md-offset-0 col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0 text-center fh5co-table">
          <div class="fh5co-intro fh5co-table-cell">
            <h1 class="text-center">新闻中心</h1>
            <p>关注我们的新闻，了解最新活动和优惠</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="news-content container">
    <h2>听说一种深海珍宝游到了彩蝶谷</h2>
    <p class="news-time"><i class="icon icon-calendar"></i>2017/6/1</p>
    <img src="images/image-1.jpg"/>
    <p>
      都说龙趸全身是宝，不同部位适合烹制不同菜式，彩蝶谷美食廊素来以出品风味混搭、菜式做法多样而闻名，这次的龙趸系列当然也不会让老饕们失望，大厨以“焖炖焗蒸”等多种烹饪方式，为您带来十多款龙趸菜式，深海珍宝好多美味？小编近水楼台先尝味，您就暂时要“望梅止渴”，看着小编上图啦！
    </p>
    <p>
      粤语常说“饮头啖汤”，注重食补健康的岭南人，尤其重视正式上菜前的暖场汤水，这道“天麻炖龙趸头”，用的是最为营养滋补的龙趸头，斩件加上天麻和其它配料入瓮慢火炖煮，将鱼头丰富的胶原和鲜味释放，加上淡淡的药材汤料的清香，味道清甜不油腻，最适合这种炎热的天气。
    </p>
    <p>
      对美味的追求不只是大人的权利，这道“芙蓉蛋白蒸龙趸肉”特别适合小孩子，师傅以精湛刀法加工龙趸鱼，片片均匀，没有一丝骨头；蛋白加入龙趸骨熬制的鱼汤打匀，放入鱼片同蒸。火候控制要恰到好处，鱼片刚熟，芙蓉蛋白嫩滑，每一口都是鲜美鱼肉和蛋白，绝对是小孩子下饭的好选择。
    </p>
  </div>
  <footer id="footer" class="fh5co-bg-color">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="copyright">
            <p>© 2016  All Rights Reserved. 
            </p>
            <img src="images/gw.jpg" />
          </div>
        </div>
        <div class="col-md-8">
          <div class="row">
            <div class="col-md-3">
              <h3>快速链接</h3>
              <ul class="link">
                <li><a href="index.html">网站首页</a></li>
                <li><a href="#">房间介绍</a></li>
                <li><a href="#">服务介绍</a></li>
                <li><a href="#">新闻中心</a></li>
                <li><a href="#">联系我们</a></li>
              </ul>
            </div>
            <div class="col-md-3">
              <h3>特色服务</h3>
              <ul class="link">
                <li><a>餐厅、酒吧</a></li>
                <li><a>接送、泳池</a></li>
                <li><a>Spa、健身</a></li>
              </ul>
            </div>
            <div class="col-md-6">
              <h3>订阅</h3>
              <p>
                特色服务和齐全的设施等着你的到来
              </p>
              <form action="#" id="form-subscribe">
                <div class="form-field">
                  <input type="email" placeholder="邮箱" id="email">
                  <input type="submit" id="submit" value="发送">
                </div>
              </form>
            </div>
          </div>
        </div>

      </div>
    </div>
  </footer>

  </div>
  <!-- END fh5co-page -->

  </div>
  <!-- END fh5co-wrapper -->

  <!-- Javascripts -->
  <script src="js/jquery-2.1.4.min.js"></script>
  <!-- Dropdown Menu -->
  <script src="js/hoverIntent.js"></script>
  <script src="js/superfish.js"></script>
  <!-- Bootstrap -->
  <script src="js/bootstrap.min.js"></script>
  <!-- Waypoints -->
  <script src="js/jquery.waypoints.min.js"></script>
  <!-- Counters -->
  <script src="js/jquery.countTo.js"></script>
  <!-- Stellar Parallax -->
  <script src="js/jquery.stellar.min.js"></script>
  <!-- Owl Slider -->
  <!-- // <script src="js/owl.carousel.min.js"></script> -->
  <!-- Date Picker -->
  <script src="js/bootstrap-datepicker.min.js"></script>
  <!-- CS Select -->
  <script src="js/classie.js"></script>
  <script src="js/selectFx.js"></script>
  <!-- Flexslider -->
  <script src="js/jquery.flexslider-min.js"></script>

  <script src="js/custom.js"></script>

</body>
</html>

CSS样式代码🏡

/* Default custom select styles */
div.cs-select {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  text-align: left;
  background: #fff;
  z-index: 100;
  width: 100%;
  max-width: 500px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div.cs-select:focus {
  outline: none; /* For better accessibility add a style for this in your skin */
}

.cs-select select {
  display: none;
}

.cs-select span {
  display: block;
  position: relative;
  cursor: pointer;
  padding: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Placeholder and selected option */
.cs-select > span {
  padding-right: 3em;
}

.cs-select > span::after,
.cs-select .cs-selected span::after {
  speak: none;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cs-select > span::after {
  content: '\25BE';
  right: 1em;
}

.cs-select .cs-selected span::after {
  content: '\2713';
  margin-left: 1em;
}

.cs-select.cs-active > span::after {
  -webkit-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}

div.cs-active {
  z-index: 200;
}

/* Options */
.cs-select .cs-options {
  position: absolute;
  overflow: hidden;
  width: 100%;
  background: #fff;
  visibility: hidden;
}

.cs-select.cs-active .cs-options {
  visibility: visible;
}

.cs-select ul {
  list-style: none;
  margin: 0;
  padding: 5px 0;
  width: 100%;
  font-size: 16px;
}

.cs-select ul span {
  padding: 1em;
  color: #777;
}

.cs-select ul li.cs-focus span {
  background-color: #ddd;
}

/* Optgroup and optgroup label */
.cs-select li.cs-optgroup ul {
  padding-left: 1em;
}

.cs-select li.cs-optgroup > span {
  cursor: default;
}

六、遇到问题及如何解决🔍

实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。

七、实训总结😊

通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。