Proceso de construcción del sitio
1. Compre un nombre de dominio;
2. Compre un servidor;
3. Archivo de nombre de dominio y archivo de servidor;
4. Archivo de sitios web (Plataforma Nacional de Servicios de Gestión de Seguridad de Internet: http://www.beian.gov.cn/portal/index.do );
Observaciones:
El nombre de dominio y el servidor deben pertenecer a la misma persona, y es mejor comprarlos a un proveedor de servicios.
Para el archivo de nombre de dominio y servidor, puede utilizar el servicio de archivo de Alibaba Cloud o Tencent Cloud y archivarlo donde lo compró.
Envíe el sitio web para revisión de registros. Abrir la URL debe tener contenido y las páginas en blanco no pueden pasar la revisión.
Sobre el diseño
1. Diseñe usted mismo. Incluso si puede operar ps con soltura, las ideas de diseño siguen siendo un gran problema.
2. Pídale a un colega o amigo de diseño que le ayude a diseñar, usted lo ayudará a escribir una página web, él hará el diseño por usted y trabajarán juntos. Si se niegan, solo pueden ir por su cuenta.
3. Utilizando el marco de estilo, elegí bootstrap.
Diseño de página de inicio
Use FSCapture para cortar la imagen larga, pero desafortunadamente la operación no es competente. No corté la barra de direcciones de la página web al mismo tiempo. Sería mejor tener la barra de direcciones.
Interpretación del diseño
1. Menos es más. Optimice la introducción de habilidades y experiencias personales y minimice otros textos.
2. El llamativo Hello World resuena y crea una sensación de familiaridad y pertenencia. Lo que haces es evidente.
3. Imagen de fondo floral de palabra clave hecha a sí mismo, original, profundizar la impresión de los visitantes.
4. El busto adopta fotos formales y frontales para hacer eco del propósito del sitio web, todo es para un mejor trabajo.
6. Abandone las imágenes o iconos de navegación tradicionales que se ajusten al significado comercial y utilice cabezas de animales recortadas en papel únicas, que es un pasatiempo puramente personal.
5. Utilice un fondo negro grande para que coincida con el color de fondo de la imagen para ponerse al día con la tendencia de la IU negra oscura. Lea el artículo que dice que los colores oscuros son más eficientes energéticamente en los teléfonos móviles y son más amigables con las personas con colores débiles.
Sobre el desarrollo
Un hallazgo es muy interesante, la imagen de fondo se puede mostrar a través del margen, pero no a través del relleno.
Código fuente de inicio
<!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>La historia detrás de la inspiración del diseño
Al principio, no había diseño, solo un esquema de texto, solo piénselo. Comencé a dibujar la página en Ink Knife. Basado en las limitaciones de mi desarrollo de front-end, el borrador del diseño estaba bastante bien formado, muy tradicional y anticuado, y solo el diseño del contenido, sin interfaz de usuario. Estoy muy impresionado con la posición personal de la autora Su Jie, que es gerente de producto. El color principal es el negro, el blanco y el gris, como un libro abierto. Así que planeo aprender de ese estilo.
Abrí el ps en el medio, y luego lo pienso y lo olvido, y mucho menos la operación no calificada, la estética no es tan buena como la del diseñador serio.
Si no diseña usted mismo, simplemente acceda a Internet para ver los diseños de otras personas y piénselo como referencia.
Durante el proceso de búsqueda, vi el sitio web personal de un diseñador. Vaya, un diseñador ha creado su propio sitio web. Ahora solo tengo esta idea. Es realmente lo mismo. A partir de esto, pensé que podría encontrar un amigo de diseño para cooperar, ya había negociado, pero de repente no hubo más información.
También vi una página 404 agradable y divertida en la búsqueda. Descargué el código fuente. Jaja, esta es la fuente de la imagen de fondo del texto en la página de inicio. Al mirar la pantalla completa de 404, de repente pensé en cambiar 4 y 0 a la tecla que quiero.Palabras, capturas de pantalla tomadas después de ejecutar el código, tan ingenioso como yo.
La imagen de fondo especial + busto es el estilo de diseño de muchas estaciones personales. El busto también seleccionó especialmente una foto de la cara frontal vistiendo un traje formal, que también es muy adecuado.
Partiendo de la idea de que menos es más, el texto de la página de inicio es lo más conciso posible. Cuando buscaba trabajo por primera vez, escribía en mi currículum el idioma que hablaba y los proyectos que hacía. Ahora no quiero decirlo, al menos no lo pondré en el sitio web.
Si hay menos texto, debe haber imágenes. Simplificado el diseño de mi negocio, necesito al menos tres imágenes para la navegación.
¿Qué imagen debo elegir, es una imagen o un icono? ¿O usar imágenes irrelevantes, solo para verse bien y ser especial?
Las 3 imágenes seleccionadas se vieron cuando busqué Momentos antes. Me gustaron mucho en ese momento. Descárguelas y guárdelas en mi teléfono. Hay 7 u 8 imágenes. Usé Meitu Xiuxiu para cortarlo a la medida adecuada, hice 6 de ellos y 3 de ellos sobraron.
Como el fondo de la imagen es negro, no quiero recortar la imagen. El papel blanco se corta muy bien con el fondo negro. Cambiar el color no se ve bien. Pienso en un artículo que leí antes, sobre por qué el diseño de la interfaz de usuario se ha vuelto popular en negro oscuro. Antes de leer este artículo, como la actualización de MacOs, cuando hay un tema negro, mis compañeros están muy emocionados, yo no lo estoy en absoluto porque me gusta el blanco. Después de leer este artículo, me di cuenta de que los colores oscuros son más eficientes en términos de energía en los teléfonos móviles y son amigables para las personas con colores débiles. En ese caso, déjame captar la tendencia también, jaja.
El diseño aún es corto, así que elegí el marco de estilo bootstrap.