第9章 使用Dreamweaver（20）（课件)-《网页设计与制作》同步教学（人民邮电出版社）

第 9 章 使用Dreamweaver 1 第 9 章　使用Dreamweaver 知识要点 （1）熟悉Dreamweaver 的基本界面元素：菜单、工具栏、文档窗口、状态栏、工作面板等 （2）掌握使用Dreamweaver创建和管理本地站点 （3）掌握在 Dreamweaver 中插入文本、图像、表格、表单等各种网页元素，并进行各种属性设置 （4）掌握在 Dreamweaver 中使用 CSS 样式 （5）掌握Dreamweaver的快速代码编写功能 （6）掌握使用媒体查询实现响应式网页设计 本章目标 1 第 9 章　使用Dreamweaver （1）基本功能 1 第 9 章　使用Dreamweaver （1）基本功能 1．创建本地站点 1 第 9 章　使用Dreamweaver （1）基本功能 2．站点文件操作 1 第 9 章　使用Dreamweaver （1）基本功能 3．DW网页制作的一般过程 01 创建/建立本地站点 02 创建网页文件 03 设置网页属性 05 保存网页，预览网页效果 04 插入网页元素，设置元素属性 1 第 9 章　使用Dreamweaver （1）基本功能 4．文本与超链接 1 第 9 章　使用Dreamweaver （1）基本功能 5．图像与多媒体 1 第 9 章　使用Dreamweaver （1）基本功能 6．使用表格 1 第 9 章　使用Dreamweaver （1）基本功能 7．使用表单 1 第 9 章　使用Dreamweaver （1）基本功能 8．创建CSS样式表 1 第 9 章　使用Dreamweaver （1）基本功能 9．定义样式规则 1 第 9 章　使用Dreamweaver （2）高级应用 1．快速代码编写——emmet输入 nav>ul>li （子元素） ul>li*2 （重复元素） div+p+b （兄弟元素） div+div>p>span+em^bq （上移一层） ul>li.item$*3 （项目编号） div>(header>ul>li*2>a)+footer>p （括号分组） #header .title 1 第 9 章　使用Dreamweaver （2）高级应用 2．快速代码编写——多光标操作 Alt Ctrl 1 第 9 章　使用Dreamweaver （2）高级应用 3．快速代码编写——代码片断 1 第 9 章　使用Dreamweaver （2）高级应用 4．响应式设计 所谓响应式设计，就是所设计的网站或应用，能够根据用户行为和设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。 不论用户使用的是大屏幕显示，还是平板电脑，或者是手机，系统都应能自动切换分辨率、图片尺寸以及相关脚本功能。 随着移动设备的广泛使用，响应式设计已经是网页设计的基本要求。 1 第 9 章　使用Dreamweaver （2）高级应用 1 第 9 章　使用Dreamweaver （2）高级应用 5．使用媒体查询 @media mediatype and (media feature) { CSS-Code; } 其中mediatype可以是all（所有媒体，默认值）、print（打印）、screen（屏幕）和speech（屏幕阅读器）等，如果没有特殊要求，一般不写或者写screen； media feature是媒体属性，取值包括：width、min-width、max-width、height、min-height、max-height、resolution、orientation等，最常用的是max-width（最大宽度）和min-width（最小宽度）。 1 第 9 章　使用Dreamweaver （2）高级应用 1 第 9 章　使用Dreamweaver THANKS 1 第 9 章　使用Dreamweaver $$