下载文档原格式
前端开发实训案例使用Bootstrap构建响应式网站Bootstrap是一款流行的开源前端框架，被广泛应用于构建响应式网站。
在前端开发实训中，使用Bootstrap可以极大地提高开发效率和网站的用户体验。
本文将介绍一个前端开发实训案例，探讨如何使用Bootstrap构建响应式网站。
一、案例背景我们假设有一个电商网站项目，需求是搭建一个响应式的网站，能够适配不同的设备和屏幕尺寸。
该网站需要展示商品、购物车、用户登录等常见功能，并能提供友好的用户界面和良好的用户体验。
二、项目准备在开始实训之前，需要准备一些开发工具和资源。
首先，在本地开发环境中安装一个集成开发环境（IDE）如Visual Studio Code，并确保已安装最新版本的Bootstrap。
其次，下载并准备好项目所需的图片、字体和其他资源。
三、项目结构为了保持项目的整洁和有序，我们可以按照一定的结构组织项目文件。
以下是一个简单的示例结构：- index.html：网站的首页文件- css/- style.css：自定义的样式表- bootstrap.min.css：Bootstrap框架样式表- 其他自定义样式表- js/- main.js：自定义的JavaScript脚本- jquery.min.js：jQuery库- bootstrap.min.js：Bootstrap框架脚本- 其他自定义脚本- img/：存放网站所需的图片资源- fonts/：存放网站所需的字体资源四、页面布局使用Bootstrap可以轻松实现网站的响应式布局。
在index.html中，我们可以使用Bootstrap的网格系统将页面划分为多个容器和栅格，以实现不同设备下的自适应布局。
例如：```html<div class="container"><div class="row"><div class="col-md-6"><!-- 左侧内容区域 --></div><div class="col-md-6"><!-- 右侧内容区域 --></div></div></div>```通过使用容器、行和列的组合，可以实现灵活的布局，使网站在不同屏幕尺寸下都能良好地展示。
响应式网页设计入门教程第一章：什么是响应式网页设计在移动设备广泛使用的今天，响应式网页设计已经成为了设计师必备的技能之一。
响应式网页设计是指一种设计方法，通过使用弹性布局、媒体查询和其他技术手段，使网页在不同的设备上能够自动调整布局和样式，以适应不同的屏幕尺寸和分辨率。
第二章：响应式网页设计的优势2.1 更好的用户体验响应式网页设计能够使网页在不同设备上都能正常浏览，用户无论使用手机、平板还是电脑，都能够获得良好的阅读和操作体验，提升用户满意度。
2.2 统一的内容管理响应式网页设计只需要维护一个网站或应用，无需为不同设备创建独立的版本，大大降低了内容管理和维护的工作量。
2.3 更好的搜索引擎排名响应式网页设计能够提供更好的用户体验，对SEO优化也有积极影响。
搜索引擎更倾向于显示适应不同屏幕的网页，这意味着响应式网页更有可能获得更高的排名。
第三章：响应式网页设计的关键技术3.1 弹性布局响应式网页设计使用弹性布局是实现自适应效果的基础。
通过使用百分比和媒体查询等技术，使网页中的元素能够根据设备的屏幕尺寸和方向进行相应的调整，保持良好的显示效果。
3.2 媒体查询媒体查询允许网页根据不同的媒体类型和特性，应用不同的样式规则。
通过媒体查询，可以针对不同的屏幕尺寸、分辨率和方向等参数，定义不同的样式，实现响应式布局和自适应效果。
3.3 图片优化在响应式网页设计中，图片通常是页面加载速度比较慢的主要原因，因此需要对图片进行优化。
可以使用响应式图片技术，根据设备的屏幕尺寸和分辨率，加载不同大小的图片，有效提升网页的加载速度和性能。
3.4 触摸与点击事件由于移动设备无法使用鼠标进行操作，响应式网页设计需要考虑触摸和点击事件。
通过使用适当的触摸事件和点击事件，实现网页在不同设备上的操作逻辑和用户交互效果。
第四章：响应式网页设计的实践步骤4.1 设计网页布局在响应式网页设计中，首先需要设计网页的基本布局。
可以使用弹性网格布局等灵活的布局方式，确保网页能够适应不同的屏幕尺寸和方向。
网站设计需求说明书网站设计需求说明书一、项目背景与目标1.1 项目背景该网站设计项目旨在为客户提供一个现代化、直观、易用且具有吸引力的网站，以展示客户公司和其产品、服务的信息。
1.2 项目目标本项目的目标是设计一个响应式网站，能够适应不同终端设备的显示，并具备以下特点：- 具有良好的页面加载速度，以提供良好的用户体验。
- 提供直观的导航结构和用户友好的界面，方便用户浏览网站内容。
- 以符合客户品牌形象的风格和色彩设计网站，体现公司的专业形象。
- 集成与第三方应用的功能和服务，以提供更多的交互和功能性。
二、网站内容与功能需求2.1 网站结构与导航设计一个清晰、直观的网站导航结构，包括主菜单和底部导航。
主菜单应包含以下主要页面：- 首页：展示公司概况、核心价值观等。
- 产品/服务：提供详细的产品/服务信息和特点介绍。
- 解决方案：展示公司的解决方案和成功案例。
- 新闻/文章：发布公司动态、新闻和行业相关文章。
- 联系我们：提供联系方式和在线表单以便用户与公司取得联系。
2.2 首页设计设计一个引人注目的首页，体现公司的专业性和吸引力。
首页应包括以下主要内容：- 公司简介和核心价值观的概述。
- 重点展示的产品/服务或特别推荐。
- 公司的优势和竞争力的亮点。
- 最新的新闻和动态。
2.3 产品/服务页面设计为每个产品/服务设计独立的页面，以展示产品/服务的详细信息、特点和使用案例，并包括以下内容：- 产品/服务的描述和说明。
- 主要特点和功能的介绍。
- 高清的产品/服务图片和视频。
- 客户评价和推荐（如果适用）。
- 提供产品/服务的购买或申请信息。
2.4 解决方案页面设计提供一个页面展示公司的解决方案和成功案例。
该页面应包括以下内容：- 各个解决方案的描述和概述。
- 实际案例的详细信息和效果展示。
- 解决方案的特点和优势的介绍。
- 与该解决方案相关的产品/服务的。
2.5 新闻/文章页面设计提供一个用于发布公司新闻、动态和行业相关文章的页面。
前端开发实训案例构建响应式网页设计一. 案例介绍随着互联网的发展和用户需求的不断变化，响应式网页设计成为前端开发中的重要环节。
本文将通过一个前端开发实训案例，详细介绍如何构建一个响应式网页设计。
二. 实训需求分析1. 了解实训目标：明确实训的目的，是为了提高学生对响应式设计的理解和实践能力。
2. 分析用户需求：根据用户群体的特点和需求，确定实训案例的具体内容。
3. 设计网页结构：确定网页的布局和整体框架，包括导航栏、内容区域、底部等。
三. 网页设计与开发1. 响应式设计理念：介绍响应式设计的概念和原理，包括流动网格、弹性图片和媒体查询等。
2. HTML结构设计：使用语义化的HTML标签，按照网页结构要求进行标签的嵌套和布局。
3. CSS样式设计：通过CSS选择器和属性设置，对网页的样式进行定制化设计，包括颜色、字体、背景等。
4. 媒体查询技术：利用媒体查询技术，根据不同设备的屏幕尺寸和显示能力，调整网页布局和样式。
5. 图片和多媒体元素：优化图片和多媒体元素的加载和显示，提高网页的性能和用户体验。
四. 响应式网页实施与测试1. 响应式布局测试：使用不同尺寸的设备进行网页布局测试，包括桌面、平板和手机等。
2. 浏览器兼容性测试：在不同的浏览器和版本上进行兼容性测试，确保网页在各种环境下的正常显示。
3. 设备适配性测试：测试网页在各种设备上的适配性和用户体验，包括操作便捷性和页面加载速度等。
4. 调试与优化：根据测试结果进行网页的调试和优化，修复存在的Bug和提升网页的性能。
五. 实训心得与总结通过本次前端开发实训案例，我深刻理解了响应式网页设计的重要性和实践技巧。
在实践过程中，我学会了使用HTML和CSS创建网页结构和样式，并运用媒体查询和优化技巧实现网页的响应式设计。
通过测试和调试，我进一步提升了网页的兼容性和用户体验。
实训过程中遇到的问题和解决方法也使我得到了成长和进步。
六. 结束语通过这个实训案例，我深刻认识到前端开发中响应式网页设计的重要性，它能够为用户提供更好的访问体验，适用于不同的设备和屏幕尺寸。
教你使用Dreamweaver进行响应式网站开发一、Dreamweaver简介Dreamweaver是一款由Adobe公司开发的网页设计和开发工具，可用于创建和管理响应式网站。
它通过直观的界面和强大的功能，帮助开发人员轻松实现对不同设备和屏幕分辨率的适应。
二、创建新的响应式网站1. 打开Dreamweaver软件，点击"文件"->"新建"->"网站"。
2. 在“网站基本信息”中，填写项目名称、本地文件夹和远程服务器信息等，然后点击“下一步”。
3. 在“建立基本网页”中选择响应式布局，并选择适合的网格系统。
4. 定义媒体查询规则，可根据需要添加不同的断点，并调整布局和样式。
5. 点击“创建”按钮，Dreamweaver将自动生成响应式网站的初始文件。
三、布局和样式设计1. 使用视图面板可以快速切换不同设备的预览模式，如桌面、平板和手机。
2. 在设计视图下，可以拖拽元素到页面上进行布局设计。
可以使用各种工具和面板来设计页面的样式。
3. 使用CSS面板来编辑样式，可以为不同的媒体查询添加自定义样式。
4. 使用Dreamweaver的网格系统，可以轻松实现元素的栅格布局。
5. 使用“适应性设计”功能可以根据屏幕分辨率调整布局和样式，以提供更好的用户体验。
四、添加多媒体内容1. 可以使用插入菜单中的多媒体选项来添加图片、视频和音频等内容。
2. 可以使用多媒体面板来管理添加的多媒体文件。
3. 可以通过设置属性来调整多媒体文件的大小、比例和样式。
4. 使用Dreamweaver的响应式功能，可以根据不同设备的屏幕分辨率和尺寸来自动调整多媒体内容的布局和样式。
五、添加交互功能1. 可以使用Dreamweaver提供的交互工具来添加按钮、表单和导航菜单等交互元素。
2. 使用行为面板，可以为交互元素添加各种动作和事件，如点击、悬停和提交表单等。
响应式网站案例响应式网站是一种能够自适应不同屏幕尺寸和设备的网站设计。
下面是一个响应式网站的案例。
我曾经设计了一个响应式网站用于一家电子商务公司的产品推广。
这个网站主要用于展示公司的产品和吸引更多的潜在客户。
首先，我使用了HTML5和CSS3来构建整个网站。
这些技术使得网站在不同设备和屏幕尺寸上都能够良好显示，并且具有良好的用户体验。
在网站的设计中，我采用了简洁明了的风格，使用了大量的图片和图标来吸引用户的注意力。
同时，我也使用了醒目的颜色和字体来突出公司的品牌形象。
在网站的布局上，我采用了流式布局和栅格系统。
通过使用流式布局，网站能够根据不同设备的屏幕尺寸自动调整布局，保证内容的完整显示。
而栅格系统则使得网站的布局更加整齐和一致。
另外，我还对网站进行了图像优化和加载速度优化。
通过对图片进行压缩和懒加载的处理，网站的加载速度大大提升，提供了更好的用户体验。
在网站的导航上，我采用了响应式导航菜单。
当用户在大屏幕设备上访问网站时，导航菜单以水平方式显示；而当用户在小屏幕设备上访问网站时，导航菜单以垂直方式折叠，以节省空间。
最后，在网站的交互设计上，我添加了一些动画效果和滚动特效。
这些动画和特效能够增加网站的趣味性和吸引力，提升用户对产品的兴趣。
通过以上的设计和优化，这个响应式网站不仅在PC端上具有良好的显示效果，同时也能在手机和平板等移动设备上流畅运行。
这为公司的产品推广提供了更多的渠道和机会，并提升了公司的品牌形象。
总的来说，响应式网站在不同设备和屏幕尺寸上都能够自动调整布局和显示效果，提供了更好的用户体验。
设计一个响应式网站需要考虑到各种因素，如布局、颜色、导航和交互等，以满足不同设备和用户的需求。
而这个案例是一个成功的响应式网站设计，为公司的产品推广和品牌形象提供了良好的展示平台。
如何在Dreamweaver中进行响应式设计Dreamweaver是一款广泛使用的网站制作工具。
对于新手和有经验的开发人员来说，进行网站设计时，能够掌握Dreamweaver的响应式设计功能非常重要。
本文将介绍如何在Dreamweaver中进行响应式设计。
了解响应式设计响应式设计是一种设计方式，可以根据用户设备的不同，对网站进行适当尺寸和布局调整，从而提供更好的用户体验。
这种设计方式涉及到HTML、CSS和JavaScript等多种开发技术。
Dreamweaver中的响应式设计功能Dreamweaver是一个功能强大的网站制作工具，贯穿着响应式设计特性。
使用虚拟设备查看布局在Dreamweaver中，您可以使用内置的虚拟设备来模拟在不同设备上查看网站的效果。
只需点击“查看”菜单下的“虚拟设备”，即可在设备里查看布局。
使用响应式布局网格Dreamweaver中的响应式布局网格是一种固定、栅格化的布局，支持在不同设备上进行响应式设计。
在布局视图中，您可以拖拽栅格来定义不同屏幕尺寸下区域的布局。
此外，您还可以通过“管理布局”对网站进行排版和修改。
使用CSS媒体查询CSS媒体查询是一种开发技术，可以根据不同设备宽度应用不同的CSS规则。
在Dreamweaver中，您可以使用CSS媒体查询来重新定义在不同设备上的元素样式，以达到响应式设计的目的。
使用插件Dreamweaver还支持许多第三方插件，用于提高响应式设计的效率。
例如，Bootstrap和Foundation等流行的网站框架就有自己的Dreamweaver插件。
这些插件提供了一些响应式设计相关的组件和模板，可以快速构建响应式网站。
关于响应式设计在进行响应式设计时，还有一些需要牢记的常识。
首先，根据您的用户群体，明确网站的设计目标。
这样您就能更准确地投入时间和资源来开发一个优秀的响应式网站。
其次，考虑使用图片优化等更高效的技术，来缩短加载时间并提升用户体验。
网站建设需求说明书一、背景和目标随着互联网的普及和发展，网站已成为企业宣传和推广的重要工具。
一个现代化、用户友好的网站对于企业的形象塑造和品牌推广至关重要。
因此，为了满足企业对于建设一个能够展示核心业务、提供在线服务和吸引潜在客户的网站的需求，本文为网站建设制定了一系列的需求说明。
二、整体要求1. 响应式设计：网站需要能够自适应不同终端设备的屏幕尺寸，包括桌面、手机和平板等设备。
2. 浏览器兼容性：网站应在主流浏览器（如Chrome、Firefox、Safari和Edge等）上保持良好的显示效果。
3. 内容管理系统：可通过后台管理界面对网站内容进行更新和管理，并支持多种内容格式，包括文本、图片和视频等。
4. 前端性能优化：网站需要具备较快的加载速度，减少用户等待时间。
5. SEO友好：网站需要按照搜索引擎优化的要求进行设计，以提高在搜索引擎排名中的竞争力。
三、页面和功能需求1. 首页：展示企业的核心业务和品牌形象，包括企业简介、新闻动态和联系信息等。
2. 产品/服务页面：详细介绍企业的产品或提供的服务，包括文字、图片和视频等形式。
3. 新闻/博客页面：展示企业的新闻动态、行业资讯以及与客户分享的意见和见解等。
4. 客户案例页面：展示企业的成功案例和与客户的合作情况，包括文字、图片和视频等形式。
5. 联系我们页面：提供企业的联系信息，包括电话号码、地址和在线留言功能等。
6. 在线服务：为用户提供在线预约、查询和支付等功能，方便用户获取相关服务。
7. 用户注册与登录：为用户提供注册和登录功能，以提供个性化的服务和管理功能。
8. 多语言支持：支持多种语言，方便不同国家和地区的用户浏览和操作。
四、安全和隐私1. 数据安全：确保网站数据的安全性和完整性，防止被未授权的访问和篡改。
2. 隐私保护：确保用户个人信息的安全性和保密性，符合相关隐私保护法规的要求。
3. 防止恶意攻击：具备一定的安全防护措施，如防止DDoS攻击和SQL注入等。
响应式设计规范引言随着移动设备的普及，响应式设计已成为现代网页设计的重要原则。
本文档旨在规范响应式设计的实施步骤以及相关注意事项，以确保网页在不同设备上都能提供一致的用户体验。
设计原则- 可伸缩性：网页应能根据浏览器窗口大小和设备屏幕尺寸自动调整布局和内容展示。
可伸缩性：网页应能根据浏览器窗口大小和设备屏幕尺寸自动调整布局和内容展示。
- 用户导向：响应式设计应着重于提供最佳的用户体验和导航方式，确保用户可以轻松访问和操作网页。
用户导向：响应式设计应着重于提供最佳的用户体验和导航方式，确保用户可以轻松访问和操作网页。
- 内容优先：在不同设备上展示内容时，应优先显示最重要和核心的信息，以确保用户获取想要的信息并提高用户满意度。
内容优先：在不同设备上展示内容时，应优先显示最重要和核心的信息，以确保用户获取想要的信息并提高用户满意度。
实施步骤1. 断点设置：为不同设备设置断点，根据分辨率或屏幕尺寸确定布局的变化点。
常见断点包括手机、平板和桌面。
断点设置：为不同设备设置断点，根据分辨率或屏幕尺寸确定布局的变化点。
常见断点包括手机、平板和桌面。
2. 弹性网格布局：使用弹性网格布局来调整网页元素的排列和尺寸，确保布局在不同设备上都能自适应。
弹性网格布局：使用弹性网格布局来调整网页元素的排列和尺寸，确保布局在不同设备上都能自适应。
3. 媒体查询：使用媒体查询来根据设备屏幕尺寸和特性应用不同的样式。
例如，针对小屏幕设备隐藏多余元素，调整字体大小等。
媒体查询：使用媒体查询来根据设备屏幕尺寸和特性应用不同的样式。
例如，针对小屏幕设备隐藏多余元素，调整字体大小等。
4. 图片优化：根据设备屏幕分辨率加载合适大小的图片，避免加载过大的图片导致页面加载缓慢。
图片优化：根据设备屏幕分辨率加载合适大小的图片，避免加载过大的图片导致页面加载缓慢。
5. 触摸友好：针对触摸屏设备的操作惯进行设计，例如增大按钮尺寸、增加滑动操作等。
触摸友好：针对触摸屏设备的操作习惯进行设计，例如增大按钮尺寸、增加滑动操作等。
今次的译文中，我们继续响应式Web设计方面的话题。
前面的几篇相关文章以概念诠释、方法说明为主，本篇则围绕一个实际网站案例展开，从需求、流程、步骤细节等方面描述了响应式设计在项目中的实践方式。
本篇的部分内容要点会与之前几篇产生交集；我们会在这些地方提供相应文章的入口，便于深入参考阅读。
接下来进入正文。
根据DailyTech的统计，到2015年，移动互联网的用户数量将会超过桌面用户。
除了智能手机之外，使用平板电脑甚至是电视机进行上网的用户也在持续增加。
在这种形势下，怎样让我们的网站尽量兼容各种类型的设备，并确保优良的用户体验，这将是越来越重要的问题。
通过响应式的设计开发方式，我们可以使网站页面随浏览设备的不同而自行响应，动态的调整布局结构、元素规格样式，将相同的内容以不同的格式呈现给不同设备的用户。
如果你对响应式Web设计还不大了解，可以先参考阅读我们之前的关于响应式设计的概念、组成要素及基本实现思路方面的文章，全方位预热一下。
什么情况下适宜采用响应式Web设计的方式当客户提出产品功能移动化的需求时，有一些解决方案可供我们选择，包括原生客户端应用、Web应用等；究竟怎样的方式更合适，还是取决于具体的需求情况。
另外也要考虑网站本身是否需要实施移动化。
虽然响应式站点并不能算是一种纯粹的移动化解决方案，但是，在某些情况下，这种方式是非常值得考虑的。
你心里没谱设计开发一个全新的移动版本站点或是客户端应用，整个过程是有很大挑战性的。
除非产品正式上线，否则你无法真正了解它是否会成功。
与其单纯的为了移动化而花费资源打造移动版本站点或是开发客户端应用，不如先花些心思将原本的网站打造的更具弹性，使其在各种主流移动设备中都拥有尽量优秀的用户体验。
你想节约成本要打造响应式站点，自然离不开有经验的交互、视觉设计及前端开发人员。
所需的资源，尤其是时间方面，比起普通网站来说大约增加20%到30%的样子；但比起单独打造移动版本的网站，或是设计开发客户端应用的成本来说，却要低很多。
从维护的角度来说，也会轻松很多。
你希望网站可以兼容未来的新设备所谓的移动版本站点，通常是针对某类具体规格的设备进行单独打造的，弹性比较差。
新的移动设备层出不穷，传统的移动版本站点需要不断的进行更新维护，才能尽量保证在新设备中工作良好。
响应式设计可以根据设备浏览环境的具体规格进行判断，使用不同的呈现方式来展示内容，无需针对某种特定的规格进行维护，适应性更好。
更多关于网站移动化的方式选择，可以参考我们之前的文章“走出移动互联网的迷宫- 网站移动化的方法策略”。
响应式网站页面的设计流程我们将使用一个真实的酒店网站作为范例，来演示响应式Web设计的流程。
这个网站是我们在九月份刚刚为Macdonald连锁酒店创建的。
在整个设计开发流程中，有几个关键步骤，是我们接下来要逐一展开学习的：1.用户研究与设备规格预估2.制作线框原型3.视觉设计4.前端构建用户研究与设备规格预估前期，通过用户调研，我们可以了解到用户群所使用的设备类型分布情况，并预估出几种典型的响应规格，用来规划不同的呈现方式。
有几个问题需要特别考虑下：∙用户在不同设备上的目标有多大区别？过去，我们通常会假设用户在使用移动设备访问网站时，其行为都是高度目标驱动化的，例如在旅途中获取酒店地址、预订房间一类。
但实际情况不仅如此——智能手机、平板电脑等各类移动设备的用户，会越来越多的在相对稳定从容的状态下使用网络。
所以在很多时候，用户使用不同设备的目标差别并没有想象的那么大，我们不能片面的假设不同类型设备的用户对功能的需求差异。
∙关于功能与内容呈现，从技术的角度出发，需要考虑哪些？对于功能繁多复杂的网站，需要针对不同的设备类型进行功能和内容的优先级排序，以便在开发阶段通过CSS定义不同的响应规则，以最合理的样式规格和布局方式进行呈现；尤其对于手机等小屏幕设备，需要多花些心思。
制作线框原型通过线框图，我们可以对响应式的视觉效果背后的逻辑结构进行规划和定义。
(关于线框原型，可以参考我们之前的“线框原型的本质及实践应用概述”)我们根据之前一步的研究和预估结果，规划出几种比较典型的屏幕尺寸规格。
本次案例中，我们选择了三款具有代表性的主流设备，包括桌面显示器、iPad和iPhone，因为根据我们的用户研究结果，使用这三种设备的用户占了绝大部分。
需要强调一下，响应式设计的目的在于，针对不同设备的屏幕规格区间，进行功能及内容的输出格式预设。
所以我们只需要选取一些具有代表性的设备，而不必顾全所有已知的规格类型；我们制作线框原型的主要目标是规划样式背后的逻辑。
在这个阶段，我们必须清楚，整个网站中有哪些关键页面是在功能和布局方面具有代表性的。
对于这次的案例网站，“关键页面”包括首页、预订流程中的页面、酒店详情页面等。
1.开始规划首先来定义每种关键规格中的结构网格。
我们创建了三个页面模板，宽度分别为1024像素(桌面显示器)、768像素(iPad竖屏宽度)、320像素(iPhone竖屏宽度)。
如上图所示，从每列等宽的情况入手，可以让规划工作相对简单一些，帮助我们将注意力放在响应式的布局改变上。
2.沟通与评审接下来我们需要考虑的是，每一列中的模块组件应该以怎样的方式随着页面的宽度缩放而响应式的适应和调整。
在这个过程里，保持团队成员之间的沟通是非常重要的，包括视觉设计师、前端开发人员等；使用初步的线框原型，与大家交流模块组件在布局和样式方面的调整计划，尽量在初期就让相关成员对整个规划做到心中有数，并尽早发现前端实现等方面的潜在的问题。
3.首页也许对于你自己的实际项目来说，其他页面的重要程度或代表性是超过首页的。
这不是问题，你可以调整具体的页面规划次序；我们的这个项目案例是从首页开始入手的。
下图中展示的，就是我们为首页制作的三种响应规格的线框原型。
4.全局导航我们创建了一个简单的横向导航条，其宽度可以随着屏幕宽度的变化而调整；在最后一种规格的范围里(320像素以下)，导航条会折行显示，以保证导航元素的可读性。
头部中其他元素的调整方式与全局导航的类似。
在这一步中，最好提前考虑一下关于组件元素的样式问题，做好与视觉设计师的交流沟通。
比如，对于导航元素，如果使用复杂的tab式背景，就很有可能在小屏幕设备中、特别是导航条折行的情况下产生样式问题。
5.页脚默认尺寸下，页脚由四列内容组成；另外两个规格范围中，布局分别为三列和一列；内容模块随文档流向下依次扩展即可。
6.其他模块组件全局的四列等宽网格布局使其他组件的规划也非常轻松。
在首页中有一个组件，其中包含若干内容模块。
默认尺寸下，可以并排显示四个模块；左右两边各有一个触发滚动的按钮，以点击之后模块列表会前后滚动，以显示更多内容。
在平板电脑类型的布局中，默认显示的数量变为三个；而在手机的小尺寸屏幕中，内容模块列表会变为单列，并去掉了用于左右滚动的按钮，用户可以上下滚动页面，依次查看不同的模块。
类似的，其他涉及到多列显示的组件和模块都需要做这样的考虑。
要了解不同设备的用户所习惯的操作方式，同时结合该设备的屏幕宽度规格，设计出最合理的布局及交互方式。
7.测试线框原型我们可以在线框原型的初稿完成之后，将其图片导入对应的设备中，进行一些简单的初步测试。
试着上下或左右滚动原型界面，感受导航与功能、内容的布局，完成一些假设的获取信息的目标。
这样的测试可以帮助我们尽早的检验页面在可访问性及可读性等方面的潜在问题。
对于手机用户来说，有一个问题：多数页面在首屏中只能显示网站名、全局导航和搜索等功能；用户点击全局导航中的链接之后，即使页面正常的进行了跳转，也会给人一种错觉，好像页面并没有发生变化；除非滚动页面，通过查看页面的主要内容部分，来判断当前是否处于自己的目标页面。
一个常见的解决方法是，对于小屏幕设备，将全局导航与主要内容之间的部分设计为可以展开或收起的容器，默认状态为收起，这样即能使主要内容可以呈现在首屏中，也可以保证功能的可用性。
网页视觉设计相比于传统的Web视觉设计过程，在这里我们不仅要打造出风格恰当的UI元素，而且要根据前面制定下来的几种规格方案，对某些关键性的UI元素进行样式扩展或改造。
例如下图所示的酒店搜索模块，正如我们前面提到的，在小屏幕版本中，最佳实践方式是做成可展开和收起的模式，而这种交互方式在平板电脑或桌面设备中是不需要的。
类似这样情况，在视觉设计方面需要花些额外的功夫。
在视觉设计过程中，有一些很实际的经验和原则：∙尽量保持小屏幕规格样式的简洁；在UI元素风格方面，可以多与前端开发人员交流，尽量采用可以通过CSS3实现的常规风格样式，减少背景图片的使用。
∙要保证内容的字体字号在所有设备中都足够可读，尤其是在手机上。
∙与传统Web设计开发相似，最终产出的页面必定会与视觉稿有所出入；尤其对于响应式站点来说，由于在布局结构和细节样式等方面都需要有调整变化的能力，所以在开发过程中产生设计还原度方面问题的几率会更大。
仍然要强调一点，就是在项目前期和中期保持设计师与开发者之间的交流与沟通，尽可能早的发现各类潜在问题。
下图就是针对三种设备规格的首页最终视觉稿。
前端构建来看一些在前端构建的过程中需要注意的问题；关于技术性的细节问题，仍不会在这里过多讨论。
(技术实施方面，可以参考我们之前的文章“通过CSS3 Media Query实现响应式Web设计”)∙关于图片尺寸对于小屏幕规格的设计方案，即使我们通过CSS缩小其显示尺寸，在文件资源方面仍然是要加载完整的大图的。
所以我们在优化保存文件图片的时候要尽可能的让文件更小。
不过另外有些方法，可以帮助我们真正实现图片文件的响应化。
大致思路是，通过JavaScript判断当前设备的分辨率规格范围，并根据预设的规则加载不同尺寸的图片文件。
详情可以参考我们之前文章中关于响应式图片的部分。
∙使用高级CSS让客户或需求方理解“渐进增强，平稳退化”的思路是很重要的，对于传统Web 设计开发也是如此。
对响应式站点来说，CSS3在降低资源消耗、提高页面加载速度等方面的作用尤为重要。
∙及时沟通正如我们在前文中多次强调的，保持设计师与开发者之间的密切沟通和交流，对于项目的顺利进展会起到不可估量的作用；换个角度说，如果这方面做的不好，很多致命的潜在问题则有可能在项目后期集中爆发出来。
