《网页设计技术与应用案例解析》以实战案例为指引,以理论讲解作铺垫,对网页设计的方法与技巧进行了讲解,并用通俗易懂的语言、图文并茂的形式对Dreamweaver在网页设计中的应用进行了全面细致的剖析。 全书共10章,遵循由浅入深、从基础知识到案例进阶的学习原则,对零基础学网页设计、网页设计基本操作、常见网页元素及应用、网页超链接的应用、网页中表格的应用、Div CSS布局技术、表单技术、模板与库、行为技术等内容进行了逐一阐述,最后介绍了网页设计相关的HTML语言知识。 全书结构合理、内容丰富、易学易懂,既有鲜明的基础性,也有很强的实用性。《网页设计技术与应用案例解析》既可作为高等院校相关专业的教学用书,又可作为培训机构以及网页设计爱好者的参考书。
网页是集合了平面设计、动画、音视频等元素,承载各种网站应用的平台。Dreamweaver是Adobe公司旗下一款所见即所得的网页设计软件,在网页设计、互联网软件开发等领域应用广泛。Dreamweaver操作方便、易上手,深受广大网页设计从业人员与网页设计爱好者的喜爱。
Dreamweaver软件除了在网页设计方面有它强大的功能性和优越性外,在软件协作方面也有它的优势。根据需求,设计者可将Photoshop、Animate等软件设计好的内容调入Dreamweaver
中进行应用。随着软件版本的不断升级,目前Dreamweaver技术已逐步向智能化、人性化、实用化发展,旨在让网页设计师将更多的精力和时间用在创作上,以便给大家呈现出更完美的网页作品。
内容概述
本书切实从读者的实际出发,以浅显易懂的语言和与时俱进的图示来进行说明,实现理论与实践并重,同时注重职业能力的培养。
党的二十大精神贯穿素养、知识、技能三位一体的教学目标,从爱国情怀、社会责任、法治思维、职业素养等维度落实课程思政;提高学生的创新意识、合作意识和效率意识,培养学生精益求精的工匠精神,弘扬社会主义核心价值观。本书贯彻二十大精神,结合本专业知识点,认真编写。
全书共分10章,各章的内容如下。
章 内容导读 难点指数
第1章 主要介绍了网页设计相关知识、网页设计常用布局、网页设计常用软件及网页设计在行业中的应用等内容 ★☆☆
第2章 主要介绍了Dreamweaver工作界面、网页设计常用面板、创建与管理站点及文档的基本操作等内容 ★★☆
第3章 主要介绍了文本元素的应用、图像元素的应用及其他多媒体元素等内容 ★★★
第4章 主要介绍了超链接的基本概念、创建超链接及管理网页超链接等内容 ★★☆
第5章 主要介绍了创建表格、设置表格属性、编辑表格及导入/导出表格式数据等内容 ★★★
第6章 主要介绍了创建CSS样式、定义CSS样式及Div CSS布局基础等内容 ★★★
第7章 主要介绍了表单的基础知识、创建表单域、创建文本类表单、创建选项类表单、创建文件域及创建表单按钮等内容 ★★☆
第8章 主要介绍了创建模板、应用和管理模板及创建与应用库等内容 ★★★
第9章 主要介绍了行为和事件的基础知识,常用行为等内容 ★★☆
第10章 主要介绍了HTML5基础知识、常见标签的应用、网页样式设置,以及页面动画效果等内容 ★★★
选择本书的理由
本书采用案例解析 理论讲解 课堂实战 课后练习 拓展赏析的结构进行编写,其内容由浅入深,循序渐进,可让读者带着疑问去学习知识,并从实战应用中激发学习兴趣。
(1)专业性强,知识覆盖面广。
本书主要围绕网页设计行业的相关知识点展开讲解,并对不同类型的案例制作进行解析,让读者了解并掌握该行业的设计原则与制作要点。
(2)带着疑问学习,提升学习效率。
本书是先对案例进行解析,然后再针对案例中的重点工具进行深入讲解,这样可让读者带着问题去学习相关的理论知识,从而有效提升学习效率。此外,本书所有的案例都经过精心的设计,读者可将这些案例应用到实际工作中。
(3)行业拓展,以更高的视角看行业发展。
本书在每章结尾部分都安排了拓展赏析版块,旨在让读者掌握本章相关技能后,还可了解行业中一些有意思的设计方案及设计技巧,从而开拓思维。
(4)多软件协同,呈现完美作品。
一份优秀的设计方案,通常是由多个软件共同协作完成的,网页设计也不例外。在本书中添加了HTML语言基础协作章节,读者可以通过HTML代码直接制作出精彩的网页效果。
本书的读者对象
从事网页设计的工作人员。
高等院校相关专业的师生。
培训班中学习网页设计的学员。
对网页设计有着浓厚兴趣的爱好者。
想通过知识改变命运的有志青年。
想掌握更多技能的办公室人员。
本书由沈佳琪编写,在编写过程中力求严谨细致,但由于编者水平有限,疏漏之处在所难免,望广大读者批评指正。
编者
素材文件 课件、教案、视频
第1章
零基础学网页设计
1.1网页设计相关知识 2 1.1.1网页设计专业名词 2 1.1.2网页设计流程 3 1.1.3网站建设流程 4 1.2网页设计常用布局 7 1.3网页设计常用软件 8 1.3.1Dreamweaver 8 1.3.2Illustrator 9 1.3.3Photoshop 9 1.4网页设计在行业中的应用 10 1.4.1网页设计对应的岗位和行业概况 10 1.4.2网页设计从业人员应具备的素养 10 课堂实战 了解网页和网站 10 课后练习 了解网页色彩基础 11 拓展赏析 徐州博物馆 12
第2章
网页设计基本操作
2.1Dreamweaver工作界面 14 2.2网页设计常用面板 15 2.2.1菜单栏常用菜单命令 15 2.2.2文档工具栏文档视图切换 15 2.2.3通用工具栏常用工具 16 2.2.4标签选择器选择标签 16 2.2.5属性面板设置属性 16 2.2.6面板组常用面板 17 2.3创建与管理站点 18 2.3.1案例解析:创建站点 18 2.3.2创建站点创建本地和远程站点 20 2.3.3访问站点编辑站点文件 21 2.3.4编辑站点修改站点属性 21 2.4文档的基础操作 22 2.4.1案例解析:插入Word文档 22 2.4.2新建文档创建文档 24 2.4.3保存文档保存当前文档 24 2.4.4打开文档打开已有文档 25 2.4.5插入文档应用已有文档 25 课堂实战 创建个人站点 26 课后练习 认识首选项 28 拓展赏析 南京博物院 29
第3章
常见网页元素及应用
3.1文本元素的应用 32 3.1.1案例解析:制作散文网页 32 3.1.2创建文本添加文本 36 3.1.3设置网页中的文本属性文本属性设置 37 3.1.4在网页中插入特殊元素插入命令的使用 38 3.2图像元素的应用 39 3.2.1案例解析:制作图像网页 39 3.2.2图像常用格式了解图像 42 3.2.3插入图像应用图像 43 3.2.4图像对齐方式设置图像对齐 44 3.2.5设置网页背景图像设置背景图 45 3.2.6鼠标经过图像切换图像 46 3.2.7编辑图像修改图像属性 47 3.3其他多媒体元素 49 3.3.1视频元素插入视频 49 3.3.2音频元素插入音频 51 课堂实战 制作古文网页 52 课后练习 制作鼠标经过图像效果 57 拓展赏析 陕西历史博物馆 58
第4章
网页超链接的应用
4.1认识超链接 60 4.1.1绝对路径包括服务器规范在内的完全路径 60 4.1.2文档相对路径本地链接 60 4.1.3站点根目录相对路径从站点的根文件夹到 4.1.3文档的路径 60 4.2创建超链接 60 4.2.1案例解析:创建电子邮件链接 60 4.2.2文本链接带链接的文本 62 4.2.3空链接无指向链接 63 4.2.4锚点链接同一页面链接 64 4.2.5电子邮件链接指向电子邮件的链接 64 4.2.6脚本链接通过链接触发脚本命令 65 4.2.7图像链接在图像上创建链接 65 4.2.8图像热点链接在图像部分区域创建热点链接 65 4.3管理网页超链接 65 4.3.1案例解析:设置链接自动更新 66 4.3.2自动更新链接自动更新改动的超链接 66 4.3.3在站点范围内更改链接手动更新链接 67 4.3.4检查站点中的链接错误检查站点链接 68 课堂实战 制作书店网页 68 课后练习 制作国粹特色网页 76 拓展赏析 秦始皇帝陵博物院 77
第5章
网页中表格的应用
5.1创建表格 80 5.1.1案例解析:在网页中添加活动信息表 80 5.1.2认识表格表格相关术语 82 5.1.3插入表格创建表格 82 5.1.4表格基本代码表格相关代码 83 5.2设置表格属性 84 5.2.1案例解析:制作西餐厅网页 84 5.2.2设置表格属性调整表格效果 87 5.2.3设置单元格属性调整单元格 87 5.2.4鼠标经过颜色制作鼠标划过效果 88 5.2.5表格的属性代码表格属性设置代码 89 5.3编辑表格 90 5.3.1案例解析:制作花店网页 91 5.3.2选择表格选择表格不同部分 94 5.3.3复制/粘贴表格快速制作相同内容 94 5.3.4添加行和列添加表格行或列 95 5.3.5删除行和列删除表格行或列 95 5.3.6合并和拆分单元格丰富表格效果 96 5.4导入/导出表格式数据 96 5.4.1导入表格式数据导入外部表格式数据 96 5.4.2导出表格式数据导出表格 97 课堂实战 制作影院排片信息网页 97 课后练习 制作产品展示网页 102 拓展赏析 苏州博物馆 104
第6章
Div CSS布局技术
6.1创建CSS样式 106 6.1.1案例解析:美化文本内容 106 6.1.2认识CSS样式表了解CSS 108 6.1.3CSS设计器设置CSS样式 110 6.1.4创建CSS样式表新建CSS样式表 111 6.2定义CSS样式 114 6.2.1案例解析:定义旅行社网页样式 115 6.2.2类型设置CSS规则定义类型参数 119 6.2.3背景设置CSS规则定义背景参数 119 6.2.4区块设置CSS规则定义区块参数 120 6.2.5方框设置CSS规则定义方框参数 120 6.2.6边框设置CSS规则定义边框参数 121 6.2.7列表设置CSS规则定义列表参数 121 6.2.8定位设置CSS规则定义定位参数 122 6.2.9扩展设置CSS规则定义扩展参数 123 6.2.10 过渡设置CSS规则定义过渡参数 123 6.3Div CSS布局基础 124 6.3.1案例解析:制作文具公司网页 124 6.3.2认识DivDiv简介 129 6.3.3Div CSS布局优势Div CSS布局优点 129 6.3.4创建Div新建Div 129 6.3.5盒子模型思维模型 131 课堂实战 制作幼儿园网页 133 课后练习 制作建筑公司网页 141 拓展赏析 上海博物馆 142
第7章
表单技术
7.1认识表单 144 7.2创建表单域 144 7.3创建文本类表单 145 7.3.1案例解析:制作登录界面 145 7.3.2文本创建单行文本域 148 7.3.3文本区域创建多行文本域 148 7.3.4密码创建密码域 149 7.4创建选项类表单 150 7.4.1案例解析:制作线上报名表 150 7.4.2单选按钮创建单选按钮 152 7.4.3复选框创建复选框 153 7.4.4选择创建下拉菜单 154 7.5创建文件域 155 7.6创建表单按钮 155 课堂实战 制作注册网页 156 课后练习 制作问答网页 161 拓展赏析 安徽博物院 162
第8章
模板与库
8.1创建模板 164 8.1.1案例解析:创建网页模板 164 8.1.2创建模板创建模板的不同方式 165 8.1.3可编辑区域可编辑区域的创建 166 8.1.4可选区域可选区域的创建 167 8.2应用和管理模板 168 8.2.1案例解析:应用网页模板 168 8.2.2模板的应用应用模板 170 8.2.3更新页面模板修改后更新文档 171 8.2.4重命名模板修改模板名称 171 8.2.5删除模板删除多余模板 171 8.3创建与应用库 172 8.3.1创建库项目创建应用库 172 8.3.2插入库项目应用库项目 172 8.3.3管理库项目编辑管理库项目 173 课堂实战 制作旅行社网页 174 课后练习 制作景区网站模板并应用 177 拓展赏析 三星堆博物馆 178
第9章
行为技术
9.1认识行为 180 9.1.1案例解析:添加网页弹出信息 180 9.1.2行为了解行为 181 9.1.3事件认识事件 182 9.2常用行为 183 9.2.1案例解析:制作交换图像效果 183 9.2.2应用行为调节浏览器窗口与浏览器相关的行为 184 9.2.3应用行为调节图像与图像相关的行为 186 9.2.4应用行为显示文本与文本相关的行为 187 9.2.5应用行为控制表单与表单相关的行为 189 课堂实战 提高网页交互性 190 课后练习 制作室内设计网页 193 拓展赏析 甘肃省博物馆 195 第10章 网页编辑利器之HTML5 10.1认识HTML 198 10.1.1HTML简介 198 10.1.2HTML的基本结构 198 10.2常见标签的应用 200 10.2.1案例解析:在网页中添加文本 200 10.2.2标题文字 201 10.2.3文字字体 202 10.2.4段落换行 202 10.2.5不换行标签 202 10.2.6图像标签 203 10.2.7超链接标签 203 10.2.8列表标签 204 10.2.9表单标签 206 10.3网页样式设置 207 10.3.1案例解析:段落缩进效果 207 10.3.2字体样式 208 10.3.3段落样式 210 10.4页面动画效果 212 10.4.1案例解析:模拟星球运转效果 212 10.4.2实现过渡 217 10.4.3实现动画 220 课堂实战 制作简易网页布局 224 课后练习 插入网页图像 227 拓展赏析 湖北省博物馆 228 附录:网页设计常用快捷键汇总 229 参考文献 234