品优购项目(上)

Yolanda-Candy

已于 2022-04-05 18:06:58 修改

阅读量1k

点赞数 1

分类专栏：案例文章标签： css html

于 2022-04-05 11:37:51 首次发布

本文链接：https://blog.csdn.net/Sweat_candy/article/details/123956550

版权

本文介绍了品优购电商网站的项目规划，包括首页、列表页和注册页的制作，强调了网站制作流程、代码规范和SEO优化。通过这个项目，学习者可以复习和提高HTML5和CSS3布局技术，了解模块化开发，并掌握如何设置网站的favicon图标和SEO的TDK优化。

摘要由CSDN通过智能技术生成

目标

- 能够遵循品优购代码规范

- 能够在品优购首页中引入 favicon 图标

- 能够说出三大标签 SEO 优化

- 能够在品优购首页中使用字体图标

- 能够说出 LOGO 需要哪些 SEO 优化

品优购项目规划

网站制作流程

原型图：页面的布局，告知我们开发人员，整个页面的结构是怎样的，说白了就是什么地方放什么内容

效果图：告知我们开发人员，最终做出来的成品应该是什么样子，相比原型图，效果图里面包含内容，风格，字体大小等等

品优购项目介绍

项目名称：品优购

项目描述：品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作

主页

列表页

注册页

品优购项目的学习目的

- 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术

- 品优购项目能复习、总结、提高基础班所学布局技术

- 写完品优购项目，能对实际开发中制作PC 端页面流程有一个整体的感知

- 为后期学习移动端项目做铺垫

开发工具以及技术栈

开发工具

`VScode` 、`Photoshop（fw）`、主流浏览器（以`Chrome`浏览器为主）

技术栈

- 利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式

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

- 良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范。

品优购项目搭建工作

创建的文件夹如下（称为项目结构）

创建文件如下

初始化样式

有些网站初始化的不太提倡 * { 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}

项目模块化开发

所谓的模块化：将一个项目按照功能划分，一个功能一个模块，互不影响，模块化开发具有重复使用、更换方便等优点

代码也如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有(如下图)。此时，可以把这些结构和样式单独作为一个模块，然后重复使用

- 有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用

- 这里最典型的应用就是 `common.css`公共样式。写好一个样式，其余的页面用到这些相同的样式

- 模块化开发具有重复使用、修改方便等优点

网站 favicon 图标（★★★）

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。

制作favicon图标

- 把品优购图标切成 `png` 图片

- 把 `png` 图片转换为 `ico` 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/

使用favicon图标

favicon图标放到网站根目录下

HTML页面引入favicon图标

在html 页面里面的 `<head> </head>`元素之间引入代码

 <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>

TDK三大标签SEO优化（★★）

SEO是什么

SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

页面必须有三个标签用来符合 SEO 优化

TDK是什么

T -- Title（网站标题）

title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

建议：网站名（产品名）- 网站的介绍（尽量不要超过30个汉字）

例如：

- 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！

- 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

D -- description（网站描述）

简要说明我们网站主要是做什么的。

我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。

例如：

`<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />`

K -- keywords （关键字）

keywords 是页面关键词，是搜索引擎的关注点之一。

keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2 的形式

例如：

`<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡

最低0.47元/天解锁文章

Yolanda-Candy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
品优购项目(上)

目标- 能够遵循品优购代码规范- 能够在品优购首页中引入 favicon 图标- 能够说出三大标签 SEO 优化- 能够在品优购首页中使用字体图标- 能够说出 LOGO 需要哪些 SEO 优化品优购项目规划网站制作流程原型图：页面的布局，告知我们开发人员，整个页面的结构是怎样的，说白了就是什么地方放什么内容效果图：告知我们开发人员，最终做出来的成品应该是什么样子，相比原型图，效果图里面包含内容，风格，字体大小等等品优购项目介绍项目名称：品优购项目.
复制链接

扫一扫

专栏目录