【网页设计】PC端品优购项目

【网页设计】PC端品优购项目

2024-12-26 14:18

能够独立完成品优购首页制作
能够独立完成品优购列表页制作
能够独立完成品优购注册页制作
能够独立完成品优购网站部署上线

注：具体制作请结合代码看，这里不贴出分别的代码，只给出整个项目

注：这里只是参考效果图做出的静态网页，远远不能达到实际应用（如搜索等交互手段），需要补足相关 js 知识

1.1 网站制作流程

原型图：初步模块的布局

psd 效果图：供客户总体感知效果；供前端人员制作网页时提供参数

1.2 品优购项目整体介绍

项目名称：品优购
项目描述：品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作

1.3 品优购项目的学习目的

电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。
品优购项目能复习、总结、提高基础班所学布局技术。
写完品优购项目，能对实际开发中制作 PC 端页面流程有一个整体的感知。
为后期学习移动端项目做铺垫。

1.4 开发工具以及技术栈

1. 开发工具

VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）

2. 技术栈

利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式
采取结构与样式相分离，模块化开发
良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范。（详情见素材文件夹 --- 品优购代码规范.md）（这个规范可以延伸至很多项目）

1.5 品优购项目搭建工作

2. 需要创建如下文件：

这里的 base.css 我们采用之前使用过的 “京东 CSS 初始化” 文件
以下中 * 的声明在渲染过程中效率更低，后者虽然声明复杂点，但是效率更高
也可以采用 CSS3 的特性来渲染，如：box-sizing: border-box;
记得在 index.html 中引入对应的 .css 文件

有些网站初始化的不太提倡 * { margin: 0; padding: 0; }

比如新浪：

3. 模块化开发

        所谓的模块化：将一个项目按照功能划分，
        一个功能一个模块，互不影响
        模块化开发具有重复使用、更换方便等优点

代码也如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用
这里最典型的应用就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式
模块化开发具有重复使用、修改方便等优点

1.6 网站 favicon 图标

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。
目前主要的浏览器都支持 favicon.ico 图标。

步骤：

制作favicon图标
favicon图标放到网站根目录下
HTML页面引入favicon图标

1. 制作 favicon 图标

把品优购图标切成 png 图片。
把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/

2. favicon图标放到网站根目录下

3. HTML 页面引入 favicon 图标

在html 页面里面的 <head> </head>元素之间引入代码。
哪个页面需要放在哪个页面中

1.7 网站TDK三大标签SEO优化

        SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
        SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
        页面必须有三个标签用来符合 SEO 优化。

1. title 网站标题

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

例如：

京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

2. description 网站说明

简要说明我们网站主要是做什么的。
我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。

例如：
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

3. heywords 关键字

keywords 是页面关键词，是搜索引擎的关注点之一。
keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2 的形式。

例如：
<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

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

2.1 常用模块类名命名

2.2 快捷导航 shortcut 制作

思路：

通栏的盒子命名为 shortcut ，是快捷导航的意思。注意这里的行高，可以继承给里面的子盒子
里面包含版心的盒子
版心盒子里面包含 1 号左侧盒子左浮动
版心盒子里面包含 2 号右侧盒子右浮动
需要用到字体图标

注意：

这里给了个通用模式，即左右浮动的盒子，分别较 .fl 和 .fr

对盒子1：

对于左侧盒子 1 中，分为文字和链接两部分，链接内的用两个 li 来分别对应
对于盒子间的空格，可以使用外边距，这里采用了空格的字体图标 &nbsp

对盒子2：（这里展示常见的做法，实际上有多种实现方法）

这里不要给 li 宽度（因为每个 li 中的字数不同），而是给盒子的 padding 值
每个竖线也当做一个盒子，这样保证 padding 值相同
这里对竖线的 li 的选取，可以用到伪类选择器（偶数的孩子）
小三角用字体图标做：放在盒子里 / after 伪元素制作
注意字体图标的声明样式：由于声明是放在 common.css 中（以前是放在 index.html 中），所以对应 url 的路径要更改

2.3 header 制作

思路：

header 盒子必须要有高度
1 号盒子是 logo 标志定位
2 号盒子是 search 搜索模块定位
3 号盒子是 hotwords 热词模块定位
4 号盒子是 shopcar 购物车模块

注意：

在 header 大盒子的 class 声明中，采取了多类名的写法，使得其同时具有多个模板

LOGO SEO 优化

这是更常见的 logo 制作方法，一定要规范

        1. logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
        2. h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可。
        3. 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。

方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法。
方法2：直接给 font-size: 0; 就看不到文字了，京东的做法。

4. 最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了。

注意：

根据效果图，设置好大小，通过绝对定位确定位置，不要忘记子绝父相
先放入 h1，然后再放入个 a，要让 a 的大小和盒子相同，最后再设置背景图片
消除文字（两个方法选一个）
对 a 加入 title 属性，使得鼠标放上去有效果

search 搜索模块

以前做过，现在看一看京东的做法

直接测量好大盒子，搜索表单和按钮的大小，讲搜索表单和按钮排列好后直接放入大盒子。
注意：最开始声明过，边框大小不撑大盒子，所以量的时候应该包含边框

对于搜索表单和按钮，要将其默认的样式全部清除完
对于大小的声明，注意要减去大盒子的边框宽度

hotwords 热词模块

里面放很多 a 即可，每个 a 中装对应的内容
对于空格，给每个盒子作用的 margin 值即可
对于红色字体，用之前的 style_red 即可

shopcar 购物车模块

对于文字前后的小图片，可以用 before 和 after 伪元素
对于左上角的角标，采用绝对定位即可
对于购物车的图标，可以去找符合要求的字体图标

对于 count 小模块，需要注意：

count 统计部分用绝对定位做
count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度
一定注意左下角不是圆角，其余三个是圆角写法： border-radius: 7px 7px 7px 0;
对于 count 的定位，按照人们的习惯，采用左对齐更好（件数增多后往右边增加）

2.4 nav 导航制作

nav 盒子通栏有高度，而且有个下边框
1 号盒子左侧浮动，dropdown
2 号盒子左侧浮动，navitems 导航栏组
1号盒子有讲究，根据相关性里面包含 .dt 和 .dd 两个盒子

通栏

不需要给宽度，给高度即可
注意下划线的声明和格式

dropdown 下拉菜单

这是有讲究的，在网页制作中，要关心各个模块间的关系。在效果图中可以发现，1 号盒子与下面的商品分类有关联，这里要注意。
dropdown 相当于下拉菜单的作用。

.dd 详细分类：

这个的制作就比较熟悉了，用 li 去制作，包括左侧的箭头也已经制作过很多次
新东西是，当鼠标放上去，会有一个白色背景，同时与底色的红色留了 2px 的缝，用 hover 制作
hover 有两个，一个是盒子变白色，第二个是文字变红色
对于顿号，这里有细节：每一个词语实际上是通往不同的界面。比如对于 “手机、数码、通信” 内部实际上有 3 个 a
对于左箭头，记得绝对定位（否则会贴近左侧的文字）
还有个小细节，为了让 .dd 的上沿与下边框贴近，这里可以声明 margin-top: 2px;

navitems 导航栏组

对于给 padding 值，有两种做法，其一是给 li，其二是给 a。这里采用 a 的方法，这是因为：如果给 li，那么只有经过文字才会有链接可以点击，而给 a 和 padding 值后，这个区域都是可以点击的。

对于不同字数的间隔，一定是不给宽度给 padding 值的做法

接下来并不是继续制作页面的主体部分，这是因为我们现在做的是一个 common.css，这一部分是通用的，而中间是各个网页的特色内容，所以这里跳过主体，直接进入 footer 的制作。

2.5 footer 底部制作

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

通栏

同样不给宽度，设置宽度和背景色即可

mod_service 模块

观察到有一个浅灰色的下边框，可以将此作为高度的边界
对于内容，给 5 个 li
左侧的图片给个盒子，用于放图标
右侧的文字利用浮动后文字环绕的效果即可。其中分别用 h5（采用 h5 是为了标签语义化）和段落装两种文字
图标和文字的距离用 margin 即可
为了减轻服务器的压力，整个页面的小图标可以采用精灵图的方式

mod_help 模块

同理，低下也有下边框
布局则是典型的dl 中 dd 和 dt
细节参考效果图即可
对于右侧的二维码，帮助中心仍然是 dt，下面的二维码和文字则是 1 个 dd 即可。记得声明居中
对于最后一个的特殊结构，可以采用伪类选择器 last-child 来选取

mod_copyright 模块

上面是各种链接，下面是版权声明
对于链接，参考前面做的，直接声明 class = "links" 即可，在此基础上稍微调整格式
对于版权声明，由于整段都是文字，声明下格式即可

以前书写的就是模块化中的公共部分。
main 主体模块是 index 里面专有的，注意需要新的样式文件 index.css 。

2.6 main 主题模块制作

思路：

main 盒子宽度为 980 像素，位置距离左边 220px (margin-left ) ，给高度就不用清除浮动
main 里面包含左侧盒子，左浮动，focus 焦点图模块
main 里面包含右侧盒子，右浮动，newsflash 新闻快报模块

整体布局

对于 main 盒子和其中的小盒子，按照效果图对应设计即可
要注意，为了使得与左侧的分类栏对齐，上面要有 10px 的间隔
通过左侧盒子左浮动，右侧盒子右浮动，自然空出中间的空隙

focus 焦点图

这里结构不能直接放入图片，而是先放 ur li，在 li 中放图片（为了便于轮播图的制作，这里留个伏笔，后面可能会更新关于轮播图更成熟的做法）

Newflash 快报

1 号盒子为 news 新闻模块高度为 165px
2 号盒子为 lifeservice 生活服务模块高度为 209px
3 号盒子为 bargain 特价商品

关于高度需要注意：对于一号盒子要量边框，而二号盒子不用，三号盒子中插入图片即可

news 新闻快报

注意：这里我们分为上下两个模块，但是两个模块都用 div
1 号盒子 news-hd 新闻头部模块，给一个高度和下边框
2 号盒子 news-bd 新闻主题部分，里面包含 ul 和 li 还有链接
多出的部分用省略号替代：这部分前面讲过，三步走

lifeservice 生活服务模块

lifeservice 盒子宽度为 250 ，但是装不开里面的 4 个小 li
可以让 lifeservice 里面的 ul 宽度为 252，就可以装的下 4 个小 li
lifeservice 盒子 overflow 隐藏多余的部分就可以了
对于边框，大盒子给左边框，每个 li 给右下两个边框
对于图标，采用的是精灵图的做法，在 li 中再做一个 i 盒子用于放图片
伏笔：后面可能有如何用 js 来制作这部分

2.7 推荐模块制作

今日推荐模块

大盒子 recom 推荐模块 recommend
里面包含 2 个盒子，浮动即可
1 号盒子 recom_hd
2 号盒子 recom_bd ，注意里面的小竖线
对于 2 号盒子中，这里是现成的图片，从制作成本的角度来讲，和美工沟通好，直接替换 upload 文件夹中的图片效率是更高的
小竖线可以用伪元素 after 来制作；对于第四个没有小竖线，有两种处理方式：last-child 或者 nth-child(-n+3)（不需要多声明）
保险起见，对图片的高度和宽度设置定值

猜你喜欢模块

之前已经做过很多这种了，这里略过

2.8 楼层区域 floor 制作

这一部分会与侧边栏有较多的关联，这是新的东西。所以在开发的时候侧栏被称为 “电梯导航”，右侧区域称为 “楼层区”。所以可以给一个大的盒子，在盒子内部分不同楼层。
在这里的静态网页制作中，可以用锚点链接制作。在真实开发中，则需要 js 相关的知识。

思路：

注意这个 floor ，不要给高度，内容有多少，算多少

第一楼是家用电器模块：里面包含两个盒子

1 号盒子 box_hd，给一个高度，有个下边框，里面分为左右 2 个盒子
2 号盒子 box_bd，不要给高度
对于后面的其他楼层，在此基础上稍作修改即可

box_hd 模块

有高度可以不用清除浮动
左边 h3 ，盒子左浮动
右边 tab_list ，右浮动，因为用到 tab 切换效果，所以里面要用 ul 和 li 来做
对 2 号盒子，每个 li 中包含文字和一个竖线（直接打出来），然后对文字做成链接
对于竖线与文字的空格，这里给 a 一个 margin 值即可
注意默认的 “热门” 显示红色以及鼠标经过的红色效果

Tab 栏原理-布局需求

要求选项卡个数要内容个数一致。
具体效果需要学习 js 后使用，这里先讲布局需求。

一定需要 tab_list 和 tab_content 这两个盒子
显示原理是：当点击某一选项，content 盒子中就显示对应的内容（ js 来实现显示切换）

box_bd 模块

根据 tab 切换的原理， tab_content 里面包含内容部分。这个内容可以通过ul布局
分为 5 个大列，列的宽度不一致
每个列都是一个 div
列之间的竖线可以采用 div 的边框，第三个和第五个盒子的横线采用 a 的边框即可（记得转换行内块元素，一般而言，a 如果包含有宽度的盒子，a 需要转为块级元素）

div_210

上模块放文字，给 6 个 li 即可，按照效果图布局即可
下面的盒子放图片即可

div_329, 221, 219

每个盒子中放图片即可，对于多个图片放多个盒子即可（链接 a）

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

列表页面是新的页面，我们需要新建页面文件 list.html 。
因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来。
头部和底部的样式也需要，因此 list.html 中还需要引入 common.css 。
在 list.html 中同样需要 title 部分的内容与小图标。
需要新的 list.css 样式文件，这是列表页专门的样式文件。

这里体现出好习惯以及模块化带来的好处：

对每个模块都有对应的注释用于区分头尾，提高迁移节点辨识度
模块化开发使得能够重复利用，仅仅做一些 ctrl+c/v 就已经完成了 2/3，剩下的主体部分单独制作即可

3.2 列表页 header 和 nav 修改

秒杀盒子 sk（ second kill ）定位即可
1 号盒子左侧浮动 sk_list 里面包含 ul 和 li
2 号盒子左侧浮动 sk_con 里面包含 ul 和 li
list 和 con 盒子的制作与 nav 大同小异，根据效果图做对应更改即可

second kill 模块

竖线当做盒子的左边框，间隔用 padding 撑开即可
秒杀用图片即可

sk_list 模块 & sk_con 模块

还是讲文字放入 a 中，同时声明对应文字样式
间隙依旧是采用给 a padding 值，原因与之前相同
为了使左侧文字和右侧文字底部尽量对齐，可以让右侧盒子的行高稍微增大一点（因为都是声明的水平垂直居中，行高越大，文字越靠下）
女鞋默认红，声明 class="style_red" 即可；鼠标经过变红，同样声明即可
更多分类的三角，给 after 就行

3.3 列表页主体 sk_container

1 号盒子 sk _container 给宽度 1200，不要给高度（实际产品数量可能很多，给了高度会限制）
2 号盒子 sk_hd ，插入图片即可
3 号盒子 sk_bd ，里面包含很多的 ul 和 li

注意：

在直接建立盒子后，会发现其中一个盒子会在右侧，而另一个正常在左侧。这是因为：navy 盒子中左侧行高 47px，右侧行高 49px，而浮动不会压住内容，使得文字围绕更多分类这一盒子。所以要对 navy 声明 overflow: hidden;
2 号盒子直接插入图片（讨好美工的必要性）
3 号盒子的布局和之前做个的学成在线相同
鼠标经过产生红色边框的做法：变色。因为 li 本身就有 1px 的边框，不经过的情况只需要声明为透明即可；右下盖住的原因是图片和盒子一样大，声明 overflow: hidden; 即可
多个盒子声明浮动，间隙声明 margin-right，对 nth-child(4n) 声明 margin-right = 0;
对于底部升上去是因为没有个 sk_bd 声明高度，给 li 的父亲 ur 声明 class="clearfix" 清除浮动即可

这个的目的在于熟悉如何去布局多个表单和对应样式。

4.1 注册页类名命名

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

注意：这里的静态页面只是展示如何布局，表单的内容认证需要用到 js

简单的页面 tilte（个人注册）
页面小图标
引入对应 .css

4.2 注册页布局

4.3 header 制作

需要声明版心 class="w"
header 做简单的盒子，放入 logo 即可；不需要做 seo 优化，直接盒子里放图片即可
对于 logo 放个简单的链接到主页即可

4.4 registerarea 制作

h3 模块

做一个大盒子作为主体区域
上面的模块用 h3 即可，给对应的背景色和下边框
左侧左浮动，右侧右浮动，登录标红给链接

reg-form 注册内容模块

需要一个标定宽度和高度的盒子，然后水平居中对齐（垂直居中不一定有必要，给 margin-top 即可）
内部不一定用表格来做，用 li 也能排列整齐
对于文字右对齐的做法：将 label 标签转换为行内块元素，给定宽度，声明 text-align: right;
每个 li 包含 label，input 表单，提示信息
提示信息在 span 中还要声明 i 来放对应的 √ / × 图标
文字和图片对齐居中只需要对图片的盒子声明 vertical-align: middle;
对于提示信息中的共同部分，可以再 success 和 error 中共同声明

安全程度模块

这个部分也可放在 li 中
对于弱中强，可以使用三个 em；宽度给 padding 值，再设置颜色即可（声明单独的 class 来做样式）
整体的 li 给 padding 来向右移

同意协议模块

也是一个 li
前面用复选框
这里会发现大小异常，是因为前面对所有表单声明过样式 .reg_form ul li input，更改为 .reg_form ul li .inp 即可；然后对 reg_form 中的添加类名声明 class="inp"
复选框和文字对齐一样是声明 vertical-align: middle;
位置移动依然采用给 padding 值
协议给出链接并修改颜色

完成注册按钮

设置大小，颜色等样式
input type = "submit"
上面的距离给 margin-top 即可

最后不要忘记对整个表单添加 <form action="">

4.5 footer 制作

这里直接把主页的底部结构和样式复制过来即可，根据需求稍作修改

最后就是修改对应的 a 链接，使得跳转符合要求即可。

这部分采用的都是前面提及过的，自行完成即可

本知识点的目的

了解什么是服务器以及相关概念
把自己网站上传到服务器上，可以让其他人访问

6.1 什么是 Web 服务器

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

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

6.2 本地服务器

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

6.3 远程服务器

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

总结：

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

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

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

去免费空间网站注册账号。
记录下主机名、用户名、密码、域名。（第一次一定要记得开通 FTP）
利用 cutftp 软件上传网站到远程服务器。（在素材中）
在浏览器中输入域名，即可访问我们的品优购网站了。