网页设计基础

不被定义的~wolf

已于 2023-11-24 20:34:34 修改

阅读量388

点赞数 3

分类专栏：前端设计文章标签：前端设计模式程序人生

于 2023-11-24 20:12:44 首次发布

本文链接：https://blog.csdn.net/lyh030105/article/details/134603309

版权

前端设计专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了网页设计的基础概念，包括网页和网站的区别，静态网页与动态网页的特点及其类型，以及HTML、CSS和JavaScript的学习任务。同时概述了网站开发流程，包括个人网站、应用项目和承包网站的开发步骤。

摘要由CSDN通过智能技术生成

一、熟悉网页设计概念

1、网页和网站

网页是互联网上的一个信息页面，通常包含文本、图像、视频、音频等多媒体元素。一个网页可以通过浏览器访问，并通常具有HTML（超文本标记语言）或XHTML（可扩展超文本标记语言）格式。网页是互联网的基本组成单位，成千上万的网页通过链接（hyperlink）互相连接，形成了庞大的万维网（World Wide Web）。

网站则是一系列相关网页的集合，通常围绕某个主题或目的进行组织和管理。网站可能包含多个网页，这些网页通过导航和链接互相连接。网站通常具有统一的设计风格和布局，以便于用户识别和浏览。网站可以通过域名（Domain Name）进行访问，例如“***”。

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

在浏览器地址栏中输入网站的网址后,会看到这个页面,通常称为主页(或首页)如图:
淘宝的首页

2、网页类型

2.1、静态网页

静态网页一般以.html或.htm位文件扩展名,通过网页设计工具一次性设计,只能够通过手工方式更新页面信息,信息更新速度相对比较缓慢.

注意：现在很多网站管理系统，或者大型网站都会提前把动态网页生成静态网页，以使提高网站须是与问网站。访问速度，我们称这种静态网页为伪静态。

静态网页每个网页都有一个固定的URL，且网页URL 以.htm、.html、shtml等常见形式为后缀，而不含有“？”。
网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件。
静态网页的内容相对稳定，因此容易被搜索引擎检索。
静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难。
静态网页的交互性较差，在功能方面有较大的限制。

2.2、动态网页

动态网页是通过网页脚本语言自动处理、自动更新的页面，例如，论坛中的帖子就是通过网站服务器运行程序，自动处理信息，按照流程更新网页。动态网页一般以.asp、.spsx、.php、或jsp为文件扩展名。

注意：常见网页中包含的动态效果，网页中嵌入了动画，这样的页面不能称为动态网页，可以称为特效网页，或者多媒体页面。

动态网页以数据库技术为基础，可以大大减少网站维护的工作量。
采用动态网页技术的网站可以实现更多的功能。例如，用户注册、用户登录、在线调查、用户管理、订单管理等。
动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。
动态网页中的“？”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“？”后面的内容，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

2.3、动态网页类型

目前实现动态网页的服务器技术主要包括CGl、ASP/ASPNET、PHP和JSP等.

CGi (Common Gateway Initerface)是一种通用的网关接口，是外部程序与网页服务器之间的标准编程接口。
ASP (Active Server Pages)是在CGI技术基础上由微软公司开发的一种快速、简便的服务器技术.
ASPNET是微软公司在ASP基础上推出的一种服务器技术，它全面采用效率较高的、面向对象的方法来创建动态Web应用程序。
PHP (Hypertext Preprocessor.超文本预处理器)是一种HTML内嵌式的语言，PHP与微软的ASP很相似，都是一种在服务器端执行的嵌入HTML文档的脚本语言，语言的风格类似于C语言，现在被很多的网站编程人员广泛地运用。
JSP (Java Server Pages)是Sun公司推出的网站开发技术，是将纯Java代码嵌入HTML中实现动态功能的一项技术。目前，JSP已经成为ASP的有力竞争者。

2.4、静态网页与动态网页比较

静态网页与动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少，如果网容功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之要采用动态网页技术来实现。

动态网页的程序都是在服务器端运行，最后把运行的结果返回到客户端浏览器上显示。而静态网页是事先制作好的，直接通过服务器传递给客户端浏览器浏览。

静态网页和动态网页主要根据网页制作的语言来区分。
静态网页使用语言：HTML.
动态网页使用语言：HTML+ASP、HTML+PHP或HTML+JSP等.

静态网页显示

动态网页显示

大街招聘

3、网页构成

组成网页内容的各种元素

组成网页的元素

1. 文本

文本顾名思义就是文字

2. 图像

有LOGO图标、Banner广告、图标、背景图等.

3. 动画

有SWF动画、GIF动画、脚本动画等.

4. 链接

主要是超链接,超链接是网站的灵魂.

5. 导航条
导航条是一组超链接，方便用户访问网站内部各个栏目。导航条可以是文字，也可以是图片，还可以使用Flash来制作。导航条可以显示多级菜单和下拉菜单效果。

6. 表格
表格在网页中的作用非常大，它可以用来布局网页，设计各种精美的网页效果，也可以用来组织和显示数据。

7. 表单
表单主要用来收集用户信息，实现浏览者与服务器之间的信息交互。

8. 其他元素
除了上面几个网页基本元素，在页面中可能还包括音频、视频、框架等各种构成元素。

二、网页设计学习任务

1、学习HTML

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

2、学习DIV结构

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

在HTML文档中，页面会被划分为很多区域，不同区域显示不同的内容，如标题栏、广告位、导航条、新闻列表、正文显示区域、版权信息区域等。这些区域一般都通过< div >标签进行分隔，如图所示通过不同颜色边框描出页面中不同区块的结构。

当然不仅仅用< div >标签构建网页结构,还需要

< h1 >…< h6 >标签,定义文档标题
< p >标签:定义文档中段落文本内容
< ul >、< ol >、< li >、等标签,定义信息列表结构,或者导航列表结构.
< table >、< tr >、< td >等标签,定义数据表格结构
< form >等标签,定义交互表单结构.
另外,还包括一些特殊语义的结构标签.

3、学习CSS

有了网页结构和内容，还需要CSS来美化。CSS是一种语言，与HTML一样，是一种描述性语言，全称Cascading Style Sheet，可译为层叠样式表或级联样式表，它定义如何显示HTML标签，用于控制网页外观布局和样式设计。

4、学习JavaScript

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

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

三、网页设计素养

1、网页设计任务

成功的设计作品一般都很艺术化。但艺术只是设计的手段，而并非设计的任务。设计的任务是要实现设计者的意图，而并非创造美。
网页设计的任务，是指设计者要表现的主题和实现的功能。站点的性质不同，设计的任务也不同。根据网站性质，可以把网页设计任务分为3类：

资讯类网站，这类网站以内容为主，提供大量的信息，因此网页设计就需要注意页面的分割、结构的合理、页面的优化、网页的亲和力等问题。
形象类网站，这类网站以宣传为主，网站规模较小，页面少，信息少，功能也较为简单，网页设计的主要任务是突出企业形象。因此对设计者的美工水平要求较高。
应用类网站，这类网站在设计上要求较高，网页信息不求大而全，但是页面设计追求简洁、精致、大方，既要保证网站的可操作性，同时还要保证应用的灵活性，突出鲜明的应用特性。

2、网页设计原则

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

统一原则：就是指设计作品的整体性、一致性。设计作品的整体效果是至关重要的，在设计中切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。
连贯原则：就是指要注意页面的相互关系。设计中应利用各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽，犹如一气呵成。
分割原则：就是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。在信息量很多时为使观者能够看清楚，就要注意到将画面进行有效的分割。分割不仅是表现形式的需要。换个角度来讲，分割也可以被视为对于页面内容的一种分类归纳。
对比原则：就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如，多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。
和谐原则：就是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线条等的随意混合，那么作品将不但没有“生命感”，而且也根本无法实现视觉设计的传达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通，产生心灵的共鸣。这是设计能否成功的关键。