数字出版原理与技术课件.ppt

1、数字出版原理与技术数字出版原理与技术第二次课第二次课一、相关的术语和概念一、相关的术语和概念J a v a s c r i p tJ S P数数 据据 库库B/S，浏览器和服务器，浏览器和服务器静静 态态 网网 页页动动 态态 网网 页页1、B/S结构结构 B/S结构指浏览器（结构指浏览器（Brower）和服务器（）和服务器（Server）结构，）结构，这种结构通常都是瘦浏览器，胖服务器，及即：大都是这种结构通常都是瘦浏览器，胖服务器，及即：大都是数据操作都在服务器上进行，浏览器仅仅安装一个浏览数据操作都在服务器上进行，浏览器仅仅安装一个浏览软件，例如软件，例如IE浏览器，浏览从服务器传过来的

2、网页。浏览器，浏览从服务器传过来的网页。2、Javascript Javascript是一种客户端（相对于服务器而言，客是一种客户端（相对于服务器而言，客户端只有浏览器）户端只有浏览器）脚本语言脚本语言。它直接把代码写到它直接把代码写到HTML 文档中，浏览器读取它们文档中，浏览器读取它们的时候才进行编译、执行，所以能查看的时候才进行编译、执行，所以能查看HTML 源文源文件就能查看件就能查看JavaScript 源代码。源代码。主要目的是为了解决服务器端交互产生的主要目的是为了解决服务器端交互产生的网速问题。网速问题。（例如，（例如，在网站上查询买房的贷款，在网站上查询买房的贷款，8年或年或

3、10年贷款年贷款20万需要每月月万需要每月月供多少，可以将利用供多少，可以将利用HTML语言中嵌入一个小的计算语言中嵌入一个小的计算Javascript程序，为客户提供更流畅的浏览效果。）程序，为客户提供更流畅的浏览效果。）这里要强调的是，倘若要调用后台数据库中的数据，还是要这里要强调的是，倘若要调用后台数据库中的数据，还是要用到后面将要讲授的用到后面将要讲授的JSP等技术。等技术。脚本语言脚本语言 脚本语言是一种脚本语言是一种解释性解释性的语言，不需要编译，可以直接用，的语言，不需要编译，可以直接用，由解释器来负责解释。例如由解释器来负责解释。例如vbscript,javascript,in

4、stallshield script 等等，它不象等等，它不象cc+等可以编译成二进等可以编译成二进制代码，以可执行文件的形式存在。制代码，以可执行文件的形式存在。脚本语言的设计，往往是作为一种临时的脚本语言的设计，往往是作为一种临时的“补丁补丁”。它的设。它的设计者并没有考虑把它作为一种计者并没有考虑把它作为一种“通用程序语言通用程序语言”，没有考虑，没有考虑用它构建大型的软件用它构建大型的软件。脚本语言一般都是以文本形式存在，类似于一种命令。脚本语言一般都是以文本形式存在，类似于一种命令。3、JSP（Java Server Pages)是一种是一种动态网页动态网页技术标准。它是在传统的网页

5、技术标准。它是在传统的网页HTML文件文件(*.htm,*.html)中插入中插入Java程序段，从而形成程序段，从而形成JSP文件文件(*.jsp)。即：。即：JSP页面由页面由HTML代码和嵌入其中的代码和嵌入其中的Java代码所组成。客户端通过页面向服务器发出请求，代码所组成。客户端通过页面向服务器发出请求，服务器对这些服务器对这些Java代码进行处理，然后将生成的代码进行处理，然后将生成的HTML页面返回给客户端的浏览器。页面返回给客户端的浏览器。java程序片段可以程序片段可以操纵数据库操纵数据库、发送、发送E-mail等，实现等，实现建立动态网站所需要的功能。建立动态网站所需要的功

6、能。所有程序操作都在服务器端执行，网络上传送给客户端的仅所有程序操作都在服务器端执行，网络上传送给客户端的仅是得到的结果，即在服务器端执行的程序操作。通常返回给是得到的结果，即在服务器端执行的程序操作。通常返回给客户端的就是一个客户端的就是一个HTML页面。页面。注意的是注意的是 Java与与Javascript不同，不同，Java的功能要比的功能要比Javascript强大很多，可以构建大型软件，强大很多，可以构建大型软件，Javascript只是只是能嵌在能嵌在HTML语言中做点小事的脚本语言。语言中做点小事的脚本语言。4、数据库和、数据库和SQL语言语言 按照数据结构来组织、存储和管理数

7、据的仓库按照数据结构来组织、存储和管理数据的仓库。SQL语言（语言（structured query language），结构化查），结构化查询语言询语言，是一种数据库查询和程序设计语言，用于存取，是一种数据库查询和程序设计语言，用于存取数据以及查询、更新和管理关系数据库系统。由于网站数据以及查询、更新和管理关系数据库系统。由于网站后台必须有数据库支持。后台必须有数据库支持。我们在实验中可能会涉及到：我们在实验中可能会涉及到：在在HTML语言中插入语言中插入Java，形成，形成JSP网页；网页；Java调用数据库时，会使用调用数据库时，会使用到一些简单的到一些简单的SQL语言；语言；5、静态网

8、页、静态网页静态网页是相对于动态网页而言，静态网页是相对于动态网页而言，静态网页是标准的静态网页是标准的HTML文件，文件，它的文件扩展名是它的文件扩展名是.htm或或.html，它可以包含文本、图像、声音、，它可以包含文本、图像、声音、FLASH动画、客户端脚本及动画、客户端脚本及JAVA小程序等。尽管在这种网页上使用小程序等。尽管在这种网页上使用这些对象后可以使网页动感十足；这些对象后可以使网页动感十足；但是静态没有后台数据库、不但是静态没有后台数据库、不含程序和不可交互的网页。网页上的每一行代码都是由网页设计人员含程序和不可交互的网页。网页上的每一行代码都是由网页设计人员预先编写好后，放

9、置到预先编写好后，放置到Web服务器上的，网页不包含在服务器端运行服务器上的，网页不包含在服务器端运行的任何脚本，在发送到客户端的浏览器上后不再发生任何变化，因此的任何脚本，在发送到客户端的浏览器上后不再发生任何变化，因此称其为静态网页。称其为静态网页。静态网页相对更新起来比较麻烦，适用于一般静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。更新较少的展示型网站。6、动态网页、动态网页动态网页，采用动态网站技术生成的网页都称为动态网页，与网页上的动态网页，采用动态网站技术生成的网页都称为动态网页，与网页上的各种动画、滚动字幕等视觉上的各种动画、滚动字幕等视觉上的“动态效果动态效果”

10、没有直接关系，动态网页没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果。具体内容的表现形式，无论网页是否具有动态效果。动态网页技术：动态网页必须是通过点击网页上的热点，调用在服务器动态网页技术：动态网页必须是通过点击网页上的热点，调用在服务器端运行的程序，即：能调用在服务器端运行的程序、网页、组件的网页端运行的程序，即：能调用在服务器端运行的程序、网页、组件的网页属于动态网页。它们会随不同客户、不同时间，返回给浏览器不同的网属于动态网页。它们会随不同客户

11、、不同时间，返回给浏览器不同的网页，这就是动态网页的是重要标志。这种调用技术就是动态网页技术，页，这就是动态网页的是重要标志。这种调用技术就是动态网页技术，例如例如ASP、PHP、JSP（同一种技术利用不同的语言编程）等。（同一种技术利用不同的语言编程）等。二、二、Dreamweaver功能和界面功能和界面 是使用最广泛的网站开发工具。它使用所见即所得的方法，是使用最广泛的网站开发工具。它使用所见即所得的方法，编辑网页，开发网站。编辑网页，开发网站。Dreamweaver CS4提供了多种工作界面，以适合不同的提供了多种工作界面，以适合不同的工作人员。本章将以工作人员。本章将以“经典经典”界面

12、模式介绍界面模式介绍Dreamweaver CS4在编辑网页，开发网站中的应用。在编辑网页，开发网站中的应用。Dreamweaver CS4的工作界面主要由的工作界面主要由菜单栏菜单栏、【插入】【插入】工具栏工具栏、【文档】工具栏【文档】工具栏、编辑窗口编辑窗口、状态栏状态栏、【属性】【属性】面板面板和各种面板组构成，下面简单介绍各主要组成部分。和各种面板组构成，下面简单介绍各主要组成部分。1、菜单栏通常位于界面的最上端，使用菜单栏可以通过选、菜单栏通常位于界面的最上端，使用菜单栏可以通过选择菜单的方式选择命令。择菜单的方式选择命令。2、【插入】工具栏在菜单的下方，、【插入】工具栏在菜单的下方

13、，【插入】工具栏的一【插入】工具栏的一个对象代表一条命令，这些命令多半与菜单栏中【插入】个对象代表一条命令，这些命令多半与菜单栏中【插入】菜单栏是相同的，但是通过【插入】工具栏的方式可以更菜单栏是相同的，但是通过【插入】工具栏的方式可以更快捷。快捷。常用类别常用类别 用于创建和插入最常用的对象，例如图像和表格。用于创建和插入最常用的对象，例如图像和表格。布局类别布局类别 用于插入表格、表格元素、用于插入表格、表格元素、div 标签、框架等。标签、框架等。表单类别表单类别 包含一些按钮，用于创建表单和插入表单元素。包含一些按钮，用于创建表单和插入表单元素。div 标签：标签：称为区隔标记。作用：

14、设定字、画、表格等的摆放位称为区隔标记。作用：设定字、画、表格等的摆放位置标记。置标记。有时也被称作有时也被称作“容器容器”。例如：。例如：的作用和居中标记的作用和居中标记 一样，一样，框架结构在第一堂课程的讲授时已经有介绍。框架结构在第一堂课程的讲授时已经有介绍。表单：表单是实现动态网页的一种表单：表单是实现动态网页的一种 主要外在形式，表单的主要功能是主要外在形式，表单的主要功能是 收集信息，即在网页上用户可以输收集信息，即在网页上用户可以输 入信息反馈到服务器上的写入区域。入信息反馈到服务器上的写入区域。每个输入的区域称为表单域。每个输入的区域称为表单域。3、【文档】工具栏在【插入】工具

15、栏的下方，使用【文档】工具栏在【插入】工具栏的下方，使用“文文档档”工具栏包含的按钮，可以在文档的不同视图之间快速工具栏包含的按钮，可以在文档的不同视图之间快速切换。工具栏中还包含一些与查看文档、在本地和远程站切换。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。点间传输文档有关的常用命令和选项。A A：代码视图：提供一个用于编写和编辑：代码视图：提供一个用于编写和编辑 HTMLHTML、JavaScriptJavaScript、服务器语言代码服务器语言代码(如如 PHP PHP 或或 JSP)JSP)以及任何其它类型代码的手以及任何其它类型代码的手工编码环境。工

16、编码环境。B B：代码和设计视图：将：代码和设计视图：将“文档文档”窗口拆分为窗口拆分为“代码代码”视图和视图和“设设 计计”视图。视图。C C：设计视图：是一个用于可视化编辑和快速应用程序开发的：设计视图：是一个用于可视化编辑和快速应用程序开发的设计环境。在该视图中，显示的可视化表示形式的文档是完设计环境。在该视图中，显示的可视化表示形式的文档是完全可编辑的，类似于在浏览器中查看页面时看到的内容，但全可编辑的，类似于在浏览器中查看页面时看到的内容，但同时可以进行编辑同时可以进行编辑 。ABCDF D：实时视图：实时视图：“实时实时”视图视图 与与“设计设计”视图类似，视图类似，“实实时时”视

17、图更逼真地显示文档在浏览器中的表示形式，并使视图更逼真地显示文档在浏览器中的表示形式，并使您能够像在浏览器中那样与文档交互。但您能够像在浏览器中那样与文档交互。但“实时实时”视图不视图不可编辑。不过，您可以在可编辑。不过，您可以在“代码代码”视图中进行编辑，然后视图中进行编辑，然后刷新刷新“实时实时”视图来查看所做的更改。视图来查看所做的更改。F：实时代码视图：在代码视图中显示实时视图的源代码。：实时代码视图：在代码视图中显示实时视图的源代码。点击点击“实时代码实时代码”按钮时，也会同时点击按钮时，也会同时点击“实时视图实时视图”按按钮。钮。4、【属性】面板：默认情况下，属性检查器位于工作区、

18、【属性】面板：默认情况下，属性检查器位于工作区的底部边缘，但是可以将其取消停靠并使其成为工作区中的底部边缘，但是可以将其取消停靠并使其成为工作区中的浮动面板。可以用来检查和编辑当前页面选定元素的最的浮动面板。可以用来检查和编辑当前页面选定元素的最常用属性，如文本和插入的对象。属性检查器的内容根据常用属性，如文本和插入的对象。属性检查器的内容根据选定的元素的不同会有所不同。例如，如果选择了页面上选定的元素的不同会有所不同。例如，如果选择了页面上的图像，则属性检查器就会改为显示该图像的属性，如图的图像，则属性检查器就会改为显示该图像的属性，如图像的文件路径、图像的宽度和高度、图像周围的边框像的文件

19、路径、图像的宽度和高度、图像周围的边框(如如果有，则会显示果有，则会显示)等等。等等。三、创建和管理站点三、创建和管理站点管管 理理 站站 点点 文件文件 打打 开开 保保 存存 网网 页页 创创 建建 本本 地地 站站 点点 启动启动Dreamweaver CS5程序，在菜单栏中，选择【站点】程序，在菜单栏中，选择【站点】【管理【管理站点】菜单项。站点】菜单项。弹出【管理站点】对话框，在对话框中，单击【新建】按钮。弹出【管理站点】对话框，在对话框中，单击【新建】按钮。弹出【站点设置对象效果】对话框，在对话框中，选择【站点】选项弹出【站点设置对象效果】对话框，在对话框中，选择【站点】选项卡，在

20、【站点名称】文本框中，输入准备使用的名称，单击【本地站卡，在【站点名称】文本框中，输入准备使用的名称，单击【本地站点文件夹】右侧的【浏览文件夹】按钮点文件夹】右侧的【浏览文件夹】按钮，选择准备使用的站点文件，选择准备使用的站点文件夹，单击【选择】按钮。夹，单击【选择】按钮。在【管理站点】对话框中，显示刚刚新建的站点，单击【完成】按钮。在【管理站点】对话框中，显示刚刚新建的站点，单击【完成】按钮。此时，在窗口右下方的【文件】面板中，即可看到创建的站点文件，此时，在窗口右下方的【文件】面板中，即可看到创建的站点文件，通过以上步骤即可完成使用【管理站点】向导搭建站点的操作。通过以上步骤即可完成使用【

21、管理站点】向导搭建站点的操作。1、创建本地网站、创建本地网站在制作网页时，我们会在站点中创建一些文件夹来存放网页中在制作网页时，我们会在站点中创建一些文件夹来存放网页中的图片，的图片，flash等文件，所以首先要新建一系列的文件夹，具体等文件，所以首先要新建一系列的文件夹，具体操作是：操作是：打开站点，右击右下角打开站点，右击右下角“站点站点”文件夹文件夹-在右击菜单中点击在右击菜单中点击“新建文件夹新建文件夹”选项选项-在站点文件夹下创建一个新的文件夹了。在站点文件夹下创建一个新的文件夹了。建立了文件夹之后，可以在右击菜单中点击建立了文件夹之后，可以在右击菜单中点击“新建文件新建文件”选项选

22、项，这样就可以新建一个文件。这样就可以新建一个文件。当然同样可以用右击文件或文件夹的方式复制或删除文件或文当然同样可以用右击文件或文件夹的方式复制或删除文件或文件夹。件夹。2、管理站点文件、管理站点文件3、打开网页文件、打开网页文件 只需要在站点文件夹中找到该网页文件，双击该文件即可只需要在站点文件夹中找到该网页文件，双击该文件即可打开。打开网页文件之后，即可进行相应的编辑。打开。打开网页文件之后，即可进行相应的编辑。四、文本的创建四、文本的创建输入项目符号输入项目符号 设置文字样式设置文字样式 文本对齐方式文本对齐方式 输入文本文字输入文本文字 段段 落落 缩缩 进进 在设计界面下可以直接输

23、入文字；在设计界面下可以直接输入文字；可以在下方的属性栏中找到可以在下方的属性栏中找到“项目符号项目符号”和和“项目编号项目编号”选选项，插入项目符号和项目编号项，插入项目符号和项目编号；在在“页面属性页面属性”窗口中，我们可以对字体进行颜色、大小、窗口中，我们可以对字体进行颜色、大小、字体等修改，如果你在字体下拉菜单中找不到你想要的字体字体等修改，如果你在字体下拉菜单中找不到你想要的字体样式，可以点击样式，可以点击“编辑字体列表编辑字体列表”，选择某些字体，并将它，选择某些字体，并将它们移到字体列表中们移到字体列表中，此时该字体就可以出现在字体下拉菜单，此时该字体就可以出现在字体下拉菜单中。

24、中。段落对齐可以在【格式】菜单中段落对齐可以在【格式】菜单中，选择对齐子菜单下的各种，选择对齐子菜单下的各种对齐方式。对齐方式。段落缩进可以利用属性栏中的段落缩进可以利用属性栏中的“文本突出文本突出”和和“文本缩进文本缩进”按钮进行操作。按钮进行操作。插入特殊字符插入特殊字符 选择【插入】工具栏中的选择【插入】工具栏中的“文本文本”按钮，可以弹出可选择按钮，可以弹出可选择插入的各种特殊字符。插入的各种特殊字符。同样，点击【插入】工具栏中的同样，点击【插入】工具栏中的“表格表格”按钮，可以插入按钮，可以插入表格；点击【插入】工具栏中的表格；点击【插入】工具栏中的“水平线水平线”按钮，可以插按钮，

25、可以插入水平线，并可以在软件下方的入水平线，并可以在软件下方的“属性属性”栏中对水平线进栏中对水平线进行样式的设置，行样式的设置，以及其他一些插入元素。以及其他一些插入元素。五、图片的插入和插入后的操作五、图片的插入和插入后的操作 1、点击、点击“插入插入”中的中的“图像图像”选项选项-打开打开“选择图像选择图像”文件，找到要插入的图片，点击文件，找到要插入的图片，点击“确定确定”按钮按钮-在弹出在弹出对话框中点击对话框中点击“是是”。2、注意的是：为了便于管理我们应该预先新建一个专门、注意的是：为了便于管理我们应该预先新建一个专门放置图片的文件夹，将图片放置在该文件夹下。放置图片的文件夹，将

26、图片放置在该文件夹下。3、在弹出、在弹出“图像标签辅助功能属性图像标签辅助功能属性”中，我们可以在中，我们可以在“替换文本替换文本”中输入图片的注释，如果当图片出现问题不中输入图片的注释，如果当图片出现问题不能显示时，就会出现该说明文字。能显示时，就会出现该说明文字。插入图片后可以对其进行修改插入图片后可以对其进行修改 4、裁剪图片、裁剪图片：点击：点击“裁剪裁剪”按钮按钮-使用鼠标拖动图片四使用鼠标拖动图片四周的矩形框，进行裁剪操作周的矩形框，进行裁剪操作-裁剪完成后，再次点击裁剪完成后，再次点击“裁裁剪剪”按钮，即可完成图片裁剪。按钮，即可完成图片裁剪。5、亮度和对比度、亮度和对比度：选中

27、需要修改的图片后，在软件下方：选中需要修改的图片后，在软件下方的属性窗口中点击的属性窗口中点击“亮度和对比度亮度和对比度”按钮按钮-在亮度和对比在亮度和对比度弹出窗口中进行调节。度弹出窗口中进行调节。6、锐化、锐化：选中需要修改的图片后，在软件下方的属性窗：选中需要修改的图片后，在软件下方的属性窗口中点击口中点击“亮锐化亮锐化”按钮按钮-在锐化弹出窗口中进行调节在锐化弹出窗口中进行调节。7、图片对齐：图片对齐可以利用菜单中、图片对齐：图片对齐可以利用菜单中“格式格式”菜单下菜单下“对齐对齐”选项选项 进行操作。进行操作。8、图像占位符：设计网页的时候，倘若图片位中的图片还没有设计、图像占位符：

28、设计网页的时候，倘若图片位中的图片还没有设计好，希望预先保留位置，可以利用好，希望预先保留位置，可以利用“图像占位符图像占位符”功能。选择功能。选择“插插入入”菜单下的菜单下的“图像对象图像对象”/“图像占位符图像占位符”选项选项-在弹出窗口中输入在弹出窗口中输入需要插入图片的长和宽需要插入图片的长和宽。选中占位符后，还可以在软件下方出现占。选中占位符后，还可以在软件下方出现占位符的属性面板中对占位符的颜色、大小、链接等进行设置。位符的属性面板中对占位符的颜色、大小、链接等进行设置。9、鼠标滑过图片后更换另一张图像：在、鼠标滑过图片后更换另一张图像：在“插入插入”菜单的菜单的“图像对象图像对象

29、”下选择下选择“鼠标经过图像鼠标经过图像”，在弹出框中选择好，在弹出框中选择好“原始图像原始图像”和和“鼠鼠标经过图像标经过图像”，可以实现该功能。，可以实现该功能。六、超链接的创建六、超链接的创建1、外部连接：外部链接指的是针对搜索引擎，与其它站点所做的友、外部连接：外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高,访问量大。访问量大。2、内部连接：内部链接是指同一网站域名下的内容页面之间互相链、内部连接：内部链接是指同一网站域名下的内容页面之间互相链接；也可以称之为站内链接

30、，对内部链接的优化其实就是对网站的站接；也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。内链接的优化。3、脚本链接：指执行、脚本链接：指执行 JavaScript 代码或调用代码或调用 JavaScript 函数，可函数，可以在不离开当前以在不离开当前 Web 页面的情况下为访问者提供有关某项的附加信页面的情况下为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、验证表单息。脚本链接还可用于在访问者单击特定项时，执行计算、验证表单和完成其它处理任务。和完成其它处理任务。如何创建超链接如何创建超链接指向文件图标创建超链接指向文件图标创建超链接 菜

31、单创建超链接菜单创建超链接 图像热点链接图像热点链接 属性面板创建超链接属性面板创建超链接 锚记链接锚记链接 1、属性面板创建：选中需要添加超链接的文字、属性面板创建：选中需要添加超链接的文字-点击属点击属性面板中的链接文件夹性面板中的链接文件夹-选中需要链接到的网页文件后点选中需要链接到的网页文件后点击击“确定确定”按钮。按钮。2、指向文件图标创建：选中需要添加超链接的文字、指向文件图标创建：选中需要添加超链接的文字-在在属性面板中用鼠标拖动属性面板中用鼠标拖动“指向文件指向文件”按钮按钮-将其拖到链接将其拖到链接文件（右下方的【文件】面板中）。文件（右下方的【文件】面板中）。3、菜单创建：

32、选中需要添加超链接的文字、菜单创建：选中需要添加超链接的文字-选择选择“插入插入”菜单中的菜单中的“超级链接超级链接”选项选项-选择想要链接的网页文件后选择想要链接的网页文件后点击点击“确定确定”按钮。按钮。4、图像热点链接：选中需要添加链接的图片、图像热点链接：选中需要添加链接的图片-在软件下方在软件下方的属性窗口中的的属性窗口中的“地图地图”项中，选择某种形状项中，选择某种形状-在图片中用在图片中用鼠标进行拖动，选中需要添加链接的部分鼠标进行拖动，选中需要添加链接的部分 利用方法利用方法1、2、3 建立超链接。建立超链接。5、锚记链接、锚记链接：如果一张网页中的内容很多，网页有很长，：如果

33、一张网页中的内容很多，网页有很长，这时如果我们要快速找到目标，就需要通过锚点来实现。这时如果我们要快速找到目标，就需要通过锚点来实现。在需要跳转在需要跳转到到的文字前添加一个锚点标记的文字前添加一个锚点标记：将鼠标光标：将鼠标光标放置到插入锚点处，点击右侧放置到插入锚点处，点击右侧“常用常用”中的锚点标记中的锚点标记在在弹出的对话框中命名锚点；弹出的对话框中命名锚点；添加链接：选择需要跳转的添加链接：选择需要跳转的文字，在软件下方的链接中输入命名的锚点名即可。文字，在软件下方的链接中输入命名的锚点名即可。七、页面布局七、页面布局框架布局框架布局 Div+css布局布局（工科自学）（工科自学）表

34、格布局表格布局 1、表格布局、表格布局 在在“插入插入”窗口窗口“常用常用”中点击中点击“表格表格”图标按钮图标按钮-在在弹出的表格对话框中，填写表格的宽度、行列数、边框粗弹出的表格对话框中，填写表格的宽度、行列数、边框粗细等细等 点击点击“确定确定”即可。即可。选中设计窗口中的表格，在下方的【属性】面板中可以对选中设计窗口中的表格，在下方的【属性】面板中可以对表格进行设置：表格进行设置：“填充填充”表示单元边沿和其内容之间的空表示单元边沿和其内容之间的空白，白，“间距间距”表示单元格之间的高度空间（宽度设置按钮表示单元格之间的高度空间（宽度设置按钮在在“间距间距”的左上方）。的左上方）。若将

35、光标移到所要修改的单元格中，这时软件的下方出现若将光标移到所要修改的单元格中，这时软件的下方出现单元格属性面板，在属性面板中我们可以对单元格的长和单元格属性面板，在属性面板中我们可以对单元格的长和宽进行修改，同时也可以下修改单元格的背景颜色。宽进行修改，同时也可以下修改单元格的背景颜色。2、框架布局、框架布局框架定义：框架页面是由一组普通的框架定义：框架页面是由一组普通的Web页面组成的页面集合页面组成的页面集合.创建框架：在创建框架：在“插入插入”菜单中选择菜单中选择“HTML”“框架框架”，在框架，在框架中，选择你所需要的框架类型中，选择你所需要的框架类型在弹出菜单中对框架的每个部分进在弹

36、出菜单中对框架的每个部分进行命名行命名-点击确定后就可以创建框架了。插入功能可以反复使用。点击确定后就可以创建框架了。插入功能可以反复使用。编辑框架：将鼠标放置在框架的边框上，拖动边框，即可对框架进编辑框架：将鼠标放置在框架的边框上，拖动边框，即可对框架进行编辑。行编辑。保存框架：由于框架页面是由一组页面组成的页面集合，所以保存保存框架：由于框架页面是由一组页面组成的页面集合，所以保存时保存的文件数时保存的文件数=框架数框架数+1，因为还有一个总的框架名称。，因为还有一个总的框架名称。八、表单的创建八、表单的创建 使用表单，网络可以接收用户输入的信息，从而更好地实使用表单，网络可以接收用户输入

37、的信息，从而更好地实现用户与网络的交互。在网页中添加表单的步骤如下：现用户与网络的交互。在网页中添加表单的步骤如下：1.在在HTML文档中将光标移动到需要添加表单的位置上，点文档中将光标移动到需要添加表单的位置上，点击击“插入插入”菜单，选择菜单，选择“表单表单”命令，在弹出的子菜单中命令，在弹出的子菜单中选择选择“表单表单”项。（或者在项。（或者在“插入插入”面板中选择面板中选择“表单表单”项，点击项，点击“表单表单”图标。图标。)2.点击点击“表单表单”按钮后，在文档窗口中就创建好了表单，这按钮后，在文档窗口中就创建好了表单，这是一个由红色虚线围成的框。是一个由红色虚线围成的框。3.在文档

38、中点击表单红色框线选取表单，在编辑窗口的下在文档中点击表单红色框线选取表单，在编辑窗口的下面出现了表单属性面板。面出现了表单属性面板。4.在在“表单表单 ID”文本框中输入一个唯一的名称来标识表单，文本框中输入一个唯一的名称来标识表单，如：如：form1。5.在在“动作动作”文本框中指定将要处理表单信息的脚本或者文本框中指定将要处理表单信息的脚本或者应用程序所在的应用程序所在的URL路径。可以直接输入，也可以点击路径。可以直接输入，也可以点击文本框旁边的文本框旁边的“文件夹文件夹”图标来获得。图标来获得。6.在在“目标目标”下拉菜单中选择返回数据的窗口的打开方式。下拉菜单中选择返回数据的窗口的

39、打开方式。值值_blank：表示在一个新窗口中打开链接文档。：表示在一个新窗口中打开链接文档。值值_new：表示在一个新窗口中打开链接文档。：表示在一个新窗口中打开链接文档。值值_parent：表示在包含这个链接的父框架窗口中打开链接文档。：表示在包含这个链接的父框架窗口中打开链接文档。值值_self：表示在包含这个链接的框架窗口中打开链接文档。：表示在包含这个链接的框架窗口中打开链接文档。值值_top：表示在整个浏览器窗口中打开链接文档。：表示在整个浏览器窗口中打开链接文档。7.在在“方法方法”下拉菜单中选择要处理表单数据的方式。下拉菜单中选择要处理表单数据的方式。POST：表单用于发送信息

40、。：表单用于发送信息。GET：表单用于接收信息。：表单用于接收信息。8.在在“编码类型编码类型”下拉菜单中选择对提交给服务器进行处理的数据使用下拉菜单中选择对提交给服务器进行处理的数据使用的编码类型。默认设置的编码类型。默认设置“application/x-www-form-urlencoded”通通常与常与“POST”方法配合使用。方法配合使用。9、确认光标位置在表单域内，在【插入】工具栏中单击【文字字段】确认光标位置在表单域内，在【插入】工具栏中单击【文字字段】按钮，则弹出【输入标签辅助功能属性】对话框，如图所示。按钮，则弹出【输入标签辅助功能属性】对话框，如图所示。【ID】：用于为表单对

41、象指定一个】：用于为表单对象指定一个ID号。号。【标签】：用于输入表单对象的标签文本。【标签】：用于输入表单对象的标签文本。【样式】：用于选择表单对象的标签文本在【样式】：用于选择表单对象的标签文本在HTML中的书写规则。中的书写规则。【位置】：用于设置标签文本的位置。【位置】：用于设置标签文本的位置。【访问键】：用于设置在浏览器中选择表单对象的快捷键。【访问键】：用于设置在浏览器中选择表单对象的快捷键。【Tab键索引】：用于为表单对象设置键索引】：用于为表单对象设置Tab顺序顺序【输入标签辅助功能属性】对话框图用标签标记围绕和使用for属性附加标签标记都是以标签标记围绕于表单项目的前后。10

42、、根据需要设置好选项，如在【标签】中输入、根据需要设置好选项，如在【标签】中输入“姓名姓名”，然后单击按钮，则在表单域中插入了文本域。然后单击按钮，则在表单域中插入了文本域。插入的文本域插入的文本域11、在【属性】面板中设置文本域的属性。、在【属性】面板中设置文本域的属性。【文本域】：用于输入文本域的名称。【文本域】：用于输入文本域的名称。【字符宽度】：用于设置文本域的宽度，即文本域中最多【字符宽度】：用于设置文本域的宽度，即文本域中最多能够显示的字符数。能够显示的字符数。【最多字符数】：用于设置文本域中最多能够输入的字符【最多字符数】：用于设置文本域中最多能够输入的字符数。数。【类型】：用于

43、设置文本域的类型，选择【类型】：用于设置文本域的类型，选择“单行单行”选项时，选项时，文本域为单行文本框；选择文本域为单行文本框；选择“多行多行”选项时，文本域为多选项时，文本域为多行文本框；选择行文本框；选择“密码密码”选项时，文本域为一个单行的密选项时，文本域为一个单行的密码框。码框。【初始值】：用于输入文本域中默认显示的初始信息。如【初始值】：用于输入文本域中默认显示的初始信息。如果文本域为密码框，则输入的信息在表单中将以果文本域为密码框，则输入的信息在表单中将以“*”显显示。示。【禁用】：选择该选项，则为禁用状态，只显示固定值。【禁用】：选择该选项，则为禁用状态，只显示固定值。【只读】

44、：选择该选项，则文本域为只读，不能填写。【只读】：选择该选项，则文本域为只读，不能填写。需要强调的是，当用户通过表单将数据传到服务器之需要强调的是，当用户通过表单将数据传到服务器之后，服务器端一般使用后，服务器端一般使用Java、Perl、JavaScript、VBScript等语言编写的程序进行处理。等语言编写的程序进行处理。九、网站发布九、网站发布网站制作完成就可以发布。网站制作完成就可以发布。发布的基本步骤为：发布的基本步骤为：1定义远程站点定义远程站点在发布站点之前，在发布站点之前，首先应该定义远程站点首先应该定义远程站点，并设置上传参数，具体步骤如下：，并设置上传参数，具体步骤如下：

45、在【文件】面板中打开要上传的本地站点在【文件】面板中打开要上传的本地站点 单击菜单栏中的【站点】单击菜单栏中的【站点】【管理站点】命令，弹出【管【管理站点】命令，弹出【管理站点】对话框。理站点】对话框。【管理站点】对话框【管理站点】对话框 单击按钮，打开单击按钮，打开【的站点定义为】对话框，在该的站点定义为】对话框，在该对话框中选择【远程信息】选项。对话框中选择【远程信息】选项。在【访问】下拉列表中选择在【访问】下拉列表中选择“FTPFTP”选项，如图。选项，如图。【FTP主机】：用于输入主机】：用于输入FTP主机名称，必须是完整的主机名称，必须是完整的Internet名称，例如：名称，例如：

46、。注意：主机名称。注意：主机名称前不要添加协议名。前不要添加协议名。【主机目录】：用于输入发布站点的路径，即站点在【主机目录】：用于输入发布站点的路径，即站点在Internet服务器中的存放目录。服务器中的存放目录。【登录】：用于输入用户在【登录】：用于输入用户在Internet服务器上的注册名服务器上的注册名【密码】：用于输入用户的密码。【密码】：用于输入用户的密码。选择选择【使用使用Passive FTP】复选框，可以建立被动式复选框，可以建立被动式FTP。一般情况下，如果防火墙配置要求使用被动式。一般情况下，如果防火墙配置要求使用被动式FTP，则可选择该项。则可选择该项。选择选择【使用使

47、用IPv6传输模式】复选框，则启用传输模式】复选框，则启用IPv6的的FTP服务器。服务器。IPv6即即Internet协议第协议第6版。版。选择选择【使用防火墙使用防火墙】复选框，则从防火墙后面连接到远复选框，则从防火墙后面连接到远程服务器，单击按钮，可以设置防火墙主机或程服务器，单击按钮，可以设置防火墙主机或端口。端口。选择选择【使用安全使用安全FTP】复选框，可以进行安全复选框，可以进行安全FTP身份验证。身份验证。选择选择【维护同步信息维护同步信息】复选框，则自动同步维护本地文件与远程复选框，则自动同步维护本地文件与远程文件。默认情况下选择该选项。文件。默认情况下选择该选项。选择选择【

48、保存时自动将文件上传到服务器保存时自动将文件上传到服务器】复选框，复选框，Dreamweaver将在保存文件的同时把文件上传到远程站点。将在保存文件的同时把文件上传到远程站点。选择选择【启用存回和取出启用存回和取出】复选框，则可以激活存回复选框，则可以激活存回/取出系统。取出系统。单击按钮，返回【管理站点】对话框。单击按钮，返回【管理站点】对话框。单击按钮完成设置。单击按钮完成设置。2 2连接服务器连接服务器定义完远程站点以后，首先要将计算机连接到远程服务器定义完远程站点以后，首先要将计算机连接到远程服务器上，然后才可以上传站点。其操作步骤如下：上，然后才可以上传站点。其操作步骤如下：在【文件

49、】面板中选择要上传的站点。在【文件】面板中选择要上传的站点。单击【文件】面板中的按钮，连接远程服务器。单击【文件】面板中的按钮，连接远程服务器。连接成功以后，则【文件】面板中的按钮左下角的连接成功以后，则【文件】面板中的按钮左下角的黑点变为绿点，表明已经连接成功。黑点变为绿点，表明已经连接成功。3 3上传站点上传站点本地计算机与远程服务器成功连接以后，就可以发布站点本地计算机与远程服务器成功连接以后，就可以发布站点了。在发布站点时，既可以发布整个站点，也可以发布局部站了。在发布站点时，既可以发布整个站点，也可以发布局部站点。点。在【文件】面板中选择要发布的文件，单击面板中的在【文件】面板中选择要发布的文件，单击面板中的按钮即可上传站点。按钮即可上传站点。