网站开发基础知识来啦~

互联网的访问过程

浏览器与服务器

• 服务器是提供内容信息的计算机
• 浏览器是访问者用于浏览网页的软件

www与万维网

• WWW、万维网和Web是同义词，是一个大型的由相互链接的文件所组成的集合体。
• 一个完整的WWW系统包括服务器、浏览器、HTML文件和网络。
• 浏览器向服务器发出对某个站点的请求，服务器接收到请求之后，发送响应给浏览器，浏览器显示出文件内容。
• 网站制作好之后，需要把网站传送到远程服务器上，这就要用到FTP服务，不属于WWW的范畴。

IP地址和域名

• IP地址是识别互联网上计算机和网络设备的标识。
• 域名是IP地址的符号化表示。域名通过域名解析系统（DNS）保证每台主机的域名与IP地址一一对应。在网络通信时由DNS进行域名与IP地址的转换。
• 域名的一般格式为 主机名.三级域名.二级域名.顶级域名

URL和HTTP

WWW上的地址通过URL指明，HTTP是用于浏览网站的基本约束或规则。

• URL是统一资源定位器，用来指明文件在互联网中的位置。

  • URL由协议名、服务器地址、文件路径以及文件名组成

  • 服务器地址可以是IP也可以是域名

• HTTP是浏览器和服务器之间传输文件时要遵循规则

  • HTTP采用的是客户端请求、服务器响应的工作模式

  • 工作模式==》

    • 客户端与服务器建立连接
    • 客户端向服务器发出请求
    • 服务器接受请求，发送响应
    • 客户端接收响应，与服务器断开连接

互联网的工作机制

• 客户端输入URL地址，DNS解析得到服务器IP地址，向被指向的服务器发送请求
• 服务器查找根据URL地址得到的文件
• 向浏览器发送响应
  • URL指向静态HTML文档的话，直接发给浏览器
  • HTML文档嵌入了JSP等程序的话，服务器运行完之后再发给浏览器
  • 如果运行的程序需要访问数据库，服务器要将查询指令发给数据库，执行查询操作，数据库将结果返回给服务器，服务器将结果数据嵌入页面，然后发给浏览器
• 浏览器解释HTML文档，在客户端屏幕上显示结果

网站设计中的基本概念

网站

• 互联网上根据一定规则使用HTML语言编写的用于展示内容的网页的集合。
• 由域名、网站空间、网页3部分组成
• 网站空间可以是专门的独立服务器或者租用的虚拟机，网站需要上传到服务器的网站空间中，才可以被浏览者访问

网页

• HTML语言编写的文本文件
• 网站中最主要的是主页，通常命名为index.html。主页中一般会给出网站的概述，包括网站的主要内容、各种信息的向导
• 根据功能分为静态网页和动态网页

静态网页

• 不需要数据库的支持，网站信息量很大时，查找网页内容比较困难，维护工作量大
• 内容相对稳定，容易被搜索引擎检索
• 交互性差，在功能方面有较大限制
• 实实在在保存在服务器的文件，每个网页都是一个独立的HTML文件

动态网页

• 网页文件中不止包含HTML标记，还包含需要在服务器上执行的程序代码
• 需要后台数据库与web服务器交互，利用数据库实现数据更新和查询服务，动态网页的扩展名一般是.jsp、.asp、.php
• 不是独立存在于服务器上，只有收到用户的请求时服务器才动态生成一个完整的页面，并以静态的形式返回给客户端浏览器

制作网站的标准和常用技术

标准

Web标准是W3C和其他标准化组织共同制定的，用来创建和解释基于Web的内容，可以使网上发布的文档向后兼容

结构

• 结构标准语言主要包括XHTML和XML

  • XML是一种能定义其他语言的语言，最初的目的是弥补HTML的不足，逐渐被用于网络数据的转换和描述

  • XHTML是在HTML4的基础上，用XML的规则对其进行扩展得到的

  • 现在HTML5是新一代的标准，将会逐渐取代XHTML

表现

• 表现标准语言包括CSS

  • 创建CSS的目的是用CSS取代HTML表格式布局、帧和其他表现的语言

  • 分离了外观与结构，可以使站点的访问以及维护更加容易

行为

• 行为标准主要包括对象模型（DOM）、ECMAScript等
  • DOM解决了Netscape公司和JavaScript技术和Microsoft公司的JavaScript技术的冲突，给 Web设计师和开发者一个标准的方法，让他们来访问站点中的数据、脚本和表现层对象
  • ECMAScript是ECMA制定的标准脚本语言

常用技术

制作静态网页

• HTML
  • 标记名和属性名称可以大写或者小写
  • 对标记的嵌套没有严格的规定
  • 属性可以不使用双引号
• XHTML
  • 标记名和属性名必须小写
  • 必须严格地使标记封闭，空元素（不成对）的标记也必须封闭
  • 属性值必须要使用双引号括起来
• CSS
  • 控制元素的尺寸、颜色和排版，定义如何显示HTML元素
• JavaScript
  • 一种解释性的、基于对象的脚本语言
  • 使网页变得生动，增强互动性
  • 实现了网页与用户之间实时、动态、交互的关系
• Bootstrap
  • 基于HTML、CSS、JavaScript的开源框架
  • 包含了功能强大的样式、组件和插件
  • 自Bootstrap3起，框架的设计采用了移动设备优先的样式
  • 支持响应式的布局设计，可以适应台式机、平板电脑和手机应用的Web页面开发

制作动态网页

• PHP
• ASP
• JSP
• 数据库
  • SQL Server
  • MySQL
  • Oracle
  • MongoDB
  • …

常用开发工具

• HTML文档编辑工具Notepad++
• 可视化网页开发工具Dreamweaver
• 专业的集成开发环境WebStorm
• 动画制作软件Flash
• 图像处理软件Fireworks和Photoshop
• VSCode

网站建设的流程

明确网站的定位

行业定位

• 娱乐站
• 新闻站
• 知识站
• 小说站
• 音乐站
• …
• 要求把网站目标用户精细化，确定主要的服务行业，定位好市场群体

风格定位

• 政府部门网站庄重严谨
• 娱乐网站活泼生动
• 商务网站贴近民俗
• 文化教育网站高雅大方、格调清新

设计定位

• 有组织性进行架构设计
• 符合搜索引擎友好性标准

推广定位

• 搜索引擎提交收录
• 定位网站与栏目关键词
• 提高搜索引擎网站排名
• 提高网站流量，增加网站点击率

确定网站的主题

理解站点功能

• 访问网站的人群特点
• 访问者访问网站的信息需求
• 访问者可能的访问频率
• 网站是否可能被访问者再次访问

形成鲜明主题

• 定位聚焦
• 内容精细

突出网站特色

• 网站题材可以是设计者感兴趣的领域
• 明确网站的主要功能，然后突出主要功能

网站的整体规划

目录结构设计

• 按照栏目内容建立子目录
• 每个目录下分别为图像文件创建一个子目录images
• 目录的层次不要太深，主要栏目最好能直接从首页到达
• 尽量使用意义明确的非中文目录

主题栏的设置

• 突出主题，把主题栏放在最明显的地方
• 设计一个’最近更新‘的栏目
• 栏目不要设置太多

版面布局

• 突出重点
• 平衡和谐
• 将网站标志、主菜单等最重要的模块放在突出的位置
• 其他页面的设计与首页保持相同的风格，并有返回首页的链接

网站标志

• 设计logo的原则是以简洁、符号化的视觉艺术展示网站的形象和理念

颜色和图像的运用

• 色彩要遵循和谐、均衡、重点突出的原则
• 适当添加图像
  • 切忌喧宾夺主
  • 保证图片质量的前提下，尽量缩小图片的大小，图片过大会影响网页的传输速度
  • 颜色较少的（256色以内）图像可处理为GIF格式，色彩比较丰富的图像最好处理为JPEG

收集资料与素材

设计制作网页

标题

• 体现网页设计的目的

背景

• 背景与整套页面的色彩相协调

内容

• 保证内容正确
• 注意内容数量
• 趣味性
• 突出个性，个人主页突出自己的性格兴趣、企业网页突出企业文化
• 分类，设置栏目
• 注意分层

多媒体元素

• 图像、声音、视频、动画等
• 考虑时间传输问题

网站标志

页眉和页脚

• 页眉：大多数会放置广告条或重要链接
• 页脚：标注网站所属的企事业单位的名称、地址，网站的版权以及电子信箱等

导航栏

• 页面左侧、右侧、顶部和底部

设计原则

• 内容第一，形式第二
• 重点信息要醒目突出
• 确保链接的有效性
• 流畅的访问速度
• 清洗的导航结构
• 良好的兼容性
• 真实有效的客服信息

网站的测试和发布

• 上传前的兼容性测试、链接测试
• 完成后，利用FTP工具将网站发布到所申请的主页服务器上
• 上传后的实地测试，发现问题及时修改，再上传、测试

网站的维护与推广

• 定期维护，定期更新，不断补充新内容
• 注册搜索引擎
• 友情链接
• 网上广告
• 广告邮件

建立站点

• 建立网站之前先建立站点
• 站点是某个网站的本地或远程存储位置，是存放网站所有网页以及各种素材的文件夹

阅读《HTML5+CSS3+JavaScript+Bootstrap网站开发实用技术（第3版）》部分笔记