O layout da página CSS também pode ser considerado um trabalho sistemático. O desenvolvimento do site DIVCSS pode ser realizado por várias pessoas em colaboração e por uma equipe. Isso envolve muitas questões normativas de operação. é necessário conhecimento organizado e padronizado, este é um artigo reimpresso do Blue, que é muito eficaz. O autor resumiu muita experiência prática e todos podem consultá-lo e aprender com ele.
Visão geral
Esta especificação é uma especificação de desenvolvimento e uma referência de linguagem de script. Esta especificação não é uma disposição imutável que deve ser estritamente observada. Ela deve ser usada com flexibilidade e certas modificações feitas em circunstâncias especiais. No entanto, não altere as especificações à vontade. Se você tiver alguma dúvida, entre em contato comigo a tempo e alterarei imediatamente os exemplos de código e documentos relevantes desta especificação.
Requisitos básicos
1. Abra três subdiretórios de imagens temporárias comuns no diretório raiz do site e abra um subdiretório de mídia conforme necessário. O diretório de imagens contém imagens públicas que são usadas por páginas em diferentes colunas, como logotipos de empresas, banners e. menus., botões, etc.; o subdiretório comum contém arquivos públicos como css, js, php, include, etc.; o subdiretório temporário contém vários textos, imagens e outros materiais originais fornecidos pelos clientes; avi, quick time, etc. Arquivos multimídia.
2. Em princípio, um diretório deve ser aberto para cada coluna do diretório raiz de acordo com a estrutura de colunas da página inicial. Se necessário, um subdiretório de imagens e mídia deve ser aberto no diretório de cada coluna para colocar as imagens e mídia. exclusivo para esta coluna Para arquivos multimídia, se esta coluna tiver muito conteúdo e estiver dividida em muitas colunas subordinadas, outros diretórios poderão ser abertos de acordo.
3. Muitas vezes há muitos arquivos no diretório temporário. Recomenda-se abrir um diretório com o nome de hora para classificar e organizar as informações fornecidas pelos clientes, uma após a outra.
4. A menos que haja circunstâncias especiais, todos os nomes de diretórios e arquivos devem usar uma combinação de letras minúsculas em inglês, números e sublinhados chineses, espaços e caracteres especiais não devem ser incluídos. diretórios. Não use pinyin a menos que seja absolutamente necessário. Como nome de diretório, a experiência provou que diretórios nomeados com pinyin são frequentemente incompreensíveis para você um mês depois.
Ao escrever scripts
,devemos ter um conceito consistente do estilo geral do script. o que significa que você o escreveu um mês depois e um mês atrás. O estilo de script permanece consistente, assim como o estilo de script escrito por diferentes desenvolvedores no mesmo grupo de trabalho, porque não podemos desenvolver isoladamente para sempre e você pode estar sempre trabalhando. consigo mesmo há três meses (seu cliente solicitou uma revisão), muitas vezes você precisa co-desenvolver um projeto com diferentes colegas no estúdio e pode ser solicitado a modificar roteiros desenvolvidos por pessoas que se demitiram. deixe um projeto para colegas subsequentes.
1. Modelo universal para arquivos HTML:
div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.52css.com]
<html>
<!–
Gerador: Sub Design Studio ( www.eastline.net.cn )
Dados de criação: 2000-8-1
Autor original: Eastline
->
<cabeça>
<title>Título do documento</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="author" content="eastline">
Outras meta tags
div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.52css.com]
<link rel="stylesheet" type="text/css" href="style/style.css">
Cliente de definição de folha de estilo Definição de função Javascript e operação de inicialização
div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.52css. ]
</head>
<body bgcolor="#ffffff">
… …
</body>
Adicionado:
Para garantir que o site seja compatível com a próxima geração de padrões XML de linguagem web, todos os atributos da tag HTML devem ser colocados entre aspas simples ou duplas, ou seja, devemos escrever <a href="url"> em vez de < a href=url >.
2. Para páginas que permitem a recuperação de texto completo, para permitir uma recuperação eficaz pelos motores de busca na Internet, as meta tags Keywords e Description devem ser adicionadas entre o <head></head> do html. na página inicial do canal, por exemplo:
div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.52css.com]
<meta name=”palavras-chave” content=”Oriental Shinkansen, carros, compra de carros”/>
<meta name=”description” content=”Nova Linha Oriental Kanjin, a primeira parada do mundo para informações sobre carros chineses”/>
3. Código de amostra de formato de arquivo CSS:
div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.52css com. ]
<style type="texto/css">
<!—
p {recuo do texto: 2em};
corpo {família da fonte: "宋体"; tamanho da fonte: 9pt; margem superior: 0px; margem inferior: 0px;
tabela {família de fontes: "宋体"; tamanho da fonte: 9pt; altura da linha: 20px cor: #000000}
a:link { tamanho da fonte: 9pt cor: #FFFFFF; decoração de texto: nenhum}
a:visitado {tamanho da fonte: 9pt cor: #99FFFF;
a:hover {tamanho da fonte: 9pt cor: #FF9900;
a:ativo {tamanho da fonte: 9pt cor: #FF9900;
a.1:link { tamanho da fonte: 9pt; cor: #3366cc;
a.1:visitado { tamanho da fonte: 9pt; cor: #3366cc;
a.1:hover { tamanho da fonte: 9pt; cor: #FF9900;
a.1:ativo {tamanho da fonte: 9pt cor: #FF9922;
.blue {família de fontes: "宋体"; tamanho da fonte: 10,5pt; altura da linha: 20px;
->
</style>
O que deve ser particularmente observado aqui é que a ordem de a:link a:visited a:hover a:actived deve estar estritamente de acordo com o código de exemplo acima, caso contrário ocorrerão mais ou menos problemas. Além disso, estipulamos que a redefinição vem em primeiro lugar, as pseudoclasses vêm em segundo lugar e a personalização vem em último lugar, facilitando a leitura para você e para os outros!
Para garantir que o tamanho da fonte seja consistente em diferentes navegadores, é recomendado definir o tamanho da fonte em pontos pt e pixels. px pt geralmente usa 9pt e 11pt na dinastia Song chinesa, e px geralmente usa 12px e 14,7px em chinês. Songti. Este é um tamanho de fonte otimizado, negrito ou fontes Song em negrito, tamanhos de fonte de 11pt e 14,7px são geralmente mais apropriados.
Ao escrever <table> para aninhar um ao outro, siga estritamente o padrão. Para um único <table>, <table><tr> deve estar alinhado, <td> deve ser recuado por dois espaços de meia largura e, se houver algum. other Para tabelas aninhadas, <table> também é recuado por dois espaços de meia largura. Se não houver tabela aninhada em <td>, a tag de fechamento de </td> deverá estar na mesma linha de <td>, sem linha. quebras.
Como observamos em Não deve haver tal código no código-fonte:
div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.52css.com]
<td><img src=”../images/sample.gif”>
</td>
Deveria ser assim:
div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.52css.com]
<td><img src=”../images/sample.gif”></td>
Isso ocorre porque o navegador pensa que uma nova linha é equivalente a um espaço de meia largura. O método de escrita irregular acima é equivalente a adicionar involuntariamente. um espaço de meia largura If É realmente necessário adicionar um espaço de meia largura e deve ser escrito assim:
div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.52css.com]
<td><img src=”../images/sample.gif”> </td>
<table> pertencentes ao mesmo nível devem ser alinhados à esquerda e células vazias sem qualquer conteúdo não podem existir. uma altura maior ou igual a 12px deve ser escrita entre <td> e </td> Se a altura for menor que 12px, um gif transparente de tamanho 1*1 deve ser inserido entre <td> e </td> Imagem, isso ocorre porque alguns navegadores consideram as células vazias ilegais e não as interpretam. Se a ordem do código for caótica, você pode reorganizá-la através do comando-> aplicar formatação de fonte no DW3!
5. Também existem padrões unificados sobre como escrever largura e altura. Geralmente, para tabelas com apenas uma coluna, a largura é escrita na tag <table>; ; para tabelas com múltiplas linhas e múltiplas colunas Tabela, largura e altura são escritas na tag <td> da primeira linha ou coluna. Resumindo, siga um princípio: não deve haver mais de uma altura e largura que controlem o tamanho da mesma célula. Certifique-se de que qualquer largura e altura sejam válidas. código, deve estar em As alterações são vistas no navegador. Não é fácil fazer isso, requer muito tempo de prática e reflexão.
Princípios gerais
1. Antes de organizar as tabelas, pense cuidadosamente sobre a melhor solução. Tente controlar o aninhamento das tabelas em três níveis e evite as duas tags <colspan> e <rowspan>. muitos problemas.
2. Uma página da web deve tentar evitar o uso de uma tabela grande inteira. Todo o conteúdo é aninhado nesta tabela grande, porque quando o navegador interpreta os elementos da página, ele os exibe um por um em unidades de tabelas. Se for colocado em uma tabela grande, a consequência provável é que quando o visitante digitar a URL, ele primeiro ficará um longo tempo diante de um espaço em branco, e então todo o conteúdo da web aparecerá ao mesmo tempo. Se você precisar fazer isso, use a tag <tbody> para que a tabela grande possa ser exibida em partes.
3. Na composição tipográfica, frequentemente encontramos a necessidade de recuar a primeira linha. Não use espaços de largura total para obter o efeito. adicione cada tag de parágrafo <p>, observe que, em circunstâncias normais, não omita a tag de fechamento </p>.
4. Em princípio, proibimos o uso de <img width=? height=?> para interferir artificialmente no tamanho da exibição da imagem, e é recomendado não incluir os atributos de largura e altura na tag <img>. durante o processo de produção, a imagem Muitas vezes requer modificações repetidas, o que pode evitar a intervenção humana no tamanho da exibição da imagem e maximizar as funções do próprio navegador, porém, um efeito colateral disso é que quando a página da web não carrega a imagem; , o tamanho da imagem do site não será reservado. Isso pode causar tremores na página durante o carregamento (se a imagem for inserida em uma tabela de tamanho fixo, esse fenômeno não ocorrerá), principalmente quando o tamanho da imagem for. grande, esse fenômeno será óbvio, portanto, quando esperado Quando ocorrer essa situação que obviamente causará instabilidade na página da web, certifique-se de anexar os atributos de largura e altura a <img> no final.
5. Para maximizar a função de composição tipográfica automática do navegador, tente não usar <br> para intervir manualmente na segmentação de um texto completo.
6. Deve haver um espaço de meia largura entre as palavras em diferentes idiomas, exceto antes do símbolo do cabeçalho e depois do símbolo da cauda. A pontuação entre os caracteres chineses deve ser de largura total e os colchetes ao redor das letras e números em inglês devem usar metade. - colchetes de largura.
7. Todos os tamanhos de fonte devem ser implementados usando folhas de estilo, e tags <font size=?> são proibidas de aparecer na página.
8. Por favor, não tenha mais de um espaço consecutivo na página da web e use o mínimo possível de espaços de largura total (no conjunto de caracteres em inglês, espaços de largura total se tornarão caracteres distorcidos. Use recuo de texto, preenchimento, margem). , hspace, vspace e transparência para obter imagens gif de espaço em branco.
9. Ao misturar chinês e inglês, tentamos ao máximo definir o inglês e os números como fontes verdana e arial.
10. Recomenda-se usar uma porcentagem para definir o espaçamento entre linhas. Os dois valores de espaçamento entre linhas comumente usados são altura da linha: 120%/150%.
11. Todos os caminhos no site usam caminhos relativos e geralmente vinculam ao. arquivo padrão em um determinado diretório O caminho do link não precisa ser o nome completo. Por exemplo, não precisamos fazer isso: <a href=”aboutus/index.htm”> mas deve ser assim: <a. href=”aboutus/”>
12. Recomenda-se usar fontes maiores ao incorporar texto gráfico. Não inclua texto em gráficos.
13. "Tamanho da página da Web" é definido como a soma dos tamanhos dos arquivos de todas as páginas da Web, incluindo arquivos HTML e todos os objetos incorporados. Os usuários preferem sites que sejam rápidos em vez de novos. Para usuários de modem, é apropriado manter o tamanho da página abaixo de 34K.
Princípios de nomenclatura de arquivos
1. Cada diretório deve conter um arquivo html padrão e o nome do arquivo deve ser index.htm
2. Os nomes dos arquivos devem ser uma combinação de letras minúsculas, números e sublinhados.
3. A ideologia orientadora do princípio de nomenclatura é permitir que você e todos os membros do grupo de trabalho entendam facilmente o significado de cada arquivo. A segunda é que quando usamos o comando “classificar por nome” em uma pasta, o mesmo Grande. categorias de arquivos podem ser organizadas juntas para que possamos pesquisar, modificar, substituir, calcular carga, etc.
4. A coluna "Notícias" (incluindo "Notícias Domésticas" e "Notícias Internacionais") é usada a seguir para explicar o princípio de nomenclatura dos arquivos HTML:
☆ Crie um diretório de notícias no diretório raiz ☆ O primeiro item de notícias padrão é denominado index.htm
☆ Todas as notícias pertencentes a "notícias nacionais" são nomeadas em ordem: china_1.htm, china_2.htm,…
☆ Todas as notícias pertencentes a "Notícias Internacionais" são nomeadas em ordem: internacional_1.htm, internacional _2.htm,…
☆ Se o número de arquivos tiver dois dígitos, nomeie os primeiros nove arquivos: china_01.htm, china_02.htm para garantir que todos os arquivos possam ser classificados corretamente na pasta.
5. Os princípios de nomenclatura das imagens seguem os seguintes padrões:
☆ O nome é dividido em duas partes, a primeira e a última, separadas por sublinhados.
☆ A parte do cabeçalho indica a natureza geral da imagem, como anúncio, logotipo, menu, botão, etc.
☆ De modo geral:
Chamamos as imagens retangulares, como anúncios e padrões decorativos colocados no topo da página: banner
Chamamos a imagem icônica de: logo
Nomeamos a pequena imagem com um link que não está fixo no botão da página
Nomeamos as imagens das colunas de links que aparecem continuamente em uma determinada posição da página e têm a mesma natureza: menu
Nomeamos a foto para decoração: pic
Nomeamos a imagem sem link para indicar o título: título
Siga este princípio e assim por diante.
☆A parte final é usada para expressar o significado específico da imagem.
☆ Aqui estão alguns exemplos. Você deve ser capaz de entender o significado das imagens rapidamente:
div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.52css.com]
banner_sohu.gif
banner_sina.gif
menu_aboutus.gif
menu_job.gif
title_news.gif
logo_police.gif
logo_nacional.gif
pic_pessoas.jpg
pic_hill.jpg