基于HTML5的的网站开发

1、精选优质文档倾情为你奉上精选优质文档倾情为你奉上专心专注专业专心专注专业精选优质文档倾情为你奉上专心专注专业基于HTML5的的网站开发2019年 04 月 13 日河南大学 届本科生毕业论文（设计、创作）开题报告论文（设计、创作）题目所在学院专 业学生姓名学 号一、本课题研究意义二、国内外有关本课题的研究动态三、本课题研究的基本内容四、本课题拟解决的主要问题五、研究方法六、主要创新点七、主要参考文献具体时间及写作进度安排起止日期主要工作内容指导教师对开题报告的意见*。是否推荐开题。指导教师签名： 年 月 日系（室）对本课题开题的意见*。是否同意开题。 负责人签名： 年 月 日河南大学 届本科生

2、毕业论文（设计、创作）中期进展情况检论文（设计、创作）题目所在学院专 业学生姓名学 号一、毕业论文（设计、创作）进展情况二、毕业论文（设计、创作）存在问题及解决方案三、指导教师对学生论文（设计、创作）进展等方面的评价 指导教师签字： 年 月 日系（室）对本课题中期检查的意见*（对课题进度、取得的阶段性成果做出客观评价）。 负责人签名： 年 月 日河南大学 届本科生毕业论文（设计、创作）指导教师和评阅教师评价表论文（设计、创作）题目所在学院专 业学生姓名学 号指导教师评定结论 签字： 年 月 日评阅教师评定结论 签字： 年 月 日备注：1.指导教师和评阅教师要在学生参与答辩前对论文整体情况做出客

3、观评价，并说明是否同意该生参与毕业论文答辩。河南大学 届本科生毕业论文（设计、创作）答辩成绩表论文（设计、创作）题目所在学院专 业学生姓名学 号答辩委员会（组）评分及评定结论评分项目及分值答辩委员会（组）专家评分答 辩 情 况论 文 质 量合计（100分）内容表达 情况（15分）回答问题 情况（25分）规范要求与文字表达（20分）论文（设计、创作）质量和创新意识（40分）得分答辩委员会（组）评定结论答辩委员会（组）签字： 年 月 日 毕业论文（设计、创作）答辩成绩： 分 答辩委员会（组）负责人签字： 年 月 日备注：1.论文的质量评定，应包括对论文的语言表达、结构层次、逻辑性理论分析、设计计算

4、、数据处理、分析和概括能力及在论文中是否有新的见解或创造性成果等做出评价。从论文来看学生掌握本专业基础理论和基本技能的程度。2.评分由答辩委员会（组）专家（原则上5或7人一组）操作，根据学生答辩情况，答辩委员会专家及时给出每个学生的成绩。内部对评分如有争议时，应当场进行表决。3.答辩委员会（组）评定结论应说明是否通过答辩。4.各院亦可根据本专业的不同情况，制定相应的具有自己特色的评价表格。5.以上表格所有签字部分必须手签。河南大学本科生毕业论文（设计、创作）承诺书论文（设计、创作）题目姓 名学 号专 业指导教师姓名职 称完成时间年 月 日 年 月 日承诺内容：本毕业论文（设计、创作）是学生_在

5、导师_的指导下独立完成的，没有抄袭、剽窃他人成果，没有请人代做，若在毕业论文（设计、创作）的各种检查、评比中被发现有以上行为，愿按学校有关规定接受处理，并承担相应的法律责任。学校有权保留并向上级有关部门送交本毕业论文（设计、创作）的复印件和电子稿件。学校可以将毕业论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或扫描等复制手段保存、汇编本论文。备注：学生签名： 指导教师签名： 年 月 日 年 月 日说明：学生毕业论文（设计、创作）如有保密等要求，请在备注中明确，承诺内容第2 条即以备注为准。河南大学本科生毕业论文（设计、创作）承诺书论文题目 基于HTML5的的网站开发姓 名张皓焱

6、所学专业计算机科学与技术学 号完成时间2019年 4 月 13 日指导教师姓名职称侯彦东承诺内容：1本毕业论文（设计、创作）是学生 在导师 的指导下独立完成的，没有抄袭、剽窃他人成果，没有请人代做，若在毕业论文（设计、创作）的各种检查、评比中被发现有以上行为，愿按学校有关规定接受处理，并承担相应的法律责任。2学校有权保留并向上级有关部门送交本毕业论文（设计、创作）的复印件和磁盘。备注：学生签名： 指导教师签名：2019 年 4 月 13 日 2016 年 4 月 13 日说明：学生毕业论文（设计、创作）如有保密等要求，请在备注中明确，承诺内容第2条即以备注为准。基于HTML5的的网站开发摘 要

7、随着当今社会经济的蓬勃发展，互联网作为经济发展中不可缺少的一环。人们已经逐渐意识到了网络的巨大作用。在现在生活当中人们可以无论在哪里都能浏览网络信息，互联网的实时性、无地域限制等特性给全世界人类的巨大的诱惑力。近年来互联网技术在世界各地都在快速的发展，我国在此方面也一直处于世界领先水平高，在我国越来越多的企业、单位，机构都在互联网上建立属于本单位的系统和网络，有时一些个人也建立属于自己的个性网页，用来分享生活点滴，教授知识，介绍一些奇闻异事等等。进入二十一世界以来尤其是近几年，我国制作网页的技术突飞猛进，现在网页的制作人员不仅可以制作静态网页，同时也有能力制作出具有动感的、缤纷绚丽的动态效果的

8、网页。本网站设计出来的是一个关于企业咖啡产品的网站。制作此网页的出发点就是因为互联网的飞速发展，目前网站已经成为了一个企业进行产品宣传、信息发布等方面必不可少的阵地，这都是因为互联网具有快捷、实时更新的特点。此网站建设是宣传企业咖啡知产品的重要方式，也是时代发展的必然的要求。 关键字 ： 咖啡；HTML；JAVASCRIPT；DIV+CSSWeb development based on HTML5ABSTRACTWith the rapid development of the Internet in todays society, people have been aware of the

9、 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, institu

10、tions, 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 dyna

11、mic 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 const

12、ruction 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 目 录 TOC o 1-3 h z u 第一章 概述1.1 课题来源 本课题为自选课题。1.2 课题背景近年来我们的生活以肉眼可见的速度在变化，我们已经来到了网络信息时代，信息技术的不断进步使我们的物质生活水平也在不断

13、地进步。难以想象在这样一个互联网带来的信息时代下我们所面临的机遇和挑战。回首往昔互联网的发展已经快有20年的时间了，特别是近10的网络发展，更是每天都日新月异，我们享受互联网给我们带来的便利生活。 目前网站已经成为了一个企业进行产品宣传、信息发布等方面必不可少的阵地。在互联网的作用下为企业与用户之间形成了一种全新的商务模式。这全都归功于互联网，在互联网的作用下企业网站应运而生，为现代企业的发展打开了一扇窗这扇窗，透过这扇窗企业合作伙伴和客户可以浏览到企业内部的情况，包括企业产品和企业形象等多个方面。使其能够更好的了解企业从而建立合作关系。为了提高企业产品的知名度，让企业更多的发展，利用现有的I

14、NTERNET网络环境，我个人开发了咖啡产品网站。1.3 课题意义互联网上发布各种各样的信息基本都是通过网站来实现的，获取信息也是要在互联网这个汪洋大海中按照一定的搜索方式将所搜索自己需要的信息。所以网站建设是应该的更是必要的，目前网站已经成为一种极其重要的宣传方式。在政府、企业乃至个人都应用广泛，成为一种不可忽视的网络力量。随着网络的不断普及，网络已经成为现代人们生活中不可或缺的一部分，人们已经越来越离不开网络。因此为了抓住这互联网带来的机遇,越来越多的企业开始建立自己的企业网站,希望能够借助互联网来扩大自己企业的影响、从而推广自己企业的产品带来经济效益。第二章 系统分析2.1 可行性分析2

15、.1.1 技术可行性1.静态网站的制作对硬件、软件要求不高，目前一般办公电脑都能满足网站开发要求。我们主要运用的软件drwamweaver网页编辑软件和photoshop图像处理软件。2.采用html网页技术，html技术是网页技术的基本，他结合javascript和css等脚本语言，以上技术实现改网站的开发设计。3.维护工作方便，操作人员完全可以在短时间内完全掌握html维护技术。 2.1.2 社会可行性在当今网络发达的社会，在世界每个国家，企业网站已经成一种战略，它已经成为宣传企业产品的重要手段之一。与国外的企业网站相比，我国的企业网站相对来说还比较薄弱，而且很多企业网站的内容不够美观。但

16、是我们应该能看到，互联网在相当迅速的融入我们生活中的点点滴滴，我国目前上网人数已经超过8亿人在上网。因此一个企业网站就意味着拥有无数商机，不然就会被时代拉下，我国惨痛的历史相信会给我们教训。 2.2 功能分析企业网站从功能模块上来进行划分可以分为两大部分：网站前台部分和网站后台部分。网站的前台部分主要负责用户设计，向用户展示商品信息。网站前台功能包括：1、首页浏览首页上重要显示网站重要的信息，包括广告图片、行业新闻和我们的产品。广告图片主要是为向用户突出某些产品，行业新闻主要是想用户提供企业最新的新闻资讯，产品主要向用户展示企业的最新产品。2、产品展示页产品展示页列出来了企业所有咖啡信息。并且

17、为用户提供快速分类查找产品的功能。用户点击菜单栏可以找自己想要的产品。3、关于我们关于我们主要是告诉用户公司的一些基本情况，例如，公司简介，品牌定位，品牌承诺，我们的理念，让用户通过网站就能够相信公司的。了解公司的基本理念。4、咖啡文化很多人知道去喝咖啡，但是可能对咖啡的基本知识掌握不足，这个页面主要从咖啡的种植过程，咖啡的烘焙方法，咖啡在调剂中应该注意的问题，和咖啡最后的品尝来介绍咖啡的基本信息。5、热点信息展示咖啡行业的基本动态新闻信息。2.3 网站设计规划2.3.1 网站建设构想本网站的页面效果布局基本上都是采用左右或者上下型，当然也有两种布局的混搭。他既是综合型也可以算是拐角型。这种排

18、版方式被广泛应用于很多主流网站。使用这种排版方式可以让旅游景点的信息更好的呈现在用户面前，他的特点就是能突出景点的特点，能使用户能非常快速的获到自己想要的咖啡信息。2.3.2 网站模块首先根据已经拟定的功能需求，对网站的大体模块做一个系统化的设计，搭建一个功能较为完善的框架。如下表所示，首页的组织结构表。表2-1 首页组织结构表标题功能首页banner图片、行业新闻、我们的产品产品展示产品信息以及快速分类关于我们公司简介，品牌定位咖啡文化咖啡历史以及推荐产品热点新闻行业新闻第三章 网页设计开发3.1 网页开发技术3.1.1 HTML简介在网站上的一个url连接就可以被称之为一个页面。作为一个组

19、织或者个人在万维网上放置开始点的页面称为主页或首页，主页中通常包括有指向其他相关页面或其他描点的超级链接，所谓超级链接，就是一种统一资源定位器指针，通过点击超级连接，可使浏览器通过url地址获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。3.1.2 DIV+CSS简介 首先要了解DIV+CSS，必须要知道的是DIV+CSS是一种常用术语，广泛运用于网站设计中，用来设计网页的布局。但是DIV+CSS与传统的HTML网页设

20、计语言中的表格（table）有着很大的区别,相比之下DIV+CSS这种布局方式更加的优秀真正地达到了w3c内容与表现相分离。DIV+CSS中的CSS代表的是样式表，是一种定义文字图片显示效果方式。在网页中文本内容一般都是放在DIV或Table里面的。但是DIV的定位相比于Table更加的科学更加的精确，同时兼容性也更加好，并且具有打开网页速度快，收录搜索引擎更容易等特点。在移动网页某一部分内容位置方面，使用DIV+CSS是非常方便快捷的，而Table+CSS先比来说则是非常困难的。所以现在的很多新网页，特别是由个人建立基于Web 2.0的网站，都用DIV+CSS来实现的。可以很轻松的拖拽和编辑

21、空间内容，从而使工作更加的便捷节约时间。3.2 网页制作工具3.2.1 PhotoshopPhotoshop主要用来制作精美的网站效果图，他可以制作出来各种格式的图片，也可以制作gif图。Photoshop主要原理就是图像通过图层来合成图片，制作出来一个精美页面效果。图像合成也是图像通过图层进行操作应用合成完整的、传达网页设计师的思想，这是网页美工设计的必须要做的；它还提供的绘图钢笔工具可以画出美工想要的各种图形。Photoshop就有简单的用户界面管理：使用可折迭的工作区切换器，在喜欢的用户界面配置之间实现快速导航和选择。实时工作区会自动记录网页制作人员的操作记录，Photoshop已经是网

22、页开发者必选工具之一。 3.2.2 DreamweaverDreamweaver作为网页设计与制作领域功能最强大的软件，拥有最多的应用功能，从而拥有最多的使用者。自从二零一五年八月份Dreamweaver8发布以来，Dreamweaver在网页设计与制作领域的地位更加的不可动摇。Dreamweave具有的突出的特点主要有灵活的编写方式；可视化编辑界面。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。DW基本对最新的Web技术都有所支持，包含HTML标签检查、网页格式化选项、文本格式控制、

23、网站站点捆绑、图像编辑、可视化网页设计、全局查找替换、全FTP 功能、处理Flash和动态HTML、基于团队的Web创作和Shockwave等富媒体格式。在编辑上制作者可以选择可视化方式或者喜欢的源码编辑方式。3.2.3 firefoxFirefox是一个相对标准、严格且兼容性强的浏览器，它拥有一组开发使用工具，包括强大的JavaScript/CSS控制台、文件查看器等，提供洞察网页运作详情的能力。在旅游网站的制作过程中，我利用Firefox浏览器对HTML编写的文档进行预览的，除此之外，我常常通过它的查看器来查看元素，让我很快就能“对症下药”。 第四章 网站制作4.1 网站内容4.1.1 网

24、站的制作步骤网站简单来说就是所有网页的和，在同一个网站站点中的所有网页之和就是网站，因此可以这样说网站由每一个具体的网页来展现，因此一个好的网页设计对一个网站来说是至关重要的。我此次的毕业论文就是针对网页设计。网页设计具体包括以下几点：页面logo、页面风格、颜色的搭配、页面布局、网站内容等。不难看出网页设计所涉及到的内容是非常多的，但是经过前辈的总结和自身知识的结合我认为网页设计其实可以分为以下两个方面：一方面是基于网站本身来进行的设计，例如网页所使用的文字、网页所运用的排版方式、网页内所涉及到的产品图片如何进行制作等等；另一方面是以网站为基础来进行的延伸设计，包括网站主题、制作策划、形象包

25、装和宣传营销等 4.1.2 导航设计导航的设计思想主要看上去简洁，用户使用用导航的时候简洁方便。因此我决定导航条做成灰色背景，同时在底部加上一条横线。最后加上咖啡色的字体颜色，简洁美观。当鼠标移动到导航条上时，导航条的效果是背景色变为深色。导航效果的HTML 首页 产品展示 2 1 1 关于咖啡 咖啡文化热点新闻 将鼠标移到导航条的效果，即鼠标移上背景变为咖啡色，字体白。导航条展示如下。图4-1 导航条图4.1.3 首页设计用户进入网站首先看到的就是网站的首页，用户进入首页产生一种心情舒畅的感觉，用户才会对接下来的网站的其他产品产生兴趣。网站的首页的设计，注意多样化，给顾客提供选择的机会；注意

26、当下最流行的咖啡饮品热点推荐，给用户良好的体验，还要注意了精准化，保证网站内容的真实性，增加用户对企业的信任。 图4-2 网站首页图4.1.4 二级页设计子页是首页更进一步频道的详细介绍，它的页面效果不能太复杂，主要是展示网站的产品和企业的基本信息。网站所以每个子页是针对一个频道设计的，而本网站的子页在排版上大体形似，但其实也有区别。图4-3 二级页设计图4.2站点建立 1)启动Dreamweaver。2)打开“站点”菜单，选择“新建站点”命令。3)在文本框中，输入一个名称，该名称可以是任何所需的名称。4)然后在下面的“本地跟目录文件夹”和“默认图像文件夹”文本框中输入本地网站预保存的路径，单

27、击“确认”按钮。5)随即在组合面板中点弹出“站点”面板，现在可以在其中添加页面了。6)右键单击“站点”面板中的根目录，在弹出菜单中选择“新建文件”命令，把新建文件的名称改为“index.html”7)双击index.html，进入页面编辑状态。4.3 css制作在HTML网页中嵌入CSS样式有很多种方式，在不同网页的情况下，我们可以采用不同嵌入方法，通常比较常用的有下面几种方法。嵌入式css样式表：嵌入式样式表的实现是非常的简单，只需在每个要需要样式的HTML标签后写上CSS属性即可。例如要设置指定某个div中的文字的样式为灰色，字号为12px，可在div标签上先写style=“”然后在添加下

28、面的代码：。这种方式主要用于对某一个的html标签作css效果调整，其作用的只限于本标签。嵌入式样式体现不出来CSS样式表的优越性，所以网站制作中应用的并不多。内联式css样式表：若想只对当前页面的标签应用css样式，就可以使用内联式样式表。所谓内联式样式表就是把样式表定义语句放html页面签和标签中，设置时通常放在HTML代码的头部部分。外联式样式表：外联式样式表通俗点理解就是将所有的样式代码都放到一个扩展名为“.css”的样式文件中，这样就可以方便网站内的所有的网页的调用。这种工作方式达到的效果就是所有的网页都可以通过一个“.css”文件来进行管理。例如：要对网站中其他页面进行样式引用，那

29、么就可以先把样式引用Dreamweaver定义成一个“.css”的文件。接下来我们将以打开记事本为例，首先我们将定义的名为h3的样式代码写到“.css”文件中，然后保存，保存的文件名为css.css，代码如下：H1font-family:“微软黑体”;color:#666;font-style:italic;引用时在网页HTML代码的标记后用引用这个样式文件，在部分的相应内容的前后加上和。 4.4网站测试网站网页的html在做完之后我们不能立即发布，我还要检验各个网页之间的链接是否流畅正确，浏览器是否有错位等，因为是静态网站所以有时甚至我们可能还要记住整个站点的基本框架结构以备以后的修改。所以

30、编码完成后首先做的是对网页进行详细的测试。网站测试的目的在于发现网页中的错误，我们及时的修改，增加网站的可靠性，如果一个有错误的网页，会给用户很不好的映像。因此可以说它是网站设计当中非常重要的步骤之一。网站开发的最后一个阶段就是网站测试，是检验软件质量最重要的一个环。网站测试的目的就是尽早的发现程序中存在的错误，并且我们要消除和解决网站故障，我们要保证用户的操作提要，提高网站的可靠运行，最终把一完美的的网站系统交给用户使用。一般来说，网页制作的时候，在每做一个页面模块之后都会他进行的测试，这种测试通常被称为单元测试，也是网页制作人员自己进行车市。自己开发测试完成之后，我们还应该对网站进行各种浏

31、览器测试，在大的互联网企业中，一般都是由专门的测试人员去测试网站的。在网页测试方面，我们主要要测试的就是网站浏览器兼容性。我们测试的浏览器主要分布是IE浏览器、谷歌浏览器、火狐等浏览器、360浏览器。逐个进行网页测试。在多次网页兼容实践中经常可以遇到了DIV浮动问题，但是我还是在老师的指导和同学的帮助下，解决这些网页兼容问题，并完成页面设计，使网站的各个页面在各个浏览器中显示正常。第五章 结论 通过这次网页制作，我明白了一个道理，实践才是检验学习成果的标准。在这次制作毕业设计网站的过程当中让我对以前学过的专业知识有了较为为深刻的理解，这次毕业设计充分融合了我大学三年以来所学的知识。因此这次设计

32、让我感受到了很多明白了很多，只有将理论知识与实践充分结合才是真正的学会，学懂，学精。首先，我选的课题是咖啡网页的设计，随之而来的问题就是我应该怎么来确定该课题的主题,因为经验的不足导致我把问题想的太过于简单，认为当一个主题确定下来后其他的工作就是小事。但是事实却不是这样，远远不是我想的那样简单，当我准备开始设计网页的时候，发现自己不知道从哪里下手手，设计一个什么样的界面，网站的整体风格又是怎样的，等一系列问题我都找不到答案。我开始变得极具不安，再这样的情况下做我的设计，其结果是几天下来还是没有一个统一的概念。在老师的指导下，我慢慢的我就静下心想想自己制作的过程，发现自己完全错了，过于急于求成，

33、所以我改变我的策略，一步步来，先准备网站的基本资料，画出程序的大体框架图，熟悉网页制作软件和语言环境，把握整体布局，明确了网站的基本功能，做好网站流程图的情况下，在去慢慢的设计好网站的各个模块，仔细思考关于网站的每一个细节问题，当所有的问题都得到解决办法后才着手开发，这使我接下来的工作进展的特别顺利。 总的来说，这次的毕业设计可以说是我毕业之前的一次历练，为我敲响警钟。重温消化进入大学以来我们所学习的知识，更加深刻了解我们的学科。将我们所学习的知识真正的落于实处，这是比我们以往所学习得任何一门课都更有意义。自己以后在工作当中还要加强自己的知识学习，不断的完善自己的能力。在这次毕业设计中我不仅仅是完成了一次网站设计，我更加在完成的过程中学习到了做事