利用扩展双屏技术及Chrome浏览器,高速剖析优秀网页Div及CSS构成,并高效实现原型创作

作为一个Web前台设计人员,应该充分利用可利用的硬件条件及专业的软件工具,迅速进入到高效氛围其中.实践中,我们能够利用扩展桌面双屏技术及Chrome浏览器高速剖析优秀网页Div及CSS构成,并高速实现原型创作,最好还是为一个好的实践手段。

一.台式机安装一个双头显卡,能够实现主机箱上外接两个显示器,(提示:假设是笔记本电脑,能够直接外接一个显示器,不用再额外安装显卡),然后,设置扩展桌面,设置方法请点击此处,有具体解说,终于效果例如以下图所看到的,主显示器上有桌面图标,第二显示上没有不论什么东西。

二.然后启动google浏览器Chrome,然后把浏览器拖到左面的第二显示器上,并訪问一些优秀的打算学习的网页:比方:http://women.sohu.com,例如以下图所看到的:

三.例如以下图所看到的,右击你感兴趣的网页局部,在弹出的菜单中,点击【审查元素】命令.

四.下方打开一个元素审查页面,然后,点击左下角命令:Undock into separate window,例如以下图:

五.左面的主显示显示 审查元素的界面,右面的副显示器显示浏览的页面,通过点击右面浏览器页面局部元素或点击点击左面审查元素,定位到你关注的局部代码

六.同一时候,能够下载相关的资源文件,比方:CSS背景图片,如图所看到的:

下载后的CSS背景图片文件,例如以下图:

七:找到相关的CSS选择器内容并复制:

八.复制的相关图片及CSS内容至Dreamweaver站点中,又一次进行原型创造,例如以下图所看到的:

终于的页面原型创作效果例如以下: