项目1 网页设计的基础知识.

Presentation on theme: "项目1 网页设计的基础知识."— Presentation transcript:

1 项目1 网页设计的基础知识

2 项目描述 互联网（Internet）是全球性的网络，是一种公用信息的载体，是大众传媒的一种。具有快捷性、普及性，是现今最流行、最受欢迎的传媒之一，这种大众传媒比以往的任何一种通讯媒体都要快，现我国网民接近5亿，互联网普及率超过世界平均水平。今日中国，互联网已成为思想文化信息的集散地和社会舆论的放大器，有着日益强大的社会影响力。而互联网上的信息是通过网页向全世界展示的。 本次项目主要通过介绍网页的基本组成元素、网站类型和结构、Web标准、布局结构和网页制作的常用软件及网站开发流程等让大家对网页设计有一个初步的认识。

3 知识目标： 技能目标： 了解网页设计元素组成 了解网站类型和结构 了解开发网站的基本流程 了解网页设计制作工具 认识网页的组成元素
了解Web标准 了解网站的开发流程 熟悉网页制作的常用软件

4 项目任务 任务1.1 网站欣赏 任务1.2 网页设计工具 任务1.3 开发网站的基本流程

5 任务1.1 网站欣赏 任务描述 互联网已经发展多年，网络已经成为我们生活中不可或缺的一部分了，Internet、局域网及手机移动互联网等，生活处处反映着网络的力量。伴随着网络的快速发展，也拉动了一些新兴产业，如网络游戏，网络聊天，网上影视的飞速发展。同时，网络传媒，电子商务等给更多企业带来了无限的商机。使互联网具有这强大的功能的元素就是网站，在互联网上的交流离不开网站这个载体。当然，具有载体功能的网站也是有一定规则和标准的，并不是随意生成的。

6 相关知识与技能 1.网页和网站 网站是由网页集合而成的，而大家通过浏览器所看到的画面就是网页，网页说具体了是一个html文件，浏览器是是用来解读这份文件的，网页是有许多html文件集合而成。

7 相关知识与技能 （1）网页 网页（英文：Web page）是一个文件，它存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。网页经由网址（ URL ）来识别与存取，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。 （2）网站 网站(Website)，就是指在因特网上，根据一定的规则，使用HTML等工具制作的用来展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度（俗称“网速”）、网站软件配置、网站提供服务等几方面考虑，最直接的衡量标准是这个网站的真实流量。

8 相关知识与技能 （3）网站的类型 ①按照制作技术 ②按照网站内容 按照制作技术可以分为：静态网站和动态网站。
静态网页通常使用.html、shtml等后缀，实际存在的网页文件，但是它无法处理用户的信息交互过程。 动态网页通常以.asp、.aspx和.php等为后缀，常与数据库结合。由程序动态生成，可以处理复杂的用户信息交互过程。 ②按照网站内容 按照网站内容可以分为：门户网站、企业网站、个人网站、专业网站及职能网站。

9 相关知识与技能 （4）网站的结构 ①线状结构 线状结构是网站最简单的结构方式，一般分为单向线状和双向环状两种方式。在这种结构中，网页一层层链接起来，部部深入，逻辑清晰。单向现状只提供往下一层网页的链接，即从网页1可以链接到网页2，从网页2可以链接到网页3，依次类推。双向环状除了像单向线状那样链接外，还可以倒着从网页3回到网页2，从网页2回到网页1。但无论是单向线状还是双向环状都不能在网页之间自由跳跃链接。线状结构下图所示： 线状结构一般用于信息量较少的小型网站、索引站点，或者用来结构网站中的一部分内容，如在线手册、电子图书、联机文档等等。对于信息内容较多的网站，采用这种结构方式就显得层次太深、结构过于单薄，因此，一般不用线状结构设计网站的总体结构。

10 相关知识与技能 （4）网站的结构 ②树状结构 树状结构，顾名思义，整个网站的架构就像一颗大树，有根、有干、有枝、有叶。整个站点把一个网页作为中心，然后从这个中心向外分散出多个分支，在这些分支上，可以继续生出新的枝干。每一级网页与上下级网页都是相互连通的，但在不同枝干的上下级网页间不能随意跳转链接。树状结构如图下图所示：

11 相关知识与技能 （4）网站的结构 ③网状结构 网状结构是指网页之间像一张网一样，可相互链接，随意跳转。在网络结构中有一个主页，所有的网页都可以和主页进行链接，同时，各个网页之间也随意链接。网页之间没有明显的结构，而是靠网页的内容进行逻辑联系。网状结构如下图所示： 采用这种结构的网站，如果网页信息内容不能科学分类，访问者容易在网页跳转过程中迷失方向，很难快速找到所需要的信息。因此，在使用这种结构时，要适度的进行网页间的链接。 实际上人们发现，一个访问轻松、寻找信息快捷的网站往往是多种网站结构的综合，以树状结构为主框架，在此基础上按照网页信息的分类，对各级网页进行网状编排，对某些特殊的内容进行线状链接。

12 相关知识与技能 （5）网页的基本元素 提问：常见网页的元素有哪些？

13 相关知识与技能 （5）网页的基本元素 ①文本 ②图像
网页中的信息以文本为主。文本一直是人类最重要的信息载体与交流工具，网页中的信息也以文本为主。为了丰富文本的表现力，人们可以通过文本的字体、字号、颜色、底纹和边框等来展现信息。文本在网页中的主要功能是显示信息和超级链接。 ②图像 图像的功能：提供信息、展示作品、装饰网页、表现风格和超级链接。 网页中使用的图像主要是GIF、JPEG、PNG等格式。GIF文件格式的扩展名是“.gif”，GIF文件的特点是：文件小，使用时占用系统内存少，调用时间短。JPEG文件格式的扩展名是“.jpg”。JPEG文件格式是扫描照片、带材质的图像、带渐变色过渡的图像或者多于256种颜色图像的最佳格式。PNG文件格式的扩展名是“.png”。 PNG即可移植网络图形，支持透明背景和动态效果。

14 相关知识与技能 （5）网页的基本元素 ③超链接 ④动画
超链接是网站的灵魂，从一个网页指向另一个目的端的链接。例如，指向另一个网页或相同网页上的不同位置。这个目的端通常是另一个网页，但也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者也可以是本页中的其他位置。 ④动画 动画实质上是动态的图像。在网页中使用动画可以有效地吸引浏览者的注意。由活动的对象比静止的对象更具有吸引力，因而，网页上通常有大量的动画。网页中使用 较多的动画是GIF动画与Flash画。 动画的功能是：提供信息、展示作品、装饰网页、动态交互。

15 相关知识与技能 （5）网页的基本元素 ⑤声音 ⑥视频
声音是多媒体网页的一个重要组成部分。当前存在着一些不同类型的声音文件和格式，也有不同的方法将这些声音添加到Web页中。 一般说来，不要使用声音文件作为网页的背景音乐，那样会影响网页的下载速度。 ⑥视频 在网页中视频文件格式也非常多，常见的有RealPlayer、MPEG、AVI和DivX等，视频文件的采用让网页变得非常精彩而且有动感。

16 相关知识与技能 （5）网页的基本元素 ⑦表单 ⑧色彩 表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。
通常表单的用途是：收集联系信息、接收用户要求、获得反馈意见、设置访问者签名、让浏览者输入关键字去搜索相关网页、让浏览者注册会员或以会员身份登录。如用户反馈表单、留言簿表单、搜索表单和用户注册表单等。 ⑧色彩 一个好的网页设计会给用户带来记忆深刻，好用易用的体验。一个网站不可能单一的运用一种颜色，让人感觉单调，乏味；尽管这样，但不能将所有的颜色都运用到一个网站中去。 一个页面尽量不要超过4种色彩，用太多的色彩让人没有方向，没有侧重。当主题色确定好以后，考虑其它配色时，一定要考虑其它配色与主题色的关系，要体现什么样的效果。另外哪种因素占主要地位，是明度，纯度还是色相。

17 相关知识与技能 2.布局结构 布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。网页布局有以下几种常见结构： （1）“国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

18 相关知识与技能 （2）拐角型 这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。 （3）标题正文型 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

19 相关知识与技能 （4）封面型 （5）“T”结构布局
这种类型基本上是出一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分是企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。 （5）“T”结构布局 所谓“T”结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“T”结构布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等。

20 相关知识与技能 （6）“口”型布局 （7）“三”型布局
这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。 这种布局的优点是页面充实、内容丰富、信息量大，是综合性网站常用的版式，特别之处是顶部中央的一排小图标起到了活跃气氛的作用。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站使用多帧形式，只有页面中央部分可以滚动，界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。 （7）“三”型布局 这种布局多用于国外网站，国内用得不多。其特点是页面上横向两条色块，将页面整体分割为4个部分，色块中大多放广告条。

21 相关知识与技能 （8）对称对比布局 （9）POP布局
顾名思义，它指采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型网站。其优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。 （9）POP布局 POP源自广告术语，指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类网站，优点显而易见：漂亮吸引人，缺点是速度慢。

22 相关知识与技能 3.WEB标准 WEB标准，即网站标准。它不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM、ECMAScript等。 建立Web标准的目的：建立Web标准的目的是解决网站中由于浏览器升级、网站代码冗余、臃肿等带来的问题。 使用Web标准的优势：建立Web标准的优势是能够实现加快网页解析的速度，实现信息跨平台的可用性以及更加良好的用户体验，以高效开发与简单维护降低服务成本，最重要的是它便于改版，实现与未来兼容。对浏览者和网站拥有者都有相应的好处。

23 任务实现 欣赏网站 1、门户网站 （Portal Web，Directindustry Web） 2、静态网站
门户网站是指通向某类综合性互联网信息资源并提供有关信息服务的应用系统。门户网站最初提供搜索服务、目录服务，后来由于市场竞争日益激烈，门户网站不得不快速地拓展各种新的业务类型，希望通过门类众多的业务来吸引和留住互联网用户，以至于目前门户网站的业务包罗万象，成为网络世界的“百货商场”或“网络超市”。 如：搜狐（ 2、静态网站 静态网站是指全部由HTML（标准通用标记语言的子集）代码格式页面组成的网站，所有的内容包含在网页文件中。网页上也可以出现各种视觉动态效果，如GIF动画、FLASH动画、滚动字幕等，而网站主要是静态化的页面和代码组成，一般文件名均以htm、html、shtml等为后缀。如搜狐的新闻网页页面大都是这类。

24 任务实现 欣赏网站 3、动态网站 动态网站并不是指具有动画功能的网站，而是指网站内容可根据不同情况动态变更的网站，一般情况下动态网站通过数据库进行架构。 动态网站除了要设计网页外，还要通过数据库和编程序来使网站具有更多自动的和高级的功能。动态网站体现在网页一般是以asp，jsp，php，aspx等结束，而静态网页一般是HTML（标准通用标记语言的子集）结尾。动态网站能实现如用户注册、信息发布、产品展示、订单管理等交互功能

25 任务1.2 网页设计工具 任务描述 制作网页的专业工具的功能越来越完善，操作也越来越简单，处理图像、制作动画、发布网站的专业网站非常广泛。常用制作网页的工具如下： 制作网页的专门工具有Dreamweaver、HTML。 图像处理工具有Photoshop、JPEGView、flash、Firework、Swish。 网站原型图设计工具有Axure RP、Balsamiq Mockups、Pencil Project和OmniGraffle。 网站发布工具FTP上传工具、flashFXP

26 相关知识与技能 1.网页编辑工具 （1）超文本标识语言（HTML） （2）Dreamweaver CS6
超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。 （2）Dreamweaver CS6 Dreamweaver CS6是世界顶级软件厂商adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，你可以无需编写任何代码就能快速创建web页面。

27 相关知识与技能 2.图形图像编辑工具 （1）Photoshop （2）JPEGView
Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。Photoshop[2]主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。PS有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。 （2）JPEGView JPEGView是一款小巧且快速的图片查看、编辑软件，支持的图片格式包括JPEG、BMP、PNG、WEBP、GIF和TIFF。JPEGView提供即时的图片处理功能，允许调整典型的图片参数，如锐度、色彩平衡、对比度和感光度。

28 相关知识与技能 （3）Flash （4）Firework
Flash是一种动画创作与应用程序开发于一身的创作软件，到2013年9月2日为止，最新的零售版本为AdobeFlash Professional CC(2013年发布)。Adobe Flash Professional CC为创建数字动画、交互式Web站点、桌面应用程序以及手机应用程序开发提供了功能全面的创作和编辑环境。 （4）Firework Adobe Fireworks是Adobe推出的一款网页作图软件，软件可以加速Web设计与开发，是一款创建与优化Web图像和快速构建网站与Web界面原型的理想工具。

29 相关知识与技能 在Fireworks中将设计迅速转变为模型，或利用来自Illustrator、Photoshop和Flash的其它资源。然后直接置入Dreamweaver中轻松地进行开发与部署。 （5）Swish Swish是一个快速、简单且经济的方案，让你可以在你的网页中加入flash动画。只要点几下鼠标，你就可以加入让你的网页在众多网站中令人注目的酷炫动画效果。可以创造形状、文字、按钮以及移动路径。

30 相关知识与技能 3.网站原型图设计工具 （1）Axure RP
Axure的发音是“Ack-sure”，RP则是”Rapid Prototyping”快速原型的缩写。Axure RP Pro是美国Axure Software Solution公司的精心杰作，可以说Axure是Windows上最出色的原型设计软件，亦是web产品前期设计的首选，原因是：够简单、上手快，能帮助网站需求设计者，快捷而简便的创建基于目录组织的原型文档、功能说明、交互界面以及带注释的wireframe网页，并可自动生成用于演示的网页文件和word文档，以提供演示与开发。Axure RP具备强大的六合一功能，即：网站构架图、示意图、流程图、交互设计、自动输出网站原型、自动输出word格式规格文件。

31 相关知识与技能 （2）Balsamiq Mockups （3）Pencil Project （4）OmniGraffle
Balsamiq Mokups是用Flex和Air实现的，在Mac OS, Linux和Windows下都能使用，有桌面版本、Confluence，JIRA，和XWiki中的版本；涂鸦风格、使用起来也很简单、各模块工具也很齐全。 （3）Pencil Project Pencil Project是一个原型界面设计的Firefox插件,通过它内置的模板,你可以创建可链接的文档,并输出成为HTML文件、PNG、OpenOffice文档、Word文档、PDF。 （4）OmniGraffle OmniGraffle可以用来绘制图表，流程图，组织结构图以及插图，也可以用来组织头脑中思考的信息，组织头脑风暴的结果，绘制心智图，作为样式管理器，或设计网页或PDF文档的原型。遗憾的是，它只能于运行在Mac OS X和iPad平台之上。

32 相关知识与技能 4.网站上传工具 （1）CuteFTP （2）flashFXP
CuteFTP是小巧强大的FTP 工具之一，友好的用户界面，稳定的传输速度，LeapFTP 与 FlashFXP 、CuteFTP 堪称 FTP 三剑客。 （2）flashFXP FlashFXP是一个功能强大的 FXP/FTP 软件，融合了一些其他优秀 FTP 软件的优点，支持文件夹（带子文件夹）的文件传送、删除；支持上传、下载及第三方文件续传；可以跳过指定的文件类型，只传送需要的文件；可以自定义不同文件类型的显示颜色；可以缓存远端文件夹列表，支持FTP代理及 Socks 3&4；具有避免空闲功能，防止被站点踢出；FlashFXP还可以显示或隐藏“隐藏”属性的文件、文件夹；支持每个站点使用被动模式等。

33 任务实现 展示“珠海航展”网站 贯穿本课程的项目实例“珠海航展”网站的文本编辑工具是用dreamweaver CS6制作实现，图像用PS处理实现。

34 任务1.3开发网站的基本流程 任务描述 网站开发是制作一些专业性强的网站，比如说动态网页。ASP、PHP、JSP网页。而且网站开发一半是原创，网站制作可以用别人的模板。网站开发字面意思比制作有更深层次的进步，它不仅仅是网站美工和内容，它可能涉及到域名注册查询、网站的一些功能的开发。对于较大的组织和企业，网站开发团队可以由数以百计的人（web开发者）。规模较小的企业可能只需要一个永久的或收缩的网站管理员，或相关的工作职位，如一个平面设计师和/或信息系统技术人员的二次分配。Web开发可能是一个部门，而不是域指定的部门之间的协作努力。

35 相关知识与技能 1.需求分析阶段 （1）目标定位：做这个网站干什么？这个网站的主要职能是什么？网站的用户对象是谁？他们用网站干什么？
（2）用户分析：网站主要用户的特点是什么？他们需要什么？他们厌恶什么？如何针对他们的特点引导他们？如何做好用户服务？ （3）市场前景：网站如同一个企业，它需要能养活自己。这是前提，否则任何惊天动地的目标都是虚无的。网站的市场结合点在哪里？这些确定了才能决定网站的主题、风格。

36 相关知识与技能 2.平台规划阶段 （1）内容策划：这个网站要经营那些内容？其中分重点、主要和辅助性内容，这些内容在网站中具有各自的体现形式。内容划分好以后，就进行文字策划(取名)，把每个内容包装成栏目。 （2）界面策划：结合网站的主题进行风格策划。如色彩包括主色、辅色、突出色，版式设计包括全局、导航、核心区、内容区、广告区、版权区及板块设计。 （3）网站功能：主要是管理功能和用户功能。管理功能是我们通常说的后台管理，关键是做到管理方便、智能化。而用户功能就是用户可以进行的操作，这涉及交互设计，它是用户和网站对话的接口，非常重要。

37 相关知识与技能 3.项目开发阶段 4.测试验收阶段 （1）界面设计：根据界面策划的原则，对网站界面进行设计及完善。
（2）程序设计：根据网站功能规划进行数据库设计和代码编写。 （3）系统整合：将程序于界面结合，并实施功能性调试。 4.测试验收阶段 （1）测试、调试与完善网站。 （2）发布与推广网站。 （3）维护和更新网站。

38 任务实现 在网站制作之前，在我们在珠海市及周边市区进行了实地调研，结果显示有很多外省在珠海的务工人员根本不知道每隔两年的珠海航展，因此，决定制作开发以“珠海航展”为名，关于航展的网站。旨在通过这个网站让让更多的人了解航展、关心航天、热爱航天、支持航展和参与航展，同时希望通过珠海航展这样的活动，不仅可以使中外航空航天工作者增进了解，而且搭建了一个展示中国航空航天发展成就的平台。

39 小结 在互联网时代，（互联网）已经成为人们生活中不可或缺的部分，它为人们提供了大量服务，其中最重要的就是www（万维网，World Wide Web)服务。本项目主要介绍了网页设计的基础知识，包括网页和网站、Web标准、布局结构和网页设计工具及开发网站的基本流程等。

40 思考题 1、从制作技术上网页基本可以分为哪两大类网页？它们有何不同？ 2、网页有哪些基本元素？ 3、简述网站的设计流程。

41 巩固练习 1、参照任务1打开动态网站或静态网站熟悉网站和网页及网页中的基本元素。 2、参照任务2熟悉网页设计制作软件。
3、参照任务3的网站开发流程，对开发“酷致网络科技有限公司”网站进行设计，并初步规划出该网站的架构为树状结构，导航菜单如图所示。