PC端品优购项目 网站制作流程、项目搭建、 三大标签 SEO 优化 、 LOGO SEO 优化 、 Web 服务器 、 注册页面不需要SEO 、

分类：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 有很大的帮助。

原文地址：https://blog.csdn.net/m0_55170432/article/details/115677558

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

前端里面如何进行搜索引擎优化(SEO)
前端里面如何进行搜索引擎优化(SEO) 如何进行SEO优化： (1) 避免head标签js堵塞： 所有放在head标签里面的js和css都会堵塞渲染；如果这些css和js需要加载很久的话，那么页面就空白了； 解决办法：一是把script放到body后面，这也是很多网站采取的方法。 第二种是给scri
网站页面（前端）seo优化方法及建议
网站页面（前端）seo优化方法及建议 很多时候，网站页面（前端）seo优化所涉及的点在于页面精简。本教程概述了如何对网页进行精简，以及提供相关建议，加快网站加载速度，提升网站性能。 从相反方面考虑，如果网页庞杂，网页打开速度慢，会有什么后果？ 首先，网页代码 […] 很多时候，网站页面（前端）seo
如果移动端流量波动怎么进行SEO优化？
网站流量短时间内的少量波动一般来说是正常现象。当流量波动持续时间较长且幅度较大时，则需要排查原因；建议站长进行以下排查跟处理：
持续做原创优质内容，是否有利于获得搜索流量？
持续输出原创优质内容，获得更多的用户点击与认可，会提高网站的评分，从而获得更多的搜索展现。
百度信息流的流量形式可以保证流量的获取?
百度信息流配置为用户的自然流量，即会根据用户属性和配置的内容进行匹配后综合决定是否进行展示，因此需要开发者不断优化素材从而获取流量。
百度搜索的索引量与流量有什么关系？百度搜索的索引量与流量解释
百度搜索的索引量与流量有什么关系？百度搜索的索引量与流量是什么意思：百度搜索基于用户需求和资源质量等维度对索引量数据进行评估，不定期的更新索引量数据库。可能会删除低质量、用户无需求的资源，也会增加高质
SEO移动端内容是否更容易获得搜索的流量？
随着手机移动端的快速崛起，慢慢的占领了大部分用户的访问入口，SEO优化方面，大家也开始更加重视针对移动端SEO的安排；
Nuxt框架，ssr服务器渲染解决单页面应用的 SEO 问题
首先说下SSR，最近很热的词，意为ServerSideRendering（服务端渲染），目的是为了解决单页面应用的SEO的问题，搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关信息。用NUXT来做SSR，作用就是在node.js上进一步封装，然后省去我们搭建服务端环境的步骤，只需要遵循这个库的一些
有没有比宝塔面板更好的linux运维工具?
   我是一个站长,现在建站seo是比较重要的部分,买了独立ip的云服务器主机,为了就是能够seo效果好点.建站优化我不担心,最郁闷的就是linux服务器运维这块,宝塔linux面板是必须安装到服务器上,比较消耗服务器内存,运维比较麻烦. 还有就是购买宝塔面板的附带插件比较贵,基本买个
外链是什么意思，如何做好高质量的外链建设？
在我们学习网站seo高质量外链建设之前，首先我们要先了解一下，究竟什么是外链呢？外链其实就是我们网站的外部链接，也称为反向链接，就是由其他的网站指向我们网站的链接。那么外链的作用是什么呢？外链可以为自己的网站带来流量，将其他网站的流量导入到自己的网站，同时也可以提高网站的权重排
seo专员日常工作内容是什么？
大表哥相信不少朋友学习seo优化技术都是为了能够靠seo赚到钱，多数的朋友会选择去找一份seo优化的工作来赚钱，seo优化者在选择工作的时候都会普遍接触到一项职位，那就是seo专员，很多朋友都想知道seo专员是做什么的，那么今天大表哥就和大家聊一聊seo专员日常工作内容是什么？Seo专员是什么
干货！手把手教你打造自己的seo生态资源，让排名不在是梦想
又到了分享经验的时刻，每到这时候，高粱seo心里总是美滋滋的，因为分享是一种快乐，更是一种收获，能够与人分享，本身就是一种成功。在上一篇文章当中，高粱seo用两个实战案例，证明了目前资源导入对seo快速排名的帮助时非常给力的，之后很多seo优化伙伴纷纷来咨询，都想知道具体是怎么操作的。高粱se
初探SEO
 SEO阅读笔记目录基本规则URL优化代码优化代码内容优化页面头部优化图片优化网页结构基本规则1.资源越浅越容易被收录2.资源越浅越容易被收录3.关键词越靠文档（html）前，越容易被收录4.关键词出现的次数越多越好 URL优化Url中携带关键词组合关键词：eg.IPHONE
干货分享：互联网运营 学习SEO从零开始 SEO深度解析学习笔记
最近在自学SEO，互联网运营，把做的笔记干货分享给大家啊！希望能帮到大家，如有好的建议可以关注我【磨人的小妖精】或留言，大家一起探讨。之前还写过一篇文章互联网运营+SEO：推荐必看的5本书籍，学习还是需要系统化的书本来学习，帮助会更大。做SEO，关键词和工具比较重要，今天就先分享这两个，日
SEO常做的优化
在我们接到优化网站需求的时候,一般可以从如下几个步骤进行:1.网站的机构2.页面的布局3.关键词的选取4.关键词的分布首页title标题的组成格式核心关键词+网站名称(最好含有关键词)keywords的设置核心关键词由主到次,由左到右依次出现,保持在3-4个最好,以免有关键词
优秀的网站设计一定要满足的六个条件
    众所周知，每个人都是独立的个体，都有自己的思想和判断，具体一个什么样的网站才能称得上是成功优秀的，对于这个问题不同的人会给出不同的解说，并且衡量一个网站好坏的方式有很多的，但无论如何，我们都需要把各方面都做到最好，力争让网站能够在众多的网站中脱颖而出，而这应该是衡
百度SEO怎么做 影响百度seo排名的因素
现在SEO的最新算法、技巧，希望大家运用这些技巧，都像我一样能够在百度上获得客户：第一步：了解搜索引擎的工作原理爬——抓——处——排——展第二步：大家要建立一个整体框架，影响SEO的排名有哪些因素如果你网站的收录量很低，那么需要优化以下8个因素：内链结构优化URL结构优化产品内容
为什么我们的网站会降权？原因在哪？
要想了解网站降权或者被K的原因，首先要去深度分析降权被K产生的因素，从搜索引擎本质上来说，并不会有特定的所谓被降权K站的条件来制定网站降权或者被K。并且网站降权和网站被K属于两种不同的现象。降权最明显的现象是网页还处于收录状态，但是整个标题或某个关键词搜索的时候搜索不到
互联网运营+SEO：推荐必看的5本书籍
本文首发于：风云社区（scoee.com）最近开始学习和研究互联网运营和SEO，对于我这个小白来讲，还是有些吃力，毕竟从来没接触这方面的，尽管在之前的软件公司做过售前和产品相关的工作，但毕竟与互联网产品运营和SEO，还是差别很大。So，在网上零散看了一些互联网产品运营和SEO相关文章，感觉讲的太片面
新网站如何通过技巧快速获得流量？
任何一个流量类的网站都需要长期的seo优化与维护，多数站长搭建网站的目的也是通过网站获得一定的流量和转化，但是做过seo的朋友都知道，网站获得大量流量最好的方法就是获得高的排名，但是通常新网站想要通过seo获得排名是需要长时间的积累的，那么网站建立前期如何获得流量就是很多站长比
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot