摘  要

随着网页的技术突飞猛进，现在网页的制作人员不仅可以制作静态网页，同时也有能力制作出具有动感的、缤纷绚丽的动态效果的网页。本网站设计出来的是一个关于企业咖啡产品的网站。制作此网页的出发点就是因为互联网的飞速发展，目前网站已经成为了一个企业进行产品宣传、信息发布等方面必不可少的阵地，这都是因为互联网具有快捷、实时更新的特点。许多家具公司建设了自己的官方网站。利用网络技术对公司进行宣传与产品销售，这也被越来越多的人们所接受，正是如此，双叶家居公司在不断发展的过程中，也需设计出自己官网。

本网站采用了Html5技术和bootstrap框架，visual studio code开发工具进行开发的。本论文主要介绍了课题开发的背景和意义、网站所实现的功能、各模块的设计方案。网站功能包括产品中心，企业资讯，招商加盟，关于我们，问题留言等。在网页方面，综合考虑了页面色彩、页面的构架，充分的利用了图片、文字、图层、表格等元素。网站内容明确，层次清楚，达到了预期的功能。

关键词：Html5；bootstrap；家具网站；visual studio code；网页设计

Abstract

With the rapid development of web technology, web page producers can not only make static web pages, but also have the ability to produce dynamic and colorful dynamic effects of web pages. This website is designed to be a website about corporate coffee products. The starting point of making this web page is because of the rapid development of the Internet, the website has become an indispensable position for an enterprise to carry out product publicity, information release and so on, which is because the Internet has the characteristics of fast and real-time update. Many furniture companies have built their own official websites. The use of network technology to promote the company and product sales, which is also  accepted by more and more people, it is precisely this, Shuangye Home Company in the process of continuous development, also need to design their own official website.

This website is developed using Html5 technology and visual studio code development tools. This paper mainly introduces the background and significance of the project development, the functions realized by the website, and the design scheme of each module. Website features include product center, enterprise information, investment to join, about us, question messages and so on. In the aspect of web page, the color of the page, the structure of the page are considered synthetically, and the elements such as picture, text, layer and table are fully utilized. The website content is clear, the level is clear, has achieved the anticipated function.

Keywords: Html5;bootstrap；furniture website; visual studio code; web design

目  录

摘  要 I

Abstract II

目  录 III

第1章 绪论 1

1.1选题背景及意义 1

1.2研究动态 1

1.3主要解决问题 2

1.4研究主要内容 2

第2章 网页设计开发技术及工具介绍 4

2.1 网页开发技术 4

2.1.1 HTML简介 4

2.1.2 DIV+CSS简介 4

2.1.3 bootstrap 4

2.2 网页制作工具 5

2.2.1 Photoshop 5

2.2.2 Dreamweaver 5

2.2.3 visual studio code 5

2.2.4 firefox 6

第3章 网站设计分析 7

3.1 可行性分析 7

3.2 功能需求分析 7

3.3 网站设计规划 8

3.3.1 网站建设构想 8

3.3.2 网站模块 8

第4章 网站总体设计及实现 9

4.1 系统功能模块 9

4.2 站点建立 9

4.3 css制作 9

4.4 网页的设计实现 10

4.4.1 导航设计 11

4.4.2 首页设计 12

4.4.3 产品中心 12

4.4.4 招商加盟 14

4.4.5 关于我们 14

4.4.6 问题留言 15

第5章 网站测试 16

总  结 17

致  谢 18

参考文献 19