Dreamweaver_CS6完美网页制作基础、实例与技巧从入门到精通课件第13章 Dreamweaver CS6动态网页设计基础
合集下载
Dreamweaver CS6入门课件
时代码”视图显示浏览器用于执行该页面的实际代码,当
在“实时”视图中与该页面进行交互时,它可以动态变化。 第 3
“实时代码”视图不可编辑。
页
1 DREAMWEAVER的工作界面
精
多屏幕:借助“多屏幕预览”面板,为智能手机、平板电脑和 台式机进行设计。使用媒体查询支持,为各种不同设备设计样式 并将呈现内容可视化。(查看页面,就如同页面在不同尺寸的 屏幕中显示。)
“文件”等面板独立显示,适合对网页的调试和修改。
第 10
页
精
2 站点的搭建与管理
Dreamweaver的站点是一种管理网站中所有相关联 文件的工具。通过站点可以对网站的相关页面及各 类素材进行统一管理,还可以以使用站点管理实现 将文件上传到网页服务器,测试网站。
站点简单的说就是一个文件夹。在这个文件夹里包 含了网站中所有用到的文件。我们通过这个文件夹 (站点),对我们的网站进行管理,有次序,一目 了然。
这些面板集中了网页编辑和站点管理中常用的工具 按钮。这些面板被集中到面板组中,每个面板都可 以展开或折叠,并且可以和其他面板一起或取消停 靠。
第6 页
精
1 DREAMWEAVER的工作界面
第7 页
1 DREAMWEAVER的工作界面
文件面板:
精
没有创建站点的状态
创建站点哟后的状态
第8 页
第 11 页
2.1 创建本地站点
精
在制作页面之前,首先要在Dreamweaver中创建站点。 一开始只需制作本地站点,这个位于本地硬盘中的文件夹 被当成一个远程站点的镜像,完成本地站点的制作后,即 可将本地站点上传至远端服务器,作为远程站点。
的不同视图之间快速切换。工具栏中还包含一些与 查看文档、在本地和远程站点间传输文档有关的常 用命令和选项。
Dreamweaver cs6入门与提高实例教程课件Dreamweaver cs6入门与提高实例教程课件第3章网站的构建与管理
同步文件
同步预览
3.6 实例制作之将已有文件组织为站点
本节将这些已有的文件夹组织为一个站点。步骤如下: (1)启动Dreamweaver CS6,执行“站点”/“新建站点”命令,打开站点设置对 话框。 (2)在“站点名称”后面的对话框中输入站点名称blog。 (3)单击“本地站点文件夹”右侧的文件夹图标,浏览到 c:\inetpub\wwwroot\blog\目录;或直接输入c:\inetpub\wwwroot\blog\。
展开的“文件”面板选项
3.3.3 操作站点文件或文件夹
无论是创建空白的文档,还是利用已有的文档构建站点,都可能会需要对站 点中的文件夹或文件进行操作。下面简要介绍利用“文件”面板对本地站点的文 件夹和文件进行创建、删除、移动和复制等操作。
移动文件/文件夹
更新文件链接
注意:同删除站点的操作不同,这种对文件或文件夹的删除操作,会从磁盘上真正 删除相应的文件或文件夹。
本地站点和远程web站点应该具有完全相同的结构,在这两种站点之间传输 文件时,如果站点中不存在必需的文件夹,则Dreamweaver将自动创建这些文件 夹。如果使用Dreamweaver创建本地站点,然后将全部内容上传到远程站点,则 Dreamweaver能确保在远程站点中精确复制本地结构。
站点的发布是一个持续的过程,这一过程的一个重要部分是定义并实现一个 版本控制系统,既可以使用Subversion,也可以使用外部的版本控制应用程序。
显示本地和远端站点
Dreamweaver CS6改善了 FTP 性能。利用对 jQuery Mobile 和 Adobe PhoneGap™ 框架的更新支持,可以便捷地建立移动应用程序。利用重新改良的 多线程 FTP 传输工具和图像编辑功能,可以有效地设计、开发并发布网站和移动 应用程序,节省上传大型文件的时间。
同步预览
3.6 实例制作之将已有文件组织为站点
本节将这些已有的文件夹组织为一个站点。步骤如下: (1)启动Dreamweaver CS6,执行“站点”/“新建站点”命令,打开站点设置对 话框。 (2)在“站点名称”后面的对话框中输入站点名称blog。 (3)单击“本地站点文件夹”右侧的文件夹图标,浏览到 c:\inetpub\wwwroot\blog\目录;或直接输入c:\inetpub\wwwroot\blog\。
展开的“文件”面板选项
3.3.3 操作站点文件或文件夹
无论是创建空白的文档,还是利用已有的文档构建站点,都可能会需要对站 点中的文件夹或文件进行操作。下面简要介绍利用“文件”面板对本地站点的文 件夹和文件进行创建、删除、移动和复制等操作。
移动文件/文件夹
更新文件链接
注意:同删除站点的操作不同,这种对文件或文件夹的删除操作,会从磁盘上真正 删除相应的文件或文件夹。
本地站点和远程web站点应该具有完全相同的结构,在这两种站点之间传输 文件时,如果站点中不存在必需的文件夹,则Dreamweaver将自动创建这些文件 夹。如果使用Dreamweaver创建本地站点,然后将全部内容上传到远程站点,则 Dreamweaver能确保在远程站点中精确复制本地结构。
站点的发布是一个持续的过程,这一过程的一个重要部分是定义并实现一个 版本控制系统,既可以使用Subversion,也可以使用外部的版本控制应用程序。
显示本地和远端站点
Dreamweaver CS6改善了 FTP 性能。利用对 jQuery Mobile 和 Adobe PhoneGap™ 框架的更新支持,可以便捷地建立移动应用程序。利用重新改良的 多线程 FTP 传输工具和图像编辑功能,可以有效地设计、开发并发布网站和移动 应用程序,节省上传大型文件的时间。
Dreamweaver cs6入门与提高实例教程课件Dreamweaver cs6入门与提高实例教程课件第4章处理文字与图形
插入图像占位符的效果
创建图像的效果
注意:与在“设计”视图中看到的图像占位符不同,在浏览器中查看图像占位 符时,不会显示占位符的名称和大小,而只显示占位符的替换文本。
4.2.5 设置图像属性
将图像插入文档之后,Dreamweaver会自动按照图像的大小显示,但在实际设 计中,往往需要对图像的一些属性进行调整,如大小、边框、位置、对齐等等。这 些操作可以通过如图所示的图像属性控制面板得以实现。
提示:“插入日期”对话框中显示的日期和时间不是当前日期,也不反映访问者 在查看站点时所看到的日期/时间。它们只是说明此信息的显示方式的示例。
4.1.5 插入特殊字符
在HTML中,一个特殊字符有两种表达方式,一种称作数字参考,另一种称作实 体参考。
所谓数字参考,就是用数字来表示文档中的特殊字符,通常由前缀“&#”加上数 值,再加上后缀“;”组成,其表达方式为:&#D;,其中D是一个十进制数值。
设置外部编辑器
4.2.7 插入鼠标经过图像
一个鼠标经过图像其实是由两张图片组成的:页面显示的图像和鼠标经过时 的图像。这两张图片应具有相同的尺寸,如果两张图片的尺寸不同, Dreamweaver CS6会自动将第二张图片的尺寸调整成第一张图片的尺寸。
鼠标经过前后的图像效果
4.2.8 导入Fireworks HTML
Fireworks中设计的切片图像
导入的Fireworks HTML文件
4.3 实例制作之插入日期时间
制作步骤如下: (1)新建一个HTML文档。 (2)单击“插入”栏上的表格图标按钮 ,打开“表格”对话框。在页面中插入
一个两行一列、宽度为200像素、边框为0的表格。 其中,第一行用于放置导航栏的图标和日期时间,第二行用于放置具体的导航项 目。在接下来的步骤中,为单元格设置背景图像。自Dreamweaver CS4开始,在 单元格的属性面板中已找不到“背景图像”选项了。如果要设置表格或单元格的 背景图像,需要使用CSS样式进行定义。
新媒体网页设计与制作—Dreamweaver CS6基础、案例、技巧实用教程课件第2章
2.5 网页文件的基本操作
2.5.2 保存网页
在Dreamweaver CS6中对文档进行编辑后,需要对 文档进行保存以备浏览和修改。选择【文件】/【保存】 命令,弹出【另存为】对话框,在【保存在】下拉列表 框中选择文档的保存位置,并在【文件名】下拉列表框 中输入网页名称,单击【保存】按钮,完成网页的保存。
预览网页
第2章 认识Dreamweaver CS6
本章学习要点: 1.Dreamweaver CS6的工作区 2.Dreamweaver CS6文档视图 3.网页的构成 4.网页设计方法
2.1 Dreamweaver CS6工作界面
2.1.1 界面布局
2.1.2 认识Dreamweaver CS6工作面板
2.2.2 简捷而高效的操作
• 改良的FTP 性能 • Business Catalyst 集成 • CSS3过渡效果 • Adobe BrowserLab集成 • 站点特定的代码提示
2.3 创建本地站点
Dreamweaver CS6对同一网站中的文件是以“站点” 为单位来进行有效组织和管理的,因此在创建网站之 前,首先需要创建一个本地站点,用于存储和管理网 站中的各种网页文档以及相关的资源等数据,使网站 设计者对网站的结构有一个整体的把握。
2.5.3 预览网页
对网页进行编辑后,如果想查看网页在浏览器中的 显示效果,可以通过以下方法实现预览: 1.选择【文件】/【在浏览器中预览】/【IExplore】。 2.单击文档工具栏的按钮。 3.按F12快捷键。
2.5.4 设置页面属性
选择【修改】/【页面属性】命令或单击【属性】面 板上的【页面属性】按钮,弹出【页面属性】对话框, 在窗口左侧的【分类】列表中选择相应类别后,在右侧 窗口对各属性进行详细设置,如下图所示:
【课件-计算机基础教学】_第6章 Dreamweaver CS6 网页制作_
● 代码视图:在代码视图中可以查看或编辑源代码 ● 拆分视图:编辑窗口分割成上下两部分,上半部分显示源
代码,下半部分显示网页设计外观,这样可以在编辑代码 的同时观看设计效果 ● 设计视图:为可视化编辑窗口,窗口中看到的网页外观和 浏览器中看到的基本是一样的,即“所见即所得”模式 ● 实时视图:显示不可编辑的、交互式的、基于浏览器的文 件视图
2020-8-11
9
7.1.1 Dreamweaver CS6工作界面
2. 面板
●比较常用的工具面板包括插入面板、文件面板、 CSS面板、历史记录面板、属性面板等
●除属性面板外,其他面板都在Dreamweaver窗口右 侧显示,统称为面板组
● 属性面板
● 属性面板可以检查和设置当前选定页面元素的属性
与蓝色搭配显得幽静
激奋的色彩,具有富丽、辉煌、轻快、温馨、
2020-8-11
7
7.1.1 Dreamweaver CS6工作界面
单击“新建”项目组中的“HTML”,进入 Dreamweaver工作界面
文件标签
菜单栏
文档工具栏
面板组
文档窗口
标签选择器 属性面板
2020-8-11
8
7.1.1 Dreamweaver CS6工作界面
1. 主菜单
●Dreamweaver CS6的菜单共有10大类,提供了全部 的Dreamweaver命令,包括“文件”、“编辑”、 “查看”、“插入”、“修改”、“格式”、“命 令”、“站点”、“窗口”和“帮助”等
2020-8-11
5
7.1 Dreamweaver CS6 概述
7.1.1 Dreamweaver CS6工作界面 7.1.2 网页与网站设计 7.1.3 创建和管理站点
代码,下半部分显示网页设计外观,这样可以在编辑代码 的同时观看设计效果 ● 设计视图:为可视化编辑窗口,窗口中看到的网页外观和 浏览器中看到的基本是一样的,即“所见即所得”模式 ● 实时视图:显示不可编辑的、交互式的、基于浏览器的文 件视图
2020-8-11
9
7.1.1 Dreamweaver CS6工作界面
2. 面板
●比较常用的工具面板包括插入面板、文件面板、 CSS面板、历史记录面板、属性面板等
●除属性面板外,其他面板都在Dreamweaver窗口右 侧显示,统称为面板组
● 属性面板
● 属性面板可以检查和设置当前选定页面元素的属性
与蓝色搭配显得幽静
激奋的色彩,具有富丽、辉煌、轻快、温馨、
2020-8-11
7
7.1.1 Dreamweaver CS6工作界面
单击“新建”项目组中的“HTML”,进入 Dreamweaver工作界面
文件标签
菜单栏
文档工具栏
面板组
文档窗口
标签选择器 属性面板
2020-8-11
8
7.1.1 Dreamweaver CS6工作界面
1. 主菜单
●Dreamweaver CS6的菜单共有10大类,提供了全部 的Dreamweaver命令,包括“文件”、“编辑”、 “查看”、“插入”、“修改”、“格式”、“命 令”、“站点”、“窗口”和“帮助”等
2020-8-11
5
7.1 Dreamweaver CS6 概述
7.1.1 Dreamweaver CS6工作界面 7.1.2 网页与网站设计 7.1.3 创建和管理站点
新媒体网页设计与制作PPT-Dreamweaver CS6基础、案例、技巧实用教程第1章
1.3.1 定位网站主题和名称 • 定位网站主题 :网站的题材和内容应紧扣
主题,要突出个性和特色。网站定位要准确, 内容要精练,题材不要太宽泛或者目标太高。
• 网站名称:网站名称最好使用中文,字数控
制在6个字以内,名称要见名知义,且能代表 本站特色。
1.3.2 网站风格
网站的风格是指网站的整体外观带给 用户的综合感受,包括版面布局、浏览方 式、交互性等诸多因素。
新媒体网页设计与制作
—Dreamweaver CS6基础、案例、技巧实用教
程
目录
第1章 网页设计基础 第2章 认识Dreamweaver CS6 第3章 制作绚丽多彩的网页 第4章 使用CSS样式美化网页 第5章 新媒体网页布局 第6章 网页中的超级链接 第7章 新媒体网页中的多媒体元素
目录
第8章 在新媒体网页中添加动态特效 第9章 站点风格的统一 第10章 表单 第11章 综合实训-家具联盟网站 第12章 创建移动设备网页及应用程序 第13章 站点的整理维护与上传
1.1.2 网页的基本要素
•LOGO •标题 •导航栏 •页眉 /页脚 •功能区 •主体内容
1.1.3 新媒体网页的设计元素
• 文字:是网页信息传递的主要手段。 • 图片 :用于提供信息、展示作品、装饰网
页等。 • 多媒体:包括音频、视频、动画等元素 。 • 互动:实现信息的远距离实时传递。 • 版式设计:“同”字型布局 、“国”字型布
1.2.1 色彩理论
在HTML中,颜色有3种表示方式 : • 十六进制的数 • 颜色常量 • rgb(r,g,b)
1.2.2 选择色彩
网页设计中,色彩的选择往往是和情 感联系在一起的,比如温暖、冷静或严肃 的情感。暖色能带来阳光明媚的情绪,让 人感觉到温暖,例如红色、黄色和橙色; 冷色可以表达出权威、明确和信任的感觉, 让人联想到凉爽和寒冷,例如蓝色,绿色 和紫色;中性色,只是给用户一种淡淡的 感受,没有过多的情绪,平静,淡然,像 灰色和棕色就是中性色。
主题,要突出个性和特色。网站定位要准确, 内容要精练,题材不要太宽泛或者目标太高。
• 网站名称:网站名称最好使用中文,字数控
制在6个字以内,名称要见名知义,且能代表 本站特色。
1.3.2 网站风格
网站的风格是指网站的整体外观带给 用户的综合感受,包括版面布局、浏览方 式、交互性等诸多因素。
新媒体网页设计与制作
—Dreamweaver CS6基础、案例、技巧实用教
程
目录
第1章 网页设计基础 第2章 认识Dreamweaver CS6 第3章 制作绚丽多彩的网页 第4章 使用CSS样式美化网页 第5章 新媒体网页布局 第6章 网页中的超级链接 第7章 新媒体网页中的多媒体元素
目录
第8章 在新媒体网页中添加动态特效 第9章 站点风格的统一 第10章 表单 第11章 综合实训-家具联盟网站 第12章 创建移动设备网页及应用程序 第13章 站点的整理维护与上传
1.1.2 网页的基本要素
•LOGO •标题 •导航栏 •页眉 /页脚 •功能区 •主体内容
1.1.3 新媒体网页的设计元素
• 文字:是网页信息传递的主要手段。 • 图片 :用于提供信息、展示作品、装饰网
页等。 • 多媒体:包括音频、视频、动画等元素 。 • 互动:实现信息的远距离实时传递。 • 版式设计:“同”字型布局 、“国”字型布
1.2.1 色彩理论
在HTML中,颜色有3种表示方式 : • 十六进制的数 • 颜色常量 • rgb(r,g,b)
1.2.2 选择色彩
网页设计中,色彩的选择往往是和情 感联系在一起的,比如温暖、冷静或严肃 的情感。暖色能带来阳光明媚的情绪,让 人感觉到温暖,例如红色、黄色和橙色; 冷色可以表达出权威、明确和信任的感觉, 让人联想到凉爽和寒冷,例如蓝色,绿色 和紫色;中性色,只是给用户一种淡淡的 感受,没有过多的情绪,平静,淡然,像 灰色和棕色就是中性色。
新媒体网页设计与制作—Dreamweaver CS6基础、案例、技巧实用教程课件第4章
4.1.1 认识【CSS样式】面板
css样式面板
4.1.2 CSS样式表分类
根据CSS样式表存放的位置以及其应用 范围,CSS样式表分为以下三种:
1.外部CSS 2.内部CSS 3.内联CSS
4.1.3 CSS基本语法
CSS格式设置规则由两部分组成:选择器和声明。 选择器需要标识已设置格式元素(如A标签、类名称、 ID或复合内容)的术语,而声明则用于定义样式元素。
➢应用CSS样式
对“a”标签重定义后,系统会自动应用到具有“a”标签,即具 有超级链接的网页元素上。
4.5 课堂案例—CSS应用
标签“a”的CSS规则定 义
4.5 课堂案例—CSS应用
(4)复合内容 本例定义了页面底部单元格的背景图像。 ➢定义样式 (1)新建CSS规则,【选择器类型】自动选择【复合内容(基于选择的 内容)】 (2)【选择器名称】自动输入“#tb tr #bot” (3)设置【背景】的【Background-image】属性为“images/bot.png”。 ➢应用样式
4.2SS样式代码添加到
“<head></head>”标签之间,并且用 “<style></style>”标签进行声明。
内部CSS样式即在【新建CSS规则】对话框中,选择【选 择器类型】,并输入或选择【选择器名称】,在【规则定 义】中选择“仅限该文档”选项 。
4.1.3 CSS基本语法
声明由属性和值两部分组成,中间使用半角英 文下的冒号“:”分隔 如 “.txt”类的定义: <head> <style type="text/css"> .txt {color: #FFF; background-color: #39C;
网页设计与制作Dreamweaver CS6标准教-ppt课件-01
3. 导航条 导航条是网站设计中最重要的元素之一,即表现了网站 的站点结构和内容分类,又方便了用户对网站的浏览。 4. 图像 Gif用于画面简单、细节信息少的图像,如背景图片,可 以减少图像文件的大小;Jpeg用于画面较为复杂、细部 信息多的图像;PNG用于有透明背景的图像。 一种是独立完整的图像,二是在Firework或Photoshop 中使用切片功能获得的图像。 5. 动画 网页设计中常用的动画有Gif动画和Flash动画。 6. 背景 使用合理能够增强页面的整体创意效果。
1. 结构布局 常用的结构布局方式包括“国”字型、拐角型、 上下框架和左右框架等类型。 2. 艺术布局 常用的平面艺术设计原则有分割、对称和平衡等。 总之,根据内容和栏目编排要求以及客户审美需 求,将各种典型结构灵活运用,将艺术设计原则 融会贯通,锐意创新,创作出结构布局合理,页 面精美的网页。
网页由三部分组成:结构(Structure)、表现 (Presentation)和行为(Behavior),相应 的技术标准由三个部分组成:结构化标准语言, CSS样式表和脚本语言。
1.3.1结构化语言 1.3.2CSS样式 1.3.3脚本语言 1.3.4ASP技术
结构化语言HTML(Hyper Text Markup Language,超文本标记语言) XHTML(eXtensible Hyper Text Markup Language,可扩展的超文本标记语言)是 HTML的升级版本。 超文本标记语言HTML5是将取代HTML4.01标 准和XHTML1.0标准的HTML标准版本。
2. RGB色彩模式和网页安全色 每种色彩都可以用红(R)、绿(G)、蓝(B)3种色彩按一 定的比例调和而成,这3种色彩被称为光的3原色 将在不同操作系统和浏览器中具有一致显示效果的颜 色定义为网络安全色,网络安全色有216种。在网页 设计软件中,任何颜色都有一个六位的十六进制编号, 如#D6D6D6,任何由00、33、66、99、CC或者FF 组合而成的颜色值,都表示一个Web安全色 3. 利用图像配色
《中文版Dreamweaver CS6网页制作案例教程》全册精讲PPT教学课件
4.域名
由于IP地址在使用过程中难于记忆和书写,一 种与IP地址对应的字符应运而生,这就是域名 (Domain Name)。每一个网站都有自己 的域名,并且域名是独一无二的。
5.网址
网址又叫URL,英文全称是“Uniform Resource Locator”,即统一资源定位符。 它是网络上通用的一种地址格式,用于标识 网页文件在网络中的位置。 一个完整的网址由通信协议名称、域名或IP 地址、网页在服务器中的路径和文件名4部 分组成。
(3)广告条
广告条又称Banner,其功能是宣传网站或 为其他商品做广告。 在制作Banner时,有以下几点需要注意。
• Banner可以是静态的,也可以是动态的。 • Banner的体积不宜过大,尽量使用GIF格式图 片与动画或Flash动画。 • Banner中的文字不要太多,只要达到一定的 提醒效果就可以。 • Banner中图片的颜色不要太多,尤其是GIF格 式的图片或动画。
2.网站
互联网起源于美国国防部高级研究计划管理 局建立的阿帕网。网站(Website)最初是 指在因特网上,根据一定规则,使用HTML 等语言制作的用于展示特定内容的相关网页 的集合。
3.网页的构成元素
我们可以将网页中的元素按功能分为站标、 导航条、广告条、标题栏和按钮等。
站标
导航条
广告条
标题栏
中文版Dreamweaver CS6
网页制作案例教程
项目一 网页制作基础知识
任务一 了解网页制作基础知识 任务二 创建“石市科干院”站点及欢迎首页
任务一 了解网页制作基础知识
任务描述
随着网络的飞速发展,各类公司、企事业单 位都相继建立了自己的网站。本任务主要了 解网页制作基础知识并欣赏优秀网站,从而 为制作优秀网页打下坚实的基础。
新媒体网页设计与制作—Dreamweaver CS6基础、案例、技巧实用教程课件第8章
8.2.3 打开浏览器窗口
打开浏览器窗口行为可以在打开一个页面时,同时 在一个新的窗口中打开指定的URL。用户可以根据情况 指定新窗口的大小、特性(包括导航工具栏、菜单条、 状态栏等)和名称
8.2.3 打开浏览器窗口
选中要附加行为的对象,单击【行为】面板中的“+” 按钮,从弹出的菜单中选择【打开浏览器窗口】命令, 弹出【打开浏览器窗口】对话框,如图所示。
8.2.12 课堂案例—为网页添加Spry效果
5.添加【遮帘】效果。单击【行为】面板中的按钮, 从弹出的菜单中选择【效果】/【遮帘】命令,弹出 【遮帘】对话框,属性设置如图所示。单击【确定】 按钮,在【行为】面板中设置事件为“onClick”。
8.2.12 课堂案例—为网页添加Spry效果
【遮帘】对话框
8.3 使用Spry折叠式构件
8.3.1 Spry选项卡式面板 Spry选项卡面板构件是一组面板,用来将内容
存储到紧凑的空间中。用户可以单击选项卡来隐藏或 显示存储在选项卡式面板中的内容,当用户单击不同 的选项卡时,构件的面板会相应的打开。在给定时间 内,选项卡面板构件中只有一个内容面板处于当前打 开状态。
8.2.7 设置文本
设置容器文本
8.2.7 设置文本
2.设置文本域文字 设置文本域文字可以实现用指定的内容替换表单文
本域的内容。 选中目标对象后,单击【行为】面板中的“+”按钮
,从弹出的菜单中选择【设置文本 】/【设置文本域文 字】命令,弹出【设置文本域文字】对话框,在【文本 域】下拉列表框中选择目标文本域,在【新建文本】文 本框中输入需要替代的文本即可,如图所示。
8.1.1 行为浮动面板
选择【窗口】/【行为】命令打开行为浮动面板,如 下图所示:
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
13.6.3
定义数据库连接
如果用户的网页服务器和Dreamweaver CS6运 行在同一个Windows系统上,那么就可以使用系 统DSN来创建数据库连接,DSN是指向数据库的 一个快捷方式。
13.6.4
制作发布留言页面
发布留言页面主要利用插入表单对象和【插入记 录】服务器行为来实现,如图13.64所示。
13.4.3
插入记录
一般来说,要通过ASP页面向数据库中添加记录, 需要提供用户输入数据的页面,利用 Dreamweaver CS6的【插入记录】服务器行为, 就可以向数据库中添加记录。
13.4.4
更新记录
选择菜单中的【窗口】|【服务器行为】命令, 打开【服务器行为】面板,在面板中单击+按钮, 在弹出菜单中选择【更新记录】选项,打开【更 新记录】对话框,如图13.36所示。
HTML文本是由HTML标签组成的描述性文本, HTML标签可以说明文字、图形、动画、声音、表 格、链接等。HTML的结构包括头部(Head)、主 体(Body)两大部分,其中头部描述浏览器所需的 信息,而主体则包含所要说明的具体内容。
HTML是HyperText Markup Language的缩写, 即超文本标记语言,这是创建网页的脚本语言,它 提供了精简而有力的文件定义,可以设计出多姿多 彩的超媒体文件,通过HTTP(Hyper Text Transfer Protocol)通信协议,使得HTML文件可 以在全球互联网(World Wide Web)上进行跨平 台的文件交换。
13.1.2 HTML的基本语法
超文本文档分为头部和主体两部分,在文档头部里, 对这个文档进行了一些必要的定义,文档主体中才 是显示的各种文档信息。
13.2
在Dreamweaver CS6中编写代码
对于客户端编码,可以在Dreamweaver中处理 多种文件类型,包括HTML、XML、层叠样式表 (CSS)、JavaScript、VBScript、无线标记语言 (WML)、扩展数据标记语言(EDML)、 Dreamweaver模板(.dwt)和文本等。
13.5.1
插入重复区域
【重复区域】服务器行为允许在页面中显示记录 集中的多条记录。任何动态数据都可以转变成重 复区域。
13.5.2
插入显示区域
选择菜单中的【窗口】|【服务器行为】命令, 打开【服务器行为】面板,在面板中单击+按钮, 在弹出的菜单中选择【显示区域】选项,在弹出 的子菜单中根据需要选择,如图13.40所示。
13.2.5
用标签检查器编辑标签
除了使用标签选择器编辑标签外,还可以使用标 签检查器在属性表中编辑标签,方法非常简单, 选择菜单中的【窗口】|【标签检查器】命令, 打开【标签检查器】面板,如图13.19所示。
13.3
建立数据库连接
任何内容的添加、删除、修改和检索都是建立在 连接基础上进行的,可以想像连接的重要性了。
13.5.5
转到相关页面
可以建立一个链接打开另一个页面而不是它的子 页面,并且传递信息到该页面,这种页面与页面 之间进行参数传递的两个页面,称为相关页。
13.5.6
用户身份验证
为了更能有效地管理共享资源的用户,需要规范 化访问共享资源的行为。
13.6
实战演练——创建留言系统
留言系统是网站与用户交流沟通的方式之一。当 客户浏览网页时,如果有什么需要,可以在留言 系统中给站点管理员留言。
13.4.5
删除记录
利用Dreamweaver的【删除记录】服务器行为, 可以在页面中实现删除记录的操作。删除记录的 页面执行两种不同的操作,首先显示已存在的数 据,用户可以选择将要被删除的数据;其次从数 据库中删除此记录以反映用户选择的记录被删除 的结果。
13.5
增加服务器行为
如果想显示从数据库中取得的多条或者所有记录, 则必须添加一条服务器行为,这样就会按要求连 续地显示多条或者所有的记录。
13.2.1
使用代码提示
通过代码提示,可以在代码视图中插入代码。
13.2.2
使用代码片段
使用代码片断,可以保存内容以便快速重复使用。
13.2.3
使用标签选择器插入标签
使用标签选择器可以将Dreamweaver标签库中 的任何标签插入页面中。
13.2.4
使用标签编辑器编辑标签
通过标签编辑器,可以使用对话框指定或编辑某 一标签的属性。
13.5.3
记录集分页
Dreamweaver CS6提供的【记录集分页】服务 器行为,实际上是一组将当前页面和目标页面的 记录集信息整理成URL地址参数的程序段。
13.5.4
转到详细页面
应用程序可以将信息或参数从一个页面传递到另 一个页面。要想让一个页面告诉另一个页面显示 什么记录或想把一个页面的信息传递到另一个页 面时,就要用到适当的服务器行为。
入留言Βιβλιοθήκη 统发布留言页面留言列表页面
显示留言页面
13.6.1
创建数据库
在制作具体网站功能页面前,首先做一个最重要 的工作,就是创建数据库表,用来存放留言信息 所用。
13.6.2
设置数据源ODBC
ODBC是数据库服务的一个标准协议,它向访问 网络数据库的应用程序提供一种通用语言。只要 系统中有相应的ODBC驱动程序,任何程序都可 以通过ODBC操纵数据库。
13.4
编辑数据表记录
动态网页最主要的就是结合后台数据库自动更新 Web页面,离开了数据库也就谈不上动态页面了。
13.4.1
了解记录集
将数据库用作动态网页的数据源时,必须首先创 建一个记录集。记录集在数据库和动态应用程序 页面之间起一种桥梁作用。
13.4.2
创建记录集
应用Dreamweaver CS6的绑定功能在 Dreamweaver CS6中定义一个记录集,以实现 网页读取数据的功能,只需要打开【绑定】面板, 在其中绑定指定的数据表,新增所需的记录集即 可。
13.6.5
制作留言列表页面
留言列表页面主要是利用创建记录集,定义重复 区域、绑定动态数据和转到详细页等服务器行为 来实现的,如图13.83所示。
13.6.6
制作显示留言页面
显示留言页面中的数据是从留言表中读取的,主 要利用Dreamweaver创建记录集,然后绑定相 关数据字段,如图13.106所示。
13.3.1
了解DSN
DSN(Data Source Name,数据源名称),表 示将应用程序和某个数据库建立连接的信息集合。
13.3.2
定义系统DSN
数据库建立好以后,需要设定系统的DSN(数据 源名称)来确定数据库所在的位置以及数据库相 关的属性。
13.3.3
建立系统DSN连接
数据源建立以后,接下来要定义这个网站使用的 数据库连接。只有如此,这个网站才能通过数据 库连接来存取数据库里的信息。
教学内容:动态网页就是根据访问者的请求, 由服务器生成的网页,访问者在发出请求后, 在服务器上获得生成的动态结果,并以网页形 式显示在浏览器中。
• • • • • •
教学重点 了解HTML基础 熟悉在Dreamweaver CS6中编写代码 掌握数据库连接的创建 掌握编辑数据表记录 掌握服务器行为的使用 掌握留言系统的创建