精品课程《网页设计与制作》PPT课件(全).pptx

1、网页设计与制作,1.1网页概述1.2网页制作工具简介1.3HTML基础1.4实践技能训练,第1章网页基础知识,1.1.1什么是网页Web直译过来就是“网”，可以理解为通过超级连接将各种文档连接起来的一个大规模的信息集合。网页（Web页）实际上就是HTML文件，是一种可以在WWW网上传输，并能被浏览器认识和翻译成页面的文件。WWW是“Worldwideweb”的缩写；HTML则是“HyperTextMarkupLanguage”的缩写，意为“超文本标记语言”，它是一种规范，一种标准。超文本就是指页面可以包含图片、链接、音乐等非文字的元素。制作网页所需要的硬件和软件：硬件：计算机主频最好的P以上，

2、内存最好在128MB以上，必须有足够大的空间来存放网页素材。软件：Dreamweaver8.0是目前制作网页的最新版本，Frontpage也是一个不错的产品。处理网页图像和文字可以选择Fireworks，若要制作网页动画，可以选择Flash。,1.1网页概述,1.1.2网页中的基本元素网页包括的主要元素有：文本、图像、动画、声音、视频、表格、表单等。,1.1网页概述,1.1.2网页中的基本元素1.文本文本是人类最重要的信息载体和交流的工具，网页的主体一般以文本为主。在制作网页时，可以根据需要设置文本的字体、字号、颜色以及所需要的其他格式。文本在网页中的主要功能是显示信息和超级链接，文本通过文字

3、的具体内容与不同的格式来显示信息的重要内容，这是文本的直接功能。此外，文本作为一个对象，往往又是超级链接的触发体，通过文本表达的链接目标指向相关内容。2.图像图像在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。图像可以用作标题、网站标志、网页背景、链接按纽、导航条、网页主图等，网页中使用图像的格式主要有：GIF、JPEG、PNG等格式。,1.1网页概述,1.1.2网页中的基本元素-图像GIF图像。GIF(graphicsinterchangeformat)由Compu-Serve公司1987年6月制订。GIF通常对于卡通、图像、Logo、以及带有透明区域的图像、动化很有作用。G

4、IF文件格式的扩展名是“.gif”.JPEG图像。JPEG（jointphotographicexpertsgroup联合照片专家组）是一种特别为照片图像设计的图片压缩处理格式。JPEG文件采用先进的压缩算法，可以保持较好的图像保真度和较高的压缩比。JPEG文件格式的扩展名为“.jpg”.PNG图像。PNG（portablenetworkgraphic）即可移植网络图形。PNG图像是专门针对Web开发的一种无损压缩图像，它的压缩比要大大超过许多传统的图像无损压缩算法，同时还支持透明背景和动态效果。PNG文件格式的扩展名是“.png”,1.1网页概述,1.1.2网页中的基本元素3.动画动画实质上

5、就是动态的图像。在网页中使用动画可以有效地吸引浏览者的注意。由于活动的对象比静止的对象更具有吸引力，因而，网页上通常有大量的动画。网页中使用较多的动画是GIF动画和Flash动画。4.声音声音是多媒体网页的一个重要组成部分。用于网络声音文件格式非常多，常用的是MIDI、MAV、MP3和AIF等。一般来讲，不要使用声音文件作为网页的背景音乐，那样会影响网页的下载速度。可以在网页中添加一个链接来打开声音文件作为背景音乐，让播放音乐变得可以控制。浏览器的不同，处理声音文件的方式也会有很大的差异和不一致的地方，最好将声音文件添加到Flash影片中，然后嵌入SWF文件以改善一致性。,1.1网页概述,1.

6、1.2网页中的基本元素视频在网页中视频文件格式也非常多，常见的有RealPlayer、MPEG、AVI和DivX、flash等。表格表格是一种用来控制网页中页面布局的有效方式。为了达到理想的视觉效果，通常都不显示边框，我们所看到的网页如果具有横竖分明的风格，一般都是用表格来辅助布局的。许多设计人员使用表格对网页进行布局。Dreamweaver提供两种方式来查看和操作表格：标准视图和布局视图。在标准视图中，表格显示为行和列的网格，而布局视图允许创建者在将表格用做基础结构的同时在网页上绘制、移动方框以及调整方框的大小。,1.1网页概述,1.1.2网页中的基本元素表单表单是一种特殊的网页元素。表单的

7、主要用途是：收集联系信息、接受用户要求、获得反馈意见、设置访问者签名、让浏览者输入关键字去搜索相关网页、让浏览者注册会员或以会员身份登录。登录的用户名、密码、搜索引擎等都是表单。表单由不同功能的表单元素组成，最简单的表单也要包含一个输入区域和一个提交按钮。站点浏览者填写表单的方式通常是输入文本、选中单选按钮和复选框，以及从下拉列表框中选择选项。根据表单功能和处理方式的不同，通常可以将表单分为用户反馈表单、流言簿表单、搜索表单和用户注册表单等类型。,1.1网页概述,1.1.3网页的类型：有3种不同的类型：基本网页、动态网页和模板网页。1.基本网页基本网页又称静态网页，是相对动态网页而言的。工作原

8、理如下。客户端请求服务器接受响应客户端浏览器网页,1.1网页概述,动态网页动态网页中除了基本网页中的元素外，还包括一些程序，这些应用程序需要浏览器与服务器之间发生交互行为，而且应用程序的执行需要应用程序服务器才能完成。应用程序服务器的作用是读取动态网页上的代码，根据代码中的指令完成网页，然后将代码从网页上去掉，所得的结果将是一个静态网页；应用程序服务器将该网页传送回网页服务器，网页服务器将网页发送到浏览器，浏览器得到的仍然是一个纯HTML的静态网页。动态网页是经过人与服务器对话的结果。如图网页上的登录、注册、网上购物等都属于此类网站。,1.1网页概述,动态网页有两种：一种是普通动态网页，它不包

9、含数据库；一种是包含数据库的动态网页。普通动态网页，其工作的过程如图所示,1.1网页概述,.包含数据库的动态网页，如Access、SQL、MYSQL等，其工作过程如图所示：,1.1网页概述,1.1网页概述,3.模板网页模板是提供一个标准页面，它的模式固定，例如页面布局、字体排列等固定不变，只需要改变页面的内容，这有助于读者成批地建立页面风格相同的页面，从而使网站风格得到统一。模板能够带给你对网页功能和布局更为完整的概念，并且模板文件能够让你更容易的浏览页面代码。,1.2网页制作工具简介,1.2.1网页编辑工具1.FrontPage2.Dreamweaver,1.2网页制作工具简介,1.2.2网

10、页动画制作软件Flash也是Macromedia公司推出的产品。Flash8.0可以更好的为网页设计师和开发人员服务，帮助他们提高工作效率，创造丰富的、极具诱惑力个感染力的动画作品。Flash的主要功能是制作动画，这种动画不能是纯粹的动画，还应该具有交互的特点，制作出来的作品应该达到令人目眩的感觉。Flash8.0兼容了以前的版本，凡是以前使用过Flash5.0、FlashMX以及FlashMX2004的用户都可以立即上手，应用起来更方便、更快捷。Flash8.0的功能得到了极大的扩展，用它可以创造完整的动态站点，从内容显示到数据库的连通，以及视频的调整，给用户带来的惊喜是空前的。凭借Flas

11、h8.0的开发环境及新的服务器技术优势，网页的开发者可以通过它建立新一带的网络动画，带来更具视觉震撼力的Web产品。,1.2网页制作工具简介,1.2.3网络图像处理软件Fireworks是Macromedia公司专门为网页设计的Web图形工具软件，它可以用最少的步骤生成最小但质量很高的JPEG和GIF图像，这些图像可以直接用于网页上。Fireworks是Web图形工具的首选软件。Photoshop是由Adobe公司出品的著名的图形图像处理软件。它能够实现各种专业化的图像处理，是专门图像创作的首选软件。,1.3HTML基础-概念,HTML则是“HyperTextMarkupLanguage超文本

12、标记语言”的缩写，它是构成Web页面的主要工具，是用来表示网上信息的符号标记语言。在Internet上，如果要想全球范围内发布信息，需要一个能够被广泛理解的语言，也就是说所有的计算机都能够理解的用语出版的“母语”。WWW（Worldwideweb）所使用的出版语言就是HTML语言。通过HTML，将所需要表达的信息按某种规则HTML文件，通过专用的浏览器来识别，并将这些HTML“翻译”成可以识别的信息，就是我们所见到的网页。,1.3HTML基础-功能,HTML的功能如下：出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。通过超链接检索在线的信息。为获取远程服务而设计表单，可用于检索

13、信息、订购产品。在文档中直接包含了电子表格、视频剪辑、声音剪辑以及其他的一些功能。,1.3HTML基础,1.3.1HTML语言结构的基本标志文档标志。标志用于HTML文档的最前面，用来标识HTML文档的开始。而标志恰恰相反，它放在HTML文档的最后边，又来标识HTML文档的结束，两个标志必须成对使用。文件头标志。和构成HTML文档的开头部分，在此标志之间可以使用、等标志对。标志对之间的内容是不会在浏览器的框内显示出来。两个标志必须成对使用。,1.3HTML基础,1.3.1HTML语言结构的基本标志文件主体标志.是HTML文档的主体部分，在此标志对之间可以包含、等众多标志。它们所定义的文本、图像

14、等将会在浏览器的框内显示出来。两个标志必须成对使用。标志中还可以有如表1-1所示的属性。,1.3HTML基础,1.3.1HTML语言结构的基本标志文件标题标志。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的“主题”。要将网页的主题显示到浏览器的顶部其实很简单，只要在标志对之间加如显示的文本即可。注意：标志对只能放在标志对之间。下面是一个综合的例子，说明了HTML文档中最基本标志的使用。显示在浏览器最上边蓝色条中的文本红色背景、蓝色的文本,1.3HTML基础,1.3.2页面格式标志段落标志.标志对是用来创建一个段落,在此标志对之间加入的文本将按照段落

15、的格式显示在浏览器上。另外，标志还可以使用align属性，它用来说明对齐方式，语法是。align可以是Left（左对齐）、Center（居中）和Right（右对齐）三个值中间的一个。如：表示标志对中的文本使用居中对齐方式。.标志队有来对文本进行预处理操作。,1.3HTML基础,1.3.2页面格式标志2.换行标志是一个很简单的标志，它没有结束标志，因为它是用来创建一个回车换行的。在的使用上面还有一定的技巧，如果把加在标志对的外边,将创建一个很大的回车换行,即前面和后面的文本的行与行之间的距离很大,若放在的里面,则前面和后面的文本行与行之间的距离比较小.,1.3HTML基础,1.3.2页面格式标志

16、3.列表标志、用来创建一个普通的列表,用来创建列表中的上层项目,用来创建列表中最下层项目,和都必须放在标志对之间。下面是一个创建普通列表的例子一个普通的列表中国城市北京上海广州,美国城市华盛顿芝加哥dd纽约,1.3HTML基础,1.3.2页面格式标志3.列表标志、标志对用来创建一个表有数字的列表；标志对用来创建一个标有圆点的列表；标志对只能在或标志对之间使用，此标志对用来创建一个列表项，若放在之间则每个列表项加上一个数字，若放在之间则每个列表项加上一个圆点。中国城市北京上海广州,美国城市华盛顿芝加哥纽约,1.3HTML基础,1.3.2页面格式标志标志对用来排版大块HTML段落，也用于格式化表，

17、此标志对的用法与标志对非常相似，同样有align对齐方式属性。标题格式标志HTML语言提供了一系列对文本中的标题进行操作的标志对：，一共有6对标题的标志对。是最大的标题，而则是最小的标题，也就是说标志中h后面的数字越大标题文本就越小。如果HTML文档需要输出标题文本，就可以使用这6对标题中的任何一对。,1.3HTML基础,1.3.3文本标志1.黑体字、斜体字、下划线标志对用来使文本以黑体字的形式输出。用来使文本以斜体字的形式输出。用来使文本以下加一划线的形式输出。2.文字字型标志文字字型标志还有、。这些标志对的用法和上面讲的一样，差别只是输出文本是字体不一样而已。用来输出打字机风格字体的文本。

18、用来输出引用方式的字体，通常是斜体。用来输出需要强调的文本（通常是斜体加黑体）。则用来输出加重文本（通常是斜体加黑体）。,1.3HTML基础,1.3.3文本标志3.文字大小、字体、颜色标志是一对很有用的标志对，它可以对输出文本的字体大小、颜色进行随意地改变，这些改变主要是通过对它的两个属性size和color的控制来实现的。Size属性用来改变字体的大小，它可以取值：-N、N和+N；而color属性则用来改变文本的颜色。颜色的取值可以是基本标志中讲过的十六进制RGB颜色码或HTML语言给定的颜色常量名。,1.3HTML基础,1.3.3文本标志文本标志的综合应用文本标志的综合示例最大的标题使用h

19、3的标题最大的标题黑体字文本斜体字文本下加一划线文本打字机风格的文本引用方式的文本强调文本加重文本size取值+1color取值为红色时的文本,1.3HTML基础,1.3.4图像标志图像属性赋值标志标志并不是真正地将图像加入到HTML文档中，而是将标志对的SRC属性赋值。这个值是图像文件的文件名，包括路径，这个路径可以是相对路径，也可以是网址。实际上就是通过路径将图形文件嵌入到文档中。所谓相对路径是指所要链接或嵌入到当前HTML文档的文件与当前文件的相对位置所形成的路径。通常有如下情况：假如HTML文件与图形文件（假设文件名为logo.gif）在同一个目录下，则可以将代码写成。.假如图形文件放

20、在当前的HTML文档所在的目录的一个子目录（子目录名假设是images）下，则代码应该为。.假设图形文件放在当前的HTML文档所在的目录的上层目录（目录名假设是home）下，则相对路径就必须是准网址了。即用“./”表示网站，然后在后面紧跟文件在网站中的路径。假设home是网站下的一个目录，则代码应为，若home是网站下的目录king下面的一个子目录，则代码应该为了。,1.3HTML基础,1.3.4图像标志必须强调，src属性在标志中是必须赋值的，是标志中不可缺少的一部分。除此之外，标志还有alt、align、border、width和height属性：alt属于是当鼠标移动到图像上时显示的文本

21、。align是图形的对齐方式。border属性是图形的边框，可以取大于或者等于0的整数，默认单位是像素。width和height属性是图形的宽和高，默认单位是像素。水平线标志标志是在HTML文档中假如一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平的厚度。width是设置水平线的宽度、默认单位为像素。noshade属性不需要赋值，而是直接加入标志即可使用，它是用来假如一条没有阴影的水平线（不假如此属性，水平线将有阴影）。,1.3HTML基础,1.3.5表格标志创建表格标志标志对用来创建一个表格，下表所示的是属性。,1.3HTML基础,1.

22、3.5表格标志行、单元格和表格头标志.、标志对用来创建表格的每一行。此标志对只能放在标志对之间使用，而在此标志对之间加入文本是无用的，因为之间只能紧跟标志对才是有效的语法。标志对用来创建表格中每一行中的每一个单元格，此标志对只有放在标志对之间才识有效的，输入的文本也只有放在标志对之间才有效（即才能被显示出来）。,1.3HTML基础,、和标志对之间的关系,1.3HTML基础,1.3.5表格标志此外，还有align和valign属性，align是水平对齐方式，取值为left(左对齐)、center（居中对齐）、right（右对齐）。valign是垂直对齐方式，取值为top(靠顶端对齐)、middl

23、e(居中间对齐)、bottom(靠底部对齐)。具有width、colspan、rowspan和nowrap属性。width是单元格的宽度，单位用绝对像素值或总宽度的百分比。colspan设置一个表格单元格跨占的列数（缺省值为1）。rowspan设置一个表格单元格跨占的行数（缺省值为1）。nowrap禁止对表格单元格内的内容自动断行。标志对用来设置表格头，文字通常是黑体、居中。,1.3HTML基础,1.3.5表格标志标志对用来设置表格头，文字通常是黑体、居中。,1.3HTML基础,1.3.5表格标志表格标志的综合应用表格标志的综合示例意大利英格兰西班牙AC米兰拂罗伦莎曼联纽卡斯尔巴塞罗那皇家社会

24、,1.3HTML基础,1.3.5表格标志尤文图斯桑普多利亚利物普阿申纳皇家马德里.拉奇奥国际米兰切尔西米德尔斯堡马德里竞技.,1.3HTML基础,1.3.6链接标志1.创建连接页面标志创建页面的标志对的href属性无论如何是不可缺少的，标志对之间假如需要链接的文本和图像（链接图像即加入标志）。Href的值可以是网址或相对路径，也可以mailto:形式。对于第一种情况，语法为,这样就可以创建一个超文本链接了，例如：这是我的网站对于第二种情况，语法为，这就创建了一个自动发送电子邮件的连接，mailto：后边紧跟着要自动发送的电子邮件的地址（即E-mail地址），例如：这是我的电子邮箱（E-mail

25、）,1.3HTML基础,1.3.7标志帧帧可以用来向浏览器窗口中装载多个HTML文件。也就是说每个HTML文件占据一个帧，而多个帧可以同时显示在同一浏览器窗口中，它们组成了一个最大的帧，也就是一个包含多个HTML文档的HTML文件（我们称它为主文档）。帧通常的使用方法是在一个帧中放置目录（即可以供选择的链接），然后将HTML文件显示在另一个帧中。帧属性标志标志对放在帧的主文档的标志对的外边，也可以嵌套在其他帧的文档中，并且可以嵌套使用。此标志对用来定义主文档中有几个帧并且各个帧是如何排列的。它具有rows和cols属性，使用标志时这两个属性至少必须选择一个，否则浏览器窗口只显示第一个定义的帧，

26、剩下的一概不管，标志对也就没有祈祷任何作用了。rows是用来规定主文档中各个帧的行定位,而cols用来规定主文档中的各个帧的列定位。这两个属性的取值可以是百分数、绝对像素值或者“*”，其中“*”代表那些未被说明的空间，如果同一个属性中出现多个“*”则将剩下的未被说明的空间平均分配。同时，所有的帧按照rows和cols的值从左到右，然后从上到下排列，,1.3HTML基础,1.3.7标志帧,1.3HTML基础,1.3.7标志帧帧内容标志.标志放在之间，用来定义某一个具体的帧。标志具有src、name、scrolling和noresize属性，其中src和name属性都是必须赋值的。src是此帧的源

27、HTML文件名（包括网络路径、相对路径或网址），浏览器将会在此帧中显示src指定的HTML文件。name是此帧的名字，这个名字是用来供超文本链接标志中的target属性，用来指定链接的HTML文件将显示在哪一个帧中。例如定义一个帧，名字是main,在帧中显示的HTML文件名是jc.htm，则代码为：。当有一个链接，在单击了这个链接后，文件new.htm将要显示在名为main的帧中，则代码为需要链接的文本。这样一来，就可以在一个帧中建立网站的目录，加入一系列链接，当单击链接以后在另一帧中显示被链接的HTML文件。scrolling用来指定是否显示滚动轴，取值可以是“yes”（显示）、“no”（不

28、显示）、“auto”（若需要则会自动显示，不需要则自动不显示）。noresize属性值直接加入标志中就可以使用，不需要赋值，它用来禁止用户调整一个帧的大小。,1.3HTML基础,1.3.7标志帧.标志对也是放在标志对之间，用来在那些不支持帧的浏览器中显示文本或图像信息。帧标志的综合应用下面是一个有关帧的综合应用的例子。主文档：帧标志综合示例对不起,您的浏览器不支持帧!,1.3HTML基础,1.3.7标志帧目录页meun.htm:目录目录链接到第一页链接到第二页第一页pagel.htm第一页这是第一页!第二页page2.htm第二页这是第二页!,1.3HTML基础,1.3.8表单标志创建表单标志

29、标志对用来创建一个表单，也就是定义表单的开始和结束位置，在标志对之间的一切都属于表单内容。标志还有action、method和terget属性。action的值是处理程序的程序名（包含绝对路径和相对路径），如：当用户提交表单时，服务器将执行网址,1.3HTML基础,1.3.8表单标志定义输入区标志标志用来定义一个用户输入区，用户可以在其中输入信息。此标志必须放在标志对之间。标志中共提供了八种类型的输入区域，具体是哪一种类型由type属性来决定，这八种类型的具体内容见表1-5。,1.3HTML基础,1.3.8表单标志3.创建列表框标志标志对用来创建一个下拉列表框或可以复选的列表框。此标志对用于标

30、志对之间。具有multiple、name和size属性。name是此列表的名字，它与上面介绍的name属性作用是一样的。size属性用来设置用来设置列表的高度，缺省时值为1，若没有设置（加入）multiple属性，显示的将是一个弹出式的列表框。.标志是用来指定列表框的一个选项，它放在标志对之间。此标志具有selected和value属性。Selected属性用来指定默认的选项。Value属性用来给指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用区域的名字的value属性来获得该区域选中的数据项。,1.3HTML基础,1.3.8表单标志,1.3HTML基础,1.3.8表单标志

31、4.创建文本框标志用来创建一个可以输入多行的文本框,此标志对用于标志对之间。具有name、cols和rows属性。cols和rows属性分别用来设置文本框的列数和行数，这里的行和列是以字符为单位的，如表1-7例子所示。,1.3HTML基础,1.3.9多媒体标志多媒体标志用于插入音乐和各种多媒体插件。插入背景音乐标志用来插入背景音乐，但只适用于IE，其参数设定不多。例如：src=your.mid设定midi档案及路径，可以是相对路径，也可以是绝对路径。autostart=true是否在音乐文件传完之后，就自动播放音乐。true表示是，false表示否（内定值）。loop=infinite是否自动

32、反复播放。loop=2表示重复2次，infinite表示重复多次。输入各种多媒体标志用以插入各种多媒体，格式可以是MIDI、MAV、AIFF、AU等等，netscape及新版的IE都支持。其参数设定较多。,1.3HTML基础,1.3.9多媒体标志输入各种多媒体标志用以插入各种多媒体，格式可以是MIDI、MAV、AIFF、AU等等，netscape及新版的IE都支持。其参数设定较多。例如：src=your.mid设定midi档案及路径，可以是相对路径，也可以是绝对路径。autostart=true是否在音乐文件传完之后，就自动播放音乐。true表示是，false表示否（内定值）。loop=tru

33、e是否自动反复播放。loop=2表示重复2次，infinite表示重复多次。hidden=true是否完全隐藏控制画面，true为是,no为否（内定）。Starttime=分：秒设定歌曲开始播放的时间。如Starttime=00：30表示从第30秒处开始播放。Volume=0-100设定音量的大小，数量是0到100之间。内定值为使用者系统本身设定。Width=整数和high=整数,1.3HTML基础,1.3.9多媒体标志设定控制画面的宽度和高度（若hidden=no）。Align=center设定控制画面和旁边文字的对齐方式，其值可以是top、bottom、center、baseline、le

34、ftrighttexttop、middle、absmiddle、absbottom。Controls=smallconsole设定控制画面的外貌。预设值是console.其中console一般正常的面板；smallconsole较小的面板；piaybutton只显示播放按钮；pausebutton只显示暂停按钮；stopbutton只显示停止按钮；volumelever只显示音量调整按钮。,1.3HTML基础,1.3.10其他标志适用于IE,译为“跑马灯”。例如statusBar，其意思是指走动或卷动的文字，其参数设定较多。例如：hellobehavior=scroll设定文字的卷动方式，可选

35、值为：scroll一般卷动，使内定值。slied例如幻灯片，一格格的,效果是文字一接触左边便全部消失。alternate文字向左右两边撞来撞去。direction=left设置文字卷动方向，left表示向左，是内定值，right表示向右。bgcolor=#0000ff设置文字卷动范围的背景颜色。height=30width=150设置文字卷动范围，可以采取相对或绝对，如30%或30等，单位为像素。hspace=0vspace=0设定文字的水平及垂直空白位置。,1.3HTML基础,1.3.10其他标志loop=infinite设定文字卷动的次数，其值可以是正整数或infinite,infinit

36、e是内定的，表示无限次。scrollamount=30设定每“格”文字之间的间隔，单位是像素。scrolldelay=500设定文字卷动的停顿时间，单位是毫秒。2.是令文字闪烁，只适用于netscape,用法直接，没有参数。例如：天上的星星不说话，地上的孩子叫妈妈显示的结果为：天上的星星不说话，地上的孩子叫妈妈是放在之间的标志，此处以公式的形式进行介绍。该网页的描述，作用于寻找引擎的登录。该网页的关键字，作用于寻找引擎的登录。,1.3HTML基础,1.3.10其他标志是放在之间的标志，此处以公式的形式进行介绍。该网页的描述，作用于寻找引擎的登录。该网页的关键字，作用于寻找引擎的登录。以上两行命

37、令的功能相同，都是要求浏览器重新载入该页面，不使用缓存中的信息，expires时间可以修改。,1.3HTML基础,1.3.10其他标志-设定这是HTML文件及其编码语系，中文网页请使用BIG5，或者不设编码也可，纯英文网页建议使用ISO-8859-1。表示该网页由什么编辑器写成。这一行较为实用，能在预定的秒数内自动转到指定的网址，原始码中的10表示10秒。,1.3HTML基础,1.3.10其他标志用来将目前文件与其他URL做链接，但不会有链接按钮，用于标志，格式如下：,1.4实践技能训练,实例1.字体设置标记实例说明：本实例介绍字体设置标志的方法，效果如图1-12实例分析：利用字体设置标志，设

38、置字体的大小、颜色及字体的属性，完成字体设置的HTML网页的制作。实例2.字符修饰标记实例说明：本实例介绍字符修饰标记的使用方法，效果如图1-13。实例分析：利用字符修饰标记，、，完成字符修饰HTML网页的制作。实例3：表格标记实例说明：本实例介绍表格标记的使用方法，效果如图1-14。实例分析：利用表格标记，元素用于定义一个表格，每一个表格只有一对。用来定义表格单元，一张网页可以包含多个表格单元。用来定义表格的行，用来定义表格的头。,网页设计与制作,2.1Dreamweaver8.0界面介绍2.2Dreamweaver8.0常用工具2.3Dreamweaver8.0的功能简介2.4使用Drea

39、mweaver8.0处理图片2.5在Dreamweaver8.0中规划站点2.6本地站点的搭建与管理2.7实践技能训练,第二章Dreamweaver8.0入门,2.1.1Dreamweaver8.0界面介绍在首次启动Dreamweaver8时会出现如图2-1的一个界面,这是一个“工作区设置”对话框，在对话框左侧是Dreamweaver8的设计视图，右侧是Dreamweave8的代码视图。Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。,2.1Dreamweaver8.0界面介绍,2.1.1Dreamweaver8.0界面介绍D

40、reamweaver8.0标准工作界面大致可以分为以下几个区域:标题栏:菜单栏：文档工具栏：“插入”栏：文档窗口：属性栏：状态栏：浮动面板组：,2.1Dreamweaver8.0界面介绍,2.2.1菜单栏工具文件：用来管理文件。插入：用来插入各种元素.修改：具有对页面元素修改的功能。文本：用来对文本操作。命令：所有的附加命令项站点：用来创建和管理站点窗口：用来显示和隐藏控制面板以及切换文档窗口帮助：联机帮助功能。,2.2Dreamweaver8.0常用工具,2.2.2文档工具栏“文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用

41、操作（如在浏览器中预览）。界面如图2-4所示。,2.2Dreamweaver8.0常用工具,2.2.3“插入”栏插入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选项。有常用、布局、表单、文本、HTML、应用程序、Flash元素和收藏夹共8个二级菜单共167个按钮。插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像、声音、多媒体动画、表格。图层、框架、表单、Flash和ActiveX等网页元素。面板的界面如图2-5所示。,2.2Dreamweaver8.0常用工具,2.2.4文档窗口“文档”窗口显示当前文档。可以选择下列任一视图：“设计”视图是一个用于可视化页

42、面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver8.0显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。“代码”视图是一个用于编写和编辑HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。“代码和设计”视图使您可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。,2.2Dreamweaver8.0常用工具,2.2.5属性栏属性面板并不是将所有的属性加载在面板上，而是根据我们选择的对象来动态显示对象的属性属性面板的状态完全是随当前在文档中选择的对象来确定的。例如，当前选择了一幅图像，那么属性面板上

43、就出现该图像的相关属性；如果选择了表格，那么属性面板会相应的变化成表格的相关属性。属性面板的界面如图2-8所示。,2.2Dreamweaver8.0常用工具,2.2.6状态栏“文档窗口”的底部的状态栏提供了与你正在创建的文档的有关其他信息。“文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击可以选择文档的整个正文。,2.2Dreamweaver8.0常用工具,1.将世界一流水平的“设计”和“代码”编辑器合二为一，在设计窗口中精简源代码，是用户能够按照工作的需要指定自己的用户界面。2.

44、跨浏览器有效检查当保存时，自动地检查当前文档跨浏览器的有效性（兼容性），可以指定测试浏览器，同时自动检测以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检测功能可以自动核对tags或CSS规则是否适应目前的主浏览器。3.使用内置的图形编辑程序让开发更加节省时间。图像的剪切、缩放等一系列的辅助性的图象编辑功能可以使用内嵌的MacromediaFireworks技术。4.在设计模式下允许开发者可以不用固定的浏览器预览数据，而利用LiveData窗口预览实时数据。,2.3Dreamweaver8.0的功能简介（1）,5.功能更多的CSS支持在设计窗口中运用重新设计的标签检测

45、工具来检测哪个CSS规则运用与当前的选择。即时编辑功能让你在编辑CSS的同时能够即时看到设计窗口中的变化。使用增强的CSS面板直接在代码内部定义样式，并且可以直观地看到CSS样式定义的位置。不必切换编辑方式直接选取CSS样式，样式下拉列表中内置了所有可用样式的预览显示。通过页面属性对话框（“修改”菜单“页面属性”）获取更多改变页面控制属性（如标题、链接等）。,2.3Dreamweaver8.0的功能简介（2）,6.运用完整的集成开发环境来开发HTML、XHTML、XML、ASP、ASP.NET、JSP、PHP和MacromediaColdFusion站点。通过Macromedia插件中心可以获

46、取800多个免费插件来制定和扩展你的开发环境。7.所有传输的文件完全加密，并阻止越权存取你的信息、文件内容、用户名和口令。8.从MicrosoftWord和Excel中直接拷贝粘帖内容到Dreamweaver中，同时保留字体、颜色和CSS样式。完全支持Unicode，支持使用和chu存任何字体以及编码（包括双字节字符）。9.使用改进后的ASP.NET对象和属性检测工具构建MicrosoftASP.NETWebforms.,2.3Dreamweaver8.0的功能简介（3）,10.重新编写PHP语法和服务器行为，包括Master-Detail页面设置模块、用户身份验证模块等。通过内置的Flash

47、构件，导入一个Flash构件就像标签一样轻松。MXHTML构件，利用MX组件（包括按钮、模板）快速建立有效的用户界面。改进的表格编辑工具，修改的Insert面板，高效的文件编辑过程。更多有效地代码编辑（如按右键弹出的编码工具），更多的搜索选择项并且能够保存搜索条件，以及能够迅速启动属性检查工具。详尽的属性编辑，列出每个适用于当前选择项的可用属性。此外Dreamweaver8.0还增加了图片处理功能：图片的亮度和对比度的调节、图片的锐化效果等。,2.3Dreamweaver8.0的功能简介（4）,在Dreamweaver中插入一张图片，“属性”面板上就多了几个与图片相关的属性图标。改变图片的大小

48、后，在图片大小设置栏旁边就多了一个带箭头的图形按钮图标，这是快速使图片还原到原始大小的工具。在切换到Fireworks图标旁边的一组图表之中，也是一个这样的图标。Dreamweaver8.0同时还增加了“剪切(Crop)”工具（剪切图片）、“亮度/对比度”调节工具、“锐化”工具等三个图片处理的新功能。有了这些简单的图片处理工具，在编辑网页图片时，不需要启动其它的图像处理软件，提高了工作效率。,2.4使用Dreamweaver8.0处理图片,图片剪切2.亮度的调节3.锐化,2.4使用Dreamweaver8.0处理图片,在Dreamweaver中,站点这个术语既可以是Web站点,也可以指属于We

49、b站点的文档在本地存储的位置。当开始考虑创建Web站点时，为了确保站点的成功，应该按照一系列的规划步骤进行。即使创建个人的主页，只有朋友和家人看见，仔细规划站点也是有用的。要开发一个优秀的网站，通常应该遵循以下工作流程：首先定义开发网站的目的，作好网站的规划工作；接下来对网站的外观进行设计；然后进行实际页面的制作；接着再对制作的网站进行测试，以确保所做的网站符合最初设计的目标；最后是将网站发布。发布网站后还要定期对网站进行维护，以便及时更新网站内容。,2.5在Dreamweaver8.0中规划站点(1),网站的规划主要包括以下内容：1.确定网站的主题和名称网站主题是指用户建立网站所要包含的主要

50、内容。现在网站的主题很多，这一步是整个网站规划环节最重要的。一般来说，确定网站主题时要遵循以下原则：主题鲜明、小而精。一个网站必须有一个明确的主题，在主题范围内做到内容大而全、精而深。主题是自己最擅长的最感兴趣的。找准一个自己最赶兴趣的内容做深、做透。体现自己的个性。把自己的兴趣、爱好尽情的发挥出来，突出自己的个性，办出自己的特色。,2.5在Dreamweaver8.0中规划站点(2),2.搜集资料确定网站的主题后，要围绕主题开始搜集资料。资料既可以从图书、报纸、光盘、多媒体上获得，也可以从网上搜集；然后再把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。3.规划站点规划站点就像设计一座

51、大楼一样，只有图纸设计好了，才能建成一座漂亮的楼房。在规划网站时，首先要把网站的内容一一列举出来，根据内容列出一个结构化的蓝图，根据实际情况设计各个页面之间的链接。网站的规划内容有：确定网站点题材，确定网站的名称，确定网站的框架等。,2.5在Dreamweaver8.0中规划站点(3),4.栏目的设置合理的设计网站的栏目和板快，一般要注意以下事项：突出主题。把主题栏目放在最显眼的地方，让访问者更快、更鲜明地知道你的网站所要表现的内容。设计一个“最近更新”的蓝目。5.目录结构设计目录结构设计一般要注意以下事项：按照栏目内容建立子目录。每个目录下分别为图像创建一个目录image。目录的层次不呢感太

52、深，最好少于5层。尽量使用意义明确的非中文目录（一般用拼音）。,2.5在Dreamweaver8.0中规划站点(4),6.颜色搭配合理地应用色彩是非常关键的，不同的色彩搭配产生不同的效果，并能够影响访问者的情绪。色彩搭配要遵循和谐、均衡、重点突出的原则。7.版面布局网页页面的版面布局是不可忽视的。要合理地运用空间，使网页疏密有致，井井有条。版面布局一般遵循的原则是：突出重点、平衡和谐，将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置。同时还要注意其它也面和首页的风格一致性，要有返回首页的链接。,2.5在Dreamweaver8.0中规划站点(5),8.图像的运用网页上不能只有文字，必须

53、适当地增加一些图像，使用图像一般要注意以下事项：图像为主页的内容服务，不要让整个页面花花绿绿，喧宾夺主。图像要兼顾大小美观。图片不仅要好看，还要在保证图片质量的情况下尽量缩小图片的大小。单张图像不要超过30KB。合理地使用JPG和GIF格式。一般来说，颜色较少的（在256色以内的）图像把它处理成GIF格式；颜色比较丰富的图像，最好把它处理成JPG格式。,2.5在Dreamweaver8.0中规划站点（6）,要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站传到互联网的web服务器上。放置在本地磁盘上的网站被称为本地站点，位于互联网web服务器里的网站被称为远程站点

54、。Dreamweaver8.0提供了对本地站点和远程站点强大的管理功能。在Dreamweaver8.0中可以有效的建立并管理多个站点。搭建站点可以有两种方法，一是利用向导完成，二是利用高级设定来完成。1.定义站点2.搭建站点结构3.文件与文件夹的管理,2.6本地站点的搭建与管理,网站建好之后需要将做好的网页上传到一个服务器，以便网站能够被其他人访问。Dreamweaver8集成了远程站点的管理工具，可以方便地管理本地站点与远程服务器中的文件。2.7.1获得WEB服务器2.7.2定义远程站点2.7.3上传站点,2.7站点的发布,2.7.1建立并设置本地根文件夹2.7.2定义站点2.7.3创建0D

55、BC连接,2.7实践技能训练-站点的建立,网页设计与制作,3.1创建一个新文档3.2文字处理3.3图像处理3.4超级链接3.5使用多媒体对象,第3章创建和编辑网页文档,3.1.1创建新的空白文档在Dreamweaver8.0中可以创建新的空白文档、创建以模板为基础的文档以及打开并编辑已经存在的文档。三种方法：1、从启动界面中的“创建新项目”组合框中选择合适的文件类型，即可直接进入文档窗口进行编辑。2、也可选择主菜单中的“文件”“新建”命令，系统弹出新建文档对话框。3、按下Ctrl+N快捷键，系统弹出新建文档对话框。,3.1创建一个新文档,3.1.2打开现有文档在Dreamweaver8.0中可

56、以打开现有的Web页或基于文本的文档，即使这些文档不是用Dreamweaver8.0创建的也可以将其打开，然后利用Dreamweaver8.0在“设计”视图或“代码”视图中编辑该文档。打开现有的文档有以下几种方法：1.在“文档”窗口中打开选择的文档2.导入Word文档3.在资源管理器中打开文档,3.1创建一个新文档,3.1.3设置页面属性页面属性是指网页的一般属性信息，例如，网页标题、网页背景颜色、背景图像、超链接颜色、跟踪图像等。1.设置网页标题及编码2.设置网页其他属性(1)外观(2)链接(3)跟踪图像,3.1创建一个新文档,文字处理主要包括：输入文字、设置文字大小、设置字体、设置文本颜色

57、、设置文本对齐方式等。3.2.1输入文字1输入文字：打开Dreamweaver8.0之后，然后在需要插入文本的位置单击鼠标左键定位插入点，然后输入文字。如果需要开始新的一段，按键即可，对应的HTML标签是；如果想换行显示一段内容，可以按组合键，对应的HTML标签是；如果输入的文字超出一行的范围，输入的文本将自动换行。,3.2文字处理,2输入连续空格在Dreamweaver8.0中一般只能输入一个空格，若要输入连续的空格时，可以采用下面几种方法中的一种：执行菜单命令“编辑/首选参数”，打开“首选参数”对话框后，选定“分类”栏中的“常规”选项，然后在右边编辑选项中勾选“允许多个连续的空格”复选框即

58、可。将光标定位到需要输入多个空格的位置，切换到代码视图即HTML源文档中连续输入多个“”，或者单击插入工具栏文本分类中的“字符”对象，弹出下拉菜单，选择“不换行空格”选项即可。切换到中文输入法，设置为全角输入状态，然后在欲连续输入空格的位置按空格键。3输入特殊字符,3.2文字处理-输入文字,3.2.2编辑文字1设置文字标题与段落设置文字段落与标题的方法基本相同，方法如下：(1)将光标定位到应用段落样式或文本样式的文本中，或直接选取文本。(2)单击属性面板中的格式选择框，在弹出的下拉列表中选择“段落”或“标题”。切换到代码视图，我们就会发现，字符属性面板的“格式”列表框中的“段落”、“标题1”、“标题2”、“标题3”、“标题4”、“标题5”、“标题6”和“预先格式化的”等选项，分别对应HTML语言中的、和标记。,3.2文字处理,2设置文字字体及大小(1)设置字体(2)设置字号3设置文本颜色4设置方本对齐方式,3.2文字处理-编辑文字,3.2.3插入水平线水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。1、插入水平线将光标移到要插入水平线的位置，执行菜单“插入”“HTML”