网页设计概述

1、网页制作三合一,网页设计概述,韩丹,Email:,问题,网页是什么？ 网页是由什么组成的？它们是怎样工作的？ 如何将众多的网页过程一个网站？ 网站制作的工作流程是怎样？,学习目标,理解网页的基本原理，区分静态网页和动态网页。 掌握HTML语言的语法规则，掌握基本的网页标记符和属性。 了解网页制作的常用工具。 理解网站开发的流程。,Part 1,网页的基本概念,Internet 与 WWW,通俗地讲，Internet 就是许多功能不同的计算机通过线路连接起来组成的一个世界范围的网络。,Internet 与 WWW,Internet 提供的服务： WWW服务（网上冲浪） 电子邮件服务（Email）

2、 文件传输（FTP） 网络游戏 即时信息传递（OICQ）,WWW 与浏览器,WWW是由遍布在 Internet 上的称为 Web 服务器的计算机组成，它将不同的信息资源有机地组织到一起，通过浏览器进行浏览。,WWW 与浏览器,网页,网页是由HTML（超级文本标识语言）或者其他语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。,网站与主页,在逻辑上可视为一个整体的一系列页面的有机集合称为网站（Web Site或Site）。 作为一个组织或个人在 WWW（或其他Web）上开始点的页面称为主页（Homepage）。,补充

3、：网页中的常用术语,万维网（www） 浏览器 统一资源定位符（URL） 文件传输协议（FTP） IP地址 域名 超级链接 超级文本标记语言（HTML）,万维网（www）,万维网（www）是World Wide Web的中文简称，也称为3W网，它的本质是一种基于超级文本技术的交互式信息浏览检索工具，是Internet提供的应用最普及、功能最丰富、使用方法最简便的信息服务，用户可通过它在Internet上浏览、编辑、传递超文本格式的文件（即.html格式文件）。,浏览器,浏览器是用于阅读网页中信息的一种软件工具，就像使用电脑必须有操作系统一样。 Internet Explorer（IE） Nets

4、cape Navigator（NE） 腾讯TT浏览器 傲游浏览器（Maxthon）,统一资源定位符（URL）,URL（Uniform Resource Locator）主要是用来指定协议（如HTTP或FTP）以及对象、文档、万维网网页或其他目标在Internet的位置和存取方式。 通信协议 主机名 所要访问的网页路径及名称,文件传输协议（FTP）,FTP（File Transfer Protocol）是一种广泛使用的文件传输协议，是快速、高效和可靠的信息传输方法。 FTP是基于客户/服务器模型的TCP/IP的应用，所以只要在客户端和服务器之间建立了TCP/IP连接，无论两台电脑的位置远近、连接

5、方式的异同以及使用的操作系统的异同，都能通过FTP协议进行文件的传输。,IP地址,IP地址用来标识连接到Internet上电脑的指定编号，每一个IP地址对应一台电脑，这与用电话号码标识电话网络中的电话相同。 电脑识别的IP地址由32位二进制数值组成，电脑上以十进制数值来显示，一组数值分为4部分，每一部分均不能大于255，中间用“.”分隔，如9。,域名,域名就是常说的网址，它也具有惟一性，如百度的网址、网易的网址等就是一个域名，域名由汉语拼音或英文字符加上数字表示，在访问网络时，域名将通过域名服务器转换成IP地址，这种转换是在后台完成的。,超级链接,超级链接是网页中最常用的元

6、素之一，网页就是通过无数的超级链接才能组成一个网站。 超级链接可以链接到网站内部页面、对象，也可以链接到其他网站，大大方便了用户在各个页面对象之间实现跳转。,静态网页与动态网页,一般网页的每一行 HTML 代码都是在将页放置到服务器之前由设计人员编写的。因为 HTML 在放置到服务器后不发生更改，所以这种页称为静态页。 例如，大多数的个人网站。 当 Web 服务器接收到对静态页的请求时，服务器将读取该请求，查找该页，然后将其发送到请求浏览器，如图所示 。,静态网页与动态网页,所谓动态网页，是指根据用户的请求，由服务器动态生成的网页。例如，ASP网页，PHP网页，JSP网页。 当 Web 服务器

7、接收到对动态页的请求时，它将该页传递给应用程序服务器，它读取页上的代码，根据代码中的指令完成页，然后将代码从页上删除。所得的结果将是一个静态页，应用程序服务器将该页传递回 Web 服务器，然后 Web 服务器将该页发送到请求浏览器。该过程如图所示。,静态网页与动态网页,应用程序服务器使用户能够使用服务器端的资源（如数据库）。 动态页可以指示应用程序服务器从数据库中提取数据并将其插入页的 HTML 中。 例如，搜索页面，电子商务网站等。,Part 2,HTML基础,超级文本标记语言（HTML）,HTML（Hyper Text Markup Language）是一种用户与电脑之间进行交流的文本技术

8、，各种网页均是用HTML语言来描述的，用HTML语言编写的网页文件的扩展名一般为“*.htm”或“*.html”。,解释HTML,和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。 一个HTML文件的后缀名是.htm或者是.html。 用文本编辑器就可以编写HTML文件。,举例, Title of page This is my first homepage. This text is bold ,标记符基础,在 HTML 中，所有的标记符都用尖括号括起来。例如，、。 HTML 标记符是不区分大小写的。、和没有区别。 注意：XHTML要求标记符区分大小写

9、！养成习惯都用小写。,标记符基础,绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。某些标记符，例如，只要求单一标记符号。 注意：对于XHTML，这样的标记写为 开始标记符与结束标记符的区别在于：结束标记符多一个斜杠“/”（不是反斜杠“”！）,标记符基础,属性是用来描述对象特征的特性。例如，一个人的身高、体重就是人这个对象的属性。 在HTML中，所有的属性都放置在开始标记符的尖括号里，多个属性之间用空格分开，通常也不区分大小写。,标记符基础,例如，可以用字体标记符和字号属性指定文字的大小。本行字将以较小字体显示。,Web页的基本结构,一个 Web 页实际上对应于一个 HTML 文件，H

10、TML 文件以 .htm 或 .html 为扩展名。 最基本的HTML文档包括：HTML标记、首部标记和、以及正文。,HTML标记符,和 是Web页的第一个和最后一个标记符，Web 页的其他所有内容都位于这两个标记符之间。这两个标记告诉浏览器或其他阅读该页的程序，此文件为一个Web页。,HEAD标记符,首部标记和位于 Web 页的开头，其中不包括 Web 页的任何实际内容，而是提供一些与 Web 页有关的特定信息。,HEAD标记符,首部标记中的内容也用相应的标记符括起来。例如，样式表（CSS）定义位于和之间；脚本定义位于之间。,TITLE 标记符,在首部标记符中，最基本、最常用的标记符是标题标

11、记和，用于定义网页的标题。 当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示。,BODY标记符,正文标记符和包含Web 页的内容。文字、图形、链接以及其他HTML元素都位于该标记符内。,BODY标记符,正文标记符中的文字，如果没有其他标记符修饰，则将以无格式的形式显示。 注意：空格、回车这些格式控制在显示时都不起作用，如要使它们起作用，应使用预格式化元素和,小节,综上所述，一个不包含任何内容的基本 Web 页文件如下所示： ,背景颜色,在标记符中使用BGCOLOR属性可以为网页设置背景颜色， TEXT 属性用于设置正文的颜色。 在 HTML 中，除了使用颜色名称以外，还可以用格式

12、#RRGGBB 来表示颜色。,演示设置网页背景颜色, 看，这个页面是黄色的。 ,背景图案,使用 BODY 标记符的 BACKGROUND 属性可以设置背景图案。HTML语句为： ,演示设置网页背景图案, 这个网页有背景图片哦！ 如果图片比页面小，图片会自动重复。 ,添加注释,不论是编写程序还是制作网页，为所做的工作添加注释都是一种良好的工作习惯。实际上，添加注释是任何开发工作必须遵循的规范之一。,添加注释,HTML 的注释由开始标记符 构成。这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。,显示特殊字符,如果用户需要在网页中显示某些特殊字符，例如：（大于号）、”（引号）等

13、，则需使用参考字符来表示，而不能直接输入。 参考字符以“&”号开始，以“；”结束，既可以使用数字代码，也可以使用代码名称。,显示特殊字符,例如，要在 Web 页中显示以下内容，则需使用参考字符：“112,演示特殊字符的显示, 12 ,Part 3,网站开发流程,概述,首先定义开发网站的目的；接下来对网站的外观进行设计；然后进行实际页面的制作；然后对所制作的网站进行测试，以确保它符合最初设定的目标；最后是将网站发布。在将网站发布后还需要有维护工作，以便及时更新网站内容。,步骤一：确定网站主题和名称,网站主题（网站的题材） 主题要小而精 题材最好是自己擅长或者喜爱的内容 题材不要太滥或者目标太高

14、网站名称 名称要正气 名称要易记 名称要有特色,步骤二：定位网站的CI（企业形象）,设计网站的标志（logo） 有代表性的事务为设计蓝本 专业性网站，以本专业代表性的物品 最常用和简单方式，网站的英文名字 网站的标准色彩 不同色彩搭配产生不同的效果 不同的人群对色彩的喜恶程度有着很大差异,网页色彩方案,1色彩的一些基本概念 （1）色相。指的是色彩的名称，这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。,明度变化,（2）纯度。指色彩的鲜艳程度，纯度高的色彩纯、鲜亮，纯度底的色彩暗淡、含灰色。,纯度变化,网页色彩方案,（3）相近色。是指色环中相邻的三种颜色。,网页色彩方案,（4）互

15、补色。是指色环中相对的两种色彩。,网页色彩方案,（5）暖色。如图中的黄色、橙色、红色、紫色等都属于暖色系列。,（6）冷色。如图中的绿色、蓝色、蓝紫色等都属于冷色系列。,（7）色彩均衡。,网页色彩方案,色彩的联想,红色让人联想到玫瑰，联想到喜庆，联想到兴奋。 白色让人联想到纯洁、干净、简洁； 紫色象征着女性化、高雅、浪漫； 蓝色象征高科技、稳重、理智； 橙色代表了欢快、甜美、收获； 绿色代表了充满青春的活力、舒适、希望等。,步骤二：定位网站的CI（企业形象）,设计网站的标准字体 用于标志、标题、主菜单的特有字体 使用特殊字体时只能用图片的形式 设计网站的宣传标语 网站的精神、网站的目标,步骤三：

16、设计和组织网站内容,充分搜集资料 精心设计和搜集一些互联网上没有的内容,步骤四：规划网站栏目和网站目录结构,栏目和板块 突出主题 网站指南或更新列表之类的栏目 与访问者交流的栏目 FAQ（常见问题解答）,步骤五：确定网站的链接结构,树状链接结构 星状链接结构 混合结构,步骤六：设计网站的整体风格,站点的整体形象给浏览者的综合感受 确信风格是建立在有价值内容之上 搞清楚希望站点给人留下的印象 明确网站印象后努力建立和加强这种印象,步骤七：确定网页版面布局,网页版面：通过浏览器显示的完整的页面 布局：以最合适浏览的方式将图片和文字排放在页面的不同位置 常见的网页版面布局 “同”字型 “厂”字型 标

17、题正文型 分栏型 封面型 Flash型,步骤八：制作网页,将站标、按钮、宣传语、广告栏、文本等页面元素通过专业的网页制作软件进行整合，形成网页。,步骤九：添加网页特效,对网页进行美化，从而强化网页的视觉、听觉冲击力。 添加网页特效要适度。,步骤十：测试和发布网站,网站的测试：对所有影响页面显示的细节因素进行测试。 网站测试的几个方面 外观可接受测试 功能测试 内容验证 系统和浏览器兼容性测试 速度和压力测试,步骤十：测试和发布网站,网站的发布：用户创建了 Web 页之后，通常可以直接将其保存在硬盘、软盘或光盘上，作为一种电子文档；也可以将其发布到 Internet 或Intranet上，以便其

18、他浏览者浏览。 站点空间,网站维护,随着网站的发布，应根据访问者的建议，不断修改或是更新网站中的信息，并从浏览者的角度出发，进一步完善网站。这时网站建设工作又返回到了流程中的第一步，这样周而复始，就构成了网站的维护过程。,作业0,选择一个自己感兴趣的话题内容，上网或去图书馆进行资料搜集，作为以后作业的主题内容。写下以下内容： 网站的目标 网站的观众 网站要包括的内容及其组织,作业0,参考内容： 文学 音乐 游戏 学习 旅游,技术 电影 动画 艺术 体育,Part 4,网页制作工具,网页编辑工具,HTML 编辑器 HomeSite BBEdit （Mac） CuteHTML,网页编辑工具,WYS

19、WYG 编辑器 Macromedia Dreamweaver Microsoft FrontPage Adobe GoLive,素材处理与创作工具,图像浏览与处理 ACDSee Photoshop Fireworks PhotoImpact,矢量图创作工具 FreeHand CorelDraw Illustrator,素材处理与创作工具,特效制作工具 Anfy Cool 3D GIF Animator,多媒体制作工具 Flash Director Authorware LiveMotion,网页制作工具,超文本标识语言（HTML） HTML（Hypertext Markup Language）

20、是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。 HTML文档由文本、格式化代码和导向其他文档的超链接组成。,网页制作工具,FrontPage FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。 FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便，Microsoft公司FrontPage封装入Office之中，成为Office家族的一员，使之功能更为强大。,网页制作工具,Dreamweaver Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时