Cómo hacer tus propios diseños de myspace

HTML siempre me ha plagado. ¿Por qué todos los corchetes y señales numéricas? No temas a mi buen amigo. Aquí está mi tutorial para hacer sus propios diseños de myspace.

Para hacer un diseño de myspace, necesita tres cosas. (1) Un fondo (2) una tabla de contacto y (3) un banner de red y el último puede dejarse en blanco. Si elige dejarlo en blanco, solo dirá [su nombre está en su red extendida]. Nadie sabe para qué es esto; Como un apéndice, parece no tener ningún propósito, pero es divertido arreglar. Como yo y tienes colecciones de ellos en tu tracción dura. Pero dado que la mayoría de ustedes probablemente tengan vidas, debes leer el adorable www para algunos buenos. Dos de mis sitios favoritos son www.freecodesource.com y www.myspaceprodesigns.com.

Nota: Debe intentar obtener las tres cosas en algún tipo de esquema o tema de color. Mi myspace (myspace.com/hauntedhyena) es actualmente morado. Primero encontré el fondo y luego encontré una buena tabla de contacto para que coincida. Elegí dejar en blanco mi banner de red extendida, porque soy un minimalista y también era tarde y estaba cansado.

OK. Así que ahora tiene sus antecedentes, una tabla de contacto y (tal vez) un banner de red extendido. La tabla de contacto y el banner de red extendido tienen códigos muy pequeños y fáciles que van al final de su HTML. Primero tenemos que hacer la parte básica (principal) del diseño en sí y llenar todos los espacios en blanco. Aquí está el html básico:

.bbzs1 {content: “Body Properties”;}
Body {
Background-Color: 000000;
background-image: url (‘url_of_background_pic’);
Repecar de fondo: repetir;
Atacamiento de fondo: fijo;
Scrollbar-Arrow-Color: 000000;
Scrollbar-Track-Color: 000000;
Scrollbar-Shadow-Color: 9F9F9F;
Scrollbar-Face-Color: 9F9F9F;
Scrollbar-Highlight-Color: 000000;
Scrollbar-Darkshadow-Color: 000000;
Scrollbar-3Dlight-Color: 9F9F9F;
}

.bbzs2 {contenido: “Propiedades de tabla y sección”;}
table, tr, td {fondo: transparente; borde: 0px;}
tabla de tabla Tabla {Color de fondo: 000000;}
Tabla Tabla Tabla {
Border-width 😕 Px;
color de borde: ffffff;
estilo fronterizo:?
}
tabla tabla tabla tabla {border: 0px;}

.bbzs3 {contenido: “propiedades de texto y enlace”;}
Entrada {en segundo plano: ffffff! IMPORTANTE; }
td, span, div, entrada, textea, a, tabla td div div font,
Div tabla tr td font {font-familia: tahoma! importante;}
td, span, div, entrada , TextARea, tabla td div div font, div table tr td font {color: 9f9f9f! IMPORTANTE; Font-Size: 9PT! IMPORTANTE;}
.NAMETEXT {color: ffffff; Font-Family: Tahoma; Font-size: 11pt;} .WhitEtext12, .lightBlUEtext8, .orangeText15, .BlackText12 {color: 9f9f9f! IMPORTANTE;} .BlackText12 Span {Color: 000000! IMPORTANTE;} .RedText, .RedbText, .BlackText10 {Color: 9f9f9f! importante;} .bText {color: ffffff! IMPORTANTE; Font-size: 9pt! IMPORTANTE;}
A {Color: ffffff! IMPORTANTE; Font-Family: Tahoma! Importante; tamaño de fuente: 8pt! IMPORTANTE; TEXT-DECORACIÓN: ¡NINGUNA! IMPORTANTE; TEXT-TRANSFORM: ¡NINGUNO! IMPORTANTE; Font-peso: ¡Normal! Importante; estilo de fuente: normal! importante;}

La parte superior del HTML se ocupa de la imagen de fondo y sus propiedades y luego los colores de la barra de desplazamiento. Siéntase libre de dejar el código de barra de desplazamiento si solo desea una barra de desplazamiento simple y no coloreada, pero eso parece aburrido. Deberá cargar su foto de fondo, tabla de contacto y banner de red extendido a cualquiera de los numerosos sitios de alojamiento de imágenes gratuitas. Mi favorito personal es www.photobucket.com porque le permite tener su propia cuenta y realizar un seguimiento de todas sus fotos. Sin embargo, hay restricciones al tamaño de las imágenes que puede cargar. Para la carga de imagen sin cuenta rápida, puede probar un sitio como www.tinypic.com. Una vez que tenga las tres URL de sus fotos, estará listo para completar los espacios en blanco en el HTML.

READ  Video recorte con tutorial virtualDub

donde dice URL_OF_BACKGART_PIC, pegue la URL de su imagen de fondo. Asegúrese de no eliminar las medias quotas o el paréntesis de alrededor de la URL. Tenga en cuenta dónde dice “Repita”. Si desea que su imagen esté en mosaico, debe dejar eso como está. Si no, cambie eso a “sin repetición” (pero sin citas). Luego mira donde dice “arreglado”. Si desea que se solucione su imagen de fondo (esto significa que no se desplazará cuando su página se desplazará), deje eso solo. Si no, retírelo y deje en blanco, y su fondo se desplazará de forma predeterminada. Personalmente, me gusta un fondo fijo. Hace que la página real parezca que está aparte del fondo y le da un aspecto más bonito. Pero esa es solo mi opinión.

A continuación, hacemos la barra de desplazamiento. Para ver algunos códigos de color HTML, vaya a http://cedesign.net/colors.htm y haga clic en “La tabla de colores original” en la parte superior. Ese es mi sitio web favorito para elegir códigos de color. Hay toneladas de ellos, todos arreglados según Hue. Una vez que haya encontrado algunos buenos colores, reemplace el HTML en el código según sea necesario. El código para un color es un código de 6 dígitos con letras, números o ambos. Asegúrese de colocar solo el código (sin signo # como en los viejos tiempos), y asegúrese de no borrar el colon que precede al código de color, o el semi-colon que lo viene. Ambos son necesarios para que el HTML funcione. El código que he pegado arriba en negrita tiene colores predeterminados de 000000 (negro) y 9F9F9F (gris). Deberá borrar esos códigos antes de poner los suyos propios.

A continuación, nos movemos hacia abajo a las propiedades de la mesa y la sección. El color de fondo de la tabla en el código anterior ha sido establecido en negro por mí, pero no dude en cambiar eso a cualquier otro código de color, o si desea que sea transparente, simplemente escriba “transparente” (sin las citas) pero pero Nuevamente, asegúrese de deletrearlo correctamente y no borrar el colon o los semicolones. El ancho de la frontera, el color y el estilo son los siguientes. El ancho de su borde es simplemente cuán gruesas son sus bordes. Si no desea ningún bordes, como lo hacen algunas personas, entonces establezca el número en 0. Un tamaño promedio es de alrededor de 2 o 3px. El “PX” ya está allí en el código anterior, así que simplemente reemplace el signo de interrogación con cualquier número que desee. Pruébelo en su página y luego cámbielo a un número más alto o más bajo en consecuencia, según lo que desee. El color de su borde debe coincidir, de alguna manera, con su esquema de color. O no. Ve a locura. En mi página hice mis bordes morados. En el código anterior, el color del borde se establece en FFFFFF (blanco). Borra las f y haz que sea un color de tu elección. Pero de nuevo, no borre el colon o los semicolones. A continuación llegamos al estilo de la frontera. El estilo de borde es importante solo si quieres un borde. Puede escribir “sólido” o “punteado” o “discontinuo”, lo que desee mejor. Pruébelos uno por uno, reemplace el signo de interrogación y asegúrese de no borrar el colon o los semicolones. (Sé que me estoy repitiendo, pero lo que pasa con HTML es que estos pequeños pequeños puntos de puntuación aparentemente sin importancia son imprescindibles para que su código funcione).

READ  Cómo construir su propia computadora de escritorio

Nuestra siguiente sección, si sigue arriba, es texto y propiedades del enlace. He establecido la “familia de fuentes” en “Tahoma”, que es una buena fuente. Borre donde escribí Tahoma y elija su propia fuente, pero trate de elegir una popular y fácil de leer para que otros puedan ver su página fácilmente. Una buena manera de reemplazar todos mis códigos con sus propios códigos/palabras sin editar lo incorrecto es usar la función Buscar en Microsoft Word. Si simplemente copia y pega todo el HTML en un documento de Word en blanco y luego presiona CTRL F, aparecerá la función Buscar. Puede reemplazar “Tahoma” con, digamos, “Arial” y luego hacer clic en “Reemplazar todo” y borrará en todas partes que Tahoma se escriba y lo reemplazará con Arial. Es una buena característica para editar HTML cuando hay muchos reemplazos que hacer y es necesario una edición muy ordenada y sin interrupciones. Las cosas que siguen, como el tamaño de la fuente y el peso de la fuente se explican por sí mismas. El tamaño debe ser un tamaño normal legible como tengo 9 como valor predeterminado. Font-Weight es “normal”, pero si quieres puedes cambiarlo a cursiva o en negrita. Los colores son todas las diferentes palabras y enlaces en su myspace. Es posible que tenga que jugar con ellos para averiguar cuál es cuál, pero una vez que lo tiene listo, ya está. Este signo [! Importante] es simplemente un código HTML para evitar que las cosas cambien automáticamente. Déjalos a todos en su lugar. Tenga en cuenta que “Nametext” es la forma (fuente/tamaño/color) que aparece su nombre de pantalla MySpace. Es posible que desee que su nombre sea más grande que el resto de la escritura en su página. Por eso he hecho el Nametext 11 cuando el resto del texto tiene un tamaño de 9. Pero no dude en reemplazar esos números con los suyos.

Ahora llegamos a la tabla de contacto. El código para esto está a continuación.

.contactTable {width: 300px; Altura: 150px; Pading: 0px
; IMAGE DE ACTUALO: URL (URL_OF_CONTACTTABLE); Atacamiento de fondo: desplazamiento;
Posición de fondo: centro central; retroceso de fondo: sin repetición; Color de fondo: 000000;}. Tabla de contactos,
table.contactTable td {relleno: 0px; border: 0px; Color de fondo: transparente;
IMAGEN DE BUENGE: NINGUNO;}. ContactTable A img {Visibility: Hidden; borde: 0px;}. ContactTable a {Display: Block;
altura: 28px; ancho: 115px;}. Contacttable .Text {font-size: 1px;}. ContactTable .Text, .ContactTable a, .contactTable img
{filtre: none;}. ContactTable .whiteteTet12 {Visibility: Hidden;}. BBZV : después de {contenido: “generador híbrido”; }

READ  Tutoriales de computadora: cómo usar las herramientas de pintura de MS

Este código es fácil. Aunque aquí hay muchas cosas, no cambie nada excepto dónde dice URL de la tabla de contacto. Pegue la URL de donde tiene la foto de su tabla de contacto cargada. Recuerde no borrar el paréntesis.

A continuación tenemos el código de banner de red extendido, que está debajo:

Tabla de tabla TD {vertical-align: top! importante;} span.blackText12 {visibilidad: visible; Color de fondo: 000000;
background-image: url (“url_of_network_banner”); Background-Repeat: sin repetición; Posición de fondo: centro central; tamaño de fuente: 0px; espaciado de letras: -0.5px; Ancho: ?? PX; altura: ?? px; bloqueo de pantalla ; } span.blackText12 img {display: none;}

Aquí debe cambiar 2 cosas. La URL, por supuesto, (deja las citas y paréntesis solo, y solo pegue la URL de tu estandarte) y lo siguiente es importante. Debe editar los signos de interrogación al lado de donde dice ancho y altura. Para encontrar el ancho y la altura de su banner, simplemente mire las “dimensiones” en la punta de la herramienta cuando se desplaza sobre la imagen en las ventanas. Si no puede hacer esto, abra su foto en MS Paint y busque los atributos. Esto es necesario para que el espacio de red extendido pueda caber al tamaño de su imagen. Reemplace los signos de interrogación con los números correspondientes correctos. Nuevamente, no borre el colon o los semicolones.

y ya está terminado. Copie y pegue cada sección de código en su sección About Me de su myspace (recuerde borrar los códigos HTML de diseño existentes primero).

Tenga en cuenta que el diseño que le he dado aquí es muy básico. Si desea hacer cosas elegantes como códigos especiales de ciervo o códigos fronterizos, visite este sitio web que tiene excelentes códigos para lindos extras de myspace: http://www.myspace-codes.com.

Una vez que se divierte usted mismo Con lo que hace cada parte del código HTML, se da cuenta de que el 90% del código no cambia. Solo pequeños números y letras aquí y allá. Guarde un diseño “predeterminado” (sin ninguno de los códigos completados) como un documento o archivo de texto en su tracción dura, de esta manera siempre que desee cambiar su diseño la próxima vez, puede volver a él y simplemente completarlo los espacios en blanco. Hacer eso hace que todo sea mucho más fácil.

Referencia: