关于网站设计的基础知识

1.1网站

网站是存储在web服务器上的完整信息的集合。它包含一个或多个网页，这些网页以一定的方式链接在一起形成一个整体，用来描述一套完整的信息或达到某种想要的宣传效果。有的网站内容很多，比如知、乎豆瓣、网易等门户网站；有些网站只有几页，比如个人网站。

1.2网页

网页实际上是一个可以包含文本、图像、声音和视频信息的文件。一个网页可以被视为一个单一的实体和一个网站的元素。

我们通常会听说知乎、豆瓣、网易这些俗称的网站。当我们访问这些网站时，最直接的入口就是“网页”。很多网页组成了整个网站。

1.3主页

主页是一个独立的网页，可以像一般网页一样存储各种信息。也是一个特殊的网页，作为整个网站的起点和总结点。例如，当访问者在百度上输入网址中为科技的“www.lonwin.net”时，它将出现在第一页，即lonwin.net的主页。

问题:主页和首页有区别吗？

通常情况下，网站为了方便访问者查找和分类网站的信息，会对信息进行分类，并建立网页来放置网站信息的目录，也就是网站的首页。

并不是所有的网站都把首页设为主页。有些网站喜欢在首页放一个词条动画和首页链接。访问者需要点击主页链接才能进入主页。

1.4网页的表达

(1)静态网页:客户端和服务器端没有交互。

访问者只能被动地浏览网站建设者提供的网页内容。它的特点是网页内容不会改变，除非网页设计者修改。无法与浏览网页的用户互动。信息流动是单向的。

(2)动态网页:客户端和服务器端必须交互。

动态网页是指浏览器可以与服务器数据库实时交换数据的交互式网页，而不是带有动画和其他效果的动态网页。使用动态Web技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等。信息的流动是双向的。

2.1建设网站标志

（1）一般情况下，为了体现网站自身的特点和内涵，网站会制作一个LOGO图像，并将其放置在网站左上角或其他显著位置。

（2）企业网使用企业标志或者注册商标。

（3）一个精心设计的LOGO能给浏览者留下深刻印象，对提升网站和企业形象起到非常重要的作用。

2.2导航栏

导航栏是网页的重要元素。设计的目的是将网站中的信息进行分类，然后放到网页上，帮助访问者快速找到网站中的信息。

导航栏有多种形式，包括文本导航栏、图像导航栏和动画导航栏。

用一些特殊技术(如Flash、javascript、CSS)制作的导航栏也可以有下拉菜单的功能。

2.3横幅

横幅在中文里是横幅的意思。Banner的内容通常是网页中的广告。

在网页的布局上，大部分网页都会在导航栏旁边或者其他显眼的位置放置Banner来吸引访客。

2.4内容部分

网页的内容部分是整个页面不可分割的一部分。

设计者可以根据本页面的栏目需求设计不同的栏目。每个部分可以有一个标题内容，每个内容部分主要显示不同的文本信息。

2.5版或版权部分结束

结束，页面的最低部分。

该部分通常包含网页的版权信息以及网页所有者和网站建设公司设计者的联系方式。

有些网站还把他们的友情链接和一些附带的导航栏放在这里。

3.1文本

网页中的信息主要是文本。与图片相比，文字不能像图片那样迅速吸引访问者的注意力，但可以准确地表达信息的内容和意义。

3.2图片

用户网页中使用的图片格式主要有GIF、JPEG和PNG，其中GIF和JPEG是使用最广泛的格式。

3.3 超链接

超链接本质上是网页的一部分，是允许用户连接到其他网页或网站的元素。

超链接是从网页到目标的链接，可以是另一个网页、同一网页上的不同位置、图片、邮箱、文件，甚至是应用程序。

3.4 动画

为了更有效地吸引访问者的注意力，许多网站广告都是动画的。

网页中的动画有两种类型：GIF 动画和 Flash 动画。  GIF 动画只能有 256 种颜色，主要用于简单的动画和图标。

3.5 声音和视频

它是声音多媒体网页的重要组成部分。 网络上使用的声音文件有多种格式，例如 MIDI、WAV、MP3 和 AIF。

许多浏览器无需插件即可支持 MIDI、WAV、AIF 文件，而 MP3 和 RM 文件则需要专门的浏览器才能播放。

3.6表格

网页中的表格用于控制网页中信息的布局。

包括两个方面:一是文本、图像等表格数据以行列形式的布局；其次，表格可用于精确控制网页中各种网页元素的位置。

3.7 表格

网页中的表单通常用于在浏览器端接受用户输入，然后将该信息发送到网站建设公司设计师设置的目的地。 此目标可以是文本文件、网页、电子邮件或服务器端应用程序。

表单通常用于收集联系信息、接受用户请求、获得反馈、设置留言簿、将访问者注册为会员以及以会员身份登录网站。

3.8 其他常见元素

包括悬停按钮、Java 效果、ActiveX 和其他效果。 它们不仅装饰网页，使网页更加生动有趣，而且在在线娱乐和电子商务中也发挥着重要作用。

4.1 文本编辑器

您不仅可以在记事本中编写 HTML 代码，任何文本编辑器也可以编写 HTML。 如写字板、Word等。但必须存储。 或 html。 保存为.htm 格式。

一些文本编辑器专门提供许多有用的功能，如网页创作、编程等，并支持HTML、CSS、PHP、ASP、Perl、C/C、Java、javascript、VBScript等语法着色显示。

示例：Sublime text3、EmEditor、EditPlus、UltraEdit

4.2 Dreamweaver网页设计软件

这是使用最广泛的网页编辑工具之一。

Dreamweaver是Macromedia推出的网页编辑工具。

它是一个所见即所得的fckeditor，支持最新的DHTML(动态HTML)和CSS标准。使用多种先进技术，您可以快速高效地创建具有表现力和动态效果的网页，这使得创建网页的过程非常简单。

此外，微软开发的FrontPage也是一款设计网页和管理网站的软件。除了所见即所得的编辑功能，还可以直接编辑HTML标签，方便设计师编辑网页。

4.3 Photoshop图像处理软件

Photoshop是Adobe推出的一款功能强大的平面图像处理软件。Photoshop广泛应用于图像编辑、桌面出版、网页图像编辑、广告设计、婚纱摄影等行业。它已经成为许多涉及图像处理的行业事实上的标准。

4.4 Flash动画设计软件

Flash是Macromedia开发的一款优秀的网络动画开发软件。 它使用户能够创建从简单的动画到复杂的交互式 Web 应用程序的任何内容。 您可以通过添加图片、声音和视频来丰富您的 Flash 应用程序媒体。

Flash以其独特的编译方式、跨平台能力和广泛的应用（软件、游戏、Web应用、多媒体娱乐等）被称为“最灵活的前台”  ，使其成为越来越重要的工具。

4.5 Fireworks 网页图像处理软件

Fireworks是Macromedia公司推出的一款专门用于绘制网络图的图形编辑软件。  Fireworks 不仅可以轻松创建更小的图形和动画 GIF。

在处理矢量图形方面独树一帜。

Fireworks 是第一个在 Web 应用程序中提供切片功能的图像处理软件。  Fireworks 支持在图像中绘制热点和直接生成 Web 文档，具有简单的 GIF 动画功能。 同时，Fireworks 支持将动画转换为 Flash 文件并嵌入网络中进行播放。

5.1 CSS

即CSS CascadingStyle样式表。在网页制作中使用CSS技术，可以有效、准确地控制页面的布局、字体、颜色、背景等效果。

HTML=内容

CSS=演示

CSS的优势:

使CSS页面加载更快；

CSS可以降低网站的流量成本；

让CSS设计师在修改设计时有更高的效率和更低的成本；

使整个网站在视觉上与CSS保持一致。

5.2 javascript

javascript 是由 Netscape 开发的一种脚本语言，可以嵌入到 HTML 文件中。 它是一种基于对象和事件驱动的安全脚本语言。

在 HTML 的基础上，可以使用 javascript 开发交互式网页，无需通过网络来回传输数据即可响应用户需求事件。

简单来说，当用户输入一条信息时，该信息不需要先送到服务器处理再发回，而是可以直接由客户端程序处理。

6.1网页布局

网页布局是网页设计的基础。目前，网页的布局可以分为以下几种类型:

(1)柱状结构

(2)区域分布式结构

(3)无框架结构

(4)栏目布局

(5)区域分布式布局

(6)无框架布局

6.2 导航设计

(1)导航是网页设计中不可缺少的基本元素之一。 导航就像网站的路标。 有了它，您在浏览网站时就不会“迷路”。 要链接每个页面，只需单击导航中的超链接即可到达相应页面。

(2)导航设计的好坏决定了用户能否方便地使用网站。 导航设计要直观清晰，最大限度地为用户考虑，尽量让页面切换更方便。 导航设计要符合整个网站的风格和要求，不同的网站会使用不同的导航方式。

(3)一般来说，将导航栏设置在网页的顶部或左侧是一种常见的方式。 网站顶部的文字用作主导航，左侧的树形菜单用作辅助导航。让用户知道当前位置；

(4)让用户根据自己走过的路，确定下一步的方向和路径；

(5)需浏览过多页面即可找到所需信息，让用户快速轻松地找到所需信息并到达最佳路径；

(6)当用户在使用网站时遇到困难，可以想办法解决困难，找到最佳路径；

(7) 让用户对整个网站的结构有一个清晰的认识，从而营造一种整体感；

(8)对不同频率的信息进行分类。

7.1页面配色。

精心设计的网站有一种倾向，有一个总体的色调组成。以一种或几种相邻的颜色为主导，使整个页面呈现出和谐统一的色彩倾向。

使用颜色系统。根据页面的主题，选择一个主色，然后调整饱和度或透明度，即颜色浅或深，赋予新的颜色。这个页面看起来是彩色的，有层次的。一般来说，有三种主要的颜色适合网页的标准颜色：蓝色，黄色，橙色和黑色，灰色，白色。

使用对比色。可以充分利用对比色来进行设计，注意灰色调的调和。这类作品的书页色彩斑斓。

7.2文学和艺术。

一般来说，文字占据了大部分版面空间，是网页信息的主要载体。文字处理好不好，关系到网页设计的成败。字体的选择、字号的大小、文字的颜色、行与行之间的距离、段落的安排，都需要仔细考虑。好的排版会给网页增添很多色彩。