因特网技术基础第三精选PPT.ppt

《因特网技术基础第三精选PPT.ppt》由会员分享，可在线阅读，更多相关《因特网技术基础第三精选PPT.ppt（38页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2023/4/1关于因特网技术基础第三关于因特网技术基础第三第1页，讲稿共38张，创作于星期日第三章第三章 Dreamweaver的基本使用的基本使用 3.1 网页设计概述 3.2 网页元素的创作与编辑工具3.3 Dreamweaver 基础知识第2页，讲稿共38张，创作于星期日3.1 网页设计概述网页设计概述 3.1.1 手工编码方式手工编码方式 网页是由HTML（HYPER TEXT MARKUP LANGUAGE）超文本标记语言编码的文本文档，设计制作网页的过程就是生成HTML代码的过程。在WWW（World Wide Web）发展的初期人们制作网页是通过直接编写HTML代码来实现的。手

2、工编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂，因此，对大多数网页设计人员来说采用这个方式比较困难。但手工编码可以灵活地制作出丰富的网页效果。第3页，讲稿共38张，创作于星期日3.1.2 可视化工具方式可视化工具方式 随着网页制作技术的不断发展，出现了诸如FrontPage、Dreamweaver等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，由编辑工具自动生成对应的网页代码。如要在网页上显示表格，就可以直接在工作区中绘制表格而不用考虑编码的规则和语法。利用可视化工具编辑网页操作简单直观，调试方便，是大众化的网页编辑方式。但利用可视化工具在制作一些特殊网

3、页效果上有一定的局限性。第4页，讲稿共38张，创作于星期日3.1.3 编码和可视化工具结合方式编码和可视化工具结合方式 编码和可视化工具结合是一种比较成熟的网页制作方式。具体过程为：一般的网页元素通过可视化工具编辑制作，一些特殊的网页效果通过插入代码生成。这种方式效率高、调试方便而且可以实现丰富的网页效果，但要求设计人员既要熟悉Html语言又能运用可视化工具。除了上面三种基本的网页设计制作方式外，我们还可以通过修改已有的网页代码生成自己的网页。在网页编辑制作过程中具体采用何种方式要根据个人的具体情况而定，每必要拘泥于某种固定的模式。第5页，讲稿共38张，创作于星期日3.2 网页元素的创作与编辑

4、工具网页元素的创作与编辑工具3.2.1 网页图像制作工具 1.Fireworks1.Fireworks Firework 是目前最流行的网页图像制作软件。只有将Dreamweaver的默认图像编辑器设为Fireworks，那么在Fireworks 中制作完成网页图像后将其输出就会立即在Dreamweaver中 更 新。Fireworks还 可 以 安 装 使 用 所 有 的Photoshop滤镜，并且可以直接导入PSD格式图像。更方便的是它不仅结合了Photoshop位图功能以及CorelDraw矢量图的功能，而且提供了大量的网页图像模板供用户使用。其最方便之处是，它可以将图像切割，图像映射，

5、悬停按钮，图像翻转等效果直接生成HTML代码，或者嵌入到现有的网页中，或者作为单独的网页出现。2.Photoshop2.Photoshop第6页，讲稿共38张，创作于星期日3.2.2 动画制作工具动画制作工具 1.Flash 1.Flash FlashFlash 是是目目前前最最流流行行的的矢矢量量动动画画制制作作软软件件。与与其其它它的的动动和和软软件件相相比比，它它具具有有一一些些优优点：点：制制作作的的是是矢矢量量图图像像。只只有有用用少少量量矢矢量量数数据据就就可可以以描描述述一一个个复复杂杂的的对对象象，而而占占有有的的存存储储空空间间只只是是位位图图的的几几千千分分之之一一，非非常

6、常适适合合在在网网络络上上使使用用。同同时时，矢矢量量图图像像不不会会随随浏浏览览器器窗窗口口大小的改变而改变画面质量。大小的改变而改变画面质量。使用插件方式工作。使用插件方式工作。提提供供了了一一些些增增强强功功能能。例例如如，支支持持位位图图，声声音音，渐渐变变色色和和AlphaAlpha透透明明等等。拥拥有有了了这些功能，用户就完全可以建立一个全部由这些功能，用户就完全可以建立一个全部由FlashFlash制作的站点。制作的站点。FlashFlash影影片片也也是是一一种种流流式式文文件件。这这就就是是说说，浏浏览览者者在在观观看看一一个个大大动动画画时时，可可以以不不必必等等到到影影片

7、片全全部部下下做做到到本本地地在在观观看看，而而是是可可以以随随时时观观看看，即即使使后后面面的的内内容容还还没没有有完完全全下下载载，也可以开始欣赏动画。也可以开始欣赏动画。2.Director2.Director DirectorDirector是是MacromediaMacromedia公公司司推推出出的的多多媒媒体体开开发发工工具具，它它为为广广大大多多媒媒体体制制作作人人员员提提供供了了建建立立交交互互式式应应用用的的强强大大功功能能。用用户户可可以以在在友友好好的的界界面面下下通通过过使使用用DirectorDirector制制作作出出令令人人满满意意的的多多媒媒体体作作品品。Di

8、rectorDirector是是一一个个简简单单且且直直观观的的软软件件，即即使使是是首首次次使使用用该该软软件件的的用用户户也也能能编编出出优优秀秀的的程程序序。而而且且，DirectorDirector又又是是一一个个高高度度面面向向对对象的工具，非常适合象的工具，非常适合图图像像设计设计者使用。者使用。第7页，讲稿共38张，创作于星期日3.2.3 网页编辑工具网页编辑工具 1.FrontPage 1.FrontPage FrontPage FrontPage 是是Microsoft Microsoft Office Office 家家族族中中的的一一员员，FrontPage FrontP

9、age 的的界界面面，功功能能与与Word Word 都都非非常常相相似似。FrontPageFrontPage提提供供了了相相当当数数量量的的模模版版和和向向导导，使使初初学学者者能能够够非非常常容容易易的的设设计计出出美美观观实实用用的的网网页页。FrontPage FrontPage 最最强强大大之之处处，是是其其站站点点管管理理与与远远程程发发布布功功能能。用用户户只只需需在在本本地地对对网网页页进进行行编编辑辑，FrontPage FrontPage 便便会会跟跟踪踪用用户户编编辑辑过过的的文文件件，在在发发布布时时，自自动动将将修修改改过过的的网网页页进进行行发发布布，未未编编辑辑

10、过过的的网网页页可可由由用用户户决决定定是是否否再再次次向向服服务务器器发送。发送。2.Dreamweaver 2.Dreamweaver Dreamweaver Dreamweaver 和和Fireworks Fireworks、Flash Flash 一一起起，被被人人们们喻喻为为“网网页页制制作作三三剑剑客客”。同同FrontPageFrontPage一一样样，DreamweaverDreamweaver也也是是“所所见见即即所所得得”的的网网页页编编辑辑软软件件。它它能能够够很很好好的的支支持持ActiveX,ActiveX,JavaScript,JavaScript,Java,Jav

11、a,FlashFlash和和ShockwaveShockwave等等，而而且且还还能能通通过过鼠鼠标标拖拖动动的的方方式式从从头头到到尾尾制制作作动动态态的的HTMLHTML效效果果。DreamweaverDreamweaver还还采采用用了了Roundtrip Roundtrip HTMLHTML技技术术，使使用用这这些些技技术术，网网页页可可以以在在DreamweaverDreamweaver和和HTMLHTML代代码码编编辑辑器器之之间间进进行行自自由由转转化化，而而HTMLHTML语语法法及及结结构构不不变变。这这样样，专专业业设设计计者者可可以以在在不不改改变变原原有有编编辑辑习习惯

12、惯的的同同时时，充充分分享享受受到到“所所见见即即所所得得”带来的方便。带来的方便。第8页，讲稿共38张，创作于星期日3.3 Dreamweaver 基础知识基础知识u3.3.1 Dreamweaver 的工作界面第9页，讲稿共38张，创作于星期日u3.3.2 站点的管理 Dreamweaver 站点由三部分组成，具体取决于开发环境和所开发的 Web 站点类型：（1）本地文件夹：是您的工作目录。Dreamweaver 将该文件夹称为“本地站点”。此文件夹可以位于本地计算机上，也可以位于网络服务器上。这就是为 Dreamweaver 站点所处理的文件的存储位置。（2）远端文件夹：是存储文件的位置

13、，这些文件用于测试、生产、协作等，具体取决于开发环境。Dreamweaver 在“文件”面板中将该文件夹称为“远端站点”。一般说来，远端文件夹位于运行 Web 服务器的计算机上。（3）测试服务器文件夹：是 Dreamweaver 处理动态页 的文件夹。第10页，讲稿共38张，创作于星期日u3.3.3 页面操作(创建、调试、保存、打开、页面属性、文档元素、其他查看)页面标题、背景图像和颜色、文本和链接颜色以及边距是每个 Web 文档的基本属性。用户可以使用“页面属性”对话框设置或更改页面属性。第11页，讲稿共38张，创作于星期日u3.3.4 文本对象的插入和格式化u3.3.5 图像的使用（插入、

14、属性、动态图像热点、轮替图像、占位图像）u3.3.6 链接和导航（跳转菜单）第12页，讲稿共38张，创作于星期日3.3.7 网页布局网页布局u1、表格应用（表格属性设置、表格自动格式化、1像素细线表格）u2、利用表格进行页面布局u3、利用Firework进行页面布局u4、层排版第13页，讲稿共38张，创作于星期日1、表格应用（表格属性设置、表格自动格式化、表格应用（表格属性设置、表格自动格式化、1像素像素细线表格）细线表格）表格广泛地应用于网页设计中，无论在数据显示方面还是在定位排版方面都起着不可替代的作用，下面就详细介绍如何在网页中创建表格。在文档中创建表格的步骤如下：（1）在Dreamwe

15、aver 8.0中单击“插入”“表格”菜单命令，弹出属性设置窗口，对所要插入的表格进行初步定义。（2）在参数设置窗口中根据需要设置参数。（3）单击窗口中的“确定”按钮之后，即可在文档中光标所做位置插入一个表格。第14页，讲稿共38张，创作于星期日对于表格总体属性的设置，主要是通过属对于表格总体属性的设置，主要是通过属性面板来完成。性面板来完成。第15页，讲稿共38张，创作于星期日设置单元格，行和列的属性设置单元格，行和列的属性设置单元格，行和列的属性设置单元格，行和列的属性 按照前面介绍的方法，选中某一个单元格，或者是某一行、某一列。按照前面介绍的方法，选中某一个单元格，或者是某一行、某一列。

16、单元格的属性面板单元格的属性面板 行的属性面板行的属性面板 列的属性面板列的属性面板 第16页，讲稿共38张，创作于星期日单击已经创建好的表格的边框，以选中该表格，然后选择“命令”|“格式化表格”菜单项，弹出“格式化表格”对话框。第17页，讲稿共38张，创作于星期日创建创建1像素细线表格像素细线表格（1）、将表格的边框设置为0；（2）、设置表格的单元格边距为0，单元格间 距为1；（3）、设置表格的背景色与所有单元格的背景 色（颜色不同）。第18页，讲稿共38张，创作于星期日常用页面布局形式常用页面布局形式第19页，讲稿共38张，创作于星期日第20页，讲稿共38张，创作于星期日2、利用表格进行页

17、面布局、利用表格进行页面布局在“布局”下，我们可以在网页中直接画出表格与单元格，还可以自由拖动。利用“布局”来对网页定位非常方便。“布局视图”的具体用法如下所示：（1）将对象面板切换到“布局”面板组，单击“布局”按钮进入“布局模式”。（2）在“布局”面板上许多以前不可用的按钮变为可用状态。其中有两个按钮，一个是“布局表格”按钮 ，允许用户像绘图一样在页面里绘制表格，进行表格布局；另一个是“绘制布局单元格”按钮 ，可以用于在表格中直接绘制单元格。第21页，讲稿共38张，创作于星期日绘制完成后，在“布局”对象面板中按下“标准模式”按钮，则刚刚绘制的布局会全部转换成表格。我们可以任意调整表格，也可以

18、回到“布局模式”中继续绘制。第22页，讲稿共38张，创作于星期日3、利用、利用Firework进行页面布局进行页面布局（1）、将设计好的网页模板（图像）利用Firework的切片工具进行裁切；（2）、导出html文件。第23页，讲稿共38张，创作于星期日第24页，讲稿共38张，创作于星期日裁切要点：（1）、对要插入文字或图片的区域进行裁切；（2）、对大面积空白区域进行裁切（颜色一 致）；（3）、裁切区域尽量不要交叉。第25页，讲稿共38张，创作于星期日4、层排版、层排版“层”是一个容器,就像一个包含内容的框架，可以将它放在所需要的位置。利用Dremweaver中的“层”，可以对网页内的元素的位

19、置进行“精确”的定位。在Dremweaver中可以使用div或span标记插入“层”。第26页，讲稿共38张，创作于星期日绘制层工具2个层层面板层面板层属性层属性第27页，讲稿共38张，创作于星期日3.3.8 CSS 样式简介样式简介 CSS是Cascading Style Sheets（层叠样式表）的简称。更多的人把它称为样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在我们丰富的想象力下千变万化。层叠样式表(CSS)是一系列格式设置规则，它们控制Web 页面内容的外观。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML 代码）位于自身的

20、HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件（外部样式表）或 HTML 文档的另一部分（通常为 部分）中。使用 CSS 可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。第28页，讲稿共38张，创作于星期日 术语“层叠”是指对同一个元素或 Web 页面应用多个样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到我们的 Web 页面上的元素，并最终创建出我们想要的设计。第29页，讲稿共38张，创作于星期日CSS 格式设置规则由两部分组成：选择器和声明。选择器是标

21、识已设置格式元素（如 P、H1、类名称或 ID）的术语，而声明则用于定义样式元素。在下面的示例中，H1 是选择器，介于大括号()之间的所有内容都是声明：H1 font-size:16 pixels;font-family:Helvetica;font-weight:bold;声明由两部分组成：属性（如 font-family）和值（如 Helvetica）。上述示例为 H1 标签创建了样式：链接到此样式的所有 H1 标签的文本都将是 16 像素大小并使用 Helvetica 字体和粗体。第30页，讲稿共38张，创作于星期日在 Dreamweaver 中可以定义以下规则类型：自定义 CSS 规则

22、（也称为“类样式”）使您可以将样式属性应用到任何文本范围或文本块。所有类样式均以句点(.)开头。例如，您可以创建称为.red 的类样式，设置规则的 color 属性为红色，然后将该样式应用到一部分已定义样式的段落文本中。HTML 标签规则重定义特定标签（如 p 或 h1）的格式。创建或更改 h1 标签的 CSS 规则时，所有用 h1 标签设置了格式的文本都会立即更新。CSS 选择器规则（高级样式）重定义特定元素组合的格式，或其它 CSS 允许的选择器形式的格式（例如，每当 h2 标题出现在表格单元格内时，就应用选择器 td h2）。高级样式还可以重定义包含特定 id 属性的标签的格式（例如，由

23、#myStyle 定义的样式可以应用到所有包含属性/值对 id=myStyle 的标签）。第31页，讲稿共38张，创作于星期日3.3.9 CSS 面板面板u区块u盒子u背景u边框、扩展u滤镜第32页，讲稿共38张，创作于星期日u3.3.10 媒体的添加（flash、视频、声音）在“插入”菜单中操作，通过属性面板对其属性进行设置。flash透明设置参数：wmode=transparentu3.3.11 表单的添加与编辑利用“插入”工具栏中的“表单”工具，通过属性面板对其属性进行设置第33页，讲稿共38张，创作于星期日3.3.12 框架的使用框架的使用使用框架不仅能够让站点具有统一的风格，而且利用

24、框架制作的页面链接也具有较强的优势，方便浏览页面。框架包含两部分，一部分是框架，另一部分就是框架集。框架集定义了一个在窗口中显示的框架数以及框架内的网页等，框架则是指框架集中包含的网页，也就是显示区域。框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。第34页，讲稿共38张，创作于星期日1、创建框架集、创建框架集第35页，讲稿共38张，创作于星期日2、设置框架属性、设置框架属性第36页，讲稿共38张，创作于星期日3、添加框架引用，设置目标链接、添加框架引用，设置目标链接 对框架name属性进行设置，对链接设置target属性。第37页，讲稿共38张，创作于星期日感谢大家观看第38页，讲稿共38张，创作于星期日