论文作者姓名： 张 皓 焱
作 者 学 号： 1245350691
所 在 学 院： 计算机学院
所 学 专 业： 计算机科学与技术
导师姓名职称： 侯 彦 东
论文完成时间： 2019年4月13日
河南大学本科生毕业论文（设计、创作）承诺书
论文题目 基于HTML5的的网站开发
姓 名张皓焱所学专业计算机科学与技术
学 号1245350691完成时间2019年 4 月 13 日
指导教师
姓名职称侯彦东
承诺内容：
1．本毕业论文（设计、创作）是学生 在导师 的指导下独立完成的，没有抄袭、剽窃他人成果，没有请人代做，若在毕业论文（设计、创作）的各种检查、评比中被发现有以上行为，愿按学校有关规定接受处理，并承担相应的法律责任。
2．学校有权保留并向上级有关部门送交本毕业论文（设计、创作）的复印件和磁盘。
备注：
学生签名： 指导教师签名：
2019 年 4 月 13 日 2016 年 4 月 13 日
说明：学生毕业论文（设计、创作）如有保密等要求，请在备注中明确，承诺内容第2条即以备注为准。
目 录
目 录I
摘 要III
第一章 概述1
1.1 课题来源1
1.2 课题背景1
1.3 课题意义1
第二章 系统分析2
2.1 可行性分析2
2.1.1 技术可行性2
2.1.2 社会可行性2
2.2 功能分析2
2.3 网站设计规划3
2.3.1 网站建设构想3
2.3.2 网站模块3
第三章 网页设计开发4
3.1 网页开发技术4
3.1.1 HTML简介4
3.1.2 DIV+CSS简介4
3.2 网页制作工具5
3.2.1 Photoshop5
3.2.2 Dreamweaver5
3.2.3 firefox6
第四章 网站制作6
4.1 网站内容6
4.1.1 网站的制作步骤6
4.1.2 导航设计7
4.1.3 首页设计8
4.1.4 二级页设计9
4.2站点建立10
4.2 css制作11
4.3网站测试12
参考文献14
致 谢15
附 录16
摘 要
随着互联网在当今社会的蓬勃发展，人们已经意识到了网络的巨大作用。人们可以无论在哪里都能浏览网络信息，实时性、无地域限制等特性给全世界人类的巨大的诱惑力。随着互联网技术在我国的各地的快速普及，现在越来越多的企业、公司、事业单位，都在互联网上建立属于自己单位的网络，而且个人也建立自己的个性网页。
近几年来，网页制作技术也越来越成熟，网页制作人员在制作静态网页，也可以做出具有动感的、绚丽的动态效果的网站网页。本网站设计出来的是一个关于企业咖啡产品的网站。在互联网络飞速发展的社会，网站已经成为企业进行产品宣传、信息发布重要阵地，网站的快捷、实时更新的特点。此网站建设是宣传企业咖啡知产品的重要方式，也是时代发展的必然的要求。
关键字 咖啡；HTML；JAVASCRIPT；DIV+CSS
ABSTRACT
With the rapid development of the Internet in todays society, people have been aware of the great role of the network. People can browse the network information, real time, no geographical restrictions and other characteristics to the worlds great temptation. With the rapid spread of the Internet technology in various areas of our country, now more and more enterprises, companies, institutions, on the Internet to establish networks belonging to their own units, and individuals to establish their personal page.
In recent years, web production technology has become more and more mature, web production staff in the production of static pages, you can also make a dynamic, brilliant dynamic effects of web pages. This site is designed to be a corporate coffee products website. In the rapid development of the Internet society, the site has become an important position for enterprise product promotion, information release, the sites quick, real-time update features. This website construction is an important way to promote the product of the companys coffee, and it is also the inevitable requirement of the development of the times.
Keyword Coffee; HTML；JAVASCRIPT；DIV+CSS

第一章 概述
1.1 课题来源
本课题为自选课题。
1.2 课题背景
现在人类社会已经进入21世纪网络信息社会，信息技术的快速发展冲击着我们生活的方方面面。以互联网为核心的信息时代为社会各行各业提供了前所未有的机会和发展潜力。互联网的发展已经快有20年的时间了，特别是近10的网络发展，更是每天都日新月异，我们享受互联网给我们带来的便利生活。  
现在企业网站是企业利用商品宣传的重要方式之一。互联网为企业与用户提供了一种新的商务活动模式。基于互联网的企业网站是现代企业进行电子商务的窗口之一，是企业为合作伙伴和客户提供浏览企业产品和企业形象的平台。通过网站网页企业的合作伙伴，可以很快的获取最新的产品及经营信息，企业的客户可以查询并了解企业所生产的各种产品,为客户提供的各种服务。通过网站，企业能更好的宣传自己，提高企业知名度，进行有效的网络营销。 
为了提高企业产品的知名度，让企业更多的发展，利用现有的INTERNET网络环境，我个人开发了咖啡产品网站。
1.3 课题意义
互联网上发布各种各样的信息基本都是通过网站来实现的，获取信息也是要在互联网这个汪洋大海中按照一定的搜索方式将所搜索自己需要的信息。因此网站建设是极其必要的，网站已成为政府、企业以及个人重要组成部分，倍受人们的重视的宣传方式。网络在现代人们生活中普及，越来越多的人已经离不开网络，随时随地都在上网获取知识，随着网络技术的快速发展,现在的企业纷纷都建立自己的企业网站,这样可以借助于互联网扩大自己企业的影响、推广企业产品,同时通过互联网的信息传递加速自身的发展。
第二章 系统分析
2.1 可行性分析
2.1.1 技术可行性
1.静态网站的制作对硬件、软件要求不高，目前一般办公电脑都能满足网站开发要求。我们主要运用的软件drwamweaver网页编辑软件和photoshop图像处理软件。
2.采用html网页技术，html技术是网页技术的基本，他结合javascript和css等脚本语言，以上技术实现改网站的开发设计。 
3.维护工作方便，操作人员完全可以在短时间内完全掌握html维护技术。 
2.1.2 社会可行性
在当今网络发达的社会，在世界每个国家，企业网站已经成一种战略，它已经成为宣传企业产品的重要手段之一。与国外的企业网站相比，我国的企业网站相对来说还比较薄弱，而且很多企业网站的内容不够美观。但是我们应该能看到，互联网在相当迅速的融入我们生活中的点点滴滴，我国目前上网人数已经超过8亿人在上网。因此对企业来说，建立一个企业网站意味着无数商机，否则是对于企业来说则是一个很大的损失。由此，企业建立自己的宣传产品网站，为自己的产品和顾客提供服务的重要性不言而喻了。 
2.2 功能分析
网站从功能模块上划分，企业网站可以分为两大部分，网站前台部分和网站后台部分。网站的前台部分主要是为用户设计，向用户展示商品信息。网站前台功能包括：
1、首页浏览
首页上重要显示网站重要的信息，包括广告图片、行业新闻和我们的产品。广告图片主要是为向用户突出某些产品，行业新闻主要是想用户提供企业最新的新闻资讯，产品主要向用户展示企业的最新产品。
2、产品展示页
产品展示页列出来了企业所有咖啡信息。并且为用户提供快速分类查找产品的功能。用户点击菜单栏可以找自己想要的产品。
3、关于我们
关于我们主要是告诉用户公司的一些基本情况，例如，公司简介，品牌定位，品牌承诺，我们的理念，让用户通过网站就能够相信公司的。了解公司的基本理念。
4、咖啡文化
很多人知道去喝咖啡，但是可能对咖啡的基本知识掌握不足，这个页面主要从咖啡的种植，咖啡的烘焙，咖啡的调剂，咖啡的品尝来介绍咖啡的基本信息。
5、热点信息
展示咖啡行业的基本动态新闻信息。
2.3 网站设计规划
2.3.1 网站建设构想
本网站的页面效果布局基本上都是采用左右或者上下型，当然也有两种布局的混搭。他既是综合型也可以算是拐角型。这种排版方式是很多主流网站经常使用的方式之一。使用这种排版方式可以让旅游景点的信息更好的呈现在用户面前，他的特点就是能突出景点的特点，能使用户能非常快速的获到自己想要的咖啡信息。
2.3.2 网站模块
首先根据已经拟定的功能需求，对网站的大体模块做一个系统化的设计，搭建一个功能较为完善的框架。
如下表所示，首页的组织结构表。
表2-1 首页组织结构表
标题功能
首页banner图片、行业新闻、我们的产品
产品展示产品信息以及快速分类
关于我们公司简介，品牌定位
咖啡文化咖啡历史以及推荐产品
热点新闻行业新闻
第三章 网页设计开发
3.1 网页开发技术
3.1.1 HTML简介
在网站上的一个url连接就可以被称之为一个页面。作为一个组织或者个人在万维网上放置开始点的页面称为主页或首页，主页中通常包括有指向其他相关页面或其他描点的超级链接，所谓超级链接，就是一种统一资源定位器指针，通过点击超级连接，可使浏览器通过url地址获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
3.1.2 DIV+CSS简介
DIV+CSS是网站标准中常用术语之一，div+css 是一种网页的布局方法,传统的HTML网页设计语言中的表格（table）定位方式与这一种网页布局方法有本质的区别,DIV+CSS真正地达到了w3c内容与表现相分离。CSS是样式表，用来定义文字图片的显示效果，网页文本内容一般放在Table 或DIV里面。用DIV比Table定位更科学更精确，兼容性更好，另外网页打开速度更快，搜索引擎也更容易收录。如果要移动网页某一部分内容的位置，用DIV+CSS是非常容易修改的，用Table+CSS则非常困难。所以现在的新网页，特别是基于Web 2.0的个人网站什么的，都用DIV+CSS来实现的。可以很轻松的拖拽和编辑空间内容。
3.2 网页制作工具
3.2.1 Photoshop
Photoshop主要用来制作精美的网站效果图，他可以制作出来各种格式的图片，也可以制作gif图。Photoshop主要原理就是图像通过图层来合成图片，制作出来一个精美页面效果。图像合成也是图像通过图层进行操作应用合成完整的、传达网页设计师的思想，这是网页美工设计的必须要做的；它还提供的绘图钢笔工具可以画出美工想要的各种图形。Photoshop就有简单的用户界面管理：使用可折迭的工作区切换器，在喜欢的用户界面配置之间实现快速导航和选择。实时工作区会自动记录网页制作人员的操作记录，Dreamweaver已经是网页开发者必选工具之一。
3.2.2 Dreamweaver
Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。突出的特点主要有灵活的编写方式；可视化编辑界面。 它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。DW基本对最新的Web技术都有所支持，包含HTML标签检查、网页格式化选项、文本格式控制、网站站点捆绑、图像编辑、可视化网页设计、全局查找替换、全FTP 功能、处理Flash和动态HTML、基于团队的Web创作和Shockwave等富媒体格式。在编辑上制作者可以选择可视化方式或者喜欢的源码编辑方式。
DW编辑区是非常灵活的，因此它可以非常快的让开发人员适应各种不同的工作风格，Dreamweaver常用的工作区组件有以下：
1、文档窗口可显示当前编辑网页文档，文档的显示效果和浏览器中看到的基本是一样的效果。
2、可以在装载器当中打开和关闭常用检查器和模板。
3、对象工具栏包含创建不同网站网页类型的对象（例如 图象、表格和层等）的按钮。
4、属性检查器可以显示网页中的选定对象的属性。
5、快捷菜单可以使网页开发人员对当前选择或区域快速执行命令。
6、网页开发人员可以通过固定的浮动工具栏、浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。
3.2.3 firefox
Firefox是一个相对标准、严格且兼容性强的浏览器，它拥有一组开发使用工具，包括强大的JavaScript/CSS控制台、文件查看器等，提供洞察网页运作详情的能力。在旅游网站的制作过程中，我利用Firefox浏览器对HTML编写的文档进行预览的，除此之外，我常常通过它的查看器来查看元素，让我很快就能“对症下药”。

第四章 网站制作
4.1 网站内容
4.1.1 网站的制作步骤
网站是所有网页的集合，一个网站站点用的所有网页构成一个网站，网页是网站的具体表现形式，网页设计是指对网站整体页面效果的设计，包括页面logo、页面风格、颜色的搭配、页面布局、网站内容等。网页设计包含的内容其实是非常非常多的，大体分为两个方面：一方面是纯网站本身的设计，例如页面的文字、页面的排版、产品图片制作、网站的平面设计、静态图文和动态声音、影像等；另一方面是网站的延伸设计，包括网站主题、制作策划、形象包装和宣传营销等
4.1.2 导航设计
导航的设计思想主要看上去简洁，用户使用用导航的时候简洁方便。导航条使用灰色背景，底部加上一条横线。加上咖啡色的字体颜色，简洁美观。导航条鼠标移动上的效果是背景色变为深色。导航效果的HTML

• 首页


• 产品展示
  
  
  
  • 2
  
  
  • 1
  
  
  • 1
  
  
  
  


• 关于咖啡


• 咖啡文化


• 热点新闻

将鼠标移到导航条的效果，即鼠标移上背景变为咖啡色，字体白。导航条展示如下。
图4-1 导航条图
4.1.3 首页设计
用户进入网站首先看到的就是网站的首页，用户进入首页产生一种心情舒畅的感觉，用户才会对接下来的网站的其他产品产生兴趣。网站的首页的设计，注意多样化，给顾客提供选择的机会；注意当下最流行的咖啡饮品热点推荐，给用户良好的体验，还要注意了精准化，保证网站内容的真实性，增加用户对企业的信任。

图4-2 网站首页图
4.1.4 二级页设计
子页是首页更进一步频道的详细介绍，它的页面效果不能太复杂，主要是展示网站的产品和企业的基本信息。网站所以每个子页是针对一个频道设计的，而本网站的子页在排版上大体形似，但其实也有区别。在主体内容区的布局，每张子页几乎都不一样。
图4-3 二级页设计图
4.2站点建立
1) 启动Dreamweaver。 
2) 打开“站点”菜单，选择“新建站点”命令。 
3) 在文本框中，输入一个名称，该名称可以是任何所需的名称。             
4) 然后在下面的“本地跟目录文件夹”和“默认图像文件夹”文本框中输入本地网站预保存的路径，单击“确认”按钮。 
5) 随即在组合面板中点弹出“站点”面板，现在可以在其中添加页面了。 
6) 右键单击“站点”面板中的根目录，在弹出菜单中选择“新建文件”命令，把新建文件的名称改为“index.html” 
7) 双击index.html，进入页面编辑状态。
4.2 css制作
在HTML网页中嵌入CSS样式有很多种方式，在不同网页的情况下，我们可以采用不同嵌入方法，通常比较常用的有下面几种方法。 
嵌入式css样式表：嵌入式样式表的实现是非常的简单，只需在每个要需要样式的HTML标签后写上CSS属性即可。例如要设置指定某个div中的文字的样式为灰色，字号为12px，可在div标签上先写style=“”然后在添加下面的代码：。这种方式主要用于对某一个的html标签作css效果调整，其作用的只限于本标签。嵌入式样式体现不出来CSS样式表的优越性，所以网站制作中应用的并不多。 
内联式css样式表：若想只对当前页面的标签应用css样式，就可以使用内联式样式表。所谓内联式样式表就是把样式表定义语句放html页面签和标签中，设置时通常放在HTML代码的头部部分。 
外联式样式表：外联式样式表是将所有的的样式代码都放到一个扩展名为.css的样式文件中以方便网站所有的网页的调用。这种方式的优点是可以通过一个css文件就能管理网站中的所有的网页。如果要对网站中其他页面进行样式引用，可以先把样式用Dreamweaver定义成一个“.css”的文件。例如：打开记事本，将定义的名为h3的样式代码写到css文件中，保存的文件名为css.css，代码如下： 
H1{font-family:“微软黑体”; color:#666; font-style:italic; } 
引用时在网页HTML代码的标记后用

引用这个样式文件，在部分的相应内容的前后加上和。
4.3网站测试
网站网页的html在做完之后我们不能立即发布，我还要检验各个网页之间的链接是否流畅正确，浏览器是否有错位等，因为是静态网站所以有时甚至我们可能还要记住整个站点的基本框架结构以备以后的修改。所以编码完成后首先做的是对网页进行详细的测试。 
网站测试的目的在于发现网页中的错误，我们及时的修改，增加网站的可靠性，如果一个有错误的网页，会给用户很不好的映像。它在网站设计当中是非常重要的步骤之一。网站测试是网站开发的最后一个阶段，也是软件质量的重要的一个环节。网站测试的目的就是尽早的发现程序中存在的错误，并且我们要消除和解决网站故障，我们要保证用户的操作提要，提高网站的可靠运行，最终把一完美的的网站系统交给用户使用。一般来说，网页制作的时候，在每做一个页面模块之后都会他进行的测试，这种测试通常被称为单元测试，也是网页制作人员自己进行车市。自己开发测试完成之后，我们还应该对网站进行各种浏览器测试，在大的互联网企业中，一般都是由专门的测试人员去测试网站的。  
我们在网页中的测试主要就是测试网站的浏览器兼容。我们测试的浏览器主要分布是IE浏览器、谷歌浏览器、火狐等浏览器、360浏览器。逐个进行网页测试。在多次网页兼容实践中经常可以遇到了DIV浮动问题，但是我还是在老师的指导和同学的帮助下，解决这些网页兼容问题，并完成页面设计，使网站的各个页面在各个浏览器中显示正常。
　
第五章 结论
通过这次网页制作，我明白了一个道理，实践才是检验学习成果的标准。在这次制作毕业设计网站的过程当中让我对以前学过的专业知识有了较为为深刻的理解，这次毕业设计也是我对这三年所学的专业知识的一个体现。然而这次设计过程中让我感受颇深，让我体会到了学习不但要学号理论知识，而且我们好在学习理论知识的同时要结合实践，光学习理论知识还是远远不够的。
首先，我选的课题是咖啡网页的设计，随之而来的问题就是我应该怎么来确定该课题的主题,没动手之前把问题想的太简单了，觉得我把主题确定了，其他的事情也很好解决了。但是事实却不是这样，远远不是我想的那样简单，当我准备开始设计网页的时候，发现自己不知道从哪里下手手，设计一个什么样的界面，网站的整体风格又是怎样的，如何来规划整个网站等等一系列的问题都是我极需要解决的。我开始变得极具不安，再这样的情况下做我的设计，其结果是几天下来还是没有一个统一的概念。在老师的指导下，我慢慢的我就静下心想想自己制作的过程，发现自己完全错了，过于急于求成，所以我改变我的策略，一步步来，先准备网站的基本资料，画出程序的大体框架图，熟悉网页制作软件和语言环境，把握整体布局，明确了网站的基本功能，做好网站流程图的情况下，在去慢慢的设计好网站的各个模块，将一些网站的细节问题考虑周全后才开始开发，使得后来的毕业设计制作顺利进行。
总的来说，这次的毕业设计为我即将面临社会之前提供了一次锻炼的机会。正像老师跟我们说的一样，毕业设计就是对我们几年来所学的专业课有了更为深刻的认识，使我们三年来的知识融会贯通，制作完成后悔得到了比以往学习任何一门课都更大的提高和进步。自己以后在工作当中还要加强自己的知识习，不断的完善自己的能力。经过这次毕业设计开发，对我来说这不仅仅是一次网站设计，更重要的在这过程中的学习，脚踏实地，认真严谨，实事求是的一种学习态度，不怕困难、坚持不懈、吃苦耐劳的精神是我在这次设计中最大的收获之一。是对我实际动手能力的一次提升，也会对我未来的学习和工作有很大的帮助。
这次网站毕业设计不能说得非常完美，但我感觉我已经尽了自己最大努力去完成，我想只要自己努力做一件事就能对得起自己了。同时我也会在以后的时间里完善这个咖啡网站，不断的对网站内容进行升级，做出更好的页面效果。