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

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


学前必看

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

一、 网页设计基本概念

(1) 网址

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

  • IP地址:为保证整个网络的正常运行,每个网络和每台主机在互联网上都有一个唯一的地址,称为IP地址。每个IP地址由地址类型、网络号与主机号三部分组成,通常用数字与小数点隔开表示。例如: 122.12.3.1462.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. 文字内容的颜色与网页的背景色对比要突出

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汝嫣兮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值