来讲讲：网页计划过程当中保举的定名标准
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。网页制造poluoluo文章简介：这套WebUI计划定名标准总结自我的一些Web计划履历和外洋计划师的定名体例保举。
比来事情其实是忙碌，以是很久没有更新本人的博客了，其实是对不起列位读者。明天十分困难闲上去半天，以是和人人分享一下我之前总结的一套WebUI计划定名标准，也就是网站用户界面计划(俗称网页计划)定名标准。这套标准并不是纯真的CSS、html或JavaScript定名标准，它触及了良多利用PhotoShop这类计划工具举行网页计划过程当中的定名标准。(很久没写文章了，有点罗嗦，吼吼~)。起首我是出于公司几位美工的计划最终效果源文件没有对图层定名而入手下手思索总结一套的，另有一个缘故原由就是网上年夜多定名标准都是关于编码的，也就是那些css、html、js和一些服务器端言语的，至于计划方面的定名标准其实是很少。可是究竟计划师也是手艺团队的成员，并且前端开辟工程师是要利用计划师的最终效果源文件的，以是一致定名标准和计划标准关于团队的合作和事情效力一定是有优点的。
这套WebUI计划定名标准总结自我的一些Web计划履历和外洋计划师的定名体例保举。
WebUI计划定名标准
一.网站计划及基础框架布局:
1.Container
“container“就是将页面中的一切元素包在一同的部分，这部分还能够定名为:“wrapper“,“wrap“,“page“.
2.Header
“header”是网站页面的头部地区，一样平常来说，它包括网站的logo和一些其他元素。这部分还能够定名为:“page-header”(或pageHeader).
3.Navbar
“navbar“同等于横向的导航栏，是最典范的网页元素。这部分还能够定名为:“nav”,“navigation”,“nav-wrapper”.
4.Menu
“Menu”地区包括一样平常的链接和菜单，这部分还能够定名为:“subNav“,“links“，“sidebar-main”.
5.Main
“Main”是网站的次要地区，假如是博客的话它将包括的日记。这部分还能够定名为:“content“,“main-content”(或“mainContent”)。
6.Sidebar
“Sidebar”部分能够包括网站的主要内容，好比比来更新内容列表、关于网站的先容或告白元素等…这部分还能够定名为:“subNav“,“side-panel“,“secondary-content“.
7.Footer
“Footer”包括网站的一些附加信息，这部分还能够定名为:“copyright“.
二.必要注重的几点:
1.只管思索为元素定名其自己的感化或”意图”，到达语义化。不要利用外表情势的定名.
如:red/left/big等。
2.组合定名划定规矩:
[元素范例]-[元素感化/内容]
如:搜刮按钮:btn-search
登录表单:form-login
旧事列表:list-news
3.触及到交互举动的元素定名:
凡触及交互举动的元素一般会有一般、悬停、点击和已扫瞄等分歧款式，定名可参考以下划定规矩:
鼠标悬停:：hover点击：click已扫瞄：visited
如:搜刮按钮:btn-search、btn-search-hover、btn-search-visited
三.Photoshop图层布局标准:
Photoshop图层定名遵守树形布局，凡某元素构成的图层年夜于3层，便可构成组，一切图层只管制止利用默许定名(图层+编号)。
第一级图层布局以下图:
第二级布局图例(病院网站):
第三级布局图例及最终效果对照(病院旧事栏目)：
最终效果
图层定名布局
四．经常使用定名汇总:
页头: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
以上定名标准仅供参考。假如人人关于WebUI计划标准有本人的看法，接待人人在此留言一同会商，相互进修，配合前进:)
在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 滚动条)层属性--溢出(visible/hidden/scroll/auto)
页:
[1]