HTML&CSS基础-ps的基本操作

　　　　　　　　　　　　　HTML&CSS基础-ps的基本操作

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

　　我们工作中可能会经常需要将一个图片做成一个网页，而图片中的字体大小，行间距，图中logo大小的策略工作基本都是由美工来搞定，但如果没有美工的话就得咱们自己来搞了。我们可以使用QQ的截图工具来测量，但毕竟不太专业，因此推荐使用PS工具配置，关于PS安装过于简单我这里就不演示了，但是安装好PS之后需要对进行一些初始化配置来更加适合网页开发的需求。

一.将PS默认的单位改成像素(px是网页中经常使用的长度单位，而PS默认的单位是cm)

1>.点击"编辑" ---> "首选项" ---> "界面" ---> "单位与标尺"，会弹出如下图所示的对话框，注意默认单位是"cm",并不合适网页开发。

2>.修改默认单位

二.PS基本操作

1>.点击"窗口" ---> "工作区" ---> "复位基本功能"，然后就图片拉入到PS工作区中，如下图所示

2>.按住"ctrl + 1"可以立即还原图片原样显示，"ctrl + 0"适应屏幕大小，按住"ctrl + r"会可以"显示/隐藏"标尺，按住"alt"键可以放大图片，如下图所示

3>.自定义矩形的大小(按F8会显示详细信息)获取像素宽度和高度信息

　　如下图所示有矩形，单击该举行后会有四个类型，默认使用第一个类型:　
　　　　第一个矩形是只能选择一个矩形区域;
　　　　第二个矩形的特点是可以选择多个区域，且每个区域的叠加部分就是选中的区域;
　　　　第三个矩形的特点是当多个矩形相交时，会把相交的区域删除掉;
　　　　第四个矩形就更加彻底了，它只会取多个矩形的交集部分,即相交的部分就就不好啦;

　　如下图所示，可以在标尺区域拉出来多跟线辅助咱们构图，按住"ctrl + h"可以"显示/隐藏"这些线

4>.使用取色器

5>.选中图片后，点击"图像" ---> "裁剪"后会将内容截取出来，点击"文件" ---> "存储威威Web 所用格式"(根据图片使用原则选择存储格式)

图片的格式:
　　JPEG(JPG):
　　　　JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
　　　　一般使用JPEG来保存照片等颜色丰富的图片。
　　GIF:
　　　　GIF支持的颜色少，只支持简单的透明，支持动态图。
　　　　图片颜色单一或者动态图可以使用gif
　　PNG:
　　　　PNG支持的颜色多，并且支持复杂的透明
　　　　可以用来显示颜色复杂的透明的图片。

图片的使用原则：
　　效果不一致，使用效果好的
　　效果一致，使用小的

HTML对于图片的处理方式可参考:https://www.cnblogs.com/yinzhengjie/p/8542361.html

三.编写开班信息网页图片

1>.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>开班计划</title>
        <style type="text/css">
            /*清除默认样式*/
            *{
                margin: 0;
                padding: 0;
            }
            
            /*统一页面中的字体*/
            body{
                font: 12px/1 "微软雅黑"  ;
            }
            
            /*设置outer的大小*/
            .outer{
                width: 300px;
                /*设置outer居中效果*/
                margin: 50px auto;
            }
            
            /*
             * 设置title的边框
             */
            .title{
                /*设置上边框*/
            /*    border-top:2px #019e8b solid ;*/
                /*设置盒子的高度*/
                height: 36px;
                /*设置背景样式*/
                background-color: #f5f5f5;
                /*设置title的行高*/
                line-height: 36px;
                /*设置title的内边距*/
                padding: 0px 22px 0px 16px;
            }
            
            /*
                 设置title中的超链接
             * */
            .title a{
                float: right;
                /*设置字体颜色*/
                color: red;
            }
            
            /*设置h3*/
            .title h3{
                font: 16px/36px "微软雅黑";
            }
            
            /*设置内容*/
            .content{
                border: 1px solid #deddd9;
                /*设置内边距*/
                padding: 0px 28px 0px 20px;
            }
            
            /*设置内容中的超链接*/
            .content a{
                color: black;
                /*去除超链接的下划线*/
                text-decoration: none;
                /*设置字体大小*/
                font-size: 12px;
            }
            
            /*为超链接添加一个hover伪类*/
            .content a:hover{
                color: red;
                /*为超链接添加下划线*/
                text-decoration: underline;
            }
            
            /*设置内容中的标题*/
            .content h3{
                margin-top: 14px;
                margin-bottom: 16px;
            }
            
            /*
             * 设置右侧的a的样式
             */
            .content .right{
                /*设置向右浮动*/
                float: right;
            }
            
            /*设置ul的样式*/
            .content ul{
                /*去除项目符号*/
                list-style: none;
                /*为ul设置一个下边框*/
                border-bottom: 1px dashed #deddd9;
            }
            
            /*取消最后一个ul的边框*/
            .content .no-border{
                border: none;
            }
            
            /*设置内容中的红色字体*/
            .content .red{
                color: red;
                font-weight: bold;
            }
            
            /*设置内容中的li*/
            .content li{
                margin-bottom: 15px;
            }
            
            
        </style>
    </head>
    <body>
        
        <!--创建一个外层div，容纳整个内容-->
        <div class="outer">
            
            <!-- 开班信息的头部 -->
            <div class="title">
                <a href="#">2020年面授开班计划</a>
                <h3>近期开班</h3>
            </div>
            
            <!-- 开班信息的主要内容 -->
            <div class="content">
                <h3><a href="#">Linux云计算+devops</a></h3>
                <ul>
                    <li>
                        <a class="right" href="#"><span class="red">预约报名</span></a>
                        <a href="#">开班时间：<span class="red">2019-12-25</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span class="red">无座，名额爆满</span></a>
                        <a href="#">开班时间：<span class="red">2018-07-15</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间：<span>2018-03-15</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间：<span>2017-08-25</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间：<span>2016-12-26</span></a>
                    </li>
                </ul>
                
                <h3><a href="#">Python+人工智能</a></h3>
                <ul>
                    <li>
                        <a class="right" href="#"><span class="red">预约报名</span></a>
                        <a href="#">开班时间：<span class="red">2019-08-10</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间：<span>2018-12-17</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间：<span>2018-03-20</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间：<span>2017-10-21</span></a>
                    </li>
                </ul>
                <h3><a href="#">Golang+容器开发</a></h3>
                <ul class="no-border">
                    <li>
                        <a class="right" href="#"><span class="red">预约报名</span></a>
                        <a href="#">开班时间：<span class="red">2019-05-10</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间：<span>2018-03-16</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

2>.浏览器打开以上代码渲染结果

posted @ 2018-01-21 21:19 尹正杰阅读(611) 评论(0) 编辑收藏举报

刷新页面返回顶部

尹正杰

HTML&CSS基础-ps的基本操作

公告