网页制作基础知识-网页制作.ppt

网页设计与制作,网页制作课程内容： 1、网页制作基础知识 2、HTML语言 3、Dreamveaver 4、综合应用(课程实训),第一讲 网页制作基础知识,在学习网页制作之前，首先应了解一些网页与网站的基本知识，了解常用的网页制作工具，熟悉网站开发流程。 本讲要点： 网页的基本概念 网页包括的主要元素 网页制作流程 网页制作工具,一、网页的基本概念,(一)、什么是网页？ 网页是使用网页制作工作编辑生成或使用HTML语言编写的文本文件，网页里可以包含文字、表格、图像、声音和视频等网页元素。每个网页都是磁盘上的一个文件，可以单独浏览。网页是组成网站的特殊成分，图像、声音、和视频等文件均需要通过网页才能让浏览者看到或听到。,一、网页的基本概念,(二)、网站的的概念与分类 1、网站的的概念 网站，也称作站点，英文的名称是Web Site。 从逻辑上讲网站就是一个建构在网络上、具有独立名称的逻辑上的独立体。再简单来讲，就是一组具有特殊连接方式的页面群，表现出来就是我们常说的一个网站，比如网易、搜狐、新浪、百度等知名网站。我们个人做的网站虽然规模上不能和大站相比，但它在结构上也是完全独立的。 从物理意义上讲，所有的网站都架构在连接到因特网的服务器上，其具体网页文件都存放在一个网站文件夹中。 网站的分类方式有多种，这里我们仅就网站的内容与网站的交互性两方面来分类。,一、网页的基本概念,2、网站的分类 （1）按内容分类 搜索引擎式网站：以搜索引擎为主要功能。如百度、一搜、Google等。 综合性门户网站：以新闻信息、娱乐资讯等为主要功能。如搜狐、新浪、网易、雅虎等。 电子商务网站：主要用于网上交易。如：阿里巴巴、易趣等。 即时通讯网站：用于实时性网上通讯交流。如腾迅QQ、雅虎等。 小型专题或个人主页：多以宣传创建者自身，提供信息，或就某一专题提供最新资讯、历史资料及相关论坛等内容为主要形式。小型企事业网站或个人网站大多采用这种形式。 （2）按网站交互性来类 单向传递：这类网站重点在宣传自身、介绍产品、发布新闻等。与传统媒体的传播方式相类似，主要是提供资料供用户浏览，其它交流功能则较少。 双向交流：更注重网络与用户间信息的互动，网站可按用户的需求提供各种形式的检索，并且用户在网上获取信息的同时，网站也可接收到来自用户的信息，实现信息共享，用户还可加入各种网上互动活动，如参加论坛讨论，进行在线游戏等。,一、网页的基本概念,(三)、网页是如何被浏览的？ 网页是能够被浏览器软件识别的文件，但有时也把用浏览器看到的网页文件的内容叫网页或页面。 浏览器是专门用于浏览网页的软件，常用的浏览器软件有Microsoft的IE和Netscape的Navigator等。 HTML文件中还定义了网页中的各种对象（如：文字，图片，声音，图像，动画）的位置，外形和色彩，各种图像，声音，动画等文件则是网页的素材。 网页浏览者在浏览网页时，实际上是将HTML文件及相关的文本、图像、声音等文件下载到自已本地的计算机中，然后由浏览器程序对HTML文件进行解释后显示网页内容。,一、网页的基本概念,（四）、网页制作常用术语 1、HTML文件 用超文本标记语言编写的超文本文件称为HTML（HyperText mark-up language）文件，它能不受各种操作系统限制，独立地运行于各种操作系统平台之上。 HTML文件作用：HTML语言主要用于静态网页设计，自1990年起HTML语言就一直被用作World Wide Web（WWW）上的信息表示语言，用于描述网页的格式，设计它与WWW上其它主页的链接信息。 HTML文件是网页的源文件，是一个放置了标记的ASCII文本文件，通常以.htm或.html为扩展名。,一、网页的基本概念,2、服务器和客户机 浏览者在访问网页时，是由浏览者本地的计算机向存放网页的远程计算机发出一个请求。远程计算机在收到请求后，将所需要的浏览内容（即网页）发送给本地计算机。那么本地的计算机被称为客户计算机（Client），远程存放网页的计算机被称为服务器（Server），根据服务器上运行的程序类型及服务器与客户所使用的通信协议的作用的不同，服务器可分为WWW（Web）服务器，FTP服务器等。,一、网页的基本概念,3、IP地址和域名 IP地址：为了使连接在Internet上的计算机能够互相识别并进行通信，每台连入Internet的计算机必须有个“标识号”，这个标识号便是计算机在Internet中的地址。这个地址是由IP协议进行处理的，故称为计算机的IP地址。 IP地址是一个32位的二进制数，IP地址的写法是按8位为一组分组4组，组与组之间用小数点分隔，每组数值用十进制数表示: 如:某台计算机的IP地址为202.121.160.78 IP地址包含两部分:一部分是网络号,用以区分在Internet上互联的各个网络;另一部分是计算机号,用以区分在同一网络上的不同计算机。 域名：Internet规定了一套命令机制，称为域名系统DNS（Domain Name System）。按域名系统定义的计算机名字称为域名。 如： 当用户用域名来访问远程的计算机时,必须由Internet的DNS的名字服务器(Name Server)将域名翻译成对应的32位IP地址,然后才能完成对远程的计算机的访问。,一、网页的基本概念,4、虚拟主机 虚拟主机是使用特殊的软、硬件技术把一台服务器主机分成几十个“虚拟”的服务器主机，每台虚拟主机都具有独立的域名和IP地址（或共亨的IP地址），具有完整的Internet服务器功能。 虚拟主机之间完全独立，在外界看来，每台虚拟主机和一台独立的服务器主机完全一样。多台虚拟主机共亨真实主机的资源，这样就可以把网络的开销费用均摊到每台虚拟主机上。 可利用虚拟主机技术建立个人主页，在大型网站上（提供存放主页的免费空间，提供免费域名）申请主页空间和域名（免费或收费），获得成功后，把你制作的网页存放在虚拟主机上，这样你就好象在Internet上拥有了自己的服务器和网站。,一、网页的基本概念,5、统一资源定位器（url） 统一资源定位器（Uniform Resource Locator）是全球www网服务器资源的标准寻址定位源码，用于确定资源相应的位置及所需检索的文件。其优点是用字符串来指向所需的信息，从而进行资料的检索。 URL 由3部分组成: Internet协议 域名 主机路径及文件名 协议有： http:/超文本传输协议 ftp: 文本传输协议 telnet:远程登陆协议,一、网页的基本概念,6、文件传输协议(FTP) 文件传输协议(FTP)(file transfer pretocol) 用于网络调节点间文件的双向传输,是实现资源共享的重要方式和有效手段之一。 FPT 是支持用户实现把文件从一台计算机中传输到另一台计算机中,并且能保证传输的可靠性。 用户在本地计算机上做好的主页除了用DW4.0上传之外。还可以用FTP上传到达远程的主机中。常用的FTP工具有CuteFTP和LeapFTP等。,一、网页的基本概念,7. 网站的发布 网站制作好后还需要发布才能被浏览者浏览。网站的性质不同，发布方式也不同。 (1)企业级商业网站的发布 如果企业有足够的资金和技术支持，可以考虑创建自己的网络中心。硬件方面需要有性能稳定的服务器、路由器、交换机，并要向当地的电信部门申请网络专线。同时需要有一定数量的专人对网站进行维护和管理。,一、网页的基本概念,7. 网站的发布 (2)中小企业级或小型组织社团的网站发布 如果没有条件创建独立的网站硬件环境，或者网站规模并不大，不需要创建独立的网站硬件环境，可以选择以下几种小型网站的解决方案。 1)租赁虚拟主机： 如果网站的内容不是很多，也不需要大量的服务器空间支持数据库，可以采用这种发布方式，也就是租用ISP主机服务器的一定空间，比如100MB，来发布网站，一年需要支付几千元，就可以建立一个功能比较强大的网站。目前，这是大多数中小企业和社会团体、较具规模的各种组织网站多采用的模式。 2)服务器托管： 如果在网站里需要大量数据库支持，可以采用这种方式。将网络服务器主机存放在某个ISP的网络中心里，借用他们的通信系统接入因接网。ISP的人员还可代为维护，这样既可以节省相当的网络管理人员和许多通信设备的同时，又能达到网站的高性能。 3)DDN专线接入： 这种方式有些类似于服务器托管，就是也有自己的服务器，但不是存入放在ISP网管中心，而是存放在自己的机房中，利用DDN或其他专线接入方式与ISP的通讯系统相连，由ISP连入因特网，这种方式的费用也很高，因为专线多是每月要收比较贵的月租费，而且还有一个容量问题，如果专线容量较小，网站所能被访问的人数就会较少。,一、网页的基本概念,7. 网站的发布 (3)免费主页空间 如果只是想建立一个小型的、功能简单的网站，当然也可采用以上形式，但这需要有相应有费用支持，投资与效益的比例关系需要权衡。如果目前还不想投资太多，那么免费主页空间将是较好的选择。但现在较好的免费主页空间不多，且一般不支持ASP、JSP、CGI等高级功能。,一、网页的基本概念,8、超文本、超媒体、超链接 超文本文件（HyperText）就是指在文本中包含了与其他文本的链接的文件。超级链接文本下方带有下划线。 超媒体（Hypermedia）进一步扩展了超文本所链接的信息类型。 超媒体文件就是一种文字、影像、图片、动画、声音综合在一起的文件。 超链接（Hyperlink）是WWW上使用最多的一种技术。它是超文本、超媒体、超链接以及与其媒体之间的链接，也是一种从源端点到目标端点的一种链接。在网页中，当鼠标移到超链接处，会呈现手的的形状，表示单击该处，可以链接到该提示所指的页面。,一、网页的基本概念,9、主页 主页（HOME PAGE），也称为首页，它和一般网页一样，是一个单独的网页，可以存放各种信息。主页是特殊的网页，是这个站点中所有网页文件的起点和交点，也是浏览者浏览一个网站的起点。主页应给出站点的基本信息和主要内容，使浏览者一目了然地了解站点的基本主题，了解站点的信息是否对自己有用。,二、网页包括的主要元素,网页中除包含文本、声音外，还包含图像、导航、表格、表单等元素： （1）文本 文本是人类最重要的信息载体和交流工具，网页的主体一般以文本为主。在制作网页时，可以根据需要设置文本的字体、字号、颜色以及所需要的其他格式。,二、网页包括的主要元素,（2）图像 图像在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。图像可以用作标题、网站标志（Logo）、网页背景、链接按钮、导航栏、网页主图等。由于网络对网页文件的容量要求非常苛刻，因此在网页中只支持压缩比较高的GIF、JPEG、BMP等几种图像格式。 （3）动画 动画即动态画面，它是由一组静态画面组成的连续播放便形成了动画。 动画可由fireworks、flash、3dmax等软件制作。,二、网页包括的主要元素,（4）导航栏 导航栏类似于软件中的菜单，实质上是一串超链接。其作用是目录提纲，是浏览网页的引航路标，使浏览者顺利的浏览网站内容，是建设网站过程中的一条主目录。导航栏可以是按钮、文本或图像。站点的每个网页上均应设置导航栏，导航栏应放置在网页比较明显的位置。 （5）超级链接 超级链接是网页中很有作的功能，是从一个网页指向另一个目的端的链接，该链接既可以指向本地网站的另一个网页，也可以指向世界各地的其他网页。不论是文字还是图像，都可以设置超级链接。超级链接一般包括两种类型：站内链接和站外链接,二、网页包括的主要元素,(6)表格 网页中的表格是一种用于控制网页页面布局的有效方法。为了达到理想的视觉效果，通常不显示边框。如果网页具有横竖分明的风格，那么一定是由表格辅助布局。 (7)表单 表单是能够实现人机交互的网页界面，一种特殊的网页元素，通常用于收集或实现一些交互式的效果。表单的主要功能是接收浏览者在浏览器端的输入信息，然后将这些信息发送到浏览者设置的目的端。比如用户注册，要填一些表格，做出一些选择后提交，提交的信息将上传到服务器。 (8)多媒体及特殊效果 为了吸引浏览者，许多网页还包含有声音、视频等多媒体元素，以及悬停效果、Java控件、ActiveX控件等特殊效果。,三、网站制作流程,网站设计是一个系统工程，具有特定的工作流程，遵循这个流程，才能设计出令人满意的网站。网站设计主要分为网站规划、网站制作、后期维护三个阶段，如下图所示：,三、网站制作流程,(一)网站规划 制作网页如同泼墨作画，首先要进行构思，然后再加以实现。这种构思就是网站规划。网站规划的总体原则有两个：一是为读者提供有用信息，二是要美观。 1、确定网站的主题与名称 网站的主题是指建立的网站所要包含的主要内容。例如，教育、旅游、体育、新闻、医疗、时尚、娱乐、搜索等。其中每一大类又可细分为若干小类。一般来说，确定网站主题应遵循以下原则： (1)主题鲜明：一个网站必须要有一个明确的主题，在主题范围内做到内容全而精。 (2)明确设立网站的目的。 (3)体现自己的个性。把自己的兴趣、爱好尽情地发挥出来，突出自己的个性，办出自己的特色。 在个人网站中，网站的名称起着很重要的作用，它在很大程度上决定了整个网站的定位。一个好的名称必须简洁、有概括性、有特色、容易记，还要符合自己主页的主题和风格。,三、网站制作流程,2、搜集材料 确定网站主题后，要围绕主题搜集材料，作为自己制作网页的素材。搜集的材料越多，制作网站越容易。材料既可以从图书、报纸、光盘、多媒体上获得，也可以从网上搜集。对搜集到材料就去粗取精，去伪存真。 3、规划网站 规划网站就象设计师设计大楼一样，只有图纸设计好了，才能建成一座漂亮的楼房。规划网站时，首先应把网站的内容列举出来，根据内容列出一个结构化的蓝图，根据实际情况设计各个页面之间的链接。规划网站的内容应包括：栏目的设置、目录结构、网站的风格（即颜色、搭配、网站标志LOGO、版面布局、图像的运用）等。 设计LOGO的原则是：以简洁、符号化的视觉艺术把网站的形象和理念展示出来。,三、网站制作流程,(1)主题栏的设置 在设计网站的主题栏与版块时应注意以下几个问题： 1）突出主题。把主题栏放在最明显的地方，让浏览者更快、更明确地知道网站所表现的内容。 2）设计一个最近更新栏目，让浏览者一目了然地知道更新内容。 3）栏目不要设置太多，一般不超过10个。 (2)目录结构设计 目录结构设计一般应注意以下问题： 1）按栏目内容建立子目录。 2）每个栏目下分别为图像文件创建一个子目录IMAGE（图像较少时可不创建） 3）目录的层次不要太深，主要栏目最好能直接从首页到达。 4）尽量使用意义明确的非中文目录。 (3)颜色搭配 合理的应用色彩是非常关键的，不同的色彩搭配产生不同的效果，并能影响浏览者的情绪。网页选用的背景应和页面的色调相协调，色彩搭配要遵循和谐、均衡、重点突出的原则。 (4)网站标志LOGO LOGO最重要的作用就是表达网站的理念，便于人们识别，广泛地用于站点链接和宣传。如同商标一样，LOGO是站点特色和内涵的集中体现。如果是企业网站，最好是在企业商标的基础上设计，保持企业形象的整体统一。,三、网站制作流程,(5)版面布局 网页页面的整体布局是不可忽视的。要合理地运用空间，让网页疏密有致、井井有条。 版面布局一般应遵循的原则是：突出重点、平衡和谐，将网站标志（LOGO）、主菜单等最重要的模块放在突出的位置，然后再排放次要模块（例如搜索、计数器、版权信息、E-mail地址等）。 此外，其他页面的设计应和首页保持相同的风格，并有返回首页的链接。 (6)图像的运用 网页上应适当地添加一些图像，使用图像一般应注意以下几个问题： 1）图像是为主页的内容服务的，不以让图像喧宾夺主。 2）图像要兼顾大小和美观。图片不仅要好看，还应在保证图片质量的情况下尽量缩小图片的大小（即字节数）。图像过大会影响网页的传输速度。 3）合理地采用JPEG和GIF图像格式。颜色较少的（256色以内）图像，可处理为GIF格式，色彩比较丰富的图像，最好处理为JPEG格式。,三、网站制作流程,(二)网站制作 1、制作网站 制作网站主要包括以下步骤： (1)建立本地站点。建立站点根文件夹，用于存放首页、相关网页和网站中用到的其他文件。 (2)在站点根文件夹下创建子文件夹。为了使文件安排比较清晰，将页面文件和图像文件分开存放。 (3)向站点添加所需要的空网页。 (4)设计网页尽寸。页面大小一般选择800600规格。 (5)设计网页属性，包括页面标题、背景图像、背景颜色、链接颜色、文字颜色等。 (6)向网页中插入文本、图像、动画等对象。 (7)建立所需要的超级链接。 (8)预览和保存网页。,三、网站制作流程,2、上传与测试 测试评估与正式上传是不可分割的两部分。 制作完毕的网页，必须进行测试。测试评估主要包括上传前的兼容性测试、链接测试和上传后的实地测试。完成上传前所需要的测试后，利用FTP工具将网页发布到所申请的主页服务器上。网站上传后，继续通过浏览器进行实地测试，发现问题，及时修改，然后再上传测试。,三、网站制作流程,(三)后期维护 1、推销网站 网页上传后，需要不断地进行宣传，以便让更多的朋友认识它，从而提高网站的访问率与知名度。推广网站的方法很多，例如，利用E-mail、新闻组、与别的网站交换链接（友情链接）、到搜索引擎上注册、加入交换广告等。 2、维护更新 网站必须定期维护、定期更新，只有不断地补充新内容，才能吸引浏览者。同时，随着软硬件的进步，网页的设计也应由文字向多媒体、由平面图像向立体动画或影片、由单向传播向交互式发展。,四、网页制作工具简介,早期的网页一般是由专业人员利用HTML语言编写实现的。目前，已出现多种可视化程度很高的网页制作工作，不需要掌握专业的网页制作技术也能创作出富有特色、丰富多彩的网页。 (一)网页编辑工具 1、FrontPage FrontPage是Microsoft公司出品的入门级网页编辑软件。FrontPage支持所见即所得的编辑方式，它不需要掌握很深的网页制作技术。其基本使用方法与WORD类似。FrontPage最有特色的功能是站点管理。在更新服务器上的站点时，不需要创建更改文件目录，FrontPage将自动跟踪文件并拷贝那些新版本的文件。 2、Dreamweaver Dreamweaver是Macromedia公司推出的网页制作产品，它是一个用于可视化设计与管理网页和网站的工具，支持最新的WEB技术。它与MACROMEDIA公司的FLASH、FIREWORKS、FREEHAND 配合使用，功能更为强大，是目前专业人士首选的网页制作工具。Dreaweaver、Flash和Firework被称为“网页制作三剑客”。,四、网页制作工具简介,(二)网页图像与动画制作工具 网页通常具有丰富多彩的图像和动画。对于网页中的图像和动画，既要求质量高，同时还要求文件所占存储空间小。 1、Fireworks Fireworks是Macromedia公司专门设计的WEB图形工具软件，它可以用最少的步骤生成最小但质量很高的JPEG和GIF图像，这些图像可以直接用于网页上。Fireworks是WEB图形工具的首选软件。 2、Flash Flash是Macromedia公司专门为网页设计的一个交互性矢量动画设计软件。网页设计者可以随心所欲地设计各种动态LOGO（商标、图案）、动画、导航条，还可带有动感音乐，以及其他多媒体的各项功能。由于矢量图形不会因为缩放而失真，因此在WEB上应用广泛。 3、Photoshop Photoshop是由Adobe公司出品的著名的图形图像处理软件。它能够实现各种专业化的图像处理，是专业图像创作的首选软件。,四、网页制作工具简介,4、PhotoImpact PhotoImpact是友立（Ulead）咨询股份有限公司推出的图像处理软件，它功能强大，易于使用，在商业广告和WEB图像应用方面有着突出的优势。对于非专业用户来说，PhotoImpact是一个很好的选择。 5、COOL 3D COOL 3D是友立（Ulead）咨询股份有限公司推出的三维立体文字特效工具，它广泛地应用于平面设计和网页制作领域。COOL 3D主要用于制作文字的各种静态和动态特效。 6、GIF Animator GIF Animator也是友立（Ulead）公司发布的一个动画GIF制作工具。它可以将多幅外部图像文件组合成动画，还具有滤镜劝功能、条幅文字效果等。可以使用GIF Animator创建和编辑网页动画文件。,