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 设置页面属性设置页面属性 选择【修改】/【页面属性】命令或单击【属性】面板上的【页面属性】按钮，弹出【页面属性】对话框，在窗口左侧的【分类】列表中选择相应类别后，在右侧窗口对各属性进行详细设置，如下图所示：2.6 2.6 课堂案例课堂案例-设置网页页面属性设置网页页面属性具体操作步骤：1打开素材“examplechapter02booklist.html”文件。2单击属性检查器上的【页面属性】按钮，打开【页面属性】对话框。设置属性如下图所示：2.6 2.6 课堂案例课堂案例-设置网页页面属性设置网页页面属性2.6 2.6 课堂案例课堂案例-设置网页页面属性设置网页页面属性2.6 2.6 课堂案例课堂案例-设置网页页面属性设置网页页面属性预览网页
