El diseño de la página web CSS también se puede considerar como un trabajo sistemático. El desarrollo del sitio web DIVCSS puede ser completado por varias personas en colaboración y por un equipo. Esto implica muchas cuestiones operativas normativas. Se requiere conocimiento organizado y estandarizado. Este es un artículo reimpreso de Blue, que es muy efectivo. El autor ha resumido mucha experiencia práctica y todos pueden consultarlo y aprender de él. Resumen Esta especificación es tanto una especificación de desarrollo como una referencia del lenguaje de secuencias de comandos. Esta especificación no es una disposición inmutable que deba observarse estrictamente. Debe usarse con flexibilidad y realizarse ciertas modificaciones en circunstancias especiales. Sin embargo, no cambie las especificaciones a voluntad. Si tiene alguna pregunta, comuníquese conmigo a tiempo y cambiaré de inmediato los ejemplos de códigos y documentos relevantes de esta especificación. Requisitos básicos 1. Abra tres subdirectorios de imágenes comunes temporales en el directorio raíz del sitio web y luego abra un subdirectorio de medios según sea necesario. El directorio de imágenes contiene imágenes públicas que utilizan las páginas en diferentes columnas, como logotipos de empresas, pancartas, menús. y botones. Etc.; el subdirectorio común contiene archivos públicos como css, js, php, include, etc.; el subdirectorio temporal contiene varios textos, imágenes y otros materiales originales proporcionados por los clientes; flash, avi, tiempo rápido, etc. 2. En principio, se debe abrir un directorio para cada columna en el directorio raíz de acuerdo con la estructura de columnas de la página de inicio. Si es necesario, se debe abrir un subdirectorio de imágenes y medios en el directorio de cada columna para colocar las imágenes y los medios. exclusivo de esta columna Para archivos multimedia, si esta columna tiene mucho contenido y está dividida en muchas columnas subordinadas, se pueden abrir otros directorios en consecuencia. 3. A menudo hay muchos archivos en el directorio temporal. Se recomienda abrir un directorio nombrado por tiempo para clasificar y organizar la información proporcionada por los clientes uno tras otro. 4. A menos que existan circunstancias especiales, todos los nombres de directorios y archivos deben usar una combinación de letras minúsculas en inglés, números y guiones bajos, no se deben incluir espacios ni caracteres especiales. Utilice el inglés como guía al nombrar. directorios. No utilice pinyin a menos que sea absolutamente necesario. Como nombre de directorio, la experiencia ha demostrado que los directorios nombrados con pinyin suelen ser difíciles de entender incluso un mes después. secuencias de comandos Deberíamos tener un concepto coherente del estilo general del guión, lo que significa que el estilo del guión que escribiste un mes después es consistente con el estilo del guión que escribiste hace un mes, y que el estilo del guión escrito por diferentes desarrolladores en el mismo grupo de trabajo es consistente, porque no podemos desarrollar de forma aislada para siempre, puedes estar colaborando contigo mismo hace tres meses en cualquier momento (tu cliente requiere una revisión), a menudo tienes que desarrollar un proyecto con diferentes colegas en el Studio, y es posible que también se le solicite que modifique los guiones desarrollados por personas que han renunciado; por supuesto, también puede dejar un proyecto a colegas posteriores. 1. Plantilla universal para archivos HTML: div css xhtml xml Ejemplo de código fuente Ejemplo de código fuente [www.52css.com] Otras metaetiquetas div css xhtml xml Ejemplo de código fuente Ejemplo de código fuente [www.52css.com] La hoja de estilo define la definición de la función Javascript del lado del cliente y la operación de inicialización. div css xhtml xml Ejemplo de código fuente Ejemplo de código fuente [www.52css.com] Reponer: 2. Para las páginas que permiten la recuperación de texto completo, para permitir una recuperación efectiva por parte de los motores de búsqueda en Internet, se deben agregar metaetiquetas de palabras clave y descripción entre el <head></head> del html en la página de inicio del canal. , Por ejemplo: div css xhtml xml Ejemplo de código fuente Ejemplo de código fuente [www.52css.com] 3. Código de muestra de formato de archivo CSS: div css xhtml xml Ejemplo de código fuente Ejemplo de código fuente [www.52css.com] Lo que necesita especial atención aquí es que el orden de a:link a:visited a:hover a:actived debe estar estrictamente de acuerdo con el código de muestra anterior; de lo contrario, se producirán más o menos problemas. Además, estipulamos que la redefinición es lo primero, las pseudoclases son lo segundo y la personalización es lo último, ¡lo que facilita la lectura para usted y los demás! Para garantizar que el tamaño de fuente sea consistente en diferentes navegadores, se recomienda definir el tamaño de fuente en puntos pt y píxeles. px generalmente usa 9pt y 11pt en la dinastía Song china, y px generalmente usa 12px y 14.7px en chino. Songti. Este es un tamaño de fuente optimizado, negrita o Cuando las fuentes Song están en negrita, los tamaños de fuente de 11 pt y 14,7 px son generalmente más apropiados. Al escribir <table> para anidar entre sí, siga estrictamente el estándar. Para una sola <table>, <table><tr> debe estar alineada, <td> debe tener una sangría de dos espacios de medio ancho, y si hay alguno. other Para tablas anidadas, <table> también tiene una sangría de dos espacios de medio ancho. Si no hay una tabla anidada en <td>, la etiqueta de cierre de </td> debe estar en la misma línea que <td>, sin línea. se rompe. Como señalamos, no debería haber tal código en el código fuente: div css xhtml xml Ejemplo de código fuente Ejemplo de código fuente [www.52css.com] En lugar de eso debería verse así: div css xhtml xml Ejemplo de código fuente Ejemplo de código fuente [www.52css.com] Esto se debe a que el navegador piensa que una nueva línea equivale a un espacio de medio ancho. El método de escritura irregular anterior equivale a agregar un espacio de medio ancho sin querer. Si realmente es necesario agregar un espacio de medio ancho, debería ser así. escrito así: div css xhtml xml Ejemplo de código fuente Ejemplo de código fuente [www.52css.com] <table> que pertenece al mismo nivel debe estar alineado a la izquierda. Además, no se permite que existan celdas vacías sin contenido. Las celdas con una altura de 12 px o más deben escribirse entre <td> y </td>. la altura es inferior a 12 píxeles, se debe insertar una imagen gif transparente de 1*1 entre <td> y </td>. Esto se debe a que algunos navegadores consideran que las celdas vacías son ilegales y no las interpretan. Si el orden del código es caótico, puede reorganizarlo mediante el comando->aplicar formato de fuente en DW3. 5. También existen estándares unificados sobre cómo escribir el ancho y el alto. Generalmente, para tablas con una sola columna, el ancho se escribe en la etiqueta <table>; ; para tablas con varias filas y varias columnas La tabla, el ancho y el alto se escriben en la etiqueta <td> de la primera fila o columna. En resumen, siga un principio: no debe haber más de un alto y un ancho que controlen el tamaño de la misma celda. Asegúrese de que cualquier ancho y alto sean válidos, es decir, si cambia el valor de cualquier ancho y alto. código, debería estar en Los cambios se ven en el navegador. No es fácil hacer esto, requiere mucho tiempo de práctica y reflexión. Principios generales 1. Antes de organizar la tabla, piense detenidamente cuál es la mejor solución. Intente controlar el anidamiento de las tablas en tres niveles y trate de evitar las dos etiquetas <colspan> <rowspan>. muchos problemas. 2. Una página web debe intentar evitar el uso de una tabla grande completa. Todo el contenido está anidado dentro de esta tabla grande, porque cuando el navegador interpreta los elementos de la página, los muestra uno por uno en unidades de tablas. Si se coloca en una tabla grande, la consecuencia probable es que cuando el visitante escriba la URL, primero se encontrará con un espacio en blanco durante mucho tiempo y luego todo el contenido web aparecerá al mismo tiempo. Si debe hacer esto, use la etiqueta <tbody> para que la tabla grande pueda mostrarse en fragmentos. 3. En la composición tipográfica, a menudo nos encontramos con la necesidad de sangrar la primera línea. No utilice espacios de ancho completo para lograr el efecto. El método estándar es definir p {text-indent: 2em; agregue la etiqueta <p> de cada párrafo. Tenga en cuenta que, en circunstancias normales, no omita la etiqueta de cierre </p>. 4. En principio, prohibimos el uso de <img width=? height=?> para interferir artificialmente con el tamaño de visualización de la imagen, y se recomienda no incluir el ancho y el alto en la etiqueta <img>. Dos atributos: esto se debe a que durante el proceso de producción, las imágenes a menudo necesitan modificarse repetidamente, lo que puede evitar la intervención humana en el tamaño de la visualización de la imagen y maximizar las funciones propias del navegador. La página no ha cargado la imagen. Cuando se agrega la imagen, el tamaño del sitio de la imagen no se omitirá, lo que puede causar que la página web sea Jitter durante la carga (si la imagen se inserta en una tabla de tamaño fijo, este fenómeno no ocurrirá), especialmente cuando el tamaño de la imagen es grande, este fenómeno será obvio, por lo que se espera que esto sea obvio Cuando Si se produce la situación que hace que la página web vibre, asegúrese de adjuntar el ancho a <img> al final. y atributo de altura. 5. Para maximizar la función de composición tipográfica automática del navegador, intente no utilizar <br> para intervenir manualmente en la segmentación de un texto completo. 6. Debe haber un espacio de medio ancho entre palabras en diferentes idiomas, excepto antes del símbolo del encabezado y después del símbolo de la cola. La puntuación entre caracteres chinos debe ser puntuación de ancho completo, y los corchetes alrededor de letras y números en inglés deben usar la mitad. -ancho soportes. 7. Todos los tamaños de fuente deben implementarse mediante hojas de estilo y se prohíbe la aparición de etiquetas <font size=?> en la página. 8. No tenga más de un espacio consecutivo en la página web y utilice espacios de ancho completo lo menos posible (en el juego de caracteres en inglés, los espacios de ancho completo se convertirán en caracteres confusos. Utilice sangría de texto, relleno y margen). , hspace, vspace y transparencia para lograr espacios en blanco. 9. Al mezclar chino e inglés, hacemos todo lo posible para definir el inglés y los números como fuentes verdana y arial. 10. Se recomienda definir el interlineado en porcentaje. Los dos valores de interlineado comúnmente utilizados son altura de línea: 120%/150%. 11. Todas las rutas del sitio web utilizan rutas relativas. Generalmente, no es necesario escribir la ruta del enlace al archivo predeterminado en un determinado directorio. Por ejemplo, no tenemos que hacer esto: <a href=. ”aboutus/index.htm”> pero debería ser así:<a href=”aboutus/”> 12. Utilice fuentes más grandes al incrustar texto en gráficos. Se recomienda no incluir texto en los gráficos. 13. "Tamaño de página web" se define como la suma de los tamaños de archivo de todas las páginas web, incluidos los archivos HTML y todos los objetos incrustados. Los usuarios prefieren sitios que sean rápidos en lugar de novedosos. Para los usuarios de módem, es apropiado mantener el tamaño de página por debajo de 34K. Reglas de nomenclatura de archivos 1. Cada directorio debe contener un archivo html predeterminado y el nombre del archivo debe ser index.htm. 2. El nombre del archivo debe utilizar una combinación de letras minúsculas en inglés, números y guiones bajos. 3. La ideología rectora del principio de nomenclatura es permitirle a usted y a todos los miembros del grupo de trabajo comprender fácilmente el significado de cada archivo. La segunda es que cuando usamos el comando "ordenar por nombre" en una carpeta, el mismo Grande. Las categorías de archivos se pueden organizar juntas para que podamos buscar, modificar, reemplazar, calcular la carga, etc. 4. A continuación se utiliza la columna "Noticias" (incluidas "Noticias nacionales" y "Noticias internacionales") para explicar el principio de denominación de los archivos html: 5. Los principios de denominación de imágenes siguen los siguientes estándares: ☆La parte de la cola se utiliza para expresar el significado específico de la imagen. ☆ Aquí hay algunos ejemplos. Deberías poder entender el significado de las imágenes de un vistazo: div css xhtml xml Ejemplo de código fuente Ejemplo de código fuente [www.52css.com]
<html>
<!–
Generador: Sub Design Studio ( www.eastline.net.cn )
Datos de creación: 2000-8-1
Autor original: Eastline
–>
<cabeza>
<título>Título del documento</título>
<meta http-equiv="tipo de contenido" contenido="text/html; charset=gb2312">
<meta nombre="autor" contenido="eastline">
<enlace rel="hoja de estilo" tipo="texto/css" href="estilo/estilo.css">
</cabeza>
<cuerpo bgcolor="#ffffff">
……
</cuerpo>
Para garantizar que el sitio web sea compatible con la próxima generación de estándares XML del lenguaje web, todos los atributos de las etiquetas HTML deben estar entre comillas simples o dobles, es decir, debemos escribir <a href="url"> en lugar de < a href=url >.
<meta name=”keywords” content=”Shinkansen oriental, coches, compra de coches”/>
<meta name=”description” content=”Oriental New Kanjin Line, la primera parada del mundo para obtener información sobre automóviles chinos”/>
<tipo de estilo="texto/css">
<!—
p {sangría de texto: 2em;
cuerpo {familia de fuente: "宋体"; tamaño de fuente: 9pt; color: #000000; margen superior: 0px; margen derecho: 0px;
tabla {familia de fuentes: "宋体"; tamaño de fuente: 9 puntos; altura de línea: 20 px;
a:enlace {tamaño de fuente: 9pt; color: #FFFFFF; decoración de texto: ninguno}
a:visitado {tamaño de fuente: 9pt; color: #99FFFF; decoración de texto: ninguna}
a:hover {tamaño de fuente: 9pt; color: #FF9900; decoración de texto: ninguna}
a:active {tamaño de fuente: 9pt; color: #FF9900; decoración de texto: ninguno}
a.1:enlace {tamaño de fuente: 9pt; color: #3366cc; decoración de texto: ninguno}
a.1:visitado {tamaño de fuente: 9pt; color: #3366cc; decoración de texto: ninguna}
a.1:hover {tamaño de fuente: 9pt; color: #FF9900; decoración de texto: ninguna}
a.1:activo {tamaño de fuente: 9pt; color: #FF9922; decoración de texto: ninguno}
.blue {familia de fuentes: "宋体"; tamaño de fuente: 10,5 puntos; altura de línea: 20 píxeles; color: #0099FF; espacio entre letras: 5 em}
–>
</estilo>
<td><img src=”../images/sample.gif”>
</td>
<td><img src="”../images/sample.gif”></td>
<td><img src="”../images/sample.gif”> </td>
☆ Cree un directorio de noticias en el directorio raíz ☆ La primera noticia predeterminada se llama index.htm
☆ Todas las noticias pertenecientes a "noticias nacionales" se nombran en orden: china_1.htm, china_2.htm,…
☆ Todas las noticias pertenecientes a "Noticias Internacionales" se nombran en orden: internation_1.htm, internation_2.htm,…
☆ Si la cantidad de archivos es de dos dígitos, nombre los primeros nueve archivos: china_01.htm, china_02.htm para garantizar que todos los archivos se puedan ordenar correctamente en la carpeta.
☆ El nombre se divide en dos partes, la primera y la última, separadas por guiones bajos.
☆ La parte del encabezado indica la naturaleza general de la imagen, como publicidad, logotipo, menú, botón, etc.
☆ En términos generales:
A las imágenes rectangulares, como anuncios y motivos decorativos, colocadas en la parte superior de la página las denominamos: banner
A la imagen icónica le pusimos el nombre: logo
Nombramos la imagen pequeña con un enlace que no está fijo en el botón de la página.
A las imágenes de las columnas de enlaces que aparecen continuamente en una determinada posición de la página y tienen la misma naturaleza las denominamos: menú
A la foto le pusimos el nombre de decoración: pic
Nombramos la imagen sin enlace para indicar el título: título
Siga este principio y así sucesivamente.
banner_sohu.gif
banner_sina.gif
menu_aboutus.gif
menú_trabajo.gif
título_noticias.gif
logo_policia.gif
logo_nacional.gif
pic_personas.jpg
pic_hill.jpg