为了学习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）色彩搭配原则

特色鲜明

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

搭配合理

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

讲究艺术性

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

（2）网页色彩搭配方法

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

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

网页设计初了解-基础知识篇相关推荐

HTML5网页设计样式-CSS基础知识
CSS概念 CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页内容的外观(样式),并允许将样式信息和网页内容分离的一种标记语言. HTML与CSS的关系:&quo ...
SP 短信开发-基础知识篇
SP 短信开发-基础知识篇很土的话题,但是最近帮朋友做这个东西,所以写点东西出来给初学者参考. 一.准备资料 SP开发资料网站上有很多,但是主要是以下几个文档: 1.MISC1.6 SP订购通知接口 ...
Hadoop学习笔记—15.HBase框架学习（基础知识篇）
Hadoop学习笔记-15.HBase框架学习(基础知识篇) HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问.HBase的目标是存储并处理大型的数据.HBase ...
Android camera（4）---Android Camera开发之基础知识篇
Android Camera开发之基础知识篇转自:https://blog.csdn.net/feiduclear_up/article/details/51968975#jump5 概述 Andr ...
测试岗位面试前复习之【测试基础知识篇】
测试基础知识篇一.app测试相关 1.android与ios的app测试的区别: 2.app测试和web测试的重点: 3.性能测试考量的指标: 4.app的性能测试,需要重点关注哪些方面? 5.站在 ...
基金投资从入门到精通之一：基础知识篇
第一篇基础知识篇第一节认识基金基金投资入门系列--基础知识 1.什么是证券投资基金? 通俗地说,证券投资基金是通过汇集众多投资者的资金,交给银行保管,由专业的基金管理公司负责投资于股 ...
秋招准备-基础知识篇（正更）
秋招准备-基础知识篇深度学习介绍优化器以及如何优化.包括SGD, Momentum,Adagrad,RMSProp,Adam. 欠拟合和过拟合.解决方法. 损失函数.BCE loss和softma ...
工商管理学计算机应用基础题,计算机应用基础全国网考选择题库（计算机基础知识篇）.pdf...
计算机应用基础全国网考选择题库(计算机基础知识篇).pdf 1 2010 年计算机应用基础全国网考选择题库(计算机基础知识篇) (注计算机应用基础题库已变更,原教材附带蓝色光盘内选择题库不全.) 1. ...
计算机基础知识题库选择题,计算机基础知识篇选择题库
计算机基础知识篇选择题库 (6页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 15.9 积分计算机基础知识篇选择题库1.微型计算机的性能指标不包括___ ...

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

学前必看

文章目录

一、网页设计基本概念

（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） 网址

（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）网址

（2）浏览器

（3）网页

（4）网站

（5）首页

二、常见网站类型

（1）咨讯门户类网站

（2）企业品牌类网站

（3）交易类网站

（4）功能类网站

（5）交互类网站

三、网页基本结构

（1）网站Logo

（2）网站名称

（3）导航菜单

（5）网页正文

（6）网页页脚

四、网页基本构成元素

（1）文本

（2）图像

（3）超级链接

（4）导航栏

（5）动画

（6）表格

（7）框架

（8）表单

五、网页配色

（1）色彩搭配原则

（2）网页色彩搭配方法