PPT课件-网页设计与制作基础教程.ppt

1、 在建立网站之前，首先应设计和规划好整个站点，继而才能进行具体的网页制作过程。创建好一个本地站点后，可以进行管理站点操作，还可以创建文档并将其保存在站点文件夹中。本章将主要介绍使用不同的方法创建和管理站点的方法，创建不同类型文档的方法以及网页制作的常用操作。u 网站建立在互联网基础之上，是以计算机、网络和通信技术为依托，通过一台或多台安装了系统程序、服务程序及相关应用程序的计算机，向访问者提供相应的服务。互联网中包括无数的网站和客户端浏览器，网站宿主于网站服务器中，它通过存储和解析网页内容，向各种客户端浏览器提供信息浏览服务。通过客户端浏览器打开网站中的某个网页时，网站服务软件会在完成对网页内

2、容的解析工作后，将解析的结构回馈给网络中要求访问该网页的浏览器，该流程如图所示。规划时要明确网站的主题，搜集需要的信息等。规划站点主要是规划站点的结构。创建站点既可以创建一个网站，又可以创建一个本地网页文件的存储地址，规划好站点后即可开始创建站点。【文档】工具栏 在建立网站之前，首先应设计和规划好整个站点，继而才能进行具体的网页制作过程。创建好一个本地站点后，可以进行管理站点操作，还可以创建文档并将其保存在站点文件夹中。本章将主要介绍使用不同的方法创建和管理站点的方法，创建不同类型文档的方法以及网页制作的常用操作。u 网站建立在互联网基础之上，是以计算机、网络和通信技术为依托，通过一台或多台安

3、装了系统程序、服务程序及相关应用程序的计算机，向访问者提供相应的服务。互联网中包括无数的网站和客户端浏览器，网站宿主于网站服务器中，它通过存储和解析网页内容，向各种客户端浏览器提供信息浏览服务。通过客户端浏览器打开网站中的某个网页时，网站服务软件会在完成对网页内容的解析工作后，将解析的结构回馈给网络中要求访问该网页的浏览器，该流程如图所示。规划时要明确网站的主题，搜集需要的信息等。规划站点主要是规划站点的结构。创建站点既可以创建一个网站，又可以创建一个本地网页文件的存储地址，规划好站点后即可开始创建站点。构建好本地站点后，可以开始规划网页布局。表格和框架是常用的布局工具，表格在网页中不仅可以排

4、列数据，还可以对页面中的图像、文本、动画等元素进行准确的定位，是页面显得整齐有序、分类明确，便于浏览。使用表格布局网页，在不同平台和不同分辨率的浏览器中都能保持原有的布局。使用框架规划网页，可以把网页分成几个部分，每个部分都是一个独立的HTML页。本章主要介绍使用表格和框架规划网页布局。表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。当选定了表格或表格中有插入点时，Dreamweaver会显示表格宽度和每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。使用这些菜单可以快速访问与表格相关的常用命令。可以启用或禁用

5、宽度和菜单。如果未显示表格的宽度或列的宽度，则说明没有在HTML代码中指定该表格或列的宽度。如果出现两个数，则说明【设计】视图中显示的表格可视宽度与【HTML】代码中指定的宽度不一致。当拖动表格的右下角来调整表格的大小，或者添加到单元格中的内容比该单元格的设置宽度大时，会出现这种情况。在网页文档中，表格是用于整理复杂的数据内容，安排网页文档的整体布局。利用表格来设计网页的布局，可以不受网页形态的限制，并在不同分辨率下维持原有的页面布局。典型的利用表格设计的网页如图所示。精美的网页离不开CSS技术，使用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。CSS样式的

6、全名为Cascading Style Sheet，它可以定义HTML标签，按列表的语法将许多文字、图片、表格、表单、图层等设计加以格式设定。在HTML语法中，常常需要使用到一些设定颜色、字体大小或框线粗细之类的标签，而CSS在开始制作网页时就将这些设定做好，不需要在制作网页文档时再反复写入同样的标签。CSS，是用来控制一个网页文档中的某文本区域外观的一组格式属性。使用CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而可以避免重复操作。CSS样式表是对HTML语法的一次重达革新，它位于文档的区，作用范围由CLASS或其他任何符合CSS规范的文本来设置。对于其他现有的文档，只要其中的C

7、SS样式符合规范，Dreamweaver就能识别它们。CSS规则由两部分组成：选择器和声明(大多数情况下为包含多个声明的代码块)。选择器是标识已设置格式元素的术语，例如 p、h1、类名称或ID，而声明块则用于定义样式属性。例如下面CSS规则中，h1 是选择器，大括号()之间的所有内容都是声明块。u 【CSS样式】面板u 新建CSS规则u 应用CSS样式 文本与图像是网页制作中最重要的两大元素。文本组成了大部分网页的结构；而图像在页面中的恰当运用，不仅使得网页更加美观，而且令网页表达信息更加直观，吸引了浏览者。本章主要介绍了在通常网页制作过程中如添加并设置各种文本、图像元素。通过本章知识的学习，

8、用户可以掌握各种编辑网页文本与图像的方法，包括设置文本的格式、使用统一样式、添加按钮、插入背景照片、创建鼠标指针经过图像、导航条等。在Dreamweaver CS4中输入文本是非常简单的，其输入方式与其他文本处理软件中的文本输入方式十分类似，可以直接输入文本内容，也可以复制、粘帖文本内容。水平线对于信息的组织很有用，在页面中，可以使用一条或多条水平线来可视化分隔文本和对象，使用段落更加分明和更具层次感。插入日期对象，可以以任何格式插入当前的日期(可以包括时间)，并且在每次保存文件时都会自动更新该日期。对于插入的文本，可以进行相应的编辑，使枯燥的文本更显生动。编辑文本的操作主要指设置文本的基本格

9、式，例如文本字体、字体颜色、对齐方式等。u 在网页中插入图像 图像属性图像属性 在前面章节中已经介绍了插入图像和文本元素来制作最基本的网页文档。随着网络的发展，多媒体在网络上得到了更广泛的应用，因此，对网页设计页提出了更高地要求。在Dreamweaver CS4中，可以快速、方便地为网页添加声音、影片等多媒体内容，使网页更加生动。本章主要介绍了在网页文档中中插入导航条、跳转菜单和多媒体内容，然后针对一些特殊网页，介绍了制作网页鼠标特效和滚动条的方法。要在网页文档中插入导航条，单击【插入】工具栏中的【常用】选项卡，打开【常用】插入栏，单击【图像】按钮右边的下拉箭头，在弹出的菜单中选择【导航条】命

10、令，打开【插入导航条】对话框，如图所示。用户在文档创建导航条后，选择【修改】|【导航条】命令，打开【修改导航条】对话框，如图所示。在该对话框中可以添加图像，或从导航条中删除图像。用于更改图像或图像组、更改单击项目时所打开的文件、选择在不同的窗口或框架中打开文件以及重新排序图像。u 插入Flashpaperu 插入FLV文件u 插入声音插入Flashpaper 插入FLV文件 插入声音插入其他媒体对象 网站都是由许多网页组成的，网页之间通常又是通过超链接方式相互建立关联的。超链接的应用范围很广，利用它不仅可以链接到其他网页，还可以链接到其他图像文件、多媒体文件及下载程序，也可以利用它在网页内部进

11、行链接或是发送E-mail等。使用层，可以定位在页面上的任意位置，可以并存、重叠层，可以在层上插入文本、图像、表单等对象。本章主要介绍了创建各种超链接的方法以及使用层的方法。超链接与URL及网页文件的存放路径是紧密相关的。URL可以简单地称为网址，顾名思义，就是Internet文件在网上的地址，定义超链接其实就是指定一个URL地址来访问它指向的Internet 资源。URL(Uniform Resoure Locator，统一资源定位器)是指Internet文件在网上的地址，是使用数字和字母按一定顺序排列来确定的Internet地址，由访问方法、服务器名、端口号，以及文档位置组成。格式为Acc

12、ess-method:/server-name:port/document-location。从作为链接起点的文档到作为链接目标的文档之间的文件路径，对于创建链接至关重要。一般来说，链接路径可以分为绝对路径与相对路径两类。u 插入Flashpaperu 插入FLV文件u 插入声音创建各种超链接创建各种超链接创建图像地图 行为是一系列使用JavaScript程序预定义的页面特效工具，是JavaScript在Dreamweaer中内置的程序库。利用行为，可以制作处各式各样的特素效果，例如播放声音、弹出菜单等。使用表单，可以制作交互性网页文档，例如问卷调查、注册表等，并且，动态页面中的表单内容，可以

13、进行上传、验证等操作。本章主要介绍了Dreamweaver CS4内置行为的使用方法以及使用表单的方法。行为是Dreamweaver CS4中重要的一个部分，通过行为，可以方便地制作出许多网页效果，极大地提高了工作效率。行为由两个部分组成，即事件和动作，通过事件的响应进而执行对应的动作。在网页中，事件是浏览器生成的消息，表明该页的访问者执行了某种操作。例如，当访问者将鼠标指针移动到某个链接上时，浏览器为该链接生成一个onMouseOver事件。不同的页元素定义了不同的事件。在大多数浏览器中，onMouseOver和onClick是与链接关联的事件，而onLoad是与图像和文档的body部分关联

14、的事件。事件由浏览器定义、产生与执行。以下时Dreamweaver CS4中的一些主要事件，其中，NS代表Netscape Navigator浏览器，IE代表Internet Explorer浏览器，后面的数值为可支持此事件的最低版本号。在【行为】面板中可以将Dreamweaver CS4内置的行为附加到页面元素，并且可以修改以前所附加行为的参数。选择【窗口】|【行为】命令，打开【标签检查器】面板，默认打开的是【行为】选型卡面板，如图所示。u 控制类行为u 导航栏和状态栏行为u 检查类行为u 其他常用行为控制类行为导航栏和状态栏行为检查类行为其他常用行为 在进行批量网页制作的过程中，很多页面都

15、会使用到相同的图片、文字或布局。为了避免不必要的重复操作，减少用户的工作量，可以使用Dreamweaver CS4提供的模板和库功能，将具有相同布局结构的页面制作成模板，将相同的元素制作为库项目，以便随时调用。本章将主要介绍在Dreamweaver CS4中创建与编辑模板和库的方法。模板也是一个HTML文档，只不过在HTML文档中增加了模板标记。在Dreamweaver CS4中，模板的扩展名为.dwt，并存放在本地站点的Templates文件夹中。模板文件夹只有在创建模板的时候才会由系统自动生成。创建好模板后，模板会在【资源】面板中显示，在该面板中，可以管理模板，主要包括删除、修改、重命名模

16、板等操作。选择【窗口】|【资源】命令，打开【资源】面板，单击面板上的【模板】按钮，在模板列表框中会显示现有的模板，如图所示。模板定义了文档的布局结构和大致框架，模板中创建的元素在基于模板的页面中通常是锁定区域，或称为非编辑区域，要编辑模板，必须在模板中定义可编辑区域。在使用模板创建文档时只能够改变可编辑区域中的内容，而锁定区域在文档编辑过程中始终保持不变。在Dreamweaver CS4中，可以在【首选参数】对话框中设置模板的可编辑区域和锁定区域的边框颜色。选择【编辑】|【首选参数】命令，打开【首选参数】对话框，在【分类】列表框中选择【标记色彩】选项，打开该选项对话框，如图所示。在【标记色彩】

17、选项区域的【可编辑区域】和【锁定的区域】文本框中可以输入边框的颜色值或者单击【颜色】按钮，选择颜色。u 应用现有模板文档u 分离文档应用现有模板文档 分离文档 本章重点介绍动态网页的基本概念，常用的动态网页开发技术，如何构建和配置ASP动态网页开发环境，例如安装ISS服务器，设置服务器属性等ASP动态网页开发的基础知识。此外，还介绍了如何设计和创建ASP动态页面的后台数据库，以及创建数据库连接的方法和技巧，创建数据库后，可以建立数据库连接，定义记录集和绑定动态数据。为读者深入学习制作动态网页打下坚实基础本章。u 客户端/服务端网页客户端/服务端网页网页的处理技术经历了两个重要阶段：客户端网页和

18、服务器端网页。其中，客户端网页又称为静态网页，服务器端网页又称为动态交互式网页。早期的动态网页主要采用CGI(Common Gateway Interface)技术，即公用网关接口技术，虽然CGI技术已经发展成熟并且功能强大，但由于编程困难、效率低下、维护困难，已经逐渐被新兴的技术所取代，这些新兴技术主要有ASP技术、PHP技术、JSP技术，采用这些动态网页技术开发的网页文档后缀名通常为.asp、.php、.jsp。u 动态网页开发环境简介u 配置IP地址u 配置测试服务器动态网页开发环境简介配置IP地址配置测试服务器 本章重点介绍动态网页的基本概念，常用的动态网页开发技术，如何构建和配置AS

19、P动态网页开发环境，例如安装ISS服务器，设置服务器属性等ASP动态网页开发的基础知识。此外，还介绍了如何设计和创建ASP动态页面的后台数据库，以及创建数据库连接的方法和技巧，创建数据库后，可以建立数据库连接，定义记录集和绑定动态数据。为读者深入学习制作动态网页打下坚实基础本章。u 客户端/服务端网页客户端/服务端网页网页的处理技术经历了两个重要阶段：客户端网页和服务器端网页。其中，客户端网页又称为静态网页，服务器端网页又称为动态交互式网页。早期的动态网页主要采用CGI(Common Gateway Interface)技术，即公用网关接口技术，虽然CGI技术已经发展成熟并且功能强大，但由于编

20、程困难、效率低下、维护困难，已经逐渐被新兴的技术所取代，这些新兴技术主要有ASP技术、PHP技术、JSP技术，采用这些动态网页技术开发的网页文档后缀名通常为.asp、.php、.jsp。u 动态网页开发环境简介u 配置IP地址u 配置测试服务器动态网页开发环境简介配置IP地址配置测试服务器 本章介绍网站的测试、调试和上传方法，如何利用站点地图、设计备注等工具来管理站点，以及站点的维护方法和技巧。Dreamweaver CS3包含大量管理站点的功能，还具有与远程服务器进行文件传输的功能。可以使用站点窗口来组织本地站点和远程站点上的文件，将本地站点结构复制到远程站点上，也可以将远程站点结构复制到本

21、地系统中。将站点上传到服务器并声明可供浏览之前，建议先在本地进行测试。确保页面在目标浏览器中如预期的那样显示和工作，而且没有断开的链接，页面下载也不会占用太长时间。还可以通过运行站点报告来测试整个站点并解决出现的问题。在Dreamweaver CS4的编辑平台下，可以查看整个网站页面间的链接关系，根据需要添加、修改或删除链接，然后通过链接检查、修复工具对网站中某个文档或整个站点进行测试，修复错误链接，并在站点地图中观察网站结构变化。选择【窗口】|【结果】|【链接检查器】命令，打开【链接检查器】选项卡面板，如图所示。可通过该选项卡检查并修复站点的链接。由于客户端浏览器类型或版本的不同，很可能导致

22、正确的页面无法正常显示。因而，在发布网站之前，对所有页面的【兼容性】进行测试，就显得很重要。通过修正，使站点页面能够最大程度地在不同类型和版本的浏览器上正常运行和显示。Dreamweaver CS4提供了目标浏览器的测试工具，可以很方便地检查站点页面的【兼容性】。除了链接测试和浏览器测试以外，还可以进行负载测试和压力测试。在Dreamweaver CS4中，可以对当前文档、选定的文件或整个站点的工作流程或HTML属性运行站点报告，还可以使用报告来检查站点中的链接。选择【窗口】|【文件】命令，打开【文件】面板，如图所示。在该面板中可以选择要打开的站点文件。选择【站点】|【报告】命令，打开【报告】对话框，如图所示。u 同步站点u 标识和删除未使用的文件u 在设计备注中管理站点信息u 管理站点资源同步站点 标识和删除未使用的文件在设计备注中管理站点信息 管理站点资源本站主要介绍了在Dreamweaver CS4中制作一个综合实例，使用模板，设计基本的页面，使用超链接链接页面。创建数据库，添加留言系统，设计一般用户和管理员用户登录系统，管理留言。