个人站设计和开发

最新推荐文章于 2022-08-12 23:51:48 发布

Irene1991

最新推荐文章于 2022-08-12 23:51:48 发布

阅读量394

点赞数

分类专栏：程序人生文章标签：个人站首页设计

原创文章如需转载请注明地址。

本文链接：https://blog.csdn.net/Irene1991/article/details/103973097

版权

程序人生专栏收录该内容

12 篇文章 0 订阅

订阅专栏

建站流程

1、买域名；

2、买服务器；

3、域名备案，服务器备案；

4、网站备案（全国互联网安全管理服务平台：http://www.beian.gov.cn/portal/index.do ）；

备注：

域名和服务器要属于同一个人，最好在一个服务商那里买。

域名和服务器备案，可以使用阿里云或腾讯云的备案服务，在哪买的在哪备案。

网站提交备案审核，打开网址要有内容，空白页不能通过审核。

关于设计

1、自己设计。就算能熟练操作 ps ,设计思路也是一大难题。

2、找设计的同事或朋友帮忙设计，你帮他写网页，他给你做设计，强强联合。万一人家拒绝，还是只能自己上。

3、使用样式框架，我选的是 bootstrap。

首页设计

使用FSCapture截的长图，可惜操作不熟练，没把网页地址栏一起截进来，有地址栏感觉会更好看一些。

设计解读

1、少即是多。精简掉个人技能和经验介绍，其他文字也尽量少。

2、醒目的 Hello World 引起共鸣，营造熟悉感和归属感，做什么工作，不言而喻。

3、自制关键字碎花背景图，原创，加深访客印象。

4、半身像采用正装正脸照片，呼应网站目的，一切都是为了更好的工作。

6、抛弃传统的贴合业务含义的导航图片或图标，使用独特的剪纸动物头像，纯属个人爱好。

5、选用大片黑色背景配合图片背景色，赶了波暗黑色系 UI 的潮流。看文章说暗色系在手机上更省电，对色弱者更友好。

关于开发

有个发现很有意思，背景图能透过 margin 显示出来,透不过 padding。

首页源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>木木的小木屋</title>
    <meta name="keywords" content="木木，小木屋，小屋，木木的小木屋">
    <meta name="description" content="个人博客">
    <link rel="stylesheet" href="plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link href="css/common.css" rel="stylesheet">
    <script src="js/vue.js"></script>
    <!--vue兼容文件 polyfill-->
    <script src="js/polyfill.min.js"></script>
    <script src="js/vueComponents.js"></script>

    <style>
        body{
            background: #fff;
        }
        div.header{
            width:100%;
            text-align: center;
            background:url('img/bg.png') no-repeat;
            background-size: 100% auto;
            overflow: hidden;
        }
        div.header img{
            width:200px;
            height: 200px;
            margin-top: 120px;
            margin-bottom: 120px;
            overflow: hidden;
            border:1px solid rgba(94,94,94,0.1);
        }
        div.main{
            background: #000;
            color: #fff;
            margin-top: 20px;
            padding:40px 20px;
        }
        div.thumbnail{
            width:250px;
            margin-right:20px;
            margin-left:20px;
        }
    </style>
</head>
<body>
<div id="root">
    <div class="header">
        <img class="img-circle" src="img/my_200.jpg" alt="图片"/>
        <div class="jumbotron">
            <h1>Hello, world!</h1>
            <p>穆金秋</p>
            <p>web前端开发</p>
        </div>
    </div>

    <vue-customer></vue-customer>

    <div class="main flex-box">
        <div class="thumbnail">
            <img src="img/xiongmao_242.jpg" alt="图片">
            <div class="caption">
                <h3>博客</h3>
                <p>专业技术博客分享</p>
                <p><a href="blog.html" class="btn btn-default" role="button">查看更多</a></p>
            </div>
        </div>

        <div class="thumbnail">
            <img src="img/shizi_242.jpg" alt="图片">
            <div class="caption">
                <h3>微信公众号</h3>
                <p>微信搜索 -> 发现惊奇</p>
                <p><a href="weixin.html" class="btn btn-default" role="button">了解详情</a></p>
            </div>
        </div>

        <div class="thumbnail">
            <img src="img/hu_242.jpg" alt="图片">
            <div class="caption">
                <h3>我的社区</h3>
                <p>社区生活分享</p>
                <p><a href="404.html" class="btn btn-default" role="button">去看看</a></p>
            </div>
        </div>
    </div>

    <vue-footer></vue-footer>
</div>

<script src="js/jquery-3.1.1.min.js"></script>

<script>
    new Vue({
        el: "#root",
        data: {

        },
        methods: {

        }
    })
</script>
</body>
</html>

设计背后的故事-关于灵感

最初就没有设计，就是文字大纲，脑子里想想。开始画页面是在墨刀，凭我一个前端开发的局限，设计稿中规中矩，十分的传统老套，而且仅是内容排版，还没有UI。我对人人都是产品经理的作者苏杰老师的个人站印象很深刻，主要颜色就是黑白灰，像本打开的书籍。所以我打算借鉴那种风格。

中间打开过ps，后来想想还是算了，先不说操作不熟练，审美啊什么的也比不上正经设计师。

自己不做设计了，就去网上看看别人的设计，想着参考下。

搜索过程中看到一个设计师的个人站，哇塞，一个搞设计的都自己建站了，我现在才有这想法，真是英雄所见略同。由此我想到可以找搞设计的朋友合作，本来都谈好了，又突然没下文了。

搜索中还看到一个好看好玩的404页面，下载了源码，哈哈，这就是首页文字碎花背景图的来源，看着满屏的404，突然想到把4和0改成了我想要的关键字，运行代码后截图来的，机智如我。

特别的背景图+半身像，是很多个人站的设计风格。半身像还专门选了一张穿正装的正脸照片，也是很配了。

借鉴了少即是多的理念，首页文字尽量精简。最开始找工作的时候，还会在简历里写自己会什么什么语言，做了什么什么项目，现在嘛，不想说了，至少不会在网站上放这些。

文字少了，那一定是要有图的。精简了我的业务设计，我至少需要三张图来做导航。

选什么图呢，是用图片还是图标？还是用不相关的图，只为好看和特别？

被选中的这3张图，是我先前浏览朋友圈的时候看到的，当时就很喜欢，下载保存在手机，有7、8张吧。使用美图秀秀裁剪到合适的大小，我做了6张，有3张备用。

因为图片背景是黑色的，我也不想去抠图，白色的剪纸，跟黑色的背景很搭，换个颜色也不好看。又联想到之前看的一篇文章，讲UI设计为啥开始流行暗黑色系。没看这篇文章之前，像MacOs更新，有黑色主题的时候，我同事都好激动，我一点也不，因为我喜欢白色。看了这篇文章，才知道，暗色系在手机上更省电，而且对色弱的人很友好。既然如此，那我也赶个潮流吧，哈哈。

设计还是短板，所以选用了 bootstrap 样式框架。

Irene1991

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
个人站设计和开发

建站流程1、买域名；2、买服务器；3、域名备案，服务器备案；4、网站备案（全国互联网安全管理服务平台：http://www.beian.gov.cn/portal/index.do）；备注：域名和服务器要属于同一个人，最好在一个服务商那里买。域名和服务器备案，可以使用阿里云或腾讯云的备案服务，在哪买的在哪备案。网站提交备案审核，打开网址要有内容，空白页不能...
复制链接

扫一扫