👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

🏀 精彩专栏推荐👇🏻👇🏻👇🏻

💝 【作者主页——🔥获取更多优质源码】
💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

一、网站题目👨‍🎓
二、网站描述✍️
三、网站介绍📖
四、网站效果🌐
五、网站代码制作部分 📕
- 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代码）。

四、网站效果🌐

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

在这里插入图片描述

五、网站代码制作部分 📕

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

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

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

HTML结构代码🧱



<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lawel - Responsive Blog Template</title>
    <!--fivicon icon-->
    <link rel="icon" href="assets/img/fevicon.png">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/magnific.min.css">
    <link rel="stylesheet" href="assets/css/nice-select.min.css">
    <link rel="stylesheet" href="assets/css/owl.min.css">
    <link rel="stylesheet" href="assets/css/slick-slide.min.css">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">

    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Khula:wght@400;600&family=Lustria&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">


</head>
<body class='sc5'>
    <!-- preloader area start -->
    <div class="preloader" id="preloader">
        <div class="preloader-inner">
            <div id="wave1">
            </div>
            <div class="spinner">
                <div class="dot1"></div>
                <div class="dot2"></div>
            </div>
        </div>
    </div>
    <!-- preloader area end -->
    <div class="body-overlay" id="body-overlay"></div>

    <!-- search popup area start -->
    <div class="search-popup" id="search-popup">
        <form action="home-1.html" class="search-form">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search.....">
            </div>
            <button type="submit" class="submit-btn"><i class="fa fa-search"></i></button>
        </form>
    </div>
    <!-- //. search Popup -->

    <!-- navbar start -->
    <div id="side-navbar" class="side-navbar">
        <i id="side-menu-close" class="fa fa-times"></i>
         <ul class="side-navbar-items">
            <li class="menu-item-has-children">Home
                <ul class="sub-menu ps-0">
                    <li><a href="home-1.html">Home 01</a></li>
                    <li><a href="home-2.html">Home 02</a></li>
                    <li><a href="home-3.html">Home 03</a></li>
                    <li><a href="home-4.html">Home 04</a></li>
                </ul>
            </li>
            <li><a href="#">Features</a></li>
            <li class="menu-item-has-children">Pages
                <ul class="sub-menu ps-0">
                    <li><a href="single.html">Blog</a></li>
                    <li><a href="single-blog-2.html">Blog 02</a></li>
                    <li><a href="single-blog-3.html">Blog 03</a></li>
                    <li><a href="single-blog-4.html">Blog 04</a></li>
                    <li><a href="single-blog-full.html">Blog 05</a></li>
                    <li><a href="gallery-blog.html">Gallery Blog</a></li>
                </ul>
            </li>
            <li><a href="home-3.html">Lifestyle</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>       
    </div>
    <header class="navbar-area">
        <nav class="navbar navbar-expand-lg">
            <div class="container-fluid nav-container">
                <div class="responsive-mobile-menu">
                    <button class="menu toggle-btn d-block d-lg-none" data-target="#themefie_main_menu" 
                    aria-expanded="false" aria-label="Toggle navigation">
                        <span class="icon-left"></span>
                        <span class="icon-right"></span>
                    </button>
                </div>
                <div class="lawel-header-left">
                    <div class="side-menu-bar d-inline-flex">
                        <i id="side-menu-open" class="fa fa-bars"></i>
                    </div>
                    <a href="home-1.html" class="logo">
                        <img src="assets/img/logo.png" alt="img">
                    </a>
                    <div class="nav-right-part">
                        <ul class="social-area">
                            <li><a href="#"><i class="fab fa-instagram"></i></a></li>                   
                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                            <li><a class="search" href="#"><i class="fa fa-search"></i></a></li>    
                        </ul>
                    </div>                     
                </div>
                <div class="collapse navbar-collapse" id="themefie_main_menu">
                    <ul class="navbar-nav menu-open text-center">
                        <li class="current-menu-item menu-item-has-children">
                            <a href="home-1.html">HOME</a>
                            <ul class="sub-menu">
                                <li><a href="home-1.html">Home 01</a></li>
                                <li><a href="home-2.html">Home 02</a></li>
                                <li><a href="home-3.html">Home 03</a></li>
                                <li><a href="home-4.html">Home 04</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="home-4.html">FEATURES</a>
                        </li>
                        <li class="menu-item-has-children">
                            <a href="#">PAGES</a>
                            <ul class="sub-menu">
                                <li><a href="single.html">Blog</a></li>
                                <li><a href="single-blog-2.html">Blog 02</a></li>
                                <li><a href="single-blog-3.html">Blog 03</a></li>
                                <li><a href="single-blog-4.html">Blog 04</a></li>
                                <li><a href="single-blog-full.html">Blog 05</a></li>
                                <li><a href="gallery-blog.html">Gallery Blog</a></li>
                                <li><a href="about.html">About</a></li>
                                <li><a href="contact.html">Contact</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="home-3.html">LIFESTYLE</a>
                        </li>
                        <li>
                            <a href="about.html">ABOUT</a>
                        </li>
                        <li>
                            <a href="contact.html">CONTACT</a>
                        </li>
                    </ul>
                </div>
                <div class="nav-right-part text-end nav-right-part-desktop">
                    <ul>
                        <li><a href="#"><i class="fab fa-instagram"></i></a></li>                   
                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li><a class="search" href="#"><i class="fa fa-search"></i></a></li>    
                    </ul> 
                </div>
            </div>
        </nav>
    </header>
    <!-- navbar end -->

    <div class="banner-logo-area border-bottom">
        <img src="assets/img/logo.png" alt="img">
    </div>

    <!-- latest post Area Start-->
    <section class="latest-post-area pd-top-100 pd-bottom-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-9 col-md-8">
                    <div class="blog-post-item-wrap mb-3">
                        <div class="post-content text-center pt-0 mb-4">
                            <h6>Fashion</h6>
                            <h4><a href="#">Three Favorite Swimwear</a></h4>
                            <div class="post-meta">
                                <ul>
                                    <li>By</li>
                                    <li><a href="#">Alison morgan</a></li>
                                    <li>May 8, 2017</li>
                                </ul>
                            </div>
                        </div>
                        <div class="thumb pd-bottom-45">
                            <img class="w-100" src="assets/img/post/single.jpg" alt="img">
                        </div>
                        <p class="mb-4">Nam rutrum suscipit orci ut ultrices. Sedarcu orci, quis augue porta feugiat posuere nisi. Fusce fringilla ametiam sit ameeque vitae elit condimentum auctor. Sed in turpis pulvinar, euismod arcu condimentum, gravida nisi. Proin vitae elit felis. Ut lobor tis elit arcu, at maximus dolor laoreet vel. Vestibulum elementum sem libero, nec euismod velit ullamcorper vitae.</p>
                        <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet euismod mi, ut pulvinar sem tincidunt ut. Nulla finibus vehicula tortor, non tristique arcu scelerisque id. Nulla facilisi. Suspendisse ut turpis orci. Sed viverra, odioc rutrum tincidunt nibh lectus tempus erat, non tincidunt massa odio sit amet ipsum. Fusce porttitor nisi eget finibus consectetur. In eu facilisis ligula. Duis aliquet purus eget nibh lacinia iaculis. Curabitur nec dignissim enim, ac auctor magna lerisque augue ut blandit.</p>
                        <p>Nam quis quam tincidunt, interdum mauris nec, ultrices risus. Phasellus semper, elit at hendrerit consectetur, erodio tempor felis, id posuere nisl lectus vitae nulla. Fusce dictum, ex id volutpat sagittis, erat lectus lacinia augu landit nisi ornare finibus.</p>
                    </div>
                    <div class="single-post-footer">
                        <div class="row">
                            <div class="col-lg-6 col-md-4 col-sm-5">
                                <ul class="social-area">
                                    <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                </ul>
                            </div>
                            <div class="col-lg-6 col-md-8 col-sm-7 text-sm-end">
                                <div class="tag-inner">
                                    <span><a href="#">#BLOG</a></span>
                                    <span><a href="#">#WOMEN</a></span>
                                    <span><a href="#">#FASHION</a></span>
                                    <span><a href="#">#SWIMWEAR</a></span>
                                </div>
                            </div>  
                        </div>
                    </div>
                    <div class="blog-about-author d-flex">
                        <div class="thumb">
                            <img src="assets/img/author.png" alt="img">
                        </div>
                        <div class="author-info">
                            <h4 class="author-name">Alison Morgan</h4>
                            <p class="author-content">Mauris massa nisi, viverra ac sapien, tempor auctor tempus pulvinar varius vestibulum. Sed pellen tesque quis sem eget euismod. Duis ut risus consectetur justo euismod viverra in purus. </p>
                            <ul class="social-area">
                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="post-pagination">
                        <div class="other-post">
                            <i class="fa fa-angle-left"></i>
                            <div class="media-body">
                                <h5><a href="#" title="">Designer Swimsuit </a></h5>
                                <p><a href="">previous post</a></p>
                            </div>  
                        </div>

                        <div class="other-post">
                            <div class="media-body">
                                <h5><a href="#" title="">Sugar Regulation</a></h5>
                                <p><a href="">next post</a></p>
                            </div>
                            <i class="fa fa-angle-right"></i>
                        </div>

</body>
</html>

CSS样式代码🏡


:root {
  --body-font-size: 15px;
  --line-height30: 1.8;
  --main-color: #199794;
  --main-color-opacity: 25, 151, 148;
  --body-font: "Khula", sans-serif;
  --heading-font: "Poppins", sans-serif;
  --paragraph-color: #959595;
  --heading-color: #111;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden;
  font-family: var(--body-font);
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  -moz-osx-font-smoothing: grayscale;
  /* Firefox */
  -webkit-font-smoothing: antialiased;
  /* WebKit  */
}

body {
  margin: 0;
  color: var(--paragraph-color);
  font-family: var(--body-font);
  line-height: var(--line-height30);
  font-size: var(--body-font-size);
}

h1 {
  font-size: 56px;
  line-height: 1.2333333333;
}

h2 {
  font-size: 40px;
  line-height: 1.3380952381;
}

h3 {
  font-size: 32px;
  line-height: 1.3833333333;
}

h4 {
  font-size: 28px;
  line-height: 1.3380952381;
}

h5 {
  font-size: 24px;
  line-height: 1.3380952381;
}

h6 {
  font-size: 18px;
  line-height: 1.2380952381;
}

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

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

七、实训总结��

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