网页设计 行高 第1篇
响应式设计指的是不同设备、屏幕、分辨率、操作方式（鼠标、键盘、触摸），保证信息在不同环境下表现一致，保证可交互可操作。
由于页面的宽度发生了变化，进而信息展现也改变了就是响应式设计。直到最后在手机屏幕上的显示图片信息变成了一列。
对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）
无论基于哪种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（当页面宽度发生变化的尺寸范围就是临界点的概念。所以做响应式设计时我们需要知道每一个尺寸的宽度范围在多少时我们就可以制定出相对应清晰的一个临界点，制定了临界点之后就知道，当屏幕的宽度范围位于哪一个点的时候，我们的页面信息该如何展示。）
我们通过JS获取设备的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。
网页设计 行高 第2篇
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu
工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search
滚动条:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap
以上命名规范仅供参考
网页设计 行高 第3篇
尽量考虑为元素命名其本身的作用或”用意”，达到语义化。
不要使用表面形式的命名.
如:red/left/big等。
组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news
涉及到交互行为的元素命名
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited
网页设计 行高 第4篇
在前面提到过，如果网站的需求是响应式的设计，这时，设计师们一定一定先问一下前端他们准备如何实现响应式布局，而不是把设计稿完成后交给他们后YY他们能百分百给你复现你的设计稿。
关于响应式的栅格系统，首先声明一点，当前端乐意并了解CSS原理和框架的构建方式时，可以构建其他样式的网格，比如7、9、11、13等等，甚至各种异形网格，但在绝大多数情况下，更多的前端攻城狮青睐于高（tou）效(lan)，而他们常用的css框架除了Bootstrap(宽480/768/992/1200,12列)，还有一堆叫不出名字的轻量css框架（毕竟栅格系统只是Bootstrap的一部分，如果只是需要一个响应式的css的话，可选的非常多，比如），除此之外，有可能你那可爱的前端攻城狮用的是flexbox实现响应式弹性布局，所以在一切未知确定下来之前，请放下架子，请教一下开发人员，因为虽然不想承认，但这种情况下是前端来指导设计。值得庆幸的是，这种情况在现实中非常少的，（但不排除你接手的是一个二次开发的项目等等之类），确定他们使用哪种框架之后，设计师可以开始自己的工作了。
下面也举个例子，是960gis的。
看完你也许会明白为什么涉及到栅格化布局需要前端来确定了，960gis的css框架给出了三种方案，24列16列12列，设计师要在这个基础上进行设计。一旦需要栅格化布局，意味着设计师自由发挥的空间再次缩减，只有在这三个方案上选一种。这些方案从何而来呢？很简单，你只要向前端索取他使用的框架的psd模板即可，里面参考线都是建好的。而前端一定会非常乐意帮你这个忙，理由很简单，你按照他使用的框架规范进行设计也是在一定程度上缩减他的工作量，皆大欢喜。比如下面这张，就是目前最新的Bootstrap4的psd文件的截图。
设计师也可以自给自足，一般这些css框架库都会提供下载途径。尤其是Bootstrap，作为成熟的框架，很多模板文件可以套用。栅格化布局以使用的css框架库为准则，让前端开发提供给设计师再好不过。
网页设计 行高 第5篇
综合考虑到Window XP已经逐渐退出市场，在实际操作时，我们 以710px 作为依据。
如下图所示，蓝色区域则是我们设计时需要着重考虑的首屏范围。
另外，是关于图片尺寸的问题。
需要全屏显示的图片，宽度尺寸严格设计为1920px。
但是值得注意的是，图片内容的有效范围不能超过网页内容的有效范围，即控制在1200px以内。
避免遇到小屏幕设备时，内容显示不全，而造成信息的遗漏的情况。
网页设计 行高 第6篇
对于是否采用栅格化设计，采用下面几个案例说明一下：
（企业站之类-以介绍几种单一产品为主）
（功能型网站）
（不拘泥形式的设计形式）
针对这三个具有代表性的案例，栅格化设计是没有必要的。理由很简单，栅格的优点也是缺点，规范意味着统一也意味着限制，在以上的案例中，无需用栅格来限制设计师的灵感，毕竟这个社会，还是需要设计感的。
但绝大多数情况下，推荐栅格化设计。尤其是图文混排、版块很多的网站，栅格化设计会让内容杂乱无章的页面呈现清爽感。
关于栅格化布局，方案非常多，来看下面几个案例，我们都称之为栅格化设计。
（广义的栅格化系统-无间距的单元格）
（广义的栅格化系统-有间距的单元格）
（广义的栅格化系统-有间距的单元格）
对于不需要考虑页面响应（换句话说，和框架无关）的网页设计，原则可以简化成一句话：“由设计师自由决定”。
网页设计 行高 第7篇
强调栅格化设计（grid-design）和栅格化布局（css grid）分开描述，是个人理解这完全属于两个不同的工作，前者针对网页设计师，而后者针对前端开发人员。栅格化设计是不需考虑页面的响应的基于栅格系统的设计，主要是为了提高网页的规范性。对于一些中规中矩的网站，或者说一般创意型的网站，栅格化设计还是非常推荐的，尤其是一些规模大周期长，后期需要不断迭代的项目，栅格化设计让网页呈现出专业可信赖感，并有助于后期的维护。而栅格化布局，特指前端攻城狮使用的css框架，来实现页面的响应式布局。
响应式设计只是网页设计的一个折中方案，依赖于项目实际情况进行选择。对于设计师来说，如果没有必须的要求，可选择广义的栅格系统，并在此基础上自由发挥创意。