Share
A veces parece que hay tantos productos de CMS como desarrolladores web. En este tutorial vamos a construir un sitio simple de una página y luego, en menos de 5 minutos, configurarlo con un feed de Twitter para actualizaciones diarias y con CushyCMS para contenido general. Si no lo has visto, Cushy es un juego completamente gratuito y gratuito. extremadamente Producto fácil de usar que ha salido al mercado recientemente..
Recientemente me di cuenta de que realmente debería tener un sitio personal. No tomo trabajos de diseño, pero es bueno tener un lugar al que referirme cuando escribo biografías, etc. También hace aproximadamente un mes comencé a usar Twitter para expresar mis pensamientos diarios sobre negocios, la web y esas cosas. Esto parecía algo lógico para pegar en mi página personal. También es importante que el sitio sea fácil de administrar para que no deje que se salga de la fecha. Así que puedes decir que este fue mi breve.
Antes de llegar a la versión, pasé algunas horas en Photoshop intentando algunas ideas. Necesito algo simple, no tengo tiempo para nada más, profesional, quién sabe quién lo va a visitar y de buen aspecto. Reclamo ser un diseñador de derecho.?
De todos modos aquí está mi diseño. Utilicé una bonita ilustración vectorial de iStock: ¡siempre es bueno para hacer algo rápido que se vea increíble! Utilicé una fuente muy bonita y gratuita - Colaborate Thin. Y, finalmente, un bonito esquema de color naranja-azul que por un golpe de buena suerte resultó coincidir con mi foto naranja.!
Así que no voy a insistir demasiado en el diseño. Si hace clic en la imagen de abajo, puede obtener una versión grande del JPG en caso de que quiera seguirlo..
Mirando el diseño en Photoshop, está claro que hay un montón de imágenes que voy a necesitar. Si este fuera un diseño más complejo, usaría la herramienta Slice de Photoshop, pero es bastante simple, así que simplemente recortaré el archivo y crearé un montón de imágenes: una para la mesa, una para todos los títulos, una para el ¡Burbuja "sígueme", una para la imagen de nettuts y otra para la foto de mi frente gigante! Aquí están las imágenes que hice:
Tenga en cuenta que solo he mostrado un título, pero por supuesto que hice muchos de esos.
A continuación planeamos nuestro diseño HTML. Muy deliberadamente este sitio será extremadamente fácil de construir. Es simplemente una secuencia de bloques. Anteriormente, he escrito sobre cómo utilizar Absolute Positioning para hacer un diseño, esta vez vamos a utilizarlo de manera muy sencilla. Posicionamiento relativo.
Como recordará, cuando coloca elementos en una página, tienen un lugar natural al que van, en relación con los elementos anteriores. Debido a que no estamos usando columnas o realmente nada sofisticado en este diseño, será perfecto para usar este posicionamiento regular.
Como regla general, siempre que desee simplificar su vida en HTML, es mejor hacer las cosas en bloques dispuestos horizontalmente. Esta es la forma más fácil de trabajar con CSS y no requiere demasiados problemas para la compatibilidad del navegador. Tan pronto como empiezas a colocar diseños en columnas, las cosas se ponen un poco más complicadas. Así que lo guardaremos para otro tutorial, en otro proyecto..
Así que de todos modos el diseño que usaremos es algo como esto:
Título principal Sección Encabezado Div Bloque de contenido Sección Encabezado Div Bloque de contenido Título Encabezado Div Bloque de contenido ... y así sucesivamente ...
Lo mejor de este plan es que más adelante si repentinamente decimos "hey, desearía tener un bloque adicional para mis imágenes favoritas", ¡no hay problema! Solo deslízalo, usa las mismas clases de CSS y todo. Este es realmente el diseño más simple que existe, y con un diseño agradable puede tener un aspecto realmente genial.!
OK Cree un archivo index.html y luego esta es mi primera aproximación al HTML, no es perfecto y falta el bit de Twitter, pero es un buen punto de partida y podemos hacer algunos ajustes más adelante a medida que avanzamos:
Collis Ta'eed - Un poco sobre mi Hola soy Collis, empresario, blogger y diseñador..
En abril, Eden lanzó un sitio asociado a PSDTUTS en el que he estado trabajando. El sitio alberga tutoriales de desarrollo y diseño web..
Algunos enlaces a sitios en los que tengo una mano:
- FlashDen - Nuestro proyecto principal de Eden
- Cómo ser un freelancer de Rockstar - Un libro que escribí con mi encantadora esposa
- FreelanceSwitch - El blog altamente exitoso en freelancing
- PSDTUTS - El mejor blog de photoshop alrededor!
- Blog Action Day - Un evento anual sin fines de lucro.
Soy el primero en admitir que no soy muy bueno para responder a todos mis correos electrónicos, pero hago lo mejor que puedo y si lo necesitas, puedes enviarme un correo electrónico..
Cosas a tener en cuenta:
Ahora agregaremos un poco de CSS para hacer que la página se vea un poco más como donde terminará. Cree su archivo 'style.css' y coloque estas dos definiciones en:
cuerpo color de fondo: # 191e25; margen: 0; relleno: 0; color: # 5f6874; Familia tipográfica: "Lucida Grande", "Lucida Sans Unicode", Arial, Sans-serif; tamaño de fuente: 13px; línea de altura: 21px; #container width: 900px; relleno: 50px; acolchado superior: 30px; imagen de fondo: url (images / Computer.jpg); repetición de fondo: no repetición; posición de fondo: arriba a la derecha;
Un par de cosas a tener en cuenta:
Y así es como se ve nuestra página ahora:
Ahora añadimos el contenido de Twitter. Esta es una excelente manera de hacer que la página se sienta realmente dinámica porque actualizo mi feed de Twitter casi todos los días. También será una forma de hacer que la gente me agregue a sus redes de Twitter, y luego, en el futuro, cuando lance nuevos sitios, puedo dirigir el tráfico a nuevos lugares. Así que, en realidad, todo es parte de mi plan no particularmente intrépido..
Así que Twitter nos ha facilitado la tarea de capturar su feed, solo haga lo siguiente:
Aquí está el proceso en imágenes.!
Y aquí está el código que Twitter nos da:
Nota he borrado el
Entonces, al observar el HTML que nos han proporcionado, podemos adivinar que es probable que el Javascript se complete con eso.
Ahora, en este punto, también agregaré un poco de Javascript para conectar mi sitio con Google Analytics. Creo que la mayoría de los desarrolladores web han oído hablar de Analytics, pero si por casualidad has estado viviendo debajo de una roca, realmente recomiendo probarlo. Es gratis y es una forma poderosa de monitorear su tráfico. Cuando has conseguido una cuenta, eres simple. Crear un nuevo perfil de sitio web, ingrese un nombre de dominio y obtendrá a cambio algo de código Javascript para pegar en sus documentos HTML. Pan comido!
A continuación, agregaremos un par de estilos más que nos acercarán aún más a nuestro producto final. Son:
a img border: 0 a color: # cc5630; texto-decoración: ninguno; a: hover color: #ffffff; .content_box width: 590px; margen superior: 15px; margen inferior: 30px;
Aquí estamos eliminando los bordes de las imágenes vinculadas (es decir, el enlace a NETTUTS y la foto mía que se vinculará a una versión más grande), también estamos configurando el color de nuestros enlaces en la página en general. Finalmente, con el estilo content_box, establecemos un ancho para nuestros blobs de contenido y utilizando los márgenes superior e inferior los separamos en la página. Así es como se ve nuestra página ahora:
Lo siguiente que hay que hacer es lograr que se ajuste el texto alrededor de nuestras dos imágenes. Lo primero que debe hacer es agregar una clase a las imágenes que queremos envolver (la foto y la imagen de nettuts). No pensé hacer esto antes, pero puedo ver que necesito hacerlo ahora. Así que cambiamos las imágenes para tener:
Luego agregamos un estilo rápido para hacer que el flotador a la izquierda tenga un poco de margen, como este:
img.photo flotar: izquierda; margen derecho: 20px;
Desafortunadamente, a pesar de que es agradable y simple, esta solución no alcanza el nivel debido a que mi bloque de texto es demasiado largo, así que se está cerrando ... ¡booo! No importa, se arregla fácilmente. Pondremos ese texto en su propio bloque y lo haremos flotar también.
Así que ajustaremos esta content_box para que el código HTML sea ahora:
Después de trabajar como diseñador web, tanto empleados como independientes, cofundé una empresa emergente con algunos amigos en 2006. Desde entonces, nuestra compañía, Eden, ha crecido y he tenido la suerte de trabajar en muchos proyectos muy interesantes e interesantes. todo, desde FlashDen hasta Blog Action Day.
Gracias a la brillante naturaleza de la web, actualmente vivo y trabajo fuera de Hong Kong y viajando por el mundo. Puedes encontrarme en línea en Twitter donde publico pensamientos al azar o puedes enviarme un correo electrónico desde el formulario que se encuentra al final de esta página. Gracias por pasar!
Como pueden ver, he envuelto el texto en un
y luego agregó una en el fondo. Este extra.about_text float: left; ancho: 380px; .clear borrar: ambos;
Tenemos que darle a nuestro bloque about_text un ancho para que flote junto a la foto. Ahora eso soluciona nuestro problema muy bien. Sin embargo, si miras la imagen que se muestra a continuación, parece que hay un espacio extraño que aparece entre la parte superior de nuestro bloque de texto y la imagen..
Las lagunas extrañas son las peor Enfrentarse, porque puede ser muy difícil averiguar qué los está causando. En nuestro caso aquí, sin embargo, recuerdo que la
La etiqueta tiene un margen superior predeterminado que, si nos deshacemos de, probablemente resolverá nuestro problema. Aquí está el código para solucionar esto:
p margen: 0px; margen inferior: 20px;
Así que ahora, cada párrafo no tendrá margen, excepto 20px debajo de él (separando el siguiente elemento del párrafo).
Como mencioné anteriormente, vamos a utilizar un poco de CSS para reemplazar nuestro
Así que todo lo que vamos a hacer es usar el etiqueta que tan hábilmente colocamos antes para establecer la visualización del texto en ninguno, haciéndolo oculto. Entonces le daremos la una altura para que la imagen de fondo no se corte, y finalmente configuraremos la imagen para que aparezca. Aquí está el código CSS que necesitamos para que esto suceda:
h1 background-image: url (images / title_main.jpg); repetición de fondo: no repetición; altura: 60px; margen inferior: 50px; h1 span display: none;
A continuación vamos a estilo de nuestro cuadro de twitter. Pero antes de hacerlo, me di cuenta de que había olvidado totalmente colocar mi imagen de "Sígueme en Twitter" en la página (¡tonto Collis!) No importa, lo agregaré ahora, aquí está el código HTML resultante para el área que están trabajando en:
Observe que la imagen aparece. dentro El twitter_div. Vamos a utilizar uno de los grandes beneficios del estilo CSS para posicionarlo de manera que quede fuera de la caja. Ahora bien, si estos eran los viejos tiempos y yo estaba haciendo este diseño con un
Accentsconagua
