-网页设计与制作word版

1、网页设计与制作自考电子商务网页设计与制作笔记IP地址：在TCP/IP地址编排方案中，采用了一种通用的地址格式， 为互联网中的每一个网络和每一台计算机都分配了一个地址，这个地址在 Internet中是唯一的，并以此屏蔽了物理网络地址的差异。这个统一的地 址是由高层软件技术来实现的，准确地说是通过IP协议层来实现的。IP 层所用到的地址是互联网地址，又叫IP地址。域名：为了解决IP地址不便于记忆这个问题，同时也为了便于网络 地址的分层管理和分配，自1984年起在互联网上采用了一种字符型的地址 标识，这便是域名(Domain Name)。协议：事先约定或定义的一组通信规则，它精确地规定了所交换数据

2、的格式和传输方法，即计算机在交换信息时都要遵守的表达方式。URL:统一资源定位器的英文缩写，是一个提供在全球广域网上的站 点或资源的Internet位置字符串，与此被访问的站点或资源所协议在一 起。主要由四部分组成，分别是：访问类型、访问的主机、端口号以及访 问的文件的路径。互联网：是由世界上各种各样的网络互联所形成的网络的网络，是 一个网际网。有时候也根据音译称为因特网，它是目前世界上最大的计 算机通信网络，遍布全球，将世界各地种种规模的计算机网络连接成一个 整体，从而实现信息交流和共享。Web浏览器：是指一个运行在用户计算机上的程序，主要作用在于在 客户端与服务器端之间进行交互、通信，负责

3、下载、显示网页，因此也称 为WWW客户程序。软件协议：程序之间的通信是通过软件协议完成的。无论是网络客户 机，还是网络服务器都提供有特定的协议包，它们与其他计算机通信之 间，必须在那些计算机中载入相应的协议包，协议包里包含了计算机访问 特定网络设备或服务所需的协议。标记型网页制作工具：是指创建的网页文件在编辑过程中只能看到页 面的源代码，而需要转到浏览器中才能够看到页面的效果。要求用户对 HTML的使用方法非常熟悉才能够做出希望要的页面，其优点在于可以完全 地控制页面的元素，写出精简的代码。下载：为了能够方便处理，客户机把文件从服务器上复制到本地的过 程，与下载相反的过程是上传(Upload)

4、。网页：Web站点中使用HTML编写而成的单位文档，是Web中的信息 载体。其使用的描述语言是 HTML.所见所得型网页制作工具：创建的网页文件在编辑过程中的显示与文 件最终在浏览器中显示的效果是一样的，用户不需要接触 HTML 源代码就可 以做出希望要的页面。HTML:超文本标记语言是创建网页时使用的语言。HTML文件被浏览 器所解释后就是网页，由标记和文本组成。网站的链接结构：页面之间相互链接的拓扑结构，它建立在目录结构 基础之上，可以跨越目录甚至主机。网站风格：整个网站所采用的结构布局、色调、文字、标志、图案等 要素带给浏览者的关于网站的印象。信息看板：Web站点中为访问者提供的各种最新

5、信息的集合。树形链接结构：类似 DOS 的目录结构，首页链接指向二级页面，二级 页面链接指向三级页面。当使用这样的链接结构浏览时，一级级进入，一 级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会迷路 。缺点是浏览效率低，要进行栏目跳转时，必须绕经首页。网站的层次：整个站点各个层次之间的结构关系。这是一种逻辑上的 概念，目的在于合理组织整个站点中的所有内容，便于访问者查找和浏 览，一般来说站点都把自身的内容分为多个层次。每个层逐渐递进，最后 达到最详细的内容。CMYK 色彩体系：以打印在纸张上油墨的光线吸收特性为基础，当白 光照射到半透明油墨上时，部分光谱被吸收，部分被反射回眼睛。该

6、色彩 体系以纯青色(C)、洋红(M)、黄(Y)和黑色(K)通过减色原理合成各种色 彩。加色原理：所有的色彩都可以通过三原色调配出来。只要对红、绿、 蓝三种基色的含量进行配比，就可以调配出其他的颜色，称为加色原理。页脚：页脚和页眉相呼应，是指在页面的最下方的一块空间。页眉是 放置站点主题和标识的地方，而页脚通常是放置制作者、公司相关信息、 版权的地方，有时还会放置一导航栏。色相：是颜色的基本属性，反映颜色的原貌，通过色相，人们才能区 分种种彩色。饱和度：也叫纯度，指颜色的纯洁程度。饱和度大，颜色就显得生 动，活泼，有很强的视觉冲击力；饱和度小，颜色就不纯净，看起来显得 灰暗。抖动：由于浏览器不能

7、够显示所有的颜色，因此伪造了那些在颜色有 限的调色板中不能显示出来的颜色，通过近邻像素倾向于混合而产生在图 像中实际不存在的颜色，从而达到一种补偿目的。抖动的图像有很多颗 粒，图像显得非常粗糙。明度：也叫亮度，体现颜色的深浅。通常说颜色深了、浅了，就 是指明度的高低。而非彩色只有明度特征，没有色相饱和度。造型：就是创造出来的物体形象。这里是指页面的整体形象，这种形 象应该是一个整体，图形与文本的接合应该是层叠有序的。虽然，显示器 和浏览器都是矩形，但对于页面的的造型，可以充分运用自然界中各种几 何形状以及它们的组合：矩形、圆形、三角形、菱形等。WEB 安全色：由于浏览器在显示这 1670 万种

8、颜色时是有选择的，它 只能选择其中的216种进行显示，无论是Rec(OO-FF), Green(OO-FF)颜色 通道，或是Blue(OO-FF)对任意一通道，都采取一种跳跃的方式进行颜 色编码，即 R、G、B 都只能在 00-FF 之间的跳跃取值，而不能任意取值。 这种跳跃显示的色彩被称为 WEB 安全色，意义是在任何浏览器上都能够正 确显示。表单：就是网页中站点服务器处理的一组数据输入域。当访问者单按 钮或图形来提交表单后，数据就会传送到服务器上。它是非常重要的通过 网页在与服务器之间传递信息的途径，表单网页可以用来收信浏览者的意 见和建议，以实现浏览者与站点之间的互动。框架：是一个由框架

9、网页所定义的浏览器初见窗区域，它通过框架网 页实现。框架网页是一种特别的 HTML 网页，它可将浏览器视窗分为不同的 框架，而每一个框架则可显示一个不同网页。客户端图像地图：它可将每个作用区的 URL 位置直接地对应在 WEB 网 页的图像上。客户端图像映射并不需要通过服务器处理来允许站点访问者 是否可在图像映射上进行超链接，但是，并非所有的浏览器都支持客户端 图像映射。超级链接：是指从一个网页指向另一个目的端的链接，是从文本图片 或图形或图像映射到全球文域网上网页或文件的指针。在全球广域网上， 超链接是网页之间和 WEB 站点之中主要的导航方法。标记：HTML中用来标识网页元素的类型、格式和

10、外观的文本字符 串。DHTML：就是一种即使在网页下载进浏览器以的仍然能够随时变换更 新网页内容排版样式以及动画等等的技术，它是一种通过各种技术的综合 发展而得以实现的概念，主要包括JavaScript、VBScript、DOM、CSS等技 术。DOM:为HTML文件定义了一个与平台无关的程序接口。使用该接口可 以控制文件的内容、结构和样式，WEB开发人员借助DOM可以在其WEB页 中引入动态和交互式内容，而不必依赖于WEB服务器来提供新的内容或改 变现有内容的显示方式。JavaScrip t： 一种由 Net scape Communica tions 和 SunMicrosystems，I

11、nc.所发展出来的一种Scripting语言。它可以被嵌入在 HTML文档中，在网页被下载到客户端后被浏览器所处理。CSS:是由全球广域网协会所发展出来的HTML的规范表。可使WEB网 页的制作者将样式表附加到HTML文件上。样式表包括了该如何显示网页的 排版信息，也可在HTML文件样式表与用户自定义样式混合的情况下工作。静态联编：是指程序语言的各种对象和库的引用必须在编译时进行， 以使编译器能够实现强类型检查，Java就属于静态联编类的语言。动态联编：是指程序语言的各种对象和库的引用在运行时再进行检 查，如不经运行就无法实现对象引用的检查。JavaScript就属于动态联编 类的语言。函数：

12、是一系列指令的集合，是对反复使用或可能重用的行为的抽 象，从本质上看，函数是存放代码的代码段。这些代码可能在某些时候被 执行，或在文档被装载时立即被执行，也可能是对被触发事件的响应。选择符：在层叠样式表的样式定义中(可样式规则中)，把HTML组件 连接到一个样式内容和值的特定组合。内联式样式单：它利于现有的HTML标记，把特殊的样式加入到那些 由标记控制的信息中。贴层：是用于更精确地定位页面元素的一种CSS属性，它把网页想象 为一个平面，具有贴层(clip)属性的元素就像一个贴层漂浮在网页之上， 三维方向的位置都是可以控制的。主题：是一套经过许多专业网站设计人员的图形、色彩、字体的组 合，可以

13、用来对网页进行修饰，增强网页的视觉效果。BOX模型：在CSS 中把HTML中以标记的部分称为BOX(容器)。每个BOX都有三种基本属 性：margin， padding 和 border.站点：是一个各种媒体的集合的抽象概念，有时也被翻译为站台。 在物理上它可能是一个有许多子目录的大目录，但是站点的许多媒体也可 能分布在其他各个不同的物理位置上。WEB服务器通常以站点为单位来组 织要发布的信息。热区：在客户端图像地图上设置的一片区域，并为这片区域设置了相 应的超级链接。当在浏览器中单击图片上相应的区域时，可以跳转到预先 设置的目标超级链接上。网页动态效果：在Frontpage内增加文档与对象的

14、演示文稿效果，可 以利用DHTML效果工具栏添加效果网页元素内，且不需要任何编程。向导：是被嵌入在程序中的一种程序，可以被用来与用户不断交互， 最后依用户在向导的输入窗格中所做的选项来创建完成用户需要完成的事 情。模板：指一类特殊文档，可提供构造最终文档的基本工具。模板中可 包含以下元素：在同类型的所有文件中都相同的文字或格式设置，如备忘 录或报表样式。其他的文件通过引用模板就可以完成格式的规范化等标准 工作。CPC：Cos t Per Click throu th的缩写，为每千次点击成本，与 CPM类似，也是千次成计算单位，以广告图形被点击并连接到相关网址或 详细内容页面1000次为基准的网

15、络广告收费模式。虽然CPC费用比CPM的 费用高很多，但效率比较高，广告主往往更倾向选择依据CPC付费。CGI: (common Gat eway Int erface)通用网关接口，是指在 WEB 服务 器上定义的一套WEB客户请求与应答的方法。客户机向服务器的请求只要 属于CGI范围，WEB服务器将自动启动一个CGI(网关)程序。它的任务是把 客户的请求从网关程序的环境变量中取出，并进行相应的加工处理，由 CGI程序决定如何对客户的请求做出应答。CGI是WEB服务器不可缺少的组 成部分，它是WWW与现有数据程序或实用文件检索系统之间的桥梁。结构良好的规则：XML文件的结构是按其标记集的语法

16、规则进行控 制的。有一些一般规则应用于所有的XML文件以确定文档是否为结构良好 的。要进行语法分析的XML文件必须为良好格式。PWS： (Personal Web Server)个人 WEB 服务器，是一个在 window 9X 平台下运行的WEB服务器。其目的主要是便于调试网页和在局域网中的基 于网页的信息发布。UNIX： 一个多用户、多任务的操作系统，以许多种形式存在和实现， 一般用在专用的计算机工作站上。许多站点服务器是在UNIX系统上执行。虚拟主机：是使用特殊的软硬件技术，把一台运行在因特网上的服务 器主机分成多台虚拟主机，每一台虚拟主机都具有独立的域名和IP地 址，具有完事的In t

17、erne t服务器（WWW, FTP, E-ma il）等功能，虚拟主机之 间完全独立，并可由用户自行管理，在WEB上看，每一台虚拟主机和一台 独立的主机完全一样。CPM： Cost Per one thousand impressions的缩写，每千播放次数 成本，以广告图形（Demographic）被浏览者L0AD（装载）1000次为基准的网 络广告收费模式。国内ICP编爱这种计费模式。SGML： Standard Generalized Markup Language（通用标识语言标 准）。它是国际上定义电子文件结构和内容描述的标准。XML： （Extensible Markup Lan

18、guage可扩展标记语言）是一种基于 SGML标准的网络信息描述语言，能够使用户自己根据文件的结构来创建自 己的DTD（Document Type Definition文件类型定义），从而使XML能够脱 离固定标记而表述数据的含义。DTD： Document Type Definition文件类型定义，是一个或是一些用 XML书写的文件，包含了对一种文件的正式定义，定义了文件中的元素能 用什么名字，能放在什么位置，应该怎样组合等定义。什么是网络协议，内容主要包括： 网络协议是一系列通信规则的总称，主要包括：用户数据与控制信息的结构和格式；需要发出的控制信息以及相应要完成的操作与响应；对事件实顺

19、序的详细说明等三部分内容。 规划目录结构时应当遵循的几个原则：不要将所有文件都存放在根目录下；按栏目内容分别建立子目录；在每个主目录下都建立独立的images目录；目录的层次不要太深；切忌使用中文目录；不要使用过长的目录；尽量使用意义明确的目录。网络中存在着多种级别的协议。总的来说可以分为：1、硬件协议：定义了硬件设备如何动作以及如何协同工作。2、软件协议：程序之间的通信是通过软件协议完成的。 除创意之外，在网站设计时还需要考虑以下基本原则：网页内容要便于阅读；站点内容要精、专和及时更新；注重色彩搭配；考虑带宽；要适当考虑不同游览器、不同分辨率的情况；提供交互性；简单即为美。 整个站点设计大体

20、分为八个部分：1、初始商讨；2、构思；3、综合内容；4、页面布局和导航；5、图 像制作；6、内容流程；7、测试；8、验收交付；网页设计的通用规则：网站的设计目的决定设计方案；浏览者的需求第一位；页面的有效性；页面布局的保持统一性；使用表格和适当的结构来设计网页；谨慎使用图片；平面设计意识；减少Java Applet和其他多媒体的使用。 JavaScript的基本特点：1、一种脚本编写语言；2、基于对象；3、简单性；4、安全性；5、 基于事件；6、跨平台。有关商业网站的风格特征：公司徽标或商标应当出现在页面最上方，尽可能做到色彩醒目，同 时占用版面小；可以采用主题图形产品广告来突出公司形象与风格

21、。主要栏目一般采用图文并茂的超级链接实现，要考虑到主要栏目图 片、文字之间的色彩配合，同时要和主题图形相互衬托，主题图形如果较 大，则栏目必须缩小；不要把主要栏目和次要栏目都显示在同一个页面上；商业网站一般都有固定的栏目页面，如：Support, service, About us 等；必须建立站内搜索引擎,以便浏览者在站内查找所需要的信息。请仔细阅读P15-16的细节内容JavaScript 对象：Window 对象2.String 对象Document 对象Navigator 对象5.String 对象Math对象Date对象使用DHTML的原因：DHTML将网页上的每一个元素划分成许多独

22、立的对象，这些对象的 属性通过CSS来指定。DHTML将每个对象向一个编程和脚本语言的框架开放，可使用编程 语言C+操纵网页上的对象，也可以使用JavaScript，VBScript操纵网页 上的对象。JavaScript 与 Java 的区别：两者语言间的异同：JavaScript是基于对象和事件驱动的编程语言，Java是一种真正 面向对象的语言；前者是一种解释性编程语言，后者的源代码在传递到客户端执行之 前，须经过编译；强变量和弱变量。前者采用弱定义类型变量检查，后者相反。前者的代码是一种文本字符格式，可以直接嵌入HTML文件中，并 可用动态装载，后者是一种与 HTML 无关格式，必须通过

23、像 HTML 中引用外 媒体那样进行装载，其代码以字节代码的形式保存在独立的文档中；嵌入方式不一样，前者使用来标识，后者用来标识；前者采用动态联编，后者使用静态联编。语言性能的差异：JavaScript 的本质是解释的；JavaScript 实现了 SRC 属性；JavaScript 代码能方便地修改，并立即在浏览器中看到修改的结 果；JavaScript 能有效地与 DOM 结合控制浏览器的行为，能方便地使 用插件、浏览器事件、窗体等技术，以实现用户与网页的交互；由于JavaScript代码置于HTML文件中，这样，JavaScript代码 便暴露在众人面前，源码存在安全问题；虽然JavaS

24、cript的功能非常强大，但是它在处理非常复杂的应用 时就被其自身机制的局限性所限制。FrontPage2000 增加的新功能：更容易建立专业的、美观的网站；FrontPage2000 不仅仅可以用来制作网页，用户还可以使用它来建 设和维护自己的整个网站，更方便地检测、更新网站；FrontPage2000 比其它 Office 组件的事例性更加提高，打开和运 行的速度比 FrontPage98 更快，并拥有更方便的 DBM；方便地使用主题；能够以图形化的方式展示一个完事的 WEB 站点，也可以向一个完事 的 WEB 站点引入 HTML 文件，或由现有 WE 耳闻目睹点引出文件，而且能够 自动维

25、护站点内部的所有超级链接的正确性；能够自动创建 WE 耳闻目睹点的文本索引，通过 FrontPage 提供的 webbit 搜索组件查找索引，可以无需编程进行站点内部的全文检索；加强了数据库访问能力，提供了许多设计时控件，使 WEB 页面与数 据库进行联系的能力得到加强。FrontPage 主要功能：创建和管理 Web 站点；2.制作网页；3.发布站点；4.维护站点。非商业组织的网站风格：强调页面的主色调；主题图形要求反映单位的风采，设计应有创意、有内涵，庄重中不 乏活泼；超级链接的分类一定要清晰，可采用图形，必要时可建立站内搜索 引擎；信息看板很重要，因为非商业组织的网站更新不如商业网站频繁

26、， 始终如一的画面显得枯燥，所以经常去更新信息查看板，将增加访问者的 访问兴趣。运用色块制作网页时需要掌握的几个要点：冷暖色调在均匀使用时不宜靠近；纯度相同的两种颜色也不宜放在一起；整个页面中最好有一个主色调，否则整个页面就显得凌乱。所见即所得编辑器的一些致使的弱点：难以精确达到与浏览器完全一致的显示效果；因为所见即所得编辑器在生成代码时，是按照软件编制人员事先 设计好的模式做的；因此不能完全适应各种不同的情况，尤其在实现同样 效果地，所见即所得的编辑器往往会书写出冗余度高的代码，不如手工 书写的来得简洁。WEB在实际应用中主要包含三个方面：实现资源引用的统一命名机制；2使用标准的WEB文件传

27、输机制一HTTP；文本的逻辑结构采用标记语言HTML描述协议；主页：在一个站点的众多网页中，总有一个网页是被指定为该站点的 门户网页，即为该站点的主页(Home Page)，这个页面是整个站点的核 心，站点内所有内容都由门户页面进行索引，该页通常被命名为 index.html或default.html.它是站点访问者在网页浏览器的地址栏中键 入该站点的网址时，默认地显示在浏览器中的网页。Dreamweaver有以下几个基本特征：最佳的制作效率；2.网站管理；3.无可比拟的控制能力；4.丰富模 板和XML支援；5.多浏览器平台的支持。Dreamweaver 最大的特点在于其全新的软件操作界面、强

28、大的动态网 页编辑功能和开放的插件环境。个人网站的基本风格：主题图形式：最显著的标志是主页有一个醒目的图形，该图形很大 程度上反映了网页作者希望自己的网页具有的一种意境。信息发布式：主要看重网站的信息量，这类网站都发布大量的信 息，其作者较热衷于贡献信息。介于两者之间的形式：这种网站既想突出个人形象，又想发布大量 信息，组织形式不鲜明。建立网站的链接结构有哪几种形式，其各自的优缺点：树形链接结构（一对一）： 优点：条理清晰，访问者明确知道自己在什么位置，不会迷路； 缺点：浏览效率低，要进行栏目跳转时，必须绕经首页。星形链接结构（一对多）： 优点：浏览方便，随时可以到达自己喜欢的页面。 缺点：链

29、接太多，容易使浏览者迷路，搞不清自己在什么位置，看了 多少内容。最好的办法是：首页和一级页面之间用星形链接结构，一级和二级页 面之间用树形链接结构。黄色：代表高贵、富有；白色：代表纯洁、简单；蓝色：代表智慧、天空、清爽绿色：代表生命、生机；灰色：代表深沉、阴暗、消极紫色：代表神秘、浪漫、爱情棕色：代表土地。网页页面布局的方法：纸上布局法：1）准备若干张白纸和几支削好的铅笔（或自动铅笔），橡皮一块。要保 证不会由于工具的问题而打断自己的思路；2）选择页面尺寸；页面总体造型的选择；选择一个形状作为整个页面的主题造型；在构思了许多图形之后，选择一个中意的基本结构作为整个页面的 主题造型；开始增加页眉；增加文本；增加图片；软件布局法。在栏目设置上可以考虑以下四个方面：一定记住要紧扣主题；设一个最近更新或网站指南栏目；设定一个可以双向交流的栏目；设一个下载或常见问题(FAQ)回答栏目。划分栏目需要注意的：尽可能删除与主题无关的栏目；尽可能将网站最有价值的内容列在栏目上；尽可能方便访问者的浏览和查询。PWS主要由五个组件组成：个人 WEB