资源简介

(共16张PPT)
创建“方寸世界”摄影图片网站
高等教育出版社
网页设计与制作
教学目的：
理解响应式布局概念及设计思路
帮助学生理解并掌握使用第三方框架和模板制作响应式网站的方法
培养学生综合运用多种工具（包括：第三方框架和外部资源）实现设计的能力
教学重点：
帮助学生理解响应式布局的概念及原理
帮助学生掌握运用第三方框架及Dreamweaver中现有模板制作响应式网站的方法
知识点：
响应式布局概念及发展历程
响应式布局设计思路
第三方框架Bootstrap
Dreamweaver中的响应式布局模板
Dreamweaver创建并制作响应式网站
1. 项目描述与分析
项目描述：
“方寸世界”是一个摄影图片公司站点。建站目的为创建适合移动设备和桌面设备的响应式网站，快速方便地在不同媒介上推广品牌形象、介绍摄影师、展示摄影作品、提供联系信息等。
项目分析：
本项目在学习响应式布局概念原理的基础上，通过学习使用CSS3中的media query，设计制作适合不同分辨率设备的响应式页面，从而形成一个完整的响应式网站。
2. 预 备 知 识
响应式布局概念
网页设计能不能“一次设计，普遍适用？”让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页布局？答案是肯定的。“响应式布局”正是针对这一问题给出的一个合理解决方案。
“响应式布局”概念是2010年由伊桑.马科特（Ethan Marcotte）提出，英文名称为Responsive Web Design（简称：RWD）。指可以自动识别屏幕宽度、并做出相应调整的网页设计。
响应式布局思路及优缺点
“响应式布局”需要以下几方面的技术支持：相对大小（包括网页及字体）、流动布局、CSS3的媒介查询、图片自适应。
优点：灵活性强、解决设备显示适应问题。
缺点：兼容各种设备，代码累赘，是一种折中性质解决方案。
Bootstrap及Dreamweaver布局模板介绍
Bootstrap原名Twitter Blueprint，是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作开发的简洁、直观、强悍的前端框架。在Bootstrap之前，开发界面需要使用不同的代码库，这样很容易导致不一致的问题，从而增加了维护的负担。而Bootstrap提供了优雅的HTML和CSS规范，它由动态CSS语言Less写成。
Dreamweaver作为一款专业的网页制作工具，近年来不仅加强了直接代码编写功能，同时也整合了许多响应式模板，其中包括Bootstrap模板。在Dreamweaver CC 2019中用户可以使用Bootstrap模板和其他响应式模板创建页面。
3.项目任务
制作“方寸世界”响应式作品页
任务一、制作作品页头部区域
任务二、制作作品页导航及主要内容区
任务三、制作作品页底部并添加媒体查询
具体制作步骤
5. 知 识 链 接
（1）、 线上学习：响应式布局设计
Bootstrap中文网 http://www.
阮一峰的网络日志 http://www./blog/2012/05/responsive_web_design.html
（2）、 线下学习：HTML语法基础
HTML语言采用简明的语法规则，通过对各种标签、属性、属性值的定义，建立起图形、声音、视频等多媒体信息，还可建立与其他超文本的链接。HTML语言的基本语法组成部分包括：标签、属性、属性值。
THANK YOU

展开更多......

收起↑