Cómo crear su propio sitio web: 16 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:44

Una guía completamente cubierta para pasar del papel a la web, gratis si lo desea, especialmente si algún webmaster amigable le debe algunos favores, pero incluso con poca experiencia y conocimiento, puede crear un sitio y publicarlo en la web así: …

Paso 1: Herramientas, materiales y habilidades básicas

Para crear su sitio necesitará: Herramientas - Una computadora, preferiblemente menor de cinco años - Una copia de Dreamweaver (opcional) pero es lo que sé y se lo mostraré - Una copia de Photoshop, no esencial pero definitivamente una imprescindible para cualquiera que quiera un sitio atractivo - Una conexión a Internet en su computadora, preferiblemente una rápida (porque hace que las cosas sean más rápidas) Materiales - Una idea - Algo de espacio en disco, dependiendo de para qué sea su sitio - Tiempo, sí es un material valioso en eso: una dirección de correo electrónico que funcione, si la necesita, están libres de Gmail y hotmail Habilidades básicas: un conocimiento básico de cómo usar su computadora, Internet: este es un intructable sin código, es para personas que quieren hacer un sitio pero no tienen idea de cómo - Algunas habilidades de diseño serían útiles - Sería bueno saber cómo usar Photoshop, paint. NET o GIMP

Paso 2: comencemos

Una vez que sepa qué tipo de sitio desea, tome su decisión de diseño.

Piense en los refrigeradores básicos del sitio, el estilo del mismo y cómo desea que la gente lo navegue. Si lo está haciendo para una empresa o club, probablemente sea mejor que el sitio refleje los refrigeradores de la empresa / club y tenga características que imiten o se basen en cosas de la empresa, como botones de menú que recuerdan algo que venden si se trata de una empresa. La navegación de su sitio puede ser varias cosas, generalmente los tres tipos principales de uso son los menús de la barra lateral izquierda y derecha y los menús de la barra superior (se encuentran debajo del encabezado como el de este sitio). Si está creando el sitio para usted, elija colores y características de diseño. te gusta y ve desde allí Palabra de advertencia. no utilices colores realmente conflictivos y las chicas intentan no optar por el rosa fluorescente (no ser sexista, eso sucede mucho) Incluso podrías estar dirigiendo un negocio a través de tu sitio si lo deseas, tengo poca experiencia en hacer esto, pero podría ser más fácil usando algo como las tiendas yahoo que usa este sitio.

Paso 3: iniciar el sitio

Justo aquí es donde comenzamos, ingrese a Mis documentos y cree una carpeta llamada 'Mi sitio web o use el nombre del sitio, dentro de esa carpeta haga una carpeta llamada' imágenes ', una llamada' páginas 'y otra llamada' archivos ' (el que se llama archivo es para todos los demás archivos que podría estar utilizando en el proceso de creación de su sitio). Ahora encienda Dreamweaver y, a lo largo del archivo, verá un elemento de menú llamado sitio, así que haga clic en él y elija un nuevo sitio. use la pestaña avanzada (porque es más fácil de recorrer), ahora coloque el nombre de su sitio web en el cuadro para el nombre del sitio. Verá un cuadro con la etiqueta 'carpeta raíz local', esta es la carpeta que creó con el nombre de su sitio. El siguiente cuadro tiene la etiqueta 'Carpeta de imágenes predeterminada', elija la carpeta con el nombre de imágenes en su carpeta raíz. Deje las dos casillas de verificación solas, ambas son como deberían ser.

Paso 4: Vamos a atascarnos entonces

Una vez que haya tomado todas sus decisiones principales en el sitio, es hora de hacer una plantilla para todas sus páginas, esto es exactamente lo que parece, una plantilla para crear páginas, un sitio web debe verse completamente similar para evitar tanto la confusión como espectadores y ahorra mucho tiempo y esfuerzo perdido.

En su plantilla, deberá hacer un encabezado, este es el banner principal que se encuentra en la parte superior de la página, generalmente tiene el título del sitio / nombre de la empresa, un eslogan y una imagen o logotipo que refleja el tema del sitio.. Las mejores medidas que puedo dar son 760 x 100-200, la altura es de preferencia y también depende de dónde irá la barra de menú. El ancho es 760, por lo que cabe en las ventanas del navegador incluso cuando se ejecuta una resolución de 800x600 en las pantallas (no sirve de nada si no puede ver la mitad del sitio) Su botón de menú (si elige hacerlos no debe ser demasiado alto, lo recomiendo 30 píxeles de alto y el ancho depende de muchas cosas, pero los míos suelen tener entre 100 y 1500 píxeles. Por otra parte, es posible que esté usando botones de flash que no requieren ningún esfuerzo de su parte. (Para Dreamweaver, eso es)

Paso 5: Hacer la plantilla…

Así que ahora elegimos los colores de nuestro sitio y todo eso haciendo clic derecho en nuestra página en blanco y yendo a las propiedades de la página. Para la mía el fondo va a ser negro, el texto blanco y ahora pondré el título como plantilla. Notarás en la imagen que todos los colores de mis enlaces están configurados en azul, sugiero usar azul también porque el azul es el color de enlace tradicional y el uso de un color de enlace extraño ocupaba un lugar destacado en la lista de cosas que molestan a las personas sobre los sitios web y lo que los hace no profesional.

Paso 6: Continuación de la creación de la plantilla. el diseño

Ahora comenzamos nuestro diseño de la plantilla.

Haga clic en el botón Insertar tabla o en el botón Dibujar tabla. Ahora simplemente arrastre para hacer una tabla, elegir 3x3 es un lugar útil para comenzar. Lo primero que debe hacer es crear una tabla de 800 píxeles de ancho, puede ver el ancho en la barra de propiedades en la parte inferior, ahora resalte la fila superior de celdas y haga clic derecho, vaya a la tabla en el menú del botón derecho y elija combinar celdas, haga que la celda recién formada tenga la altura de la imagen del encabezado. En esta pinta, vaya a las propiedades de su tabla y coloque el valor de cero para los valores de 'cellpad' y 'border'. Esto significa que la tabla no existe para el usuario final, pero mantiene todo en su lugar. Ahora lo pegamos en la imagen del encabezado que debe guardarse en la carpeta de imágenes del sitio, pero si no es, Dreamweaver le preguntará si desea copiar el archivo allí. Para insertar un aspecto de imagen a lo largo de la barra de botones (la pestaña sobre ellos debe estar en común) busque el botón con una imagen de un árbol en un cuadro (la mayoría de los programas usan un símbolo similar) haga clic en él y aparecerá un cuadro de diálogo, simplemente busque su archivo y haga doble clic en él. Si su imagen apareció en el lugar incorrecto, el cursor estaba en la celda incorrecta. Ahora que se está acostumbrando a la tabla, divida una celda a lo largo del lado donde desea su barra de menú, recuerde que las filas están al otro lado de las columnas. Haga que el cuadro de su tabla de botones de menú sea tan ancho como crea que se ve bien, luego haga que sus botones tengan el ancho correcto (ignore esto si desea botones flash) Ahora haga una tabla dentro de su celda con 1 fila y tantas columnas como haya botones (debe saber esto por el plan de su sitio, no puedo ayudarlo en absoluto, es su elección) o para un menú horizontal 1 columna y tantas filas como botones.

Paso 7: Agregar los botones de menú

Hay algunas formas de hacer esto. Si desea botones de imagen simples (una imagen en la que se puede hacer clic que parece un botón), inserte la imagen como de costumbre y por ahora eso es todo. luego les agregaremos enlaces.

Si desea botones de rollover (la imagen cambia cuando el cursor está sobre la imagen del botón, entonces debe crear imágenes para cada botón, digamos que tiene algunos botones grises oscuros agradables que desea iluminar cuando el usuario coloca el mouse sobre ellos luego crea un segundo conjunto de botones que se iluminan. Luego, vaya al botón Agregar imagen de sustitución en la barra de herramientas (al lado o cerca del botón de imagen) y elija el oscuro para la imagen uno y el claro para la imagen 2, De nuevo, deje el enlace por ahora porque todavía no ha creado una sola página. Si desea botones flash, debe hacer clic en la pestaña de medios en la parte superior de la barra de herramientas del botón y hacer clic en el símbolo del botón Insertar flash (logotipo flash con barra pequeña en la esquina inferior.), Le pedirá que guarde el documento antes de continuar, así que guárdelo como 'plantilla base' o algo que sepa que significa la plantilla principal para su sitio.

Paso 8: Creación de la plantilla para su uso

Bien, casi terminamos con nuestra plantilla y podemos comenzar a usar nuestras páginas muy pronto, ahora necesita regiones editables (lugares para el contenido de la página). Los agregamos haciendo clic con el botón derecho y yendo al menú desplegable de la plantilla en el clic derecho., elija una nueva región editable y aparecerá un mensaje diciendo que el documento se convertirá en una plantilla. Esto es bueno. Haga esto con el cursor en las celdas de la tabla donde irá el contenido (las que están debajo y al lado de la barra de menú en la mía)

Ahora guarde el documento, ciérrelo y vaya al nuevo archivo y haga clic en las pestañas de plantillas en la parte superior, su plantilla debería estar allí, asegúrese de que la página de actualización cuando la plantilla cambie esté marcada (ahorra mucho trabajo más adelante).

Paso 9: agregue algo de contenido

Haga que sus páginas agreguen su contenido y recuerde guardarlas en las carpetas que creó para las páginas y coloque sus imágenes en la carpeta de imágenes que creó también. Note el contenido falso que usé, se llama Lorem Ispsum y es una historia sobre el bien y el mal en latín, los diseñadores web y gráficos usan esto para dar una idea de cómo se verá el producto con texto real. se puede encontrar en Lipsum.com. Esas cajas azules son las regiones editables. Espero que las tengas también.

Paso 10: Ahora hacemos nuestros enlaces

Abra la plantilla que usó (recuerde la casilla de verificación, ahora entra en juego) En el momento en que los botones de su menú son solo imágenes (si son flash, mire a continuación) Ahora que tiene páginas, pueden ser botones reales, ya sean imágenes cambiantes o normales, haga clic derecho en el botón de inicio y vaya a cambiar enlace o crear enlace (depende de la versión), aparecerá un cuadro de diálogo, simplemente busque el archivo de su página de inicio y haga doble clic en él. ahora está vinculado a la página, repita para el resto de sus botones y guarde el documento, si Dreamweaver le pregunta si desea cambiar todas las páginas basadas en el documento, diga que sí.

Para el botón flash, recordará que ignoramos la barra de vínculos, por lo que todo lo que hacemos es hacer clic derecho en el botón y presionar editar. Se le presentará la pantalla de antes, simplemente presione el botón de exploración al lado de la barra de vínculos y busque su archivo. Ahora debería tener un sitio prácticamente funcional, el siguiente paso está lleno de algunos trucos y cosas para las páginas de fotos, etc. para facilitar las cosas y funcionar mejor.

Paso 11: Algunos consejos e ideas útiles

Si está trabajando en XP (posiblemente con Vista incluida), hay un poder de XP llamado image resizer que le permitirá cambiar el tamaño de sus imágenes de manera personalizada haciendo clic derecho y puede hacer lotes y agregar el pulgar al final de cada nombre. Para una galería de fotos, use las miniaturas que hizo como imágenes en la página principal y vincúlelas como botones al archivo de imagen más grande, esto permite una carga más rápida y menos páginas de la galería.

Para las páginas con mucho contenido en ellas, puede valer la pena dividirlo en la página y los enlaces de la página anterior, esto es simple de hacer y todo lo que debe hacer es vincularlos entre sí y poner el de inicio como el enlace de la plantilla o desde cualquier página. está vinculado desde. Volveré y agregaré más cuando piense en ellos o cuando la gente los sugiera, eso es solo el comienzo.

Paso 12: Cree una página de índice

En este momento, la mayoría de los servidores web requieren una página de índice, que puede ser una réplica de la página de inicio llamada 'index.htm' (así es como tendrá que nombrarla) o crear una página original con ingresar sitio en ella (si ' Eres bueno con el flash, podrías tener una animación para animar las cosas. Debes sentir que se acerca a ese momento especial. Ve aquí…

Paso 13: Consíguenos un anfitrión

Ahora se encontrará en el sitio al que lo envié, lo elegí porque en lo que respecta a los hosts gratuitos, es excelente y permite una gran cantidad de cosas, así como almacenamiento de 8 gigas y algo así como 300 GB de ancho de banda / mes.

Así que siga los pasos de registro y active su cuenta, ni siquiera mire ese administrador de archivos, no lo necesitaremos. Vaya derecho a su cuenta y anote el nombre de su cuenta FTP, el nombre de usuario y la contraseña (la misma que su contraseña para la cuenta de alojamiento). Vaya a sitios, edite sitios y elija el suyo, vaya a la pestaña avanzada y vaya al servidor de prueba (Sé que el mío está en información remota, pero el servidor de prueba es la forma más fácil de cargar el sitio), ingrese su información como se muestra en la imagen.

Paso 14: ¿Puedes sentirlo?

Es hora de subir el sitio … Estás a punto de tener un sitio web.

Vaya a la barra de archivos / activos de su sitio, sin duda se ve muy diferente en este momento, haga clic en el pequeño menú desplegable de vistas y elija el servidor de prueba. Dreamweaver ya ha guardado su contraseña de FTP. Haga clic en el botón Conectar a host remoto (el que tiene tres formas divertidas). una vez que diga que está conectado, haga clic en el botón de colocar archivos., ese es el botón que es una flecha que apunta hacia arriba. (Para un uso posterior, puede iniciar sesión en la cuenta y usar obtener archivos para obtener archivos que puede haber perdido en su computadora). Cuando presione esto, le preguntará si desea publicar todo el sitio, maldita sea, lo haga con todo ese trabajo, para actualizaciones menores puede enviar archivos de reemplazo en su lugar. Cuando llegue a 'index.htm', preguntará si lo reemplaza, diga que sí; de lo contrario, su sitio dejará de funcionar después de 15 días, por eso creamos nuestro sitio primero.

Paso 15: ¿Ahora quieres un nombre?

Entonces, la idea de ser un subsitio está afectando tu ego, tienes opciones, compra un nombre de dominio (no es caro sin hosting y puedes hacer.com.org.co.uk y.net elegir el que mejor se adapte a tu nombre. para el tipo que lo quiere todo gratis, simplemente vaya al sitio de dot tk. Simplemente reflejan sus páginas, así que cuando haga eso, haga que su página de inicio o su página de índice sea el enlace del sitio y elija decir killerjackalope.tk, ¿entendido?

Paso 16: ¿Más para más?

Ahora, esto es en respuesta a una pregunta candente y se incluirá en el concurso de cortadores láser (de último minuto), pero si tiene alguna pregunta o desea explicaciones adicionales, simplemente pregunte, si es pequeño, le responderé y si es una buena, luego agregaré un paso para que todos tengan la respuesta a su pregunta.

También sé que es del tutorial anterior, pero estoy seguro de que esto es lo que sucede cuando intentas hacer un sitio en la página principal, es horrible y prefiero decirte que robes Dreamweaver y luego compres la página principal. Siguiente instructable, cómo hacer divertidas imágenes de Hulk.