DAY 7 | 自学前端第七天

今天做个网站首页

---

PS切图

1 常见的图片格式

1. JPG图像格式，色彩好，手机相机高清清晰颜色多，产品类图片。
2. GIF图像格式，颜色少，可以保存透明背景，动画效果的。
3. PNG 图像格式，综合，清晰，颜色丰富，可以透明。
4. PSD图像格式，PS专用格式，可以存放图层，通道等多种设计稿。对前端人员优点是：可以直接从上面辅助文字，获得图像，还可以测量大小和距离。

2 PS切图方式

1. 图层切图
2. 切片切图
3. PS插件切图

3 图层切图

最简单的切图方式：右击图层——快速导出为PNG

很多情况下，我们需要合并图层再导出：

1. shift选中需要的图层，Ctrl+E合并图层
2. 右击图层——快速导出为PNG

最好的方法是：沟通（网页美工出效果图时尽量说一下）

4 切片切图

1. 利用切片工具手动划出
2. 导出选中的图片存储为web，选择选中的切片
3. 切透明图片记得取消背景图层

5 PS插件切图

cutterman 

png-24 透明背景

PS里窗口——扩展——cutterman——web——导出格式——选择输出文件件——单击图层——导出选中图层

PS里窗口——扩展——cutterman——web——导出格式——选择输出文件夹——选区——导出选中图层

• 学成在线案例

1 典型的企业级网站

2 目的是为了整体感知企业级网站布局流程，复习以前知识。

一 、准备素材和工具

1. 学成在线PSD源文件；
2. 开发工具=PS（切图）/cutterman插件+VScode（代码）+Chrome（测试）

二、案例准备工作

结构和样式相分离：html文件和css文件

1. 创建study目录文件夹（用于存放我们这个页面的相关内容）；
2. 用VScode打开目标文件夹；
3. study目录文件夹里创建images文件夹，用于保存图片；
4. 新建首页文件index.html（以后我们的网站首页统一规定为index.html）；
5. 新建style.css样式文件。本次采用外链样式表；
6. 将样式引入我们的html页面文件中 <link rel="stylesheet" href="style.css">；
7. 样式表写入清除内外边距的样式，来检测样式表是否引入成功。

三、CSS属性书写顺序（重点）

 编程中如何衡量一个人的代码能力？

规范标准 优雅高质量 专业

建议遵循以下顺序：

1. 布局定位属性：display position float clear visibility overflow （建议display第一个写）
2. 自身属性：width height margin padding border background
3. 文本属性：color font text-decoration text-align vertical-align white-space break-word
4. 其他属性：（css3）content cursor border-radius box-shadow text-shadow background:linear-gradient...

四、页面布局整体思路

1.  必须确定页面的版心（可视区），我们测量可得知；
2. 分析页面中的行模块，以及每个行模块中的列模块——页面布局第一准则；
3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置——页面布局第二准则；
4. 制作HTML结构，我们还是遵循，先有结构，后有样式的原则，结构永远最重要；
5. 所以，先理清楚布局结构，再写代码尤为重要，这需要我们多写多积累。

 

 五、确定版心

 测量页面版心的像素为1200px，每个版心都要水平居中对齐，可以定义版心为公共类：

.w {
    width: 1200px;
    margin: auto;
}

* {
    margin: 0;
    padding: 0;
}
.w {
    width: 1200px;
    margin: auto;
}
body {
    background-color: #f3f5f7;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}

.clearfix:before
,.clearfix:after {
    content:"";
    display: table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}

 六、头部制作

1. 1号是版心盒子header 1200*42的盒子水平居中对齐，上下给一个margin值就可以；
2. 版心盒子包含2号盒子logo；
3. 版心盒子包含3号盒子nav导航栏；
4. 版心盒子包含4号盒子search搜索栏；
5. 版心盒子包含5号盒子luser个人信息；
6. 注意：要求里面4个盒子都是浮动。

导航栏注意点：

实际开发中，不会直接用a，而是用li+a做。

1.  li＋a 语义更清晰，一看就是有条理的列表型内容；
2. 如果直接用a，搜索引擎容易辨别为有堆砌关键词嫌疑，从而影响网站排名。

注意：

1. 让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示；
2. 这个nav导航栏可以不给宽度，将来可以继续增加文字；
3. 因为导航栏文字不一样多，所以最好给a左右padding撑开盒子，而不是指定宽度

 HTML文件：

 <!-- 头部区域开始啦 -->
    <div class="header w">
        <!-- logo部分 -->
        <div class="logo">
            <img src="images/logo.png">
        </div>
        <!-- 导航栏部分 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href=