Dreamweaver中命名规则整理及常用技巧

Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 one 主要命名介绍主要命名介绍 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 Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 two 7 Footer Footer 包含网站的一些附加信息 这部分还可以命名为 copyright IDID 命名命名 1 页面结构 容器 container 页头 header 内容 content 页面主体 main 页尾 footer 导航 nav 侧栏 sidebar 栏目 column 左右中 left right center 页面外围控制整体布局宽度 wrapper 2 导航 导航 nav 主导航 mainbav 子导航 subnav 顶导航 topnav Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 three 边导航 sidebar 左导航 leftsidebar 右导航 rightsidebar 菜单 menu 子菜单 submenu 标题 title 摘要 summary 3 功能 标志 logo 广告 banner 登陆 login 登录条 loginbar 注册 regsiter 搜索 search 功能区 shop 标题 title 加入 joinus 状态 status 按钮 btn 滚动 scroll 标签页 tab Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 four 文章列表 list 提示信息 msg 当前的 current 小技巧 tips 图标 icon 注释 note 指南 guild 服务 service 热点 hot 新闻 news 下载 download 投票 vote 合作伙伴 partner 友情链接 link 版权 copyright 网站公用相关网站公用相关 Container div container 容器 Header or banner div header 页头部分 Main or global navigation div main nav 主导航 Menu menu 菜单 Sub Menu submenu 子菜单 Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 five Left or right side columns sidebar a sidebar b 左边栏或 右边栏 Main div main 页面主体 Content div content 内容部分 The main content area content main 主要内容区域 Footer div footer 页脚部分 Tag tag 标签 Message msg message 提示信息 Tips tips 小技巧 Vote vote 投票 Friend Link friendlink 友情连接 Title title 标题 Summary summary 摘要 Sub navigation list sub nav 二级导航 Search input search input 搜索输入框 Search output search output 搜索输出和搜索结果相似 Search search 搜索 Search results search results 搜索结果 Copyright information copyright 版权信息 brand branding 商标 branding logo branding logo LOGO Site information siteinfo 网站信息 Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 six Copyright information etc siteinfo legal 法律声明 Designer or other credits siteinfo credits 信誉 Join us joinus 加入我们 Partnership opportunities partner 合作伙伴 Services service 服务 Regsiter regsiter 注册 Status status 状态 电子贸易相关 Products products 产品 Products prices products prices 产品价格 Products description products description 产品描述 Products review products review 产品评论 Editor s review editor review 编辑评论 New release news release 最新产品 Publisher publisher 生产商 Screen shot screenshot 缩略图 FAQ faqs 常见问题 Keyword keyword 关键词 Blog blog 博客 Forum forum 论坛 Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 seven 注意事项注意事项 使用技巧使用技巧 元素居中元素居中 margin 0 auto text align center text align center 这句是为了适应 IE6 以下版本的浏览器而加的 IE6 以下对 margin 0 auto 不能解析为居中 所以用这种方式来补 救 所以在写代码时把两句都写上 明确定义单位 除非值为明确定义单位 除非值为 0 0 忘记定义尺寸的单位是 CSS 新手普遍的错误 在 HTML 中你可以只写 width 100 但是在 CSS 中 你必须给一个准确的单位 比如 width 100px width 100em 只有两个例外情况可以不定义单位 行 高和 0 值 除此以外 其他值都必须紧跟单位 注意 不要在数值 和单位之间加空格 区分大小写区分大小写 当在 XHTML 中使用 CSS CSS 里定义的元素名称是区分大小写的 为 了避免这种错误 我建议所有的定义名称都采用小写 class 和 id 的值在 HTML 和 XHTML 中也是区分大小写的 如果 你一定要大小写混合写 请仔细确认你在 CSS 的定义和 XHTML 里的 标签是一致的 取消取消 classclass 和和 idid 前的元素限定前的元素限定 Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 eight 当你写给一个元素定义 class 或者 id 你可以省略前面的元素限定 因为 ID 在一个页面里是唯一的 而 class 可以在页面中多次使用 你限定某个元素毫无意义 例如 div content declarations fieldset details declarations 可以写成 content declarations details declarations 这样可以节省一些字节 元素属性的默认值元素属性的默认值 通常 padding 的默认值为 0 background color 的默认值是 transparent 但是在不同的浏览器默认值可能不同 如果怕有冲突 可以在样式表一开始就先定义所有元素的 margin 和 padding 值都为 0 象这样 使用全局声明 建议使用 margin 0 padding 0 不需要重复定义可继承的值不需要重复定义可继承的值 Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 nine CSS 中 子元素自动继承父元素的属性值 象颜色 字体等 已经 在父元素中定义过的 在子元素中可以直接继承 不需要重复定义 但是要注意 浏览器可能用一些默认值覆盖你的定义 最近优先原则最近优先原则 如果对同一个元素的定义有多种 以最接近 最小一级 的定义为 最优先 例如有这么一段代码 Update Lorem ipsum dolor set 在 CSS 文件中 你已经定义了元素 p 又定义了一个 class update p margin 1em 0 font size 1em color 333 update font weight bold color 600 这两个定义中 class update 将被使用 因为 class 比 p 更 近 关于优先原则读者可以自己查阅相关资料 Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 ten 多重多重 classclass 定义定义 一个标签可以同时定义多个 class 例如 我们先定义两个样式 第一个样式背景为 666 第二个样式有 10 px 的边框 one width 200px background 666 two border 10px solid F00 在页面代码中 我们可以这样调用 这样最终的显示效果是这个 div 既有 666 的背景 也有 10px 的边框 是的 这样做是可以的 你可以尝试一下 不需要给背景图片路径加引号不需要给背景图片路径加引号 为了节省字节 我建议不要给背景图片路径加引号 因为引号不是 必须的 例如 background url images gif 333 可以写为 background url images gif 333 如果你加了引号 反而会引起一些浏览器的错误 组选择器组选择器 Group Group selectors selectors 当一些元素类型 class 或者 id 都有共同的一些属性 你就可以 Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 eleven 使用组选择器来避免多次的重复定义 这可以节省不少字节 例如 定义所有标题的字体 颜色和 margin 你可以这样写 h1 h2 h3 h4 h5 h6 font family Lucida Grande Lucida Arial Helvetica sans serif color 333 margin 1em 0 如果在使用时 有个别元素需要定义独立样式 你可以再加上 新的定义 可以覆盖老的定义 例如 h1 font size 2em h2 font size 1 6em em 相对于字母高度的比例 相对于长度单位的百分比例 px 像素 系统预设单位 pt 像点 用正确的顺序指定链接的样式用正确的顺序指定链接的样式 Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 twelve 当你用 CSS 来定义链接的多个状态样式时 要注意它们书写的顺 序 正确的顺序是 link visited hover active 抽取第一个字 母是 LVHA 你可以记忆成 LoVe HAte 喜欢讨厌 如果你的用户需要用键盘来控制 需要知道当前链接的焦点 你还可以定义 focus 属性 focus 属性的效果也取决与你书写的位 置 如果你希望聚焦元素显示 hover 效果 你就把 focus 写在 hov er 前面 如果你希望聚焦效果替代 hover 效果 你就把 focus 放 在 hover 后面 参考 清除浮动清除浮动 一个非常常见的 CSS 问题 定位使用浮动的时候 下面的层被浮动 的层所覆盖 或者层里嵌套的子层超出了外层的范围 通常的解决办法是在浮动层后面添加一个额外元素 例如一个 div 或者一个 br 并且定义它的样式为 clear both 这个办法有 一点牵强 介绍一个博客可以去看看 owell blog static 3144675020116102543221 本人的方法是在样式表中加入这句代码 clearfloat clear both height 0 font size 1px line height 0px Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 thirteen 然后在页面中需要清除浮动的地方加入 横向居中横向居中 centering centering 这是一个简单的技巧 但是值得再说一遍 因为我看见太多的新 手问题都是问这个 CSS 如何横向居中 你需要定义元素的宽 并 且定义横向的 margin 如果你的布局包含在一个层 容器 中 就象 这样 你可以这样定义使它横向居中 wrap width 760px 修改为你的层的宽度 margin 0 auto 但是 IE5 Win 不能正确显示这个定义 我们采用一个非常有用 的技巧来解决 用 text align 属性 就象这样 body text align center wrap width 760px 修改为你的层的宽度 margin 0 auto Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 fourteen text align left 第一个 body 的 text align center 规则定义 IE5 Win 中 body 的所有元素居中 其他浏览器只是将文字居中 第二个 text alig n left 是将 warp 中的文字居左 用用 csscss hackhack 针对针对 IEIE 的优化的优化 有些时候 你需要对 IE 浏览器的 bug 定义一些特别的规则 这里有 太多的 CSS 技巧 Hacks 我只使用其中的两种方法 这两种方法都 是最安全的 1 注释的方法 a 在 IE 中隐藏一个 CSS 定义 你可以使用子选择器 child se lector body p 定义内容 b 下面这个写法只有 IE 浏览器可以理解 对其他浏览器都隐藏 html p declarations c 还有些时候 你希望 IE Win 有效而 IE Mac 隐藏 你可以使 Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 fifteen 用 反斜线 技巧 html p declarations 2 条件注释 conditional comments 的方法 另外一种方法 我认为比 CSS Hacks 更加经得起考验就是采用 微软的私有属性条件注释 conditional comments 用这个方法你 可以给 IE 单独定义一些样式 而不影响主样式表的定义 就象这样 调试技巧 层有多大 调试技巧 层有多大 当调试 CSS 发生错误 你就要象排版工人 逐行分析 CSS 代码 我通常在出问题的层上定义一个背景颜色 这样就能很明显看到层 占据多大空间 有些人建议用 border 一般情况也是可以的 但问 题是 有时候 border 会增加元素的尺寸 border top 和 boeder b Dreamweaver 中规则命名整理及使用技巧中规则命名整理及使用技巧 LY 独孤晨阳独孤晨阳 sixteen ottom 会破坏纵向 margin 的值 所以使用 background 更加安全些 另外一个经常出问题的属性是 outline outline 看起来象 boe der 但不会影响元素的尺寸或者位置 只有少数浏览器支持 outli ne 属性 我所知道的只有 Safari OmniWeb 和 Opera CSSCSS 代码书写样式代码书写样式 在写 CSS 代码的时候 对于缩进 断行 空格 每个人有每个人的 书写习