web final assignment design web page - Kaiping Diaolou (20 pages) HTML+CSS+JavaScript

👨‍🎓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 tourism web page production, with smart pictures, neat layout, rich content, clear theme, 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.

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 the web page works is simple, and any HTML editing software (such as Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad++, etc.) can be used to run, modify and edit.
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 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 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>unnamed</title>
<link href="css/style.css" tppabs="http://www.xiaoyazhi.xyz/bishe/you3/css/style.css" type="text/css" rel="stylesheet" />
<script src="Scripts/swfobject_modified.js" tppabs="http://www.xiaoyazhi.xyz/bishe/you3/Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>



<div id="top">
	<div class="top_tu">
	  <img src="images/img5.png" tppabs="http://www.xiaoyazhi.xyz/bishe/you3/images/img5.png" />
    </div>
</div>

<div id="main">
  <div class="main_m">
	<div id="main_left" class="bai">
    	<ul>
        <li><a href="index.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you3/index.html">Homepage</a></li>
        <li><a href="source/lishibeijing.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you3/source/lishibeijing.html">Historical Background</a></li>
        <li><a href="source/zhuyaofenlei.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you3/source/zhuyaofenlei.html">Main categories</a></li>
        <li><a href="source/dianxinglou.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you3/source/dianxinglou.html">Typical Diaolou</a></li>
        <li><a href="source/lishizuoyong.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you3/source/lishizuoyong.html">Historical role</a></li>
        <li><a href="source/intro.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you3/source/intro.html">Historical Value</a></li>
        <li><a href="source/photo.html" tppabs="http://www.xiaoyazhi.xyz/bish/you3/source/photo.html">Diaolou Album</a></li>
        <li><a href="source/yingshi.html" tppabs="http://www.xiaoyazhi.xyz/bish/you3/source/yingshi.html">Film and Television Zone</a></li>
        <li><a href="source/jieshao.html" tppabs="http://www.xiaoyazhi.xyz/bishe/you3/source/jieshao.html">Diaolou Introduction</a></li>
      </ul>
    </div>
    <div id="main_midd">
    	<h1>Basic introduction to Kaiping Diaolou</h1>
    	<div class="midd_nr">
       	  <img src="images/img6.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you3/images/img6.jpg" />
        </div>
    </div>
    <div class="midd_right"><img src="images/img5.jpg" tppabs="http://www.xiaoyazhi.xyz/bishe/you3/images/img5.jpg" /></div>
    <div class="cl"></div>
  </div>
  <div class="footer bai">
  <a href="source/hezuo.html" tppabs="http://Www.xiaoyazhi.xyz/bishe/you3/source/hezuo. HTML'> Site Collaboration </a> | <a href='source/lianxiwomen. HTML "tppabs=" http://www.xiaoyazhi.xyz/bishe/you3/source/lianxiwomen.html ">Contact us </a> | <a href=" javascript:if (confirm(' http://www.foreseebio.com/bishe/wangluoyingxiao.html \nn ļ޷  Teleport Ultra, Ϊ һ· Houttuynia Japonica Ϊʼַĵַ \ n\n ڷϴ?')) Window.location=' http://www.foreseebio.com/bishe/wangluoyingxiao.html ''tppabs=' http://www.foreseebio.com/bishe/ Wangluoyingxiao. HTML ">Internet Marketing </a> | <a href=" source/zhaopin. HTML "tppabs=" http://www.xiaoyazhi.xyz/bishe/you3/source/zhaopin.html ">Recruitment Information</a> | <a href=" source/wangzhanditu. HTML "tppabs=" http://www.xiaoyazhi.xyz/bishe/you3/source/wangzhanditu.html ">Site Map</a> | <a href=" source/yijianfankui. HTML "tppabs=" http://www.xiaoyazhi.xyz/bishe/you3/source/yijianfankui.html ">Feedback</a> | <a href=" source/fuwushengming. HTML "tppabs=" http://www.xiaoyazhi.xyz/bishe/you3/source/fuwushengming.html ">Service Statement</a><br />
  	copyright © 2013 SouFun.com Limited, All Rights Reserved Soufun Company All Rights Reserved<br />
  	<ul id="menu-bottom">
  	  <li id="menu-item-62">Kaiping Radio and Television University:10 Autumn computer information: Zhou Mingqia - 1044001469985</li>
    </ul>
  	<br />
  </div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>


CSS style code 🏡

@charset "UTF-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0; font-family:Arial;}
body{ font:12px/1.5  Arial 'Song Dynasty';  background:#990500;}
table{ border-collapse:collapse; border-spacing:0;}
fieldset,img{ border:0;}
address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:normal;}
ol,ul{ list-style:none; line-height:0px;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}
q:before,q:after{ content:'';}
abbr,acronym{ border:0;}
q:before,q:after,blockquote:before,blockquote:after{content:"";}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input{font-family:inherit; font-size:inherit; *font-size:100%;	font-weight:inherit; line-height: 23px; height: 21px; border: 1px solid #dddddd;}
*{ margin:0px; padding:0px;list-style-type:none;}
textarea{font-family:inherit; font-size:inherit; *font-size:100%; font-weight:inherit; line-height: 23px; border: 1px solid #dddddd; overflow-y:hidden; overflow-x:hidden; padding: 5px;}
a,img{border:0;}
em{font-style:normal;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}
*html .clearfix{height:1%;}
.clearfix{display:block;}
*+html .clearfix{min-height:1%;}
.cl{ clear:both; line-height:0px;}
.red,.red a{ color:#b30303; text-decoration:none;}
.red a:hover{ color:#f60; text-decoration:none;}
.bai,.bai a{ color:#fff; text-decoration:none;}
.bai a:hover{ color:#f60; text-decoration:none;}
.hui,.hui a{color:#828181!important;text-decoration:none;}
.hui a:hover{color:#F60!important;text-decoration:none;}
.hui8,.hui8 a{color:#333!important;text-decoration:none;}
.hui8 a:hover{color:#F60!important;text-decoration:none;}
.blue3,.blue3 a{color:#0a5aa1;text-decoration:none;}
.blue3 a:hover{ color:#F60;}
.blue4,.blue4 a{color:#4966de;text-decoration:none;}
.blue4 a:hover{ color:#F60;}
.huang,.huang a{color:#f60;text-decoration:none;}
.huang a:hover{ color:#F60;}
.time{ float:right; line-height:26px; font-size:12px; color:#828181;}
.more{ float:right; font-size:14px; color:#0a5aa1; font-weight:100;}
.more1{ width:44px; float:right; height:15px; margin-top:8px; margin-right:10px;}
.more2{ width:108px; float:right; height:21px; margin-top:4px; margin-right:10px;}
.m_l{ margin-left:49px;}
.m_l1{ margin-left:25px;}

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.

Eight, more dry goods 🎁

1. If my blog is helpful to you, if you like my blog content, please "👍 Like" "✍️ Comment" "💙 Favorites" with one click!

2. ❤️ [ 👇🏻👇🏻👇🏻 Focus on me | Get more source code | Quality articles] Take you to learn about various front-end plug-ins, 3D cool effects, picture display, text effects, and site-wide templates, graduate HTML templates, large homework templates, and so on! "There are many front-end developers here who are exploring front-end Node knowledge and learning from each other."

3. Questions related to the above content technology😈Welcome to exchange and learn together👇🏻👇🏻👇🏻🔥!

💂[How to get]

gitee code cloud source code warehouse - welcome to Star: https://gitee.com/zhanyuqiu2022/my-app

Tags: Javascript Front-end html

Posted by l_evans on Sat, 10 Sep 2022 21:28:16 +0300