photoshop网页设计 网页设计基础知识

网页设计基础知识1.1网站

网站是存储在网络服务器上的完整信息的集合。它包含一个或多个网页，这些网页以某种方式链接在一起，成为一个整体，用于描述一套完整的信息或达到预期的宣传效果。有的网站内容很多，比如新浪、搜狐等门户网站；有些网站只有几页，比如个人网站。

1.2网页

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

通常，“新浪”、“搜狐”、“网易”俗称“网站”。当我们访问这些网站时，最直接的访问是“网页”。这许多网页组成了整个网站，也就是网站。

1.3主页

主页是一个单独的网页，可以像一般网页一样存储各种信息，也是一个特殊的网页，作为整个网站的起点和总结点。例如，当一个浏览者输入搜狐网站地址“www.sohu.com”时，它出现在第一页，即搜狐网站的主页上。

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

通常情况下，网站为了对网站的信息进行查找和分类，会对信息进行分类，建立网页来放置网站信息的目录，即网站的首页。

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

1.4网页的表达1。静态网页:客户端和服务器之间没有交互

访问者只能被动地浏览网站构建者提供的网页内容。其特点:

除非网页设计者修改网页的内容，否则网页的内容不会改变。无法实现与浏览网页的用户的交互。信息流是单向的。

2.动态网页:客户端和服务器应该交互

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

2.1网站LOGO

1.通常为了体现其特点和内涵，会制作一个LOGO图像，放在网站的左上角或者其他显眼的位置。

2.公司网站经常使用公司标志或注册商标。

3.一个设计良好的LOGO可以给访问者留下深刻的印象，对网站和企业形象的提升起到非常重要的作用。

2.2导航栏

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

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

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

2.3横幅

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

在网页布局中，大多数网页将横幅放置在导航栏旁边或其他显眼的位置，以吸引访问者浏览。

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、Java、VB等语法的着色显示。

示例:升华文本3、电子编辑、编辑增强、超级编辑

4.2 Dreamweaver网页设计软件

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

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

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

另外，微软开发的FrontPage也是设计网页和管理网站的软件。除了所见即所得的编辑功能，还可以直接编辑HTML标签，让设计人员轻松编辑网页。

4.3 Photoshop图像处理软件

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

4.4 Flash动画设计软件

Flash是Macromedia开发的优秀的web动画开发软件，从简单的动画到复杂的交互式Web应用，让用户可以创作任何作品。通过添加图片、声音和视频，您可以使闪存应用媒体丰富多彩。

Flash被称为“最灵活的前台”。其独特的编译方法、跨平台能力和广泛的应用(软件、游戏、Web应用、多媒体娱乐等)。)使其成为日益重要的工具。

4.5烟花网页图像处理软件

Fireworks是Macromedia公司发布的专门为网络图形设计的图形编辑软件。Fireworks可以轻松生成小尺寸图形和GIF动画。

如果把Photoshop比作全能的图像处理大师，Fireworks就是网页图像处理的专家。它在矢量图形处理上有自己的独特性。

在Web应用方面，Fireworks是最早提供切片功能的图像处理软件。Fireworks支持在图像中绘制热点和直接生成网页文档，具有简单的GIF动画制作能力，支持将动画转换成Flash文件嵌入网络中播放。

5.1 CSS

CSS是级联样式表。CSS技术可以有效控制首页的布局、字体、颜色、背景等效果。

HTML=内容

CSS=演示文稿

CSS的好处:

CSS使页面加载更快；

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

CSS使设计人员能够以更低的成本更有效地修改设计。

CSS保持整个站点视觉一致；

5.2 Java

Java是网景开发的脚本语言，可以嵌入到HTML文件中。它是一种基于对象和事件的脚本语言，具有安全性能。

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

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

6.1网页布局

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

1.柱状结构

2.区域分布结构

3.无框架有限结构

列布局

区域分布式布局

无框架有限布局

6.2导航设计

1.导航是网页设计中不可缺少的基本元素之一。导航就像一个网站的路标，有了它你在浏览网站的时候就不会迷路了。导航链接每个页面，您可以通过单击导航中的超链接进入相应的页面。

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

3.一般来说，在网页的顶部或左侧设置导航栏是一种常见的方式。网站以上方文字为主导航，左侧树形菜单为副导航。

让用户知道当前位置；

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

5.你不需要浏览太多页面就能找到需要的信息，让用户快速简单的找到需要的信息，以最佳路径到达信息；

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

7.让用户清晰了解整个网站的结构概况，产生整体认知；

8.有序处理不同使用频率的信息。

7.1页面颜色匹配

设计好的网站一般都有色彩构成的倾向。以一种或几种相邻的颜色为主导因素，使网页呈现出全球和谐统一的色彩倾向。

使用颜色系统。首先，根据网页的主题，选择一种主色，然后调整透明度或饱和度，即增亮或加深颜色，混合出新的颜色。这样的页面看起来颜色一致，有层次感；一般来说，有三种颜色适合网页的标准颜色:蓝色、黄色/橙色和黑色/灰色/白色。

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

7.2写作艺术

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

7.3示例分析1。网站描述

这是一家航空公司空公司网站的主页。界面设计给人一种现代感，动作快，与公司风格一致。导航设计简洁利落，值得借鉴。

2.布局

网页布局采用通用的列结构。a是网站Logo所在的区域；b是网站主菜单所在的区域；c是搜索等公共功能所在的区域；d是网站的内容区，主要由文字和图片组成；e是版权信息所在的区域。

3.色匹配

网页为蓝色，象征天空空，与网站主题一致。网页主要使用两种蓝色，分别是“#14397D”和“1E95BD”。此外，网页文本的配色主要是白色和蓝色。