CSS3之项目实操(网站制作流程、favicon图标、TDK三大标签、LOGO的SEO优化、免费web服务器、蓝湖/摹客协作平台、使用github打开index.html)

1. 网站制作流程

说明：

• 第3步的预付订金，一般占合同总额的30%左右，而且不能退订金
• 第4步的初稿审核，需要先提供原型图，如下所示。原型图和客户沟通没问题了。再由UI根据原型图提供一个PSD的效果图

原型图如下：

PSD效果图如下：

• 第8步的后期维护，一般时长为半年或一年。如果需要加新功能，则需要额外收费

2. favicon图标

1. 制作favicon图标
   1. 使用photoshop进行切图，得到png格式的图片
   2. 使用第三方网站将png格式图片，转换成favicon格式的图标。将图标重命名为favicon.ico
2. favicon图标放到项目根目录下
3. HTML页面使用<link rel="shortcut icon" href="favicon.ico" />引入favicon图标
4. 此时浏览器的标签就会显示引入的图标。也可以通过base_url/favicon.ico访问图标

3. TDK三大标签SEO优化

利用搜索引擎的规则，提高网站在有关搜索引擎内自然排名的方式，即SEO(Search Engine Optimization)搜索引擎优化。页面必须有title、description、keyword三个标签用来符合SEO优化。注意类似注册页面这种不需要做SEO优化。对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的SEO人员提供

• title: 网站名(产品名)-网站的介绍(尽量不要超过30个汉字)。例如：

  1. 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
  2. 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

• description: 简要说明我们网站主要是做什么的。作为网站的总体业务和主题概括，多采用“我们是……”、“我们提供……”、“×××网作为……”、“电话：010……”之类语句。例如：

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

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

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

4. LOGO的SEO优化

1. logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要
2. h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可
3. 为了搜索引擎收录我们，我们链接里面要放文字(网站名称)，但是文字不要显示出来
   1. 方法1：text-indent移到盒子外面(text-indent: -9999px)，然后overflow:hidden
   2. 方法2：直接给font-size: 0; 就看不到文字了
4. 最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字

        <div>
            <h1>
                <!-- 给a添加css样式: background-image和font-size -->
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>

5. 免费web服务器

使用免费web服务器: https://free.3v.do/

1. 去免费空间网站注册账号
2. 记录下域名。域名格式是http://username.web3v.vip
3. 点击管理中心的FTP管理，输入密码激活FTP，FTP主机地址是: 006.3vftp.com。利用xftp软件，使用用户名和密码进行登录，上传shopping网站目录下的所有文件到远程服务器的根目录下
4. 在浏览器中输入域名，即可访问我们的网站

6. 蓝湖/摹客协作平台

UI设计师完成psd效果图后，会上传到蓝湖/摹客里面。大部分情况下，UI会把图片按照前端设计要求给切好。同时会拉前端工程师进入蓝湖/摹客

UI设计师上传psd效果图到摹客：

1. 摹客官网地址： https://www.mockplus.cn/。在上面注册一个账号

2. 在慕客的下载区下载PS插件

3. 双击慕客插件.exe文件，PS自动安装摹客插件

4. 在PS的窗口-拓展功能-慕客，打开PS的摹客插件。然后在PS的摹客插件中登录慕客

5. 选择PS的图层，然后在PS的慕客插件标记切图，当所有需要的图层都被标记为切图时，就可以选择上传全部画板，然后点击上传，就把全部切图上传到指定分组的指定项目下面了
   

6. 上传完之后，点击查看项目，就会打开web端的页面，里面就可以直接看到图片的大小，文字的大小、颜色、内容，图片之间的间距，相关的CSS代码，切图(可以进行导出)等。还可以在左下角设置设计稿的总宽度

7. 点击分享按钮进行链接的分享，分享链接时也可以邀请人员参与编辑

7. 使用github打开index.html

1. 先将项目上传到github的仓库，其中index.html文件位于仓库的根目录下
2. 选择Settings - Pages
3. 选择Branch，然后Save
4. 然后就可以访问: https://account_name.github.io/repository_name/，就可以访问我们项目的index.html了