标签：Web 网站 标签 SEO 服务器 品优购 优化 页面

-------------------- 网站制作流程 --------------------

1. 客户沟通、制定方案
2. 签订合同
3. 预付定金
4. 初稿审核
5. 前台页面设计，后台功能开发
6. 测试验收
7. 上线培训
8. 后期维护

-------------------- 品优购项目规划 --------------------

1. 品优购项目整体介绍
2. 品优购项目学习目的
3. 开发工具以及技术栈

1. 品优购项目整体介绍

项目名称：品优购

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

2. 品优购项目的学习目的

1. 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。
2. 品优购项目能复习、总结、提高基础班所学布局技术。
3. 写完品优购项目，能对实际开发中 制作 PC 端页面流程 有一个整体的感知。
4. 为后期学习移动端项目做铺垫。

3. 开发工具以及技术栈

1.开发工具

1. VScode 、Photoshop（fw）
2. 主流浏览器（以Chrome浏览器为主）

2.技术栈

1. 利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式
2. 采取结构与样式相分离，模块化开发
3. 良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范。（详情见素材文件夹— 品优购代码规范.md）

4. 总结

1. 品优购项目整体介绍 （制作首页、列表页、注册页三个页面）
2. 品优购项目学习目的 （里面包含技术较多，能极大锻炼我们布局技术）
3. 开发工具以及技术栈 （切图用ps， 代码用Vscode，测试用chrome， 大量使用HTML5+CSS3）

-------------------- 品优购项目搭建工作 --------------------

1.需要创建如下文件夹：

1. 项目文件夹 shoping
2. 样式类图片文件夹 images
3. 样式文件夹 css
4. 产品类图片文件夹 upload
5. 字体类文件夹 fonts
6. 脚本文件夹 js

2.需要创建如下文件：

1. 首页 index.html
2. CSS 初始化文件 base.css
3. 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. 有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用
2. 这里最典型的应用就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式
3. 模块化开发具有 重复使用 、修改方便 等优点

common.css 公共样式里面包含 版心宽度 、清除浮动 、页面文字颜色 等公共样式。

-------------------- 网站 favicon 图标 --------------------

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

一、制作favicon图标

1. 把品优购图标切成 png 图片。
2. 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/

二、favicon图标放到网站根目录下 （跟 index.html 同级）

三、 HTML页面引入favicon图标

1. 在html 页面里面的 head 元素之间引入代码。
   修改 rel 、href 、type 的值

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

-------------- 网站TDK三大标签SEO优化 ------------

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

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

页面必须有三个标签用来符合 SEO 优化。 （ title 、 description 、 keyword ）

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

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

例如：

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

    <!-- 网站标题 -->
    <title>
    	品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！		
    </title>

2. description 网站说明 （meta 标签）

	<meta name="description" content="" />
	
    例子：
    <meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服饰装饰、母婴、图书、食品等数万个品牌优质商品。便捷、诚信的服务，为您提供预约的网上购物体验！" />

3. keywords 关键字 （meta 标签）
keywords 是页面关键词，是搜索引擎的关注点之一。

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

	<meta namen="keywords" content="" />

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

对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备。

-------------- LOGO SEO 优化 ------------

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

注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。

-------------- Web 服务器 ------------

服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web 服务器等。

1. Web 服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等 Web 客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。

以下服务器我们主要指的是Web服务器。

根据服务器在网络中所在的位置不同，又可分为 本地服务器 和 远程服务器 。

2. 本地服务器
我们可以把自己的电脑设置为本地服务器， 这样同一个局域网内的同学就可以访问你的品优购网站了。 就业班学ajax的时候，再进行讲解。

3. 远程服务器
本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。

远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用 域名 访问我们的网站了。

4. 总结：

1. 服务器就是一台电脑。因为我们主要是做网站，所以我们主要使用web服务器
2. 服务器可以分为本地服务器和远程服务器
3. 远程服务器是别的公司为我们提供了一台计算机。
4. 我们可以把网站上传到远程服务器里面， 别人就可以通过域名访问我们的网站了

5. 将自己的网站上传到远程服务器
注意：一般稳定的服务器都是需要收费的。 比如：阿里云

这里给大家推荐一个免费的远程服务器（免费空间） http://free.3v.do/

1. 去免费空间网站注册账号。
2. 记录下主机名、用户名、密码、域名。
3. 利用 cutftp 软件 上传网站到远程服务器。
4. 在浏览器中输入域名，即可访问我们的品优购网站了。

-------------- 品优购制作 ------------

网站的首页一般都是使用 index 命名，比如 index.html 或者 index.php

我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到 common.css 里面

1. 常用模块类名命名

1. 快捷导航栏 shortcut
2. 头部 header
3. 标志 logo
4. 购物车 shopcar
5. 搜索 search
6. 热点词 hotwrods
7. 导航 nav
8. 导航左侧 dropdown 包含 .dd .dt
9. 导航右侧 navitems
10. 页面底部 footer
11. 页面底部服务模块 mod_service
12. 页面底部帮助模块 mod_help
13. 页面底部版权模块 mod_copyright

2. 注册页类名命名

1. 注册专区 registerarea
2. 注册内容 reg-form
3. 错误的 error
4. 成功的 success
5. 默认的 default

-------------- 课程总结 ------------

1. HTML我们学的就是常用标签， 就是基本盒子
2. CSS 就是用来美化布局网页。
3. HTML+CSS是没有逻辑可言的，基本就是搭积木摆放盒子的过程，你需要的是耐心。
4. 对同学们来说，现在最困难的是 布局结构 。欠缺分析页面布局的能力,
5. 同一个模块，有很多布局方式，能做出来就是好的。
6. 多看别人写的页面，模仿人家的布局，每次写页面总会有新的收获。
7. 错误总是在所难免，一定要学会利用chrome 调试工具， 他们能快速帮我们排查错误。你还需要细心。
8. 学好定位，对后面学习JavaScript 有很大的帮助。

标签：Web,网站,标签,SEO,服务器,品优购,优化,页面
来源： https://blog.csdn.net/m0_55170432/article/details/115677558

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。