网页设计初了解-基础知识篇

朴灿烈づ我的快乐病毒、 2023-07-22 09:11 71阅读 0赞

为了学习GitHub去下载Git，结果n次下载失败，心态小崩，今天不学编程了，转hTML5换换心情，按大佬们教的，学了一段时间的枯燥编程要换个方向换换口味，不然学习效率会变低。这一篇是基础知识。

--------------------

# 学前必看 #

对于网页设计，你要明确学习的方向，因为网页是分为静态网页和动态两种的，这种静态动态并不是指网页有无动画，而是指一种交互性，静态网页只能单纯的进行浏览，不能发表评论等交互操作。而动态网页，是取决于由用户提供的参数，并根据存储在数据库中的网站上的数据中创建的页面。因此每个人所看到的内容都是不一样的。  
对于不同的网页，所使用的语言也不一样的。例如我现在以HTML5入门静态网页，就专攻HTML5，就算以后会转向PHP做动态网页，也届时再去学习，两头兼顾的方法并不适合每个人，踏踏实实学才是真。

### 文章目录 ###

*  学前必看
 *  一、 网页设计基本概念
 *   *  （1） 网址
     *  （2） 浏览器
     *  （3） 网页
     *  （4） 网站
     *  （5） 首页
 *  二、 常见网站类型
 *   *  （1） 咨讯门户类网站
     *  （2） 企业品牌类网站
     *  （3） 交易类网站
     *  （4） 功能类网站
     *  （5） 交互类网站
 *  三、 网页基本结构
 *   *  （1） 网站Logo
     *  （2） 网站名称
     *  （3） 导航菜单
     *  （4） Banner （横幅广告）
     *  （5） 网页正文
     *  （6） 网页页脚
 *  四、 网页基本构成元素
 *   *  （1） 文本
     *  （2） 图像
     *  （3） 超级链接
     *  （4） 导航栏
     *  （5） 动画
     *  （6） 表格
     *  （7） 框架
     *  （8） 表单
 *  五、 网页配色
 *   *  （1） 色彩搭配原则
     *  （2） 网页色彩搭配方法

# 一、 网页设计基本概念 #

## （1） 网址 ##

网址就是文件在互联网上的网址。互联网是个虚拟的系统，所有文件或网络的位置就用网址表示。在互联网上常用来表示网址的是==“IP”地址==、域名和“URL”。

*  **IP地址**：为保证整个网络的正常运行，每个网络和每台主机在互联网上都有一个唯一的地址，称为IP地址。每个IP地址由地址类型、网络号与主机号三部分组成，通常用数字与小数点隔开表示。例如： **122.12.3.14**； **62.5.48.4**等。
 *  **域名地址**：以层次化表示，一般由主机名、机构名、网络名和最高层域名组成。例如：中国清华大学的域名地址为：www.tsinghua.edu.cn，它的四部分分别代表WWW服务器、校名即机构名、网络名（edu为教育部门网络）、国民（cn代表中国）。
 *  **URL**：要定位某一个文件在互联网上的位置就必须使用URL，也就是统一资源定位器（Uniform Resource Locator）的格式由下列三部分组成：  
    i. 第一部分就是文件打开的协议（或称为服务模式）；  
    ii. 第二部分是存有文件的主机IP地址（有时也包括端口号）；  
    iii. 第三部分是文件的具体地址，如路径、目录和文件名等。

## （2） 浏览器 ##

浏览器是用来显示在万维网或局域网等内的文字、图像及其他信息的软件，它还可以让用户与这些文件进行交互操作。浏览器是电脑上网时经常使用到的应用软件，浏览器正是Internet时代的产物，随着电脑操作系统的普及、Internet的全球连接及人们对信息需求的爆炸式增长，为浏览器的诞生和兴起提供了强大的动力，同时它也标志着互联网时代的来临  
**个人建议，学Web前端的，计算机上应配有IE浏览器、Edge浏览器、谷歌浏览器、火狐浏览器这四类基础浏览器，IE的话是为了验证网页的兼容性，老师教的要要的，不确定过时与否，推荐安装IE Tasker。**

## （3） 网页 ##

网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的。网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。  
**归根结底，网页就是一个文本文档，但是它又能超越文本来展示内容，因此叫超文本。**

## （4） 网站 ##

网站(Website)是指**在因特网上根据一定的规则，使用HTML（标准通用标记语言）等工具制作的用于展示特定内容相关网页的集合**。简单地说，网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。网站是在互联网上拥有域名或地址并提供一定网络服务的主机，是存储文件的空间，以服务器为载体。人们可通过浏览器等进行访问、查找文件，也可通过远程文件传输(FTP)方式上传、下载网站文件。  
**网站的制作牵扯到太多技术，静态网页和动态网页的制作，数据库等等。路漫漫其修远兮。**

## （5） 首页 ##

网站首页是一个网站的入口网页，故往往会被编辑得易于了解该网站，并引导互联网用户浏览网站其他部分的内容。这部分内容一般被认为是一个目录性质的内容。大多数作为首页的文件名是index、default、main或portal加上扩展名。  
例如index.html、 index.aspx、 index.php、 index.asp 。

# 二、 常见网站类型 #

## （1） 咨讯门户类网站 ##

以新闻、供求、产品、展会、行业导航、招聘为主的集成式网站，如新浪、腾讯新闻等。

## （2） 企业品牌类网站 ##

企业网站是企业在互联网上进行网络营销和形象宣传的平台，相当于企业的网络名片。例如Microsoft官网、Oracle官网等等。

## （3） 交易类网站 ##

提供网络交易的站点，足不出户即可购买到你所喜欢的商品。有B2B、B2C、C2C、C2B四种模式，像我们常用的淘宝、京东、苏宁都属于交易类网站。

## （4） 功能类网站 ##

网站提供某一种或者几种功能，比如站长工具、电话手机号码查询、物流信息查询、火车票购买等。功能性网站以实现某一种或者几种功能为主要服务内容。用户也是为了实现某一种功能来浏览该网站。

## （5） 交互类网站 ##

这类网站也较为常见，像论坛这类能够提供用户进行信息交流的站点都是交互类网站，CSDN就是一个交互类网站。

# 三、 网页基本结构 #

## （1） 网站Logo ##

LOGO是徽标或者商标的外语缩写，起到对徽标拥有公司的识别和推广的作用，通过形象的徽标可以让消费者记住公司主体和品牌文化。网络中的徽标主要是各个网站用来与其它网站链接的图形标志，代表一个网站或网站的一个板块。另外，LOGO还是一种早期的计算机编程语言，也是一种与自然语言非常接近的编程语言，它通过“绘图”的方式来学习编程，对初学者特别是儿童进行寓教于乐的教学方式。

## （2） 网站名称 ##

网站名称类似于电视台的名称，网站名称一般在网站首页上，起到区别网站的目的。

## （3） 导航菜单 ##

导航菜单是指位于页面顶部或者侧边区域的，也称之为导航栏。在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接站点或者软件内的各个页面的作用。

## （4） Banner （横幅广告） ##

横幅广告（Banner Ad.）是网络广告最早采用的形式，也是目前最常见的形式。横幅广告又称旗帜广告，它是横跨于网页上的矩形公告牌，当用户点击这些横幅的时候，通常可以链接到广告主的网页。

## （5） 网页正文 ##

即网页的主体内容。

## （6） 网页页脚 ##

网页页脚是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

# 四、 网页基本构成元素 #

## （1） 文本 ##

文本是网页上最重要的信息载体和交流工具，网页中的主要信息一般都以文本形式为主。

## （2） 图像 ##

图像元素在网页中具有提供信息并展示直观形象的作用。  
而图像也分为两种：

*  静态图像：在页面中可能是光栅图形或矢量图形。通常为GIF，JPEG或PNG；或矢量格式，如SVG或Flash。
 *  动画图像：通常动画为GIF和SVG。  
    **对的，GIF并不一定要是动画，它也可以不动！**

## （3） 超级链接 ##

超链接是从一个网页指向另一个目的端的链接，超链界的目的端可以是网页，也可以是图片、电子邮件地址、文件和程序等（标准的“换页”反应。分为URL、URI、URN），是网页重要的构成元素。

## （4） 导航栏 ##

导航栏在网页中是一组超链接，其连接的目的端是网页中重要的页面。

## （5） 动画 ##

动画（flash动画）在网页中的作用是有效地吸引访问者更多的注意。

## （6） 表格 ##

表格是在网页中用来控制面业信息的布局方式。

## （7） 框架 ##

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

## （8） 表单 ##

表单可以用来在网页中发送数据，特别是经常被用在联系表单-用户输入信息然后发送到Email中。

# 五、 网页配色 #

## （1） 色彩搭配原则 ##

1.  特色鲜明

一个网站的用色必须要有自己独特的风格，这样才能显得个性鲜明，给浏览者留下深刻的印象。例如顺丰官网的黑红配色就给人一种稳重的商务感。

1.  搭配合理

因为网页是设计给人看的，因此在遵从艺术规律的同时，还考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。

1.  讲究艺术性

网站设计也是一种艺术创作，如何抓住浏览者的目光，需要进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站。

## （2） 网页色彩搭配方法 ##

1.  同种色彩搭配  
    同一色相的色彩进行变化统一，形成不同明暗层次的色彩，是只有明度变化的配色，给人以亲和感。尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。
2.  邻近色  
    色环上相邻色变化统一配色，能给人以融合、亲近感，可以构成平静、调和而又有变化的色彩效果。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。
3.  对比色彩搭配  
    不同相貌的色彩被运用到一起，会产生丰富的色彩效果，能够引起人们的关注。通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。
4.  暖色色彩搭配  
    以红、橙、黄等暖色为主调的色彩搭配。这种搭配能给人以热烈、温暖、激情等感觉。
5.  冷色色彩搭配  
    冷色调是以蓝、绿等冷色为主色调的色彩搭配。这种搭配能给人以清凉、冷静、亲和的印象。
6.  有主色的混合色彩搭配
7.  文字内容的颜色与网页的背景色对比要突出

--------------------

有问题欢迎指出纠正。  
转载注明出处。