品优购---品优购项目制作---8.4

品优购首页制作

网站的首页一般都是使用index命名，比如index.html或者index.php.
我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面。

常用模块类名命名

以下是我们约定的命名模块，同学们可以直接使用以下类名即可。

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

快捷导航shortcut制作：通栏的盒子。注意它的行高，会继承给里面的子盒子。包含版心的盒子。

header制作：header盒子必须有高度。logo标志定位，search搜索模块定位，hotwrods热词模块定位，shopcar购物车模块定位（count统计部分用绝对定位做，不要给宽度，因为可能买的件数处比较多，让件数撑开就好了，给一个高度，一定注意左下角不是圆角，其余三个是圆角写法：border-radius：7px 7px 7px 0；)。

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

nav导航制作：nav盒子通栏有高度，有下边框，左浮动dropdown（根据相关性，包含.dt和.dd两个盒子）。左浮动navitems导航栏组

footer底部制作：footer页面底部盒子通栏给一个高度和灰色的背景，有一个版心，版心里面包含，mod是模块的意思。mod_service是服务模块，mod_help是帮助模块，mod_copyright是版权模块。

main主体模块制作：以前书写的就是模块化中的公共部分。main主体模块是index里面专有的，需要新的样式文件index.css。·main盒子宽度为980px，距左边220px(margin-left)，给高度就不用消除浮动。main里面包含左侧盒子左浮动，focus焦点图模块，右侧盒子右浮动，newsflash新闻快报模块。

推荐模块制作：大盒子recom椎荐模块 recommend，recom-hd、recom-bd，注意里面的小竖线

楼层区floor制作：注意这个floor，不要给高度，内容有多少算多少

---

---

---

品优购列表页制作

品优购列表页制作准备工作

1.列表页面是新的页面，我们需要新建页面文件list.html
2.因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来
3.头部和底部的样式也需要，因此list.html中还需要引入common.css
4.需要新的list.css样式文件，这是列表页专门的样式文件

列表页header和nav修改:秒杀盒子 sk(second kill) 定位即可，左测浮动sk_list和sk_con包含ul和li

列表页主体sk_container：sk_container宽度1200，不给高度，sk_hd，sk_bd包含很多ul和Ii

---

---

---

品优购注册页制作

注册页类名命名

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

名称	说明
注册专区	registerarea
注册内容	reg-form
错误的	error
成功的	success
默认的	default

---

---

---

Web服务器

本知识点的目的：
1.了解什么是服务器以及相关概念
2.把自己网站上传到服务器上，可以让其他人访问

什么是Web服务器：我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览
如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了

服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。以下服务器我们主要指的是Web服务器。
根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。

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

远程服务器：本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。
比如域名：www.mi.com  可以访问小米网站

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

---

---

---

将自己的网站上传到远程服务器

注意：一般稳定的服务器都是需要收费的。比如：阿里云
这里给大家推荐一个免费的远程服务器（免费空间）http://free.3v.do/

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

---

---

---

基础班课程总结

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

---

拼死也要克服困难！！！！！