项目开发 规划

1、项目名称

小U课堂

2、项目描述

小U课堂是优就业打造的在线实用技能学习平台，我们要完成 首页、同步课程、在线练习，精品课程、视频详情、登录、注册页面、个人中心等静态页面的制作。

3、项目页面（预览）

• 首页

• 列表页

• 详情页

• 其他

• 开发工具以及技术栈

  • 开发工具

    • VScode Photoshop 主流浏览器

  • 技术栈

    • 利用 HTML5 + CSS3布局

• 采取结构与样式相分离，模块化开发

项目规划与项目搭建

概述：基于项目页面效果图分析，创建项目文件目录。 分析页面公共模块，规划创建公共模块的样式表文件，如页面头部和底部，方便重复使用。

1、文件目录

概述：根据项目名称创建项目文件夹，推荐用对应的英文单词命名。 html、css、img、js 文件均归档至项目名称目录中。

1.1、目录示例

• 项目文件夹

  • 样式类图片文件夹（images）

  • 样式文件夹（css）

  • 字体类文件夹（fonts）

  • 脚本文件夹（js）

  • 产品类图片文件夹（upload）

- ---/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图标

1. 把图标切成 png 图片

2. 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net

2、使用favicon图标

1. favicon图标放到网站根目录下

2. 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,相机,数码,配件,手表,存储卡,京东" />