👨🎓Student HTML static web page basic level production 👩🎓, the page layout is clean and concise. Using HTML+CSS page layout design, web college student web page design homework source code, this is a good travel web page production, with smart pictures, neat layout, rich content, clear themes, very suitable for beginners to learn and use, this example is more comprehensive and helpful Based on the learning of my classmates, this article will introduce how to practice design through the process of designing a personal website from scratch and turning it into code.
Article directory 🌰
- I. Website title👨🎓
- Second, website description ✍️
- Three, website introduction 📖
- Four, website effect 🌐
- 5. Website code production part 📕
- HTML structure code 🧱
- CSS style code 🏡
- Six. Problems and how to solve them🔍
- Seven, training summary 😊
- Eight, more dry goods 🎁
1. Website title👨🎓
🚀 Design and production of tourist attractions introduction, tourist scenic spots, hometown introduction, and other websites.
2. Website description ✍️
Introduction to tourist attractions, tourist attractions is an introduction to the introduction, administrative divisions, geographical environment, natural environment, education, sports, tourist attractions, city honors and so on. The local customs and customs are mainly displayed in the website, and the interactive experience of tourists is increased through guest comments. At the same time, each webpage in the local tourism website adopts a unified design style to strengthen the publicity effect of the unified appearance of the city. The most important thing is to make a unique style of travel website, which can attract the attention of visitors.
3. Introduction to the website📖
In terms of website layout: It is planned to adopt the current mainstream floating webpage layout structure that is compatible with major mainstream browsers and has a stable display effect.
Website programming: It is planned to use the latest web programming language HTML5+CSS3+JS programming language to complete the functional design of the website. And ensure that the website code is compatible with all mainstream browsers on the market, and the effect of seeing the website immediately after opening it has been achieved.
In terms of website materials: I plan to collect good-looking picture materials from various platforms, carefully select pictures suitable for the style of the webpage, and then use PS to make pictures suitable for the size of the webpage.
In terms of website files: the types of website system files include: html webpage structure files, css webpage style files, js webpage special effect files, and images webpage picture files;
Web page editing: The code of web works is simple, and you can use any HTML editing software (such as:Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad++ and other HTML editing software to run, modify and edit operations).
in:
(1) The html file contains: index.html is the home page, and other html is the secondary page;
(2) The css file contains: css all page styles, text scrolling, image enlargement, etc.;
(3) The js file contains: js implements dynamic carousel special effects, click events, etc. (js code is used in individual web pages).
Fourth, the website effect 🌐
The focus of website design and production is the layout of the overall design of the web page and the selection of topics for the overall content of the web page. Website design: Plan to achieve a concise and atmospheric web design effect. In terms of website functions: It is planned to realize the link jump function between various pages, the color-changing function of hovering the mouse over the text, the simple dynamic picture switching function of the home page, and the simple form submission function.
5. Website code production part 📕
(1) The homepage layout of the website determines the content of each section, and uses the DIV+CSS layout. In addition, the knowledge used on the home page mainly includes image insertion, dynamic image switching, navigation bar, fixed font using CSS, text size, text color, and background color.
(2) The page uses the DIV+CSS layout, and the knowledge used mainly includes image insertion, navigation bar, fixed font using CSS, text size, text color, and background color.
(3) Some pages of the form use the DIV+CSS layout, and the knowledge used mainly includes the use of the form form, the input text box and the input submit button to complete the form information collection. Use CSS to set the input submit button text size and color.
HTML structure code 🧱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>final assignment~Tourist sites</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<!-- head -->
<header>
<div id="menu-bar" class="fas fa-bars"></div>
<a href="#" class="logo"><span>J</span>acky</a>
<nav class="navbar">
<a href="#home">front page</a>
<a href="#book">Reserve</a>
<a href="#packages">combo</a>
<a href="#services">Serve</a>
<a href="#gallery">photo album</a>
<a href="#review">Evaluation</a>
<a href="#contact">contact us</a>
</nav>
<!-- icon -->
<div class="icons">
<i class="fas fa-search" id="search-btn"></i>
<i class="fas fa-user" id="login-btn"></i>
</div>
<!-- search bar -->
<form action="" class="search-bar-container">
<input type="search" id="search-bar" placeholder="search here...">
<label for="search-bar" class="fas fa-search"></label>
</form>
</header>
<!-- login form -->
<div class="login-form-container">
<i class="fas fa-times" id="form-close"></i>
<form action="">
<h3>login</h3>
<input type="email" class="box" placeholder="enter your email">
<input type="password" class="box" placeholder="enter your password">
<input type="submit" value="login now" class="btn">
<input type="checkbox" id="remember">
<label for="remember">remember me</label>
<p>forget password? <a href="#">click here</a></p>
<p>don't have and account? <a href="#">register now</a></p>
</form>
</div>
<!-- Home Video banner Area -->
<section class="home" id="home">
<div class="content">
<h3>travel is a religion</h3>
<p>go far with us,In search of poems and dreams</p>
<a href="#" class="btn">See more</a>
</div>
<div class="controls">
<span class="vid-btn active" data-src="images/vid-1.mp4"></span>
<span class="vid-btn" data-src="./images/vid-2.mp4"></span>
<span class="vid-btn" data-src="images/vid-3.mp4"></span>
<span class="vid-btn" data-src="images/vid-4.mp4"></span>
<span class="vid-btn" data-src="images/vid-5.mp4"></span>
</div>
<div class="video-container">
<video src="images/vid-1.mp4" id="video-slider" loop autoplay muted></video>
</div>
</section>
<!-- Booking section -->
<section class="book" id="book">
<h1 class="heading">
<span>b</span>
<span>o</span>
<span>o</span>
<span>k</span>
<span class="space"></span>
<span>n</span>
<span>o</span>
<span>w</span>
</h1>
<div class="row">
<div class="image">
<img src="images/book-img.svg" alt="">
</div>
<form action="">
<div class="inputBox">
<h3>where to</h3>
<input type="text" placeholder="where to go">
</div>
<div class="inputBox">
<h3>how many</h3>
<input type="number" placeholder="how many people">
</div>
<div class="inputBox">
<h3>how long to arrive</h3>
<input type="date">
</div>
<div class="inputBox">
<h3>how long to leave</h3>
<input type="date">
</div>
<input type="submit" class="btn" value="Book now">
</form>
</div>
</section>
</div>
</html>
CSS style code 🏡
}
header .logo span{
color: #ffa500;
}
header .logo{
font-size: 1.5rem;
font-weight: bolder;
color:#fff;
text-transform: uppercase;
}
header .navbar a{
color:#fff;
font-size: 1rem;
font-weight: bold;
margin:0 .8rem;
}
header .navbar a:hover{
color:#ffa500;
}
header .icons i{
font-size: 1.2rem;
color:#fff;
cursor: pointer;
margin-right: 1rem;
}
header .icons i:hover{
color:#ffa500;
}
/* search bar */
header .search-bar-container{
position: absolute;
top:-100%; left: 0; right:0;
padding: 0.5em 1rem;
background:#333;
border-top: .1rem solid rgba(255,255,255,.2);
display: flex;
align-items: center;
z-index: 1001;
}
header .search-bar-container.active{
top:100%;
}
header .search-bar-container #search-bar{
width:100%;
padding:.5rem;
text-transform: none;
color:#333;
font-size: 1rem;
}
header .search-bar-container label{
color:#fff;
cursor: pointer;
font-size: 1rem;
margin-left: 1rem;
}
header .search-bar-container label:hover{
color:#ffa500;
}
/* login form */
.login-form-container{
position: fixed;
top:-120%; left: 0;
z-index: 10000;
min-height: 100vh;
width:100%;
background:rgba(0,0,0,.7);
display: flex;
align-items: center;
justify-content: center;
}
.login-form-container.active{
top:0;
}
6. Problems encountered and how to solve them 🔍
During the training, I encountered a lot of difficulties, such as how to collect picture materials suitable for web pages, how to make the color matching of web pages look more natural and comfortable, how to use PS to crop pictures of suitable size, and how to design forms when making forms, etc. , through the Internet inquiries and ask others to get a good solution.
Seven, training summary 😊
Through this web design and production training, I can flexibly apply the knowledge and skills I have learned to make simple web pages, and master the skills of personal website construction and the process of basic website construction. It is more handy for making web pages with Dreamweaver, vscode, hbuider, etc. During the training, I tried my best to make full use of the knowledge taught by the teacher to consolidate the knowledge I learned. In order to produce better effects, I also read and referenced other materials and learned more web page processing skills. Many problems encountered in the process of making web pages were solved by searching for information or asking classmates. I have gained a lot from this comprehensive training, and what I have learned is useful. In the process of practice, I can learn and consolidate the knowledge and have a deeper memory. Web page production is a very practical subject, which deserves my further study in the future. In this training, I also realized that I have too few skills, so many ideas have not been realized. In the future learning process, I will have a deeper understanding of web page production and make more mature web pages.