描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787302491897丛书名: 网站开发案例课堂
本书特色
零基础、入门级的讲解
无论您是否从事计算机相关行业，无论您是否接触过Dreamweaver Flash Photoshop网页设计和动态网站开发，都能从本书中找到适合的起点。
超多、实用、专业的范例和项目
本书在编排上紧密结合深入学习网页制作技术的先后过程，从网页设计的基本概念开始，带领大家逐步深入地学习各种应用技巧，侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者读起来简明轻松，操作起来有章可循。
随时检测自己的学习成果
大部分章末均设置了“疑难解惑”板块，从而帮助读者解决自学过程中常见的疑难问题。
细致入微、贴心提示
本书在讲解过程中，在各章中使用了“注意”“提示”“技巧”等小贴士，使读者在学习过程中更清楚地了解相关操作、理解相关概念，并轻松掌握各种操作技巧。
专业创作团队和技术支持
您在学习过程中遇到任何问题，可加入QQ群(案例课堂VIP)进行提问，专家人员会在线答疑。
超值资源大放送
全程同步教学录像
涵盖本书所有知识点，详细讲解每个实例和项目的过程及技术关键点。比看书更能轻松地掌握书中所有动态网站开发的知识，而且扩展的讲解部分可使您得到比书中更多的收获。
超多容量资源
赠送大量资源，包括本书实例源代码、教学幻灯片、本书精品教学视频、88个实用类网页模板、12部网页开发必备参考手册、11个精彩JavaScript案例、Dreamweaver CC快捷键速查手册、HTML标记速查表、精彩网站配色方案赏析、网页样式与布局案例赏析、CSS Div布局赏析案例、Web前端工程师常见面试题等。读者可以通过QQ群(案例课堂VIP)获取赠送资源，也可以扫描二维码，下载本书资源。
《Dreamweaver CC Flash CC Photoshop CC网页设计案例课堂(第2版)》以零基础讲解为宗旨，用实例引导读者深入学习，采取“基础入门→网页内容设计→网页元素设计→网页动画设计→项目开发”的讲解模式，深入浅出地讲解网页设计的各项技术及实战技能。
《Dreamweaver CC Flash CC Photoshop CC网页设计案例课堂(第2版)》第1篇“基础入门”主要内容包括网页设计与网站建设基础、网页配色与网站布局等；第2篇“网页内容设计”主要内容包括使用Dreamweaver CC创建站点、使用文本丰富网页内容、使用图像与多媒体网页元素、设计网页中的超链接、使用网页表单和行为等；第3篇“网页元素设计”主要内容包括调整与修饰图像、制作网页特效文字、制作网页按钮与导航条、制作网页特效边线与背景、制作网页Logo与网页Banner等；第4篇“网页动画设计”主要内容包括制作简单网页动画元素、使用元件和库、创建交互式动画、制作动态网站的Logo与Banner、Flash动画的测试与发布等；第5篇“项目开发”主要内容包括使用CSS层叠样式表、利用Div CSS布局网页、构建动态网站的运行环境、使用MySQL数据库、开发网站用户管理系统等。
《Dreamweaver CC Flash CC Photoshop CC网页设计案例课堂(第2版)》赠送了12种超值的王牌资源。包括本书实例源代码、教学幻灯片、本书精品教学视频、88个实用类网页模板、12部网页开发必备参考手册、11个精彩JavaScript案例、Dreamweaver CC快捷键速查手册、HTML标记速查表、精彩网站配色方案赏析、网页样式与布局案例赏析、CSS Div布局赏析案例、Web前端工程师常见面试题等。
《Dreamweaver CC Flash CC Photoshop CC网页设计案例课堂(第2版)》面向初、中级用户，适合任何想学习用Dreamweaver Flash Photoshop设计网页的人员，无论您是否从事计算机相关行业，无论您是否接触过Dreamweaver Flash Photoshop，通过学习本书均可快速掌握用Dreamweaver Flash Photoshop设计网页和开发动态网站的方法及技巧。
目 录第1篇 基 础 入 门第1章 开启网页设计之路——网页设计与网站建设基础 31.1 认识网页和网站 41.1.1 什么是网页 41.1.2 什么是网站 51.1.3 网站的种类和特点 51.2 网页的相关概念 71.2.1 因特网与万维网 71.2.2 浏览器与HTML 71.2.3 URL、域名与IP地址 81.2.4 上传和下载 81.3 网页的HTML构成 91.3.1 文档标记 91.3.2 头部标记 101.3.3 主体标记 101.4 HTML的常用标记 111.4.1 标题标记 111.4.2 段落标记 111.4.3 换行标记 121.4.4 链接标记 131.4.5 列表标记 141.4.6 图像标记 171.4.7 表格标记 191.4.8 表单标记 211.5 综合案例——制作日程表 221.6 疑难解惑 25第2章 整体把握网站结构——网页配色与网站布局 272.1 善用色彩设计网页 282.1.1 认识色彩 282.1.2 确定网站的主题色 292.1.3 网页中色彩的搭配 312.1.4 网页元素的色彩搭配 322.1.5 网页色彩搭配的技巧 342.2 常见网站的布局结构 362.2.1 “国”字型 362.2.2 标题正文型 372.2.3 左右框架型 372.2.4 上下框架型 372.2.5 综合框架型 382.2.6 封面型 382.2.7 Flash型 382.3 综合案例——定位网站页面的框架 392.4 疑难解惑 40
第2篇 网页内容设计
第3章 磨刀不误砍柴工——使用Dreamweaver CC创建站点 433.1 认识Dreamweaver CC 443.1.1 启动Dreamweaver CC 443.1.2 认识Dreamweaver CC的工作区 453.1.3 体验Dreamweaver CC的新增功能 473.2 创建站点 503.2.1 案例1——创建本地站点 503.2.2 案例2——创建远程站点 513.3 管理站点 523.3.1 案例3——打开站点 523.3.2 案例4——编辑站点 523.3.3 案例5——删除站点 533.3.4 案例6——复制站点 543.3.5 案例7——导出与导入站点 543.4 操作站点文件及文件夹 553.4.1 案例8——创建文件夹 563.4.2 案例9——创建文件 563.4.3 案例10——文件或文件夹的移动和复制 573.4.4 案例11——删除文件或文件夹 573.5 综合案例——创建本地站点 583.6 疑难解惑 59第4章 制作我的第一个网页——使用文本丰富网页内容 614.1 网页文档的基本操作 624.1.1 案例1——创建网页 624.1.2 案例2——页面属性 624.1.3 案例3——保存网页 644.1.4 案例4——打开网页 654.1.5 案例5——预览网页 664.2 添加网页内容 674.2.1 案例6——插入文字 674.2.2 案例7——设置字体 684.2.3 案例8——设置字号 684.2.4 案例9——设置字体颜色 694.2.5 案例10——设置字体样式 704.2.6 案例11——编辑段落 724.2.7 案例12——创建项目列表 774.3 使用特殊文本添加网页内容 794.3.1 案例13——插入换行符 794.3.2 案例14——插入水平线 794.3.3 案例15——插入日期 804.3.4 案例16——插入特殊字符 814.4 综合案例——制作图文并茂的网页 824.5 疑难解惑 84第5章 有图有真相——使用图像与多媒体网页元素 875.1 常用图像格式 885.1.1 GIF格式 885.1.2 JPEG格式 885.1.3 PNG格式 895.2 用图像美化网页 895.2.1 案例1——插入图像 895.2.2 案例2——设置图像的属性 915.2.3 案例3——设置图像对齐方式 935.2.4 案例4——剪裁需要的图像 945.2.5 案例5——调整图像的亮度与对比度 955.2.6 案例6——设置图像的锐化效果 965.3 插入其他图像元素 975.3.1 案例7——插入鼠标经过图像 975.3.2 案例8——插入图像占位符 995.4 在网页中插入多媒体 1005.4.1 案例9——插入背景音乐 1005.4.2 案例10——插入Flash动画 1015.4.3 案例11——插入FLV视频 1025.4.4 案例12——插入HTML 5音频 1045.4.5 案例13——插入HTML 5视频 1055.5 综合案例1——制作精彩的多媒体网页 1075.6 综合案例2——在代码视图中插入背景音乐 1095.7 疑难解惑 110第6章 不在网页中迷路——设计网页中的超链接 1136.1 超级链接 1146.1.1 链接的概念 1146.1.2 常规链接 1146.1.3 链接的类型 1156.2 链接路径 1166.2.1 什么是URL 1166.2.2 绝对路径 1166.2.3 文档相对路径 1176.2.4 根相对路径 1176.3 创建超级链接的方法 1176.3.1 案例1——使用菜单命令创建链接 1176.3.2 案例2——使用【属性】面板创建链接 1186.3.3 案例3——使用【指向文件】按钮创建链接 1186.4 创建不同种类的网页超链接 1196.4.1 案例4——添加文本链接 1196.4.2 案例5——添加图像链接 1206.4.3 案例6——创建外部链接 1216.4.4 案例7——创建锚记链接 1216.4.5 案例8——创建图像热点链接 1236.4.6 案例9——创建电子邮件链接 1246.4.7 案例10——创建下载文件的链接 1256.4.8 案例11——创建空链接 1266.4.9 案例12——创建脚本链接 1266.5 综合案例——为企业网站添加友情链接 1286.6 疑难解惑 128第7章 让网页互动起来——使用网页表单和行为 1297.1 认识表单 1307.1.1 什么是表单 1307.1.2 认识表单对象 1307.1.3 案例1——插入表单 1337.1.4 案例2——设置表单属性 1347.2 常用表单对象的应用 1357.2.1 案例3——插入文本域 1357.2.2 案例4——插入密码域 1367.2.3 案例5——插入复选框 1377.2.4 案例6——插入单选按钮 1387.2.5 案例7——插入下拉菜单 1387.2.6 案例8——插入滚动列表 1397.2.7 案例9——插入按钮 1407.2.8 案例10——插入图像按钮 1407.2.9 案例11——插入文件上传域 1417.3 认识行为 1427.3.1 行为的概念 1427.3.2 案例12——打开【行为】面板 1437.4 常用内置行为的应用 1437.4.1 案例13——交换图像 1437.4.2 案例14——弹出信息 1457.4.3 案例15——打开浏览器窗口 1467.4.4 案例16——检查表单行为 1487.4.5 案例17——设置状态栏文本 1497.5 综合案例——使用表单制作留言本 1517.6 疑难解惑 154 第3篇 网页元素设计
第8章 网页图像说变就变——调整与修饰图像 1578.1 图像色调的调整 1588.1.1 案例1——调整图像的亮度与对比度 1588.1.2 案例2——使用【色阶】命令调整图像 1588.1.3 案例3——使用【曲线】命令调整图像 1628.1.4 案例4——调整图像的曝光度 1658.2 图像色彩的调整 1668.2.1 案例5——使用【色相/饱和度】命令 1668.2.2 案例6——使用【自然饱和度】命令 1688.2.3 案例7——使用【色彩平衡】命令 1688.2.4 案例8——使用【黑白】命令 1698.2.5 案例9——使用【照片滤镜】命令 1708.2.6 案例10——使用【通道混合器】命令 1718.2.7 案例11——使用【匹配颜色】命令 1728.2.8 案例12——使用【替换颜色】命令 1748.2.9 案例13——使用【可选颜色】命令 1758.2.10 案例14——使用【阴影/高光】 命令 1778.3 修复图像中的污点与瑕疵 1788.3.1 案例15——修复图像中的污点 1788.3.2 案例16——修复图像中的瑕疵 1798.3.3 案例17——修复图像选中的区域 1798.3.4 案例18——内容感知移动工具 1808.3.5 案例19——消除照片中的红眼 1818.4 通过图像或图案修饰图像 1828.4.1 案例20——通过复制图像修饰图像 1828.4.2 案例21——通过图案修饰图像 1838.5 通过橡皮擦修饰图像 1838.5.1 案例22——擦除图像中指定的区域 1848.5.2 案例23——擦除图像中的指定颜色 1848.5.3 案例24——擦除图像中相近的颜色 1858.6 修饰图像中的细节 1868.6.1 案例25——修饰图像中生硬的边缘 1868.6.2 案例26——提高图像的清晰度 1878.6.3 案例27——通过涂抹修饰图像 1878.7 通过调色修饰图像 1888.7.1 案例28——减淡工具和加深工具 1888.7.2 案例29——改变图像色彩的饱和度 1898.8 综合案例——制作放射线背景图 1898.9 疑难解惑 190第9章 有情有义的文字——制作网页特效文字 1919.1 文字的类型 1929.2 输入文字 1929.2.1 案例1——通过文字工具输入文字 1929.2.2 案例2——通过文字蒙版工具输入文字状选区 1949.2.3 案例3——转换点文字和段落文字 1959.2.4 案例4——转换文字排列方向 1959.3 设置文字格式 1969.3.1 案例5——通过选项栏设置格式 1969.3.2 案例6——通过【字符】面板设置文字格式 1979.3.3 案例7——通过【段落】面板设置段落格式 1989.3.4 案例8——设置字符样式和段落样式 2009.3.5 案例9——查找和替换文本 2009.4 文字转换 2019.4.1 案例10——将文字转换为工作路径 2019.4.2 案例11——将文字转换为形状 2029.4.3 案例12——将文字转换为图像 2029.5 制作常见特效文字 2039.5.1 案例13——制作路径文字 2039.5.2 案例14——制作变形文字 2049.5.3 案例15——制作燃烧文字特效 2069.6 综合案例——制作空心轮廓字 2089.7 疑难解惑 210第10章 网页中的路标——制作网页 按钮与导航条 21110.1 按钮与导航条的设计原则 21210.1.1 网页按钮的设计注意事项 21210.1.2 网页导航条的设计注意 事项 21210.2 制作按钮 21310.2.1 案例1——制作普通按钮 21310.2.2 案例2——制作迷你按钮 21410.2.3 案例3——制作水晶按钮 21710.2.4 案例4——制作木纹按钮 22110.3 制作导航条 22410.3.1 案例5——制作横向导航条 22410.3.2 案例6——制作垂直导航条 22610.4 综合案例——制作水晶风格网站导航条 22810.5 疑难解惑 234第11章 网页中迷人的蓝海——制作网页特效边线与背景 23511.1 制作装饰边线 23611.1.1 案例1——制作装饰虚线 23611.1.2 案例2——制作内嵌线条 23811.1.3 案例3——制作斜纹线条 23911.2 制作网页背景图片 24111.2.1 案例4——制作渐变背景图片 24111.2.2 案例5——制作透明背景图像 24411.3 综合案例——制作梦幻星光网页背景 24511.4 疑难解惑 249第12章 网页中的标志与旗帜——制作网页Logo与网页Banner 25112.1 网页Logo与Banner概述 25212.1.1 网页Logo设计标准 25212.1.2 网页Logo的标准尺寸 25312.1.3 网页Logo的一般形式 25412.1.4 网页Banner的标准尺寸 25512.1.5 Banner设计注意要点 25512.2 制作文字Logo 25512.2.1 案例1——制作背景 25512.2.2 案例2——制作文字内容 25612.2.3 案例3——绘制自定义形状 25712.2.4 案例4——美化文字Logo 25812.3 制作图案Logo 26012.3.1 案例5——制作背景 26012.3.2 案例6——制作图案效果 26212.4 制作英文Banner 26412.4.1 案例7——制作Banner背景 26412.4.2 案例8——制作Banner底纹 26512.4.3 案例9——制作文字特效 26712.5 制作中文Banner 26712.5.1 案例10——输入特效文字 26712.5.2 案例11——将输入的文字设置为3D效果 26812.5.3 案例12——制作Banner背景 27012.6 综合案例1——制作图文结合 Logo 27112.7 综合案例2——制作图文结合 Banner 27512.8 疑难解惑 277 第4篇 网页动画设计
第13章 让网页活灵活现——制作简单网页动画元素 28113.1 Flash的基本功能 28213.1.1 矢量绘图 28213.1.2 动画设计 28213.1.3 强大的编程功能 28213.2 时间轴、帧和图层 28313.2.1 什么是图层 28313.2.2 时间轴与帧 28413.3 制作简单动画 28513.3.1 案例1——制作帧帧动画 28513.3.2 案例2——制作补间动画 28813.3.3 案例3——制作遮罩动画 29213.3.4 案例4——使用动画预设 29413.4 综合案例——制作数字倒计时动画 29513.5 疑难解惑 297第14章 快速组织动画素材——使用元件和库 29914.1 创建Flash元件 30014.1.1 元件概述与分类 30014.1.2 案例1——创建图形元件 30014.1.3 案例2——创建按钮元件 30114.1.4 案例3——创建影片剪辑元件 30414.1.5 案例4——调用其他文档中的元件 30614.2 使用实例 30614.2.1 案例5——为实例另外指定一个元件 30714.2.2 案例6——改变实例属性 30714.3 使用【库】面板 31014.3.1 案例7——认识【库】面板 31014.3.2 案例8——库的管理与使用 31114.4 综合案例——制作绚丽网页按钮 31314.5 疑难解惑 317第15章 网页元素的动态交互——创建交互式动画 31915.1 ActionScript概述 32015.1.1 ActionScript基本术语 32015.1.2 【动作】面板 32115.2 使用ActionScript制作动画特效 32215.2.1 案例1——制作按钮切换图片效果 32215.2.2 案例2——制作按钮切换背景颜色效果 32715.2.3 案例3——制作星光闪烁效果 33215.3 Flash常用组件的使用 33615.3.1 案例4——组件的添加与删除 33715.3.2 案例5——Button(按钮)组件 33815.3.3 案例6——CheckBox(复选框)组件 33915.3.4 案例7——ComboBox(下拉列表)组件 34015.3.5 案例8——List平铺滚动组件 34215.3.6 案例9——RadioButton(单选按钮)组件 34415.3.7 案例10——ProgressBar(加载进度)组件 34615.3.8 案例11——ScrollPane(滚动条窗口)组件 34715.4 综合案例——制作飘雪效果 34915.5 疑难解惑 352第16章 让网页动起来——制作动态网站的Logo与Banner 35316.1 制作滚动文字Logo 35416.1.1 设置文档属性 35416.1.2 制作文字元件 35416.1.3 制作滚动效果 35516.2 制作产品Banner 35716.2.1 制作文字动画 35716.2.2 制作文字遮罩动画 35916.2.3 制作图片动画 36016.3 疑难解惑 362第17章 动态网页元素的输出——Flash动画的测试与发布 36317.1 Flash动画的优化 36417.1.1 案例1——动画的优化 36417.1.2 案例2——动画的测试 36517.2 输出前的格式设置 36617.2.1 案例3——Flash输出的设置 36617.2.2 案例4——HTML输出的设置 36717.2.3 案例5——GIF输出的设置 36917.2.4 案例6——JPEG输出的设置 37017.2.5 案例7——PNG输出的设置 37117.3 Flash动画的发布 37217.3.1 案例8——导出动画 37217.3.2 案例9——预览发布动画 37317.4 疑难解惑 374 第5篇 项 目 开 发
第18章 读懂样式表密码——使用CSS层叠样式表 37718.1 初识CSS样式表 37818.1.1 什么是CSS 37818.1.2 CSS的3种类型 37818.1.3 CSS的语法格式 37918.1.4 案例1——使用Dreamweaver编写CSS 38018.2 CSS的使用方式 38118.2.1 案例2——行内样式 38218.2.2 案例3——内嵌样式 38218.2.3 案例4——链接样式 38318.2.4 案例5——导入样式 38518.3 CSS中的常用样式 38618.3.1 案例6——使用字体样式 38618.3.2 案例7——使用文本样式 39018.3.3 案例8——使用背景样式 39418.3.4 案例9——设计边框样式 40118.3.5 案例10——设置列表样式 40518.4 综合案例——制作简单公司主页 40918.5 疑难解惑 412第19章 架构师的大比拼——利用 Div CSS布局网页 41319.1 认识并创建层 41419.1.1 什么是层 41419.1.2 案例1——使用Dreamweaver 创建层 41419.2 Div层的定位方法 41519.2.1 盒子模型的概念 41519.2.2 案例2——定义网页border 区域 41519.2.3 案例3——定义网页padding 区域 41719.2.4 案例4——定义网页margin 区域 41819.3 使用CSS排版 42119.3.1 案例5——将页面用div 分块 42119.3.2 案例6——设置各块位置 42219.3.3 案例7——用CSS定位 42219.4 常见网页布局模式 42519.4.1 案例8——网页单列布局模式 42519.4.2 案例9——网页1-2-1型布局模式 42919.4.3 案例10——网页1-3-1型布局模式 43219.5 综合案例——创建左右布局页面 43519.6 疑难解惑 438第20章 制作动态网页基础——构建动态网站的运行环境 43920.1 PHP基本知识 44020.1.1 PHP的概念 44020.1.2 PHP语言的优势 44020.1.3 PHP服务器概述 44020.2 安装PHP前的准备工作 44120.2.1 软硬件环境 44120.2.2 案例1——获取PHP 7.1安装资源包 44220.3 PHP IIS服务器的安装配置 44320.3.1 案例2——IIS简介及安装 44320.3.2 案例3——PHP的安装 44420.3.3 案例4——设置虚拟目录 44720.4 PHP Apache服务器的环境搭建 44720.4.1 Apache简介 44720.4.2 案例5——关闭原有的网站服务器 44820.4.3 案例6——安装Apache 44920.4.4 案例7——将PHP与Apache建立关联 45020.5 在Windows下使用WampServer组合包 45120.6 综合案例——测试第一个PHP程序 45420.7 疑难解惑 455第21章 构建动态网站后台数据——使用MySQL数据库 45721.1 定义一个互动网站 45821.1.1 定义互动网站的重要性 45821.1.2 网页取得数据库的原理 45821.1.3 案例1——在Dreamweaver CC中定义网站 45921.2 MySQL数据库的安装和管理 46221.2.1 案例2——MySQL 数据库的安装 46221.2.2 案例3——MySQL 数据库的配置 46621.2.3 案例4——phpMyAdmin的安装 47021.2.4 案例5——MySQL数据库的建立 47121.3 在网页中使用MySQL数据库 47721.3.1 案例6——添加【数据库】面板 47721.3.2 案例7——建立MySQL数据库连接 47921.3.3 案例8——绑定记录集 48121.4 数据库的备份与还原 48421.4.1 案例9——数据库的备份 48421.4.2 案例10——数据库的还原 48521.5 综合案例——给我的MySQL数据库加密 48621.6 疑难解惑 487第22章 综合应用案例——开发网站用户管理系统 48922.1 系统的功能分析 49022.1.1 规划网页结构和功能 49022.1.2 站点文件规划 49122.1.3 网页美工设计 49122.2 数据库设计与连接 49122.2.1 数据库设计 49222.2.2 创建数据库连接 49422.3 用户登录模块的设计 49622.3.1 登录页面 49622.3.2 登录成功和登录失败页面的制作 50422.3.3 用户登录系统功能的测试 50622.4 用户注册模块的设计 50722.4.1 用户注册页面 50722.4.2 注册成功和注册失败页面 51222.4.3 用户注册功能的测试 51322.5 用户注册资料修改模块的设计 51422.5.1 修改资料页面 51422.5.2 更新成功页面 51622.5.3 修改资料功能的测试 51722.6 密码查询模块的设计 51822.6.1 密码查询页面 51822.6.2 完善密码查询功能页面 52222.6.3 密码查询模块的测试 524
前 言
“网站开发案例课堂”系列图书是专门为办公技能和网页设计初学者量身定制的一套学习用书，涵盖网页设计、网站开发、数据库设计等方面。整套书具有以下几个特点。
面向前沿科技
无论是网站建设、数据库设计，还是HTML 5、CSS 3、JavaScript，我们都精选较为前沿或用户群较大的领域推进，帮助大家认识和了解最新动态。
权威的作者团队
组织国家重点实验室和资深应用专家联手编著该套图书，融合丰富的教学经验与优秀的管理理念。
学习型案例设计
以技术的实际应用过程为主线，全程采用图解和同步多媒体结合的教学方式，生动、直观、全面地剖析使用过程中的各种应用技能，降低难度，提升学习效率。
为什么要写这样一本书
随着网络的发展，很多企事业单位和广大网民对于建立网站的需求越来越强烈。另外，对于大中专院校，很多学生需要做网站毕业设计，但是这些读者又不懂网页代码程序，不知道从哪里下手。针对这些情况，我们编写了此书，以期全面带领读者学习网页设计和网站建设的知识。通过本书的实训，读者可以很快地学会设计网页和开发网站，提高职业技能，从而帮助解决公司与求职者的双重需求问题。
本书特色
零基础、入门级的讲解
无论您是否从事计算机相关行业，无论您是否接触过Dreamweaver Flash Photoshop网页设计和动态网站开发，都能从本书中找到最佳起点。
超多、实用、专业的范例和项目
本书在编排上紧密结合深入学习网页制作技术的先后过程，从网页设计的基本概念开始，带领大家逐步深入地学习各种应用技巧，侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者读起来简明轻松，操作起来有章可循。
随时检测自己的学习成果
大部分章末均设置了“疑难解惑”板块，从而帮助读者解决自学过程中最常见的疑难问题。
细致入微、贴心提示
本书在讲解过程中，在各章中使用了“注意”“提示”“技巧”等小贴士，使读者在学习过程中更清楚地了解相关操作、理解相关概念，并轻松掌握各种操作技巧。
专业创作团队和技术支持
您在学习过程中遇到任何问题，可加入QQ群(案例课堂VIP，号码为451102631)进行提问，专家人员会在线答疑。
超值资源大放送
全程同步教学录像
涵盖本书所有知识点，详细讲解每个实例和项目的过程及技术关键点。比看书更能轻松地掌握书中所有动态网站开发的知识，而且扩展的讲解部分可使您得到比书中更多的收获。
超多容量王牌资源
赠送大量王牌资源，包括本书实例源代码、教学幻灯片、本书精品教学视频、88个实用类网页模板、12部网页开发必备参考手册、11个精彩JavaScript案例、Dreamweaver CC快捷键速查手册、HTML标记速查表、精彩网站配色方案赏析、网页样式与布局案例赏析、CSS Div布局赏析案例、Web前端工程师常见面试题等。读者可以通过QQ群(案例课堂VIP，号码为451102631)获取赠送资源，也可以扫描二维码，下载本书资源。
读者对象
没有任何Dreamweaver Flash Photoshop网页设计基础的初学者。
有一定的Dreamweaver Flash Photoshop网页设计基础，想精通网站开发的人员。
有一定的动态网站开发基础，没有项目经验的人员。
正在进行毕业设计的学生。
大专院校及培训学校的老师和学生。
创作团队
本书由刘春茂编著，参加编写的人员还有刘玉萍、张金伟、蒲娟、周佳、付红、李园、郭广新、侯永岗、王攀登、刘海松、孙若淞、王月娇、包慧利、陈伟光、胡同夫、王伟、展娜娜、李琪、梁云梁和周浩浩。在编写过程中，我们竭尽所能地将最好的讲解呈现给读者，但也难免有疏漏和不妥之处，敬请不吝指正。若您在学习中遇到困难或疑问，或有任何建议，可写信至信箱[email protected]。
编 者
第2章 整体把握网站结构——网页配色与网站布局
一个网站能否成功，很大程度上取决于网页的结构与配色。因此，在学习制作动态网站之前，首先需要掌握网站结构与网页配色的相关基础知识。本章主要介绍网页配色的相关技巧、网站结构的布局，以及网站配色的经典案例等。
2.1 善用色彩设计网页
经研究发现，当用户第一次打开某个网站时，给用户留下第一印象的既不是网站的内容，也不是网站的版面布局，而是网站具有冲击力的色彩，如图2-1所示。
图2-1 网页色彩搭配
色彩的魅力是无限的，它可以让本身平淡乏味的东西瞬间变得漂亮起来。作为最具说服力的视觉语言，作为最强烈的视觉冲击，色彩在人们的生活中起着先声夺人的作用。因此，作为一名优秀的网页设计师，不仅要掌握基本的网站制作技术，还要掌握网站的配色风格等设计艺术。
2.1.1
认识色彩
为了能更好地应用色彩来设计网页，需要先了解色彩的一些基本概念。自然界中有好多种色彩，如玫瑰是红色的，大海是蓝色的，橘子是橙色的……但是最基本的色彩有3种(红、黄、蓝)，其他的色彩都可以由这3种色彩调和而成。这3种色彩被称为“三原色”，如图2-2(a)所示。
现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列；其他的色彩都属于彩色系列。任何一种彩色的色彩都具备色相、明度和纯度3个特征。而非彩色的色彩只具有明度属性。
1. 色相
色相指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩最主要的因素。比如，紫色、绿色、黄色等都代表了不同的色相。同一色相的色彩，通过调整亮度或者纯度，就很容易搭配，如图2-2(b)所示。
2. 明度
明度也叫亮度，是指色彩的明暗程度。明度越大，色彩越亮，如一些购物、儿童类网站，用的是一些鲜亮的颜色，让人感觉绚丽多姿、生气勃勃。明度越低，颜色越暗。低明度的色彩主要用于一些充满神秘感的游戏类网站，以及一些为了体现个人的孤僻，或者忧郁等性格的个人网站。
(a) (b)
图2-2 三原色与色相
有明度差的色彩更容易调和，如紫色(#993399)与黄色(#ffff00)，暗红(#cc3300)与草绿(#99cc00)，暗蓝(#0066cc)与橙色(#ff9933)等。色彩的明度如图2-3所示。
图2-3 色彩的明度
3. 纯度
纯度是指色彩的鲜艳程度。纯度高的色彩颜色鲜亮；纯度低的色彩颜色暗淡发灰。
2.1.2
确定网站的主题色
一个网站一般不使用单一颜色，因为这样会让人感觉单调、乏味；但也不能将所有的颜色都运用到网站中，让人感觉不庄重。一个网站必须围绕一种或两种主题色进行设计，这样既不至于让客户迷失方向，也不至于让客户感到单调、乏味。因此，确定网站的主题色是设计者必须考虑的问题之一。
1. 主题色确定的两个方面
在确定网站主题色时，通常可以从以下两个方面去考虑。
1) 结合产品、内容特点
应该根据产品的特点来确定网站的主色调。如果企业产品是环保型的，可以采用绿色；如果企业主营的产品是高科技或电子类的可以采用蓝色等；如果是红酒企业，则可以考虑使用红酒的色调。图2-4所示为一个商业网站的色彩搭配。
图2-4 商业网站色彩的搭配
2) 根据企业的VI识别系统
如今有很多公司都有自己的VI识别系统，从公司的名片、办公室的装修、手提袋等可以看得到，这些都是公司沉淀下来的企业文化。网站作为企业的宣传方式之一，也在一定程度上需要考虑这些因素。
2. 主题色的设计原则
在主题色确定时我们还要考虑如下原则，这样设计出的网站界面才能别出心裁，体现出企业的独特风格，更有利于向受众传递企业信息。
1) 与众不同，富有个性
过去许多网站都喜欢选择与竞争对手的网站相近的颜色，试图通过这样的策略来快速实现网站构建，减少建站成本，但这种建站方式鲜有成功者。网站的主题色一定要与竞争网站能明显地区别开，只有与众不同、别具一格才是成功之道，这是网站主题色选择的首要原则。如今越来越多的网站规划者开始认识到这个真理。比如，中国联通已经改变过去模仿中国移动的色彩，推出了与中国移动区别明显的橘色作为新的标准色，如图2-5所示。
图2-5 以橘色为标准色的中国联通网页
2) 符合大众审美习惯
由于大众的色彩偏好非常复杂，而且是多变的，甚至是瞬息万变的，因此要选择最能吻合大众偏好的色彩是非常困难的，甚至是不可能的。最好的办法是剔除掉大众所禁忌的颜色。比如，巴西人忌讳棕黄色和紫色，他们认为棕黄色使人绝望，紫色会带来悲哀，紫色和黄色配在一起，则是患病的预兆。因此，在选择网站主题色时要考虑你的用户群体的审美习惯。
2.1.3
网页中色彩的搭配
色彩在人们的生活中带有丰富的感情和含义。在特定的场合下，同种色彩可以代表不同的含义。色彩总的应用原则应该是“总体协调，局部对比”，即主页的整体色彩效果是和谐的，局部、小范围的地方可以配一些对比强烈的色彩。在色彩的运用上，可根据主页内容的需要，分别采用不同的主色调。
色彩具有象征性，如嫩绿色、翠绿色、金黄色、灰褐色分别象征春、夏、秋、冬。其次还有职业的标志色，如军警的橄榄绿、医疗卫生的白色等。色彩还具有明显的心理感觉，如冷、暖的感觉，进、退的效果等。另外，色彩还具有民族性。各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。
1. 色彩的搭配
充分运用以下色彩的这些特性，可以使网站的主页具有深刻的艺术内涵，从而提升主页的文化品位。
(1) 相近色。相近色即色环中相邻的3种颜色。相近色的搭配给人的视觉效果很舒适、很自然，所以相近色在网站设计中极为常用。
(2) 互补色。互补色即色环中相对的两种色彩。对互补色调整一下补色的亮度，有时是一种很好的搭配。
(3) 暖色。暖色与黑色搭配，一般应用于购物类网站、电子商务网站、儿童类网站等，用以体现商品的琳琅满目，或网站的活泼、温馨等效果，如图2-6所示。
图2-6 暖色色系的网页示例
(4) 冷色。冷色一般与白色搭配，一般应用于一些高科技、游戏类网站，主要表达严肃、稳重等效果。绿色、蓝色、蓝紫色等都属于冷色系列，如图2-7所示。
图2-7 冷色色系的网页示例
(5) 色彩均衡。网站要让人看上去舒适、协调，除了文字、图片等内容的排版合理外，色彩均衡也是相当重要的一个部分。比如，一个网站不可能单一地运用一种颜色，所以色彩的均衡问题是设计者必须要考虑的问题。
2. 非彩色的搭配
黑色与白色搭配是最基本和最简单的搭配，无论是白字黑底还是黑字白底都非常清晰明了。灰色是万能色，可以和任何色彩搭配，也可以帮助两种对立的色彩和谐过渡。如果在网页设计中实在找不出合适的搭配色彩，那么可以尝试用灰色，效果绝对不会太差，如图2-8所示。
2.1.4
网页元素的色彩搭配
为了把网页设计得更亮丽、更舒适，增强页面的可阅读性，必须合理、恰当地运用页面各元素间的色彩搭配。
1. 网页导航条
网页导航条是网站的指路方向标，浏览者在网页间的跳转、了解网站的结构、查看网站的内容，都必须使用导航条。导航条的色彩搭配，可以使用稍微具有跳跃性的色彩吸引浏览者的视线，使其感觉网站清晰明了、层次分明，如图2-9所示。
图2-9 网页导航条的色彩搭配示例
2. 网页链接
一个网站不可能只有一页，因此文字与图片的链接是网站中不可或缺的部分。尤其是文字链接，因为文字链接有别于一般文字，所以文字链接的颜色不能与文字的颜色一样。要让浏览者快速地找到网站链接，设置独特的文字链接颜色是一种引导浏览者点击链接的好办法，如图2-10所示。
图2-10 网页链接的色彩搭配示例
3. 网页文字
如果网站中使用了背景颜色，就必须考虑背景颜色的用色与前景文字的色彩搭配问题。一般的网站侧重的是文字，因而其背景的颜色可以使用纯度或者明度较低的色彩，文字的颜色可以使用较为突出的亮色，让人一目了然。
4. 网站标志
网站标志是宣传网站最重要的部分之一。因此，网站标志在页面上一定要突出、醒目，可以将网站的Logo和Banner做得鲜亮一些。也就是说，在色彩搭配方面网站标志的色彩要与网页的主题色彩分离开。有时为了更突出，也可以使用与主题色相反的颜色，如图2-11所示。
图2-11 网站标志的色彩搭配示例
评论
还没有评论。