页设计基础

随着互联网技术的不断发展和普及，网络与现实生活的结合越来越紧密，网站代表了企业和个人的形象，网页如同个人的社交名片，不可或缺。越来越多的人开始学习和制作网页，更多的企业和个人把自己的“家”搬到网上。

应该说，设计精美的页面效果，需要用户掌握一定的技术，了解相关的知识，初步积累网页设计素养，同时还应该熟悉网站开发的流程。

熟悉网页设计概念

网站是互联网上一个信息小站，网页是互联网上显示的信息页面，如果说网站是一本书，那么网页就是生活中的一页书，是展示信息的最小单元。在网页中包含文字、图像、多媒体等内容，通过这些内容向浏览者传达一定的信息。

网页和网站

网站就是由网页组成的，网页是构成网站的基本元素，是承载各种应用的平台。一个网站如果没有网页，将是一个空站，如果只有域名和虚拟主机而没有制作任何网页的话，任何人都无法访问网站。

网页类型

网页可以分为多种类型，但是由于分类方法不同，也会有不同的类型，根据是否使用了服务器技术，人们把网页分为静态网页和动态网页。

网页构成

网页内可以包含很多内容，如文本、图像、动画等内容，这些信息构成了网页的基本内容，如图1.4所示。实际上网页包含的元素是很多的，有些元素可以直观地看到，而有的元素可能看不到，只有通过代码才能够看到。

HTML

HTML是一种语言，全称为Hypertext Markup Language，即超文本标识语言，是用于描述网页文档的一种工具。由HTML语言编写的文档，就是网页文档，这种文档可以被网页浏览器识别并解析，然后把网页效果呈现出来。如果没有浏览器的解析，我们所看到的网页文档由大量的HTML标签和文本信息组成，

学习DIV结构

DIV是<div>标签的习惯性称呼，因为设计师主要使用<div>标签构建网页的结构，使用CSS设计网页样式，故把网页设计简称为DIV+CSS布局。

在HTML文档中，页面会被划分为很多区域，不同区域显示不同的内容，如标题栏、广告位、导航条、新闻列表、正文显示区域、版权信息区域等。

学习CSS

有了网页结构和内容，还需要CSS来美化。CSS是一种语言，与HTML一样，是一种描述性语言，全称Cascading Style Sheet，可译为层叠样式表或级联样式表，它定义如何显示HTML标签，用于控制网页外观布局和样式设计。当网页缺少CSS时，是非常丑陋的，也不适合阅读和欣赏，

学习JavaScript

网页设计的动态化和智能化是一种大趋势，而如果要赶上这个趋势，JavaScript是一种脚本语言，但是它包含编程语言的大部分特性和功能，掌握JavaScript编程，你就能够驾驭网页动态特效的设计，就能够把网页设计得更聪明、更富有人性化。

JavaScript在页面特效中的应用

与HTML、CSS学习相比，JavaScript学习难度要大很多，当然一旦当你掌握了JavaScript，网页设计水平会达到一个新的高度，此时自己就不是一个简单的网页设计师，而应该是一个前端开发工程师的高级技术师。

网页设计任务

成功的设计作品一般都很艺术化。但艺术只是设计的手段，而并非设计的任务。设计的任务是要实现设计者的意图，而并非创造美。

网页设计的任务，是指设计者要表现的主题和实现的功能。站点的性质不同，设计的任务也不同。根据网站性质，可以把网页设计任务分为3类：

　资讯类网站，这类网站以内容为主，提供大量的信息，因此网页设计就需要注意页面的分割、结构的合理、页面的优化、网页的亲和力等问题。

　形象类网站，这类网站以宣传为主，网站规模较小，页面少，信息少，功能也较为简单，网页设计的主要任务是突出企业形象。因此对设计者的美工水平要求较高。

　应用类网站，这类网站在设计上要求较高，网页信息不求大而全，但是页面设计追求简洁、精致、大方，既要保证网站的可操作性，同时还要保证应用的灵活性，突出鲜明的应用特性。

网页设计原则

网页设计是有原则的，无论使用什么方法对网页元素进行组合，都必须要遵循基本原则，

　统一原则：就是指设计作品的整体性、一致性。设计作品的整体效果是至关重要的，在设计中切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。

　连贯原则：就是指要注意页面的相互关系。设计中应利用各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽，犹如一气呵成。

　分割原则：就是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。在信息量很多时为使观者能够看清楚，就要注意到将画面进行有效的分割。分割不仅是表现形式的需要。换个角度来讲，分割也可以被视为对于页面内容的一种分类归纳。

　对比原则：就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如，多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。

　和谐原则：就是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线条等的随意混合，那么作品将不但没有“生命感”，而且也根本无法实现视觉设计的传达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通，产生心灵的共鸣。这是设计能否成功的关键。

【Web前端开发 】html+css前端零基础入门教程 2022新 最全前端学习路线规划含前端框架项目（资料含源码+课件）_前端_编程入门_哔哩哔哩_bilibili

为久经沙场的打工人，我们肯定经历过一次次难忘的面试，这其中有愉快的交谈，也有尴尬的对话，甚至还会有崩溃的瞬间...可以说，人类的面试悲欢喜乐，并不相通！近日看到一位程序员网友发帖吐槽：前端面试太难了，问啥啥不会，都快面哭了。

即使隔着手机屏幕，都已经感觉到了这位小伙伴的“崩溃瞬间”。当面对面试官的连环问题而完全不知所云，无法解答的时候，可能那时的我们只求找个地缝钻进去吧。

其实，上面这位网友的尴尬遭遇，在面试的时候并不少见。很多情况下是由于我们的技术基础并不扎实，也没有形成自己的知识体系，导致我们在面对新行业、新领域的问题时，无法快速适应和解决。

就拿前端学科举例，随着新形势下企业对于前端的综合能力要求更加高，物联网、大数据可视化、云计算、VR/AR、5G等新技术接踵而至，现在的前端工程师更是承担了更多责任，而这些都取决于扎实的基础之上，没有系统的理论基础，没有成体系的技术架构，完全无法真正形成自己的技术竞争力。

因此推荐所有的前端er一门必备的课程《浠浠呀老师html+css前端入门教程，快乐学习，小白必看》。课程由浠浠呀老师为小白入门前端倾力打造的前端基础教程。是零基础小白入门前端开发的不二之选。

先来隆重介绍一下浠浠呀老师吧：

千锋教研院执行院长，千锋学科部总监，小狮视觉总监，前端培训届扛把子-千锋HTML5大前端学科创建者。 毕业于布列斯特普希金国立大学，曾任北京市属高校师资培训中心特邀讲师，多年担任北京市属高校师资培训工作。著有《HTML5从入门到精通》、《Jquery从入门到实战》、《PhotoShop CC实战入门》、《Unity虚拟现实开发实践》、《数据结构与算法（C语言篇）》、《Nginx 高性能 Web 服务器应用与实战（微课版）》等多本书籍，被500多所高校选用，深受好评。 深耕IT职业教育行业十多年，学生遍布各大互联网大厂，热爱教育事业。对于教学研究、教学管理工作有深刻的理解。

视频不同于以往传统的前端教学视频。摒弃了传统教程填鸭式课堂讲授的方式，用最直观的动画效果解释原理，用最真实的案例巩固知识。是一种全新的讲课方式，对小白友好，能让前端入门变得清晰简单。

课程从最基础开始，讲解无废话不反复，节奏明快，直击痛点，直截了当地输出干货。将复杂的前端问题拆解成简单的知识点。将前端知识点系统整理，结合实用案例，以讲解+动画的形式展现，让学生真正地看到即学到。

课程设计十分用心，认真分析了小白们的日常学习习惯，思维习惯，知识背景。甚至对每一个小白可能出现疑问的地方做了预判。每个案例都悉心打磨，简单而典型。用前期大量的教研时间换取学生们的接收知识时间。

本课程共包括2季，内容涵盖，HTML，CSS和HTML5、CSS3。本次发布视频第一季上半部分——HTML。课程共 50 集，16个部分，58个知识点，30个案例。