HTML5+CSS3+Bootstrap响应式Web前端设计（慕课版）（第2版） 课件 第1章 网站初识

第1章网站初识《HTML5+CSS3+Bootstrap响应式Web前端设计（第2版）》学习目标/Target了解网页基本概念，能够说出网页的构成以及网页相关名词的含义。熟悉Web工作原理，了解网页是如何从服务端传送到客户端的。了解浏览器，能够说出各主流浏览器的特点。了解HTML5技术，能够知道HTML5发展历程、优势以及浏览器对HTML5的支持情况。目录/Contents1.1网页构成1.2理论基础1.3开发框架1.4网页开发工具1.5网站发布1.1网页构成网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。网页组成为了快速了解网页的构成，接下来，我们查看一下网页的源代码。打开谷歌浏览器，单击“F12”快捷键，谷歌浏览器中便会弹出当前网页的源代码。网页组成1.1网页构成1.1网页构成文字网页中的文字应统筹规划，大小搭配适当。太大会使得一个网页信息量变小，太小又使人们浏览时感到费劲。网页标题表明本网页的主要内容。醒目的标题能够吸引浏览者能否注意力。1、有些美丽的字型在制作网页的计算机上有，但将来别人浏览你的网页时，浏览者的计算机上未必装有这种字体。2、美丽的标题字体可以制作成图形方式。3、当文本内容较多时。可以利用表格形式来实现。标题字号字型微软雅黑字体浏览器默认字体正常字体字体偏大客户端无雅黑字体1.1网页构成文字1.1网页构成图形加强视觉效果。背景图华丽，使人感到界面友好。但需要占据较大的空间，致使网页的显示速度明显变慢。网页上的菜单按钮有一些是由图形制作。横排竖排链接的标志有文字和图形两种。制作一些精美的图形作为链接按钮，使它和整个网页融为一体。菜单按钮背景图形链接标志绘制图形、图像、动画网页支持格式：JPEG、GIF、PNG将特殊文字设计为图片用图片作为按钮用图片作为链接标志1.1网页构成图形1024分辨率1.1网页构成图形1920分辨率分辨率2*2大小43字节的图片1.1网页构成图形200*200大小1.58KB1.2.1基本概念1.2理论基础网站网站即Website，也称作站点，是指在互联网上，根据一定的规则，使用HTML语言编写的用于展示内容的网页的集合。在本地计算机上，网站体现为一组文件夹。网站由域名、网站空间、网页3部分组成。WWWURLDNSHTTP和HTTPSWebW3CWgzx网站目录index.htm首页Images存放图片style.css样式表about.html网页h1.htm网页h2.htm网页h3.htm网页首页文件的直接上级目录，是网站目录首页文件的间接上级目录，不是网站根目录1.2.1基本概念1.2理论基础网站WWW（WorldWideWeb，万维网）是Internet提供的一种服务——网页浏览服务。我们上网时通过浏览器阅读网页信息就是在使用WWW服务。WWW是Internet上最主要的服务，许多网络功能，如网上聊天、网上购物等，都基于WWW服务。WWWURLDNSHTTP和HTTPSWebW3C1.2.1基本概念1.2理论基础网站WWWURLDNSHTTP和HTTPSWebW3C图书馆图书某一页WWW网站网页网页是网站的基本信息单位，是WWW的基本文档。它由文字、图片、动画、声音等多种媒体信息以及链接组成，是用HTML编写的，通过链接实现与其他网页或网站的关联和跳转。主页(HomePage)是某个Web节点的起始点，主页是链接到一个Web服务器上时显示的第一个网页，拥有一个被称为“统一资源定位地址”URL的唯一地址。一组相关网页以及有关文件、脚本和数据库等内容的有机集合；若干个网页文件经过规划组织后彼此相连而形成完整结构的信息服务系统。万维网是一个通过互联网访问的，由许多互相链接的超文本组成的全球性系统，且是互联网所能提供的服务之一。1.2.1基本概念1.2理论基础网站URL（UniformResourceLocator，统一资源定位符）其实就是Web地址，也称“网址”。在万维网上的所有文件（HTML、CSS、图片、音乐、视频等）都有唯一的URL，用户只要知道文件的URL，就能够对该文件进行访问。URL可以是本地磁盘位置，也可以是局域网上的某一台计算机，还可以是internet上的站点。WWWURLDNSHTTP和HTTPSWebW3C/1.2.1基本概念1.2理论基础网站DNS（DomainNameSystem，域名系统）是互联网的一项服务。在Internet上域名与IP地址（可以理解为Internet上计算机的一个编号）之间是一一对应的，域名（如：淘宝网域名）虽然便于用户记忆，但计算机只能识别IP地址（如：）。计算机将便于记忆的域名转换成IP的过程被称为域名解析。DNS就是进行域名解析的系统。WWWURLDNSHTTP和HTTPSWebW3C1.2.1基本概念1.2理论基础网站HTTP（Hypertexttransferprotocol，超文本传输协议）是一种详细规定了浏览器和互联网服务器之间互相通信的规则。HTTP是非常可靠的协议，具有强大的自检能力，所有用户请求的文件到达客户端时，都是准确无误的。WWWURLDNSHTTP和HTTPSWebW3C由于HTTP传输的数据都是未加密的，因此用户使用HTTP传输隐私信息不太安全。为了保证这些隐私数据能够安全传输，网景公司设计了SSL（SecureSocketsLayer，安全套接字协议），该协议用于对HTTP传输的数据进行加密，从而就诞生了HTTPS。HTTPS是由SSL+HTTP构建的，可进行加密传输、身份认证的网络协议。因此HTTPS要比HTTP更安全。http://通讯协议域名1.2.1基本概念1.2理论基础网站Web翻译为中文是“网络”的意思。对于普通网络用户来说，Web仅仅只是一种环境——互联网的使用环境。而对于网页制作者来说，Web是一系列技术的复合总称，包括网站的前台布局、后台程序、界面架构、数据库开发等。WWWURLDNSHTTP和HTTPSWebW3CWeb前端系统1.2.1基本概念1.2理论基础网站W3C（WorldWideWebConsortium，万维网联盟）是国际最著名的标准化组织。W3C最重要的工作是制定和推广Web规范。自1994年成立以来，W3C已经发布了200多项影响深远的Web技术标准及实施指南。例如，超文本标签语言（HTML）、可扩展标签语言（XML）等。这些规范有效地促进了Web技术的发展。WWWURLDNSHTTP和HTTPSWebW3C1.2.2Web工作原理1.2理论基础1.2理论基础1.2.2（1）静态页面工作原理静态网页在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，静态网页的网址形式通常为：/eg/eg.htm，

也就是以.htm、.html、.shtml、.xml等为后缀的。1.2理论基础1.2.2（1）静态页面工作原理接受请求找到静态网页发送网页服务器端1.2理论基础静态网页的特点

（1）静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“？”；（2）网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；（3）静态网页的内容相对稳定，因此容易被搜索引擎检索；（4）静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难；（5）静态网页的交互性较差，在功能方面有较大的限制。1.2.2（1）静态页面工作原理动态网页动态网页：动态网页是与静态网页相对应的，也就是说，网页URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见形式，而是以.asp、.aspx、.jsp、.php、.perl、.cgi等形式为后缀，并在动态网页网址中有一个标志性的符号—？”。BBS论坛留言板聊天室1.2理论基础1.2.2（2）动态页面工作原理1.2.2（2）动态页面工作原理1.2理论基础（1）浏览器中输入将要访问页面的URL地址。由DNS进行域名地址解析，找到服务器IP地址，向该地址所指向的Web服务器发出请求。（2）Web服务器根据浏览器送来的请求，把URL地址转换成页面所在服务器上的文件全名，查找相应的文件。（3）如果URL指向静态HTML文档，Web服务器使用HTTP协议把该文档直接送给浏览器。如果HTML文档中嵌入了ASP、PHP或JSP程序，则由Web服务器运行这些程序，把结果送到浏览器。如果Web服务器运行的程序包含对数据库的访问，则服务器将查询指令发送给数据库服务器，对数据库执行查询操作。（4）查询结果由数据库返回Web服务器，再Web服务器将结果数据嵌入页面，并以HTML格式发送给浏览器。（5）浏览器解释HTML文档，在客户端屏幕上展示结果。1.2理论基础1.2.2（2）动态页面工作原理接受请求找到动态网页发送网页服务器端执行程序代码，生成静态网页1.2.2（2）动态页面工作原理1.2理论基础客户端浏览器显示代码服务器端源代码1.2.2（2）动态页面工作原理1.2理论基础Web开发应用遵循的标准就是Web标准。Web标准是由W3C和其他标准化组织共同制定的，该标准用来创建和解释基于Web的内容，Web标准可以使得在网上发布的文档向后兼容，使其能够被大多数人所访问。1.2.3网站开发标准1.2理论基础Web标准包括一系列标准。网页部分的标准通过三部分来描述：结构（Structure）、表现（Presentation）和行为（Behavior）。HTML（结构），CSS（表现）和JavaScript（行为）HTML用来决定网页的结构和内容;CSS用来设计网页的表现形式;JavaScript用来控制网页的行为。1.2.3网站开发标准1.2理论基础HTML是HyperTextMarkupLanguage的缩写，是一种用来制作超文本文档的简单标记语言，是网页制作的基本语言。CSS(CascadingStyleSheets，层叠样式表)是标准的布局语言，用来排版和显示HTML元素，纯CSS的布局与XHTML相结合，可使内容表现与结构相分离，并使网页更容易维护，易用性更好。JavaScript语言是一种解释性的，基于对象的脚本语言。JavaScript语言与Java语言两者之间没有联系，是两种完全不同的语言，JavaScript是一种“脚本”(Script)，它直接把代码写到HTML文档中，浏览器读取它们的时候才进行编译、执行。1.2.3网站开发标准1.2理论基础1.3开发框架1.4常用开发工具HTML文档编辑工具Notepad++、EditPlus、VScode可视化网页开发软件Dreamweaver最新的版本是AdobeDreamweaverCS5动画制作软件Flash最新版本是AdobeFlashCS5图像处理工具Photoshop目前，Photoshop最新的版本是AdobePhotoshopCS51.5网站发布本章首先介绍了互联网的访问过程和工作机制。在互联网访问的相关概念：浏览器与服务器、WWW与万维网，IP地址与域名Web标准由一系