网站建设与网页制作

《网站建设与网页制作》阎菲E-mail:[e-mail]学习内容•网站建设概述•网页界面设计艺术•HTML语言简介•织网工具Dreamweaver•Fireworks美化网页•Flash制作网络动画•ASP动态网页技术教学要求•掌握一定的网页制作的高级部分，包括用来实现前台交互、制作动感网的DHTML和实现后台交互、制作动态网页的ASP。•掌握网页界面设计的方法和要素，版式设计、文字编排、图形和动画的应用、色彩的应用等。•掌握网页制作各项基本技能，包括HTML语言、可视化网页制作工具（Dreamweaver）和各种媒体素材的制作工具（Fireworks、Flash），具有较强的自主设计与制作网页的基本素质与能力。课程特点《网页建设与网页制作》是一门以实际技能训练为主要教/学内容与目标的实践性课程，知识学习与技能训练的有机结合贯穿于整个教/学过程。最终将以学习者是否具有独立设计并建设网站的基本能力与实践结果作为考核的主要评判标准。学习方法3P一体化，即Principle、Practice、Product(原则)、(实践)、(作品)预祝大家取得好成绩！考试说明•出勤10%•实验20%•期末笔试70%第1章网站建设概述第一节基础知识•服务的基本概念•服务的特点•服务的工作方式•（WorldWideWeb，全球信息网）是以超文本标记语言（HTML,HyperTextMarkupLanguage）与超文本传输协议（HTTP，HyperTextTransferProtocol)为基础，提供面向Internet服务、具有一致的用户界面的信息浏览系统。2.服务的特点(1)超媒体特性。在中可以多媒体（如文本、图像、声音、动画、影像等）的形式传递信息，从而更吸引人的注意力；使传播的信息更易于接受和理解，从而达到更好的传播效果。(2)以超文本（Hypertext）方式组织多媒体信息。Web中含有指向其它Web页或其本身内部特定位置的超级链接(HyperLink)，可理解为“指针”。任何文字、图片、图标等都可被指定为一个超链接。当你选择链接，只要用鼠标在链接上单击一下，就会跳转到链接的内容并显示在你的计算机上。(3)用户可以在世界范围内任意查找、检索、浏览信息。(4)网点间可以互相链接，以提供信息查找和漫游的透明访问。3.浏览器软件安装在用户的计算机上，用户必须通过浏览器来查看服务器上的内容。当客户通过浏览器向服务器发送一个查询请求时，服务器负责对来自客户机的请求做出回答，找到信息和传递文件给用户；当客户机接收到文件，浏览器软件解释该文件在客户机上，用户才能在屏幕上看到。系统的结构采用客户机/服务器模式。4.（统一资源定位符）Internet中使用URL(UniformResourceLocators)来定位信息资源所在位置。URL格式由三部分组成，描述了浏览器检索资源所用的协议、资源所在计算机的主机地址及资源的路径与文件名。标准的URL如下：表示用户要连接到名为的主机上，采用http方式读取名为index.html的超文本文件。URL通过访问类型来表示访问方式或使用协议。常用的类型有：Webpages://Filefile://2.网页服务器上的基本信息单位就是网页。网页是单个的HTML文件，是作者公布信息的最小单位。3.网站网站是一个存放在服务器上的完整信息的集合体，由一组相关联的网络文件组成，包含一个或多个网页。4.主页（首页）主页是一个特殊的网页，是整个网络文件的起始点和汇总点，读者开始浏览网络文件的开始点。第2节网站界面的基本要素文字图像声音视频与动画超级链接表格表单导航栏1.文字文字是人类最重要的信息载体与交流工具，网页中的信息也以文字为主要表现形式。与图像相比，文字虽然不如图像那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。网页中的文字主要有标题文字和说明性文字。此外，用户还可以在网页中设计各种各样的文字列表，来清晰表达一系列项目。可以对网页中的文字赋予字体、字号、颜色等属性。由文字制作出的网页占用空间小，因此，当用户浏览时，可以很快的展现在用户面前。2.图像一个优秀的网页，除了有吸引浏览者的文字形式和内容外，图像的表现功能是不能低估的。图像能将信息传达的更生动、形象、直观，增强了网页的宣传力、号召力、感染力。1.链接按钮网页上的链接按钮有一些是由小图片取代文字制作，具有直观、形象的特点，可使网页更加美观。2.背景图像为了加强视觉效果，有些网页在整个网页的底层放置了图像（称作背景图）来衬托主题。但是一个比较大的图像，需要占据较大的空间，致使网页的显示速度明显变慢。3.主图在网页中，通常会放置一些图片来突出网页主题。主图与背景图不同，背景图是衬托主题，而主图是突出主题、表现主题。网页中使用的图像格式网页中常用的图像文件格式为GIF,JPEG(JPG),PNG，其中使用最广泛的是GIF和JPEG两种格式。GIF是GraphicsInterchangeFormat的简写，用来存储Indexed-Color模式的图像。它是采用无损压缩方式压缩的图像文件格式。它的GIF89a格式，能储存成背景透明化的形式，并且可以将多张图片保存在同一个GIF文档中，而且能以默认播放的顺序显示这些图片，用来创造动画的效果。普通GIF文件背景透明GIF89A文件动画GIF89A文件JPEG是其制定组织JointPhotographicExpertsGroup的简称，其压缩的方法属于一种失真的处理方式，可以依所需的压缩比率调整图片品质，以得到最小的图片尺寸。PNG是PortableGraphicsNetwork的简称，在1996年才由W3C(WorldWideWebConsortium)所制定的Web标准图片格式。它采用的是一种无损压缩方式，PNG格式也可生成透明背景。目前没有普遍应用于网页设计。3.声音声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3、RM等。很多浏览器不要插件也可以支持MIDI、WAV格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。在网页中使用声音有两种方式，一是使用声音文件作为背景音乐，这时应尽量使用MIDI格式，否则会影响网页下载的速度。另一种方式是在网页中设置一个打开声音文件的链接，让音乐播放变得可以控制。4.视频与动画•视频文件的格式也非常多，网页中常用的有Ram、AVI等。Ram格式需使用专门的播放器播放。•网页中使用的动画通常为gif和swf两种动画文件类型。swf格式需要使用flash播放器。视频和动画的采用让网页变得精彩而有动感。5.超级链接超级链接是从一个网页指向另一个目的端的链接，例如指向另一个网页或者相同网页上的不同位置。这个目的端通常是另一个网页，但也可以是一幅图片，一个电子邮件地址，一个文件，一个程序或者是本网页中的其他位置。其热点通常是文本，图片或图片中的区域，也可以是一些不可见的程序脚本。当浏览者单击超级链接热点时，其目的端将显示在Web浏览器上，并根据目的端的类型以不同方式打开。例如，当指向一个AVI文件的超级链接被单击后，该文件将在媒体播放软件中打开；如果单击的是指向一个网页的超级链接，则该网页将显示在Web浏览器上。加下划线的文字，就是已经建立了超链接的文本。6.表格在网页中表格用来控制网页中信息的布局方式。这包括两方面：一是使用行和列的形式把许多相互关联的信息集中起来，便于用户分析、比较；二是可以利用表格来控制各种网页元素在网页中布局定位，对网页进行排版。利用表格进行排版7.表单网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件，Web页，电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登陆站点等。表单由不同功能的表单域组成，最简单的表单也要包含一个输入区域和一个提交按钮。站点浏览者填写表单的方式通常是输入文本，选中单选按钮或复选框，以及从下拉列表框中选择选项等。8.导航栏导航栏是用户在规划好站点结构，开始设计主页时必须考虑的一项内容。导航栏的作用就是引导浏览者游历站点。事实上，导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。在设计站点中的诸网页时，可以在站点的每个网页上显示一个导航栏，这样，浏览者就可以既快又容易的转向站点的其他网页。一般情况下，导航栏应放在网页中较引人注目的位置，通常是在网页的顶部或一侧。导航栏既可以是文本链接，也可以是一些图形按钮。9.框架页面一般情况下都是一个浏览器窗口显示一个的Web页面，这一类页面简单、直观制作方便。但是当要求在一个窗口内容纳大量信息时，比如一个大型网站的首页，这种页面就很难胜任了。这时，我们就必须运用框架技术来解决问题。框架的作用就是把浏览器窗口划分为若干个区域，每个区域显示不同的网页。提示:网页界面重要的一个元素第3节网站开发常用工具一、网页开发工具二、网页美化工具三、网页动画工具超文本标识语言（HTML）可视化网页编辑工具DHTML技术动态网页技术一、网页制作常用工具HTML（HyperTextMarkupLanguage）是一种专门用于Web页制作的编辑语言，用HTML语言编写的文件是依据HTML语言规范书写而成的文本文件。通过在文本文档中嵌入一系列控制字符，使文档以用户希望的格式用浏览器输出到显示器或打印机。1.超文本标识语言（HTML）HTMLHEADTITLE这里是网页标题/TITLE/HEADBODYbgcolor=#FFFFFFtext=#000000h3align=center这是我的第一个网页/h3pfontsize=3这是用HTML语言编写的，以后还要学习网页编著工具。/font/p/BODY/HTML以下是一个网页的源代码：这是显示结果：在（WorldWideWeb）发展的初期人们制作网页是通过直接编写HTML代码来实现的。这种手工编码制作网页对网页设计人员的要求较高，编码效率低。因此，对大多数网页设计人员来说采用这个方式比较困难。2.可视化网页编辑工具随着网页制作技术的不断发展，出现了诸如FrontPage、Dreamweaver等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，由编辑工具自动生成对应的网页代码。如要在网页上显示表格，就可直接在工作区中绘制表格而不用考虑编码的规则和语法。利用可视化工具编辑网页操作简单直观，是大众化的网页编辑方式。FrontPage是由Microsoft公司推出的Web页面制作工具软件。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便。Dreamweaver是由Macromedia公司推出的一款网页制作软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页。Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用，所以它是网页设计者的首选工具。它可以满足多层次需求，是功能强大的可视化、专业级网页设计及制作工具。3.DHTML技术DHTML是什么？DHTML是DynamicHypertextMar