CSS3之项目实操(网站制作流程、favicon图标、TDK三大标签、LOGO的SEO优化、免费web服务器、蓝湖/摹客协作平台、使用github打开index.html)
目录
- 1. 网站制作流程
- 2. favicon图标
- 3. TDK三大标签SEO优化
- 4. LOGO的SEO优化
- 5. 免费web服务器
- 6. 蓝湖/摹客协作平台
- 7. 使用github打开index.html
1. 网站制作流程
说明:
- 第3步的预付订金,一般占合同总额的30%左右,而且不能退订金
- 第4步的初稿审核,需要先提供原型图,如下所示。原型图和客户沟通没问题了。再由UI根据原型图提供一个PSD的效果图
原型图如下:
PSD效果图如下:
- 第8步的后期维护,一般时长为半年或一年。如果需要加新功能,则需要额外收费
2. favicon图标
- 制作favicon图标
- 使用photoshop进行切图,得到png格式的图片
- 使用 第三方网站将png格式图片,转换成favicon格式的图标。将图标重命名为favicon.ico
- favicon图标放到项目根目录下
- HTML页面使用
<link rel="shortcut icon" href="favicon.ico" />
引入favicon图标 - 此时浏览器的标签就会显示引入的图标。也可以通过
base_url/favicon.ico
访问图标
3. TDK三大标签SEO优化
利用搜索引擎的规则,提高网站在有关搜索引擎内自然排名的方式,即SEO(Search Engine Optimization)搜索引擎优化。页面必须有title、description、keyword三个标签用来符合SEO优化。注意类似注册页面这种不需要做SEO优化。对于我们前端人员来说,我们只需要准备好这三个标签,具体里面的内容,有专门的SEO人员提供
-
title: 网站名(产品名)-网站的介绍(尽量不要超过30个汉字)。例如:
- 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物!
- 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站
-
description: 简要说明我们网站主要是做什么的。作为网站的总体业务和主题概括,多采用“我们是……”、“我们提供……”、“×××网作为……”、“电话:010……”之类语句。例如:
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />
-
keywords: 最好限制为6~8个关键词,关键词之间用英文逗号隔开,采用
关键词1,关键词2
的形式。例如:<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
4. LOGO的SEO优化
- logo里面首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要
- h1里面再放一个链接,可以返回首页的,把logo的背景图片给链接即可
- 为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来
- 方法1:text-indent移到盒子外面(
text-indent: -9999px
),然后overflow:hidden
- 方法2:直接给
font-size: 0;
就看不到文字了
- 方法1:text-indent移到盒子外面(
- 最后给链接一个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/
- 去免费空间网站注册账号
- 记录下域名。域名格式是
http://username.web3v.vip
- 点击管理中心的FTP管理,输入密码激活FTP,FTP主机地址是:
006.3vftp.com
。利用xftp软件,使用用户名和密码进行登录,上传shopping网站目录下的所有文件到远程服务器的根目录下 - 在浏览器中输入域名,即可访问我们的网站
6. 蓝湖/摹客协作平台
UI设计师完成psd效果图后,会上传到蓝湖/摹客里面。大部分情况下,UI会把图片按照前端设计要求给切好。同时会拉前端工程师进入蓝湖/摹客
UI设计师上传psd效果图到摹客:
-
摹客官网地址: https://www.mockplus.cn/。在上面注册一个账号
-
在慕客的下载区下载PS插件
-
双击慕客插件.exe文件,PS自动安装摹客插件
-
在PS的窗口-拓展功能-慕客,打开PS的摹客插件。然后在PS的摹客插件中登录慕客
-
选择PS的图层,然后在PS的慕客插件标记切图,当所有需要的图层都被标记为切图时,就可以选择上传全部画板,然后点击上传,就把全部切图上传到指定分组的指定项目下面了
-
上传完之后,点击查看项目,就会打开web端的页面,里面就可以直接看到图片的大小,文字的大小、颜色、内容,图片之间的间距,相关的CSS代码,切图(可以进行导出)等。还可以在左下角设置设计稿的总宽度
-
点击分享按钮进行链接的分享,分享链接时也可以邀请人员参与编辑
7. 使用github打开index.html
- 先将项目上传到github的仓库,其中index.html文件位于仓库的根目录下
- 选择Settings - Pages
- 选择Branch,然后Save
- 然后就可以访问: https://account_name.github.io/repository_name/,就可以访问我们项目的index.html了
Bulut0907: 是先分区再分桶,但分区只是逻辑分区,并不影响数据最终落在哪个BE服务器
CSDN-Ada助手: Vue入门 技能树或许可以帮到你:https://edu.csdn.net/skill/vue?utm_source=AI_act_vue
Bulut0907: 这个是一些底层概念的东西。自己没测过这些
Marig_Weizhi: 大佬您好,我想造一些Equality Delete Files进行测试,有什么办法吗
Bulut0907: 嗯