DIV+CSS布局网站主页及DIV命名-领创教育.pdf

【DIV+CSS布局网站主页及DIV命名】 在网站设计中，`DIV+CSS`布局是一种常见的技术，它将网页的结构（HTML中的`DIV`元素）与表现（CSS样式）分离，提高了网页的可维护性和易用性。下面将详细讨论这种布局方式以及相关的`DIV`命名规范。 一、网站主题与布局结构 一个班级网站的设计通常会包含以下部分： 1. **网页头部**（Header）：展示网站的品牌和主要导航。 2. **网页主体**（Main）：包含主要内容，如文章、图片、视频等。 3. **登录条**（Login Bar）：提供用户登录功能。 4. **标志**（Logo）：展示网站或组织的标识。 5. **侧栏**（SideBar）：用于放置辅助信息，如广告、链接或最新资讯。 6. **导航**（Nav）：引导用户在网站内部进行跳转。 7. **子导航**（SubNav）：在主导航下的细分选项。 8. **菜单**（Menu）和**子菜单**（SubMenu）：提供层级化的导航结构。 9. **搜索**（Search）：让用户能快速查找网站内容。 10. **滚动**（Scroll）：处理页面滚动相关效果。 11. **页面主体**（Content）：放置主要内容区域。 12. **标签页**（Tab）：用于切换不同内容板块。 13. **文章列表**（List）：展示文章的集合。 14. **提示信息**（Msg）：显示操作反馈或通知。 15. **小技巧**（Tips）：提供有用的小提示或建议。 16. **栏目标题**（Title）：各个栏目或区块的标题。 17. **友情链接**（FriendLink）：与其他网站的互链。 18. **加入**（JoinUs）：邀请用户注册或成为会员。 19. **指南**（Guide）：帮助用户了解网站使用方法。 20. **服务**（Service）：展示提供的各项服务。 21. **热点**（Hot）：展示热门或流行的内容。 22. **新闻**（News）：发布最新的消息或动态。 23. **下载**（Download）：提供文件或软件的下载链接。 24. **注册**（Regsiter）：允许用户创建账号。 25. **状态**（Status）：显示用户或系统的状态。 26. **按钮**（Btn）：用于触发操作的图形元素。 27. **投票**（Vote）：组织用户参与的投票活动。 28. **合作伙伴**（Partner）：列出合作企业或组织。 29. **版权**（CopyRight）：声明网站的版权信息。 二、CSS ID命名规范 在SEO优化中，合理的`CSS` ID命名对于提高搜索引擎友好度至关重要。以下是一些常用的ID命名规则： 1. **页头**（header） 2. **登录条**（loginBar） 3. **标志**（logo） 4. **侧栏**（sideBar） 5. **广告**（banner） 6. **主导航**（mainNav或globalNav） 7. **子导航**（subNav） 8. **页脚**（footer） 9. **整个页面**（content） 10. **页眉**（header） 11. **页脚**（footer） 12. **商标**（label） 13. **标题**（title） 14. **顶导航**（topNav） 15. **边导航**（sideBar） 16. **左导航**（leftsideBar） 17. **右导航**（rightsideBar） 18. **标识**（logo） 19. **标语**（banner） 20. **菜单内容**（menu1Content或menu1Container） 21. **子菜单**（submenu） 22. **边导航图标**（sidebarIcon） 23. **注释**（note） 24. **容器**（container） 25. **内容**（content） 26. **搜索**（search） 27. **登陆**（login） 28. **功能区**（shop，如购物车、收银台） 29. **当前的**（current） 30. **样式文件命名**：全站标签默认样式（general.css或global.css）、布局版式设计样式（layout.css或container.css）、通用样式（style.css）、专栏/频道样式（columns.css）、打印输出样式（print.css）、主题模板样式（themes.css） 三、网页设计注意事项 1. **文件命名**：考虑到Linux系统的大小写敏感性，所有文件应使用小写字母命名，避免使用中文文件名。 2. **分辨率**：以1024x800为主，确保在该分辨率下不出现横向滚动条，同时考虑宽屏设备的兼容性。 3. **布局**：一般采用居中布局，特殊需求时可设为居顶或居左。 4. **VI标准化**：Logo格式通常为GIF，尺寸为88x31像素，大小小于7K，字体多采用中文宋体12px和14.7px，已优化过字号。 `DIV+CSS`布局在网站设计中起着至关重要的作用，通过合理地命名`DIV`元素和`CSS` ID，不仅可以提高代码的可读性，也有利于SEO优化。在设计过程中，还需注意文件命名规范、屏幕适应性、布局设计以及VI标准等多方面因素，以提升用户体验和网站的整体质量。