网站制作流程,favicon图标,SEO优化,首页制作,logo SEO优化

网站制作流程

开发工具以及技术栈
1.开发工具
VScode,ps,主流浏览器
2.技术栈
利用HTML5+CSS3手动布局,可以大量使用H5新增标签和样式
采用结构与样式相分离,模块化开发
良好的代码规范

ClassName命名
命名应尽量精短,明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用下划线连接。

制作首页,列表页,注册页三个页面

项目搭建工作
1.需要创建如下文件夹:
项目文件夹
样式类图片文件夹:images
样式文件夹:css
产品类图片文件夹:upload
字体类文件夹:fonts
脚本文件夹:js
2.需要创建如下文件:
首页:index.html
css初始化样式文件:base.css
css公共样式文件:common.css
有些网站初始化的不太提倡*{margin:0;padding:0;}
比如:xl

网站favicon图标

favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址或者标签上。目前主要的浏览器都支持favicon.ico图标
制作favicon图标
1.把图片切成png图片
2.把png图片转换为ico图标,需要借助第三方转换网站,例如,比特虫:http://www.bitbug.net/
3.把favicon图标放到网站根目录下
4.在html页面里面的head元素之间引入代码

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

网站TDK三大标签SEO优化

SEO汉译为搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式
目的:对网站进行深度的优化,从而帮助网站获取免费的流量,进而在搜索引擎上提高网站的排名,提高网站的知名度。

title网站标题
title具有不可替代性,是我们内页的第一个重要标签,是搜索引擎了解网页的入口和对网页主题归属的最佳断点。
建议:网站名(产品名)-网站的介绍(尽量不要超过30个汉字)

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

keywords关键字
是页面关键字,是搜索引擎的关注点之一
做好限制为6-8个关键字,之间用英文逗号隔开
eg:

<meta name="keywords" content="网上购物,网上商城,..."/>

首页制作

常用模块类名命名
快捷导航栏:shortcut
头部:header
标志:logo
购物车:shopcar
搜索:search
热点词:hotwrods
导航:nav
导航左侧:dropdown包含.dd .dt
导航右侧:navitems
页面底部:footer
页面底部服务模块:mod_service
页面底部帮助模块:mod_help
页面底部版权模块:mod_copyright

header制作
header盒子必需要有高度
logo标志定位
search搜索模块定位
hotwords热词模块定位
shopcar购物车模块

logo SEO 优化

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值