新媒体网页设计与制作PPT-Dreamweaver CS6基础、案例、技巧实用教程第1-2章
合集下载
网页设计与制作Dreamweaver CS6标准教-ppt课件-04
如果网页中有的图像不能正常显示（如图像 源文件路径错误或浏览器图像显示被关闭等） 就会导致浏览者看不到图像。使用图像【属 性】面板中的【替换】文本框，可以给看不 到的图像设置说明性文字。
图像占位符是指在将最终图像插入到网页中之前所使用的 替代图像，以便在不确定图像时对网页进行布局。图像占 位符可以设置不同尺寸、颜色和文字来替代图像。 插入图像占位符的步骤如下。 将光标置于要插入图像占位符的位置。 单击菜单【插入】|【图像对象】|【图像占位符】，打开 【图像占位符】对话框。 输入名称、宽度、高度、颜色等属性值，单击【确定】按 钮，插入图像占位符，通过适当调整，使其满足设计需求。 当需要插入真正的图片时，只需双击该位置的图形占位符， 在【选择图像源文件】对话框中找到并选择需要的图像，单 击【确定】按钮完成插入。
网站中的图像必须放在站点文件夹内才能在网 页中正确显示，所以在建立网站时要在站点文 件夹内建立一个专门存放该站点图像的文件夹， 通常命名为“images”，然后将网站所需的 图像都放置其中。
在Dreamweaver中，可以通过以下三种方法在网页 中插入图像。 （1）选择菜单【插入】|【图像】，在【选择图像源文 件】对话框中找到并选择所需的图像，单击【确定】按 钮完成图像插入。 （2）选择【插入】面板中【常用】选项卡，单击【图 像】按钮 上的黑色三角形，在下拉菜单中选择“图像” 选项，在【选择图像源文件】对话框中找到并选择所需 的图像，单击【确定】按钮完成图像插入。 （3）打开【文件】面板，展开显示图像文件夹中的所 有文件，在需要插入的图像名称上按住鼠标左键拖曳到 【文档】窗口的相应位置，松开鼠标，完成图像插入。
案例学习目标：学习在网页中使用插入插件方 式插入视频和背景音乐。 案例知识要点：使用【插入】面板的【媒体】| 【插件】按钮插入多媒体元素。 素材所在位置：光盘/案例素材/ch04/课堂案 例-瑜伽会所。 案例效果如图4-36所示。
新媒体网页设计与制作PPT-Dreamweaver CS6基础、案例、技巧实用教程第11章
11.3.5 制作网页主体
1．插入鼠标经过图像。将鼠标光标置于ID为“m1”的 DIV中， 选择【插入】/【图像对象】/【鼠标经过图像】 命令，在弹出的【插入鼠标经过图像】对话框中选择原始 图像为“images/fanzhuantuxiang/gm.png”，鼠标经过 图像为“images/fanzhuantuxiang/gm1.png”，按下时前 往的URL选择“images/guangming/guangm.png”。
本例的网页总体布局如图所示。
11.3.2 使用DIV+CSS布局网页结构
1． 插入DIV。 （1）插入网页容器DIV。首先将鼠标光标置于目标 位置，选择【插入】/【布局对象】/【DIV标签】命 令，插入一个名为“box”的DIV。
11.3.2 使用DIV+CSS布局网页结构
（2）插入其他DIV。将鼠标光标置于“box”内部， 分别插入名字分别为“logo”、“titl”、 “aboutus”、“menu”、“searc”、“picBox”、 “show”(包含嵌套DIV“list”和“ifr”，“list”中 包含嵌套DIV“m1”、“m2”和“m3”)、 “center”、“news”、“scroll”、“link”和 “bot”的DIV，如图所示。
11.3.2 使用DIV+CSS布局网页结构
(10) 新建ID为“list”的CSS规则。选中ID为“list”的DIV， 创建名为“#list”的ID CSS规则，属性设置如图所示。
11.3.2 使用DIV+CSS布局网页结构
(11)新建“m1”、“m2”和“m3”CSS规则。设置三个 DIV的属性值如图所示。
11.3.4 制作头部内容
4．插入菜单。将鼠标光标置于ID为“menu”的DIV中，选 择【插入】/【Spry】/【Spry菜单栏】命令，在弹出的【Spry 菜单栏】对话框中选择【水平】选项，编辑菜单项如图所示。
新媒体网页设计与制作—Dreamweaver CS6基础、案例、技巧实用教程课件第13章
选择【站点】/【报告】命 令，弹出【报告】对话框，可 以设置要报告的内容，如图所 示。
13.1.3 检查目标浏览器兼容性
浏览器的种类繁多，不同的浏览器浏览同一个网站时，网页的 显示效果可能会存在差异。因此，网站的兼容性是非常重要的。
选择【文件】/【检查页】/【浏览器兼容性】命令或单击工具 栏上的按钮，则显示【浏览器兼容性】面板，在该面板中会显示检 测结果信息，如图所示。
13.2.3 设置远程主机信息
如果要连接远程服务器，需要打开站点管理窗口， 单击工具栏上的按钮，打开远程站点和本地站点窗口， 如图所示。
13.2.3 设置远程主机信息
在远程服务器窗口单击“定义远程服务器”超级链接，打开 【站点设置对象Mysite】对话框，选择【服务器】，单击右侧服 务器列表下的按钮，弹出添加服务器对话框，添加主机服务提供 商提供的FTP登录主机地址，如图所示。
13.2.1 申请网站域名
13.2.1 申请网站域名
在域名查询区域输入“NewMediaWP”，单击【查 询】按钮，显示查询结果窗口，如图所示。
13.2.2 申请网站空间
有了属于自己的域名后，还需要有存放网站文件的 空间，即Internet服务器，用户可以根据网站的内容设置 以及发展前景来确软、硬件技术，将每台计算机分 成一台“虚拟”的主机，在“中国网格”网的【虚拟主 机】栏目下可以看到各种虚拟主机产品的相关信息。
本章学习要点：
1．链接的测试 2．检查浏览器兼容性 3．站点上传与更新
13.1 站点测试
在网站上传到Web服务器之前，应该先在本地站 点进行完整的测试，包括检测站点在各种浏览器中 的兼容性、站点中的错误、断裂的链接等等。
13.1.1 检查链接
一个网站由众多的网页组成，各个页面通过超 级链接建立联系，使整个网站成为一个有机的整体。 网页中的多数元素包括图像、声音、视频、CSS样 式等，都是以链接的形式链接到网页中进行显示。 如果网页中存在错误的链接，将影响整个站点的浏 览体验。
13.1.3 检查目标浏览器兼容性
浏览器的种类繁多，不同的浏览器浏览同一个网站时，网页的 显示效果可能会存在差异。因此，网站的兼容性是非常重要的。
选择【文件】/【检查页】/【浏览器兼容性】命令或单击工具 栏上的按钮，则显示【浏览器兼容性】面板，在该面板中会显示检 测结果信息，如图所示。
13.2.3 设置远程主机信息
如果要连接远程服务器，需要打开站点管理窗口， 单击工具栏上的按钮，打开远程站点和本地站点窗口， 如图所示。
13.2.3 设置远程主机信息
在远程服务器窗口单击“定义远程服务器”超级链接，打开 【站点设置对象Mysite】对话框，选择【服务器】，单击右侧服 务器列表下的按钮，弹出添加服务器对话框，添加主机服务提供 商提供的FTP登录主机地址，如图所示。
13.2.1 申请网站域名
13.2.1 申请网站域名
在域名查询区域输入“NewMediaWP”，单击【查 询】按钮，显示查询结果窗口，如图所示。
13.2.2 申请网站空间
有了属于自己的域名后，还需要有存放网站文件的 空间，即Internet服务器，用户可以根据网站的内容设置 以及发展前景来确软、硬件技术，将每台计算机分 成一台“虚拟”的主机，在“中国网格”网的【虚拟主 机】栏目下可以看到各种虚拟主机产品的相关信息。
本章学习要点：
1．链接的测试 2．检查浏览器兼容性 3．站点上传与更新
13.1 站点测试
在网站上传到Web服务器之前，应该先在本地站 点进行完整的测试，包括检测站点在各种浏览器中 的兼容性、站点中的错误、断裂的链接等等。
13.1.1 检查链接
一个网站由众多的网页组成，各个页面通过超 级链接建立联系，使整个网站成为一个有机的整体。 网页中的多数元素包括图像、声音、视频、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 设置页面属性
选择【修改】/【页面属性】命令或单击【属性】面 板上的【页面属性】按钮，弹出【页面属性】对话框， 在窗口左侧的【分类】列表中选择相应类别后，在右侧 窗口对各属性进行详细设置，如下图所示：
新媒体网页设计与制作PPT-Dreamweaver CS6基础、案例、技巧实用教程第1-4章
1.4.1 HTML5特性
• 语义特性 • 本地存储特性 • 设备兼容特性 • 连接特性 • 网页多媒体特性 • 三维、图形及特效特性 • 性能与集成特性 • CSS3特性
1.4.2 HTML5新增功能
• 取消了一些过时的HTML4标记 • 将内容和展示分离 • 表单元素的升级 • 新增audio 和video 标签 • 新增canvas标签 • 新增一些API（主要是供js使用的）
网页文件的基本操作21dreamweavercs6工作界面211界面布局212浮动面板插入面板212浮动面板文件面板和资源面板213属性检查器文本属性检查器表格属性检查器22dreamweavercs6的新功能和改进功能221针对智能手机和平板电脑的设计?强大的jquerymobile和phonegap支持?基于流体网格的css布局?支持css3和html5代码?更新的多屏幕预览面板222简捷而高效的操作?改良的ftp性能?businesscatalyst集成?css3过渡?站点特定的代码提示23创建本地站点dreamweavercs6对同一网站中的文件是以站点为单位来进行有效组织和管理的因此在创建网站之前首先需要创建一个本地站点用于存储和管理网站中的各种网页文档以及相关的资源等数据使网站设计者对网站的结构有一个整体的把握
1.3.1 定位网站主题和名称 • 定位网站主题 ：网站的题材和内容应紧扣
主题，要突出个性和特色。网站定位要准确， 内容要精练，题材不要太宽泛或者目标太高。
• 网站名称：网站名称最好使用中文，字数控
制在6个字以内，名称要见名知义，且能代表 本站特色。
1.3.2 网站风格
网站的风格是指网站的整体外观带给 用户的综合感受，包括版面布局、浏览方 式、交互性等诸多因素。
Dreamweaver_CS6完美网页制作基础、实例与技巧从入门到精通课件
网页又称HTML文件，是一种可以在WWW上传输， 能被浏览器认识和翻译成页面并显示出来的文件。
入
HTTP 请求 浏 览 器 HTTP 应答 所谓动态网页是指网页文件里包含了程序代码， 通过后台数据库与Web服务器的信息交互，由后 台数据库提供实时数据更新和数据查询服务。
1.2.3
导航栏
导航栏是网页的重要组成元素，它的任务是帮助浏 览者在站点内快速查找信息。好的导航系统应该能 引导浏览者浏览网页而不迷失方向。
1.2.4
文本
网页内容是网站的灵魂，网页中的信息也以文本为 主。无论制作网页的目的是什么，文本都是网页中 最基本的、必不可少的元素。
1.2.5
图像
图像在网页中具有提供信息、展示形象、装饰网页、 表达个人情趣和风格的作用。图像是文本的说明和 解释，在网页适当位置放置一些图像，不仅可以使 文本清晰易读，而且使得网页更加有吸引力。
1.1.2
什么是网站
网站是因特网上的一个信息集中点，可以通过域名 进行访问。网站要存储在独立服务器或者服务器的 虚拟主机上才能接受访问。
1.1.3 什么是Web服务器
Web服务器就是在Web站点上运行的应用程序， 用户只有把设计好的网页放到Web服务器上才能 被其他用户浏览。
1.1.4 什么是静态网页
教学内容：为了能够使网页初学者对网页设计 有个总体的认识，在设计制作网页前，首先介 绍网页设计的基础知识。
• • •
教学重点 了解网页的基本概念 熟悉网页的基本构成元素 熟悉网页设计常用工具
在学习网页设计之前，先来了解一下网页中的基本 概念。
Internet是一个全球性的计算机互联网络，中 文名称为“国际互联网”或“因特网”。它集现代 通信技术和现代计算机技术于一体，是计算机之间 进行国际信息交流和实现资源共享的良好手段。
网页设计与制作Dreamweaver CS6标准教-ppt课件-07
案例练习目标：练习设置CSS文字导航条。 案例操作要点： 1. 创建样式表文件dogclub并将所有CSS样 式存放其中。 2. 在导航条单元格中插入表格：行数列数均 为1，宽度为100%，ID标识为navi。输入导 航条文字“俱乐部介绍 会员注册 服务内容 图片展示 联系我们（中间留空格）”。
根据CSS样式所控制的网页元素不同，可以将 样式分为四种形式。 当所控制的网页元素是HTML语言中的某一个 特定的标签时，为此标签设置的CSS样式，称 为标签样式。 当把网页中或网站中若干元素归为一类，作为 一个整体来看待，为此类元素设置一个CSS样 式，称为类样式。
一个标签或元素在网站中的不同网页中，或在 一个网页中的不同位置上，外观效果不同，则 需要先为该特定标签赋予一个唯一的ID号，然 后，再为具有该ID号的标签设置样式，称此样 式为ID样式。 当设置若干个内容相同而名称不同样式时，或 者设置超级链接样式时，则可以使用复合样式。
7.5.1练习案例-航空旅游 7.5.2练习案例-狗狗俱乐部 7.5.3练习案例-鲜花店
案例练习目标：练习使用各种CSS样式。 案例操作要点： 1．打开文档index1.html，在导航条单元格 中插入表格：行数列数均为1，宽度为100%， ID标识为navi，并输入导航条文字“网站首 页 旅游计划 服务中心 联系我们（中间留空 格）”。 2．设置导航条复合样式#navi a:link， #navi a:visited属性，字体大小: 12px，颜 色为#666；设置#navi a:hover属性，颜色 为#999。
1. 2. 3. 4.
ቤተ መጻሕፍቲ ባይዱ
新媒体网页设计与制作PPT-Dreamweaver CS6基础、案例、技巧实用教程第10章
Dreamweaver CS6提供了一个Ajax的框架Spry，Spry 内置表单验证功能对于初学者来说非常实用和方便。Spry 验证文本域构件是一个文本域，该域用于在站点访问者输 入文本时判断文本域的合法或非法状态，例如有效或无效 等。验证文本域可以检测多个状态，用户可以在【属性】 检查器中根据检查结果来设置这些状态。
插入的跳转菜单如图所示。
10.3.6 插入按钮和图像域
表单按钮用于控制表单操作。使用表单按钮 能够将输入表单的数据提交到服务器或重置表单， 还可以将其他已经在脚本中定义的处理任务分配给 按钮。表单按钮可分为标准表单按钮和图片式表单 按钮，即图像域。
10.3.6 插入按钮和图像域
1．插入按钮 将鼠标光标置于表单域的指定位置，选择【插入】
第10章 表单
本章学习要点：
1．创建表单 2．插入表单对象 3．表单及表单对象属性的设置
第10章 表单
网页设计中的交互性是用户与服务器之间的交 互，通过页面设计为用户提供一个平等的交流平台， 交互体验设计成为新媒体网页吸引用户的重要因素， 这个功能主要由表单来实现。表单的作用是从访问 网站的用户处获得信息，如注册、登录等信息。
4．布局表格。根据需要合并单元格，并调整单元格宽度 和高度，输入文本信息，如图所示。 设 置 表 格 列 宽 分 别 为 “ 15%” 、 “ 35%” 、 “ 15%” 和 “35%”，设置“购物途径”下面一行的行高为“150”， “您的建议”行高为“90”，其他行行高均为“40”。
10.3.9 课堂案例—制作客户信息反馈表
的复选框。将鼠标光标置于表单的指定位置，选择【插入】/ 【表单】/【复选框组】命令，弹出【复选框组】对话框，在 该对话框可以设置复选框组的属性，如图所示。
插入的跳转菜单如图所示。
10.3.6 插入按钮和图像域
表单按钮用于控制表单操作。使用表单按钮 能够将输入表单的数据提交到服务器或重置表单， 还可以将其他已经在脚本中定义的处理任务分配给 按钮。表单按钮可分为标准表单按钮和图片式表单 按钮，即图像域。
10.3.6 插入按钮和图像域
1．插入按钮 将鼠标光标置于表单域的指定位置，选择【插入】
第10章 表单
本章学习要点：
1．创建表单 2．插入表单对象 3．表单及表单对象属性的设置
第10章 表单
网页设计中的交互性是用户与服务器之间的交 互，通过页面设计为用户提供一个平等的交流平台， 交互体验设计成为新媒体网页吸引用户的重要因素， 这个功能主要由表单来实现。表单的作用是从访问 网站的用户处获得信息，如注册、登录等信息。
4．布局表格。根据需要合并单元格，并调整单元格宽度 和高度，输入文本信息，如图所示。 设 置 表 格 列 宽 分 别 为 “ 15%” 、 “ 35%” 、 “ 15%” 和 “35%”，设置“购物途径”下面一行的行高为“150”， “您的建议”行高为“90”，其他行行高均为“40”。
10.3.9 课堂案例—制作客户信息反馈表
的复选框。将鼠标光标置于表单的指定位置，选择【插入】/ 【表单】/【复选框组】命令，弹出【复选框组】对话框，在 该对话框可以设置复选框组的属性，如图所示。
网页设计与制作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课件-03
页中的文字样式。 案例知识要点：使用CSS样式改变文本大小、颜 色、字体等样式。 素材所在位置：光盘/案例素材/ch03/课堂案例 -百货公司。 案例效果如图3-33所示。
Dreamweaver基于层叠样式表（CSS）对网 页进行设置，即事先定义好文本的CSS样式 再应用到文本上。定义的一个CSS样式可以 应用在多处文本上，要改变文本样式属性只 需修改CSS样式属性。
网页设计与制作 Dreamweaver CS6 标准教程
1. 页面属性 2. 文本属性 3. 项目列表和编号列表
网页页面属性主要包括网页标题、网页背景图 像和颜色、网页边距、网页默认文字大小和颜 色、超链接颜色等。可以通过菜单【修改】| 【页面属性】来进行设置和修改。
网页标题设置有两种方法。 （1）利用【页面属性】对话框 选择菜单【修改】|【页面属性】或点击文本 【属性】面板中的【页面属性】按钮。 单击【页面属性】对话框中【分类】栏中的 【标题/编码】，在【标题】文本框中输入页面 标题，如图3-22所示，单击【确定】完成设置。 （2）在文档工具栏【标题】文本框中，输入 页面标题文字完成设置。
网页背景可以填充为颜色，也可以填充为图像。更改 网页背景的操作步骤如下。 选择菜单【修改】|【页面属性】。 单击【页面属性】对话框【分类】栏中的【外观 （CSS）】，在右侧设置【背景颜色】、【背景图像】、 【重复】等选项。 【重复】选项下拉列表中，各选项含义如下。 no-repeat（不重复）：背景图像不重复。 repeat（重复）：背景图像在页面中重复。 repeat-x（重复-x）：背景图像在页面中横向重复。 repeat-y（重复-y）：背景图像在页面中纵向重复。 如果【重复】空白，默认为repeat。
网页设计与制作Dreamweaver CS6标准教-ppt课件-02
编辑站点可以重新设置站点的一些属性，操作 步骤如下。 选择菜单【站点】|【管理站点】，打开【管 理站点】对话框，选择要编辑的站点名称，如 webtest，单击编辑按钮图标 。 打开【站点设置对象webtest】对话框。经 过对各种设置修改后，单击【保存】按钮，返 回【管理站点】对话框。
Dreamweaver CS6提供了多文档的编辑界面，将多 个文档集中到一个窗口中，用户可以单击文档编辑窗 口上方选项卡的文件名切换到相应的文档，还可以按 住鼠标左键拖动选项卡改变文档的顺序。
站点是存放一个网站所有文件的场所，由若干文 件和文件夹组成。用户在开发网站前必须先建立 站点，便于组织和管理网站文件。
在Dreamweaver中删除站点，只是删除了 Dreamweaver同本地站点之间的关系。本地 站点中的文件夹和文件，仍然保存在硬盘原来 的位置上，没有被删除，也没有任何改变。 删除站点的操作步骤如下。 选择菜单【站点】|【管理站点】，打开【管 理站点】对话框，选择要删除的站点名称，单 击【删除】按钮。 在打开的【Dreamweaver】对话框中单击 【是】按钮，选中的站点就被删除，
建立站点以后，可以对站点进行打开、编辑、 复制和删除等各种操作。
2.3.1打开站点 2.3.2编辑站点 2.3.3复制站点 2.3.4删除站点
Dreamweaver允许建立多个站点，并可以通 过切换打开需要编辑的站点。打开站点的操作 步骤如下。 选择菜单【窗口】|【文件】或按<F8>键打 开【文件】面板，单击左边的下拉框，在下拉 列表中选择要打开的站点。 打开站点后，在【本地文件】下显示该站点 内的所有文件和文件夹。
网页设计与制作Dreamweaver CS6标准教-ppt课件-09
选择菜单【窗口】|【框架】，在【框架】面板中选 择框架后，在框架【属性】面板中设置框架的属性。
通常采用以下两种方法。 1．利用【文件】菜单 2．利用框架【属性】面板
利用框架将网页划分若干区域后，还要设置各个区 域中网页之间的链接关系。 在Dreamweaver中，为框架网页内的文本或其他 元素指定一个链接，不仅要指定一个链接文件，还 要设置链接目标以指明链接文习框架的基本操作。 案例知识要点：选择菜单【文件】|【新建】创建框 架，在【框架】面板中指定框架，并利用框架集 【属性】面板进行属性设置。 素材所在位置：光盘/案例素材/ch09/课堂案例婴幼儿健康网。 框架布局要求如图9-2所示，案例效果如图9-3所 示。
选择菜单【插入】|【HTML】|【框架】，在级联 子菜单中选择框架类型后，自动打开【框架标签辅 助功能属性】对话框，如图9-17所示，在该对话 框中可为各个框架命名，通常采用系统缺省的命名。
框架中的内容是网页文档，保存框架实际上就是保 存框架中的网页文档。在框架中完成页面制作后， 需要分别保存每个框架文档，还要保存框架集文档。
1. 保存框架文档 2. 保存框架集文档 3 .保存框架集中所有文档
1．利用【框架】面板选择 2．在【文档】窗口中选择框架集
修改框架大小通常采用以下两种方法。 （1）通过拖曳鼠标调整框架。 （2）在框架集【属性】面板中设置框架大小。
拆分框架通常采用以下两种方法。 （1）单击要拆分的框架内部，将光标置于 该框架中。选择菜单【修改】|【框架集】， 然后选择【拆分左框架】、【拆分右框架】、 【拆分上框架】、【拆分下框架】四个命令 完成框架的拆分。 （2）按住<Alt>键，利用鼠标拖曳边框线， 拆分框架。
新媒体网页设计与制作—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 行为浮动面板
选择【窗口】/【行为】命令打开行为浮动面板，如 下图所示：
新媒体网页设计与制作PPT-Dreamweaver CS6基础、案例、技巧实用教程第7章
具体操作步骤： 1．打开素材文件“example\chapter07\playmusic.html” 。 2．链接音乐文件。将鼠标光标置于网页第一幅图片下方
名为“text”的DIV中，选中“Yesterday Once More” 文本，在其【属性】检查器【链接】文本中输入 “music/Yesterday Once More.mp3”。
7.1.1 网页图像格式
虽然图像的文件格式很多，但并不是所有图像都适 用于网页，通常用于网页的格式有3种，即JPG格式、 GIF格式和PNG格式。 ➢JPG：联合图像专家组,也被称为JPEG。 ➢GIF：图像交换格式 。 ➢PNG：便携网络图像 。
7.1.2 插入图像
1．插入图像 选择【插入】/【图像】命令，弹出【选择图像源文
7.2.2 插入FLASH动画
在该对话框中设置FLASH标题、快速访问键和Tab 键索引，单击【确定】按钮完成FLASH动画的插入， 如图所示。
7.2.2 插入FLASH动画
2．设置FLASH动画 选中插入的FLASH动画文件，在【属性】检查器
中可以对宽、高等属性进行设置，如图所示。
7.2.3 插入FLASH 视频
7.1.5 课堂案例—插入鼠标经过图像
4．插入图像占位符。将鼠标光标置于“apDiv2”右 侧的名为“apDiv3”的第三个单元格中，选择【插 入】/【图像】/【图像占位符】命令，弹出【图像 占位符】对话框，设置图像占位符属性如图所示。
7.1.5 课堂案例—插入鼠标经过图像
单击【确定】按钮完 成图像的插入，如图所示。
7.4.4 课堂案例—制作默默音乐盒
3．嵌入音乐。将鼠标光标置于第二幅图片下方名为 “text1”的DIV中，选择【插入】/【媒体】/【插件】 命令，在弹出的【选择文件】对话框中打开站点的 “music”文件夹，选择“Go home.mp3”，单击 【确定】按钮。
名为“text”的DIV中，选中“Yesterday Once More” 文本，在其【属性】检查器【链接】文本中输入 “music/Yesterday Once More.mp3”。
7.1.1 网页图像格式
虽然图像的文件格式很多，但并不是所有图像都适 用于网页，通常用于网页的格式有3种，即JPG格式、 GIF格式和PNG格式。 ➢JPG：联合图像专家组,也被称为JPEG。 ➢GIF：图像交换格式 。 ➢PNG：便携网络图像 。
7.1.2 插入图像
1．插入图像 选择【插入】/【图像】命令，弹出【选择图像源文
7.2.2 插入FLASH动画
在该对话框中设置FLASH标题、快速访问键和Tab 键索引，单击【确定】按钮完成FLASH动画的插入， 如图所示。
7.2.2 插入FLASH动画
2．设置FLASH动画 选中插入的FLASH动画文件，在【属性】检查器
中可以对宽、高等属性进行设置，如图所示。
7.2.3 插入FLASH 视频
7.1.5 课堂案例—插入鼠标经过图像
4．插入图像占位符。将鼠标光标置于“apDiv2”右 侧的名为“apDiv3”的第三个单元格中，选择【插 入】/【图像】/【图像占位符】命令，弹出【图像 占位符】对话框，设置图像占位符属性如图所示。
7.1.5 课堂案例—插入鼠标经过图像
单击【确定】按钮完 成图像的插入，如图所示。
7.4.4 课堂案例—制作默默音乐盒
3．嵌入音乐。将鼠标光标置于第二幅图片下方名为 “text1”的DIV中，选择【插入】/【媒体】/【插件】 命令，在弹出的【选择文件】对话框中打开站点的 “music”文件夹，选择“Go home.mp3”，单击 【确定】按钮。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
新媒体网页设计与制作
—Dreamweaver CS6基础、案例、技巧实用教
程
目录
第1章 网页设计基础 第2章 认识Dreamweaver CS6 第3章 制作绚丽多彩的网页 第4章 使用CSS样式美化网页 第5章 新媒体网页布局 第6章 网页中的超级链接 第7章 新媒体网页中的多媒体元素
目录
第8章 在新媒体网页中添加动态特效 第9章 站点风格的统一 第10章 表单 第11章 综合实训-家具联盟网站 第12章 创建移动设备网页及应用程序 第13章 站点的整理维护与上传
1.3.1 定位网站主题和名称 • 定位网站主题 ：网站的题材和内容应紧扣
主题，要突出个性和特色。网站定位要准确， 内容要精练，题材不要太宽泛或者目标太高。
• 网站名称：网站名称最好使用中文，字数控
制在6个字以内，名称要见名知义，且能代表 本站特色。
1.3.2 网站风格
网站的风格是指网站的整体外观带给 用户的综合感受，包括版面布局、浏览方 式、交互性等诸多因素。
板，单击【桌面】下拉列表框，在弹出的列表中选 择【管理站点】，如下图所示：
2.4.2 编辑站点
在管理站点对话框中选择需要编辑的站点 “Myhome ”，打开【站点设置对象】对话 框，在打开窗口的右侧将【站点名称】修改为 “浪漫之旅”，如下图所示 。
2.4.2 编辑站点
2.4.2 编辑站点
编辑后的站点列表
2.3.4 编辑文件或文件夹
1．删除文件夹或文件 右键单击要删除的文件或文件夹，在弹出的快
捷菜单中选择【编辑】/【删除】命令，在确认对话 框中选择【是】按钮，如下图所示。
2.3.4 编辑文件或文件夹
2．重命名文件或文件夹 在【文件】面板中，右键单击要重命名
的文件或文件夹，在弹出的快捷菜单中选择 【编辑】/【重命名】命令，待重命名的文件 或文件夹在站点中名称以高亮方式显示时，用 户直接输入新的名称即可。
预览网页
钮 ，弹出【导入站点】对话框，如下图所示。 （2）选择需要导入的站点文件，并单击【打开】按钮，
完成站点文件的导入。
2.5 网页文件的基本操作
2.5.1 新建网页
打开Dreamweaver CS6，选择【文件】/【新建】 命令，在弹出的【新建文档】对话框中选择【空白 页】选项卡，在【页面类型】列表中选择 【HTML】，同时选择【布局】规划网页，最后选 择【文档类型】，单击【创建】按钮，完成网页的 创建，如下图所示。
2.4.3 复制站点
在管理站点窗口中选择“Mysite”站点，单击 窗口下方“复制当前选定的站点”按钮，在站点 列表中出现“Mysite 复制”站点，如下图所示。
2.4.4 删除站点
在【管理站点】对话框中，选择“古韵”站 点，单击按钮，弹出【删除站点】的提示对话 框，如下图所示。
2.4.5 导入和导出站点
1.4.1 HTML5特性
• 语义特性 • 本地存储特性 • 设备兼容特性 • 连接特性 • 网页多媒体特性 • 三维、图形及特效特性 • 性能与集成特性 • CSS3特性
1.4.2 HTML5新增功能
• 取消了一些过时的HTML4标记 • 将内容和展示分离 • 表单元素的升级 • 新增audio 和video 标签 • 新增canvas标签 • 新增一些API（主要是供js使用的）
2.6 课堂案例-设置网页页面属性
具体操作步骤： 1．打开素材“example\chapter02\booklist.html”
文件。 2．单击属性检查器上的【页面属性】按钮，打开
【页面属性】对话框。
2.6 课堂案例-设置网页页面属性
设置属性如下图所示：
2.6 课堂案例-设置网页页面属性
2.6 课堂案例-设置网页页面属性
1.2.3 搭配色彩
标准色彩是指能体现网站形象和 延伸内涵的色彩，不同的色彩搭配可 以产生不同的效果，并可能影响到访 问者的情绪。 •单一色 •相似色 •互补色
1.2.4 精彩网页赏析
IBM中国站
1.2.4 精彩网页赏析
可口可乐中国站
1.2.4 精彩网页赏析
何园网站
1.3 新媒体网站的策划与创建原则
2.3.4 编辑文件或文件夹
3．移动文件或文件夹 在【文件】面板中，右键单击要移动的文件或ቤተ መጻሕፍቲ ባይዱ
文件夹，在弹出的快捷菜单中选择【编辑】/【剪切】 命令，选择目标文件或文件夹并右键单击，在弹出 的快捷菜单中选择【编辑】/【粘贴】命令，完成移 动操作，如下图所示。
2.4 管理本地站点
2.4.1 打开站点 选择【窗口】/【文件】命令，打开【文件】面
2.1 Dreamweaver CS6工作界面
2.1.1 界面布局
2.1.2 浮动面板
【插入】面板
2.1.2 浮动面板
【文件】面板和【资源】面板
2.1.3 属性检查器
文本【属性】检查器 表格【属性】检查器
2.2 Dreamweaver CS6的新功能和 改进功能
2.2.1 针对智能手机和平板电脑的设计 • 强大的jQuery Mobile和PhoneGap支持 • 基于流体网格的CSS布局 • 支持CSS3和HTML5代码 • 更新的多屏幕预览面板
1.5 网站制作的基本流程
1.5.1 网站的前期策划 1.5.2 收集素材 1.5.3 规划站点 1.5.4 制作网页 1.5.5 测试并上传网站 1.5.6 网站的更新与维护
第2章 认识Dreamweaver CS6
本章学习要点： 1．Dreamweaver CS6的工作界面 2．Dreamweaver CS6文档视图 3．本地站点的创建和管理 4．网页文件的基本操作
2.5.3 预览网页
对网页进行编辑后，如果想查看网页在浏览器 中的显示效果，可以通过以下方法实现预览： 1．选择【文件】/【在浏览器中预览】/ 【IExplore】。 2．单击文档工具栏的按钮。 3．按F12快捷键。
2.5.4 设置页面属性
选择【修改】/【页面属性】命令或单击【属性】面 板上的【页面属性】按钮，弹出【页面属性】对话框， 在窗口左侧的【分类】列表中选择相应类别后，在右侧 窗口对各属性进行详细设置，如下图所示：
第1章 网页设计基础
本章学习要点： 1．网页和网站的基本概念 2．新媒体网站的色彩选择与搭配、
策划与创建原则 3．网站制作的基本流程
1.1 认识网页
1.1.1 网页与网站概念 • 静态网页：标准HTML文件。 • 动态网页：在发送到浏览器之前由
应用程序服务器自定义的网页。 • 网站：即网页的集合 。
1．导出站点 （1）在【站点管理】对话框中，选择“Mysite”站
点。 （2）单击按钮，弹出【导出站点】对话框。 （3）在【保存在】下拉列表框中选择保存文件路径，
在【文件名】下拉文本框中设置文件名为 “Mysite.ste”，如下图所示。
2.4.5 导入和导出站点
2.4.5 导入和导出站点
2．导入站点 （1）在【站点管理】对话框中，单击【导入站点】按
2.2.2 简捷而高效的操作
• 改良的FTP 性能 • Business Catalyst 集成 • CSS3过渡 • 站点特定的代码提示
2.3 创建本地站点
Dreamweaver CS6对同一网站中的文件是 以“站点”为单位来进行有效组织和管理的， 因此在创建网站之前，首先需要创建一个本 地站点，用于存储和管理网站中的各种网页 文档以及相关的资源等数据，使网站设计者 对网站的结构有一个整体的把握。
2.5 网页文件的基本操作
2.5.2 保存网页
在Dreamweaver CS6中对文档进行编辑后，需要对 文档进行保存以备浏览和修改。选择【文件】/【保存】 命令，弹出【另存为】对话框，在【保存在】下拉列表 框中选择文档的保存位置，并在【文件名】下拉列表框 中输入网页名称，单击【保存】按钮，完成网页的保存。
1.2.1 色彩理论
在HTML中，颜色有3种表示方式 ： • 十六进制的数 • 颜色常量 • rgb(r，g，b)
1.2.2 选择色彩
网页设计中，色彩的选择往往是和情 感联系在一起的，比如温暖、冷静或严肃 的情感。暖色能带来阳光明媚的情绪，让 人感觉到温暖，例如红色、黄色和橙色； 冷色可以表达出权威、明确和信任的感觉， 让人联想到凉爽和寒冷，例如蓝色，绿色 和紫色；中性色，只是给用户一种淡淡的 感受，没有过多的情绪，平静，淡然，像 灰色和棕色就是中性色。
局 、“T”型布局 、“三”字型布局 、对 比布局 、POP布局 、Flash布局 。
1.1.4 新媒体网页的布局方式
• 固定布局 • 流式布局 • 弹性布局 • 伸缩 • 响应式 • 自适应
1.2 新媒体网站的色彩选择与搭配
1.2.1 色彩理论 色彩是艺术表现的要素之一，是光刺激眼
睛传导到大脑中枢而产生的一种感觉。网页设 计师在决定了一个网站风格的同时也决定了网 站的情感，而情感的表达很大程度上取决于颜 色的选择。而网站给人的第一印象来自视觉冲 击，因此确定网站的标准色彩是新媒体网页设 计中最重要的一个方面。
1.3.3 网站的CI形象
所谓CI，是借用的广告术语，意思 是通过视觉来统一企业的形象。 •设计网站标志 •确定网站标准色彩 •确定网站标准字体 •设计网站的宣传标语
1.4 HTML5简介
HTML5 是定义 HTML 标准的最新的 版本，它既是一个新版本的HTML语言， 具有新的元素、属性和行为，还有更大的 技术集，允许更多样化和强大的网站和应 用程序。它不但强化了Web网页的表现性 能，还追加了本地数据库等 Web 应用的 功能。
2.3.1 站点管理器
选择【站点】/【管理站点】命令，进入【管 理站点】界面，如下图所示：
2.3.2 定义新站点
选择【窗口】/【文件】命令，打开【文 件】面板，在【桌面】下拉列表中选择“管理 站点”选项，如下图所示 。
—Dreamweaver CS6基础、案例、技巧实用教
程
目录
第1章 网页设计基础 第2章 认识Dreamweaver CS6 第3章 制作绚丽多彩的网页 第4章 使用CSS样式美化网页 第5章 新媒体网页布局 第6章 网页中的超级链接 第7章 新媒体网页中的多媒体元素
目录
第8章 在新媒体网页中添加动态特效 第9章 站点风格的统一 第10章 表单 第11章 综合实训-家具联盟网站 第12章 创建移动设备网页及应用程序 第13章 站点的整理维护与上传
1.3.1 定位网站主题和名称 • 定位网站主题 ：网站的题材和内容应紧扣
主题，要突出个性和特色。网站定位要准确， 内容要精练，题材不要太宽泛或者目标太高。
• 网站名称：网站名称最好使用中文，字数控
制在6个字以内，名称要见名知义，且能代表 本站特色。
1.3.2 网站风格
网站的风格是指网站的整体外观带给 用户的综合感受，包括版面布局、浏览方 式、交互性等诸多因素。
板，单击【桌面】下拉列表框，在弹出的列表中选 择【管理站点】，如下图所示：
2.4.2 编辑站点
在管理站点对话框中选择需要编辑的站点 “Myhome ”，打开【站点设置对象】对话 框，在打开窗口的右侧将【站点名称】修改为 “浪漫之旅”，如下图所示 。
2.4.2 编辑站点
2.4.2 编辑站点
编辑后的站点列表
2.3.4 编辑文件或文件夹
1．删除文件夹或文件 右键单击要删除的文件或文件夹，在弹出的快
捷菜单中选择【编辑】/【删除】命令，在确认对话 框中选择【是】按钮，如下图所示。
2.3.4 编辑文件或文件夹
2．重命名文件或文件夹 在【文件】面板中，右键单击要重命名
的文件或文件夹，在弹出的快捷菜单中选择 【编辑】/【重命名】命令，待重命名的文件 或文件夹在站点中名称以高亮方式显示时，用 户直接输入新的名称即可。
预览网页
钮 ，弹出【导入站点】对话框，如下图所示。 （2）选择需要导入的站点文件，并单击【打开】按钮，
完成站点文件的导入。
2.5 网页文件的基本操作
2.5.1 新建网页
打开Dreamweaver CS6，选择【文件】/【新建】 命令，在弹出的【新建文档】对话框中选择【空白 页】选项卡，在【页面类型】列表中选择 【HTML】，同时选择【布局】规划网页，最后选 择【文档类型】，单击【创建】按钮，完成网页的 创建，如下图所示。
2.4.3 复制站点
在管理站点窗口中选择“Mysite”站点，单击 窗口下方“复制当前选定的站点”按钮，在站点 列表中出现“Mysite 复制”站点，如下图所示。
2.4.4 删除站点
在【管理站点】对话框中，选择“古韵”站 点，单击按钮，弹出【删除站点】的提示对话 框，如下图所示。
2.4.5 导入和导出站点
1.4.1 HTML5特性
• 语义特性 • 本地存储特性 • 设备兼容特性 • 连接特性 • 网页多媒体特性 • 三维、图形及特效特性 • 性能与集成特性 • CSS3特性
1.4.2 HTML5新增功能
• 取消了一些过时的HTML4标记 • 将内容和展示分离 • 表单元素的升级 • 新增audio 和video 标签 • 新增canvas标签 • 新增一些API（主要是供js使用的）
2.6 课堂案例-设置网页页面属性
具体操作步骤： 1．打开素材“example\chapter02\booklist.html”
文件。 2．单击属性检查器上的【页面属性】按钮，打开
【页面属性】对话框。
2.6 课堂案例-设置网页页面属性
设置属性如下图所示：
2.6 课堂案例-设置网页页面属性
2.6 课堂案例-设置网页页面属性
1.2.3 搭配色彩
标准色彩是指能体现网站形象和 延伸内涵的色彩，不同的色彩搭配可 以产生不同的效果，并可能影响到访 问者的情绪。 •单一色 •相似色 •互补色
1.2.4 精彩网页赏析
IBM中国站
1.2.4 精彩网页赏析
可口可乐中国站
1.2.4 精彩网页赏析
何园网站
1.3 新媒体网站的策划与创建原则
2.3.4 编辑文件或文件夹
3．移动文件或文件夹 在【文件】面板中，右键单击要移动的文件或ቤተ መጻሕፍቲ ባይዱ
文件夹，在弹出的快捷菜单中选择【编辑】/【剪切】 命令，选择目标文件或文件夹并右键单击，在弹出 的快捷菜单中选择【编辑】/【粘贴】命令，完成移 动操作，如下图所示。
2.4 管理本地站点
2.4.1 打开站点 选择【窗口】/【文件】命令，打开【文件】面
2.1 Dreamweaver CS6工作界面
2.1.1 界面布局
2.1.2 浮动面板
【插入】面板
2.1.2 浮动面板
【文件】面板和【资源】面板
2.1.3 属性检查器
文本【属性】检查器 表格【属性】检查器
2.2 Dreamweaver CS6的新功能和 改进功能
2.2.1 针对智能手机和平板电脑的设计 • 强大的jQuery Mobile和PhoneGap支持 • 基于流体网格的CSS布局 • 支持CSS3和HTML5代码 • 更新的多屏幕预览面板
1.5 网站制作的基本流程
1.5.1 网站的前期策划 1.5.2 收集素材 1.5.3 规划站点 1.5.4 制作网页 1.5.5 测试并上传网站 1.5.6 网站的更新与维护
第2章 认识Dreamweaver CS6
本章学习要点： 1．Dreamweaver CS6的工作界面 2．Dreamweaver CS6文档视图 3．本地站点的创建和管理 4．网页文件的基本操作
2.5.3 预览网页
对网页进行编辑后，如果想查看网页在浏览器 中的显示效果，可以通过以下方法实现预览： 1．选择【文件】/【在浏览器中预览】/ 【IExplore】。 2．单击文档工具栏的按钮。 3．按F12快捷键。
2.5.4 设置页面属性
选择【修改】/【页面属性】命令或单击【属性】面 板上的【页面属性】按钮，弹出【页面属性】对话框， 在窗口左侧的【分类】列表中选择相应类别后，在右侧 窗口对各属性进行详细设置，如下图所示：
第1章 网页设计基础
本章学习要点： 1．网页和网站的基本概念 2．新媒体网站的色彩选择与搭配、
策划与创建原则 3．网站制作的基本流程
1.1 认识网页
1.1.1 网页与网站概念 • 静态网页：标准HTML文件。 • 动态网页：在发送到浏览器之前由
应用程序服务器自定义的网页。 • 网站：即网页的集合 。
1．导出站点 （1）在【站点管理】对话框中，选择“Mysite”站
点。 （2）单击按钮，弹出【导出站点】对话框。 （3）在【保存在】下拉列表框中选择保存文件路径，
在【文件名】下拉文本框中设置文件名为 “Mysite.ste”，如下图所示。
2.4.5 导入和导出站点
2.4.5 导入和导出站点
2．导入站点 （1）在【站点管理】对话框中，单击【导入站点】按
2.2.2 简捷而高效的操作
• 改良的FTP 性能 • Business Catalyst 集成 • CSS3过渡 • 站点特定的代码提示
2.3 创建本地站点
Dreamweaver CS6对同一网站中的文件是 以“站点”为单位来进行有效组织和管理的， 因此在创建网站之前，首先需要创建一个本 地站点，用于存储和管理网站中的各种网页 文档以及相关的资源等数据，使网站设计者 对网站的结构有一个整体的把握。
2.5 网页文件的基本操作
2.5.2 保存网页
在Dreamweaver CS6中对文档进行编辑后，需要对 文档进行保存以备浏览和修改。选择【文件】/【保存】 命令，弹出【另存为】对话框，在【保存在】下拉列表 框中选择文档的保存位置，并在【文件名】下拉列表框 中输入网页名称，单击【保存】按钮，完成网页的保存。
1.2.1 色彩理论
在HTML中，颜色有3种表示方式 ： • 十六进制的数 • 颜色常量 • rgb(r，g，b)
1.2.2 选择色彩
网页设计中，色彩的选择往往是和情 感联系在一起的，比如温暖、冷静或严肃 的情感。暖色能带来阳光明媚的情绪，让 人感觉到温暖，例如红色、黄色和橙色； 冷色可以表达出权威、明确和信任的感觉， 让人联想到凉爽和寒冷，例如蓝色，绿色 和紫色；中性色，只是给用户一种淡淡的 感受，没有过多的情绪，平静，淡然，像 灰色和棕色就是中性色。
局 、“T”型布局 、“三”字型布局 、对 比布局 、POP布局 、Flash布局 。
1.1.4 新媒体网页的布局方式
• 固定布局 • 流式布局 • 弹性布局 • 伸缩 • 响应式 • 自适应
1.2 新媒体网站的色彩选择与搭配
1.2.1 色彩理论 色彩是艺术表现的要素之一，是光刺激眼
睛传导到大脑中枢而产生的一种感觉。网页设 计师在决定了一个网站风格的同时也决定了网 站的情感，而情感的表达很大程度上取决于颜 色的选择。而网站给人的第一印象来自视觉冲 击，因此确定网站的标准色彩是新媒体网页设 计中最重要的一个方面。
1.3.3 网站的CI形象
所谓CI，是借用的广告术语，意思 是通过视觉来统一企业的形象。 •设计网站标志 •确定网站标准色彩 •确定网站标准字体 •设计网站的宣传标语
1.4 HTML5简介
HTML5 是定义 HTML 标准的最新的 版本，它既是一个新版本的HTML语言， 具有新的元素、属性和行为，还有更大的 技术集，允许更多样化和强大的网站和应 用程序。它不但强化了Web网页的表现性 能，还追加了本地数据库等 Web 应用的 功能。
2.3.1 站点管理器
选择【站点】/【管理站点】命令，进入【管 理站点】界面，如下图所示：
2.3.2 定义新站点
选择【窗口】/【文件】命令，打开【文 件】面板，在【桌面】下拉列表中选择“管理 站点”选项，如下图所示 。