《网页设计与编程》PPT课件.ppt

《《网页设计与编程》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《网页设计与编程》PPT课件.ppt（152页珍藏版）》请在装配图网上搜索。

1、网页设计与编程,1.1 Internet基础,1.1.1 INTERNET的概述 Internet是相互连接的网络集合。Internet是由成千上万个网络、上亿台计算机通过特定的网络协议相互连接而成的全球计算机网络，是提供信息资源查询和信息资源共享的全球最大的信息资源平台。 网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何种方法获得所需的信息。,1.1.1 INTERNET的概述 Internet起源于1969年美国国防部高级研究计划署协助开发的ARPANET。 Internet在国内外的发展 Internet所提供的服务主要是WWW、E-mail、FTP、网上传呼、在线聊天、网上购

2、物等等，而其中WWW和E-mail是最常用的服务。,1.1.2WWW WWW(World Wide Web)简称为Web或万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问internet上的服务器端，迅速地获得所需的信息。如图所示：,URL的一般格式为：“协议名：/主机名/文件夹名/文件名” 常用的协议名如下： HTTP：超文本传输协议，用于转换网页。 FTP：文件传输协议，主要用于传输文件，许多提供软件下载的网站使用“FTP”作为下载的网址。 MAILTO：传送E-mail协议，主要用于传输电子邮件。 例如： ftp:/ mailto:,1.1.3网页与网站 构建WWW

3、的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，构成了WWW的纵横交织的网状结构。 通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。 网站的概念是相对的，大的如新浪、搜狐等大的门户网站，页面非常多，可能分布于多台服务器上；小的如一些个人网站，可能只有几个页面，仅在某台WEB服务器的占据很小的空间。 一个站点的起始页面通常被称为“主页”，主页是一个网站的开始，因此主页的好坏决定了这个网站的访问情况，一般主页的名称是固定的index.htm或index.htm

4、l等。,1.1.4域名与IP地址,TCP/IP协议为每个在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址。 IP地址是由32bits的二进制数值构成，分成4组，转化为十进制用点分隔，比如：202.100.4.11。,A类地址的范围为：1.0.0.0126.255.255.255B类地址的范围为：128.0.0.0-191.255.255.255 C类地址的范围为：192.0.0.0-223.255.255.255,A,B,C,1.1.4域名与IP地址 IP地址跟域名的关系,一个域名必须对应一个ip地址，但是一个ip地址可以有多个域名。 域名通过DNS服务

5、器解析为ip才能被计算机识别， 而域名则是由于ip比较难记，而域名对人来说比较容易记忆而对应ip 产生的，直接输入ip同样可以访问网站,表1.1 按组织分类的顶级域名,表1.2 按地理区域分类的顶级域名,域名的书写格式为：叶节点名.二级域名.顶级域名 例如：，www：web服务器名，sohu：企业名称，com：顶级域名。,1.2网页制作工具,1.2.1网页编辑工具 网页编辑工具主要分为标记型和所见即所得型。标记型工具常用的是notepad(记事本) 等。 所见即所得型的编辑软件主要有：微软的Frontpage和Dreamweaver。其中Frontpage继承了OFFICE系列软件的界面通用、

6、操作简单的特点，十分适合初学者使用。但与MacroMedia公司的Dreamweaver相比，在HTML源代码的精确性、实用性以及对各种新技术的支持上都略逊一筹，因此我们这本教材主要介绍的网页编辑工具是Dreamweaver。,1.2.2图形和图像处理工具 目前常用的图形和图像处理工具主要：Photoshop及Firework。 Photoshop的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆绑了Image Ready，能够实现各种专业化的图像处理、动画的制作等。 Fireworks是由MacorMedia公司出品的首选WEB图形图像处理软件。它的独特之处在于其能够优化处理大图

7、片、切割图片、为图片加入特殊效果、制作网页的动态行为等，可以生成Firework HTML，直接导入到网页中，使用非常方便。,1.2.3动画制作工具 Flash是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。Flash所使用的图形是压缩的矢量图形，采用了网络流式媒体技术，突破了网络带宽的限制，可以边下载边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出高品质的动画，Flash已经慢慢成为网页动画的标准，成为一种新兴的技术发展方向。,1.3网站建设流程,规划,设计,开发,发布,要建

8、设一个优秀的网站，通常应该遵循以下工作流程：确定站点的核心网站的规划网站外观的设计网页具体制作网站性能测试网站发布网站更新与维护。,维护,1.3.1网站规划 一个网站的成功与否与建站前的网站规划有着极为重要的关系。在建立网站前应明确建设网站的目的，确定网站的功能，确定网站规模、投入费用，进行必要的市场分析等。只有详细的规划，才能避免在网站建设中出现的很多问题，使网站建设能顺利进行。 1明确建立网站的目标和用户需求 2确定网站的风格 3网站的技术问题,1.3.2网站设计 对网站进行详细的规划之后，就可进入到设计阶段。 好的Web站点要做到主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主

9、题。调动一切手段充分表现网站点的个性和情趣，突出网站的特点。 1网站的版式设计 2色彩在网页设计中的作用 3网页形式与内容相统一 4三维空间的构成和虚拟现实 5多媒体功能的利用,1.3.3网页制作 静态网页的制作：采用HTML（超文本标记语言）生成的网页，供浏览者浏览。此阶段需要根据设计阶段制作的示范网页，通过去Dreamweaver等软件在各个具体网页中添加实际内容，如：文字、图像、FLASH动画、多媒体文件等。这类静态网页缺少动态的交互，因此还需添加网页的交互性，即动态网页的制作。 动态网页的制作：动态网页的编程目前常用的技术为.ASP.PHP.JSP等，实现客户端与服务器的交互。比如说：

10、会员注册、信息查询、产品选购、留言、论坛等。,1.3.4站点的测试和上传 网站制作完毕，在本机上进行测试，查看网站上是否存在某些错误，如网站是否存在链接的错误，图片是否正常显示，网页程序代码是否有错等。 测试完毕后用上传工具传到WEB服务器上。 1.3.5站点更新和维护 要充分发挥网站的市场功能，及时更新最新的产品信息。一个企业要有专业的网站维护人员或交给专业的网络公司来承担这项工作。,Dreamweaver CS3 工作界面,Dreamweaver cs3的工作界面由“菜单”栏、“插入”栏、“文档”窗口、“文档”工具栏、状态栏、属性面板、标签选择器、集成工作面板等部分组成，如下图所示。,1.

11、 “插入”栏 “插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。这些按钮被分类组织到各个选项卡中。如图所示。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有按钮的名称。,2. “菜单”栏 菜单栏提供了程序功能的选项命令，可以通过“菜单栏”中的命令完成某项特定操作。,3. “文档”窗口 通过“文档”窗口可以显示、创建和编辑当前文档，可以在“设计”视图、“代码”视图或“设计和代码”视图中查看和编辑文档。 “文档”窗口的状态栏位于文档窗口的底部，作用是提供与用户正编辑的文档有关的某些信息，如当前窗口大小、文档大小和估计下载时间等等。,代码视图,设计和代码视图,设计视图,状态栏,4

12、.“文档”工具栏 “文档”工具栏中主要包含了一些对文档进行常用操作的功能按钮，用户通过单击这些按钮可以在文档的不同视图间进行快速切换：“代码”视图、“设计”视图、同时显示“代码”和设计视图的拆分视图。 工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。,5.“属性”面板 “属性”面板并不是将所有的属性加载在面板上，而是根据我们选择的对象来动态显示对象的属性，“属性”面板的状态完全是随当前在文档中选择的对象来确定的。例如，当前选择了一幅图像，那么“属性”面板上就出现该图像的相关属性；如果选择了表格，那么“属性”面板会相应的变化成表格的相关属性。下图所示，是选择了文本对

13、象的属性。,2.2 定义本地站点,在 Dreamweaver中，“站点”一词既表示Web站点，又表示属于Web站点的文档的本地存储位置。在开始构建Web站点之前，您需要建立站点文档的本地存储位置。Dreamweaver 站点可组织与 Web 站点相关的所有文档，跟踪和维护链接、管理文件、共享文件以及将站点文件传输到Web服务器上。 要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作，放置在本地磁盘上的网站被称为本地站点，传输到位于互联网web服务器里的网站被称为远程站点。,1.规划站点结构 网站是多个网页的集合，其包括一个首页和若干个分页，这种集合不是简单的集合。为了达到最佳效果，在创建

14、任何 Web 站点页面之前，要对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及各页是如何互相连接起来的。 我们可以通过把文件分门别类的放置在各自的文件夹里，使网站的结构清晰明了，便于管理和查找。 2.创建站点 在Dreamweaver 中可以有效的建立并管理多个站点。搭建站点有两种方法，一是利用向导完成，二是利用高级设定来完成。 在搭建站点前，我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件夹。 比如：www,2.2.1定义web站点,启动Dreamweaver cs3，选择菜单栏站点管理站点，出现“管理站点”对话框如下图所示。点击“新建”按钮，选择弹

15、出菜单中的“站点”项。,在打开的窗口上方有“基本”和“高级”两个标签，可以在站点向导和高级设置之间切换。 新建一个站点，站点名为：dwhweb，设置本地根文件夹和默认图像文件夹。,3. 搭建站点结构 站点是文件与文件夹的集合，下面我们根据前面对dwhweb网站的设计，来新建dwhweb站点要设置的文件夹和文件。 通常我们建议目录、文件的名称用英文字母、数字、下划线的组合，其中不要包含汉字、空格和特殊字符；目录名应以英文、拼音为主。尽量用一些常见能看懂的词汇，使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。 4. 编辑站点 单击“管理站点”对话框中的编辑，打开“dwhweb站点定义

16、”对话框，对站点名称及路径或其它的相关信息进行编辑。,新建文件夹：在文件面板的站点根目录下单击鼠标右键，从弹出菜单中选择“新建文件夹”项，然后给文件夹命名。这里我们创建flash文件夹。 用于存放flash动画文件。 接下来创建页面，在文件面板的站点根目录下单击鼠标右键，从弹出菜单中选择“新建文件”项，然后给文件命名。首先要添加首页，我们把首页命名为index.htm.,2.2.2 管理站点,单击“站点”菜单“管理站点”命令，弹出“管理站点”对话框，进行新建、编辑、删除、复制站点等操作。 下面以修改站点的名称，改变站点的对应的本地根文件夹路径为例进行讲解。 步骤1单击“管理站点”对话框中“编辑

17、”按钮。 步骤2弹出“dwhweb的站点定义为”的对话框，单击“高级”选项卡，选择“本地信息”，修改了站点的名称、站点的路径等。,2.2.3 编辑网页,在建好站点之后，我们以下边的简单网页为例，叙述一下网页的编辑制作过程。简单网页如下图：,在开始制作之前，我们先对这个页面进行一下分析。 背景：添加了一个背景图像。 IE浏览器顶端的主题栏是“带您走入网络世界”。 网页上方有一行文字。 添加一个FLASH文字动画。 有一幅世界地图图像。 最下面有一个超链接。,在建好站点之后，就是创建网页。 1.新建网页 在Dreamweaver中，创建网页的方法很多，此处介绍以下三种方法。 方法一打开“文件”面板

18、，在站点根文件夹下单击鼠标右键，从弹出菜单中选择“新建文件”命令。 方法二启动Dreamweaver后，窗口中会出一个启动界面，单击“创建新项目”下面的“HTML”项，即可创建网页。 方法三选择“文件”菜单|“新建”命令，弹出“新建文档”对话框，选定“常规”选项卡中“类别”下的“基本页”选项中“HTML”，单击“创建”按钮，即可创建网页，默认名称为“Untitled-1”。,2.保存网页 网页在编辑过程或编辑完成后，要及时保存。用户可选择“直接保存”、“另存为”、“保存为模板”等命令。 保存文件选择“文件”菜单“保存”命令，如果是第一次保存，会弹出“另存为”的对话框，在“保存在”下拉列表中选择

19、保存文件的位置，在“文件名”文本框中输入保存文件的名称，如果不是第一次保存，则会直接覆盖保存。网页保存的快捷键：Ctrl+S。 另存为文件选择“文件”菜单“另存为文件”命令，弹出“另存为”的对话框，将已经保存的文件另存到其它位置，或重新命名保存。 保存为模板选择“文件”菜单“另存为模板”命令，弹出“另存为模板”对话框，输入模板的名称，单击“保存”将文件保存为模板。,第三步，输入文字，居中对齐。,设置文字的格式：选中文字，对照“属性”面板中的文字的属性，将其字体格式设置成默认字体。大小可任意更改字号，“B”表示将字体变粗。 光标放在文本段落中，单击属性面板中的对齐方式。 设置文字的颜色：首先选中

20、文字，在“属性”面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。,插入FLASH动画：插入栏中常用选项中的flash按钮。,插入图像插入图像可以选择以下任意一种方法：（1）使用“插入”菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击“确定”按钮。（2）使用插入栏：单击“插入”栏|“图像”按钮，弹出“选择图像源文件”对话框，其余操作同上。（3）使用 “资源”面板：单击“图像”选项，查看图片，选定图像文件，用鼠标拖动至工作区合适位置。,最后添加一个链接，如选中“网页三剑客”，在其“属性”面板的链接框里输入链接地址。,2.3 发布站点,网站完成后，

21、就可以将网站发布到互联网中，浏览者通过浏览器可以访问该网站。 一、申请网页空间 .作为学生来说，一般可上网申请免费的个人空间及免费的域名，然后将作品上传到个人空间。 2.如果是用于商业用途，可以向ICP（互联网信息服务提供商）申请交费的虚拟空间或租用整台服务器。 二、上传网站 .设置远程站点，点击“站点”菜单“管理站点”命令，单击编辑站点，选择“高级”选项中的远程信息，选中访问下拉列表中的FTP，输入远程站点的FTP地址，用户名和密码，单击“确定”按钮。如图所示：,2.上传站点 点击文件面板中的展开以显示本地和远程站点。,单击“连接远程站点”按钮，开始远程FTP站点相连。 选中本地站点中要上传

22、到远程服务器的内容，单击“上传”按钮。 如果要将远程站点中的内容下载到本地站点，可单击“下载”按钮。,上传,下载,本章小结,本章主要介绍了以下内容： 1Dreamweaver cs3的工作界面； 2管理站点：创建本地站点、编辑站点； 3简单网页制作； 4将本地站点信息上传远程站点。,1.背景知识 根据本章所学的内容，创建站点和创建网页。 2.实训准备工作 在本地硬盘创建一个空文件夹myweb，并建一个子文件夹images。 3.实训要求 创建站点和创建网页要求：定义本地站点和新建一个网页。,上 机 实 训,“修改”菜单“页面属性”命令，或单击“属性”面板中的“页面属性”按钮。弹出“页面属性”对

23、话框： 外观选项卡：设置背景颜色及背景图像，另外还可设置文本链接访问过的链接活动链接页边距等。 标题/编码选项卡:设置网页的标题，输入请到西部来旅游。显示在浏览器的标题栏中,如果未定义,则显示为“Untitled Document” 编码选项卡：选择文档编码。 跟踪图像选项卡：跟踪图像是为网页排版的一种辅助手段，在HTML文档不显示。选择跟踪图像的路径及不透明度。,3.2 页面属性的设置,3.3 文本的修饰,操作文本是最基本的网页制作技能，例如：字体的修饰、段落的对齐方式等。 输入和修改文本软回车（换行，shift+回车键）和硬回车（另起一个自然段）输入连续的空格：切换到中文全角状态；或是在源

24、代码中输入“ _parent(父窗口打开超链接); _self(在本窗口或本框架中打开链接); _top,在当前浏览器的最外层打开链接,3.4 使用图像,一、图像的格式GIF:索引格式,最多支持256色.JPG(JPEG):有损压缩格式,支持的是真色彩.PNG:专门针对WEB开发的一种无损压缩格式. 二、插入图像 “插入”栏|“图像”按钮，或是“插入”菜单|“图像”命令，打开“选择图像源文件”对话框,选定需要的图像.单击“确定”按钮。,三、设置图像属性选中图像，在“属性”面板中设置图像的属性： 对图像进行命名. 改变图像大小：在“属性”面板直接输入图像的尺寸大小。 在“文档”窗口拖动图像的右方

25、、右下方、下方的句柄进行拖动。在“属性”面板中单击重设大小可以恢复图像的大小。 图像的对齐方式：垂直、水平方向等。 设置图片的边距：垂直边距、水平边距 经图像加上文本说明：在“属性”面板中“替代”文本框中输入说明文本。,设置低分辨率图像制作两张图像，一个是浏览器最终显示的图像，另一个是它的低分率或者灰度版本。单击图像，在“属性”面板中，低品质源输入低分辨率的图像地址。 增加图像边框：在“属性”面板中输入边框宽度。,四、使用水平线 加入水平线“插入”栏|“常用”选项卡中的“水平线”按钮。选中水平线，在“属性”面板中，修改水平线的属性。,五、插入鼠标经过图像及导航条 1、插入鼠标经过图像 先在图片

26、处理软件中处理两个图片. 单击“插入”栏|“鼠标经过图像”按钮或是选择“插入”菜单|“图像对象”|“鼠标经过图像”按钮，弹出“鼠标经过图像”对话框,输入原始图片的名称和位置；输入鼠标经过图片的名称和位置即可. 为鼠标经过图像加入一个超链接:前往“URL”文本框中输入超链接地址即可.,2、插入导航条 导航条在网页中起到了向导的作用，通过导航条的指引，快速地找到所要浏览的信息， 导航条由多个导航条元件组成，每个导航条元件链接到相应的链接地址，在网页中一般横排或竖排。每个导航条元件包含一组图像，分别来响应鼠标动作。,设置方法如图所示：,六、创建网页相册 新建一个空白的网页文件选择“命令”菜单|“创建

27、网站相册”命令,弹出一个对话框,设置相册标题副标题其它信息等;选择“浏览”按钮,确定源图像文件夹和目标图像文件夹,设置略缩图的大小格式等,小数点位数可改变图像的尺寸大小.,“为每张相片建立导览页面”复选框来为每个图像创立导航页.如图所示。,本章主要介绍了网页元素编辑及相关属性的设置，包括以下几个方面： 1网页文本的编辑 2超链接的建立 3图像的插入和图像对象的编辑,本 章 小 结,设计页面布局,网页版面布局概述 网页版面布局是网页设计中的一项重要内容。版面指的是浏览器看到的完整的一个页面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现800*600像素，1024*768像素等。布

28、局，就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主要内容的排版等。经常用到的版面布局结构主要有以下几种： “T”结构布局 页面顶部为横条的网站标志、广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条的背景较深，整体效果类似英文字母“T”，这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节和色彩上不注意，很容易让人“看之无味”。,“口”型布局 这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面是友情

29、连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。 “三”型布局 这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。,4.1 网页版面布局概述,4.1 网页版面布局概述,POP布局 POP引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见:漂亮吸引人。缺点就是速度慢。 在确定好版面布局结构后，继续要做的就是根据内容调整页面的结构。如页面尺寸选择多大？怎样放置网页的网页元素？在Dreamweaver中提供了四种主要的方法

30、用于规划和设计页面：表格、层、框架和CSS+DIV，本章只介绍前三种方式。,4.3 使用表格排版,表格是由一些被线条分开的单元格组成。线条即表格的边框，被边框分开的区域被称为单元格，数据、文字、图像等网页元素均可根据需要放置在相应的单元格中。如图所示。 在网页中使用表格一般有两种情况：一种是在需要组织数据显示时用；另一种是在布局网页时用。当表格被用作布局时，需要对表格的属性进行设置。,4.3.1 插入表格和编辑表格,表格在网页中通常存在两种形式：一种是独立的形式存在，二是以嵌套的形式存在。 1、插入独立表格 插入表格一般有两种方法 方法一：单击“插入”栏“常用”选项“表格”按钮； 方法二：选择

31、“插入”菜单|“表格”命令；弹出“表格”对话框,4.3.1 插入表格和编辑表格,4.3.1 插入表格和编辑表格,2.插入嵌套表格 在网页中为了保证各部分内容之间相对独立性，而不会因为编辑其它内容的同时被修改，表格的嵌套形式在网页中普遍存在。一般，网页有一个大的外层表格，按区域划分为若干单元格，然后在区域单元格中再插入嵌套表格，这样各区域的排版即规范又灵活。其操作步骤如下：光标放在表格的某个单元格内，再单击“插入”栏“常用”选项“表格”按钮。,4.3.1 插入表格和编辑表格,.编辑表格 增加行与列 删除行或列 格式化表格,4.3.2表格及单元格属性设置,1、表格属性设置 要对表格进行属性设置，必

32、须首先选中表格，选中表格的常用方法有以下四种： 方法一：将光标置于表格内，单击“文档”窗口左下角的标签选中整个表格。 方法二：将鼠标指针移动到表格的边框处，单击鼠标左键选中表格。 方法三：将光标置于表格内，选择“修改”菜单|“表格”|“选择表格”命令，选中表格。,4.3.2表格及单元格属性设置,方法四：将光标置于表格内，单击鼠标右键，在弹出菜单中，选择 “表格”|“选择表格”命令，选中表格。选中表格后，在“属性”面板中设置表格的属性，如图所示。,4.3.2表格及单元格属性设置,2.单元格属性的设置 光标放在单元格内，在“属性”面板中设置单元格属性。如图所示，“属性”面板分为上下两部分，上半部分

33、是对单元格中对象的属性设置，下半部分是对单元格属性的设置。 另外对单元格还可进行拆分和合并单元格的操作。,4.3.3使用表格排版网页,表格是能将网页元素按设计者要求的方式显示的一种排版技术。通过单元格的拆分、合并以及在单元格中插入嵌套表格等方法对网页元素进行更细致的控制。其操作步骤如下： 步骤1插入一个表格，按照事先考虑好的版面设计将表格划分为几个大的单元格，设置合适的宽度，边框设置为，使边框不可见，需要时可在单元格中插入嵌套表格，同样将边框设为，使边框不可见。 步骤2向各个单元格中加入网页元素，编辑完毕后保存文档。,4.3.3使用表格排版网页,使用表格构造网页布局时应遵循如下原则： 要规划好

34、再运行，甚至要进行无数次的实验和重复运行才能制作出好的页面框架。 从外向内工作。先建立最大的表格，再在它内部创建嵌套的较小表格。 在外部使用绝对像素方法，在内部使用相对百分比方法。,注意,总表格与嵌套表格在设置宽度和高度时有一定的技巧，总表格设置的是网页整体的排版，为了使之在不同分辨率的显示器下能保持统一的外观，总表格的高度和宽度一般使用像素值。为了使嵌套表格的宽度和高度与总表格不发生冲突，嵌套表格一般使用百分比设置高度和宽度。另外嵌套表格一般不要超过3层。,4.3.4 在布局模式下插入表格和单元格,为了简化使用表格进行页面布局的过程，在Dreamweaver提供了布局模式。在布局模式下，使用

35、布局表格作为基础结构来设计网页，在布局表格中创建布局单元格，然后插入网页元素。 在布局模式下，使用表格进行布局具有定位简单、容易调整等优点。例如：在布局模式中可以在页面上方便地绘制布局单元格，可将这些单元格拖动到所需的位置；还可以方便地创建固定宽度的布局或自动伸展为整个浏览器窗口宽度的布局。,4.3.4 在布局模式下插入表格和单元格,在dw cs3中要进入布局模式需按快捷键Alt+F6 或者在查看菜单下表格模式下有布局模式,4.3.4 在布局模式下插入表格和单元格,1、绘制布局表格与布局单元格 首先从标准模式切换到布局模式：单击“插入”栏“布局”选项“布局模式”按钮。切换到布局模式后，就可以创

36、建布局表格，并在其中添加布局单元格。要说明的是，布局单元格不能在布局表格之外，同一个布局表格中可放置多个布局单元格，布局表格可嵌套。操作步骤如下： 步骤1单击“绘制表格”按钮，鼠标在页面上变为“+”形，按下鼠标左键拖动可绘制布局表格。 步骤2单击“绘制布局单元格”按钮，鼠标在页面上变为“+”形，按下鼠标左键拖动可绘制布局单元格。,4.3.4 在布局模式下插入表格和单元格,如图所示：,4.4 使用层排版,除了表格以外，层是另外一种定位网页元素的方法。本节介绍层的概念和操作，并通过一个实例说明如何利用层进行页面布局的设计。,4.4.1 实例导入：层排版网页,Dreamweaver中的层是一种网页元

37、素定位技术，它可以包含文字、图像、表格、插件甚至其它层。一个网页中可以含有多个层，层的特点在于各个层之间可以重叠，并可以决定每个层是否可见，还可以定义各个层之间的层次关系。层可以转换成表格，通过与“时间轴”及行为的结合，能够实现动态交互效果。,4.4.2 插入层和编辑层,1、插入层 在Dreamweaver中，插入层的方法有多种，常用的方法有以下两种： 方法一：将光标放置在需要插入层的地方，选择“插入”菜单“布局对象”“层”命令，在“文档”窗口中插入一个空的预设大小的层。 方法二： 单击“插入”栏“布局”选项“描绘层”按钮，移动鼠标到“文档”窗口，当鼠标变成“”形状，单击鼠标左键并拖动，即创建

38、了层，如图所示。,4.4.2 插入层和编辑层,2、层的关系 如果两个层有交叉，它们有两种关系：重叠与嵌套。重叠就是位置上有重叠，但两个层是独立的，一个层发生变化时，不影响另外一个层，而嵌套时，子层会随着父层的某些属性的变化而变化，而父层不随子层发生变化。,4.4.2 插入层和编辑层,3、创建嵌套层 层的嵌套和表格的嵌套有些类似，就是在层里面再建立一个层。创建嵌套层常用的方法有以下三种： 方法一：光标放在当前层中，选择“插入”菜单“布局对象”“层”命令。 方法二：选中当前层，单击“插入”栏“布局”选项“绘制层”按钮，同时按下Alt键绘制层。 方法三：打开“层”面板，按下Ctrl键，将某一层拖动到

39、另一层位置。,4.4.2 插入层和编辑层,4、层的属性设置 设置层的属性时，首先要选中层。选中层的常用方法有以下三种： 方法一：单击层边框线。 方法二：单击层锚记。 方法三：单击“层”面板上的层名称。 当层被选中后，周围出现控制手柄，层锚记变为蓝色显示。要同时选择多个层，按下Shift键，连续单击要选择的层。选中层后，通过“属性”面板进行属性设置，如图所示。,4.4.2 插入层和编辑层,4.4.2 插入层和编辑层,左：用于设置层的左边框相对于页面或其父层左边框的距离，向右为正值 上：用于设置层的上边框相对于页面或其父层上边框的距离，向下为正值 Z轴：用于设置层叠加的顺序编号，Z轴编号较大的层出

40、现在编号较小的层的上面。编号可以为正数、负数、0,4.4.2 插入层和编辑层,可见性：用于设置层的初始可见性。Default不指定层的可见性；inherit继承其父层的可见性；visible总是显示该层的内容；hiddlen总是隐藏该层的内容，不管其父层是否可见。 溢出：用于设置当层的内容超出层的大小时，层中内容的显示方式。 visible增加层的大小，层向下或向右扩大，以便层中的所有内容都可见；hidden保持层的大小不变，并剪掉超出层范围的任何内容，不显示滚动条；scroll不管内容是否超出层的范围，都给层添加滚动条；auto当层内容超出层的范围时自动显示滚动条。,4.4.2 插入层和编辑

41、层,剪辑：用于定义层的可见区域，设置层中内容被剪掉的范围。在左、右、上、下文本框中输入的数值是与层左上角的距离，而不是与层的四条边的距离，也不是与页面四条边的距离。,4.4.2 插入层和编辑层,5、层的操作 （1） 层的移动 操作步骤如下：选中层，拖动到合适的位置。 （2）层的对齐 选中多个层，选择“修改”菜单|“排列顺序”某项“对齐方式”命令。对齐方式：左对齐、右对齐、对齐上缘、对齐下缘等，如图4.28所示，设定层的对齐方式时，以最后一个选中的层的上、下、左、右边界为对齐参考点。,4.4.2 插入层和编辑层,（3）改变层的顺序 当网页中出现多个层时，就会出现重叠现象。那么层的叠放顺序会影响其

42、显示效果。改变层顺序的常用方法有以下两种： 方法一：选中层，在“属性”面板中，Z轴文本框中输入数值来决定层的叠放顺序。其值越大越靠上，如果其为负值，表示层位于页面之下，页面中的内容将会覆盖层中的内容。 方法二：在“层”面板中双击Z轴的值，修改此值；或是直接拖动层，改变它们的上下位置，Z轴值会自动变化。,4.4.2 插入层和编辑层,（4）显示和隐藏层 选中层，选择“窗口”菜单“层”命令，打开“层”面板，单击“层”面板上的眼睛图标，眼睛睁开为显示层，眼眼闭上为隐藏层，无眼睛图标表示可见性为默认，,4.4.2 插入层和编辑层,（5）层与表格的相互转换 由于层所具有的灵活性是表格所无法比拟的，因此可以

43、通过在层中添加内容，使其布局在页面中任何位置，而且不会使其它页面元素受到影响。但由于它缺乏紧凑性，在不同浏览器显示，可能会发生层的位置偏移，因此Dreamweaver提供了层与表格互相转换功能，以结合各自的优点更好地进行网页设计操作。,4.6 使用框架排版网页,框架可以把一个浏览器窗口划分多个区域，每个区域显示不同的网页，它的这个特性使其成为一种常用的页面排版技术。,4.6.2 创建与编辑框架结构,1. 框架构成及设置 一个框架实际上是由多个HTML文档所构成的，其中一个页面专门负责框架的集成，比如是分行型还是分列型，或者是混合型；行和列的尺寸如何等，一般被称为框架集页面，其它的是普通的HTM

44、L文档，分别被放置到框架结构中，被称为框架页，当链接到设置框架的HTML文档时，整个框架以及各HTML文档就会一起显示在浏览器中。,4.6.2 创建与编辑框架结构,2.创建框架 启动Dreamweaver后，单击启动界面“从范例创建”“框架集”，弹出 “新建文档”的对话框，单击“常规”选项卡，选择“框架集”及右侧列表框中的框架样式，如图所示。,4.6.2 创建与编辑框架结构,4.6.2 创建与编辑框架结构,3、编辑框架 用户可对已经创建好的框架集进行编辑和修改，例如将一个框架拆分成几个更小的框架，或是移动框架的边框来改变框架显示的范围大小。 拆分框架 删除框架 改变框架的行高和列宽,4.6.2

45、 创建与编辑框架结构,4. 选择框架 选择“窗口”菜单“框架”命令，打开“框架”面板，如图所示。,框架外框,框架内嵌外框,框架内部,4.6.2 创建与编辑框架结构,5. 设置框架属性 （1）设置框架集属性 选中框架集，在“属性”面板中可以定义框架集的属性，如图所示。,4.6.2 创建与编辑框架结构,（2）设置框架的属性 选中某个框架，在“属性”面板可以定义框架属性，如图所示。,4.6.2 创建与编辑框架结构,6、设置超链接目标框架 所谓超链接目标框架，是指当单击超链接时，超链接的目标网页文件在哪个框架中显示。例如：对于一般左窄右宽的列式框架结构，一般是在左边框架的网页中包含超链接的导航信息，而

46、在右边的框架中显示超链接的目标网页文件。在“目标”下拉列表中，选择目标框架名，如图所示。,4.6.2 创建与编辑框架结构,在“目标”下拉列表中，选择目标框架名，如图所示。 链接目标的含义： _blank：在一个新窗口显示超链接的目标文件，同时保持当前窗口不变。 _parent：在上一级框架中打开链接文件。 _self：在当前框架中打开链接，同时替换该框架中的内容。为网页超链接的默认目标窗口。 _top：删除所有框架，在当前浏览器窗口中打开链接的文档。如果想跳出框架结构，应选用此项。 具体的框架名称：在指定的框架位置显示链接文件。,4.6.2 创建与编辑框架结构,7. 保存框架和框架集 创建好框

47、架结构，设置好框架的属性后，就要保存框架。此时用户可以单独保存一个框架集文件，或一个框架文件，或保存所有打开的框架文件和框架集文件。 8. 编辑无框架内容 如果浏览器不支持框架，则无法显示框架集和框架文档内容，这时必须生成一个无框架文档，当不支持框架的浏览器载入框架文件时，浏览器只会显示无框架内容。,利用模板和库制作网页,本章主要介绍了利用模板和库设计风格一致的网站，使用模板和库的组合使得建设网站和维护网站变得很轻松，尤其是在对一个规模较大的网站进行建设与维护时，就能体会到模板和库的好处。 【本章学习目的】 本章通过一个典型的网站案例重点讲解了模板和库技术的应用，通过本章的学习，掌握利用模板和

48、库技术创建风格一致的网站的方法。,利用模板和库制作网页,一个成功的网站首先要具备自己独特的风格，才能够在茫茫 的网络中脱颖而出，给人留下深刻的印象。但仅凭网站中的一两个较好的页面，很难收到良好的效果。因此就需要整个站点内的页面体现出统一的风格。因此通过使用模板能够生成多个具有相似结构和外观网页，从而提高网页制作效率。 创建模板和编辑模板，最后根据模板快速创建网页。,7.2 创建和设置模板,关于模板最显著的特征就是锁定区域和可编辑区域之分。锁定区域主要用来锁定体现网站风格部分，而将经常要改变的文字、图像、链接等网页元素设置成可编辑区域，网页中只编辑可编辑区域的内容，从而得到与模板相似但又有所不同

49、的新的网页。,7.2.1 创建模板,创建模板有二种常用的方法：一是创建新模板，二是将当前网页另存为模板。 1. 创建新模板 创建新模板可通过以下两种方法来实现： 方法一：选择“文件”菜单“新建”命令，弹出“新建文档”对话框中，选择“常规”选项卡“基本页”“HTML模板”，单击“创建”按钮， 方法二：选择 “窗口”菜单“资源”命令，或按F11键打开“资源”面板，单击“资源”面板左边的“模板”选项，单击右下角的新建模板按钮，如图所示。 2. 将当前文档另存为模板 将一个编辑好的网页按照要求加以修改，然后另存为模板。,7.2.2 编辑模板,首先划分可编辑区域和锁定区域，然后编辑模板，通常是像编辑网页

50、一样先将锁定区域编辑好，然后再定义可编辑区域。 可编辑区域：在模板中可编辑区域对应网页中的可编辑部分，锁定区域是那些不可编辑的部分。在默认的方式下，Dreamweaver将新模板的所有部分设置为不可编辑区域，由用户来定义可编辑区域。在编辑模板时，无论是可编辑区域还是锁定区域都是可以编辑的。但是将模板应用到网页中，在网页中的锁定区域是不可以编辑的。,7.2.2 编辑模板,常用定义可编辑区域的方法有二种，首先在模板中将光标单击要新建可编辑区域位置，选择“插入”菜单“模板对象”“可编辑区域”命令，或单击“插入”栏“常用”选项“模板”“可编辑区域”按钮，弹出一个“新建可编辑区域”对话框，如图所示，输入

51、这个区域的名称，单击“确定”按钮。,7.2.2 编辑模板,7.3 模板的应用和更新,利用模板快速生成新的网页，也可以将模板应用于已经存在的网页。,7.3.2 模板的更新,1. 模板的修改 模板创建后，用户利用模板生成了网页文件。在网页文件的编辑过程中可能会有一些不合适的地方，比如：链接有错误、网页布局中单元格对齐方式不合理、图像不能正常显示等，而对于锁定区域，是无法在网页编辑状态进行修改，因此需要对模板进行修改。 打开模板文件，对模板文件进行修改，针对在网页编辑中发现的问题进行修改。 修改模板：对锁定区域进行修改。 删除可编辑区域：在模板编辑状态，选中已定义的可编辑区域，选择“修改”菜单“模板

52、”“删除模板标记”命令，该可编辑区域就不存在了。,7.3.2 模板的更新,定义不可编辑的可选区域 对于基于模板创建的网页，如果将有些区域限制为不可编辑的区域，同时根据事先设置的条件控制该区域显示或隐藏，就可设置不可编辑的可选区域。,7.3.2 模板的更新,定义可编辑的可选区域 对于基于模板创建的网页，如果有些区域允许用户编辑该区域中的内容，同时根据事先设置的条件控制该区域显示或隐藏。,7.3.2 模板的更新,定义可编辑标签属性 对于基于模板创建的网页，如果需要修改某些页面元素的属性，如背景图像，背景颜色等，则可以在创建模板时将这些属性定义为可编辑标签属性。,7.3.2 模板的更新,2. 用模板

53、更新网页和网站 一旦模板被应用到多个网页文档中，对此模板的修改则会更新全部与其相关联的文档。这种使用模板更新文件的方法大大节省了用户的时间，尤其在涉及大量的改动时极为有效。,7.4 使用库,Dreamweaver中提供了库的概念。库是用来存储想要在整个网站上经常重复使用或更新的网页元素，其它网页可调用库文件。这样一旦需要修改重复使用的部分，只需要修改库文件，而其它调用此库的页面将会被全部更新。,7.4.1 创建库,库项目可以包含多种网页元素，如：图像、链接、表格、脚本等，但CSS样式表文件不能作为库项目添加到库。 创建库的常用方法有三种： 方法一：选择“窗口”菜单“资源”命令，打开“资源”面板

54、，选择“库”选项，单击“资源”面板下方的“新建库项目”按钮。 方法一：选择“文件”菜单“新建”命令，弹出“新建文档”对话框，选择“常规”选项卡“基本页”“库项目”命令，单击“创建”按钮，如图所示。,7.4.1 创建库,方法三：将已经编辑好的网页元素转换为库文件，首先选中要转换为库文件的网页元素，然后选择“修改”菜单“库”“增加对象到库”命令，当前选中的网页元素就会成为一个新的库项目以供其它网页调用。 创建库文件后，站点中就会多出子文件夹library，库文件的默认存储路径就是该文件夹。库文件的后缀名为lbi。库的编辑与普通网页的编辑完全相同。,7.4.2 应用库,库建立后，可以很轻松地将库应用

55、于网页文件中。操作步骤如下： 步骤1打开网页，把光标定位在需要插入库的位置。 步骤2在“资源”面板中选择“库”选项，然后单击相应的库项目，单击“插入”按钮，或者将库项目直接拖到网页需要插入库的位置。 将库项目应用到网页文件中后，在Dreamweaver的网页编辑状态，库项目的背景呈现高亮度显示。,7.4.3 修改库,库被应用到网页文档中，在网页中是无法修改的。要修改库，必须首先打开库文件才能进行编辑。对库的修改则会自动更新所用与之关联的网页文档。 1. 编辑库 打开“资源”面板，选中“库”选项，然后双击某个库文件，进入库文件的编辑状态，对库文件进行修改。 将库文件修改完毕，保存库文件。此时弹出

56、 “更新库项目”对话框，或选择“修改”菜单“库”“更新”页面。单击“更新”按钮。,7.4.3 修改库,2. 删除库 打开“资源”面板，选中“库”选项，然后单击库文件名，按DEL键即可。删除库后，不会改变任何调用此库的其它网页内容。 3. 使网页中库项目可编辑 如果网页中添加了库项目，库项目以高亮显示，无法编辑。如果想要编辑调用库在当前网页的内容，则必须断开当前网页与库之间的关联。操作步骤如下： 在当前网页中选中项目，在“属性”面板中单击“从源文件分离”按钮。,6.2 创建表单,表单相当于一个容器，它容纳的是承载数据的表单对象，例如：文本框、复选框等。因此一个完整的表单包括二部分：表单及表单对象

57、，二者缺一不可。,本章主要介绍通过表单可以实现浏览器与服务器之间的信息交流，在WWW上表单被广泛用于各种信息的收集和反馈，如图所示。 【本章学习目的】 本章通过一个用户注册信息表的实例，重点介绍了表单的创建、表单对象的插入，通过本章的学习，读者应了解表单的用途，掌握插入表单和表单对象的方法，了解通过Dreamweaver内部行为验证用户输入信息的正确性。,6.2.1 表单网页的布局,在包含表单的网页，一般仍采用表格排版方式。其操作步骤如下： 步骤1新建一个网页，添加页面背景，插入一个表单，出现一个红色虚线框。 步骤2在表单中，插入表格，采用表格排版，在表格中，插入图像或动画、文本加以修饰，并用

58、CSS样式美化网页。 步骤3最后在表格中插入表单对象。,6.2.2 创建表单,1. 插入表单 插入表单常用的方法有以下两种： 方法一：单击“插入”栏“表单”选项“表单”按钮。 方法二：选择“插入”菜单“表单”“表单”命令。 在网页中出现一个红色的虚线框。表单的作用是当访问者单击表单的“提交”按钮时，浏览器将表单对象所包含的数据发送到服务器，因此表单对象必须置于表单中。,2. 设置表单属性 单击“表单”外框，或单击“文档”窗口左下角的标签，选择表单。在“属性”面板中设置表单属性。,表单面板共有14个表单域对象。,6.3 插入表单对象,1. 文本字段和文本区域 （1）文本字段 文本字段是用来输入文

59、本信息的。 单击“插入”栏“表单”选项“文本字段”按钮，或选择“插入”菜单“表单”“文本域”命令，弹出 “标签输助功能属性”的对话框，如图所示，输入标签文本，如用户名，单击“确定”按钮，即插入了一个文本字段。单击“文本字段”对象，将其选中，在“属性”面板中设置“文本字段”的属性。,（2）文本区域 文本区域同样也是用来输入文本信息的，当文本字段的类型选择为多行时，即是文本区域。其属性与文本字段相同。 单击“插入”栏“表单”选项“文本区域”按钮，或选择“插入”菜单“表单”“文本区域”命令，即插入“文本区域”对象。,2. 复选框 复选框是指从一组选项中选择多个选项。操作步骤如下： 单击“插入”栏“表

60、单”选项“复选框”按钮，或选择“插入”菜单“表单”“复选框”命令，即插入“复选框”对象。 单击“复选框”对象，将其选中，在“属性”面板中设置“复选框”的属性，如图所示。,3. 单选按钮及单选按钮组 （1）单选按钮 “单选按钮”是指从一组选项中只能选择一个选项。其操作步骤如下： 单击“插入”栏“表单”选项“单选”按钮，或选择“插入”菜单“表单”“单选按钮”命令，即插入单选按钮。 单击“单选按钮”对象，将其选中，在“属性”面板中设置“单选按钮”的属性：“单选按钮”的名称、选定值、初始状态等，如图所示。,（2）单选按钮组 由于“单选按钮”通常是由多个组成一组来使用，因此Dreamweaver提供了“

61、单选按钮组”的功能。 单击“插入”栏“表单”选项“单选按钮组”按钮，或选择“插入”菜单“表单”“单选按钮组”命令，弹出 “单选按钮组”对话框。,4. 列表菜单 “列表”和“菜单”可以在有限的空间内为用户提供更多的选项。“列表”在滚动条中显示选项值，并可允许用户在列表中选择多个选项。“菜单”在下拉式菜单中显示选项值，只允许用户选择一个选项。操作步骤如下： 单击“插入”栏“表单”选项“列表菜单”按钮，或选择“插入”菜单“表单”“列表菜单”命令，即插入“列表或菜单”。 单击“列表菜单”，将其选中，在“属性”面板中设置“列表菜单”的属性，如图所示。,5、跳转菜单 “跳转菜单”与“菜单列表”对象有所不同

62、，菜单的每一个列表项目都链接到一个URL地址。一般常用于友情链接。 单击“插入”栏“表单”选项“跳转菜单”按钮，或选择“插入”菜单“表单”“跳转菜单”命令，弹出“插入跳转菜单”的对话框，如图所示。,6. 文件域“文件域”的作用是用户在表单中选择文件，然后将选中的文件内容发送到服务器。例如：用户在撰写电子邮件时，采用文件域的方式，附加文件作为附件传送。单击“插入栏”“表单”选项“文件域”按钮，或选择“插入”菜单“表单”“文件域”命令。单击“文件域”对象，将其选中，在“属性”面板中设置“文本域”的属性：文本域的名称、字符宽度、最多字符数等，如图所示。,7. 隐藏域 “隐藏域”通常用来在表单之间传递

63、数据，一般只用于脚本编程。单击“插入栏”“表单”选项“隐藏域”按钮，或选择“插入”菜单“表单”选项“隐藏域”命令。 8. 按钮 “按钮”的作用是控制表单操作。使用表单按钮将输入表单的数据提交到应用程序，或者重置该表单，也可以用来执行脚本指定的自定义功能。 单击“插入”栏“表单”选项“按钮”按钮，或选择“插入”菜单“表单”“按钮”命令，即插入“按钮”。单击“按钮”，将其选中，在“属性”面板中设置按钮的属性，如图所示。,9. 图像域 “图像域”实质上是以图像形式显示的提交按钮，它的功能等同于提交按钮。 单击“插入”栏“表单”选项“图像域”按钮，或选择“插入”菜单“表单”“图像域”命令，即插入“图像域”。单击图像域，将其选中，在“属性”面板中设置图像域的属性，如图所示。,