大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

第一章：网页制作基础知识

1.1 Web概述

Web 也就是 www，是 World Wide Web 的缩写，也叫做万维网，是目前最流行、最方便的 Internet 信息服务。

1.1.1 Web服务的工作原理

WWW 服务采用客户端 / 服务器工作模式，客户端和服务器之间采用 超文本传输协议 HTTP 为通信协议。信息资源，包括文本、声音、图像和视频都以页面的形式组织、存储、显示。网页是一个文档，由 HTML 超文本标记语言 来实现。页面间采用 超文本链接 的方式链接成一个整体。
网页存放在 WWW 服务器中，客户端通过浏览器向 WWW 服务器发送 “请求” ， 服务器响应客户端的请求后，将特定页面发送到客户端，其间使用 HTTP 协议。

1.1.2 Web服务的相关概念

• 浏览器：
  是一种用于解读网页文件的软件，从服务器传送至客户端的页面经浏览器解释后，才能看到页面信息。
  目前浏览器都支持多媒体特性，可以看视频，播放声音。浏览器不仅可以浏览页面，还可以收发邮件，上网聊天等。
• 页面、网站和主页：
  页面是 Internet 上信息的组织形式。网站是若干主体相关的页面的集合。每一个网站都有一个入口点，主页（首页）。首页的名称是特定的，一般为 index.htm 、index.html、default.htm 等 。输入网址时，若没有指明具体文件，则默认是主页。
• HTTP 协议：
  超文本传输协议。是 WWW 服务中客户端和服务器之间采用的主要通信协议，从网络协议的层次结构上看，它属于应用层协议。
  此外，还有 HTTPS 协议，它是一种具有安全性的 SSL 加密传输协议，需要到 CA 申请证书。
• FTP 协议：
  网络上主机之间进行文件传输的用户级协议。
• HTML 语言：
  超文本标记语言。可以定义格式化的文本、色彩、图像与超链接等。
• URL：
  统一资源定位器，也就是页面地址。URL的具体组成如下：
  <协议类型>://<域名或 IP 地址>/路径及文件名
  eg：http://www.bilibili.com
  其中的 协议类型 可以是 HTTP 、FTP（文件传输协议）、TELNET（远程登录协议）等。 域名或 IP 地址 （bilibili.com）指明要访问的服务器， 路径及文件名 指明要访问的页面名称。
• 域名：
  相当于写信的地址，在互联网上有唯一性。

1.1.3 Web的主要特点

• Web 是图形化的和易于导航的：
  Web 是图形化的，它可以在一个页面上同时显示图形、音频、视频和文本。Web 是易于导航的，只要从一个链接跳到另一个链接，就可以进行浏览。
• Web 与平台无关：
  无论是什么系统平台，用户都可以访问 WWW
• Web 是分布式的：
  对于 Web ，没必要把信息都放在一起，信息可以放在不同的站点上。Web 的分布式特性可以使在物理上并不在一个站点的信息在逻辑上一体化。
• Web 是动态的：
  各个网站的信息提供者可以对站点进行更新。
• Web 是交互的：
  首先表现在超链接上，用户的浏览顺序完全由自己决定。另外通过 FORM 的形式可以从服务器方获得动态信息。

1.2 浏览器 / 服务器模式

在 B / S（浏览器/服务器模式） 体系结构系统中，用户通过浏览器向分布在网络上的许多服务器发出请求，服务器对浏览器的请求进行处理，将用户所需信息返回到浏览器。

• 特点： 分布性强、维护方便、开发简单、共享性强、总体拥有成本低。
• 缺点： 数据安全性问题、对服务器要求过高、数据传输速度慢、软件的个性化特点降低、难以实现传统模式下的特殊服务功能要求。比如通过浏览器进行大量的数据输入或进行填表的应答、专用性打印输出都比较困难和不便。而且难以实现复杂的应用构造。

1.3 网页与网站

WebPage（网页） 是一个实实在在的文件，储存在被访问的 Web服务器上，通常以 HTML 文件来表现。网站是网页的集合，是用来进行网络交流、信息共享的平台。

1.3.1 网页的基本要素

文字&图片是构成网页的两个基本要素。另外还有表单、导航、动画、广告等。

• 文字：
  文字是构成网页的最基本要素，对于大多数浏览器来说，文字都是可以显示的，无需任何外部程序或模块。由于用户电脑配置不同，所以网页中能使用的字体只有几种通用的。
• 图片：
  图像的格式有很多种，但是并不是所有图像格式都可以在网页中显示，只有少数几种图像格式可以应用到网页中。
• 表单：
  是功能型网站中经常使用的元素，是网站交互中最重要的组成部分之一。如搜索框、用户注册都会用到表单。
  网页中的表单是用来搜集用户信息、帮助用户进行功能性控制的元素。
• Logo：
  大家都懂的就不说了。
• 导航：
  要放在醒目位置，浏览者会通过导航栏直观的了解网站的内容和信息分类方式。
• 动画：
  目前网页中应用的动画主要有两种，GIF 和 SWF（即flash动画）。GIF动画效果单一，SWF动画具有良好的交互效果。
• 广告：
  常见的有弹出式广告、浮动广告和页面广告和一些隐性的广告。

1.3.2 静态网页和动态网页

• 静态网页：
  静态网页是标准的 HTML 文件，扩展名为 .htm 或 .html ，注意：静态网页的呈现形式不一定是静态的，可以包含翻转图像、GIF 动画、Flash 动画等。 所谓静态，是指在发送给浏览器之前不再进行修改。

  静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。 静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。—— 百度百科

  静态网页的内容相对稳定，因此容易被搜索引擎检索，页面浏览速度迅速，过程无需连接数据库，开启页面速度快于动态页面。 —— 简书

• 动态网页：
  根据采用 Web 技术的不同，动态网页的文件扩展名也不同。

  动态网页是一个对所有动态生成与动态更新的网页的统称。 与传统的静态网页相反，它会因为变量的改变而产生不同的网页。 这既可能是服务器端生成的网页，也可能是用户端生成的网页，或是两者的混合。服务器端的动态网页是指服务器通过应用程式伺服器处理服务器端脚本而生成的网页。—— Wiki

1.3.3 网页与网站的关系

• 网页之间是独立的，通过超链接联系。
• 网页是网站的基本信息单位。
• 网页又由许多 HTML 文件集合而成。
• 网站可以由任意个网页集合而成。

1.3.4 网站与Internet

Internet 起源于美国国防部高级研究计划管理局建立的阿帕网。网站是指在 Internet 上根据一定规则，使用网页制作工具制作的用于展示特定内容的相关网页的集合。

1.3.5 网站的组成

网站主要由域名（网址）、网站空间、网站源程序构成。

• 域名：
  表示某一台计算机或计算机组的名称，目前已成为互联网的品牌、网上商标保护必备的产品之一。
• 网站空间（Webhost）：
  也称为虚拟主机空间，通常企业制作网站都不会自己架设服务器，而是选择虚拟主机空间作为放置网站内容的网站空间。
• 网站源程序：
  包括用户浏览网站看到的页面和网站后台管理程序，现在一般都是使用成熟的网站管理系统。

1.3.6 网站的参数

衡量一个网站的性能通常从网站空间大小、网站位置、网速、网站软件配置、网站提供服务等方面考虑。 最直接的标准是网站的真实流量。
建设或经营一个网站要考虑一下几个因素：

1. 客户服务群体
2. 内容方向和性质
3. 功能描述和结构分析
4. 用户体验
5. 盈利方式
6. 未来发展方向

1.4 网页设计的基本原则

网页设计的真正意图在于把适合的信息传达给适合的观众。

1.4.1 明确建立网站的目标和用户需求

根据消费者的需求、市场状况、企业自身的情况进行综合分析，牢记以用户为核心，而不是以界面为中心进行规划。

需要考虑的问题：

• 建设网站的目的是什么？
• 为谁提供服务和产品？
• 企业能提供什么样的服务和产品？
• 目标消费者和受众的特点是什么？
• 企业的产品和服务适合什么样的表现方式 / 风格？

1.4.2 总体设计方案要做到主题鲜明

网页的设计无论简单或复杂，都要做到主题突出，调动一切手段表现网站的个性和特点，增加吸引力。

1.4.3 网站的版式设计

网页设计作为一种视觉语言，要讲究编排和布局，讲究整体布局的合理性，特别要注意网页之间的有机联系。

1.4.4 网页形式与内容相统一

充分运用点、线、面，相互穿插形成最佳的页面效果。 （听起来有点像画画？）

1.4.5 三维空间的构成

网络上的三维空间是一个假想空间，这种空间关系借助动静变化、图像比例关系、图像文字叠加等因素表现出来。

1.4.6 多媒体功能的使用

网络资源的优势之一是多媒体功能。但要注意，由于网络带宽的限制，在使用多媒体形式表现网络内容时应考虑客户端的传输速度。

1.4.7 网站测试和改进

通过模拟用户询问网站的过程来发现问题，但要注意让用户参与测试。

1.4.8 合理运用新技术

如果不是介绍网络技术的专业站点，切忌将网站变成一个制作网页的技术展台，用户方便快捷的得到信息是最重要的。

技术专题：屏幕分辨率与网页设计

屏幕分辨率低时，在屏幕上显示的项目少，但尺寸比较大。在屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细。在设计网页的时候，布局的难点在于用户各自的分辨率是不同的。
由于浏览器本身占了一定尺寸 （如水平滚动条是22像素左右），所以网页尺寸要小于屏幕分辨率。
设计网页时，网页长度原则上不超过3屏，宽不超过1屏。

1.5 网站制作流程

1.5.1 选择主题

如果是个人网站，那么网页的设计可以围绕个性化来进行；如果是企业网站，则应立足于企业形象展示。
在主题确定后，可以搜索资料进行组织，准备的越充分，越有利于下一步网站栏目的规划。

1.5.2 规划网站栏目和目录结构

网站栏目实际上是一个网站内容的大纲索引，在规划时要注意以下几点：

1. 对搜集到的资料进行分类，并建立专门的栏目。
2. 在创建网站目录结构时，不要将所有文件都存放在根目录下，而是按照网站专栏来建立。如网站根目录下都有一个 Images 目录，不要把图片都存在这个目录下，这个只用于存主页的图片，其他图片存到对应专栏的 Images 目录下。
3. 在命名目录文件时要使用简短的英文，文件名小于8个字符，一律小写。同一类型的文件应以序号区分。

1.5.3 设计网页布局

最好先用笔画草图，包括 logo，广告栏、导航条、文本、图片、表格。再通过网页制作工具（这里博主用的 Dreamweaver）做成一个简略的网页。
多阅读平面设计类书籍有利于提高自己的版面布局水准。

1.5.4 整合网页内容

将收集好的素材落实为网站各种元素（这里可能需要用到图形处理工具），完成制作。

1.6 网站的色彩选择与搭配

1.6.1 选择色彩

若果是公司网站，最好沿用公司的标准色。一般来说，网站的标准色不能超过3种

（入坑的第一款音游，以紫色为主题，充满科技感）

（腾讯QQ以蓝色简约的风格为主）

1.6.2 搭配色彩

除主色调外，搭配不同的辅助色会有不同的效果。

第一章总结：

第一章详细介绍了网页制作的基础知识，包括基本原理、网络术语、网页的组成元素、制作流程和注意事项。由于这本书出版时间非常早，有些知识可能早已过时，或者有些新知识没有提及，以后会不断更新完善。博主为初学者，如果有错误请及时指出，谢谢~