Que ferramentas CSS (quadro, grades sistema, IDE, ..) que eu preciso para começar web design?

Question

Eu estou construindo um novo site baseado na tecnologia Grails.

Em relação ao design gráfico do meu site, eu pretendo usar serviços de um web designer profissional, mas enquanto isso, eu preciso fazer algumas noções básicas gráfica me projetar para ter uma versão beta "user-friendly".

Eu li através do site stackoverflow.com mas não poderia fazer a minha mente. Aqui está o que eu descobri: how-do-you-escolha-a-css-quadro que-é-o-melhor-css-grid-quadro pode-alguém, recomendo-a-bells-and-whistles- css-quadro o que é-the-best- css-estrutura de e-é-que-vale a pena o esforço

Mas, infelizmente, há muitas respostas contraditórias. Primeiro, alguns dizem que o uso de quadro CSS está para trás autoria e não uma coisa boa. Outros conselhos YUI Grids, modelo, 960 gs, YAML ... e muitos dizem que Compass permite desenvolver layouts CSS facilmente e reutilizável.

Assim, considerando que:

• Eu sou novo para o mundo do CSS e eu não pretendo ser um web designer
• O meu layout deve ser user-friendly (mas não é necessário incrível L & F)
• Deve ser maintanable e facilmente improvable (por um web designer professionnal)
• Fácil de implementar (a fim de ter algo rapidamente)

O que você aconselhar-me para começar a trabalhar com o web design do meu site?

Obrigado por seus conselhos.

Fabien

Answer 1

Em primeiro lugar, se você não pretende ser um web designer, eu sugiro a terceirização de seu CSS. Existem vários sites onde você pode abastecimento de HTML ou um design Photoshop e tê-lo codificado -se para o bem sob uma grande (1k). Ou get HTML / CSS projeta livre .

Em seguida, há uma coisa que você precisa saber e outros dois que você precisa para trabalhar fora:

1. todo o HTML deve ser escrito de uma forma semântica e válido: semânticas = títulos devidamente ordenadas, listas, sem excessiva divs etc .; = Válidos vai passar por testes de validação WC3. Nada disso é ciência de foguetes, mas ainda é uma habilidade que precisa ser aprendida. Andy Clarke do Transcending CSS é um grande livro sobre semântica HTML / CSS. Para facilitar a manutenção, o HTML e CSS deve ser arrumado e consistente recuado, etc.

2. que você precisa para determinar se você vai precisar de um backend admin e banco de dados para gerenciamento de conteúdo, ou se você está apenas a construção de um site que consiste de páginas estáticas (arquivos ou seja, HTML e CSS, imagens e outras mídias etc. .). Se for o primeiro, que é uma outra curva de aprendizagem todo: -)

3. quais são as suas melhores habilidades? Se você é um bom designer, obter outras pessoas para escrever o HTML / CSS, ou usar um modelo ready-made (existem muitos na web) e personalizá-lo. Aqui está um bom começo para layouts de várias colunas . Se você é um programador, aprender a usar um framework como o Django (Python), Titanium (Perl), algo menor em ruby ?? (porque ruby ??on Rails é um pouco grande para começar) ou um em seu idioma preferido.

Boa CSS é um ofício, e simplicidade é a essência, mas se você quiser aprender o suficiente para começar, o meu conselho seria:

1. entender herança (a 'cascata' em CSS) eo fato de que qualquer pode ser um 'block', então não usar muita divs aninhados apenas para aplicar um estilo. Em vez disso, aplicar o estilo ao próprio elemento HTML, ou para o elemento somente quando ele aparece em um bloco pai (como uma lista desordenada de menu contido em um div barra lateral);

2. bloco e elementos inline ( web design from scratch é um grande recurso de aprendizagem e eu recomendá-lo), e que CSS pode alterar esse comportamento;

3. teste no Firefox, então teste no Internet Explorer. > = Do IE7 não é tão ruim (mas olhar para hasLayout ). O que você não pode ajustar para obter direito de IE, uso condicional comentários para adicionar CSS que só IE pode ver - nunca usar CSS hacks - .htc arquivos que add faltando funcionalidade IE (por exemplo, estilos de rolagem em qualquer elemento) estão disponíveis;

4. CSS posicionamento e uso moderação 'fixo';

5. colocar todo o seu CSS em um arquivo (para iniciantes), e não usar CSS embutido no HTML;

6. denominam formas e os campos do formulário é quase uma habilidade separada: -)

Use imagens de fundo para adicionar estilo, mas também entendo que você pode compensar e imagens de sobreposição usando posicionamento. Você vai precisar usar PNGs para boa transparência, no entanto. Oh sim, e opacidade parece bom, mas requer não-padrão CSS por agora. embora o mais flexível rgba (a = alfa) método é amplamente suportado. Como fazem cantos arredondados , mas ambos vale a pena usar.

Eu gostaria de evitar quadros CSS e redefinições por enquanto - que vai complicar as coisas nesta fase, adicionando mais uma DSL para aprender (mas ler os argumentos e prós e contras ). Para evitar margens padrão irritantes e estofamento, eu sempre tudo de reset fazendo html *, body * {margin: 0; padding 0;} seguida, preenchimento de construção e as margens de volta em onde for necessário - nunca foi um problema até agora: -)

Answer 2

O que você aconselhar-me para começar a trabalhar com o web design do meu site?

Firebug plugin para o Firefox agora!

usa CSS primário:

• Veja quais as regras CSS aplicar
• Alterar CSS em tempo real e ver o efeito
• Verifique outros sites para ver como eles fazem as coisas

Eu não seria capaz de desenvolver CSS (e outras tecnologias web relacionadas) sem esta ferramenta

Answer 3

Dê uma olhada em YUI redefinir CSS / base / font / grade

http://developer.yahoo.com/yui/3/cssreset/

E Grade 960 também tem alguns layouts agradáveis ??(procurar o seu site no Google)

Answer 4

Eu não sei o que OS você está executando, mas se você é um usuário Mac, sugiro uma ótima ferramenta gratuita para CSS: Xyle Âmbito . Não é um editor, mas um visualizador de CSS / scanner, que permitem que você navegue facilmente o código CSS de qualquer página web para que você possa aprender melhor como funciona o CSS e você pode analisar qualquer layout bem feito na web.

CSSEdit (Apenas Mac) é uma boa solução para a escrita folhas Cascade, fácil de usar, não é caro , e chegar de recursos.

Fogos de artifício: Eu acho que é um grande software para elaborar seus layouts e fazer algumas boas obras gráficas

Dreamweaver:. É um tudo em uma solução para desenvolvimento web ... é realmente um grande ferramenta para manter facilmente sincronizado sua versão remota do site com o seu local um

Coda (Apenas Mac) é uma alternativa muito boa para o Dreamweaver, mesmo que não permitem que você gerenciar e editar os arquivos .htaccess!

Para a codificação seu site sugiro Dreamweaver ou Coda, mas uma outra boa alternativa é BBEdit (Mac Only).

Answer 5

Bootstrap, É o melhor quadro css que eu posso sugerir, há um outro chamado fundação também, mas eu prefiro inicialização mais uma vez que é popular entre os desenvolvedores e é extensível. Existem mais alguns outros frameworks, eu escrevi um blog sobre isso, aqui Leia-o também se quiser http://www.andwecode.com/freebies/5-responsive-css-frameworks :)