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.
Descripción general
Esta especificación es a la vez una especificación de desarrollo y una referencia del lenguaje de secuencias de comandos. Esta especificación no es una disposición inmutable que deba observarse estrictamente. Debe utilizarse 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 temporales comunes en el directorio raíz del sitio web y 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 y. menús., 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; avi, Quick Time, etc. Archivos multimedia.
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. Suele haber muchos archivos en el directorio temporal. Se recomienda abrir un directorio con el nombre del 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 a menudo le resultan incomprensibles un mes después.
Al escribir scripts
,debemos tener un concepto coherente del estilo general del script. lo que significa que lo escribiste un mes después y hace un mes. El estilo de scripting sigue siendo consistente, así como el estilo de scripting escrito por diferentes desarrolladores en el mismo grupo de trabajo, porque no podemos desarrollar de forma aislada para siempre y es posible que siempre estés trabajando. contigo mismo hace tres meses (tu cliente pidió una revisión), a menudo tienes que desarrollar conjuntamente un proyecto con diferentes colegas en el estudio y es posible que te pidan que modifiques guiones desarrollados por personas que han renunciado. dejar un proyecto a colegas posteriores.
1. Plantilla universal para archivos HTML:
div css xhtml xml Código fuente de ejemplo Código fuente de ejemplo [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 name="author" content="eastline">
Otras metaetiquetas
div css xhtml xml Ejemplo de código fuente Ejemplo de código fuente [www.52css.com]
<link rel="stylesheet" type="text/css" href="style/style.css">
Cliente de definición de hoja de estilo Definición de función Javascript y operación de inicialización
div css xhtml xml Ejemplo de código fuente Ejemplo de código fuente [www.52css com. ]
</cabeza>
<cuerpo bgcolor="#ffffff">
……
</cuerpo>
Añadido:
Para garantizar que el sitio web sea compatible con la próxima generación de estándares XML de 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 >.
2. Para 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 <head></head> del html. en la página de inicio del canal, por ejemplo:
div css xhtml xml Código fuente de ejemplo Código fuente de ejemplo [www.52css.com]
<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”/>
3. Código de muestra de formato de archivo CSS:
div css xhtml xml Código fuente de ejemplo Código fuente de ejemplo [www.52css.com. ]
<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: ninguno}
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}
–>
</style>
Lo que se debe tener en cuenta 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. breaks
Como señalamos en No debería haber tal código en el código fuente:
div css xhtml xml Código fuente de ejemplo Código fuente de ejemplo [www.52css.com]
<td><img src="”../images/sample.gif”>
</td>
Debería ser así:
div css xhtml xml Código fuente de ejemplo Código fuente de ejemplo [www.52css.com]
<td><img src=”../images/sample.gif”></td>
Esto se debe a que el navegador piensa que una nueva línea es equivalente a un espacio de medio ancho. El método de escritura irregular anterior equivale a agregar involuntariamente. un espacio de medio ancho. Si realmente es necesario agregar un espacio de medio ancho, debería escribirse así:
div css xhtml xml Código fuente de ejemplo Código fuente de ejemplo [www.52css.com]
<td><img src="”../images/sample.gif”> </td>
<table> que pertenecen al mismo nivel deben estar alineados a la izquierda y no se permite que existan celdas vacías sin ningún contenido. se debe escribir una altura mayor o igual a 12 px entre <td> y </td>. Si la altura es menor que 12 px, se debe insertar un gif transparente de tamaño 1*1 entre <td> y </td> Imagen. Esto se debe a que algunos navegadores consideran ilegales las celdas vacías 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 las tablas, 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> y <rowspan>. La experiencia demuestra que estas dos marcas pueden causar. 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 los atributos de ancho y alto en la etiqueta <img>. durante el proceso de producción, la imagen a menudo requiere modificaciones repetidas, 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, sin embargo, un efecto secundario de esto es que cuando la página web no ha cargado la imagen; , el tamaño del sitio de la imagen no se reservará, lo que puede provocar que la página web vibre 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 cuando se espera que ocurra esta situación que obviamente hará que la página web vibre, asegúrese de adjuntar los atributos de ancho y alto a <img> al final.
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 utilizar un porcentaje para definir el interlineado. 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 y generalmente enlazan con. archivo predeterminado en un directorio determinado. La ruta del enlace no tiene que ser el nombre completo. Por ejemplo, no tenemos que hacer esto: <a href=”aboutus/index.htm”> pero debería ser así: <a. href=”aboutus/”>
12. Se recomienda utilizar fuentes más grandes al incrustar texto gráfico. No incluya 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.
Principios de nomenclatura de archivos
1. Cada directorio debe contener un archivo html predeterminado y el nombre del archivo debe ser index.htm
2. Los nombres de los archivos deben ser 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:
☆ 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.
5. Los principios de denominación de imágenes siguen los siguientes estándares:
☆ 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.
☆La parte de la cola se utiliza para expresar el significado específico de la imagen.
☆ Aquí hay algunos ejemplos. Debería poder comprender 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]
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