Cómo diseñar tu propio sitio web

Introducción al sencillo proceso de diseño de sitios web

1 Planificación y boceto

2 Diseño y producción

3 Corte y exportación

p>

4 Edición y plantillas

5 Animación y publicidad

6 Enlace y carga

Divida los pasos de producción según el software y la duración:

1Planificación y bocetos

1.1 El proceso de todos los sitios web y otros trabajos de diseño comienza con la planificación. Aquí es donde mejor pueden brillar su talento y creatividad. La mayor diferencia entre los humanos y otros animales es que pueden pensar y crear, y esto por sí solo es valioso. ¡Debemos completar la parte de planificación más crítica de un sitio web antes de abrir la interfaz de producción de PS o FW!

el éxito o fracaso de este sitio web. ¡Un sitio web excelente no sólo es hermoso, sino también fácil de navegar, muy legible, conciso y claro!

El estilo, el color, el formato, el diseño, las columnas e incluso cada pequeño ícono del sitio web deben seleccionarse cuidadosamente Elaborado con cuidado y pensamiento. La formulación del estilo depende de los visitantes de su sitio web y de la experiencia profesional, el nivel educativo, los pasatiempos, etc. de los lectores. Sólo atendiendo a sus preferencias se puede maximizar el interés, por otro lado, depende del tipo y del tipo; de la empresa si las preferencias de las personas jurídicas corporativas no se ven obligadas a unirse a su propia voluntad, ¡entonces los puntos anteriores ya han formulado la dirección general del sitio web!

1.2 Este sitio web es un sitio web comercial principalmente para. empresas, por lo que adopto un estilo simple, colores y estilos brillantes y brillantes. Siempre que aprendas la composición de planos y la composición de colores, sabrás cómo organizar varios elementos y contenidos de acuerdo con su estilo, y qué colores usar para crear. El efecto que desea expresar, incluido el frío, el calor, la luz y la oscuridad, son todos muy críticos. Una gran área de colores neutros no deslumbra y los colores brillantes pueden desempeñar un papel importante a la hora de guiar la línea de visión. Es parte de la naturaleza humana que le gusten los colores cálidos en invierno y los colores fríos en verano. la gente confía y la tecnología es la razón por la que lo elegí, y los colores que estimulan el apetito, como el naranja y el amarillo, tienen más probabilidades de ser favorecidos por los sitios web de alimentos.

1.3 Divida las columnas según sea conciso y científico. principios de clasificación: Página de inicio Centro de atención al cliente Anuncio limitado Introducción Medios cooperantes Preguntas frecuentes Informes de medios Acerca de nosotros

Si las columnas no están bien divididas, afectará el ajuste del marco. La consecuencia es: empezar de nuevo. , ¿Es deprimente?

Este sitio web es principalmente para empresas de Weifang, por lo que debe hacerse local. La transformación hace que la gente se sienta amigable al mirarlo y debe hacerse de manera hermosa, ¡una tontería!

1.4 Bien, después de completar lo anterior, toma un bolígrafo y dibuja un boceto en el papel de acuerdo con tu creatividad e imaginación, preferiblemente hasta cada sombra y trazo. ¡Este paso es muy fácil! ¡El punto clave!

1.5 La última parte de esta sección es preparar los materiales necesarios para crear un sitio web, incluidos íconos, LOGOTIPO, lemas, introducción de contenido, etc. ¡Estos son los más básicos!

1.5 p>

2 Diseño y Producción

2.1 Si los bocetos han quedado perfectamente dibujados, puedes abrir PS o FW para empezar a hacer y diseñar nuestra interfaz. Aquí uso PS, aunque no es tan eficiente. y efectivo como FW Professional pero más flexible y gratuito, este es mi favorito, ¡y es que estoy acostumbrado ^^ Levantar tropas durante mil días y usarlas por un tiempo, la práctica y el estudio habituales vienen bien. ¡Jaja!

2.2 Primero puedes enmarcar la página de 778*600 recién creada y luego refinarla gradualmente. También puedes usar tus propias técnicas únicas, como botones de cristal transparente y otros efectos para crear una imagen. Estilo especial. ¡Esfuércese por la simplicidad y el refinamiento! ¡No deje de lado cada detalle! ¡Incluso una sombra de 1*1 5 agregará color a su página!

2.3 Es mejor desarrollar el hábito de crear capas, lo que puede facilitar la clasificación y la edición, y evitar colocar cientos de capas en una sola capa para que resulte confuso y poco claro.

Ser un buen diseñador debe ser organizado, así que adquiere el hábito de clasificar y nombrar cada capa, ¡nunca es una pérdida de tiempo!

3 Recorta y exporta

Ya sea PS o FW, incluso si se trata de una interfaz de diseño creada por IA, los principios de corte son los mismos. Siga los siguientes aspectos:

3.1 Primera pulsación Corte de marco rugoso, como por ejemplo. como chino o en forma de T, preste atención a que esté completo

3.2 El área de texto que se va a ingresar, los bloques de color grandes o las imágenes separadas y las animaciones flash deben cortarse por separado en formatos que no sean imágenes Rebanadas para insertar

3.3 Preste atención al corte flexible de áreas largas donde se requiere agregar contenido. Si hay patrones, asegúrese de que se puedan organizar repetidamente.

3.4 Tenga especial cuidado al cortar. para no dejar un espacio de un píxel en una fila o columna. Haga zoom para que todos los sectores estén alineados sin dejar espacios

3.5 Otros sectores generados automáticamente, como botones y espacios en blanco, y creen cambios que es necesario realizar un corte de la apariencia de la imagen, etc.

Después de cortar, seleccione el comando Guardar archivo como página WEB y expórtelo como un archivo HTML para editarlo con DW.

4 Edición y Plantillas

4.1 Abra el archivo HTML exportado en DW y comience a editar, incluido centrar la tabla grande, configurar el fondo y modificar el fondo de las celdas en el espacio en blanco. área de entrada a las imágenes cortadas originales, etc.

4.2 Agregue estilos CSS al archivo editado, incluidas las etiquetas más básicas como TD y ALINK, luego guárdelo como un archivo DWT de plantilla y ^altv cree una nueva área editable

4.3 Crea nuevas páginas a través de plantillas y agrega el contenido correspondiente

5 Animación y publicidad

5.1 Crea banners publicitarios animados FL según el tamaño de las secciones originales, utilizando el contenido de texto correspondiente y los eslóganes publicitarios, cree un nuevo archivo en FL

5.2 Copie y pegue las palabras publicitarias en la escena, compórelas y conviértalas en componentes 578*104

5.3 Agregue el fondo y la animación correspondientes, y depure el ritmo. Luego publíquelo como un archivo SWF

5.4 Inserte la página de plantilla en DW, ajuste el tamaño y guárdela. Otras páginas se actualizarán automáticamente<. /p>

6 Enlaces y cargas

6.1 Restablecer el enlace de navegación de la página de plantilla. Este paso también se puede completar en la Sección 4

6.2 Abra la página de inicio localmente y verifique. el enlace y el contenido de texto hasta que no haya errores y asegúrese de que se pueda acceder al enlace normalmente

6.3 Cargue en el espacio aplicado y, una vez que la resolución del nombre de dominio sea exitosa, explore el efecto en línea en el navegador ¡y realizar el post-mantenimiento correspondiente!