Busco urgentemente un informe de diseño web dinámico. ¡urgente! ! ! ! ! ! ! ! ! Por favor ayúdenme, hermanos y hermanas. Correo electrónico 904013391@qq.com
Instrucciones de diseño "Diseño de sitios web y producción de páginas web"
Nombre del curso: Diseño web
Título del diseño: Mi ciudad natal
Departamento: Departamento de Ingeniería de Información de Construcción
Clase profesional: Computadora 0901
Nombre del estudiante:
Número de estudiante: 200913190
Instructor: Xu Meixia
Fechas de inicio y finalización: 20 de diciembre de 2010 al 24 de diciembre de 2010
Página 1*** 13 páginas
Proceso de producción de la página web de mi ciudad natal
1. Introducción al propósito y las funciones del desarrollo de sitios web
Con el desarrollo de la tecnología de redes y la popularización de Internet, la construcción y producción de sitios web se han vuelto cada vez más importantes para todos los ámbitos de la vida y Las personas para promocionarse son herramientas favorables y cada vez más personas utilizan los sitios web para hacer publicidad en la era actual. A través de la producción de sitios web, los profesores, compañeros de clase y amigos pueden comprenderse mejor a sí mismos y lo que los demás quieren saber. acerca de mí. Mi ciudad natal proporciona una plataforma para que otros se comprendan a sí mismos más profundamente. La función principal de este sitio web es que más personas sepan sobre mí y mi ciudad natal.
2. >2.1 Nombre del sitio web: Mi ciudad natal
2.2 División de las columnas del sitio web
Según el contenido y las funciones de este sitio web, se divide en: mis más sentidas palabras, enlaces de navegación, e introducciones a varios lugares, fotografías que reflejan la ciudad natal, declaración de derechos de autor, etc.
(1) Mi corazón: seis presentaciones de nuestro dormitorio, que provocan una comparación con el tema del sitio web para reflejar nuestra ciudad natal (2) Enlaces de navegación: enlaces a las páginas web establecidas por cada uno de ellos; respectivas ciudades de origen; (3) Introducción a cada lugar: una breve introducción a nuestras respectivas ciudades de origen y comprensión del conocimiento y la cultura de nuestras ciudades de origen; (4) Imágenes: una lista de imágenes representativas de cada lugar, que muestran diferentes estilos de otra manera; (5) Declaración de derechos de autor: declara el creador del sitio web
Los detalles se muestran en la figura:
2.3 La navegación del sitio web debe aplicarse a todas las páginas para mejorar la facilidad de uso del sitio. sitio web.
2.4 Estilo del sitio web y selección de color: La página es principalmente verde claro y amarillo claro. El verde claro refleja vitalidad, y las prácticas fuentes de color marrón claro y gris tenue dan a las personas una sensación de claridad y estabilidad. Todas las páginas tienen el mismo tono de color y diseño similar.
2.5 La estructura del directorio del sitio web está razonablemente diseñada: diferentes materiales se almacenan por separado en diferentes carpetas. Por ejemplo, las imágenes se colocan en la carpeta de imágenes
, el flash se coloca en la carpeta de flash, la tarea completa se coloca en una carpeta con su propio nombre, etc.
3. El proceso de producción de la página de inicio de Liaocheng
3.1 Diseño de la página de inicio:
Página de inicio, enlaces de navegación, contenido, enlaces web
3-1
La página completa está dividida en cuatro. La primera parte utiliza un archivo flash para mostrar imágenes dinámicas, principalmente lo más destacado del sitio web, la segunda parte es la barra de navegación y la tercera parte es el contenido detallado, en el que se encuentra el texto; La página web está organizada de forma ordenada y compacta, para brindar a las personas una sensación de comodidad. Agregue algunas imágenes en lugares apropiados de la página web y agregue algunas descripciones de texto diferentes para cada imagen para que la página web se vea más hermosa. La cuarta parte son los enlaces a cada página web. El objetivo principal de utilizar este diseño es brindar a los espectadores una sensación simple, clara y clara y hacer que el sitio web sea uniforme.
El diseño específico se muestra a continuación:
3-2
3.2 Proceso de producción:: La producción de esta página web se divide en tres partes: la parte superior está hecha con encabezado de página creado flash. La parte central se divide en dos partes: izquierda y derecha. La izquierda es una introducción simple y enlaces a mi ciudad natal. Las imágenes dinámicas producidas utilizan la línea de tiempo para reproducir las imágenes automáticamente, y las imágenes deslizadas hacia abajo desde la parte superior se reproducen automáticamente. Un bucle. La derecha es una visión de varios lugares pintorescos de mi ciudad natal. También configuré una imagen de fondo para la página web y usé la imagen agregada por la pestaña Spry al final.
4. Proceso de producción de la página de inicio de Liaocheng
4.1 Crear una nueva página y asígnale el nombre Página de inicio de Liaocheng (índice)
4.2 Establecer los márgenes de cuatro lados en la apariencia de las propiedades de la página es 0, el color del texto se establece en: #9900CC, el tamaño se establece en 18 píxeles; el estilo de subrayado en el enlace se establece en: subrayado el color del enlace es: #0000FF.
4.3 (1) Producción de la página de inicio (índice)
Utilice estilos para definir la altura y el ancho de cada parte y establezca ./image/195911NM-10.gif como fondo imagen.
La imagen del encabezado es Water City Pearl.jpg Configure la animación flash en naranja a la izquierda y a la derecha. El código swf es el siguiente:
El código de diseño de la imagen del encabezado: (imagen 3-2 arriba). )
lt; div id="Layer3" style="izquierda: 30px; arriba: 34px; ancho: 186px; alto: 175px;"gt;lt;span class="STYLE3"gt;lt; a href="liaocheng.html"gt; lt;img src="../image/201042717165.jpg" name="Image1" width="186" height="174" /gt;lt;/agt;lt; /spangt;lt;/divgt;
lt;a name="dingbu" id="dingbu"gt;lt;/agt;
lt;table width="967" height="817" border="1" align="center" bordercolor="#000000"gt;
lt;trgt;
lt;td height="190" colspan ="2" valign="top" bgcolor ="#FFFFFF"gt;lt;img src="../image/水城Pearl.jpg" width="956" height="202" /gt;lt;/tdgt ;
lt; /trgt;
El código de configuración de la animación Flash es el siguiente:
lt;
lt; script type="text/javascript" gt;
AC_FL_RunContent('codebase','/pub/shockwave/cabs/flash/swflash.cab#version=7, 0, 19, 0', 'ancho', '957', 'alto', '210', 'src', '../FLASH/izquierda-derecha-naranja', 'calidad', 'alta', 'página de complementos', '/ go/getflashplayer', 'wmode', 'transparent', 'movie ', '../FLASH/left and right orange' ); //fin del código AC
lt;/scriptgt;
lt;noscriptgt;
lt ;object classid="clsid：D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/pub/shockwave/cabs/flash/swflash.cab#version =7，0，19，0" width="957" height= "210"gt;
lt; param name="movie" value="../FLASH/izquierda y derecha orange.swf " /gt;
lt; param nombre=" calidad" valor="alta" /gt;
lt; parámetro nombre="wmode" valor="transparent" /gt;
lt; embed src="../FLASH /Izquierda y derecha orange.swf" width="957" height="210
" calidad="high" pluginspage="/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"gt;lt;/embedgt;
lt;/objectgt;
lt;/noscriptgt;
lt;/divgt;
(2) Diseño de página Jingyanggang (jyg)
Esta página web Algunos Los códigos se utilizan para implementar el código de desplazamiento de texto: lt; td width="213" lt; td width="213" height="363" bgcolor="#FFFFFF"gt; 310" height="620" scrollamount="1" scrolldelay="1" onmouseover="stop()" onmouseout="start()"gt;
lt;pgt;lt;span class= " STYLE21"gt; Jingyanggang se encuentra a 18 kilómetros al este de la ciudad de Yanggu. En el medio de la cima de Shagang, hay un templo de estilo nacional, comúnmente conocido como "Templo Wusong". Se dice que fue construido a mediados de Dinastía Ming y luego fue destruido. El antiguo templo existente fue construido en 1958. Frente al templo, hay una tablilla de piedra grabada con los tres caracteres "Jingyang Gang", que fue inscrito por Shu Tong, un famoso calígrafo chino contemporáneo. A doscientos o trescientos metros al este del templo, hay un monumento con las palabras "Wu Song". La lápida de piedra de color jade tinta donde fue asesinado el tigre Desde 1973, después de muchas excavaciones de prueba realizadas por el equipo arqueológico provincial, Jingyanggang. Reconocido como uno de los primeros lugares escénicos nacionales de nivel AAA para el sitio "Cultura Longshan", un lugar escénico importante en la línea turística Water Margin y la caza del tigre de Wu Song. Todos saben que no todos han estado en el lugar donde. Wu Song luchó contra los tigres. El área escénica de Jingyanggang cubre un área total de 33,3 hectáreas.
En el área escénica, hay dunas de arena onduladas, hierba cubierta de maleza y árboles que bloquean el sol. Las principales atracciones: frente al frente izquierdo del Templo Shanshen, que tiene una historia de más de 200 años, hay un ". "Jingyanggang" tablilla de piedra con la inscripción de Shu Tong, exsecretario del Comité Provincial del Partido Comunista de China en Shandong. En el frente derecho, hay una estela de 3 metros de altura con el carácter "Tigre" escrito por el famoso calígrafo. Yang Xuanting; una estela de piedra con la palabra "Donde Wu Song mató a los tigres" erigida en la dinastía Song del Sur; una placa en la puerta del "Templo Wusong" escrita por Zhao Puchu. El Pabellón del Rugido del Tigre de un solo alero hexagonal con la inscripción de Liao Jingwen; la estatua de piedra en relieve de "Wu Song luchando contra un tigre" creada por el famoso pintor Liu Jiyao y la piedra que se dice que es la encarnación del tigre que mató Wu Song: el "Tigre número uno del mundo". no es suficiente...lt;/spangt;lt;br /gt;
lt;/pgt;
lt;/marqueegt;
La imagen del encabezado es Liaocheng.jpg Configure una animación flash para viajar a través del cielo estrellado.swf, el código de fuegos artificiales Bloom.swf es el siguiente:
lt;
lt; height="186" colspan="3" valign ="top"gt;lt;img src="../image/Liaocheng.jpg" width="1016" height="224" /gt;lt;/tdgt;
lt;/trgt ;
Código de archivo Flash:
lt;div id="apDiv1"gt;
lt;script type="text/javascript"gt;
lt; p>
AC_FL_RunContent('codebase','/pub/shockwave/cabs/flash/swflash.cab#version=9, 0, 28 , 0', 'ancho', '991', 'alto', '217 ', 'src', '../FLASH/Across the Stars', 'calidad', 'alta', 'pluginspage', '/shockwave /download/download.cgi?P1_Prod_Version=ShockwaveFlash', 'wmode', 'transparent' ,'movie','../FLASH/Across the Stars' ); //fin del código AC
lt; /scriptgt;lt;noscriptgt;lt;object classid="clsid:D27CDB6E-AE6D-11cf -96B8-444553540000" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=9, 0, 28, 0 " width="991" height="217"gt;
lt;param name="movie" value="../FLASH/Cruzando el cielo estrellado.swf" /gt;
lt;param nombre="calidad" valor="alta" /gt;
lt;param nombre="wmode" valor="transparent" /gt;
lt ;embed src="../FLASH/Cruzando el cielo estrellado.swf" width="991" height= "217" quality="high" pluginspage="/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type= "aplicación/x-shockwave-flash"
wmode="transparent"gt;lt;/embedgt;
lt;/objectgt;
lt;/noscriptgt;
lt;/divgt;
lt;/objectgt;
lt;/noscriptgt;
lt;/divgt;
lt; p>
lt; div id="apDiv2"gt;
lt;script type="text/javascript"gt;
AC_FL_RunContent( 'codebase', '/pub /shockwave/cabs/flash/ swflash.cab#version=9, 0, 28, 0', 'ancho', '390', 'alto', '211', 'src', '../FLASH/Fuegos artificiales florecen ', 'calidad', ' high', 'pluginspage', '/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash', 'wmode', 'transparent', 'movie', '../FLASH/Fireworks Bloom' );
lt;/scriptgt;lt;noscriptgt;lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/pub/shockwave/cabs /flash/swflash.cab# version=9，0，28，0" width="390" height="211"gt;
lt; param name="movie" value="../ FLASH/Fuegos artificiales flor.swf" /gt;
lt; parámetro nombre="calidad" valor="alto" /gt;
lt; parámetro nombre="wmode" valor= "transparente" /gt; /p>
lt; embed src="../FLASH/Fireworks Bloom.swf" width="390" height="211" quality="high" pluginspage="/shockwave/ download/download.cgi?P1_Prod_Version =ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"gt;lt;/embedgt;
lt;/objectgt;
lt;/noscriptgt;
lt;/divgt;
El efecto completo es el siguiente
3-3
(3) Phoenix Garden (fhy) diseño web
Para resaltar las características de Phoenix Garden, el diseño web de Phoenix Garden utiliza los productos más destacados de Phoenix Garden para reflejar la tecnología de Phoenix Garden (cactus, higo japonés, etc...). El flash utilizado es Left and Right 5.swf y Butterfly Feifei.swf. Esta página web inserta una imagen creada con flash para realizar el desplazamiento de la imagen de derecha a izquierda. Utiliza el método de desplazamiento de texto en la página web anterior. código
（lt;div id="apDiv7"gt;
lt;td width="213" height="363" bgcolor="#FFFFFF"gt;lt;marquee dirección=" l
eft" width="1020" height="150" scrollamount="10" scrolldelay="1" onmouseover="stop()" onmouseout="start()"gt;
lt;pgt;lt ;span class="STYLE29"gt; El Parque de Ciencia y Tecnología Agrícola Liaocheng Fenghuangyuan ha introducido más de 100 variedades de árboles frutales raros y famosos en el país y en el extranjero, más de 20 variedades de álamo utilizadas para la ecologización y la industria papelera nacional, y ha cultivado más de 6 millones de plántulas para satisfacer las necesidades de adecuación de la estructura de siembra agrícola y desarrollo de una economía rural eficiente en esta ciudad y sus alrededores
Las principales variedades son las siguientes:
(1) Japanese Fairy Peach King: Las variedades de durazno se distinguen por: extra grande, con un peso promedio de fruto de 500 gramos y un máximo de 1.350 gramos de excelente calidad, todo de apariencia roja, carne crujiente, dulce y refrescante; contenido de azúcar de hasta el 23%; extremadamente resistente al almacenamiento y transporte, y se puede almacenar a temperatura ambiente. Se puede almacenar durante 20 días y se puede almacenar en un almacén a temperatura constante durante 3 a 4 meses. regalo para el Festival del Medio Otoño y el Día de Año Nuevo. El período de producción de frutos en el árbol es largo, desde finales de agosto hasta finales de septiembre, y puede lanzarse al mercado gradualmente. Esto es incomparable con cualquier otra variedad de melocotón. /p>
(2) Melocotón de maduración temprana famoso en Corea: en el distrito de Fenghuangyuan, madura a fines de junio, es completamente rojo, brillante y hermoso, y el peso de una sola fruta puede alcanzar los 300 gramos. pulpa crujiente, dulzor rico y textura jugosa, rendimiento extremadamente alto, con un sabor excelente en comparación con otros melocotones de maduración temprana y perspectivas prometedoras de desarrollo del mercado
(3) Melocotones coreanos famosos: cultivados por agricultores coreanos. Madura a finales de septiembre, con un peso promedio de fruto de 350 gramos. Tiene una fragancia fuerte, sabor jugoso y sabor extremadamente dulce. Es semisoluble, resistente al almacenamiento y transporte, y tiene un aspecto rojo brillante. variedad de maduración tardía en Corea.
(4) Almendra americana: 86-1, 86-2, 86. -9 es una de varias líneas superiores obtenidas a partir de almendras americanas. El rendimiento del grano es de 86-1. y 86-4 están por encima del 45%, y 86-9 es la variedad mejor polinizada. Las almendras americanas también se llaman almendras americanas, con las características de resistencia a la sequía, resistencia a la esterilidad, gran adaptabilidad y tolerancia al manejo extensivo. Da frutos tres años después de la siembra y genera una producción a gran escala en cinco años. Durante el período de alto rendimiento, el rendimiento de almendras grandes por mu es de 500 kilogramos. El precio actual en el mercado interno es de 56 yuanes por kg. extremadamente considerable.
(5) June Snow Pear: Es la variedad de pera más temprana desarrollada en mi país. 20 días antes que Esmeralda El peso promedio del fruto es de 180 gramos, de pulpa fina y blanca, sin células de hueso, crujiente, dulce y jugosa. Por observación en nuestro parque, esta variedad tiene una alta tasa de cuajado, altísimo rendimiento y es. resistente a la sarna
(6 ) Serie de fresas libres de virus: Phoenix Garden presentó la serie de fresas libres de virus del Instituto Nacional de Investigación de Árboles Frutales: Mexiangsa introducida desde los Países Bajos Es la variedad de fresas Trump. Hoy monopoliza el mercado de principios de primavera en Europa y Estados Unidos. Madura muy temprano, tiene frutos duros, buen sabor y el mayor peso de una sola fruta. Puede alcanzar los 118 gramos, es fragante y rico, y es adecuado para semi-. cultivo y cultivo en suelo. Será una variedad ideal para un desarrollo agrícola eficiente. Hay otras 18 variedades de fresas, incluidas Gui Nu Gan, Jiu Xin Tang, Xin Hani y All Star. lt;/spangt;lt;br /gt;
lt;/pgt;
lt;/marqueegt;
lt;/divgt;) p>
Cambie la dirección de desplazamiento de las letras hacia la izquierda para lograr un desplazamiento diferente al de la página web anterior. La configuración del flash del encabezado es la misma que la de la página web anterior.
Las representaciones completas son las siguientes
(4) La Torre Guangyue (gyl) y el Lago Dongchang (dch) se completan con el mismo diseño.
5. Resumen de la tecnología de diseño
Para que nuestro sitio web sea más práctico y rico en contenido, utilizamos muchas tecnologías en el sitio web, incluido flash, Photoshop y otros procesamientos de imágenes. y animación, utilizando conocimientos relevantes en Dreamweaver para crear varios efectos especiales, como aplicación de capas, aplicación de línea de tiempo, etc.
5.1 En la recopilación y procesamiento de materiales, dediqué mucho tiempo a procesar animaciones de sitios web, colecciones de fotografías reales e información personal. Por ejemplo, utilice PHOTOSHOP para procesar fotografías en su conjunto.
La animación de desplazamiento se creó usando flash.
5.2 Efecto de desplazamiento de texto, el código es el siguiente:
lt;td width="213" height="363" bgcolor="#FFFFFF"gt;lt;marquee direction ="arriba " ancho="179" altura="150" scrollamount="1" scrolldelay="1" onmouseover="stop()" onmouseout="start()"gt;
lt;pgt ;contentlt ;br /gt;
lt;/pgt;
lt;/marqueegt;
6. Experiencia de prácticas
Esta sitio web Utiliza principalmente los conocimientos aprendidos este semestre para diseñar aplicaciones y crear efectos de animación. A través del diseño de este sitio web, se utilizan los conocimientos aprendidos este semestre. Esto no solo revisa algunos conocimientos aprendidos este semestre, sino que también profundiza lo aprendido. En términos de contenido de conocimiento, la producción de esta página web me ha enseñado mucho sobre cómo recopilar información, cómo utilizar el método más rápido para recopilar información, cómo recopilar información eficaz, cómo organizar la información y cómo hacer que la información descargada sea fácil de encontrar. Aprendí cómo crear páginas web, cómo usar efectos especiales en páginas web y qué tipo de efectos especiales pueden resaltar el tema de las páginas web. En el proceso de creación del sitio web, también encontré muchas cosas que no entendía y resolví muchos problemas con la ayuda de profesores y compañeros de clase, y poco a poco completé la construcción de este sitio web. Aunque la página web que hice esta vez no es muy atractiva y tiene deficiencias, como la producción de páginas dinámicas, el uso de scripts, el uso de algunos efectos, etc., no es lo suficientemente flexible. El diseño de la página web no es muy perfecto, pero dediqué mucho tiempo a completarlo, por lo que me será de gran ayuda a la hora de crear páginas web en el futuro. También aprendí mucho en el proceso de hacer una página web, así que de corazón estoy muy satisfecho con mi experiencia. También quiero agradecer al profesor por organizar esta semana de prácticas. ¿Por qué? Porque durante el proceso de producción no solo aprendí cosas que no están en el libro, sino que también cultivé mi capacidad de pensar de forma independiente. Al mismo tiempo, también fortaleció la amistad de solidaridad y ayuda mutua entre compañeros. Por lo tanto, no importa desde qué perspectiva, la tarea asignada por el maestro esta vez es la única vez que se han puesto en práctica los conocimientos desde que entré a la universidad. Gracias nuevamente, maestro. En resumen, este diseño se completó en el proceso de aprendizaje continuo de "encontrar el problema - gt; resolver el problema - gt; descubrir el problema nuevamente - gt; resolver el problema nuevamente - gt;". Continuaré trabajando duro en el futuro para hacer