全套课件-《网页设计与制作》-马占欣

上传人：1*** IP属地：江西上传时间：2025-02-18 格式：PPT 页数：862 大小：8.97MB 积分：20 举报 版权申诉

已阅读5页，还剩857页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第1章概论1网页设计与制作

第1章概论2第1章概论第1章概论3随着计算机和计算机网络的发展，今天，网络已经与人们的生活密不可分。利用网络，足不出户就可以完成购物、接受教育、远程医疗等活动，还可以在网络信息海洋中寻找想要的信息，这一切都主要依靠因特网中的Web页技术。在本章，将介绍网页设计的基础知识、网站设计的流程和HTML标记语言等内容。第1章概论41.1计算机网络的概念计算机网络就是利用通信设备和线路将地理位置分散、功能独立的多个计算机互连起来，以功能完善的网络软件(网络通信协议、信息交换方式和网络操作系统等)实现网络中资源共享和信息传递的系统。计算机网络按范围来分，一般可以分为局域网(同一建筑、同一单位、或方圆几公里地域内的专用网络)、城域网(一组相邻的公司或一个城市)、广域网(一个国家或地区)。图1.1所示的是总线型局域网结构图。第1章概论51.1计算机网络的概念早期的计算机系统是高度集中的，50年代中后期，许多系统都将地理上分散的多个终端通过通信线路连接到一台中心计算机上，这样就出现了第一代计算机网络。第一代计算机网络是以单个计算机为中心的远程联机系统。第二代计算机网络是将多个主机通过通信线路互联起来，为用户提供服务，兴起于60年代后期，典型代表是美国国防部高级研究计划局协助开发的基于TCP/IP的ARPA网。70年代至80年代中期，第二代网络得到迅猛发展。第二代计算机网络以通信子网为中心。这第1章概论61.1计算机网络的概念

个时期，网络为“以能够相互共享资源为目的互联起来的具有独立功能的计算机之集合体”，形成了现代计算机网络的基本概念。第三代计算机网络是具有统一的网络体系结构并遵循国际标准的开放式和标准化的网络。国际标准化组织(ISO)在1984年颁布了OSI开放系统互联参考模型，该模型分为七个层次，也称为OSI七层模型，公认为新一代计算机网络体系结构的基础。OSI参考模型的颁布为普及局域网奠定了基础。第1章概论71.1计算机网络的概念第四代计算机网络从80年代末开始，局域网技术发展成熟，出现光纤及高速网络技术、多媒体、智能网络，整个网络就像一个对用户透明的大的计算机系统，发展为以因特网(Internet)为代表的互联网。因特网是目前世界上影响最大的国际性计算机网络。它以TCP/IP网络协议将各种不同类型、不同规模、位于不同地理位置的物理网络联接成一个整体。图1.2所示的是因特网的结构。第1章概论81.1计算机网络的概念一台电脑连接到因特网，就可以访问因特网上的资源。在图1.2所示的结构中，有的电脑通过局域网连接到因特网，有的电脑通过调制解调器，然后通过电话线连接到因特网上，还有的直接连接到因特网上。因特网上提供各种信息资源的服务器也是这样连接到因特网上的。将因特网的通信部分用一朵“云”来表示，意思是在通信部分，其结构非常的复杂，有的是公用电话网，有的是网络公司或行业部门建立的全国性的光纤主干网。它们在地域上互相重叠，又互相连接，形成一个大的网络。第1章概论91.1计算机网络的概念因特网的应用很多，如聊天、购物、接受教育、玩游戏、收发电子邮件等，其中的很多应用是基于Web来实现的。例如，用户要登录到某个网站以获取一些信息，可按如下方式来操作。①启动一个网络浏览应用程序。比如微软公司开发的网络浏览器IE(InternetExplorer，它已内置于Windows操作系统)。②在地址栏中输入准备查看的网站地址。比如，按回车之后(假定本机的网络设置和所访问的Web服务器都工作正常)，就会在浏览器中显第1章概论101.1计算机网络的概念

示相应的网页。通过网页可以浏览新闻等信息。从以上内容可以看到，计算机网络是一些自治的计算机通过通信线路组成的有机整体。网络上提供的服务一般有电子邮件、文件传送、WWW服务等，这些服务大都是一些专门的服务器提供的。我国的因特网建设从20世纪90年代起到现在，已经有了巨大的发展。根据中国互联网信息中心的调查，截止到2006年12月31日，我国网民总人数达13700万人，上网计算机总数约为5940万台，域名总数约为第1章概论111.1计算机网络的概念4,109,020个，包括中国国家顶级域名CN和通用顶级域名(gTLD，如COM域名)两部分，其中CN域名为1,803,393个，中国网站总数约为843,000个(不含教育网网站)，国际出口带宽总量为256,696M。第1章概论121.2HTML和WWWWWW的全称是WorldWideWeb，正式的译名是万维网。WWW服务是因特网上应用最广泛的服务。WWW使得一个站点可以设置一些Web页面，以提供包括文字、图片、声音甚至影像的信息。页面之间可以建立链接，通过链接，用户可以在具有链接关系的页面之间进行切换。Web页面一般是由HTML语言编写的，HTML是超文本标记性语言(HypertextMarkupLanguage)的简称，它是一种跨平台的超文本标记语言，所创建HTML文件第1章概论131.2HTML和WWW

是带有格式标识符和超文本链接内嵌代码的ASCII文本文件。HTML语言的特点是通过对一些项加上标记来描述网页上的元素(文本、表格、图像等)，比如在和之间的文字将会被浏览器解释为粗体字。下面用记事本来制作一个用HTML语言编写的网页。打开记事本，然后在其中输入以下文本：第1章概论141.2HTML和WWW<html><head><title>我的网页</title></head><body>我的第一个网页！</body></html>第1章概论151.2HTML和WWW保存该文件时，“保存类型”中选择“所有文件”，输入文件名为“example.htm”，如图1.3所示，单击“保存”按钮保存文件。这样就在保存的目录下有了一个example.htm文件，打开后的效果如图1.4所示。通过这样的方法，就制作了一个简单的网页，同时可以知道，网页文件可以通过文字编辑器来书写。实际上，无论多复杂的网页，都可以按这种方式来书写，只是这样做工作量将非常的大，效率也很低。第1章概论161.3认识网页元素构成网页的基本元素有：文本、图片、动画、声音、链接、表单等。1.3.1文本文本就是网页上的文字信息，文字是网页中最基本的元素，虽然图片及多媒体效果在网页中所占的比重越来越大，但由于文字所占的存储空间非常小，以文字为主体的页面下载速度快，节省网络带宽，所以在网站中，文字的主导地位是无可替代的。1.3.2图片第1章概论171.3认识网页元素现在很难找到一个没有图片的网页，图片是组成网页的基本元素，图像传递的信息比文字更直观，另外，在网页中适当地添加图片可以使网页更美观。计算机能够显示的图片格式很多，但并不是所有格式的图片都适合于放在网页中，其中有些特有格式图片，需要使用专门的应用程序才能显示出图片内容，有些格式的图片体积太大，不适合于网上传输。在Web页面上使用的图片格式主要有GIF、JPG/JPEG、PNG、BMP等，其中使用最为广泛的是GIF、JPEG/JPG和PNG。第1章概论181.3认识网页元素1.3.3动画和声音动画是网页上一个重要的表现形式，网页上适当使用动画有利于表现内容，使网页更生动。网页动画是由多幅图片连续放映，利用人类眼睛的视觉暂留特点来形成连续的动画。由于网络传输带宽的限制，要求动画的体积小，所以网页上的大部分动画看起来略显粗糙。网页上支持的动画主要有GIF动画和Flash动画，GIF动画是GIF图片格式的小型翻页型动画。Flash动画的文件大小比GIF动画小，并且是以流的形式播放，可第1章概论191.3认识网页元素以一边下载一边播放，另一方面，Flash图形是矢量图形，因此用Flash制作的动画看起来比较清晰。但是因为Flash动画的播放需要Flash插件，因此需要安装Flash插件才可以播放。声音作为多媒体元素的一种，在网页中应用的相对较少，主要是用于网页背景音乐和音乐站点。在HTML语言中，原本没有专门的针对声音的标记，在网页上播放声音大部分要靠插件来完成。由于现在的主流浏览器均支持不同的插件，因此网页中支持的声音格式第1章概论201.3认识网页元素

比较多，比如MP3、WMA、RM、MID、AIF等。比较常用的声音格式有MID格式(常用作背景音乐)和MP3格式(常用作音乐站点)。1.3.4链接同其它媒体(报纸、杂志)相比，网页中最值得称道的地方就是可以设置链接。链接是指建立在同一站点或不同站点中Web页之间的跳转关系，用于引导浏览者转向其感兴趣的页面。它可以使站点内的网页成为有机的整体，还能使不同站点之间建立联系。链接由两部分组成：链接载体和链接目标。许多页面元素可以第1章概论211.3认识网页元素作为链接载体，如：文本、图像、图像热区、轮替图像、动画等，而链接目标可以是任意网络资源，如：页面、图像、声音、程序、Email甚至是页面中的某个位置——锚点。1.3.5表单网页不同于其它媒体的另一个特性是它同浏览者之间的交互功能，表单是网页完成交互功能的重要元素。它的作用是接收用户在浏览器端输入的数据并传送到服务器端，完成浏览者和服务器的交互。在网络上它一般应用于会员注册、网上调查等需要用户提供信息的地方。第1章概论221.3认识网页元素表单是一个容器，表单内一般包含文本框、选择框和提交按钮等内容。图1.5是一个表单的例子。浏览者在表单中输入信息，然后单击“确定”按钮就可以将输入的信息传送到网站服务器中，然后由服务器进行处理，并根据处理结果向浏览器反馈信息。第1章概论231.4网站的设计流程多个网页按照一定的结构组织在一起就构成一个网站。每个网站都有一个名字为index或者default的Web页文件，一般称作主页或首页。主页是用户访问一个网站看到的第一个页面，通常显示网站的主题和导航信息，网站中的其它网页用来显示某一方面的详细内容，主页与其它网页通过链接组织起来。从资源管理器的角度来说，网页是一个文件，而网站是一个目录，里面有多个HTML文件和图片、动画、声音等资源文件。第1章概论241.4网站的设计流程设计一个网站就像设计一个程序一样，要进行整体规划、素材收集、页面设计、调试测试等步骤。下面，简单介绍网站的设计流程和要遵循的一般原则。1.4.1整体规划在网页设计前，首先要给网站一个准确的定位，是用来宣传自身，还是用来提供商务服务、资讯服务，从而确定主题与设计风格。确定了主题以后，就要根据希望提供的功能来确定设计网站所使用的技术。首先要确定Web服务器平台，第1章概论251.4网站的设计流程

是采用Windows的IIS，还是Linux的Apache；然后要根据网站功能的复杂程度决定是采用静态网站还是动态网站。对于动态网站，还要考虑使用何种数据库及采用什么技术来支持。整体规划还包括网站结构的规划，即根据希望提供的信息和功能设计网站的结构，是层次结构、线型结构、还是网状结构。建设一个规范的网站，从结构设计、页面设计到数据库的集成，每一个环节都非常重要。第1章概论261.4网站的设计流程1.4.2网页的设计与制作网站整体规划完成后，就需要利用收集和制作的素材，采用网页制作工具去设计并完成每一个网页的制作。网页制作过程一般分为两个部分：网页布局设计和有关内容的添加。布局就是以最适合浏览的方式将文字和图片编排在网页的不同位置，使得浏览者的视觉效果与使用效果达到最佳状态。网页作为一种版面，有文字和图片。而文字有标题与正文之分；图片也有主次之别。如果将第1章概论271.4网站的设计流程文字和图片简单地罗列到一个页面上，会显得零乱不堪。因此必须根据内容需求，将文字和图片按照一定的次序进行合理地编排和布局，使它们组成一个有机整体，展示给浏览者。布局完成后，就可以在相应位置添加所收集和制作的素材了。有时，还需要为网页添加一些动态效果或实现一些特殊功能的脚本程序等。第1章概论281.4网站的设计流程1.4.3测试网页在网页制作过程中和完成以后，需要对网页进行测试，查看所设计网页的实际浏览效果以及有没有错误。测试网页要尽可能放置在服务器上或者与服务器相同的环境中，应尽量多地使用不同公司、不同版本的Web浏览器进行测试。测试的项目包括：①链接测试。主要看网页中是否有链接错误的情况。②外观测试。在不同的浏览器、不同分辨率、不同的系统字体设置情况下网页的外观有无改变，网页中的文字、图片能否正常显示。第1章概论291.4网站的设计流程③速度测试。浏览者在不同的网速下浏览网页，显示的速度如何？是否可以容忍？④脚本和程序测试。测试页面中的JavaScript、CGI等程序是否能正常工作，是否存在安全漏洞。1.4.4网页的上传与发布网页制作完成后，就可以利用FTP等方式上传到服务器并发布到互联网上了。网站空间的获取一般有自设服务器、租用网页空间或虚拟主机、申请免费网页空间三种方法网站空间的获取一般有自设服务器、网站第1章概论301.4网站的设计流程

网站空间的获取一般有自设服务器、租用网页空间或虚拟主机、申请免费网页空间三种方法。同时，还可以通过“中国互联网络信息中心”(CNNIC)的域名注册系统申请诸如.com、.cn、.net等域名，详细的申请方式可以到CNNIC网站查询。利用域名可以使浏览者更容易记住你的网站。网页上传以后，还必须保持内容的经常性更新，这样才能不断吸引访问者点击浏览。第1章概论311.5制作和美化网页的工具由1.2节可知，直接用记事本一类的文字编辑器也可以写出网页代码。但是使用这种方法制作网页要求设计者必须具有较扎实的html语言基础，初学者不易掌握。所以制作网页一般要选用专业的网页制作工具。另外，在网页中往往还需要使用图片、动画等元素，这些元素也需要相关工具来制作。下面对常见的工具做一简单介绍。1.5.1网页制作类工具制作网页首先要选定一种网页制作软件。选择一个好的网页编辑器会令你事半功倍！目前，较常用的网页第1章概论321.5制作和美化网页的工具

制作工具有如下几种。1．DreamweaverDreamweaver是Macromedia公司(Macromedia公司2005年4月被Adobe公司收购)出品的网页制作工具，可以说是当前最流行的网页编辑器。它支持所见即所得的方式编辑网页，有强大的站点管理功能，便于站点的维护和管理；支持最新的HTML语言的扩展功能；支持层技术，还提供了层动画；内置强大的交互式网页制作功能。Dreamweaver可以使用户不用深入了解HTML就能制作出非常专业的网页。第1章概论331.5制作和美化网页的工具2．FrontPageFrontPage是微软公司开发的网页制作工具。对Word熟悉的用户使用FrontPage进行网页设计会非常顺手。它在主要功能上与Dreamweaver差不多，它提供了非常丰富的模板，对于新手来说是一个不错的选择。可以在它的导航下轻松地完成一个网页的制作。它也提供了对网站的管理等功能。第1章概论341.5制作和美化网页的工具3.HotDogHotDog是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助设计者制作页面中的复杂部分，对于那些希望在网页中加入CSS、Java、RealVideo等复杂技术的高级设计者，是个很好的选择。当然，要制作出理想的网页，还是要学习一些HTML语言和必要的脚本编程知识，才可以从更高的角度来理解网页的本质，更好地掌握各种网页编辑软件工具。第1章概论351.5制作和美化网页的工具1.5.2图像制作类工具许多图像制作工具软件都能够方便地进行网页图像的制作和处理。1．PhotoshopPhotoshop是Adobe公司最著名的图像处理软件，是图像制作首选工具。它对图像的处理方式多样，特别是对图像的滤镜处理，可以制作出许多特殊的图像效果。PhotoshopCS版提供的功能可以轻松地将图像进行切片等操作，方便网页使用，支持将图像存储为网页支持的GIF、JPEG、PNG等格式。第1章概论361.5制作和美化网页的工具2．ImageReadyImageReady也是Adobe公司开发的工具软件。它提供了网页图形的集成开发环境，是一个非常优秀的网页图像制作工具。它的界面和操作都类似于PhotoShop，可以用层的技术来编辑图像。直接在该软件中就可完成对图形的优化操作。支持将文件输出为JPG、GIF、PNG等图形格式。可以直接制作动画，并且还可直接产生HTML代码。第1章概论371.5制作和美化网页的工具3．FireworksFireworks是Macromedia公司专门为制作网页图像设计开发的软件。无论是专业人员还是初学者，都可以用它制作出效果不错的网页图像。它也有一个集成的网页图像开发环境。具有同时按位图图形和矢量图形的模式进行编辑的特点。Fireworks也可以制作简单的翻页型动画。第1章概论381.5制作和美化网页的工具4．Cool3DCool3D是Ulead(友立)公司出品的一个专门制作文字3D效果的软件，可以用它方便的生成具有各种特殊效果的3D文字，支持输出BMP、JPG、TAG、GIF格式。Cool3D也可以制作网页上的3D文字动画，它可以把生成的动画保存为GIF和AVI文件格式。第1章概论391.5制作和美化网页的工具5．PainterPainter是MetaCreation公司的图像制作工具，它除了有常见的铅笔、水粉、蜡笔、油画笔之外，还可以用它的特殊画笔十分容易地画出火焰、霓虹灯、树叶等效果。画出的图像十分逼真、自然。第1章概论401.5制作和美化网页的工具1.5.3动画制作类工具除了1.5.2中所介绍的ImageReady、Fireworks和Cool3D外，下面这些工具也常用来制作网页中的动画。1．FlashFlash是Macromedia公司专门为网页动画设计开发的软件。用该软件制作的动画采用的“流”控制技术，可以一边下载动画，一边播放，并且设计者可自己决定流的大小，因此，制作的动画在网页中播放时基本看不出时间上的延迟，下载时间较短。第1章概论411.5制作和美化网页的工具在Flash中，大量的图形是矢量图形，因此，用Flash制作的图形在放大与缩小的操作中没有失真，而且用它制作的动画文件所占的体积较小，这些都是Flash特有的优点。另外，Flash也提供了动作属性的功能，通过动作属性可以轻松地完成一些特殊的控制以及进行一些交互处理，不用编写一行代码也可以完成许多精彩的控制效果。第1章概论421.5制作和美化网页的工具2．GIFAnimatorGIFAnimator是一套专门的动画制作工具。可以同时合成处理几个动画，还可将视频AVI文件转换成GIF文件。并提供了一些特效处理功能，如立方体特效、走马灯、颜色动画和翻页效果等。3．3DStudioMax3DStudioMax是一个功能十分强大的3D图像制作软件。它也是用关键帧的原理来制作动画的，特别擅长制作各种特技效果，比如风晴雨雪、云雾烟火等效果，自身还带有非常丰富的材质库。第1章概论431.6WWW的工作流程在物理结构上，组成WWW的是客户机和服务器。它们都连接在因特网上，通过因特网进行通讯。浏览者的电脑是客户机，提供信息的电脑是服务器(服务器一般由处理速度快、存储容量大的电脑承担，运行了WWW服务器程序的个人电脑也可以作为Web服务器)。在应用程序上，客户机上运行的是IE之类的浏览器程序，浏览器程序的主要作用就是对HTML标记语言进行解释并且将它显示在浏览器窗口中。在Web服务器上，运行的是WWW服务器程序，可以是Windows下第1章概论441.6WWW的工作流程

的IIS，也可以是Linux下的Apache或其它的WWW服务器程序。根据静态网页和动态网页的不同，WWW工作的流程有两种方式。如果是静态网页，在客户机上的浏览器地址栏中输入一个网页地址，按回车键，客户机就用因特网上的HTTP协议发送一个请求到该地址所指定的服务器。服务器收到请求后，将客户机请求的页面文件或系统的缺省页面文件传送到客户机中。浏览器将会解释这个HTML文件，并将结果显示在浏览器窗口中。运行第1章概论451.6WWW的工作流程

示意图如图1.6所示。如果是动态网页，当服务器收到请求后，将根据请求的信息，在服务器上找到相应页面文件并对该文件进行处理，运行该文件包含的程序代码，然后将运行的结果以标准的HTML文件格式送回到客户机，由客户机的浏览器显示结果，运行示意图如图1.7所示。第1章概论461.7HTML语言基础1.7.1HTML语言简介1990年，HTML语言同WWW一起诞生于瑞士的GERN实验室。TimBerners-Lee及其开发小组研究建立了一种以一定格式传输信息的方法，就是众所周知的超文本传输协议HTTP。该协议使用了HTML语言。HTML语言作为一种标识性的语言，由一些特定符号和语法组成，用来制作超文本文档。在超文本中可以加入图片、声音、动画、视频等内容，并且可以从一个文件跳转到另一个文件。用HTML编写的超文本文第1章概论471.7HTML语言基础

档称为HTML文档，它在各种操作系统平台(如UNIX，WINDOWS等)都能使用。经过十几年的发展，每个浏览器开发公司都在为HTML加入更多的特征，比如框架、样式等。到现在已经发展到了HTML5.0版本，扩展了DHTML和XML等子集。不过目前较为流行的仍然是1999年12月发布的HTML4.01版本。第1章概论481.7HTML语言基础1.7.2HTML语言的语法规则HTML文档扩展名为htm或html，由标记(标签)、代码和注释组成，标记是HTML中用来控制文字、图形等显示方式的符号。标记分单独出现的标记和成对出现的标记两种。大多数的标记是成对出现的，由首标记和尾标记组成。每个标记可以有一个或几个控制属性。HTML语法的三种基本表达方式如下所示：

<标记><标记>对象</标记>第1章概论491.7HTML语言基础<标记属性1=”参数1”属性2=”参数2”……>对象</标记>比如有如下代码：

<fontsize=“7”color=“#0000ff”>网页其中和分别为首标记和尾标记，用来定义“网页”两个字的属性，标记中有size和color两个属性，分别定义“网页”两个字的大小是“7”(36磅)，颜色是“#0000ff”(十六进制RGB颜色代码)，属性的值要加西文引号。第1章概论501.7HTML语言基础HTML语言代码不区分大小写，多数HTML标记可以嵌套，但不能交叉，HTML文件一行可以写多个标记，一个标记也可以分写多行，不用任何续行符。在HTML文档可以加入注释，采用的格式为：<!注释内容>。1.7.3HTML文档的基本结构HTML文档的基本结构是：第1章概论511.7HTML语言基础<html><!标志该html文档的开始><head><title>文档标题</title></head><body>html文档的主体部分</body></html><!标志着html文档的结束><html>标记是文档标识符，它是成对出现的，首标记<html>和尾标记</html>分别位于文档的最前面和最后面，明确地表示文档是以超文本标识语言(HTML)编第1章概论521.7HTML语言基础写的。该标记不带有任何的属性。事实上，现在所用的浏览器都是自动识别HTML文档的，并不要求有<html>标记的出现，也不对它进行任何的处理。但是，为了提高文档的适用性，还是应该养成用这个标记的习惯。<head>标记用来定义文档头部分。习惯上把HTML文档分为文档头和文档主体两个部分。文档头用来规定该文档的标题(出现在浏览器窗口的标题栏中)和文档的一些属性，主体部分就是在浏览器窗口中看到的内第1章概论531.7HTML语言基础

容。嵌套在<head>标记中使用的子标记主要有<title>，还可以出现其它子标记，如<isindex>，<meta>等，这些子标记都不是必须的。<title>标记是成对的，用来规定HTML文档的标题。在<title>和</title>之间的内容将显示在Web浏览器窗口的标题栏中。<body>标记用来定义文档主体部分。在<body>和</body>之间的内容将显示在浏览器窗口内。在<body>标记中可以规定整个文档的一些基本属性：bgcolor：指定html文档的背景色；text：指定html文档中文字的颜色；第1章概论541.7HTML语言基础background：指定html文档的背景颜色或图片。在指定颜色对象时，可以用该颜色的代码或者对应颜色的英文单词。例如，指定文档的背景色为绿色，就可以表示为：<bodybgcolor=“green”>。文档主体部分可用颜色列表：

表1-1颜色列表

名称Black

Red

Line

Maroon

Gray

Silver

Navy

Olive

颜色黑色

红色

石灰色

栗色

灰色

银白色

海军蓝

橄榄绿

名称Purple

Yellow

Aqua

Blue

Green

Fuchsia

White

Teal

颜色紫色

黄色

浅绿色

蓝色

绿色

紫红色

白色

暗蓝绿

第1章概论551.7HTML语言基础1.7.4HTML语言的常用标记及其用法HTML是一种标记语言。下面介绍HTML的几种主要标记。1．格式化标记在文字处理中把对文字的大小、外观的处理叫格式化。在HTML标记语言中，也有起到格式化作用的标记。(1)字体和大小的设置字体和大小的设置是通过标记和来设置的。例如，有如下代码：<fontface="宋体"size="6">欢迎！第1章概论561.7HTML语言基础在标记中加入了face和size属性，用来指定字体的名称和大小。一般来说，size的值可以从1到7，分别代表9、10、12、14、18、24、36磅的字。该标记的作用是将内容为“欢迎!”的字体设置为宋体，大小为24磅。缺省该标记时表示为默认字体和大小。(2)段落设置与换行段的设置标记是和，作用是设置段落。有如下代码：

第一段

第二段显示效果如图1.8所示。第1章概论571.7HTML语言基础如果将上面的代码改为：

第一段

第二段再显示，可以看到，代码修改以后，网页的显示同未修改前相比没有变化，说明在HTML文档中回车是不起换行作用的。换行的设置标记是 ，例如，有以下代码：第1章概论581.7HTML语言基础

第一段

第二段

第一行 第二行显示效果如图1.9所示。从图中可以看到 标记产生的效果同标记产生的效果在间距上是不一样的。(3)字的效果设置图1.10字的效果设置可以用HTML标记语言给字体设置一些特殊的效果。比如下划线的开始和结束标记、粗体字的开始和结束标记、斜体字的开始和结束标记。第1章概论591.7HTML语言基础以下HTML源代码在浏览器中的显示效果如图1.10所示。粗体斜体下划线也可以将标记进行嵌套使用，从而同时显示多种效果。2．设置链接链接标记的形式如下：

<ahref=”exam2.htm”>跳转到exam2.htm</a>代码中<a>和</a>指明了该处是一个链接，用属性href表明链接的目标是“exam2.htm”文件，链接的载体是“跳转到exam2.htm”。显示的效果如图1.11所示，显示的效第1章概论601.7HTML语言基础果如图1.11所示，用鼠标点击“跳转到exam2.htm”可以打开当前文件夹下的exam2.htm文件(前提是exam2.htm存在)。链接对象除了可以是HTML文档外，还可以是其它文件类型，比如：

<ahref="myfile.zip">点此下载</a>出现的效果是当鼠标点击“点此下载”这几个字时，浏览器会弹出下载对话框，让用户下载myfile.zip文件。第1章概论611.7HTML语言基础3．表格表格在网页中有着广泛的应用，既可以用表格的形式显示数据，也可以用来实现定位显示等布局操作。将下面的代码用记事本编辑并保存为一个HTML文件后，用浏览器显示，可以看到如图1.12所示的效果。

<html>

<head>

<title>table</title>

</head>

<body>第1章概论621.7HTML语言基础

<tablewidth="30%"height="150"border="4"cellspacing="2"cellpadding="12">

<tr>

</tr>

<tr>

</tr>第1章概论631.7HTML语言基础

<tr>

</tr>

</table>

</body>

</html>标记<table>和</table>定义了一个表格，其中的参数：width="30%"height="150"border="4"cellspacing="2"cellpadding="12“设置了表格的宽度(用相对浏览器窗口的百分比来表第1章概论641.7HTML语言基础

示)、表格的高度(用像素表示)、边框的宽度、单元格的间距、单元格的边距。如果调整浏览器窗口的宽度，会发现表格宽度也会随着调整，这是由于表格的宽度是用百分比定义的结果。<tr>和</tr>表示了表格中一行的开始和结束，而<td>和</td>则表示了一个列的开始和结束。

<tr>

</tr>第1章概论651.7HTML语言基础表示的是一行的两个单元格。表格标记还可以加入一些常见的属性，如背景色和对齐方式等，标记背景色的语法是bgcolor＝"颜色代码"，其中颜色代码用"#"加上红绿蓝三基色的十六进制代码表示，也可以用颜色的英文单词表示，比如<tablebgcolor="#0000ff">和<tablebgcolor="Blue">均表示表格的背景色为蓝色。也可以单独设置某一行的颜色或某一个单元格的颜色，比如<trbgcolor="#ffff00">表示这一行为黄色，<tdbgcolor="#99ff00">则表示这个单元格为淡绿色。应用颜色的优先顺序为单元格、行、表格。第1章概论661.7HTML语言基础表格的对齐方式由align属性设置，其取值有三种："left"、"center"、"right"，分别表示居左、居中和居右。例如，有如下代码：

<html>

<head>

<title>table</title>

</head>

<body>

<tablealign="center"width="100"height="50"border="4">

<tr>

<td>居中的表格</td>第1章概论671.7HTML语言基础

</tr>

</table>

<tablealign="left"width="100"height="50"border="4">

<tr>

<td>居左的表格</td>

</tr>

</table>

第1章概论681.7HTML语言基础

<tablealign=“right”width=“100”height=“50”border=“4”>

<tr>

<td>居右的表格</td>

</tr>

</table>

</body>

</html>显示效果如图1.13所示。在很多标记中都可以使用align属性，在中表示段落文字的对齐，在<tr>和<td>中表示表格中某一行或第1章概论691.7HTML语言基础

某个单元格中文字的对齐。表格在网页中主要用在文字图片等内容组织上，网页中的文字和图片等内容往往是放置在一个没有边框的表格内，以达到版面整齐划一的效果。从上面的介绍中可以看到，如果完全用HTML代码编写网页是一件非常辛苦的事情。首先是工作量大，每一个细小的地方都要编写，其次需要记忆大量的HTML标记符，另外，还不知道书写的代码在浏览器中显示出来到底是什么模样，必须在浏览器中才可以第1章概论701.7HTML语言基础

看到，往往需要反复修改、保存、浏览才能达到预想的效果，效率很低。因此人们开发了很多的工具软件来设计网页。它们特点之一就是以所见即所得的方式来编写网页。Macromedia公司的Dreamweaver是众多可视化网页编辑工具中的佼佼者，据统计，世界上70％的网站都是用它开发的。第1章概论71本章小结网络是对人类生活影响最大的技术之一。WWW将网络的应用深入到普通人的生活中。本章主要介绍了计算机网络的基础知识和WWW的工作流程，组成网页的各种元素和制作网页的一些工具。本章还简单介绍了设计网页所使用的语言——HTML，深入掌握HTML知识有助于制作优秀的网页，如果要了解更多更详细的HTML知识，可以参阅有关HTML的专门书籍。第2章Dreamweaver基础72第2章Dreamweaver基础第2章Dreamweaver基础73Dreamweaver是Macromedia公司出品的一款集网页制作和网站管理于一体的“所见即所得”的网页制作软件。无论用户愿意享受手工编写HTML代码时的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver都提供了有用的工具，使用户拥有更加完美的Web创作体验。目前，Dreamweaver的最高版本为Dreamweaver8。本章主要介绍Dreamweaver8的基础知识、操作界面和站点管理功能。第2章Dreamweaver基础742.1Dreamweaver简介作为网页制作软件，Dreamweaver提供了功能强大的可视化设计工具和精简而高效的代码编辑环境，使开发人员能够快捷地创建规范的Web应用程序，构建功能强大的网络服务体系。Dreamweaver的主要特点及功能如下。①将“设计”和“代码”编辑器合二为一。Dreamweaver把编辑状态分为两种，一种是HTML源代码编辑状态，另一种是可视化编辑状态，这两种状态可以放在同一个窗口中，设计者可以在这个窗口中以书写HTML代码的形式或者以可视化的形式设计Web页，提高了网页设第2章Dreamweaver基础752.1Dreamweaver简介

计的效率。②使用内置的图形编辑程序节省开发时间。借助内嵌的Fireworks技术，对图像的裁剪、缩放等编辑操作可以在Dreamweaver环境中直接完成。③提供操作方便、功能强大的用户界面。如，在设计视图中，开发者可以直接使用动态数据窗口去预览实时数据。④提供完美的CSS支持，可利用丰富的CSS样式表构建复杂、规范的站点。⑤提供完整的集成开发环境，可以开发HTML、XHTML、XML、ASP、MicrosoftASP.NET、JSP、第2章Dreamweaver基础762.1Dreamweaver简介PHP、和MacromediaColdFusion站点，还可以通过插件定制和扩展开发环境。⑥可与一些常见格式的外部文档/代码实现无缝结合。比如，可以将Word和Excel等文档直接导入到Dreamweaver中。⑦提供了较多的行为，用户不用书写代码即可设计出功能丰富的网页。⑧通过布局视图技术将表格和层这两种排版工具结合起来，从而提供精确而且灵活的页面排版功能。⑨强大的网站管理功能。Dreamweaver的文件面板将整个网站的内容集中起来，可以预览和管理所有的第2章Dreamweaver基础772.1Dreamweaver简介

图形、颜色、外部URL、脚本、Flash、CSS等资源。网站报告功能可以检查出网页中的常见错误，并提供快速修正的操作面板。⑩提供了跨浏览器兼容性检查功能，在保存时自动检查文档的跨浏览器兼容性，以检验页面中是否包含目标浏览器不支持的标记或CSS结构。Dreamweaver易学、易用，只要掌握了其基本操作方法，即使初学者也能制作出具有专业水平的网页。第2章Dreamweaver基础782.2Dreamweaver8的工作界面2.2.1选择工作区布局如果Dreamweaver安装在Windows系列的操作系统中，则初次启动Dreamweaver后，会弹出“工作区设置”对话框，对话框中提供了“设计器”和“编码器”两种布局风格，使用者可以根据自己的操作习惯，从中选择一种工作区布局。“设计器”布局是一个使用MDI(多文档界面)的集成工作区，其中全部文档窗口和面板被集成在一个较大的应用程序窗口中，并将面板组停靠在右侧。习惯可视化编程的人员可使用此布局。考虑到大多数用户会选用这种布局风格，本书以此布局来介绍后续内容。第2章Dreamweaver基础792.2Dreamweaver8的工作界面“编码器”布局同样是集成的工作区，但是将面板组停靠在左侧，文档窗口在默认情况下显示为“代码”视图，习惯手工编码的人员可以使用这种布局。Dreamweaver8还提供了“双重屏幕”工作区布局。图2.1起始页对话框当选择一种工作区布局后，如果想切换成另一种工作区布局，可以选择【窗口】|【工作区布局】，然后在弹出的子菜单中选择工作区布局。选择工作区布局后，Dreamweaver8的工作界面会随之确定。第2章Dreamweaver基础802.2Dreamweaver8的工作界面2.2.2起始页Dreamweaver8在启动时，默认显示“起始页”对话框(图2.1)，用户可以在这个对话框中创建文档或打开最近使用过的文档，还可以通过产品介绍或教程了解关于Dreamweaver的更多信息。如果选中“不再显示此对话框”选项，则以后启动Dreamweaver时将不再自动显示起始页。2.2.3工作区布局当新建或打开一个Web页后，Dreamweaver显示的工作区窗口如图2.2所示。窗口由主菜单、工具栏、文档窗口、面板组、属性面板等组成。第2章Dreamweaver基础812.2Dreamweaver8的工作界面1．主菜单主菜单提供了Dreamweaver的所有操作，各菜单项的功能如下。【文件】：用于管理文件。包括创建和保存文件、导入与导出、预览等。【编辑】：用于编辑操作。包括撤销与恢复、复制与粘贴、查找与替换、参数设置与快捷键设置等。【查看】：用于查看对象。如代码的查看，网格线、面板、工具栏的显示/隐藏等。主菜单“插入”工具栏面板组代码编辑窗口设计窗口拆分视图状态栏“文档”工具栏“编码”工具栏“属性”面板【插入】：用于插入页面元素。如图像、层、表格、第2章Dreamweaver基础822.2Dreamweaver8的工作界面

表单、框架、特殊字符等。【修改】：用于对页面元素的修改。如链接、表格、层位置、时间轴等。【文本】：用于对文本的操作。如文本格式设置、HTML/CSS样式、段落格式化等。【命令】：汇集了所有的附加命令项。如录制命令等。【站点】：用于创建和管理站点。【窗口】：用于打开/关闭面板和窗口。【帮助】：包含Dreamweaver的联机帮助、技术支持等。第2章Dreamweaver基础832.2Dreamweaver8的工作界面2．插入工具栏插入工具栏类别名插入工具栏(如图2.3所示)包含用于将各种类型的对象(如图像、表格和层等)插入到文档中的按钮。例如，用户可以在插入工具栏中单击“表格”按钮，实现在文档中插入一个表格。每个对象都对应一段HTML代码。由于可以插入的对象很多，所以插入工具栏采取分类显示的方法，单击插入工具栏的“类别名”显示区域，显示如图2.4所示的类别列表。从中选择一个类别后，该类别所包含的工具按钮出现在工具栏中。各类别所第2章Dreamweaver基础842.2Dreamweaver8的工作界面

包括的按钮如下。【常用】：包括链接类、图像和表格类、模板和标签类等常用的对象。【布局】：包括表格、div标签、层和框架等对象，还可以在此选择视图模式。图2.4插入工具类别列表【表单】：包括用于创建表单容器和插入表单元素的工具按钮。【文本】：包括定义文本格式和列表格式的各种设置按钮。【HTML】：包括用于插入水平线、文件头内容、表第2章Dreamweaver基础852.2Dreamweaver8的工作界面

格、框架和脚本的HTML按钮。【应用程序】：包含插入记录集、重复区域等动态元素的按钮。3．文档窗口文档窗口显示当前编辑的Web页文档。Dreamweaver提供了文档窗口的三种视图。“代码”视图：提供编辑HTML、JavaScript、服务器语言等代码的手工编码环境。“设计”视图：提供页面布局和编辑的可视化设计环境。在该视图中，用户可以通过拖动等操作完成网页元素第2章Dreamweaver基础862.2Dreamweaver8的工作界面

的添加和编辑。“拆分”视图：在一个窗口中同时显示同一文档的“代码”视图和“设计”视图。这种方式综合了“代码”视图和“设计”视图的长处。图2.2中的“文档”窗口即是“拆分”视图形式。在制作网页过程中，一般应该在“设计”视图中可视化地进行页面的布局设计和页面元素的添加，而在“代码”视图中修改Web页文档对应的HTML代码，或编写其它脚本代码。文档窗口还包括文档工具栏、文档编辑区、状态栏等组成部分，在代码视图中，还会显示编码工具栏。第2章Dreamweaver基础872.2Dreamweaver8的工作界面(1)文档工具栏文档工具栏通常显示在文档窗口的上面，包含的各按钮如图2.5所示。“代码”、“拆分”、“设计”三个按钮，用来控制文档窗口的视图方式。如单击“代码”，则控制文档窗口以代码视图方式显示。“标题”文本框：用于显示和修改当前文档的标题，浏览网页时，网页的标题将显示在浏览器的标题栏中。按钮：单击它会弹出菜单，从菜单中选择“检查浏览器支持”等命令，可以检测所编辑文档的跨浏览器兼容性。第2章Dreamweaver基础882.2Dreamweaver8的工作界面按钮：单击它会弹出菜单，用于检查文档中标记使用错误。按钮：单击它会弹出【文件管理】菜单，用于文件的上传、存回等。按钮：用于在浏览器中打开当前文档，预览显示效果。可用快捷键F12代替。按钮：用户在代码视图中对文档进行更改后，单击该按钮，将刷新文档在设计视图中的显示。切换视图时，系统也会自动刷新。按钮：单击它会弹出菜单，用于为文档窗口添加/取消标尺、网格、辅助线等选项。第2章Dreamweaver基础892.2Dreamweaver8的工作界面

按钮：单击它会弹出菜单，用于显示/取消各种可视化助理。(2)文档编辑区文档编辑区即用户用来编辑和修改文档的区域。在代码视图中，可以输入Web页对应的HTML代码或脚本代码；在设计视图中，可以通过拖动等操作，实现网页元素的可视化添加和修改。标签选择区手形选取缩放缩放比例窗口大小文档大小/下载时间图2.6状态栏(3)状态栏状态栏在“文档”窗口底部，提供当前文档的有关信息，其包含的按钮如图2.6所示。第2章Dreamweaver基础902.2Dreamweaver8的工作界面标签选择区：显示环绕当前选定内容的标签的层次结构。单击某个标签，将选中文档中该标签所对应的对象。使用标签选择区进行选择是选择标签的首选方法，因为这样可以确保准确地选择标签。当按下此按钮时，鼠标处于选取状态，可通过拖动的方法移动对象。当使用“手形”、“缩放”等工具完成相关操作后，应选择它，使鼠标返回选取状态。按下此按钮，鼠标指针变为手形，用于调整文档在窗口中的显示位置。按下此按钮，鼠标指针变为放大器，用于改变编辑第2章Dreamweaver基础912.2Dreamweaver8的工作界面

窗口中的显示比例，默认是放大状态，如果想缩小显示比例，则需要在按下Alt键的同时单击。【缩放比率】：单击此按钮将弹出菜单，为编辑区选择缩放级别。这四个工具按钮主要为方便用户可视化设计Web页而设，如果以代码视图方式显示文档窗口，状态栏中将不显示它们。【窗口大小】：显示文档窗口的大小。单击它会弹出菜单，用户可以选择或自定义文档窗口的大小。【文档大小/下载时间】：显示当前文档的大小和下载此文档的估计时间。第2章Dreamweaver基础922.2Dreamweaver8的工作界面4．属性面板属性面板又称属性检查器，一般出现在文档窗口的下方(参见图2.2)。属性面板用于显示所选中网页元素的属性，用户可以利用它查看和编辑属性值。选择不同的网页元素，属性面板所显示的内容也有所不同。点击属性面板右下角的/按钮，可以缩小/展开属性面板。5．面板组在Dreamweaver窗口的右侧是面板组，通常包含“CSS”、“应用程序”、“标签检查器”、“文件”等面板。在主菜单的【窗口】子菜单中包含了所有的面板名，通过勾选或取第2章Dreamweaver基础932.2Dreamweaver8的工作界面消勾选某个面板名，可以显示或移去该面板。单击一个面板的标题，可以展开或折叠该面板。单击文档窗口右侧的/按钮，可以隐藏/显示整个面板组。6．其它工具栏除了前面已经介绍的插入工具栏和文档工具栏外，Dreamweaver还提供了样式呈现、标准和编码工具栏。选择【查看】|【工具栏】，在【工具栏】子菜单中勾选或取消某个工具栏，可以在视图中显示或隐藏相应的工具栏。第2章Dreamweaver基础942.3使用Dreamweaver建立和管理站点当使用Dreamweaver制作一个网站时，首先应该建立站点，以方便对整个网站的结构进行规划，并利用Dreamweaver的站点管理功能对整个网站资源进行管理。Dreamweaver还有许多功能必须在建立站点后才能实现。2.3.1站点概述站点实质上就是一个文件夹。设计良好的网站通常是在站点文件夹下建立不同的子文件夹，将网页文档及其它资源分门别类地保存在相应的文件夹中以方便管理和维护。第2章Dreamweaver基础952.3使用Dreamweaver建立和管理站点站点包括远端站点和本地站点两类。建立网站的最终目的是要发布到互联网上，因此需要在Web服务器上建立相应的站点，通常将存储在Web服务器上的站点称为远端站点。Dreamweaver8可以对远端站点中的文档进行编辑和管理，但受网络的速度和稳定性等方面的影响，这种方式很不方便。因此，在创建站点时，通常先在本地计算机上建立一个站点，完成网站开发工作，调试成功后，再上传到Web服务器上。在本地计算机上建立的站点就是本地站点。第2章Dreamweaver基础962.3使用Dreamweaver建立和管理站点2.3.2站点的建立和管理(1)创建本地站点站点名称HTTP地址图2.7为站点命名建立本地站点，包括为站点命名，指定站点存储位置(文件夹)，确定是否使用服务器技术和是否使用远程服务器等工作。选择菜单【站点】|【新建站点】，弹出如图2.7所示对话框。该对话框中包括“基本”和“高级”两个选项卡。“基本”选项卡相当于一个建立站点的向导，将引导用户一步步地设置站点，“高级”选项卡则用来直接设置站点的各个属性。下面选择“基本”选项卡进行操作。第2章Dreamweaver基础972.3使用Dreamweaver建立和管理站点①为站点命名：在该对话框“站点名称”文本框中为站点命名，在“HTTP地址”文本框中设定完成的站点上传到Web服务器后将使用的URL，如果新建站点时不知道该URL，可以暂时不填。②选择站点类型。单击“下一步”按钮，出现图2.8所示的对话框，在这个对话框中选择站点类型。如果创建静态网站，应选择“否，我不想使用服务器技术”；如果创建动态网站，应选择“是，我想使用服务器技术”，然后在弹出的服务器技术列表中选择要使用的服务器技术类型。这里选择“否”，创建一个静态网站。(若创建动态网站，请参见17.1.5)第2章Dreamweaver基础982.3使用Dreamweaver建立和管理站点③设置本地站点文件夹。单击“下一步”按钮，出现图2.9所示的对话框。在“本地站点文件夹”文本框中输入存放站点的文件夹路径，或者单击按钮，在弹出的对话框中进行选择。在对话框上方还有一组单选按钮，按默认选择即可。图2.10设置连接远程服务器的方式图2.11站点信息远程站点文件夹连接方式④选择连接远程服务器的方式。单击“下一步”按钮，出现如图2.10所示的对话框。在“连接方式”列表框中选择本地站点与远程服务器的连接方式，初次建立站点第2章Dreamweaver基础992.3使用Dreamweaver建立和管理站点时，可先选择“无”,表示不与远程服务器建立连接。⑤单击“下一步”按钮，出现显示所建立站点有关信息的对话框(2.11)。单击“完成”按钮，完成站点的创建。站点创建完毕后，可以看到文件面板中出现了新建立的站点。(2)站点管理创建站点后，在设计过程，可以对站点进行管理操作。选择菜单【站点】|【管理站点】，会弹出“管理站点”对话框(图2.12)。第2章Dreamweaver基础1002.3使用Dreamweaver建立和管理站点在“管理站点”对话框中，列出了本地计算机中建立的所有站点名称，并提供了管理站点操作的相关按钮。单击“新建”按钮，可以进入新建站点流程；从站点列表中选择一个站点后，单击“编辑”按钮，可以按定义站点的流程显示站点各项设置，供用户修改。图2.12“管理站点”对话框在“管理站点”对话框中还可以完成站点的复制、删除、导出、导入等操作。2.3.3站点文件管理建立站点以后，可以通过文件面板对站点中的资源进第2章Dreamweaver基础1012.3使用Dreamweaver建立和管理站点行管理。文件面板有“文件”、“资源”、“代码片断”三个选项卡，下面介绍“文件”和“代码片断”选项卡，“资源”选项卡的使用将在第13章详细介绍。1．“文件”选项卡“文件”选项卡主要用来对站点的文件进行管理，可以完成对文件和文件夹的新建、打开、复制、粘贴、重命名等操作。在“站点和本地资源”下拉列表中选择一个站点后，将在下方的列表框中显示所选站点的文件资源，如图2.13所示。在“站点和本地资源”下拉列表中还可以选择一个本地计第2章Dreamweaver基础1022.3使用Dreamweaver建立和管理站点算机的存储设备(如C盘)，列表中将显示该存储设备中的文件结构。“视图方式”下拉列表提供了4个选项，其中，选择“本地视图”、“远程视图”、“测试服务器”，将分别显示本地站点文件夹、远端站点文件夹、测试服务器上对应文件夹中的资源，选择“站点地图”，将显示站点导航图。在“文件”选项卡中选定一个文件或文件夹后右击，将弹出快捷菜单，菜单中除了包括一般的文件操作命令外，还包含了有关远端站点和本地站点的相关操作。第2章Dreamweaver基础1032.3使用Dreamweaver建立和管理站点从弹出的菜单中选择【上传】，可以把文件上传到远端站点。上传的文件如果引用了其它文件的内容(比如图片)，会弹出提示是否包含相关文件的对话框，以方便用户同时将相关文件也上传到远端站点。在将文件从本地计算机上传到服务器上时，Dreamweaver会使远端站点和本地站点保持相同的结构，如果需要的目录在服务器上不存在，Dreamweaver会自动创建它。“文件”选项卡既可以显示本地站点中的文件，也可以显示远端站点中的文件。在上传文件时，文件的流向总是从本地站点指向远端站点，即使在远端站点中选中文件上传，上传的仍然是本地站点中同名的文件。第2章Dreamweaver基础1042.3使用Dreamweaver建立和管理站点【获取】文件同上传文件正好相反，即将远端服务器上的文件下载到本地站点中，文件的流向总是从远端站点指向本地站点。如果本地站点存在相同的文件且本地文件修改日期较新时，系统会提示是否用远端站点上较旧的文件覆盖本地站点中较新的文件。上传文件和获取文件也可以用“文件”选项卡上的上传文件按钮和获取文件按钮实现。采用“站点地图”视图将以图形的形式显示站点各Web页之间的导航链接关系，是理想的站点结构布局工具。要显示一个站点的导航图，必须先定义站点的首页。第2章Dreamweaver基础1052.3使用Dreamweaver建立和管理站点在站点的“本地视图”中选定要设为首页的Web页文件，右击，在弹出菜单中选择【设为首页】即完成设定。将视图方式切换为“站点视图”，即显示站点导航图。图2.14是一个以index.html为首页的站点结构。单击文件面板右上角的选项按钮，选择【文件】|【保存地图视图】可以将地图视图保存为bmp或png格式的图像，便于在图像编辑软件中查看或打印。2．“代码片段”选项卡Dreamweaver预定义了一些能实现特定功能的代码片段，在制作网页时，可以利用文件面板的“代码片断”选第2章Dreamweaver基础1062.3使用Dreamweaver建立和管理站点

项卡(图2.15)，直接将代码片断插入到网页中。在Dreamweave中可以创建并插入HTML、JavaScript、

CFML、ASP、JSP等代码片断。(1)插入代码片断①在文档的代码视图中，将插入点放在要插入代码片断的位置，将文件面板切换到“代码片断”选项卡。②在“代码片断”列表中选择要插入的代码片断，双击或单击面板左下角的“插入”按钮，当前所选代码片断就会被插入到文档中。

(2)创建代码片断第2章Dreamweaver基础1072.3使用Dreamweaver建立和管理站点①在“代码片断”面板中，单击该面板底部的新建代码片断按钮，显示“代码片断”对话框(图2.16)。②完成添加代码内容等设置，单击“确定”按钮。(3)编辑代码片断在“代码片断”面板中，选择一个代码片断并单击面板底部的编辑代码片段按钮，弹出显示代码片断内容的对话框，直接修改后保存即可。(4)删除代码片断在“代码片断”面板中，选择一个代码片断并单击面板底部的(删除)按钮即可。第2章Dreamweaver基础108本章小结本章主要介绍了Dreamweaver的特点，各种窗口、工作面板、工具栏的使用方法以及站点的建立与管理。大多数网页元素都可以借助插入工具栏添加，灵活使用文档窗口的三种视图方式有助于提高网页制作效率，利用属性面板可以查看和更改所选定网页元素的各种属性，文件面板等工具为站点及其资源的管理提供了方便环境。第3章文档的基本操作109第3章文档的基本操作第3章文档的基本操作1103.1文档的基本操作3.1.1文档的建立和保存如图3.1所示，在Dreamweaver中，建立文档有如下三种方式：①在Dreamweaver的起始页对话框中选择“创建新项目”下的相应项目，静态网页一般选择“HTML”；②选择主菜单【文件】|【新建】，在弹出的对话框中选择相应的项目；③在“文件”面板中右击，在弹出菜单中选择【新建文件】，出现新文件“untitled.html”，将其改为自己需要的文件名，然后双击打开它。第3章文档的基本操作1113.1文档的基本操作建立文档后出现如图3.2所示的文档窗口，在此窗口中就可以进行网页的编辑操作了。编辑完成以后，选择【文件】|【保存】将文件存储到磁盘上。对于还未命名的文档，会弹出如图3.3所示的对话框，用户要在此对话框中为文件命名并选择保存位置。保存以后文档仍然处于打开状态，需选择主菜单中的【文件】|【关闭】命令，将文档关闭，如果多个文档需要关闭，可选择主菜单中的【文件】|【全部关闭】。第3章文档的基本操作1123.1文档的基本操作注意，在为文件和文件夹命名时，只能用英文字母和数字，不能使用中文、空格和其它字符。如果使用了除英文字母和数字之外的其它字符，在上传到服务器上时，很多服务器会更改这些字符，而导致与这些文件的链接中断。在【文件】菜单中还有一些和“保存”相关的命令(如图3.4所示)，用户可根据需要选择使用。3.1.2打开文档打开已经存在的文档也有三种方式：可以通过文件面板找到该文档，双击打开它；也可以选择主菜单中的【文件】|【打开】，在弹出的对话框中找到该文件打第3章文档的基本操作1133.1文档的基本操作开它；还可以在起始页对话框中选择【打开最近项目】|【打开】，在弹出的对话框中找到该文件并打开它。3.1.3预览和调试页面文档编辑完成后或编辑过程中，可以使用文档工具栏中的“在浏览器中预览和调试”按钮(或按F12键)进行预览，以查看所编辑文档在浏览器中的实际显示效果。Dreamweaver会自动用指定的浏览器将当前文档打开进行预览。如果预览前文档做过改动且未保存，系统将会提示保存文档，然后进行预览调试。第3章文档的基本操作1143.1文档的基本操作3.1.4设置页面属性设置页面属性即设置整个页面的外观等属性。可以通过以下三种方式打开“页面属性”设置对话框。①在文档窗口下方的属性面板中，点击“页面属性”按钮(参见图3.5)；图3.5页面属性按钮②在文档窗口(“设计”视图)中单击右键，在弹出菜单中选择【页面属性】命令；③选择主菜单【修改】|【页面属性】命令。在页面属性设置对话框中，可以对页面的外观、链接、标题、标题/

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

全套课件-《网页设计与制作》-马占欣

文档简介

温馨提示

最新文档

评论

全套课件-《网页设计与制作》-马占欣

文档简介

温馨提示

最新文档

评论

相关文档