项目起步准备

申土客
108 阅读5分钟

实践是检验认识的真理性的唯一标准，认识来源于实践，正确的认识指导实践才能获得成功，否则终将是纸上谈兵，镜花水月。

一、开始

简单了解工作的开发流程

image.png

当然还有运维、测试、以及后台工程师，但是与我们前端工程师来说密切相关的还是产品经理和设计师，他们会提供原型图和设计图，让前端工程师1:1来开发实现。

image.png

作为一名前端开发工程师，我们开发的每一条数据都不是拍脑袋就去写的，一定是从原型图和设计图精准测量的数据而得到的。而测量工具有哪些呢？

image.png

image.png

我们可以直接在设计图上得到字号、距离等直观标注的精准的数据，大大提高了开发效率。

例如Sketch软件设计的设计图：

image.png

在这上面能够清晰的得到每个页面元素的具体数据，包括它们之间的距离等

image.png

然后，我们就可以根据设计图一比一还原页面进行开发工作。

二、项目准备

项目创建

首先我们需要创建一个项目文件夹，其中包含下面所示的文件夹结构：

image.png

然后，还需要再创建一个网站首页index.html，一般来说，绝大多数服务器默认的网站首页名为index.html：

image.png

接下来我们就可以在编辑器VSCode中打开这个文件夹，并在index.html文件中创建html骨架，并开始进行代码开发工作：

image.png

好了，创建工作已经完成，接下来进行项目实际开发前需要的准备工作

项目配置

在<head></head>标签中对网页进行一些基础配置（随着深入学习还有其他配置项，此处暂且不表）：

1、网页标题、关键词、页面描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慕云游商城-机票、酒店、旅游攻略</title>
    <meta name="Keywords" content="机票，酒店，旅游攻略，签证，出国，自由行">
    <meta name="Description" content="慕云游商城有10多年旅游行业经验，为您提供全方位旅游服务">
</head>
  • 设置网页标题title，文字会显示在浏览器的标签栏上，搜索引擎收录网站时显示的标题，为了吸引用户点击，合理设置title是必要的。
  • 合理设置网页的关键词和页面描述，也是SEO的重要手段。

SEO (Search Engine Optimization，搜索引擎优化)利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果中内占据领先地位，获得品牌收益

例如：当我搜索慕课网时

1288651-20231103095547665-1646012181.png

查看源代码时发现

1288651-20231103095724152-651868680.png

1288651-20231103095736812-525703741.png

因此，合理设置这些基础配置也是十分重要的，都是SEO的重要手段，利于搜索引擎抓取。

2、css文件基础配置

  • reset.css

不同的浏览器对一些标签有默认的样式，大部分的浏览器默认样式还有点区别，所以为了以便于我们后续的开发与管理，在开始之前让所有具有默认样式的标签清零，也就是重置。

因此，在css文件夹中创建reset.css文件，将所有默认样式清零。

可以使用雅虎清除样式库：百度yui reset

官网

css reset

可以直接将里面的代码（当然也可以自己继续在里面添加想要消除的样式标签）复制到我们创建的reset.css文件中，再在html文件中引入。

代码如下：

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}a{text-decoration: none;}
  • base.css

里面放置一些公共类，用来实现常见的功能，例如清除浮动，原子类，版心设置等，还可以放置所需要的自定义字体、字体图标的引入等。

一个标签可以同时使用多个类，因此只需要给标签设置多个公共类，就可以同时使用这些样式。

版心就是一个页面中主要内容居中显示的区域，下面红框框住的区域就是这个页面的版心：

image.png

例如：

/* 每个页面是有版心的，我们需要测量出来方便使用 */
.center-wrap{
    /* 慕云游商城页面的版心宽度 */
    width: 1152px;
    margin: 0 auto;
}
/* 清除浮动 */
.clearfix{
    overflow: hidden;
}
/* 清除浮动 */
.clearfix::after{
    content: '';
    display: block;
    clear: both;
    overflow: hidden;
}
/* 实现文本居中 */
.tac{
    text-align: center;
}

然后再引入到html文件中

  • css.css

这个css文件则是页面开发的主要编写位置。

结尾

此时将所需要的配置完成后，<head></head>标签对中代码如下：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慕云游商城-机票、酒店、旅游攻略</title>
    <meta name="Keywords" content="机票，酒店，旅游攻略，签证，出国，自由行">
    <meta name="Description" content="慕云游商城有10多年旅游行业经验，为您提供全方位旅游服务">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/css.css">
</head>

以上就是项目开发所需要的准备工作，接下来就可以正式进入开发阶段。

avatar
文章
阅读
粉丝