网页设计与制作 第1章 基础知识.ppt

《网页设计与制作 第1章 基础知识.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作 第1章 基础知识.ppt（44页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第1章章 基基 础础 知知 识识l【本章导读本章导读】本章主要介绍了网页制作的基本知识：第一节介绍网页的基本概念和要素，在此基础上简述网页制作的一般过程；第二节介绍了关于HTML的基本知识，并以实例的形式演示了多种常用标签的使用方法；第三节主要为读者介绍在网页制作过程中涉及到包括网页编辑、图像处理、动画 制 作 等 方 面 的 一 些 软 件；最 后 一 节 简 单 讲 解 了D r e a m w e a v e r软件的安装过程。l【本章要点本章要点】l网页的基本概念和要素l网页制作流程lHTML的基本知识l网页制作常用软件lDreamweaver安装过程l1.1基本概念l1.2HTML

2、基础l1.3网页制作软件l1.4Dreamweaver8初识1.1 基基 本本 概概 念念l1.1.1网页的基本概念l（1）互联网 互联网(Internet)是一个由各种不同类型、规模的独立运行和管理的计算机网络所组成的全球范围的计算机网络，组成Internet的计算机网络包括局域网(LAN)、城域网(MAN)以及大规模的广域网(WAN)等。这些网络通过普通电话线、高速率专用线路、卫星、微波和光缆等通讯线路把不同国家的大学、公司、科研机构以及军事和政府等组织的网络连接起来，由此，互联网也称为全球信息资源网。互联网的基础建立于20世纪70年代发展起来的计算机网络群之上，它的飞速发展，已经成为人们

3、日常生活中非常重要的一 部 分，通 常 也 把 它 叫 做 信 息 高 速 公 路。l（2）网页网页是由HTML或者其他语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。网页一般可分为“静态页面”和“动态页面”。静态页面是指网页文件中没有程序，而只有HTML代码，一般以.html或者.htm为后缀名。动态网页就是指网页文件中不仅具有HTML标记，而且还含有程序代码，并通过数据库建立连接，通常以.asp、.a s p x、.j s p、.p h p等为后缀名。l（3）HTML HTML是Hypertext Marku

4、p Language的缩写，中文的意思是“超文本标记语言”，用它编写的文件的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。l1.1.2网页的基本要素l（1）文字 文字也称为文本，是网页最基本的构成要素。由于文字所表达的内容比较清楚、直接，而且占用网页版面较小、所表达的信息量较大，所以网页大多采用文字来表达内容或实现链接。网页的设计和制作者可以通过设置字体、字号、颜色、底纹等属性来改变文本的视觉效果。l（2）图像 图像也是网页主要的构成要素，有动态和静态之分，主要用于实现链接。与文字相比，图像更为直观、容易理解。图像可提高站点的访问率，但不能因此而在网页上加入过多的图像，这样

5、会适得其反。一方面是由于图像占网页空间较大，使网页信息量相对减少；另一方面由于图像较多，使网页显示的速度降低，导致用户浏览网页花费的时间较长。目前，Web图像的文件标准格式是JPG、GIF和PNG，对颜色具有平滑渐变的图像使用JPG格式，如大多数照片；对于以单一颜色为主的图像，使用GIF格式。l（3）多媒体 多媒体(Multimedia)就是指各种各样的信息载体在计算机中的应用，是一种文字、声音、图像、动画和视频影像成分的交互组合。网页中的多媒体主要指采用音频和视频功能的软、硬件技术，包括数字音响、全动态图像、超媒体链接等，主要是实现对声音、图像具有编辑处理的功能，即网页上提供的音频和视频下载

6、及播放功能，包括Flash动画、声音与影片文件的播放。这些必须通过网络媒体播放器来实现，如常用的Windows Media Player和Realone Player等播放器。l（4）超链接 超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。按照链接路径的不同，网页中超链接一般分为以下3种类型：内部链接、锚点链接和外部链接。如果

7、按照使用对象的不同，网页中的链接又可以分为：文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等。l（5）交互功能 交互功能，即网上提供的聊天、论坛、留言本、邮件发送及接收的互动功能。这也是互联网的一大优势所在，它给人们提供了一个快捷交流的平台，为人们的生活带来了许多便利。l（6）导航栏 导航栏是用户在规划好站点结构，开始设计主页时必须考虑的一项内容。导航栏的作用就是引导浏览者游历站点。导航栏实质上就是一组超级链接，这组链接的目标就是本站点的主页和其他重要的网页。在制作站点中的诸网页时，可以在站点的每一个页面上都显示导航栏，这样就便于浏览者可以快速地转向其他网页。l（7

8、）其他常见元素 网页中除了以上几种常见的元素以外，还有其他一些常用的元素，例如：悬停按钮、Java特效、ActiveX等各种特效。它们不仅可以点缀网页，使网页更加生动有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。l1.1.3网页制作一般过程l（1）确定站点的主题 首先要确定在网页中提供的信息内容，即站点的主题，应选择自己较擅长的内容或关心的领域。确定了站点内容以后，为了制作别具一格的网页，可以利用搜索引擎寻求相关的网站进行参考，并最终确定网页中的菜单样式和服务项目。l（2）收集相关内容和信息 确定好网页内容以后，就要开始收集相关的网页素材。素材既可以从互联网上搜集，也可以从图书、报

9、纸、光盘、多媒体上得来，然后对搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。l（3）设计网页版面 收集好所需的相关素材以后，就要开始设计网页的结构。在进入实际的操作之前，有必要先勾画出要制作的网页版式和结构草图，把构成网页的主页面、子页面等制成顺序表，并记录颜色、菜单样式、使用方法等。l（4）整理文本和图片等素材 设计好网页版式后，就应该准备并整理网页中的文本和图片等元素。可以将网页中要用到的内容保存为文本文件，利用Photoshop图像编辑软件来处理前面收集到的图片素材或制作新的图片，如菜单图标、标题图片、背景图片等网页元素。如果在网页中应用了动画效果，那么可以利用Flash软件制作

10、所需的文件。l（5）利用网页编辑软件制作HTML文档 如果在第四阶段已经准备了所有需要的元素，下一步就可以利用Dreamweaver 8等网页编辑软件制作HTML文档了。首先利用表格和框架制作网页文档版面，然后从文本文件中复制所需的文本，设置文字的颜色和字体，再把在Photoshop中制作的图片插入到适当的位置，之后可以设置链接、应用行为等。l（6）检查测试网站后上传到服务器 制作完网页后，应利用预览功能检查网页效果和链接等是否正确。最后将网页上传到服务器中去。l（7）推广宣传 网页做好之后，还要不断地进行宣传，这样才能让更多的浏览者认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜

11、索引擎上注册、与别的网站交换链接、加入广告链接等。l（8）维护更新 网站要注意经常维护更新内容，保持内容的新鲜，只有不断地给网站补充新的内容，才能够吸引住浏览者。返回1.2 HTML 基基 础础l1.2.1HTML语言初识 HTML语言是一种用来制作超文本文档的简单标记语言。严格地说，它不是一种真正的编程语言，只是一种标记符。用HTML编写的超文本文档称为HTML文档，它能够独立于各种操作系统的平台上(如UNIX、Windows等)。自1990年以来，HTML就一直被用做WWW上的信息描述语言，用于描述网页的格式设计及它与WWW上其他网页的链接信息。由于HTML语言简单易学，所以到目前为止，在

12、WWW上面大多数代码都是用HTML来设计的。l1.2.2HTML语法规则 HTML的语法规则表达方式有以下3种：l（1）对象 该标记为封闭标记形式，在多数情况下标记是封闭型的，并且成对出现，即在对象内容的前面是一个标记，在对象内容的后面是另一标记，第二个标记元素前带有反斜线，表明对对象控制的结束标记。l（2）对象 该标记为封闭类型标记的扩展形式，利用属性可以设置对象某方面的内容，而参数则是设置的结果。l（3）该标记为非封闭类型标记，在HTML语言中，非封闭类型很少，常用的是换行标记。此外，标记之间可以相互嵌套，形成更为复杂的语法。l1.2.3HTML文件的基本结构 一个HTML文件可由下列3部

13、分组成：l（1）标记：单一标记：只要一个标记就能完成所要表示的功能，如可以显示一条水平的分隔线；成对标记：需要两个标记组合才能完成所需功能，如及、及。l（2）文字与图形资料：文字与图形是指提供给浏览信息的人阅读的内容，而WWW显示的图形都是以个别的文件存在的。若要显示图形，必须使用特殊的标记指向图形文件。l（3）统一的资源定位器URL：URL是WWW上文件的参照格式，浏览者在浏览器的地址处输入URL格式的内容，就可取得所指的主机的主页。HTML文件一般以开头，以结尾；它包括头部和主体，其基本结构形式为：网页标题 网页内容 l1.2.4HTML常用标签l1.HTML标记符 HTML文件标记符仅由

14、一个html元素组成，即文件的开始和文件的结尾。文件的其他部分都是html的元素体。这一组标记符是告知浏览器，它是一份HTML文件，即是一个网页的格式。通常，这一组标记符都出现在网页开始和结束的地方，将所有的源代码都包起来。它是HTML文档里最基本的一个标记。l下面来看一个比较完整的例子：网页制作教学 正文部分 l2.文件头标记符 文件头标记符Meta，也就是通常见到的Meta标记符，Meta标记符在网页中是看不到的，因为它包含在HTML语言的“”标记符之间，而人们通常所见到的网页内容是在“”之间。Meta是文件头标记符中常用的一个标记符，说明与网页有关的信息，如创作工具、文件作者等。这些标记

15、符可以为服务器提供参考信息，如发布日期，刷新设置等。Meta主要是针对网络中的搜索引擎建立的，它的信息被搜索引擎猎取并被提取所需要的内容。在Meta中常用的属性有：name、Http-equiv和content。name给出特性名，content给出特性值，告知网页使用的是HTML语言，应用GB 2312字符集，Http-equiv属性指定HTTP响应名称，通常用于替换name，HTTP服务器使用该属性值为HTTP响应消息头收集信息。在网页文档里单击“显示代码视图”，可以看到Meta标记符，并可以在属性对话框里对Meta标记符进行查看和修改，如图1-1和图1-2所示。图1-1图1-2l3.文件

16、标题标记符 文件标题(title)元素是文件头里惟一一个必须出现的元素，它也只能出现在文件头里。它的格式如下：标题 标题表示该HTML文件的名称，是对文件的概述。标题对于一个文件来说是非常重要的，用户可以从一个好的标题中判断出该文件大概的内容。不过文件的标题一般不会显示在文档窗口中，而以窗口的名称显示出来。对于标题来说，虽然它的长度没有受到限制，但一般应使它在64个字符以内。下面是一个最简单的HTML文件。简单的文档测试页 大家好！l显示如图1-3所示。图1-3l4.文件体标记符 文件体标记符body由开始，以结束，它的中间是网页文档的正文部分。用户在网页中进行背景颜色或者字体、图片等设定，都

17、要放在这个标记符里。l5.标题标记符 标题标记符hn用于显示HTML文件的各级标题，格式如：标题内容。其中n为16的数字，数字越大，字越小。也就是说(h1)最大，(h6)最小。标题内容一般用黑体字显示，各行之间自动换行。在制作网页时，(h4)一般用做文本正文，而(h6)字体由于太小，一般用得很少。l6.字体和段落标记符l（1）网页中字号大小设定标记符 网页中字号大小设置的语法是：文字内容。字号大小一共有7种，对应字号最小，对应字号最大。另外，还有一种写法：文字内容，其意思就是说：比预设字大一级。当然也可以font size=+2(比预设字大二级)，或是font size=-1(比预设字小一级)

18、，以一般而言，预设字体多为3。l（2）文字的字形设定标记符l字形设定主要是指文字的字形，比如说宋体、楷体等，它们在网上使用十分广泛，惟一的一个限制是：浏览者的计算机里也要有该字形！否则看到的仍然是宋体。另外要说明的是，这个标记符无法保证在每个浏览器上都能正常地显现，如果看不到特殊的字形时，浏览器将会以宋体来显示。l7.图像标记符l在HTML里，一般用来表示插入的图像。在这里，img表示图像的标记符，而属性src后面的引号中表示图像路径及文件名，width表示图像的宽度，height表示图像的高度，align为图像的对齐方式。一般使用的图像格式有两种，gif和jpeg，二者的加载方法一样。在使用

19、图像标记符时有两件事值得注意：一是文件名，二是路径。如果文件名和路径不正确，在网页中的图像是无法显示的，如图1-4所示。l8.表格标记符l在HTML里，一个表格由开始，由结束，在表格里的属性中，表示表格的行，表示单元格组成。此外还可以设置表格的表宽“width=#”和表高“height=#”，#表示是以像素为单位的整数。边框宽度“border#”，#为宽度值，单位是像素。表格间距即划分表格的线的粗细用“cellspacing=#”来表示，表格颜色用“bgcolor=#”来表示，#是十六进制的6位数，格式为“rrggbb”，表示红、绿、蓝三色的分量。表格的合并在中使用rowspan或colspa

20、n。一个简单的例子如图1-5所示。在Dreamweaver 8里，选择“显示代码视图和设计视图”，就可以看到表格以及它的代码显示。l9.框架标记符l使用框架可以将浏览器分成多个区域，每个区域都是相对独立并可以显示的HTML文件。它的基本结构如下：lllllllllll框架的标记符为，它表示一个框架组，它可以将框架分为横的部分和竖的部分。比如横向分框用来设定，纵向分框用来设定，要分割几个框架，就一定会有几个相对应的html文档。而表示单个的框架。此外，需要注意的是，有的浏览器版本较低，无法显示frame的功能，因此可以使用标记符来显示在不支持框架的浏览器窗口中的内容，方便用户阅读网页。l1.3.

21、2图像处理软件 做网页需要有一定的平面设计基础，如果设计者只会写程序，没有一定的界面设计功底，即便你的程序编写得再好，没有美观的界面为依托，还是没有人愿意来看你的网页。在网页制作过程中常用的图像处理软件有：lPhotoshop：网页设计者必须精通的一个图形处理工具。lImage ready：在用Photoshop将界面设计完成后，切换到Image ready进行界面分割处理，快速完成由图到网页的过渡。lACDSee：目前最流行的数字图像处理软件，广泛应用于图片的获取、管理、浏览、优化。lFireworks：制作网页的高级辅助工具，可以进行动画的制作，图像优化，热点、切片和轮替按钮，文件的导入和

22、导出，无需学习代码即可创建出具有专业品质的网页图形和动画。l1.3.3动画制作软件 网页的动画一般分为两种，即GIF动画和Flash动画。这两种动画都可以通过Flash软件来完成，此外，GIF动画和Flash文字动画还有一些专门工具可供使用，这些工具对于想做出好的动画，又不能熟练使用Flash的制作者提供了极大的方便。下面就一些常用的工具简要的做一些介绍。lFlash MX 2004Flash 8.0：Flash是交互式矢量图和Web动画的标准，网页设计者使用Flash能创建漂亮的、可改变尺寸的动画，可以创建极其紧密的导航界面、技术说明以及其他奇特的效果。lSwish2.0：在此工具中做好文字

23、动画后可以导出为.swf格式的文件，再导入到Flash中进行进一步的处理，让Flash更生动，更炫目多彩。lUlead GIF Animator 5.05：友立公司开发的动画制作软件，内建的Plugin有许多现成的特效可以立即套用，可将AVI文件转换成GIF文件，而且还能将动画GIF图片最佳化，能将放在网页上的GIF动画减肥，以便让人能够更快速的浏览网页。l硕思闪客之锤：是一款具有专业水准的动画制作工具。它支持图形设计、运动动画、引导线、遮罩效果、流声音和事件声音、帧标记、设计电影剪辑、按钮等符号。l硕思闪客精灵：支持将SWF文件导出成FLA文件，帮助丢失FLA文件的影片作者重新获得FLA文件

24、，从而可以再编辑。l文字动画特效制作Swish Zone：特效中有许多细节结合使用能得到非常炫的效果，直接预览、能直接导出为SWF文档格式。lGIF动画制作GIF Movie Gear 3.0：GIF动画制作软件，几乎有需要制作GIF动画的编辑功能它都有，无需再用其他的图形软件辅助。l1.3.4辅助软件 在制作网页过程中，有时需要做一些特殊的处理，这时就需要一些小的工具软件来帮忙，这样既省时又省力，就像一些特效Java代码，没必要一行一行来写，再加上调试浪费不少精力。下面简单介绍几个常用的小工具软件：l网页小秘书：有屏幕取色、IE滚动条、文本转换、颜色搭配等设置。l网页魔法菜单：可以轻松地制作

25、多种意想不到的下拉菜单效果，比较实用。l网页减肥茶：可以将网页文件成批，最大可达50%，压缩后直接读取，与压缩前完全一样。该软件还有还原功能，可以放心使用，可以助设计者一臂之力。l批量改网页的内容替换工具：主要功能是替换文本文件的内容，可多行替换和成批文件替换。l网页特效大师：一个可以自动生成网页特效的软件，收集了包括时间特效、文字特效、图形图像处理、鼠标特效、页面特效、小甜饼、在线游戏、其他特效在内的8类共62个特效。返回 1.4 Dreamweaver 8初识初识l1.4.1Dreamweaver8简介lDreamweaver与Flash、Fireworks都是Macromedia公司开发

26、的产品，并被合称为“网页设计三剑客”。Dreamweaver的优势在于它不仅是优秀的所见即所得的编辑软件，同时也兼顾了HTML源代码编辑，可以让用户在两种模式之间切换。lDreamweaver 8是建立 Web 站点和应用程序的专业工具，它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，功能强大，使得各个层次的开发、设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于 CSS 设计的领先支持到手工编码功能，Dreamweaver 8提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用 Dreamweaver 8 及所选择的服务器技术来创建功能强大的 In

27、ternet 应用程序，从而使用户能连接到数据库、Web 服务和旧式系统。l1.4.2Dreamweaver8的安装和运行l（1）启动计算机，将Dreamweaver 8的安装光盘放入CD-COM驱动器，系统会自动运行Dreamweaver 8的安装程序，双击安装程序，弹出如图1-6所示的解压缩界面。l2）解压完毕后，Dreamweaver 8的安装程序会自动弹出一个安装向导窗口，如图1-7所示。l（3）单击“下一步”按钮，出现Dreamweaver 8的授权协议窗口，在这里只要选择“我接受该许可证协议中的条款”并单击“下一步”按钮即可，如图1-8所示。l（4）此时，安装向导会弹出一个安装路径

28、的窗口，如图1-9所示，如果用户需要自定义安装路径，可以单击“更改”按钮，并通过弹出的路径选择框来选择目标路径，修改好安装路径后单击“下一步”按钮。l（5）单击“下一步”按钮后，安装向导将弹出一个Dreamweaver 8默认编辑文件类型的窗口，如图1-10所示。如果用户不准备在Dreamweaver 8中编辑该窗口内的某个文件类型时，取消相应选框中的勾即可。设置完毕后单击“下一步”按钮。l（6）设置完毕后，安装程序将显示一个通知用户有关上述设置内容的窗口，如果满意的话，单击“安装”按钮，开始安装，如图1-11所示。l（7）安装完毕后，向导会弹出安装完毕的提示对话框。如图1-12所示l（8）在

29、安装完Dreamweaver 8之后，会在“开始”菜单自动创建程序组，执行“开始菜单所有程序MacromediaMacromedia Dreamweaver 8”命令，即可启动Dreamweaver 8，如图1-13和1-14所示。l1.4.3Dreamweaver8的工作环境l要想熟练使用Dreamweaver 8，就必须先了解Dreamweaver 8的工作环境。l1.工作区lDreamweaver 8为采用不同设计方式制作网站的用户设计了不同的工作环境。用户第一次启动Dreamweaver 8时，会弹出“工作区设置”对话框，如图1-15所示，用户可以根据自己的需要选择工作区的布局，在这里

30、“工作区设置”对话框中选中“设计者”单选按钮，这种工作区模式最适合初学者学习使用。l2.工作界面lDreamweaver 8的工作界面如图1-16所示。l工作界面的功能说明如表1-4所示。代号名称功能（1）标题栏显示当前文档的标题和文件名（2）菜单栏由Dreamweaver 8的菜单命令构成，汇集了各种功能的菜单（3）工具栏以图标形式汇集了Dreamweaver的常用工具（4）文档窗口文档窗口的内容与浏览器中的画面内容相同（5）设计区域在设计区域中可以观察正在设计的网页（6）属性面板可以设置文档窗口内元素的各种属性（7）面板组包括“CSS样式”、“应用程序”、“标签检查器”、“文件”面板（8）面板开关可以一次性隐藏或显示不必要的面板本本 章章 小小 结结l本章介绍了网页制作的基础知识，让读者初步了解网页制作的过程，所需要的各种制作工具等，这些理论的知识将会在随后的实际制作过程中得到进一步的应用。