目录
注：本章节为项目笔记，源码请移步下一篇"品优购-HTML+CSS大项目2：源码-CSDN博客"
1.品优购项目规划
1.1 品优购项目整体介绍
- 项目名称：品优购
- 项目描述：品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作
1.2 开发工具以及技术栈
1.开发工具
VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）
2.技术栈
- 利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式
- 采取结构与样式相分离，模块化开发；
- 码规范。（详情见素材文件夹--- 品优购代码规范.md）
总结：
1. 品优购项目整体介绍 （制作首页、列表页、注册页三个页面）
2. 品优购项目学习目的 （里面包含技术较多，能极大锻炼我们布局技术）
3. 开发工具以及技术栈 （切图用ps， 代码用Vscode，测试用chrome， 大量使用HTML5+CSS3）
1.3 品优购项目搭建工作
需要创建如下文件夹：
| 名称 | 说明 |
| 项目文件夹 | shopping |
| 样式类图片文件夹 | images |
| 样式文件夹 | css |
| 产品类图片文件夹 | upload |
| 字体类文件夹 | fonts |
| 脚本文件夹 | js |
| 名称 | 说明 |
| 首页 | index.html |
| css初始化样式文件 | base.css |
| css公共样式文件 | common.css |
有些网站初始化的不太提倡 * { margin: 0; padding: 0; }
比如新浪：
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}
3. 模块化开发
- 所谓的模块化：将一个项目按照功能划分，
- 一个功能一个模块，互不影响
- 模块化开发具有重复使用、更换方便等优点
- 代码也如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用
1.4 品优购项目搭建工作
- 有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用
- 这里最典型的应用就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式
- 模块化开发具有重复使用、修改方便等优点
common.css 公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。
1.5 网站 favicon 图标
favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。
目前主要的浏览器都支持 favicon.ico 图标。
- 制作favicon图标
1. 把品优购图标切成 png 图片。
把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/
- favicon图标放到网站根目录下
- HTML页面引入favicon图标
- 在html页面里面的 <head> </head>元素之间引入代码。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
1.6 网站TDK三大标签SEO优化
- SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
- SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
- 页面必须有三个标签用来符合 SEO 优化。
1. title 网站标题
title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议：网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）
例如：
- 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
- 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站
2. description 网站说明
简要说明我们网站主要是做什么的。
我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。
例如：
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
3. keywords 关键字
keywords 是页面关键词，是搜索引擎的关注点之一。
keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式。
例如：
<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备。
2.品优购首页制作
网站的首页一般都是使用 index 命名，比如 index.html 或者 index.php 。
我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面。
2.1 常用模块类名命名
以下是我们约定的命名模块，同学们可以直接使用以下类名即可。
| 名称 | 说明 |
| 快捷导航栏 | shortcut |
| 头部 | header |
| 标志 | logo |
| 购物车 | shopcar |
| 搜索 | search |
| 热点词 | hotwords |
| 导航 | nav |
| 导航左侧 | dropdown 包含 .dd .tt |
| 导航右侧 | navitems |
| 页面底部 | footer |
| 页面底部服务模块 | mod_service |
| 页面底部帮组模块 | mod_help |
| 页面底部版权模块 | mod_copyright |
2.2 快捷导航 shortcut 制作
- 通栏的盒子命名为 shortcut ，是快捷导航的意思。 注意这里的行高，可以继承给里面的子盒子
- 里面包含版心的盒子
- 版心盒子里面包含 1 号左侧盒子左浮动
- 版心盒子里面包含 2 号右侧盒子右浮动
- 需要用到字体图标
2.3 header 制作
1. header 盒子必须要有高度
2. 1 号盒子是 logo 标志定位
3. 2 号盒子是 search 搜索模块定位
4. 3 号盒子是 hotwords 热词模块定位
5. 4 号盒子是 shopcar 购物车模块
- count 统计部分用绝对定位做
- count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度
- 一定注意左下角不是圆角，其余三个是圆角 写法： border-radius: 7px 7px 7px 0;
2.4 Logo seo 优化
1. logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
2. h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可。
3. 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。
- 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法。
- 方法2：直接给 font-size: 0; 就看不到文字了，京东的做法。
- 最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了。
2 号盒子是 search 搜索模块定位
2.5 nav 导航制作
- nav 盒子通栏有高度，而且有个下边框
- 1 号盒子左侧浮动，dropdown
- 2 号盒子左侧浮动，navitems 导航栏组
- 1号盒子有讲究，根据相关性 里面包含 .dt 和 .dd 两个盒子
2.6 footer 底部制作
- footer 页面底部盒子通栏给一个高度和灰色的背景
- footer 里面有一个大的版心
- 版心里面包含 1 号盒子，mod_service 是服务模块，mod 是模块的意思
- 版心里面包含 2 号盒子，mod_help 是帮助模块
- 版心里面包含 3 号盒子，mod_copyright 是版权模块
2.7 main 主体模块制作
以前书写的就是模块化中的公共部分。
main 主体模块是 index 里面专有的，注意需要新的样式文件 index.css 。
- main 盒子宽度为 980 像素，位置距离左边 220px (margin-left ) ，给高度就不用清除浮动
- main 里面包含左侧盒子，左浮动，focus 焦点图模块
- main 里面包含右侧盒子，右浮动，newsflash 新闻快报模块
newsflash 新闻快报模块
- 1 号盒子为 news 新闻模块 高度为 165px
- 2 号盒子为 lifeservice 生活服务模块 高度为 209px
- 3 号盒子为 bargain 特价商品
news 新闻模块
- 注意：这里我们分为上下两个模块，但是两个模块都用 div
- 1 号盒子 news-hd 新闻头部模块，给一个高度和下边框
- 2 号盒子 news-bd 新闻主题部分，里面包含 ul 和 li 还有链接
lifeservice 生活服务模块
- lifeservice 盒子宽度为 250 ，但是装不开里面的 4 个小 li
- 可以让 lifeservice 里面的 ul 宽度为 252，就可以装的下 4 个 小 li
- lifeservice 盒子 overflow 隐藏多余的部分就可以了
2.8 推荐模块制作
- 大盒子 recom 推荐模块 recommend
- 里面包含 2 个盒子， 浮动即可
- 1 号盒子 recom_hd
- 2 号盒子 recom_bd ，注意里面的小竖线
2.9 楼层区 floor 制作
注意这个 floor ，不要给高度，内容有多少，算多少
第一楼是家用电器模块： 里面包含两个盒子
- 1 号盒子 box_hd，给一个高度，有个下边框，里面分为左右 2 个盒子
- 2 号盒子 box_bd，不要给高度
1. box_hd 模块
- 有高度可以不用清除浮动
- 左边 h3 ，盒子左浮动
- 右边 tab_list ，右浮动，因为用到 tab 切换效果，所以里面要用 ul 和 li 来做
2. Tab栏原理-布局需求
要求选项卡个数要内容个数一致。
2. box_bd 模块
- 根据 tab 切换的原理， tab_content 里面包含 内容部分。 这个内容可以通过ul布局
- 分为 5 个大列，列的宽度不一致
3.品优购列表页制作
3.1 品优购列表页制作准备工作
1. 列表页面是新的页面，我们需要新建页面文件 list.html 。
2. 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来。
3. 头部和底部的样式也需要，因此 list.html 中还需要引入 common.css 。
4. 需要新的 list.css 样式文件，这是列表页专门的样式文件。
3.2 列表页 header 和 nav 修改
- 秒杀盒子 sk（ second kill ） 定位即可
- 1 号盒子左侧浮动 sk_list 里面包含 ul 和 li
- 2 号盒子左侧浮动 sk_con 里面包含 ul 和 li
3.3 列表页主体 sk _container
- 1 号盒子 sk _container 给宽度 1200，不要给高度
- 2 号盒子 sk_hd ，插入图片即可
- 3 号盒子 sk_bd ，里面包含很多的 ul 和 li
4.品优购注册页制作
4.1 注册页类名命名
注册页面： register.html
注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。
| 名称 | 说明 |
| 注册专区 | registerarea |
| 注册内容 | reg-form |
| 错误的 | error |
| 成功的 | success |
| 默认的 | default |
4.1 注册页布局
4.2 registerarea 布局
5.Web服务器
本知识点的目的
1. 了解什么是服务器以及相关概念
2. 把自己网站上传到服务器上，可以让其他人访问
5.1 什么是Web服务器
- 我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览。
- 如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了。
- 服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。
- Web 服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等 Web 客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。
- 以下服务器我们主要指的是Web服务器。
- 根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。
5.2 本地服务器
我们可以把自己的电脑设置为本地服务器， 这样同一个局域网内的同学就可以访问你的品优购网站了。
5.3 远程服务器
- 1.本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。
- 2.远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。
- 比如域名： www.mi.com 可以访问小米网站
总结：
1. 服务器就是一台电脑。因为我们主要是做网站，所以我们主要使用web服务器
2. 服务器可以分为本地服务器和远程服务器
3. 远程服务器是别的公司为我们提供了一台计算机。
4. 我们可以把网站上传到远程服务器里面， 别人就可以通过域名访问我们的网站了。
5.4 将自己的网站上传到远程服务器
注意：一般稳定的服务器都是需要收费的。 比如：阿里云
这里给大家推荐一个免费的远程服务器（免费空间） http://free.3v.do/
1. 去免费空间网站注册账号。
2. 记录下主机名、用户名、密码、域名。
3. 利用 cutftp 软件 上传网站到远程服务器。
4. 在浏览器中输入域名，即可访问我们的品优购网站了。
2077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
