新媒体网页设计与制作-Dreamweaver-CS6基础、案例、技巧实用教程第1-3章课件.ppt

1、目 录 第1章 网页设计基础 第2章 认识Dreamweaver CS6 第3章 制作绚丽多彩的网页 第4章 使用CSS样式美化网页 第5章 新媒体网页布局 第6章 网页中的超级链接 第7章 新媒体网页中的多媒体元素 目 录 第8章 在新媒体网页中添加动态特效 第9章 站点风格的统一 第10章 表单 第11章 综合实训-家具联盟网站 第12章 创建移动设备网页及应用程序 第13章 站点的整理维护与上传 第1章 网页设计基础本章学习要点：本章学习要点：1 1网页和网站的基本概念网页和网站的基本概念 2 2新媒体网站的色彩选择与搭配、新媒体网站的色彩选择与搭配、策划与创建原则策划与创建原则 3 3

2、网站制作的基本流程网站制作的基本流程1.1 1.1 认识网页认识网页1.1.1 1.1.1 网页与网站概念网页与网站概念 静态网页：静态网页：标准HTML文件。动态网页动态网页：在发送到浏览器之前由应用程序服务器自定义的网页。网站：即网页的集合。1.1.2 1.1.2 网页的基本要素网页的基本要素LOGO 标题 导航栏页眉/页脚 功能区 主体内容 1.1.3 1.1.3 新媒体网页的设计元素新媒体网页的设计元素 文字：是网页信息传递的主要手段。图片：用于提供信息、展示作品、装饰网 页等。多媒体：包括音频、视频、动画等元素。互动：实现信息的远距离实时传递。版式设计：“同”字型布局、“国”字型布局

3、、“T”型布局 、“三”字型布局、对比布局、POP布局、Flash布局。1.1.4 1.1.4 新媒体网页的布局方式新媒体网页的布局方式 固定布局 流式布局 弹性布局 伸缩 响应式 自适应 1.2 新媒体网站的色彩选择与搭配1.2.1 色彩理论 色彩是艺术表现的要素之一，是光刺激眼睛传导到大脑中枢而产生的一种感觉。网页设计师在决定了一个网站风格的同时也决定了网站的情感，而情感的表达很大程度上取决于颜色的选择。而网站给人的第一印象来自视觉冲击，因此确定网站的标准色彩是新媒体网页设计中最重要的一个方面。1.2.1 色彩理论在HTML中，颜色有3种表示方式：十六进制的数 颜色常量 rgb(r，g，b

4、)1.2.2 选择色彩 网页设计中，色彩的选择往往是和情感联系在一起的，比如温暖、冷静或严肃的情感。暖色能带来阳光明媚的情绪，让人感觉到温暖，例如红色、黄色和橙色；冷色可以表达出权威、明确和信任的感觉，让人联想到凉爽和寒冷，例如蓝色，绿色和紫色；中性色，只是给用户一种淡淡的感受，没有过多的情绪，平静，淡然，像灰色和棕色就是中性色。1.2.3 1.2.3 搭配色彩搭配色彩 标准色彩是指能体现网站形象和延伸内涵的色彩，不同的色彩搭配可以产生不同的效果，并可能影响到访问者的情绪。单一色 相似色 互补色 1.2.4 1.2.4 精彩网页赏析精彩网页赏析IBM中国站 1.2.4 1.2.4 精彩网页赏析

5、精彩网页赏析可口可乐中国站 1.2.4 1.2.4 精彩网页赏析精彩网页赏析何园网站1.3 1.3 新媒体网站的策划与创建原则新媒体网站的策划与创建原则1.3.1 定位网站主题和名称 定位网站主题：网站的题材和内容应紧扣主题，要突出个性和特色。网站定位要准确，内容要精练，题材不要太宽泛或者目标太高。网站名称：网站名称最好使用中文，字数控制在6个字以内，名称要见名知义，且能代表本站特色。1.3.2 1.3.2 网站风格网站风格 网站的风格是指网站的整体外观带给用户的综合感受，包括版面布局、浏览方式、交互性等诸多因素。1.3.3 1.3.3 网站的网站的CICI形象形象 所谓CI，是借用的广告术语

6、，意思是通过视觉来统一企业的形象。设计网站标志确定网站标准色彩确定网站标准字体 设计网站的宣传标语1.4 HTML51.4 HTML5简介简介 HTML5 是定义 HTML 标准的最新的版本，它既是一个新版本的HTML语言，具有新的元素、属性和行为，还有更大的技术集，允许更多样化和强大的网站和应用程序。它不但强化了Web网页的表现性能，还追加了本地数据库等 Web 应用的功能。1.4.1 HTML51.4.1 HTML5特性特性 语义特性 本地存储特性 设备兼容特性 连接特性 网页多媒体特性 三维、图形及特效特性 性能与集成特性 CSS3特性 1.4.2 HTML51.4.2 HTML5新增功

7、能新增功能 取消了一些过时的HTML4标记 将内容和展示分离 表单元素的升级 新增audio 和video 标签 新增canvas标签 新增一些API（主要是供js使用的）1.5 1.5 网站制作的基本流程网站制作的基本流程1.5.1 1.5.1 网站的前期策划网站的前期策划1.5.2 1.5.2 收集素材收集素材1.5.3 1.5.3 规划站点规划站点1.5.4 1.5.4 制作网页制作网页1.5.5 1.5.5 测试并上传网站测试并上传网站1.5.6 1.5.6 网站的更新与维护网站的更新与维护第第2 2章章 认识认识Dreamweaver CS6Dreamweaver CS6本章学习要点

8、：本章学习要点：1 1Dreamweaver CS6Dreamweaver CS6的工作界面的工作界面2 2Dreamweaver CS6Dreamweaver CS6文档视图文档视图3 3本地站点的创建和管理本地站点的创建和管理4 4网页文件的基本操作网页文件的基本操作 2.1 Dreamweaver CS62.1 Dreamweaver CS6工作界面工作界面2.1.1 界面布局界面布局2.1.2 2.1.2 浮动面板浮动面板 【插入】面板 2.1.2 2.1.2 浮动面板浮动面板【文件】面板和【资源】面板 2.1.3 2.1.3 属性检查器属性检查器文本【属性】检查器 表格【属性】检查器

9、 2.2 Dreamweaver CS62.2 Dreamweaver CS6的新功能和的新功能和改进功能改进功能2.2.1 2.2.1 针对智能手机和平板电脑的设计针对智能手机和平板电脑的设计 强大的jQuery Mobile和PhoneGap支持 基于流体网格的CSS布局 支持CSS3和HTML5代码 更新的多屏幕预览面板 2.2.2 2.2.2 简捷而高效的操作简捷而高效的操作 改良的FTP 性能 Business Catalyst 集成 CSS3过渡 站点特定的代码提示 2.3 2.3 创建本地站点创建本地站点 Dreamweaver CS6对同一网站中的文件是以“站点”为单位来进行有

10、效组织和管理的，因此在创建网站之前，首先需要创建一个本地站点，用于存储和管理网站中的各种网页文档以及相关的资源等数据，使网站设计者对网站的结构有一个整体的把握。2.3.1 站点管理器 选择【站点】/【管理站点】命令，进入【管理站点】界面，如下图所示：2.3.2 定义新站点 选择【窗口】/【文件】命令，打开【文件】面板，在【桌面】下拉列表中选择“管理站点”选项，如下图所示。2.3.3 2.3.3 创建文件或文件夹创建文件或文件夹 在【文件】面板中，右键单击站点根文件夹或任意一个文件夹，在弹出的快捷菜单中选择【新建文件】或【新建文件夹】命令，即在选定位置创建一个新的文件或文件夹。2.3.4 2.3

11、.4 编辑文件或文件夹编辑文件或文件夹1删除文件夹或文件 右键单击要删除的文件或文件夹，在弹出的快捷菜单中选择【编辑】/【删除】命令，在确认对话框中选择【是】按钮，如下图所示。2.3.4 2.3.4 编辑文件或文件夹编辑文件或文件夹2重命名文件或文件夹 在【文件】面板中，右键单击要重命名的文件或文件夹，在弹出的快捷菜单中选择【编辑】/【重命名】命令，待重命名的文件或文件夹在站点中名称以高亮方式显示时，用户直接输入新的名称即可。2.3.4 2.3.4 编辑文件或文件夹编辑文件或文件夹3移动文件或文件夹 在【文件】面板中，右键单击要移动的文件或文件夹，在弹出的快捷菜单中选择【编辑】/【剪切】命令，

12、选择目标文件或文件夹并右键单击，在弹出的快捷菜单中选择【编辑】/【粘贴】命令，完成移动操作，如下图所示。2.4 2.4 管理本地站点管理本地站点2.4.1 2.4.1 打开站点打开站点 选择【窗口】/【文件】命令，打开【文件】面板，单击【桌面】下拉列表框，在弹出的列表中选择【管理站点】，如下图所示：2.4.2 编辑站点 在管理站点对话框中选择需要编辑的站点“Myhome”，打开【站点设置对象】对话框，在打开窗口的右侧将【站点名称】修改为“浪漫之旅”，如下图所示。2.4.2 编辑站点2.4.2 编辑站点编辑后的站点列表2.4.3 2.4.3 复制站点复制站点 在管理站点窗口中选择“Mysite”

13、站点，单击窗口下方“复制当前选定的站点”按钮，在站点列表中出现“Mysite 复制”站点，如下图所示。2.4.4 2.4.4 删除站点删除站点 在【管理站点】对话框中，选择“古韵”站点，单击按钮，弹出【删除站点】的提示对话框，如下图所示。1导出站点（1）在【站点管理】对话框中，选择“Mysite”站点。（2）单击按钮，弹出【导出站点】对话框。（3）在【保存在】下拉列表框中选择保存文件路径，在【文件名】下拉文本框中设置文件名为“Mysite.ste”，如下图所示。2.4.5 导入和导出站点 2.4.5 导入和导出站点2导入站点（1）在【站点管理】对话框中，单击【导入站点】按钮，弹出【导入站点】对

14、话框，如下图所示。（2）选择需要导入的站点文件，并单击【打开】按钮，完成站点文件的导入。2.4.5 导入和导出站点2.5 2.5 网页文件的基本操作网页文件的基本操作2.5.1 2.5.1 新建网页新建网页 打开Dreamweaver CS6，选择【文件】/【新建】命令，在弹出的【新建文档】对话框中选择【空白页】选项卡，在【页面类型】列表中选择【HTML】，同时选择【布局】规划网页，最后选择【文档类型】，单击【创建】按钮，完成网页的创建，如下图所示。2.5 2.5 网页文件的基本操作网页文件的基本操作2.5.2 2.5.2 保存网页保存网页 在Dreamweaver CS6中对文档进行编辑后，

15、需要对文档进行保存以备浏览和修改。选择【文件】/【保存】命令，弹出【另存为】对话框，在【保存在】下拉列表框中选择文档的保存位置，并在【文件名】下拉列表框中输入网页名称，单击【保存】按钮，完成网页的保存。2.5.3 2.5.3 预览网页预览网页 对网页进行编辑后，如果想查看网页在浏览器中的显示效果，可以通过以下方法实现预览：1选择【文件】/【在浏览器中预览】/【IExplore】。2单击文档工具栏的按钮。3按F12快捷键。2.5.4 2.5.4 设置页面属性设置页面属性 选择【修改】/【页面属性】命令或单击【属性】面板上的【页面属性】按钮，弹出【页面属性】对话框，在窗口左侧的【分类】列表中选择相

16、应类别后，在右侧窗口对各属性进行详细设置，如下图所示：2.6 2.6 课堂案例课堂案例-设置网页页面属性设置网页页面属性具体操作步骤：1打开素材“examplechapter02booklist.html”文件。2单击属性检查器上的【页面属性】按钮，打开【页面属性】对话框。设置属性如下图所示：2.6 2.6 课堂案例课堂案例-设置网页页面属性设置网页页面属性2.6 2.6 课堂案例课堂案例-设置网页页面属性设置网页页面属性2.6 2.6 课堂案例课堂案例-设置网页页面属性设置网页页面属性预览网页第3章 制作绚丽多彩的网页本章学习要点：本章学习要点：1 1页面属性的设置页面属性的设置2 2网页文

17、本对象的添加网页文本对象的添加3 3文本格式的设置文本格式的设置4 4特殊字符的插入特殊字符的插入3.1 3.1 网页文本的基本操作网页文本的基本操作 3.1.1 3.1.1 输入文本输入文本 1 1直接输入文本直接输入文本 2 2复制文本复制文本 3 3导入文本导入文本3.1.2 3.1.2 设置文本属性设置文本属性 文本属性的设置主要有【HTML】和【CSS】两种不同的方式，它们分别采用不同的方式实现对文本的格式设置，其包含的设置项也有所不同。通过单击【属性】检查器左侧的和进行切换。3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作具体操作步骤：1录入网页文本（1）打开素材文

18、件“examplechapter03index.html”，如下图所示。3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作（2）定义页脚。将鼠标光标定位到页脚编辑区域，输入文本“版权所有 Copyright 2018 WuYunYoGa All Rights Reserved.”，如下图所示：（3）复制文本。打开素材文件“examplechapter03yoga.doc”，选取要复制的文本信息，选择【复制】命令或按“Ctrl+C”组合键。（4 4）粘贴文本。返回）粘贴文本。返回DreamweaverDreamweaver文档中，鼠标光标文档中，鼠标光标定位到主设计窗口的中间区域，

19、执行【粘贴】命令或按定位到主设计窗口的中间区域，执行【粘贴】命令或按“Ctrl+V”Ctrl+V”组合键，将文本粘贴到网页文档中，如下图组合键，将文本粘贴到网页文档中，如下图所示：所示：3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作（5）导入文本。将鼠标光标定位到主设计窗口的左侧位置，执行【文件】/【导入】/【Excel文档】命令，选择“menu1.xls”文档，完成文本的导入操作，如下图所示：3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作（6）设置嵌套表格宽度。单击“分类列表”中任意一个单元格

20、边线，选中整个表格，在【属性】检查器中设置表格属性【宽】的值为“100”，单位选择“%”。3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作2设置文本格式及属性（1）设置页面属性。单击【属性】检查器中的【页面属性】按钮，设置【页面字体】为“楷体”，【大小】为“14pt”，如下图所示：3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作（2）设置标题。选择左侧列表文本“分类列表”，选择属性检查器上的按钮，在【格式】中选择“标题3”。（3）设置文本样式。选中“分类列表”下的文本“传统瑜伽”，选择【格式】/【样式】/【代码】，再选择【格式】/【样式】/【粗体】命令，然后设置

21、列表中的其他项目执行同样的操作，如下图所示。3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作（4）设置特殊文本样式。选中文档主设计区域中间部分，即瑜伽内容介绍的开头文字“瑜伽”二字，即瑜伽内容介绍的开头文字“瑜伽”二字，选择按钮，设置文字【大小】为“30pt”，如下图所示。3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作设置“.First”CSS样式文本样式效果，如下图所示：3.2 3.2 设置文本换行与段落版式设置文本换行与段落版式3.2.1 3.2.1 强制文本换行强制文本换行 1换行：标签 2分段：标签 3.2.2 3.2.2 设置段落对齐设置段落对齐 段

22、落文本的对齐在网页布局中十分重要，在Dreamweaver CS6中，提供了“左对齐”、“居中对齐”、“右对齐”和“两端对齐”4种对齐方式。3.2.3 课堂案例设置段落样式具体操作步骤：1设置文本换行。打开素材文件“examplechapter03index.html”，将鼠标光标定位到主设计窗口中间区域“瑜伽源于古印度”之前，同时按下“Shitf+Enter”快捷键，使文本换行。2设置段落。将鼠标光标定位到“瑜伽姿势运用古老而易于掌握的技巧”文本之前，按下“Enter”键，将文本划分成两个段落，如下图所示：3.2.3 课堂案例设置段落样式3.2.3 课堂案例设置段落样式3设置文本的对齐方式。

23、将鼠标光标定位到页脚处文本中，单击【属性】检查器中的居中对齐按钮，设置页脚文本居中对齐，如下图所示。3.3 3.3 创建列表创建列表 列表是指将具有相似特性或某种顺序的文本进行有规则的排列，是网页中最常见的一种文本排列方式，常用于为文档设置自动编号、项目符号等格式信息。3.3.1 创建定义列表 定义列表也称作列表，因为它同字典具有相同的格式。在定义列表中，每个列表项带有一个缩进的字段，就好像字典对文字进行解释一样。选中需要创建定义列表的段落文本，选择【格式】/【列表】/【定义列表】命令，即可创建一个定义列表，如下图所示。3.3.2 3.3.2 创建项目列表创建项目列表 项目列表前面一般用项目符

24、号作为前导字符，并且列表项目前的项目符号相同，各列表项之间是平行的关系。将鼠标光标置于目标位置，选中需要创建项目列表的段落文本，选择【格式】/【列表】/【项目列表】命令，即可创建一个项目列表，如下图所示。3.3.3 3.3.3 创建编号列表创建编号列表 编号列表前面通常有数字前导字符，这些字符可以是英文字母、阿拉伯数字或罗马数字等。选中需要创建编号列表的段落文本，选择【格式】/【列表】/【编号列表】命令，即可创建一个编号列表，如下图所示。在创建了项目列表或编号列表后，如果需要改变列表样式，可以将鼠标光标定位到任意一个项目列表或编号列表的段落中，选择【格式】/【列表】/【属性】命令，打开【列表属

25、性】对话框，如下图所示。3.3.4 3.3.4 设置列表样式设置列表样式 3.3.4 设置列表样式 1设置项目列表样式3.3.4 设置列表样式 2设置编号列表样式1设置文本缩进 选中需要设置段落缩进的文本，单击【属性】检查器左侧的按钮，切换到【HTML】分类属性检查器中，单击【缩进】按钮，可增加所选文本的段落缩进；单击【凸出】按钮，即可减少所选文本的段落缩进。3.3.5 3.3.5 设置文本缩进格式设置文本缩进格式2设置嵌套列表 选中需要设置段落缩进列表的项目，单击【属性】检查器中的【缩进】按钮，使指定列表向右缩进并创建一个单独的列表，以形成不同级的子列表项。然后，对缩进的文本应用新的列表样式

26、或类型即可。如下图所示。3.3.5 3.3.5 设置文本缩进格式设置文本缩进格式3.3.5 3.3.5 设置文本缩进格式设置文本缩进格式3.3.6 3.3.6 课堂案例课堂案例创建段落与列表创建段落与列表具体操作步骤：1设置段落。打开素材文件“examplechapter03index.html”，将鼠标光标定位到主设计窗口中间区域段落文本的开头两字“瑜伽”之后，输入“Enter”，创建了两个新的段落，如下图所示。3.3.6 3.3.6 课堂案例课堂案例创建段落与列表创建段落与列表2创建定义列表。选中刚刚创建的两个段落，选择【插入】/【HTML】/【文本对象】/【定义列表】命令，效果如下图所示

27、。3.3.6 3.3.6 课堂案例课堂案例创建段落与列表创建段落与列表 3设置文本及段落。在主设计窗口右侧输入几段文本，并将窗口中间的第二个段落设置成多个段落，如下图所示。3.3.6 3.3.6 课堂案例课堂案例创建段落与列表创建段落与列表 4创建项目列表。选中主设计窗口中间新建的所有段落，单击【属性】检查器中的项目列表按钮，创建新的项目列表，预览结果如下图所示。5创建编号列表。选中主窗口右侧“瑜伽新闻”下的所有段落，单击【属性】检查器中的编号列表按钮，创建新的编号列表，如下图所示。3.3.6 3.3.6 课堂案例课堂案例创建段落与列表创建段落与列表6创建嵌套列表。将鼠标光标放在2级项目列表或

28、编号列表文本的任意位置，单击【属性】检查器上的缩进按钮，完成文本的缩进。如果要返回上级列表，通过单击凸出按钮返回。7修改列表样式。将鼠标光标定位到编号列表的第3项，单击【属性】检查器上的【列表项目】按钮，打开【列表属性】对话奇框，选择【样式】为“大写罗马字母”，如下图所示。3.3.6 3.3.6 课堂案例课堂案例创建段落与列表创建段落与列表效果如下图所示。将鼠标光标置于目标位置，选择【插入】/【日期】命令，弹出【插入日期】对话框，可以选择【星期格式】、【日期格式】和【时间格式】，如下图所示。3.4 3.4 插入日期插入日期3.5 3.5 插入水平线插入水平线 将鼠标光标置于目标位置，选择【插入

29、】/【HTML】/【水平线】命令，即可在指定位置插入一条水平线。选中水平线，可以通过【属性】检查器对水平线进行属性设置，如下图所示。3.6 3.6 插入特殊字符插入特殊字符 将鼠标光标置于目标位置，选择【插入】/【HTML】/【特殊字符】/【其他字符】命令，弹出【插入其他字符】对话框，如图所示，选择相应的字符即可在指定位置插入一个特殊字符。3.7 输入连续的空格 选择【插入】/【HTML】/【特殊字符】/【不换行空格】命令。单击【插入】浮动面板的【文本】面板，选择【字符】命令，在弹出的列表中选择【不换行空格】。通过同时按下“Ctrl+Shitf+Space”快捷键插入。3.8 课堂案例插入其它文本1插入日期。2插入水平线。3.8 课堂案例插入其它文本 3设置水平线颜色。3.8 课堂案例插入其它文本 4插入特殊字符。5插入不换行空格。