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. Resumo Esta especificação é tanto uma especificação de desenvolvimento quanto 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, em seguida, 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, menus,. e 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; flash, avi, tempo rápido, etc. 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 nomeado por hora para classificar e organizar as informações fornecidas pelos clientes, uma após a outra. 4. A menos que haja circunstâncias especiais, os nomes de diretórios e arquivos devem usar uma combinação de letras minúsculas em inglês, números e sublinhados, espaços e caracteres chineses 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 difíceis de entender mesmo um mês depois. Scripts Devemos ter um conceito consistente do estilo geral do roteiro, o que significa que o estilo do roteiro que você escreveu um mês depois é consistente com o estilo do roteiro que você escreveu há um mês, e que o estilo do roteiro escrito por diferentes desenvolvedores no mesmo grupo de trabalho é consistente, porque não podemos Desenvolver isoladamente para sempre, você pode estar colaborando consigo mesmo há três meses a qualquer momento (seu cliente requer uma revisão), muitas vezes você tem que desenvolver um projeto com diferentes colegas no estúdio, e você também pode ser solicitado a modificar pessoas que renunciaram aos scripts desenvolvidos, é claro, você também pode deixar 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] Outras metatags div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.52css.com] A folha de estilo define a definição da função Javascript do lado do cliente e a operação de inicialização div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.52css.com] Reabastecer: 2. Para páginas que permitem a recuperação de texto completo, a fim de 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] 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] O que precisa de atenção especial 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, não deveria 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] Em vez disso, deveria ficar assim: div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.52css.com] 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 um espaço de meia largura involuntariamente. Se for realmente necessário adicionar um espaço de meia largura, deve ser. escrito assim: div css xhtml xml Exemplo de código-fonte Exemplo de código-fonte [www.52css.com] <table> pertencentes ao mesmo nível devem ser alinhados à esquerda. Além disso, células vazias sem qualquer conteúdo não podem existir. Células com altura de 12px ou mais devem ser escritas entre <td> e </td>. a altura é menor que 12px, uma imagem gif transparente 1*1 deve ser inserida entre <td> e </td> Isso ocorre porque alguns navegadores consideram 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 apenas uma linha, a altura é 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 a tabela, pense cuidadosamente sobre a melhor solução. Tente controlar o aninhamento das tabelas em três níveis e tente evitar as duas tags <colspan> <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 de exibição da imagem, e é recomendado não incluir largura e altura na tag <img> Dois atributos: isso ocorre porque durante o processo de produção, as imagens geralmente precisam ser modificadas repetidamente. Isso pode evitar a intervenção humana no tamanho da exibição da imagem e maximizar as funções do próprio navegador. a página não carregou a imagem, quando a imagem for adicionada, o tamanho da imagem do site não será deixado de fora, o que pode fazer com que a página da web seja Jitter 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, então quando se espera que isso seja óbvio Quando Se a situação que causa instabilidade na página da Web ocorrer, certifique-se de anexar a largura a <img> no final. e atributo de altura. 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 definir o espaçamento entre linhas em porcentagem. 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 Geralmente, o caminho do link para o arquivo padrão em um determinado diretório não precisa ser escrito no nome completo. Por exemplo, não precisamos fazer isso: <a href=. ”aboutus/index.htm”> mas deveria ser assim:<a href=”aboutus/”> 12. Use fontes maiores ao incorporar texto em gráficos. É recomendado não incluir 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. Regras 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. O nome do arquivo deve usar 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: 5. Os princípios de nomenclatura das imagens seguem os seguintes padrões: ☆A parte final é usada para expressar o significado específico da imagem. ☆ Aqui estão alguns exemplos. Você deve ser capaz de entender rapidamente o significado das imagens: 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="autor" content="eastline">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body bgcolor="#ffffff">
… …
</body>
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 >.
<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 automóveis chineses”/>
<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;
->
</estilo>
<td><img src=”../images/sample.gif”>
</td>
<td><img src=”../images/sample.gif”></td>
<td><img src=”../images/sample.gif”> </td>
☆ 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.
☆ 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.
banner_sohu.gif
banner_sina.gif
menu_aboutus.gif
menu_job.gif
título_notícia.gif
logo_police.gif
logo_nacional.gif
pic_pessoas.jpg
pic_hill.jpg