网页设计技术与应用案例解析

第１章
零基础学网页设计
1.1 网页设计相关知识 2 1.1.1 网页设计专业名词 2 1.1.2 网页设计流程 3 1.1.3 网站建设流程 4 1.2 网页设计常用布局 7 1.3 网页设计常用软件 8 1.3.1 Dreamweaver 8 1.3.2 Illustrator  9 1.3.3 Photoshop 9 1.4 网页设计在行业中的应用 10 1.4.1 网页设计对应的岗位和行业概况 10 1.4.2 网页设计从业人员应具备的素养 10 课堂实战 了解网页和网站 10 课后练习 了解网页色彩基础 11 拓展赏析 徐州博物馆 12
第2章
网页设计基本操作
2.1 Dreamweaver工作界面 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.3 CSS设计器—设置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.3 Div CSS布局基础 124 6.3.1 案例解析：制作文具公司网页 124 6.3.2 认识Div—Div简介 129 6.3.3 Div 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.1 HTML简介 198 10.1.2 HTML的基本结构 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