项目规范,介绍,规划与搭建,模块化开发,网站favicon,网站TDK
项目规范
1、项目文件夹
根据项目名称创建项目文件夹。如:ushop
html、css、img、js 文件均归档至项目名称目录中
HTML 文件、根据页面内容以英文命名,首页或只有一个页面通常命名为index.html
css 文件以英文命名
公用样式通常命名为reset.css(常用的浏览器样式)
public.css(多个页面时的公共模块的样式,或多次重复使用字体、字号、间距等样式)
首页通常命名为index.css, 其他页面依实际模块或功能需求命名
图片文件命名尽量与其模块样式名称保持关联,尽量使用小写命名
(如登录框的背景与图片:login_bg.jpg、login_user_ico.gif 等)
常用图片格式 gif 、png 、jpg
目录结构参考
---/html/ |---- /user/ 与用户相关的页面 |---- /user/login.html 登录页 ---/css/ |---- /reset.css 重置浏览器样式 |---- /page 其他页面的css |---- /page/pagename.css 单独某个页面的css |---- /common.css css通用样式库 ---/js/ |---- /lib 公用组件 |---- /lib/jquery.2.2.3.min.js 调用jq库文件 |---- /page 其他页面的js |---- /page/pagename.js 单独书写的js |---- /common.js 公用方法 ---/img/ |---- /page 其他页面对应的图片 |---- /page/wap 手机端图片夹 |---- /page/wap/wap_icon.png 手机端图标 |---- /logo.png 公用图片
2、HTML 书写规范
2.1 文档类型声明及编码
统一为 html5 声明类型
编码统一为 utf-8
2.2 书写规范
书写时根据页面结构实现层次分明的缩进
标签必合
属性值必须用双引号包括
通常小写字母
2.3 语义化 HTML
根据页面结构选择合适的标签
如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用p,结构简章重复的部分用 ul、li标签
页面中重要的图片内容要添加 alt=“”替换文本,以便图片丢失时,用户可以根据替换文本了解页面内容
根据模块内容定义class和id名称
如包含logo和搜索框等在内的头部标签用.header,包含联系信息,版权等的模块用footer或copyright
2.4 合理嵌套HTML标签
合理嵌套HTML标签,
ul和li是固定嵌套,ul直接子元素必须是li;
dl和dt,dd是固定嵌套,dl的直接子元素必须是dl和dd;
p标签不允许嵌套p标签;a标签不允许嵌套
a标签和其他交互性元素比如button
尽可能的控制元素嵌套层级,不合理的嵌套会影响页面性能
2.5 保证结构与表现相分离
CSS表现层和JavaScript表现层分别归属于独立的.css和.js文件。
在页面中尽量避免使用行内样式即 style=“”或行间属性,尽量使用 class 或者 id
3、css 书写规范
3.1 编码
编码统一为 utf-8
3.2 书写代码前
确定版心(页面有效区)
考虑样式表规划,提高样式重复使用率
提前沟通页面中模棱两可的需求和交互效果,方便后续合理布局
布局时考虑后续交互效果处理的便利性,必要时预留出交互效果中涉及到的样式类(如鼠标点击后的样式等)
3.3 书写代码时
添加注释:应该为大区块样式添加注释 ,小区块适量注释
class 与 id 的命名
命名要语义化、简明化
CSS命名时要加前缀如:.zg_top{}
常用命名方法一:样式名称由小写英文、数字和 _ 来组合命名,如 top_left、top_nav;
避免使用中文拼音,尽量使用简易的单词组合
常用命名方法二:首字母大写,驼峰式命名,如:topNav
代码格式
保持代码缩进与格式
建议单行书写
选择器
尽可能不使用通配符选择器 *
合理使用id选择器(页面中唯 一的元素,如头部,底部)
避免使用标签限定id或者类选择器
如:div#test { } p.box {}
避免层集嵌套
3.4 css 属性书写顺序
建议遵循:
特殊(文档流相关)属性 –> 盒模型 –> 装饰属性 –>内容排版相关
文档流相关属性(display、 position、float、clear、 visibility)
盒模型相关属性(width、 height、margin、padding、border)
装饰性相关属性(background、opacity、cursor)
内容排版相关属性(color、font、line-height、text-align、text-indent、vertical-align)
书写代码过程中要兼容兼容问题,对熟知的兼容问题在书写代码过程中一并处理。
3.5 类名命名参考
main 页面主体 tag 标签 msg message 提示信息 tips 小技巧 vote 投票 friendlink友情链接 title 标题 summary 摘要 login_bar 登录条 search_input 搜索输入框 hot 热门热点 search 搜索 search_output 搜索输出和搜索结果相似 search_bar 搜索条 search_results 搜索结果 copyright 版权信息 branding 商标 logo 网站LOGO标志 site_info 网站信息 site_info_legal 法律声明 site_info_credits 信誉 join_us 加入我们 partner 合作伙伴 service 服务 regsiter 注册 arr arrow 箭头 guild 指南 site_map 网站地图 list 列表 home_page 首页 sub_page 二级页面子页面 tool, toolbar 工具条 drop 下拉 dorp_menu 下拉菜单 status 状态 scroll 滚动 tab 标签页 left right center 居左、中、右 news 新闻 download 下载
项目介绍
1、项目名称
小U课堂
2、项目描述
小U课堂是优就业打造的在线实用技能学习平台,我们要完成 首页、同步课程、在线练习,精品课程、视频详情、登录、注册页面、个人中心等静态页面的制作。
3、项目页面(预览)
首页
列表页
详情页
其他
开发工具以及技术栈
开发工具
VScode Photoshop 主流浏览器
技术栈
利用 HTML5 + CSS3布局
采取结构与样式相分离,模块化开发
项目规划与项目搭建
概述:基于项目页面效果图分析,创建项目文件目录。 分析页面公共模块,规划创建公共模块的样式表文件,如页面头部和底部,方便重复使用。
1、文件目录
概述:根据项目名称创建项目文件夹,推荐用对应的英文单词命名。 html、css、img、js 文件均归档至项目名称目录中。
1.1、目录示例
项目文件夹
样式类图片文件夹(images)
样式文件夹(css)
字体类文件夹(fonts)
脚本文件夹(js)
产品类图片文件夹(upload)
----webset - ---/html/|---- /user/ 与用户相关的页面 |---- /user/login.html 登录页---/css/|---- /base.css 重置浏览器样式 |---- /page 其他页面的css|---- /page/pagename.css 单独某个页面的css|---- /common.css css通用样式库---/js/|---- /lib 公用组件|---- /lib/jquery.2.2.3.min.js 调用jq库文件 |---- /page 其他页面的js|---- /page/pagename.js 单独书写的js|---- /common.js 公用方法---/img/|---- /page 其他页面对应的图片|---- /page/wap 手机端图片夹|---- /page/wap/wap_icon.png 手机端图标|---- /logo.png 公用图片
2、样式文件
2.1、公共样式(common.css)
说明:有些样式和结构在很多页面都会出现,如页面头部和底部,此时,可以把这些结构和样式单独作为一个公共模块,方便重复使用。
2.2、初始化样式(reset.css)
解释为什么要重置浏览器样式
总结重置样式
项目模块化开发
将一个项目按照功能划分,一个功能一个模块,互不影响,模块化开发具有重复使用、更换方便等优点。
首页整体画块分析
首页头部画块分析、布局讲解
首页【同步课程模块】布局讲解,渗透margin负值的应用
在线练习页【选项卡】模块讲解
登录、注册弹框讲解
网站favicon
favicon.ico 一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。
1、制作favicon图标
把图标切成
png
图片把
png
图片转换为ico
图标,这需要借助于第三方转换网站,例如比特虫:制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net
2、使用favicon图标
favicon图标放到网站根目录下
HTML页面引入favicon图标
网站TDK
SEO是英文Search Engine Optimization的缩写,译为搜索引擎优化,是按照搜索引擎自然排名机制,优化调整站内和站外,提高或者保持网站在搜索引擎中关键词自然排名,以获得更多流量(带来更多的访问),达成网站销售及品牌建设的目标。
1、description(网站描述)
简要说明我们网站主要是做什么的。
description 作为网站的总体业务和主题概括,多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话:010…”之类语句。
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />
2、title(网站标题)
是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
通常是网站名(产品名)- 网站的介绍(尽量不要超过30个汉字)
<title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物!</title>
3、keywords(关键字)
页面关键词,是搜索引擎的关注点之一。
keywords 最好限制为 6~8 个关键词,关键词之间用英文逗号隔开,采用 关键词1,关键词2 的形式
<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
注意:对于我们前端人员来说,我们只需要准备好这三个标签,具体里面的内容,有专门的 SEO 人员准备!
项目规范,介绍,规划与搭建,模块化开发,网站favicon,网站TDK相关推荐
- 电商项目的介绍及其框架搭建
文章目录 电商项目的介绍及其框架搭建 一.项目介绍 二.项目架构缩略图 三.系统架构说明 四.项目搭建 4.1 技术选型 4.2 开发环境 4.3 域名 五.后台环境的搭建 5.1 创建统一的父工程: ...
- Maven项目的介绍、入门搭建
Maven项目的介绍.入门搭建 一.什么是Maven项目 Maven 是 Apache 组织下的一个跨平台的项目管理工具,它主要用来帮助实现项目的构建.测试.打包和部署.Maven 提供了标准的软件生 ...
- 模块化开发一个电子商务网站
通过查看网上的教学视频,跟着做下来这样一个电子商务网站整站开发的项目.整个页面写下来还是很耗时的,页面的细节太多,得仔仔细细核对原设计图,1px也要在那里死抠,不能放过,不然怕影响整体布局.关于浏览器 ...
- 瑞吉外卖 - 项目流程介绍与数据库搭建、附Gitee地址(更新中...)
文章目录 软件开发流程 开发流程 人员分配 软件环境 项目介绍 三个开发阶段 产品原型 技术选型 功能架构 软件端使用角色 数据库管理 mysql数据库 创建数据库 导入表数据(Navicat推荐) ...
- vue-cli构建SPA项目结构介绍spa完成路由开发及嵌套路由
目录 一.vue-cli构建SPA项目结构介绍 二.spa完成路由开发 三. 嵌套路由 一.vue-cli构建SPA项目结构介绍 前提:搭建好NodeJS环境 node -v npm -v ...
- 什么是前端模块化?为什么要进行模块化开发?前端技术文章分享
之前文章都分享的Java相关,今天就分享一篇前端技术文章,一起来看看今日前端技术文章吧~希望能够帮助到你! 模块化是一种软件开发的设计模式,它将一个大型的软件系统划分成多个独立的模块,每个模块都有自己 ...
- 六十一、分析Springboot中的项目结构介绍
@Author:Runsen 来源:尚硅谷 下面建议读者学习尚硅谷的B站的SpringBoot视频,我是学雷丰阳视频入门的. 具体链接如下:B站尚硅谷SpringBoot教程 文章目录 spring项 ...
- Eclipse+Pydev搭建Python开发环境教程
Eclipse+Pydev搭建Python开发环境教程 Eclipse+Pydev搭建Python开发环境 PyDev简介 准备文件 Jdk配置,1.8版本 python-2.7.18安装 Eclip ...
- springboot模块化开发--项目搭建
目录 概述 写在前面 开始工作 准备父工程 创建子模块spring-common 修改spring-common子模块的pom文件 修改springboot-mul父工程的pom文件 与上面创建spr ...
最新文章
- ios 消除 字符串 首尾空格
- C#WIFI搜索与连接
- python 操作mysql_Python 操作MySQL
- spring cloud利用feign和sentinel进行内部或外部远程调用
- MATLAB实现简单的聊天软件
- Leetcode 741. Cherry Pickup DP
- 小米手机 root权限 获取
- 非常好用的桌面壁纸更换软件
- WPS网盘如何更改网盘缓存位置
- Generative Adversarial Nets[AAE]
- 小学教师计算机校本培训材料,教师业务学习材料及校本培训材料
- FPS能重塑英雄联盟的辉煌吗?Valorant公测半年有什么优势和不足?
- 【未解决】pyrit:Scapy 2.x is required to use Pyrit‘s analyze/attack functions but seems to be unavailab
- Python爬取北京地区短租房信息
- 【技术分享】TestFlight测试的流程文档
- jython_Jython简介,第2部分:编程要点
- 下载工具 qBittorrent 使用
- Android之第三方框架使用汇总
- Ansible自动化运维2
- 事件是什么?事件模型?
热门文章
- java求几何周长面积_java求几何图形面积
- python画红色等边三角形面积公式_等边三角形面积公式?
- Python3 批量提取视频中的音频
- 成功解决TypeError: super(type, obj): obj must be an instance or subtype of type
- 【总结】最好的CV学习小组,超200个课时+10个方向+30个项目,从理论到实践全部系统掌握...
- ElastSearch整合SpringBoot模仿京东商城实现关键字高亮显示
- 批量转账到支付宝ISV(API接口流程步骤)
- 阿里云RDS在线DDL工具gh-ost
- 计算机到交换机端口查询,新手上路:根据ip地址查交换机端口网络知识 -电脑资料...
- 使用OneNote多人分布式共享