利用扩展双屏技术及Chrome浏览器,快速剖析优秀网页Div及CSS构成,并高效实现原型创作
来源:互联网 发布:数据直报系统是什么 编辑:程序博客网 时间:2024/05/16 08:05
学习目标:
作为一个Web前台设计人员,应该充分利用可利用的硬件条件及专业的软件工具,迅速进入到高效氛围当中.实践中,我们可以利用扩展桌面双屏技术及Chrome浏览器快速剖析优秀网页Div及CSS构成,并快速实现原型创作,不妨为一个好的实践手段。
制作步骤
一.台式机安装一个双头显卡,可以实现主机箱上外接两个显示器,(提示:如果是笔记本电脑,可以直接外接一个显示器,不用再额外安装显卡),然后,设置扩展桌面,设置方法请点击此处,有详细讲解,最终效果如下图所示,主显示器上有桌面图标,第二显示上没有任何东西。
二.然后启动google浏览器Chrome,然后把浏览器拖到左面的第二显示器上,并访问一些优秀的打算学习的网页:比如:http://women.sohu.com,如下图所示:
三.如下图所示,右击你感兴趣的网页局部,在弹出的菜单中,点击【审查元素】命令.
四.下方打开一个元素审查页面,然后,点击左下角命令:Undock into separate window,如下图:
五.左面的主显示显示 审查元素的界面,右面的副显示器显示浏览的页面,通过点击右面浏览器页面局部元素或点击点击左面审查元素,定位到你关注的局部代码
六.同时,可以下载相关的资源文件,比如:CSS背景图片,如图所示:
下载后的CSS背景图片文件,如下图:
七:找到相关的CSS选择器内容并复制:
八.复制的相关图片及CSS内容至Dreamweaver网站中,重新进行原型创造,如下图所示:
最终页面原型创作效果:
0 0
- 利用扩展双屏技术及Chrome浏览器,快速剖析优秀网页Div及CSS构成,并高效实现原型创作
- 浅谈网页CSS及DIV快速布局
- chrome浏览器常用扩展程序及插件
- 网页设计(div css)之浏览器不兼容性问题及解决方法
- 浏览器构成及工作原理
- css去除chrome浏览器输入框默认样式填充及chrome浏览器滚动条样式设置
- DIV+CSS网页兼容所有主流浏览器技巧(IE6/IE7/IE8/IE9/Firefox/Chrome)
- 使用div+CSS布局浏览器不兼容原因及解决办法
- DIV+CSS 多浏览器兼容性问题及推荐解决方案
- Chrome 扩展工具及命令
- DIV+CSS网页布局及网站设计常犯错误
- DIV+CSS网页布局及网站设计常犯错误
- DIV CSS网页制作的流程及方法
- chrome浏览器及flash插件
- 网页表单文档设计及技术实现
- div+css浏览器中的网页视觉效果
- DIV+CSS实现网页布局
- Axure谷歌浏览器Chrome扩展程序下载及安装方法
- CSS 和 JavaScript 标签 style 属性对照表
- mysql 完全删除
- 性能问题案例01——sybase数据库内存问题
- Android--记录和恢复listView滚动位置的3种方法
- 靓丽打造立体质感多边形星光宝石之教程
- 利用扩展双屏技术及Chrome浏览器,快速剖析优秀网页Div及CSS构成,并高效实现原型创作
- 如何做一个软件需求分析师
- json与lua的交互源码
- 蹭网还是手机3G,都要注意了
- Block之自定义与回调
- 常用Xcode插件
- 关于UIWebView和PhoneGap的总结
- delegate
- hibernate注解 级联删除