网页制作教程 教案 ppt

1.2.3 网页的设计构思
• 在制作网页之前，首先要进行网页的设计与构思，主要包 括网页的主题、网页的命名、网站标志、色彩搭配和字体 等要素。
网页的主题
• 网页的主题也就速是网页的题材。在构思网页主题时，尽 量精准，范围不宜过大，内容要尽量提炼精要。最好选择 自己了解的主题内容，这样在制作过程中更容易收集到更 多的网页素材与内容。
网页链接无误
• 网页的主要功能就是向访问者提供信息，如果网页的链接 出现错误，访问者就无法获取自己所需的资料，因此网页 链接无误，是网页设计的最基本原则。
兼容性
• 不同的浏览器和分辨率，对网页的显示效果会由比较大的 区 别 。 目 前 广 泛 应 用 的 浏 览 器 由 微 软 的 IE 、 网 景 的 Navigator 和 Mozilla 的 Firefox3 种。在设计网页时，要充分 考虑不同浏览器的显示要求，始终从用户的实际情况出发 ，完成网页设计后，可以使用不同的浏览器先测试一下， 没有问题后再进行发布。
型布局
• 型结构网页顶部一般为网站标志、主菜单和广告条。下 方分为3个部分，左、右侧为链接、广告或其他内容，中 间部分为主题内容的布局，整体效果类似于符号。 • 型结构布局网页的优点是充分利用了页面的版面，可容 纳的信息量大；缺点是页面可能因为大容量的信息而显得 拥挤，不够生动。
T型布局
网页的命名
• 网页的名称应该是网页内容的概括，访问 者通过网页的名称就能够了解网页包含的 内容题材。在设计网页名称的时候，可以 结合网页的主题，尽量简短精要。网页名 称字数不宜过多，以便于其他站点的链接 。
网页色彩的搭配
• 一个网页给访问者的第一印象往往是网页颜色的视觉冲击 ，因此，网页色彩选取得当与否是网站能否成功的重要因 素，不同颜色的搭配不仅会产生不同的视觉效果，还会影 响浏览者的情绪。通常适合网页标准的颜色有黄 / 橙色、 蓝色、黑 /灰色三大系。另外，网页中的标准色彩不宜过 多，太多的颜色会使人眼花缭乱。标准色彩主要应用于网 站的标志与字体颜色。
动态网页
• 随着网络和电子商务的快速发展，产生了许多网页设计新 技术，例如 ASP 技术、 JSP技术等，采用这些技术编写的网 页文档称为 ASP 文档或 JSP文档，这种文档类型的网页由于 采用了动态页面技术，所以拥有更好的交互性、安全性和 友好性 。
1.1.4 IP地址和域名
• IP地址和域名是学习网页制作必须了解的两个专用名次。 • IP是英文Internet Protocol(网络之间互连的协议)的缩写， 中文简称为【网协】，也就是为计算机网络相互连接进行 通信而设计的协议。在因特网中，它是能使连接到网上的 所有计算机网络实现相互通信的一套规则，规定了计算机 在因特网上进行通信时应当遵守的规则。任何厂家生产的 计算机系统，只要遵守 IP协议就可以与因特网互连互通。 IP地址具有唯一性，根据用户性质的不同，可以分为5类 。域名(Domain Name)，通俗的说就是网址，它是由一串 用点分隔的名字组成的Internet上某一台计算机或计算机 组的名称，用于在数据传输时标识计算机的电子方位(有 时也指地理位置)。
框架布局
• 框架布局包括左右框架布局、上下框架布局和综合框架布 局几种形态。采用框架布局布局的网页可以通过某个框架 内的链接控制另一个框架内的页面内容显示。
POP布局
• POP引自于广告术语，指的是页面布局像一张宣传海报， 以一张精美的图片作为页面设计的中心 。
Flash布局
• Flash布局网页的整体就是一个Flash动画，画面一般制作 得比较绚丽活泼。是一种能迅速吸引访问者注意的新潮布 局方式 。
本章重点
网页与网站基础 网页的基本构成元素 网页制作常用语言 网页的设计构思
1.1 网页的基础知识
• 为了理解网页的相关基础知识，给出计算 机软件技术的定义，本节将研究以下几个 问题： • 网页与网站的概念， • 网页的基本元素， • 网页的类型。
1.1.1 网页与网站的概述
• 网页(web)是网站上的某一个页面，它是一个纯文本文件， 是向访问者传递信息的载体，以超文本和超媒体为技术， 采用HTML、CSS、XML等语言来描述组成页面的各种元素， 包括文字、图像、音乐等，并通过客户端浏览器进行解 析。 • 网站(Website)是指在互联网上，根据一定的规则，使用 HTML等工具制作的用于展示特定内容的相关网页集合， 它建立在网络基础之上，以计算机、网络和通信技术为依 托，通过一台或多台计算机向访问者提供服务。平时所说 的访问某格站点，实际上访问的是提供这种服务的一台或 多台计算机。
较快的下载速度
• 良好的下载速度是一个优秀网页所必备的条件，在网络速 度相当缓慢的情况下，设计者应该为节约访问者的时间而 精心设计。即使不能让每个页面都保持比较快的下载速度 ，至少应该确保首页和主要内容页面的下载要尽可能地快 。 • 在目前的技术条件下，保持网页的优质下载速度的主要方 法是尽量让页面简洁，避免使用大量的图片，以及取消自 动下载的音乐和媒体素材。
声音
• 声音是多媒体和视频网页重要的组成部分。用户在为网页 添加声音效果时应充分考虑其格式、文件大小、品质和用 途等因素。另外，不同的浏览器对声音文件的处理方法也 有所不同，彼此之间有可能并不兼容。
视频
• 视频文件的采用使网页效果更加精彩且富有动感。常见的 视频文件格式包括RM、MPEG、AVI和DivX等。
超链接
• 超链接是从一个网页指向另一个目的端的链接，超链接的 目的端可以是网页，也可以是图片、电子邮件地址、文件 和程序等。当网页访问者单击页面中某个超链接时，将根 据自身的类型以不同的方式打开该目的端。例如，当超链 接的目的端是一个网页时，将会自动弹出窗口以显示网页 内容。 Nhomakorabea表格
• 表格在网页中用来控制页面信息的布局方式。其作用主要 有两个方面：一方面是使用行和列的形式布局文本和图像 以及其他列表化数据；另一方面是精确控制网页中各种元 素的显示位置。
图像
• 图像元素在网页中具有提供信息并展示直观形象的作用。 用户可以在网页中使用GIF、JPEG和PNG等多种文件格式的 图像。目前应用最广泛的图像文件格式是GIF和JPEG两种。
FLASH动画
• 动画在网页中的作用是有效地吸引访问者更 多的注意。用户在设计制作网页时可以通过 在页面中加入动画使页面更加活泼。
1.2.2 网页的设计原则
• 网页的设计不仅涉及各种软件的操作技术，还关联到设计 者对生活的理解和体验。网页设计就是要把适合的信息传 达给适合的观众，遵循一些必要的原则。
页面的统一、连贯、和谐
• 一个精美的网页必须拥有良好的整体统一效果，在设计过 程中一定要将页面的各个组成部分进行合理的布局，以避 免出现纷杂的凌乱情况。 • 网页的连贯是指页面中各部分的相互关系。在网页设计过 程中，应充分利用各组成部分在内容上的内在联系和表现 形式上的相互呼应，并使整个页面设计保持一致，实现视 觉上和心理上的连贯，使整个页面的各个部分融洽。 • 网页的和谐是指整个页面符合美的法则，和谐不仅要看页 面的结构形式，而且要看作品所形成的视觉效果(颜色搭 配、形式等)能否与人的视觉感受形成一种有效沟通，产 生心灵的共鸣，这是网页能够设计成功的关键因素之一。
交互式表单
• 表单在网页中通常用来联系数据库并接受访问用户在浏览 器端输入的数据。表单的作用是收集用户在浏览器上输入 的联系信息、接受请求、反馈意见、设置签名以及登录信 息等。
导航栏
• 导航栏在网页中是一组超链接，其链接的目的端是网站中 重要的页面。在网站中设置导航栏可以使访问者既快又容 易地浏览站点中的其他网页。
1.1.2 网页的基本元素
• 一个网页的基本元素主要包括文本、图像和超链接，其他 元素包括声音、动画、视频、表格、导航栏、表单等 。
文本
• 文本是网页上最重要的信息载体与交流工具，网页中的主 要信息一般都以文本形式为主。与图像网页元素相比，文 字虽然并不如图像那样容易被浏览者注意，但却能包含更 多的信息并更准确地表达信息的内容和含义。
新世纪高职高专规划教材
《网页制作实用教程》
第1章 网页制作基础
学习目标
随着互联网的迅猛发展，可以获取、交换和存错连接 到网络上的各计算机上的信息。一个成功的网站有多个精 美绚丽的网页组成，要制作出美观的网页，首先要学习网 页制作的相关知识，例如制作网页的知识、制作网页元素 的知识以及设计网页效果。
1.3 网页设计的常用语言
• 随时网络技术的发展，对网络安全意识的提高，网页设计 语言发展迅猛。目前在网页设计过程中，常用的语言有 ASP、、JSP和PHP等。
1.3.1 ASP
• 是Active Server Page的缩写，意为“动态服务器页面”。 ASP是微软公司开发的代替CGI脚本程序的一种应用,它可 以与数据库和其它程序进行交互，是一种简单、方便的编 程工具。ASP的网页文件的格式是.asp，现在常用于各种 动态网站中。 • ASP安全性低，开发门槛低，源代码是暴露的，越来越多 的人会用ASP写网站后台程序，同时网上也有大量的ASP 的源码提供下载。
交互式表单
• 表单在网页中通常用来联系数据库并接受访问用户在浏览 器端输入的数据。表单的作用是收集用户在浏览器上输入 的联系信息、接受请求、反馈意见、设置签名以及登录信 息等。
其它网页元素
• 网页中除了上面介绍的网页元素之外还包括悬停按钮、 Java 特效、 ActiveX 等各种特效。用户在制作网页时可以使 用它们来点缀网页效果，使页面更加活泼有趣。
字体
• 网页中标准字体指的是用于网站标志、主菜单和标题的特 有字体。默认的字体为宋体。用户在制作网页的过程中为 了体现网页的特有风格，也可以根据需要选择一些特殊字 体，如华文行楷、方正楷体、隶书和华文新魏等。
1.2.4 网页的制作流程
• 在制作网页的过程中，要遵循一定的顺序才能协调分配整 个制作过程的资源与进度。网页的制作流程主要如下。 • 建立目标规划。 • 设计页面版式。 • 收集与加工网页制作素材。 • 编辑网页内容。 • 测试并发布网页。