#大有学问#

上一次做了一个学成在线的首页小案例。

这次做品优购的网站项目实战。

今天只是叙述一些准备工作，明天开始正式布局。

软件准备

VScode 和 PS 不用多说，主要介绍一下另外两个工具。

markman ：是一个图片工具，我主要使用它测量宽和高以及获取颜色值。

比特虫网站 ：在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net

这个网站可以将图片格式转换为ico格式，可以使这个图片调用在html中，在浏览器标题栏显示出该图标。

工作区搭建（文件夹名称以英文单词命名）

根目录文件夹：shopping文件夹。

子文件夹：html文件、css文件夹、images文件夹和fonts文件夹（字体图标）。

新建html文件：index.html首页文件、list.html列表文件、register.html注册页面。

新建css文件：index.css首页样式文件、list.css列表样式文件、refister.css注册样式文件、common.css公共样式文件。

CSS属性书写顺序

样式文件总体顺序

首先确定公共选择器属性，然后再添加独立自身属性。

选择其中属性顺序

自身属性（如宽高width、背景等）——文本属性（如font）——布局定位属性（如display）——其他属性（如border-radius）

页面布局整体思路

首先确定页面 版心区域 ：整个页面上宽度基本一致的区域，确定版心区域宽度。

然后确定 行模块 ：整个页面分为几行内容。

再者确定 列模块 ：在行模块中，每个列模块的大小和位置。

最后确定页面HTML 布局结构 并添加 样式 。

网站favicon图标

favicon.ico：这个图标一般显示在浏览器的地址栏或者是网页名称的前方。

实现这个图标的步骤

首先是转换图片格式，一般favicon.ico都是logo图片，可通过 比特虫 网站将图片转换为ico格式。

然后将转换为ico格式的图片放到项目文件夹中，一般是根目录下，可以根据自己爱好放置位置。

最后，在html文件中添加link，引入该图标。

引入语法：

<link rel="shortcut icon" href="../images/favicon.ico">

网站SEO引擎优化

定义 ：是指利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

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

优化三大标签TDK

title ：网站标题。它是网页的第一个重要标签。

用法：网站名称-网站介绍。（一般不超过30个字）

description ：网站说明。说明这个网站的用途，作用等内容。

keyword ：关键字，这是页面关键词，也是搜索引擎关注点之一。最好控制在 6-8 个关键词，关键词之间使用 英文逗号 隔开。

今天先写到这，下篇文章开始准备网站布局，拜拜~