目录
品优购项目案例
(素材地址:)
1.创建如下文件夹:
名称 | 说明 |
---|---|
项目文件夹 | shopping |
样式类图片文件夹 | images |
样式文件夹 | css |
产品类图片文件夹 | upload |
字体类文件夹 | fonts |
脚本文件夹 | js |
2.创建文件
名称 | 说明 |
---|---|
首页 | index.html |
CSS初始化样式文件 | base.css |
CSS公共样式文件 | common.css |
发士大
有些网站初始化得不太提倡*{margin:0;padding:0;}
比如新浪:
html,body,ul,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,from,fiedset,legeend,img{margin:0;padding:0;}
3.网站favicon图标
favicon.ico一般用于作为缩略得网站标志,它显示在浏览器得地址栏或者标签上。
在html页面得<head></head>元素之间引入代码
<link rel="shortcut icon" herf="favicon.ico" type=“image/x-icon”/>
4.网站TDK三大标签SEO优化
SEO(Search Engine Optimization)汉译为搜索引擎优化,是一种利用搜索引擎得规则提高网站在有关搜索引擎内自然排名得方式。
目的 对网站进行深度得优化,从而帮助网站获取免费流量,进而在搜索引擎上提升网站的排名,提高网站的知名度。
页面必须有三个标签用来符合SEO优化
title网站标题:
是搜索引擎了解网页入口和对网页主题归属的最佳判断点。
建议:网站名(产品名)-网站的介绍(尽量不要超过30个汉字)
description网站说明:
见要说说明我们网站主要是做什么的
keywords关键字:
页面关键词,最好限制为6~8个关键词,之间用英文逗号隔开,关键词越靠前被搜索的概率越高
5.常用模块类名命名
名称 | 说明 |
---|---|
搜索导航栏 | shortcut |
头部 | header |
标志 | logo |
购物车 | shopcar |
搜索 | search |
热点词 | hotwords |
导航 | nav |
导航左侧 | dropdown包含.dd .dt |
导航右侧 | navitems |
页面底部 | footer |
页面底部服务模块 | mod_service |
页面底部帮助模块 | mod_help |
页面底部版权模块 | mod_copyright |
6.内容
header头部制作 注意
LOGO SEO优化
1.logo里面首先放一个h1标签。目的是为了提权,告诉搜索引擎,这个地方很重要
2.h1里面放一个链接,为了点击logo可以返回首页,把logo的背景图片给链接即可。
3.为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来
方法1 :text-indent移动到盒子外面(text-indent:-9999px),然后overflow:hidden,淘宝的做法
方法2:直接给font-size:0;就看不到文字了,京东的做法
4.最后链接一个title属性,这样鼠标放到logo上就可以看到提示文字了
搜索框里面的文字
placeholder="语言开发"
nav导航栏部分制作
dorpdown 二级菜单 下拉菜单
footer底部模块制作
main主体模块制作
floor楼层区制作
tab栏
列表结构搭建
准备工作
1.新建页面文件 list.html
2.头部和底部基本一致,需要将首页中的头部和底部的结构复制过来
3.头部和底部的样式也需要,因此list.html中也需要引入common.css
注册页
注册页:register.html
注意:注册页面比较隐私,为了保护用户信息,我们不需要对当前页面做SEO优化
图片与文字对齐:
vertical-align: middle;
Web服务器
如果想要很多人访问我们的网站,可以把品优购放到服务器上,这样就可以多人访问我们的网站了
服务器是提供计算服务的设备,也是一台计算机,在网络环境下,根据服务器提供的服务类型不同,服务器又分为文件服务器、数据服务器、应用程序服务器、Web服务器等。
Web服务器一般是指网站服务器。根据服务器在网络中所在的位置不同,又可以分为本地服务器和远程服务器
远程服务器
我们只要把项目上传到远程服务器电脑上,任何人都可以利用域名访问我们的网站了
免费的远程服务器(免费空间)http://free.3v.do/
将自己的网站上传到远程服务器步骤:
1.去免费空间网站注册账号
2.记录下主机名、用户名、密码、域名
3.利用cutftp软件上传网站到远程服务器
4.在浏览器中输入域名,即可访问我们的网站了