Web前端基础Day10---11【项目】PC端

这是一个关于Day10---11【项目】PC端的思维导图，小U课堂是优就业打造的在线实用技能学习平台，我们要完成 首页、同步课程、在线练习，精品课程、视频详情 登录、注册页面、个人中心等静态页面的制作。

Day10---11【项目】PC端

• 1、项目介绍
  • 1.1、项目名称：例：小U课堂
  • 1.2、项目描述
    • 小U课堂是优就业打造的在线实用技能学习平台，我们要完成 首页、同步课程、在线练习，精品课程、视频详情、登录、注册页面、个人中心等静态页面的制作。
  • 1.3、项目页面（预览）
    • 首页
    • 列表页
    • 详情页
    • 其他
    • 开发工具以及技术栈： 开发工具： VScode Photoshop 主流浏览器 技术栈： 利用 HTML5 + CSS3布局
    • 采取结构与样式相分离，模块化开发
• 2、项目规划与项目搭建
  • 概述：基于项目页面效果图分析，创建项目文件目录。 分析页面公共模块，规划创建公共模块的样式表文件，如页面头部和底部，方便重复使用。
  • 2.1、文件目录
    • 概述：根据项目名称创建项目文件夹，推荐用对应的英文单词命名。
    • html、css、img、js 文件均归档至项目名称目录中。
    • 2.1.1、目录示例——项目文件夹
  • 2.2、样式文件
    • 2.2.1、公共样式(common.css)
      • 说明：有些样式和结构在很多页面都会出现，如页面头部和底部，此时，可以把这些结构和样式单独作为一个公共模块，方便重复使用。
    • 2.2.2、初始化样式（reset.css）
      • 解释为什么要重置浏览器样式
      • 总结重置样式
• 3、项目模块化开发
  • 将一个项目按照功能划分，一个功能一个模块，互不影响，模块化开发具有重复使用、更换方便等优点。
• 4、网站favicon
  • favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。
  • 4.1、制作favicon图标
    • 1. 把图标切成 png 图片
    • 2. 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/
  • 4.2、使用favicon图标
    • 1. favicon图标放到网站根目录下
    • 2. HTML页面引入favicon图标
• 5、网站TDK
  • title(网站标题)
    • 是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
    • 通常是网站名（产品名）- 网站的介绍（尽量不要超过30个汉字）
    • 例：<title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
  • description（网站描述）
    • 简要说明我们网站主要是做什么的。
    • description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。
    • 例：<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
  • keywords（关键字）
    • 页面关键词，是搜索引擎的关注点之一。
    • keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式
    • 例：<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电 脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
  • 注意：对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO人员准备！
• iconfont
  • 1、下载---压缩包，解压
  •             2、将字体文件（后缀名为.ttf   .woff    .woff2）复制到项目中的fonts文件夹中
  •             3、将iconfont.css复制到项目文件夹css下
  •             4、修改iconfont.css中字体文件的引入路径（../fonts）
  •             5、在页面中引入iconfont.css文件
  •             6、使用方式
    • unicode方式： <标签名 class="iconfont">&#xe600;</标签名>
    • font-class方式： 对unicode方式的变形，见名知意 <标签名 class="iconfont icon-sousuo"></标签名>