网页制作教程.ppt

通过本章学习，应该掌握以下内容：认识网页构成网页的基本要素制作网页的基本工具美化网页的基本工具网页制作的基本步骤,第1章 网页制作初识,1.1 一个校园网的制作示例,1.1.1 主要网页画面1.1.2 网页的基本功能1.2 网页的基本要素1.2.1 文字 文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，因此，当用户浏览时，可以很快的展现在用户面前。另外，文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载，便于以后长期阅读，也可对其进行编辑打印。但是没有编排点缀的纯文字网页，又会给人带来死板不活泼的感觉，使得人们不愿意再往下浏览。所以，文字性网页一定要注意编排，包括标题得字型字号，内容的层次样式，是否需要变换颜色进行点缀等等。,1标题 一个网页通常都有一个标题，表明本网页的主要内容。标题是醒目，是吸引浏览者能否注意的一个关键，因此对标题的设计是很重要的。2字号 网页中的文字不能太大或太小。太大会使得一个网页信息量变，太小又使人们浏览时感到费劲。一个优秀网页中的文字，应统筹规划，大小搭配适当，给人以生动活泼之感觉。3字型 在网页适当的位置采用不同的字体字型，也能使网页产生吸引人的效果。应该注意的是在报刊上变换字体字型非常普遍，它可以在不同的地方使用不同的字型。但在网页制作上却要慎重。因为有些美丽的字型在制作网页的计算机上有，但将来别人浏览你的网页时，浏览者的计算机上未必装有这种字体。这样浏览者就无法得到你预想的浏览效果，甚至适得相反。如果只是标题或少量的文字，可以将采用的特殊字体制作成图形方式，就可避免其他浏览者看不到的尴尬局面了。当文本内容较多时。可以利用表格形式来实现。,1.2.2 图形 这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。一幅优秀的网页除了有能吸引浏览者的文字形式和内容外，图形的表现功能是不能低估的。网页上的图形格式一般使用JPEG和GIF，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。图形在网页中通常有如下应用。1菜单按钮 网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两种形式，由此可以转入不同的页面。2背景图形 为了加强视觉效果，有些网页在整个网页的底层放置了图形，称作背景图。背景图可以使网页更加华丽，使人感到界面友好。但由于这是一个比较大的图形，需要占据较大的空间，致使网页的显示速度明显变慢，所以，近期的网页以及比较著名的访问量比较大网站一般都不设置背景图形。,1.2.3 链接标志 链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。链接的标志有文字和图形两种。制作一些精美的图形作为链接按钮，使它和整个网页融为一体。1.2.4 交互功能 Internet区别其他媒体的一个重要标志就是它的交互功能。例如在商务网站的页面上，人们经过浏览，选择了某一个产品，就需要将自己的决定通过Internet告诉这个网站，网站能够自动对该产品的数据库进行检索，及时回应有还是没有，数量、规格、价格等信息。如果用户选择确定，那么网站能够返回确认信息。像这种交互功能其他媒体是无法比拟的。通常网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。,1.3 网页制作和美化工具1.3.1网页制作工具1超文本标识语言（HTML）HTML（Hypertext Markup Language）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。HTML文档由文本、格式化代码和导向其他文档的超链接组成。2FrontPage FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便，Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员，使之功能更为强大。,3Dreamweaver Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。另外，Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用，即使是初学者也能制作出相当于专业水准的网页，所以Dreamweaver是网页设计者的首选工具。Dreamweaver支持动态HTML，并采用了Roundtrip HTML技术，从而奠定了在网页高级设计功能方面的领先地位。在进行网页设计过程中，动态HTML技术能够让用户轻松设计复杂的交互式网页，产生动态效果；而Roundtrip HTML技术则可以真正支持HTML源编辑模式，不会产生冗余代码，使网页渲染速度加快。因此，Dreamweaver是一种可以满足多层次需求、功能强大的可视化专业级网页设计及制作工具。,1.3.2网页美化工具 为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化 工具对网页进行美化。1Photoshop Photoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。2Fireworks Fireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。作为一款为网络设计而开发的图像处理软件，Fireworks还能够自动切割图像、生成光 标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的 网络图像生成器。用户可以从http:/www.站点下载该软件。,3Flash Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。1.4 网页制作的基本步骤1.4.1 整体规划 进行网站的整体规划也就是组织网站的内容和设计其结构。网页制作者在明确网页制作的目的及要包括的内容之后，接下来就应该对网站进行规划，以确保文件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。,层状结构 层状结构（如图1.8所示）类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。,线性结构 线性结构（如图1.9所示）类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。通常情况下，网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的特点，使网站文件既具有条理性、规范性，又可同时满足设计者和浏览者的要求。,Web结构 Web结构（如图1.10所示）类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。,主 页,页面1,页面2,页面3,页面4,页面5,页面7,页面8,一级标题,二级标题,图1.10 Web结构,页面6,1收集整理资料2准备素材3内容规划1.4.2 网页设计与制作1静态网页的设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分。一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议：,（1）不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。（2）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。须知，在一页的上部是显眼而宝贵的地方，不要只放几个粗大的字或图片。（3）切勿以800600以上的分辨率设计网页，常用的分辨率是640480及800600。现在国内的站点基本上都是800600，但是如果主要是面向国外访问者的站点，建议使用640480。（4）不应在每页中插入太多的广告。相信任何访问者都不会喜欢浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太多，只会令人烦厌。（5）不要每页都采用不同的墙纸，以免每次转页时都要花费过多的时间去下载，采用相同的底色或墙纸还可以增强网页一致性，以树立自己的风格。,（6）底色或墙纸必须与文字对比强烈，以易于阅读。这并不是要求永远使用鲜亮的背景搭配深色的文字，但深色背景常要求与主题配合，有较多的顾虑，如果网页是文章式或是包含大量文字，不妨在底色与文字的搭配上下些工夫，力求让访问者能够舒适地阅读网页。（7）不要把图片白色当作透明，要知道别人的系统不一定把内定底色设为白色，解决的办法除了真的把该网页的底色设为白色之外，最好还是用图片编辑工具将图片设为透明颜色。2为网页的添加动态效果 静态网页制作完成后，接下来的工作就是为网页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以及加入动画效果等。,1.4.3 测试网页 当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性，达到最初的内容组织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。如果在测试过程中发现了错误，就要及时修改，在准确无误后,方可正式在Internet上发布。在进行功能性测试和完整性测试后，有的还需要掌握整个站点的结构以备日后的修改。1.4.4 网页上传发布 网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地，但必须支持ASP，因为动态程序是建立在ASP基础上的。,通过本章学习，应该掌握以下内容：FrontPage和Dreamweaver的基本操作创建站点的方法 管理站点的方法 能够为站点添加网页 导入文件到当前站点的方法发布站点的方法,第2章 创建站点,2.1 利用FrontPage 2002创建站点,2.1.1 FrontPage 2002简介 1FrontPage 2002的特色（1）强大的网页设计功能 可以智能地完成HTML文本的编辑，并可以针对不同的浏览器对网页进行设置;可以提供对多种版本的浏览器的支持;完善了所见即所得的网页编辑操作（2）丰富的网页设计模板、设计向导和主题样式 提供了多种网页设计模板、网页设计向导和主题样式。使用这些模板、向导和样式，即使是初学者也可以设计出具有专业水准的网站。2FrontPage 2002的新增功能 FrontPage 2002在FrontPage 2000的原有功能基础上增加了图片库和增强的绘图工具，优化了更新、控制与管理站点的方法。还增加了更多的表格格式选项、Office剪贴板任务窗格、网页选项卡、自定义链接栏和电子商务等其他新功能。,3FrontPage 2002工作界面（1）标题栏（2）菜单栏（3）常用工具栏（4）格式工具栏（5）窗口栏“网页”视图 网页视图是进行网页编辑的操作界面。“文件夹”视图 文件夹视图的功能有些类似于Windows资源管理器，主要是用来对网站的目录和文件夹进行管理.“报表”视图“报表”视图主要用于查看与网页制作有关的各项参数。“导航”视图“导航”视图用来显示和编辑网页的导航关系。“超链接”视图“超链接”视图显示的是站点中的某个网页与其他网页之间的关系，“任务”视图“任务”视图用来查看网站和网页设计的完成情况。（6）状态栏,2.1.2 创建站点1创建新站点 选择“文件”|“新建”|“网页或站点”命令，在窗口栏打开“新建网页或站点”窗格；单击“新建”下的“空白站点”超级链接，打开“Web站点模板”对话框;单击站点模板中的“空白站点”图标，在“指定新站点的位置”文本框中输入新站点的位置。单击“确定”按钮.注意：在创建站点选择路径时，最好选择某个文件夹作为站点，而不要选择某个磁盘分区（例如F盘）作为站点，否则可能会导致整个磁盘分区瘫痪。2导入一个已存在的站点 要导入一个站点，首先应选择“文件”菜单下的“导入”命令，然后根据提示，依次选择需导入的站点即可。3将文件夹转换为站点 FrontPage 2002中可以将一个已经存在的文件夹转换为站点,2.1.3 管理站点 1打开站点 单击工具栏中的“打开”按钮，弹出“打开文件”对话框，在“打开文件”对话框中选择要打开得网页，选中之后，单击“打开”按钮，2重命名站点 在创建站点时，如果没有为站点创建一个好的名称，可以重新为站点命名。重命名Web站点时，FrontPage 2002会用新站点名称自动更新所有内部超链接以及其他站点设置。3删除站点 如果创建的站点不理想，修改起来又十分麻烦，可以将站点删除。在FrontPage 2002中选择“文件夹”视图，并选择要删除的站点，单击“Delete”键，或单击鼠标右键，从弹出的快捷菜单中选择“删除”命令，就可以删除所选的站点了。注意：应用手动方式删除文件，删除的文件会自动放置于“回收站”中，而应用“删除”命令方式删除文件，被删除的文件直接从磁盘中删除，是不可恢复的。,2.1.4 为站点添加网页 创建完站点，接下来的任务就是为站点添加网页。在FrontPage 中，为站点添加网页的方法有两种。一种是：单击工具栏中的“新建网页”按钮或者按快捷键“CtrlN”，打开一个空白网页，设计者可以在网页编辑区编辑自己的网页；另一种是：选择“文件”|“新建”|“网页或站点”命令，在打开的“新建网页或站点”窗格中单击“网页模板”超级链接，利用网页模板创建网页。2.1.5 导入文件到当前站点 站点设计者可以通过导入一个页面而减轻自己的工作量，并吸收别人成功的经验（当然要得到版权的许可）。导入方法与导入站点的方法类似。2.1.6 发布站点 1设置浏览器的兼容性 2测试站点（1）查看站点中的所有内部超链接（2）验证各个外部超链接的有效性（3）修复断开的超链接（4）更新超链接,2.2 利用Dreamweaver 4.0创建站点2.2.1 Dreamweaver 4.0简介 1Dreamweaver 4.0的界面（1）菜单栏（2）工具栏（3）对象面板（4）浮动面板（5）文档窗口（6）状态栏（7）启动面板（8）属性面板 2Dreamweaver的视图 作为一种所见即所得的网页编辑软件，Dreamweaver自动在用户创建网页时生成底层的HTML代码，同时提供了很好的HTML代码编辑功能。使用工具栏中的视图切换按钮可以很方便地切换到代码视图，以便查看当前编辑网页的HTML源代码。,2.2.2 定义站点1站点窗口 在Dreamweaver 4.0的编辑窗口，选择“Site”|“New Site”菜单，可以打开站点窗口。站点窗口是Dreamweaver另一个重要的窗口，左半部是远程站点的目录，一般显示为空，只有在FTP连通状态下才有显示内容；右半部是当前编辑中的本地目录，有点像windows的资源管理器。2定义站点 方法1：在站点窗口的下拉菜单选择最后一项“Define Sites”，弹出“Define Sites”对话框，点击“New”按钮定义一个新网站。方法2：在编辑窗口或站点窗口选择命令菜单“Site”|“New Site”选项，弹出“Site Definition for Unnamed Site”对话框，设置结束单击“OK”按钮。,2.2.3 站点的基本操作 1打开站点 如果要打开站点，可以在文档窗口或站点窗口中单击“Site”菜单的“Open Site”命令，然后在弹出列表中选择当前已经定义过的站点名称。也可以使用键盘快捷键“F8”，此时将打开最后一次打开的站点窗口。2复制站点 若要复制当前站点，可以使用文档窗口或站点窗口中“Site”菜单的“Define Site”命令，打开“Define Site”对话框。选中要复制的站点名称，单击“Duplicate”（复制）按钮即可对当前站点进行复制操作。3编辑站点 如果要更改当前站点设置，比如对站点进行修改站点名称、设置参数选项等编辑操作，可以使用上面的方法打开“Define Site”对话框，选中一个站点后单击“Edit”按钮，即可打开该站点的定义对话框进行站点编辑。4删除站点 在Dreamweaver 4.0中删除一个站点非常容易，在弹出的“Define Site”对话框中，单击“Remove”（删除）按钮就可以删除选中的站点。,通过本章学习，应该掌握以下内容：HTML及其功能利用HTML创建和测试Web页的方法利用HTML设置标题和文字利用HTML设置段落利用HTML进行文本格式的处理利用FrontPage 2002和Dreamweaver 4.0处理文本,第3章 网页文本的处理,3.1 利用HTML处理文本,3.1.1 HTML基础1标记符 标记符又称标签，HTML是影响网页内容显示格式的标记符集合，浏览器根据标记符决定网页的实际显示效果。在HTML中，所有的标记符都用尖括号括起来。例如，表示HTML标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。如：.HTML标记符是不区分大小写的，但通常约定标记符使用大写字母，这有利于HTML文档的维护。属性是用来描述对象特征的特性。在HTML中，所有的属性都放置在开始标记符的尖括号里，属性与标记符之间用空格分隔，属性的值放在相应属性之后，用等号分隔，而不同的属性之间用空格分隔。格式为：受影响的内容 HTML属性通常也不区分大小写。,2HTML文档的基本结构一个典型的HTML文本的基本结构形式如下：文本标题文本内容上述文档用到四种标记符，其意义如下：,（1）HTML标记符 这两个标记符是HTML文档的标记符。处于文档的最前端，表示文档的开始，即浏览器从开始解释。而则位于文件的最后一行，这样的结果表示这一整份的文档都是HTML语法的文档。（2）HEAD标记符 是HTML文件头标记符，用来描述HTML首部的内容，说明文档的整体信息。所有首部信息并不会出现在利用WWW浏览器所看到的窗体中。通常与某些标记符一起使用，如标记符。（3）TITLE标记符 指的是一份文档的标题。通常来说，每一份文档都应该有一个标题来简述这一份文档的特色或是主题。对于WWW浏览器而言，标题所在的位置虽然依照浏览器的不同而不同，但是大部分都位于浏览器的最上方。（4）BODY标记符 指的是定义出一个HTML文档的体部，位于首部下面。在标记符内的文字，所有使用标记符的地方都可以经浏览器正确地显示在浏览器窗体中。,3创建和测试Web页 由于HTML文件的实质就是文本文件，因此可以用任何文本编辑器编辑HTML文件，通常可以使用Windows系统中的“记事本”程序。另外，由于Windows98Me2000系统中捆绑了IE5或IE5.5（Internet Explorer 5.0或5.5），因此用户在Windows中可以方便地对Web页进行简单的测试。（1）创建Web页 保存了Web页之后，在所选择的文件夹中将包含所创建的Web页，可以由IE将其打开。（2）发布Web页 用户创建了Web页之后，通常可以直接将其保存在硬盘、软盘或光盘上，作为一种电子文档，也可以将其发布到Internet上，以便让全世界的浏览者都能够进行浏览。发布Web页时应按以下步骤进行。创建本地站点 申请网页空间 用FTP上传网页,3.1.2 标题处理 在HTML中，用户可以通过Hn标记符来标识文档中的标题和副标题，其中n是1到6的数字。表示最大的标题，表示最小的标题。使用标题样式时，必须使用结束标记符。标题文字标记符的格式：标题文字 属性align用来设置标题在页面中的对齐方式：left（左对齐）、center（居中）或right（右对齐）。如:计算机系 标记符默认显示宋体。标记符会自动插入一个空行，不必再用空行标记符。在一个标题行下无法使用不同大小的字体。与HEAD中的定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。,3.1.3 段落处理 在HTML中段落处理是通过段落标记来完成的，常用的段落标记符有：1注释标记符 HTML的注释标记符的格式为：2强制换行标记符 强制换行标记符为，放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。3强制换段标记符 在HTML文档中，无法用多个回车、空格、Tab键来调整文档段落的格式。要用HTML的标记符来强制换行、分段。（1）强制换段标记符强制换段标记符的格式为：文字（2）设置段落标记符设置段落标记符的格式为：文字,4显示预排格式标记符 当用其他编辑工具编排好了一段文字后，其中很可能有一些HTML文件不支持的控制符号，如同车、多个空格、Tab键等。如果希望在浏览网页时仍保留在编辑工具中已经排好的段落格式，可以使用标记符将预先排好的格式保留下来。显示预排格式标记符的格式为：预先排好的格式5分区显示标记符 分区显示标记符的格式为：文本或图像 6水平线 在页面中插入一条水平标尺线（Horizontal Rules），可以使不同功能的文字分隔开，看起来整齐、明了。水平线标记符的格式为：,3.1.4 文本格式处理文本格式处理包括文字设置和格式处理。1文字设置 在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型和颜色，通常用FONT标记符来完成。FONT标记符设置格式为：被设置的文字 size属性是字号属性，用于控制文字的大小，它的取值既可以是绝对值，也可以是相对值。face属性是字体标记符，用来指定字体样式。color属性可用来控制文字的颜色，属性值可以是颜色名称或十六进制值。,2格式处理HTML中的格式标记符有：标记符之间加入的文本将会在浏览器中按两边缩进的方式显示出来。标记符是指Directory List，用来创建一个普通的列表，;用来创建列表中的上层项目；用来创建列表中最下层项目；和都必须放在标志对之间。标记符指Ordered List，它是用来创建一个标有数字的列表；标记符用来创建一个标有圆点的列表；标记符只能在或标记符内使用，此标记符用来创建一个列表项。,3设置页面属性（1）设置页面背景颜色 标记符中使用bgcolor属性可以为网页设置背景颜色。（2）设置页面背景图像 单纯使用一种颜色作为背景显然有些单调，网页设计者也可选择特定图案作为页面的背景，使用BODY标记符的background属性即可。HTML语句为：（3）设置文字和超链接的颜色 在设置了背景图案或背景颜色后，常常需要更改正文字符和超链接的颜色，以便与背景相适应。设置正文和超链接颜色时，可以使用BODY标记符的text、link、vlink和alink属性。其中，text属性用于设置正文的颜色；link属性用于设置未被访问的超链接的颜色；vlink用于设置已被访问过的超链接的颜色；alink用于设置活动超链接（即当前选定的超链接）的颜色。,3.2 其他处理网页文本的方法3.2.1 利用FrontPage 2002处理网页文本1输入文本 利用FrontPage 2002创建一个网页后，在文档的编辑区域内，可以看到闪烁的光标，在此可以输入文字。在输入文字的过程中，光标也跟着向后移动。2编辑文本 应用FrontPage 2002编辑文本的基本操作与其他的文字处理软件有相同之处。常用的文本编辑操作有：选择、移动、复制、粘贴、剪切、删除、查找和替换等。,3设置文本格式 在FrontPage 2002中，不但可以非常灵活地设置各种文本格式，而且可以设置斜体、下划线、上/下标、空心、阴影等各种特效。4段落式样和对齐方式（1）段落式样 FrontPage2002为网页设计者提供了16种样式，其中6种是段落样式。（2）对齐方式 在格式栏中有4个按钮与段落的操作有关，这4个按钮分别代表左对齐、右对齐、居中对齐和分散对齐。5编号列表 在FrontPage 2002中，设置编号列表可以利用按钮和按钮，是用默认的标准项目符号，也可以自定义项目符号列表。6为段落添加水平线,3.2.2 利用Dreamweaver 4.0处理网页文本 Dreamweaver 4.0中对文本的输入及编辑，与Word极其相似。1编辑文本（1）换行 自动换行：在输入文字时，若某一行的长度超过了Dreamweaver窗口的显示范围，文字将自动换到下一行。利用“Enter”键换行：在输入文字后按“Enter”键，文字成段，且上下段之间空一行。利用“Shift+Enter”键换行：如果想要将文字手动换行，中间又不能出现空白行，可以按“Shift+Enter”键。（2）插入特殊的字符 有时为了内容的需要，要在网页中插入一些键盘上没有的特殊字符，在Dreamweaver 4.0 中，这些特殊字符不仅可以通过“Insert”菜单下的“Special Character”命令来插入，还可以通过对象面板来直接插入。,2查找替换文本的内容 如果要在文档中查找或替找某个文字，可利用Dreamweaver 4.0提供的查找和替换功能。选择“Edit”|“Find and Replace”（查找与替换）命令，打开“Find and Replace”对话框，3设置文本格式 在Dreamweaver 4.0中设置文本格式可以通过属性面板，类似与Microsoft Word中对文本的属性设置，包括段落的格式、字体、字号、字的颜色、字体加粗倾斜、对齐方式（左对齐居中右对齐）、文字所链接的路径或URL等。,通过本章学习，应该掌握以下内容：利用FrontPage 2002创建表格的四种方法 编辑表格的方法 设置表格的属性的方法 用表格设计页面布局 利用HTML和Dreamweaver 4.0创建表格的方法,第4章 网页表格的处理,4.1 利用FrontPage 创建并编辑表格,4.1.1 创建表格 表格以行和列的形式来组织信息，具有容量大、结构严谨和效果直观等多个优点，是网页中不可缺少的记录或总结工具，比如个人简历、产品信息、业务报表甚至家庭理财都能用到表格。FrontPage 2002提供了强大的制表功能，使得在制作网页的过程中插入表格的操作显得简便、快捷。在FrontPage 2002中，创建表格有以下4种方法。1使用菜单命令创建表格 如果用户希望准确地设置要创建的表格的行、列数，可以通过执行菜单命令创建所需的表格。使用这种方法，可以同时设置表格所有的属性，如行和列的数目、边框宽度等。选择“表格”|“插入”|“表格”命令，打开图4.1所示的“插入表格”对话框；输入行数、列数，设置表格的对齐方式、边框的粗细、单元格边距和间距，单击“确定”按钮，即可得到相应的表格。,2使用命令按钮创建表格 在编辑网页时，使用“常用”工具栏中的“插入表格”按钮，可以快速地在网页中插入一个表格。插入表格时用户可以自由选择表格所包含的行数和列数.3绘制表格 利用前面两种方法可以建立“n乘m”单元数的表格，单元格大小会自动平均分配。如果需要的表格比较简单，则可以手动绘制表格。手动绘制表格的操作步骤如下：选择“视图”|“工具栏”|“表格”命令，打开表格对话框；单击“手绘表格”按钮，在编辑区按下鼠标左键并拖动，即可划出表格边框，再在边框内添加线条即可画出需要的表格。如果有画错的线条可以用表格中的“擦除”工具擦除。4将文本转换成为表格 如果有现成的文本，可以把文本转换成为表格。,4.1.2 表格的编辑 1修改表格 应用菜单或命令按钮创建后的表格，有些是需要经过修改才能应用的。修改表格主要包括修改表格的大小、合并单元格、拆分单元格等操作。（1）修改表格大小在FrontPage 2002中，修改表格的大小有以下两种方法。通过鼠标拖拽法可以粗略地调整表格的大小。通过“表格属性”对话框可以精确地调整表格的大小。（2）合并单元格在FrontPage 2002中合并单元格的方法有以下三种：先选择要合并的单元格，然后执行“表格”|“合并单元格”命令即可。选择要合并的单元格，在选中的单元格中单击鼠标右键，从弹出的快捷菜单中选择“合并单元格”命令。选择要合并的单元格，单击“表格”工具栏上的“合并单元格”按钮。,（3）拆分单元格 拆分单元格与合并单元格是两个逆操作。拆分单元格就是将一个单元格拆分为多个单元格。在FrontPage 2002中拆分单元格的方法有以下几种。将光标放在要拆分的单元格内，执行“表格”|“拆分单元格”命令，弹出“拆分单元格”对话框，如图4.9所示。在该对话框中选择“拆分为列”或“拆分为行”，单击“确定”按钮。将光标放在要拆分的单元格内，单击鼠标右键，从弹出的快捷菜单中选择“拆分单元格”命令。将光标放在要拆分的单元格内，单击“表格”工具栏上的“拆分单元格”按钮。,2在表格中添加文字和图片 创建一个表格以后，就可以在表格中添加相应的内容了，在表格中添加的内容有文字与图片两种形式。（1）在表格中添加文字 在创建好的表格内按要求输入文字，调整文字的字号、字体、对齐方式等。（2）在表格中插入图片 选中要插入图片的单元格，选择“插入”|“图片”|“来自文件”（根据需要选择图片的来源）命令，打开“图片”对话框；在对话框中选择图片，选中图片文件之后，单击“插入”按钮，则图片及插入到相应的单元格里。调整图片大小及位置。3删除表格（1）删除单元格 在FrontPage 2002中如果要删除某个单元格，可以通过以下方法：选择要删除的单元格，执行“表格”|“删除单元格”命令。选择要删除的单元格，并单击鼠标右键，从弹出的快捷菜单中选择“删除单元格”命令。,（2）删除列或行 在FrontPage 2002中如果要删除某列或某行，可以采用以下方法：选择要删除的列或行，执行“表格”|“删除单元格”命令即可。选择要删除的列或行，并单击鼠标右键，从弹出的快捷菜单中选择“删除单元格”命令。（3）删除整个表格 如果要删除某个表格，只需选中此表格中的所有单元格，然后单击右键并从弹出的快捷菜单中选择“删除单元格”命令即可。删除整个表格的操作方法如下：注意：如果在删除表格、单元格、行或列时，使用Delete键删除，则只删除该表格、单元格、行或列中的文本，而不是删除表格。,4.1.3 设置表格的属性 将光标置于表格中，然后单击右键并从弹出的快捷菜单中选择“表格属性”命令，在打开的“表格属性”对话框中进行表格属性设置。1表格的布局（1）表格的对齐方式 FrontPage 2002中提供了4种对齐方式：默认、左对齐、右对齐和居中。单击“表格属性”对话框中的“对齐方式”下拉列表框，可从中选择所需的对齐方式。（2）表格的浮动方式 此功能有点像图片的环绕功能。创建一个表格后，表格的两侧是不能输入任何文字的。如果进行了浮动设置，就可以获得与图片环绕差不多的效果了。FrontPage 2002中提供了3种浮动方式：默认、左对齐和右对齐。（3）单元格的边距与间距 如果想设置表格线与表格内容间的距离或两单元格间的距离，可以通过单元格边距与单元格间距两个选项来设置。,2为表格添加背景 为表格添加背景也要应用“表格属性”对话框。表格背景可分为两种形式：一种是为表格添加背景颜色，另一种是为表格添加背景图片。（1）为表格添加背景颜色 选中表格或单元格后，单击“表格属性”对话框中的“颜色”选项右侧的向下箭头，从弹出的颜色面板中选择所需的背景颜色，则此颜色就会显示在表格的背景层中。（2）为表格添加背景图片 选中表格或单元格后，启用“表格属性”或“单元格属性”对话框中的“使用背景图片”复选框，然后选择一个图片作为表格的背景，可为表格添加背景图片。3为表格添加边框 在FrontPage中如果想要改变表格的边框，可以采用以下方法：选择要设置边框的表格，执行“格式”|“边框和底纹”命令。在要设置边框的表格中单击鼠标右键，从弹出的快捷菜单中选择“表格属性”命令，打开“表格属性”对话框，在“边框”选项组中进行相关设置。,4.1.4使用表格设计页面布局 在网页设计中表格还有一个重要的作用，就是设计页面布局。一个空白网页布置起来比较困难，尤其是一些复杂的页面。这时可以利用表格将网页分成若干个单元格，每个单元格对应网页中的一个部分。然后，对每一部分分别进行设计和制作，这样就可以使复杂的网页设计简化，而且所设计的网页清晰、有条理性。另外，在很多网页上都有各种细线的布局效果，使得页面简洁明快、条理清楚。这些细线要么是用图像的方式生成，要么是利用表格的各种特性制作而成。使用表格实现这些细线可以使页面文件更小，下载更快，因此更为实用。细线效果大致可以分为两类，一类是表格框线，另一类是各种横竖分隔线。用表格布置页面时，首先要规划页面的布置，然后利用表格的平铺和嵌套，将网页中的各元素定位在各自的位置上。由于浏览器在下载网页时，先下载整个表格，然后再下载表格中的内容。所以在用表格布置页面时，不能将整个网页的内容都放在一个大表格中，以免影响网页的下在速度。,4.2 其他处理网页表格的方法 4.2.1 利用HTML处理网页表格 1表格的基本构成 通常在HTML中创建一个普通的表格应包括以下标记符：（1）TABLE TABLE标记符用于定义整个表格，表格内的所有内容都应该位于和之间。（2）CAPTION 如果表格需要标题，那么就应该使用CAPTION标记符将表格标题包括在和之间。（3）TR TR标记符用于定义表格的行，对于每一个表格行，都对应一个TR标记符。TR标记符的结束标记符可以省略。,（4）TD和TH 在表格行中的每个单元格，都对应于一个TD标记符或者TH标记符，用于标记表格的内容，其中可以包括文字、图像或其他对象。TD与TH的功能和用法几乎完全相同（可以任意混合使用，但效果略有不同），唯一不同之处在于TD表示普通表格数据，而TH表示表格的行列标题数据（也就是通常所说的表头）。TD和TH的结束标记符都可以省略，并且可以不包括任何内容 3表格的编辑及属性设置（1）合并单元格 在和标记内使用rowspan属性可以进行行合并，rowspan的取值表示垂直方向上合并的行数；使用colspan属性可以进行列合并，colspan的取值表示水平方向上的合并的列数。（2）边框与分隔线 在TABLE标记内使用frame、rules和border属性可以设置表格的边框和单元格分隔线。（3）控制单元格空白 在TABLE标记符中使用cellspacing属性可以控制单元格之间的空白，,（4）表格的对齐 表格的对齐包括页面对齐和内容对齐。表格的页面对齐 表格在页面中的对齐与其他页面内容一样，可以直接在TABLE标记符中使用align属性。另外，也可以用DIV标记符的align属性设置表格的对齐。表格的内容对齐 表格单元格内容的对齐包括各数据项在水平方向和垂直方向上的对齐。设置水平对齐的方法是：在标记符、内使用align属性，其常用的取值可以是：center、left、right、justify.设