《网站前端技术》621-7（梁玲）课件 第一章 网站建设概述

《网站前端技术》签到扫码下载文旌课堂APP扫码签到（2022.3.2515:00至2022.3.2515:10）签到方式教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。。全课导航第1章网站建设概述第2章HTML与HTML5第3章CSS与CSS3第4章JavaScript基础第5章JQuery常用函数第6章开发者商务网站建设01PARTONE

第1章网站建设概述12理解网站与网页的相关概念。熟悉网站建设技术方向。理解网站建设流程，以及本教材所涉及技术在其中的位置。了解网站建设行业的优势与前景。熟悉网站建设知识，激发学生的互联网意识，培养学生的互联网思维，提升学生的互联网知识水平。了解网站建设行业的优势与前景，为学生的职业规划提供参考。知识目标素质目标学习目标01认识网站与网页02

网站建设技术方向03网站建设流程04行业优势与前景目录CONTNETS本章导航认识网站与网页网站网页首页概念网站是指在因特网上根据一定的规则，使用HTML（hypertextmarkuplanguage，超文本标记语言）等制作的用于展示特定内容的网页集合。网站是一种沟通工具，人们可以通过网站发布自己想要公开的资讯，或者利用网站提供相关的网络服务。人们还可以通过浏览器访问网站，获取自己需要的资讯，或者享受网络服务。网页是构成网站的基本元素，是承载各种网站应用的平台。网页它可以存放在世界上某个角落的某一台计算机中，是万维网中的一“页”。网站首页是指打开网站时显示的第一个页面，又叫主页。每个网站都有一个首页，它是一个网站的入口网页，可以引导互联网用户浏览网站其他页面的内容。构成域名、空间服务器、DNS域名解析、网站程序、数据库等。网页标题、网页内容（网页内容可以包含文本、图像、超链接、表单、导航栏等。）文件名、扩展名网页的扩展名为.html或.htm首页默认的文件名称一般为index或default，如index.html、default.html、index.asp、index.aspx等。1.1.1网站、网页和首页1.1.1网站、网页和首页图1网页构成各抒己见简述网站与网页的区别与联系。Internet：中文称为因特网，是集现代计算机技术和通信技术于一体，基于TCP/IP协议将全世界不同国家、不同地区、不同部门和不同类型的计算机、国家骨干网、广域网、局域网通过网络互联设备连接而成的、全球最大的开放式计算机网络。1.1.2其他相关概念IP地址：IP是每个网站或上网用户的特定网络地址，因特网上连接了不计其数的服务器和客户机，每一个主机在因特网上都有一个唯一的地址。IP地址由4个小于256的数字组成，数字之间用点间隔。例如，“26”就是一个IP地址。域名：由于IP地址在使用过程中难于记忆和书写，人们又开发了一种与IP地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们只需要在浏览器地址栏中输入搜狐网站的域名“”，然后按【Enter】键就可以访问搜狐网站了。高手点拨

在创建好网站后需要申请域名，并将网站上传到服务器上，这样别人才能通过互联网访问网站。WWW：WWW是worldwideweb的缩写，中文称为“万维网”，也可简称为Web、3W等，它是互联网上的一个资料空间，在这个空间中，任何一个资源都由“统一资源定位符”（uniformresourcelocator，URL）标识，并利用超文本传输协议（hypertexttransferprotocol，HTTP）传送给使用者。访问万维网上的一个网页或其他资源时，通常需要先在浏览器地址栏中输入该网页的URL，或者通过超链接方式发送访问该网页的请求。Web服务器在收到请求后，会将相关信息发送到您的电脑。由于网页文件都是由HTML（超文本标记语言）代码或其他代码组成的，因此还需要由浏览器解释为文本、图像和超链接等可视化的网页信息。1.1.2其他相关概念1.1.2其他相关概念WWW统一资源定位符，也称为网址，这是世界通用的负责给万维网上的资源（如网页）定位的系统。一个完整的URL由通信协议名称、域名或IP地址、资源在服务器中的路径和文件名4部分组成。

超文本传送协议，它负责规定浏览器和服务器怎样互相交流。

是Web服务的客户端浏览程序。使用它可以向万维网服务器发送各种请求，并对从服务器发来的超文本信息进行解释和显示。一个客户端想要正确打开网页，必须要安装一个浏览器工具。URL浏览器HTTPHTML超文本标记语言，它使用标签来定义网页结构。通信协议名称域名文件路径文件名http://page.china.alibab/cp/cp1.html网站建设技术方向UI设计方向Web前端开发方向后台程序开发方向010203就业1.2

网站建设技术方向网站建设技术方向1.2.1UI设计方向UI即userinterface（用户界面）的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计不仅是让界面变得有个性有品位，还要让程序的操作变得舒适、简单、自由，并充分体现软件的定位和特点。例如，UI设计师根据客户提供的需求初步效果，分析并设计出个性、美观、舒适、定位精准、特点突出的用户界面效果图。随着UI设计行业在全球软件业内兴起，国内外众多大型企业（如百度、腾讯、Yahoo、中国移动、Nokia、联想、网易、微软、盛大、淘宝等）均已成立专业的UI设计部门，但专业人才稀缺，人才资源争夺激烈，就业市场供不应求。1.2.2Web前端开发方向Web前端开发是指利用HTML、CSS、JavaScript等将UI设计师设计出的用户界面以静态网页的形式展现，并实现交互效果。图2静态页面效果高手点拨

静态网页是标准的HTML文件，它的文件扩展名是.html或.htm，可以包含文本、图像、声音、动画、客户端脚本和ActiveX控件及JAVA小程序等。静态网页是网站建设的基础，早期的网站一般都是由静态网页组成的。网站是由一个个网页组成的，每个网页又有多种多样的元素，这些元素主要依靠HTML标签定义，不同的HTML标签有不同的作用。目前，HTML已发展至HTML5版本。HTML决定网页结构。通俗的讲，HTML决定网页上有什么。随着技术的发展，用户对网页布局的合理性、元素展现的美观性要求越来越高。只用HTML标签制作的网页已经不能满足人们的需求，于是引入了CSS技术控制标签的布局和样式。目前，CSS已发展至CSS3版本。CSS决定网页元素样式，通俗的讲，

CSS决定网页元素是什么样。网页的交互效果也越来越丰富，这主要依靠JavaScript技术实现。JavaScript技术在捕获HTML元素、实现循环、调用方法等方面的操作特别烦琐，因此市场上诞生了很多基于JavaScript的函数库，如电脑版的JQuery函数库、手机触摸版的Touch函数库等。JavaScript决定网页互动效果。通俗的讲，JavaScript决定网页元素怎么动；JQuery简化JavaScript程序。CSSJavaScript1.2.2Web前端开发方向HTML1.2.3后台程序开发方向JSPASPPHP动态服务器页面，由Microsoft公司开发，可用来创建动态交互式网页。Java服务器页面，在HTML页面文件中插入Java程序段和JSP标记，就成了JSP文件，其后缀名为.jsp。JSP开发的web应用跨平台，可以运行在Linux或其他操作系统下。超文本预处理器，是在服务器端执行的脚本语言。使用它可以生成动态页面内容，也可以创建、打开、读取、写入、关闭服务器上的文件，还可以添加、删除、修改数据库中的数据等。后台程序开发即“服务器端”开发，主要涉及软件系统“后台”的东西，包括用于托管网站和App数据的服务器、各种程序开发语言（如ASP、JSP、PHP等）等。简单地说，那些用户在屏幕上看不到但又用来为前端网页提供支持的东西就是后台。后台程序开发者关心如何通过集成代码、API和数据库提升网站的速度、性能和响应度等。网站建设流程1.3网站建设流程网站建设流程整体而言可以分成三大部分，分别是网站规划设计、网站制作和网站发布维护。图3网站建设流程用户需求调查及分析，网站建设人员需要与用户交流与沟通，明确用户建设网站的目的和具体要求，然后收集和整理用户资料，认真分析并充分理解用户的意图。还可以请用户提供他们所喜欢的网站实例，网站建设人员可以在此基础上结合网站技术特点，提出网站设计方案，并与用户反复商讨，从而设计出用户认可的方案。步骤1确定服务器解决方案。一个网站至少应该有一台用于运行应用程序的服务器。在网站的实际建设过程中，服务器的问题通常采用自备主机、租用虚拟主机、主机托管等方案解决。用户可以根据自身的实际情况决定采用哪种方案。网站规划设计。网站规划主要包括网站的类型选择、主题设计、风格设计、内容设计、版面布局设计及网站策划书的撰写等。网站规划对网站建设起到计划和指导作用，对网站的内容和维护起到定位作用。界面设计。网站规划方案通过网页展现出来，制作网页是将网站规划付诸实施的主要任务。在制作网页前要考虑网站的风格和功能，不仅要使网站的基本格调符合用户的要求，还要使网站的功能满足用户的使用需求。设计者必须在网站的外观、栏目、内容和功能上多下功夫，设计出新颖、美观的网页界面。1.3网站建设流程网页制作。网页制作可以分为结构层制作、样式层制作和行为层制作。结构层制作使用HTML代码搭建网页的主体结构，如文字、图像、超链接等。使用CSS（层叠样式表）及JavaScript（动态脚本语言）制作网页的样式层及行为层，完成网页的外观样式与交互行为。后台程序开发。后台程序是网站建设的后台开发，用于实现网站的功能。后台程序开发常使用ASP、JSP、PHP等语言处理网站后台数据库的事务，同时负责数据库与前台页面之间的连接。网站测试与发布。将网站上传到服务器前，需要对其进行测试及优化。测试包括兼容性测试、超链接测试等；优化是尽可能减小网页文件的体积及日后发生错误的概率。完成测试和优化后，就可以将网站发布到所申请的空间服务器上。网站上传后，可继续通过浏览器进行实地测试。网站推广。网站上传后，需要进行宣传和推广，以提高网站的访问量及知名度。推广网站的方法有很多，如搜索引擎推广、群发电子邮件、借助同类网站留言、加入友情链接、传统媒体宣传等。1.3网站建设流程维护更新。建设好网站后，需要对其进行维护和更新，才能吸引更多的用户。行业优势与前景1.4.1网站建设行业优势分析网站建设业务可分为行业（专业）网站建设、企业网站建设和个人网站建设等。伴随着不同业务需求的增多，社会对网站建设人才的需求也急剧增加。目前，国内互联网行业拥有大量的职位缺口，其中Web前端开发是需求增长最快、最热门的岗位，网站建设行业除了人才需求量大这个优势外，还具有待遇丰厚、入门门槛低等优势。这几年随着前端技术的快速发展，市场上前端人才的缺口不断增大，前端的薪资水平也水涨船高，很多人被前端的高薪吸引了过来。据统计，在一线城市，前端开发的月薪能达到1.2万，在二线城市，前端开发的月薪能达到5000。图4

北京Web前端工资水平图图5

太原Web前端工资水平图1.4.2网站建设行业前景技术层面社会环境市场空间从技术层面看，目前国内网站建设公司，有精湛水平的是少之又少。在未来，随着网站市场竞争的加剧，网站要求会越来越高，设计人员、程序人员及相关人员等技术水平都仍有进一步提升的空间。从当下的市场空间来看，随着建站技术、建站要求的不断提高，未建设自己网站的部分企业和已经建设过网站的企业，分别通过建站或改版来重新设计自己的网站。√从当下的社会环境来看，中国是全球网民数量最多的国家，也是最大的电子信息产品生产基地，互联网的出现快速改变了国内人民的生活方式，以及人们对这个社会的认知。√√1.4.2网站建设行业前景总的来说，网站建设行业经过多年的沉淀和积累，涉及多平台跨越式建设，以及HTML、CSS、JavaScript、java、layout、viewport、eclipse等应用型技术工具。同时网站建设技术也已趋于完善，未来前景是十分乐观的。因此，在互联网一片光明的大环境下，网站建设作为互联网最基础的一项环节，势必紧跟互联网热潮一路向前，蓬勃发展。本章对网站建设的相关知识，认识网站与网页、网站建设技术方向、网站建设流程以及行业优势与前景进行综合阐述。重点阐述了网站与网页的基本概念。重点介绍