《2022年网页美工必备的知识-网页设计命名规范知识 .pdf》由会员分享，可在线阅读，更多相关《2022年网页美工必备的知识-网页设计命名规范知识 .pdf（5页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网页美工必备的知识-网页设计命名规范发布时间 :2011年 3月18日 次浏览 :150 工欲善其事，必先利其器。在网页设计中，我们得从开始就规范我们的设计。来跟木木分析下下面的那张结构图。一.网站设计及基本框架结构:1. Container( 整体 )“ container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “ wrapper “ , “ wrap “ , “ page“.2. Header( 头部 )“ header ” 是网站页面的头部区域，一般来讲，它包含网站的logo 和一些其他元素。这部分还可以命名为 : “page-header” ( 或 pageHe
2、ader). 3. Navbar( 导航 )“ navbar “等 同于 横 向 的 导 航 栏 ， 是 最 典 型 的 网页 元 素 。 这 部 分 还 可以 命 名 为 : “ nav” , “ navigation” , “ nav-wrapper ”.4. Menu( 菜单 )“ Menu”区域包含一般的链接和菜单，这部分还可以命名为: “ subNav “ , “ links“， “sidebar-main ”.5. Main （内容）“ Main ”是网站的主要区域， 如果是博客的话它将包含的日志。这部分还可以命名为: “ content“ , “ main -content” (
3、或“ mainContent”)。6. Sidebar(侧边链接 )“ Sidebar ” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等 这部分还可以命名为: “subNav “, “side-panel “, “secondary-content “.7. Footer(页脚 )“ Footer ”包含网站的一些附加信息，这部分还可以命名为: “ copyright“.二.需要注意的几点:1.尽量用 有意义的命名 来给元素命名达到语义化。不要使用表面形式的命名.如:red/left/big 等。2.组合命名规则 :元素类型 -元素作用 /内容 名师资料总结 -
4、 - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 5 页 - - - - - - - - - 如:搜索按钮 : btn-search 登录表单 :form-login 新闻列表 :list-news 3.涉及到交互行为的元素命名:凡涉及交互行为的元素通常会有正常(link) 、悬停 (hover)、点击 (click) 和已浏览 (visited) 等不同样式，命名可参考以下规则: 鼠标悬停 :：hover 点击： click 已浏览： visited 如:搜索按钮 : btn-searc
5、h、btn-search-hover、btn-search-visited 三.Photoshop图层结构规范 :Photoshop 图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组， 所有图层尽量避免使用默认命名(图层 +编号 )。第一级图层结构如下图: 第二级结构图例(医院网站 ): 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 5 页 - - - - - - - - - 第三级结构图例及效果图对比(医院新闻栏目 )：名师资料总结 - - -精品资料欢迎
6、下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 5 页 - - - - - - - - - 效果图图层命名结构四常用命名汇总:页头 :header 登录条 :loginbar 标志 :logo 侧栏 :sidebar 广告条 :banner 导航 :nav 子导航 :subNav 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 5 页 - - - - - - - - - 菜单 :men
7、u 子菜单 :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 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 5 页 - - - - - - - - -