第1 章 网页设计基础知识
1.1 网站
网站(Web Site)是一个存放网络服务器上的完整信息的集合体。它包含一个或多个网页,这些网页以一定的方式链接在一起,成为一个整体,用来描述一组完整的信息或达到某种期望的宣传效果。有的网站内容众多,如新浪、搜狐等门户网站;有的网站只有几个页面,如个人网站。
1.2 网页
网页(Web Page)实际上是一个文件,网页里可以有文字、图像、声音及视频信息等。网页可以看成是一个单一体,是网站的一个元素。
平常我们所听说的“新浪”、“搜狐”、“网易”等,即是俗称的“网站”。而当我们访问这些网站的时候,最直接访问的就是“网页”了。这许许多多的网页则组成了整个站点,也就是网站。
1.3 首页
首页(Home page),它是一个单独的网页,和一般网页一样,可以存放各种信息,同时又是一个特殊的网页,作为整个网站的起始点和汇总点。例如,当浏览者输入搜狐网站地址“www.sohu”后出现在第一个页面,即sohu网站的首页。
问题:首页和主页有区别吗?
通常网站为方便浏览者查和分类浏览网站的信息,会将信息分类,并建立一个网页以放置网站信息的目录,即网站的主页。
并非所有的网站都将主页设置为首页,有的网站喜欢在首页放置一段进入动画,并将主页的链接放置在首页上,浏览者需要单击首页的链接进入主页。
赤1.4网页的表现形式
1.静态网页:客户端与服务器端不发生交互
访问者只能被动地浏览网站建设者提供的网页内容。其特点:
网页内容不会发生变化,除非网页设计者修改了网页的内容。不能实现和浏览网页的用户
之间的交互。信息流向是单向的。
2.动态网页:客户端与服务器端要发生交互
动态网页是指浏览器可以和服务器数据库进行实时数据交流的交互网页,而不是加上了动画等效果的动感网页。动态网页技术的网站可以实现更多的功能,如用户注册、用户登录、搜索查询、用户管理、订单管理等。信息流向是双向的。
2.1 网站LOGO
1.通常网站为体现其特与内涵,涉及并制作一个LOGO图像放置在网站的左上角或其他醒目的位置。
2.企业网站常常使用企业的标志或者注册商标。
3.一个设计优秀的LOGO可以给浏览者留下深刻的印象,为网站和企业形象宣传起到十分重要的作用。
2.2 导航条
导航条是网页的重要组成元素。设计的目的是将站点内的信息分类处理,然后放在网页中以帮助浏览者快速查站内信息。
导航条的形式多种多样,包括文本导航条、图像导航条以及动画导航条等。
有些使用特殊技术(例如Flash、JavaScript、CSS)制作的导航条还可以具有下拉菜单的功能。
2.3 Banner
Banner的中文意思是横幅。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 声音和视频
声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多,常用的有MI
DI、WAV、MP3和AIF等。
很多浏览器不要插件也可以支持MIDI、WAV和AIF格式的文件,而MP3和RM格式的声音文件则需要专门的浏览器播放。
3.6 表格
在网页中表格用来控制网页中信息的布局方式。
笔记本做无线热点包括两个方面:一是使用行和列的形式来布局文本和图像以及其他的列表化数据;二是可以使用表格来精确控制各种网页元素在网页中出现的位置。
3.7 表单
网页中的表单通常用来接受用户在浏览器端的输入,然后将这些信息发送到网页设计者设置的目标端。这个目标可以是文本文件、Web页、,也可以是服务器端的应用程序。
表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者
注册为会员并以会员的身份登录站点等。
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公司推出的网页编辑工具。
它是一个所见即所得网页编辑器,支持最新的DHTML(Dynamic HTML,动态HTML)和CSS标准。采用了多种先进技术,能够快速高效地创建极具表现力和动感效果的网页,使网页创作过程变得非常简单。
另外还有Microsoft公司开发的FrontPage也是设计网页和管理网站的软件。除了所见即所得的编辑功能之外,也可以直接编辑HTML标记,让设计者可以轻松的编辑网页。
4.3 Photoshop图像处理软件
Photoshop是Adobe公司推出的功能强大的平面图像处理软件,Photoshop在图像编辑、桌面出版、网页图像编辑、广告设计、婚纱摄影等各行各业的广泛应用,它已成为许多涉及图像处理的行业的事实标准。
4.4 Flash动画设计软件
Flash是Macromedia公司开发的一款优秀的网页动画开发软件,从简单的动画到复杂的交
互式Web应用程序,它使用户可以创建任何作品。通过添加图片、声音和视频,可以使Flash应用程序媒体丰富多彩。
Flash被称为“最灵活的前台”,其独特的编译方式和跨平台的能力,广泛的应用(软件、游戏、Web应用程序、多媒体娱乐等多方面),使之越来越成为一种重要的工具。
4.5 Fireworks网页图像处理软件
Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件,使用Fireworks都不仅可以轻松地制作出尺寸较小的图形、GIF动画。
如果将Photoshop比作全能的图像处理大师的话,Fireworks就是精于网页图像处理的专家。它在矢量图形的处理方面有其独特之处。
在Web应用方面,Fireworks是最早提供切片功能的图像处理软件。Fireworks支持在图像中绘制热区并直接生成网页文档,并且具备简单的GIF动画制作能力,同时支持将动画转换为Flas件并嵌入到网络中播放。
5.1 CSS
李易峰方安娜CSS即层叠样式表(Cascading Style Sheet)。在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜、背景和其它效果实现更加精确的控制。
HTML=内容
CSS=表现
CSS带来的好处:
CSS使页面载入更快;
CSS可以降低网站的流量费用;
发布评论