浙江铃声推荐联盟

网页设计与制作基础知识(第三更)

不二网新2019-06-07 02:54:48

HTML的基本语法结构

HTML元素(Element)构成了HTML文件,HTML文件是一种包含了很多标签(tags)的纯文本文件。

使用Windows系统的“记事本”或者其他的文本编辑器就可以编辑它们,HTML文件以.html或.htm为扩展名才会被浏览器“认识”并“解读”出来。

Html示例

HTML文件的基本特征如下。


标签由引文尖括号“<”和“>”框起来,如“<html>”就是一个标签。

<html>

<head>

<title>你好!</title>

</head> 

<body bgcolor="yellow">

<p>哈哈,我的<strong>第一个</strong>页面!</p >

</body>

</html>

HTML常用标签

在制作一般的页面的过程中,经常使用的标签有以下几种。

1.4 网页制作和编程工具

FrontPage

Dreamweaver

Fireworks

Photoshop

Flash

常用工具

FrontPage 2000/2003

    FrontPage 2000是Microsoft Office 2000家族中的一员,FrontPage 2000的界面,功能与Word 2000 都非常相似。

Dreamweaver MX

    Dreamweaver MX和Fireworks MX、Flash MX一起,被人们喻为“网页制作三剑客”。

Dreamweaver

常用工具

Fireworks MX

    Firework MX是Macromedia公司的产品,是目前最流行的网页图像制作软件。Fireworks还可以安装使用所有的Photoshop滤镜,并且可以直接导入PSD格式图像。更方便的是它不仅结合了Photoshop位图功能以及CorelDRAW矢量图的功能,而且提供了大量的网页图像模板供用户使用。

Flash MX

    Flash MX也是Macromedia公司的产品,是目前最流行的矢量动画制作软件。Flash MX只有用少量矢量数据就可以描述一个复杂的对象,而占有的存储空间只是位图的几千分之一,非常适合在网络上使用。

zend studio

用于开发php的集成环境

Eclipse

开源开发环境,可用于开发jsp等

1.5  网站建设流程

1.5.1  网站规划

规划站点就是对站点中所使用的素材和资料,以及网站中栏目的设置、颜色的搭配、版面的设计、文字图片的运用等进行规划。在网站建设开始时对站点进行详细规划和组织会大大方便以后的工作。网站规划通常包括以下内容:


确定目标

用户分析与需求分析

确定网站风格

考虑技术因素(包括网页下载速度、浏览器、分辨率等)

确定网站主题和名称

主题

主题要小而精

题材最好是擅长或者喜爱的内容

题材不要太滥或者目标太高

名称

正、易记、具有特色。

确定网站栏目和版块

栏目和版块

一定要紧扣主题

设定一个最近更新或网站指南栏目

设定一个可以双向交流的栏目

设定一个FAQ(常见问题解答)栏目

确定网页文件命名规则

Window NT 格式:扩展名应为3个字符(htm);

UNIX格式:扩展名为4个字符(html);

不要用特殊字符命名:斜线(/)、减号(-)、反斜线(\)、加号(+)、冒号(:),英文句号;

不要用数字开头;

不要用中文命名;

英文名称要用小写,不要大写或大小写混合;

站点首页名称一般情况下要用index。

确定网站建设尺寸规划

当表格用于网页排版时,表格的宽度一般设为100%、780px、1004px。

无论表格用于排版或是显示表格式数据,建议其边框粗细均设为0px;其单元格边距及间距均为0px。

页面长度原则上不超过3屏,宽度不超过1屏。每个标准页面为A4幅面大小,即8.5*11英寸。

全尺寸banner为468*60px,半尺寸为234*60px,logo为88*31px。另外120*90,120*60也是小图标的标准尺寸。每个非首页静态页面含图片字节不超过60KB,全尺寸banner不超过14KB.

资料搜集、整理素材

确定网站主题,包括基本风格后,就要开始搜集素材。常言道:“巧妇难为无米之炊”,要让自己的网站有声有色、能吸引人,就需要尽量搜集素材,包括文字、图片、音频、动画及视频等。

1.5.2 网站设计

网站规划好之后,就进入了设计阶段。利用规划阶段搜集的信息,在设计阶段需要对内容、导航系统等进行具体的设计。

设计网站的内容结构

设计页面的布局

设计首页

设计导航系统

网页中的颜色 

文字、图像、动画以及多媒体的使用

设计网站的内容结构


网站的内容结构是指通过什么样的逻辑方式将网站中的内容组织起来。实际上,由于网站主题的千差万别,内容组织的形式也有很多种类,关键的原则就是要符合普通人的思维习惯。

较好的做法是在 Internet 上查看与自己网站类似的网站,看其他人是如何对内容进行分类的,然后选择并设计一种适当的方式。

设计页面的布局

在对网页插入各种对象、修饰效果前,要先确定网站的总体风格和布局。网页版面布局可按创意草案、粗略布局、最后定案  三个步骤来进行。

常见网站布局

常见的网页布局有“同”字型、“厂”字型、标题正文型、分栏型、封面型和Flash型等。

厂字形网页

“厂”字型页面顶部为主菜单以及横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局

优点:页面结构清晰,主次分明;

缺点:呆板,如果细节色彩上不注意,容易“看之无味”

封面型网页

封面型布局页面布局像一张宣传海报,以一张精美图片作为页面的设计中心,菜单栏目自由摆放

优点:漂亮、吸引人,适宜于艺术类网站

缺点:显示速度慢,文字信息量少

网页布局构图

牢记用户优先的观念

根据所反映的主体内容确定网页布局

首页  清楚的类别选项、 干净清爽的原则

“稳” 即:注意疏密和虚实间的对比关系

“新”即:构图要新颖,要有创意

设计首页

首页是网站的门户,是网站的脸面,是网站中的最重要的一个页面。设计首页时需要遵循网站规划制定的基本原则。在设计首页时需要注意,首页上往往包括以下部分:网站徽标、网站的层次结构(即导航系统)、搜索功能、吸引注意力的东西(例如主题图片)、实时内容(例如“新闻”、“最近更新”等)、商业信息(例如广告)、快捷方式(提供访问某些页面或功能的快速链接)、注册登录功能等。

设计导航系统

导航设计的最基本原则就是:使用户每次的点击都是合情合理的。也就是说,要按照人之常情设计符合逻辑的导航系统。

在设计网站的导航系统时,要注意保持风格的一致。

网页中的导航栏中可以提供返回首页的链接、搜索功能、次要栏目链接、本地导航、页脚式导航或“脚注” 等。

~ 14 / 16 ~

网页设计色彩基础

色彩在网页设计中占有极其重要的地位。不同的颜色对人产生不同的心理影响。设计时需要注意:设计主体与所搭配的色彩具有的特性是否相吻合。

在网页制作过程中,通常可以使用 6 位数字的十六进制数值来构造出颜色值。最好使用标准网络安全色。 在网页中使用颜色的一般要点:

保持一致性;

注意可读性;

网站文字、图像及多媒体的运用

中文网页最好使用用户通用的基本字体。例如“宋体”、“黑体”等。另外,可以使用CSS 样式表确保整个网站字体风格的一致性。

网页中的图像、图形以及其他多媒体对象的数量和质量是限制页面快速下载的主要因素。不过合理地使用它们也是网页制作的一种趋势,只要找到一个平衡点,使大多数目标用户能够接受即可。因为要制作出一个让所有人都满意的网页几乎是不可能的。

网页设计的特点

交互性(interaction),    网络媒体与传统媒体的最大不同就在于它的即时交互性。在网络环境下,人们不再是一个传统媒体方式的被动接受者,而是以一个主动参与者的身份加入到信息的加工处理和发布之中。

多维性(multi-dimension),    多维性源于超级链接,它主要体现在网页导航的设计。超级链接的出现使网页的组织结构更加丰富,浏览者可以在各种信息与主题之间自由跳转,从而打破了人们接受信息所固有的线性方式。

网页设计的特点

多种媒体的综合性 (integration of multi-media), 网页设计是一种综合了文字、图像、声音、视频、动画、富媒体等多种视听元素的综合艺术。

版式的不可控性  (uncontrollability of layout ), 网络浏览者使用的显示器分辩率大小会影响版式的呈现效果,造成不同浏览者的显示误差,这一点在设计当中需要考虑到。

艺术与技术结合的紧密性 (combination of art and technology), 设计是主观和客观共同作用的结果,是在自由和不自由之间进行  的,设计者不能超越自身已有经验和所处环境提供的客观条件来进行设计。

~ 15 / 16 

网页设计遵循的一般原则

为用户考虑的原则

具备使用者优先的观念

考虑大多数人的连线状态

考虑用户使用的浏览器

主题鲜明的原则       

形式与内容统一的原则

强调整体的原则

即时更新和维护的原则

网页设计要求

统一,是指设计作品的整体性,一致性。

连贯,是指要注意页面的相互关系。

分割,是指将页面分成若干小块,小块之间有视觉上的不同。

对比,通过矛盾和冲突,使设计更加富有生气。

和谐,指整个页面符合美的法则,浑然一体。

网页设计中的创意与创新

创新的动力在于思想的活力,不过源头还在于对技术的深刻理解,只有理解并掌握了基础,才可能将好的创意转化为现实。 总之,网页设计师是规范化+创意化的一项工作,眼界决定自己未来的世界。

1.5.3 网页制作

设计阶段完成后,进入网页制作阶段。

首先根据设计结果制作出若干示范网页。

然后通过 Dreamweaver 等软件制作具体页面,在网页中添加实际内容,包括:文本、图像、声音、Flash 电影以及其他多媒体信息等。

1.5.4  网站发布

网页制作完毕,应该利用上传工具将其发布到Internet上供大家浏览、观赏、使用。利用上传工具,可以很方便地把网站发布到所申请的网页服务器上。

1.5.5  网站维护

对网站要注意经常维护和更新内容,网站维护包括网页内容的更新,通过软件进行网页内容的上传,目录的管理,计数器文件的管理及网站的定期推广服务等。

1.5.6  网站推广

网页制作好之后,还要进行网站推广以提高网站的访问率和知名度。网站推广是企业网站获得有效访问的重要步骤,合理而科学的推广计划能令企业网站收到接近期望值的效果。



本文章摘自百度文库,纯属用于学习交流如有版权问题请告知小编