新媒体网页设计与制作PPT-Dreamweaver CS6基础、案例、技巧实用教程第1-2章

格式：ppt
大小：3.71 MB
文档页数：54

下载文档原格式

网页设计与制作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样式等，都是以链接的形式链接到网页中进行显示。如果网页中存在错误的链接，将影响整个站点的浏览体验。

新媒体网页设计与制作—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 课堂案例—制作客户信息反馈表
的复选框。将鼠标光标置于表单的指定位置，选择【插入】/ 【表单】/【复选框组】命令，弹出【复选框组】对话框，在该对话框可以设置复选框组的属性，如图所示。

网页设计与制作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。

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 定义新站点
选择【窗口】/【文件】命令，打开【文件】面板，在【桌面】下拉列表中选择“管理站点”选项，如下图所示。