HTML网页基础知识介绍.ppt

第1 章 网页设计基础知识1.网页设计基本概念什么是网页、网站？网页的板块什么是网页、网站？网页的板块结构？网页包含哪些基本构成要结构？网页包含哪些基本构成要素？素？1.1 网站网站网站(Web Site)是一个存放网络服务器上的是一个存放网络服务器上的完整完整信息的集合体信息的集合体。它。它包含一个或多个网页包含一个或多个网页，这些网，这些网页以一定的方式链接在一起，成为一个整体，用页以一定的方式链接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效来描述一组完整的信息或达到某种期望的宣传效果。果。有的网站内容众多，如新浪、搜狐等门户网有的网站内容众多，如新浪、搜狐等门户网站；有的网站只有几个页面，如个人网站。站；有的网站只有几个页面，如个人网站。1.2 网页1.2 网页网页（Web Page）实际上是一个文件，网页里可以有文字、图像、声音及视频信息等。网页可以看成是一个单一体，是网站的一个元素。平常我们所听说的“新浪”、“搜狐”、“网易”等，即是俗称的“网站”。而当我们访问这些网站的时候，最直接访问的就是“网页”了。这许许多多的网页则组成了整个站点，也就是网站。1.3 首页首页首页(Home page)，它是一个单独的网页，和一，它是一个单独的网页，和一般网页一样，可以存放各种信息，同时又是一个般网页一样，可以存放各种信息，同时又是一个特殊的网页特殊的网页，作为整个网站的起始点和汇总点作为整个网站的起始点和汇总点。例如，当浏览者输入搜狐网站地址例如，当浏览者输入搜狐网站地址“”后出现在第一个页面，即后出现在第一个页面，即sohusohu网站的首页。网站的首页。问题：首页和主页有区别吗？问题：首页和主页有区别吗？通常网站为方便浏览者查找和分类浏览网站的信通常网站为方便浏览者查找和分类浏览网站的信息，会将信息分类，并建立一个网页以放置息，会将信息分类，并建立一个网页以放置网站网站信息的目录信息的目录，即，即网站的网站的主页主页。并非所有的网站都将主页设置为首页，有的网站并非所有的网站都将主页设置为首页，有的网站喜欢在首页放置一段进入动画，并将主页的链接喜欢在首页放置一段进入动画，并将主页的链接放置在首页上，浏览者需要单击首页的链接进入放置在首页上，浏览者需要单击首页的链接进入主页。主页。1.4 网页的表现形式静态网页：客户端与服务器端不发生交互 访问者只能被动地浏览网站建设者提供的网页内容。其特点：网页内容不会发生变化，除非网页设计者修改了网页的内容。不能实现和浏览网页的用户之间的交互。信息流向是单向的。动态网页：客户端与服务器端要发生交互动态网页是指浏览器可以和服务器数据库进行实时数据交流的交互网页，而不是加上了动画等效果的动感网页。动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等。信息流向是双向的。2.网页的版块结构InternetInternet中的网页由于涉及和制作的中的网页由于涉及和制作的差别而千变万化，但通常由几大版块差别而千变万化，但通常由几大版块组成。组成。2.1 网站LOGO通常网站为体现其特色与内涵，涉及并制作一个LOGO图像放置在网站的左上角或其他醒目的位置。企业网站常常使用企业的标志或者注册商标。一个设计优秀的LOGO可以给浏览者留下深刻的印象，为网站和企业形象宣传起到十分重要的作用。2.1 网站LOGO2.2 导航条导航条是网页的重要组成元素。设计的目的是将站点内的信息分类处理，然后放在网页中以帮助浏览者快速查找站内信息。导航条的形式多种多样，包括文本导航条、图像导航条以及动画导航条等。有些使用特殊技术（例如Flash、JavaScript、CSS）制作的导航条还可以具有下拉菜单的功能。2.2 导航条2.3 BannerBanner的中文意思是横幅。Banner的内容通常为网页中的广告。在网页布局中，大部分网页将Banner放置在与导航条相邻处，或者其他醒目的位置以吸引浏览者浏览。2.3 Banner 2.4 内容版块网页的内容版块是整个页面的组成部分。设计人员可以通过该页面的栏目要求来设计不同版块，每个版块可以有一个标题内容，并且每个内容版块主要来显示不同文本信息。2.5 版尾或版权版块版尾，即页面最低端的版块。这部分位置通常放置网页的版权信息，以及网页所有者、设计者的联系方式等。有的网站也将网站的友情链接以及一些附属的导航条放置在这里。3.网页的基本构成要素虽然网页种类繁多，形式内容各有不同。但网页虽然网页种类繁多，形式内容各有不同。但网页的基本构成要素大体相同，网页设计就是要将构的基本构成要素大体相同，网页设计就是要将构成要素有机整合，表达出美与和谐。成要素有机整合，表达出美与和谐。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 表单网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到网页设计者设置的目标端。这个目标可以是文本文件、Web页、电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登录站点等。3.8 其他常见元素包括悬停按钮、Java特效、ActiveX等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。4.网页设计软件熟练使用各种网页设计以及图像、动画处理熟练使用各种网页设计以及图像、动画处理制作软件，是一个网页设计师必须掌握的技制作软件，是一个网页设计师必须掌握的技能。能。4.1 文本编辑器不仅在记事本中可以编写HTML代码，任何文本编辑器都可以编写HTML。比如写字板、word等，但保存的时候必须保存为.html或.htm格式。有一些文本编辑器专门提供网页制作及程序设计等许多有用的功能，支持HTML、CSS、PHP、ASP、Perl、C/C+、Java、JavaScript、VBScript等多种语法的着色显示。例如：EmEditor、EditPlus、UltraEdit4.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动画制作能力，同时支持将动画转换为Flash文件并嵌入到网络中播放。5.网页制作主要相关技术Html、CSS、JavaScript是制作网页的三大法是制作网页的三大法宝。他们在网页设计中扮演了重要的角色。宝。他们在网页设计中扮演了重要的角色。Html是基础架构，是基础架构，CSS用来美化页面，而用来美化页面，而JavaScript用来实现网页的动态性、交互性。用来实现网页的动态性、交互性。5.1 CSSCSS即即层叠样式表层叠样式表（Cascading Style Sheet）。）。在主页制作时采用在主页制作时采用CSS技术，可以有效地对页面技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加的布局、字体、颜色、背景和其它效果实现更加精确的控制。精确的控制。HTML=内容内容CSS=表现表现CSS带来的好处：带来的好处：CSS使页面载入更快；使页面载入更快；CSS可以降低网站的流量费用；可以降低网站的流量费用；CSS使设计师在修改设计时更有效率，而代价更低；使设计师在修改设计时更有效率，而代价更低；CSS使整个站点保持视觉的一致性；使整个站点保持视觉的一致性；5.2 JavaScriptJavaScript是由是由 Netscape公司开发的一种脚公司开发的一种脚本语言，可以被嵌入本语言，可以被嵌入HTML文件中，它是一种文件中，它是一种基于对象和事件驱动，并具有安全性能的脚本基于对象和事件驱动，并具有安全性能的脚本语言。语言。在在HTML基础上，使用基础上，使用JavaScript可以开发交可以开发交互式互式Web网页，可以回应使用者的需求事件而网页，可以回应使用者的需求事件而不需要通过网络来回传输资料。不需要通过网络来回传输资料。简单地说，当用户输入一项信息时，不需要先简单地说，当用户输入一项信息时，不需要先将信息传给服务器处理，再传回来，而是可以将信息传给服务器处理，再传回来，而是可以直接被客户端的程序处理。直接被客户端的程序处理。6.网站建设基本流程规范的网站建设应遵循一定的流程，合理的流程可规范的网站建设应遵循一定的流程，合理的流程可以最大限度地提高工作效率。网站建设流程主要由以最大限度地提高工作效率。网站建设流程主要由规划设计阶段、实施发布阶段、评价阶段组成。规划设计阶段、实施发布阶段、评价阶段组成。7.网页版式设计网页的版式设计是网页设计的核心，主要内容包括网页的版式设计是网页设计的核心，主要内容包括网页整体布局设计和导航样式的设计。本节将介绍网页整体布局设计和导航样式的设计。本节将介绍常见的几种网页布局，以及网页导航设计应遵循的常见的几种网页布局，以及网页导航设计应遵循的原则。原则。7.1 网页布局网页布局是网页设计的基础，目前网页的布局主要可归为三大类型：1分栏式结构2区域分布式结构3无框架局限式结构分栏式布局区域分布式布局无框架局限式布局7.2 导航设计导航是网页设计中不可或缺的基础元素之一。导航就如同一个网站的路标，有了它就不会在浏览网站时“迷路”。导航链接着各个页面，只要单击导航中的超级链接就能进入相应的页面。导航设计的好坏，决定着用户是否能很方便地使用网站。导航设计应直观明确，最大限度地为用户使用考虑，尽可能使网页切换更便捷。导航的设计要符合整个网站的风格和要求，不同的网站会采用不同的导航方式。7.2 导航设计一般来说，在网页的上端或左侧设置导航栏是比较普遍的方式，如图1.9所示。网站采用上端文字作为一级导航，左侧树状结构菜单作为二级导航。7.2 导航设计让用户了解当前所处的位置；让用户能根据走过的路径，确定下一步的前进方向和路径；不需要浏览太多的页面才能找到需要的信息，让用户能快速而简捷地找到所需的信息，并以最佳的路径到达这些信息；让用户使用网站遇到困难时，能寻求到解决困难的方法，找到最佳路径；让用户清楚地了解整个网站的结构概况，产生整体性感知；对使用频率不同的信息作有序处理。8.网页风格设计同样的版式设计，配色不同，文字样式不同，同样的版式设计，配色不同，文字样式不同，也可以呈现出多种不同的网页风格。也可以呈现出多种不同的网页风格。8.1 页面配色设计精美的网站都有其色调构成的总体倾向。以一种或几种临近颜色为主导，使网页全局呈现某种和谐、统一的色彩倾向。运用色系。先根据网页主题，选定一种主色，然后调整透明度或饱和度，也就是将色彩变浅或加深，调配出新的色彩。这样的页面看起来色彩一致，有层次感；一般来说，适合于网页标准色的颜色有3大系：蓝色、黄/橙色和黑/灰/白色。电子购物网站页面结构电子购物网站页面结构 如图1.10所示。IBM网站运用蓝色系营造出蓝色海洋的感觉。8.1 页面配色8.1 页面配色使用对比色。可以充分利用对比色进行设计，同时注意使用灰色调进行调和。这样的作品页面色彩丰富，如图1.11所示。8.2 文字艺术文字在版面中一般占有绝大部分空间，是网页信息的主要载体。处理好文字关系到网页设计的成败。字体的选择、字号的大小、文字的颜色、行与行的距离、段落与段落的安排，都需要认真考虑。好的文字设计会给网页增色不少，如图1.13所示。8.3 实例分析1网站描述这是一家航空公司的网站首页。界面设计给人现代、驿动的感觉，这与公司的风格相一致。导航设计简洁利落，很值得学习借鉴，如图1.14所示。8.3 实例分析2布局网页布局采用的是比较常见的分栏式结构，如图1.15所示。A为网站的Logo所在的区域；B为网站主菜单所在的区域；C为搜索与其他公共功能所在的区域；D为网站的内容区域，主要由文字和图片组成；E为版权信息所在的区域。8.3 实例分析3配色网页选用蓝色系，象征天空，与网站主题一致。网页主要运用了两种蓝色，分别是“#14397D”和“1E95BD”，如图1.16所示。除此之外，网页文字的配色主要以白色和蓝色为主。