Какие инструменты CSS (фреймворк, система сеток, IDE, ..) мне нужны для начала веб-дизайна?

Во-первых, если вы не собираетесь быть веб-дизайнером, я бы предложил передать ваш CSS на аутсорсинг. Есть несколько веб-сайтов, на которых вы можете предоставить HTML или дизайн Photoshop и хорошо его закодировать под гранд (1к). Или бесплатно получите дизайн HTML / CSS.

Затем вам нужно знать одно, а над двумя другими нужно работать:

1. весь HTML должен быть написан семантическим и корректным образом: семантический = правильно упорядоченные заголовки, списки, отсутствие лишних div и т. д .; valid = пройдет валидационные тесты WC3. Ничто из этого не является ракетостроением, но все же это навык, которому нужно научиться. Transcending CSS по семантике HTML / CSS. Для простоты обслуживания HTML и CSS должны быть аккуратными, с одинаковыми отступами и т. Д.

2. вам необходимо определить, понадобятся ли вам серверная часть администратора и база данных для управления контентом, или вы просто создаете сайт, состоящий из статических страниц (то есть файлов html и css, изображений и других носителей и т. д.). Если первое, то это совсем другая кривая обучения :-)

3. какие у тебя лучшие навыки? Если вы хороший дизайнер, попросите других написать HTML / CSS или используйте готовый шаблон (их много в Интернете) и настройте его. Вот хорошее начало для макетов с несколькими столбцами. Если вы программист, научитесь использовать фреймворк вроде Django (Python), Titanium (Perl), что-то меньшее на Ruby (потому что Ruby on Rails для начала немного велик) или на вашем любимом языке.

Хороший CSS - это ремесло, а простота - его суть, но если вы хотите научиться достаточно, чтобы начать работу, я бы посоветовал:

1. понимать наследование («каскад» в CSS) и тот факт, что что угодно может быть «блоком», поэтому не используйте много вложенных div только для применения стиля. Вместо этого примените стиль к самому элементу HTML или к элементу только тогда, когда он появляется в родительском блоке (например, неупорядоченный список меню, содержащийся в div боковой панели);

2. узнать о блочных и встроенных элементах (Веб-дизайн с нуля - отличный учебный ресурс, и я бы рекомендовал его), и что CSS может изменить это поведение;

3. протестируйте в Firefox, затем проверьте в Internet Explorer. > = IE7 не так уж и плох (но обратите внимание на HasLayout). То, что вы не можете настроить правильно в IE, используйте условные комментарии, чтобы добавить CSS. что может видеть только IE - никогда не используйте хаки CSS - .htc файлы, которые добавляют недостающие функциональные возможности IE (например, стили наведения курсора на любой элемент);

4. узнайте о CSS-позиционировании и экономно используйте «фиксированное»;

5. поместите весь свой CSS в один файл (для начала) и не используйте встроенный CSS в HTML;

6. стилизация форм и полей формы почти отдельный навык :-)

Используйте фоновые изображения для добавления стиля, но также помните, что вы можете смещать и перекрывать изображения, используя позиционирование. Однако вам нужно будет использовать PNG для хорошей прозрачности. Ах да, и opacity выглядит неплохо, но пока требуется нестандартный CSS. хотя широко поддерживается более гибкий метод rgba (a = alpha). Как и закругленные углы, но оба варианта стоит использовать.

На данный момент я бы избегал фреймворков и сбросов CSS - они усложнят ситуацию на этом этапе, добавив еще один DSL для изучения (но прочтите аргументы и за и против). Чтобы избежать раздражающих полей и отступов по умолчанию, я всегда сбрасываю все, выполняя html *, body * {margin: 0; padding 0;}, а затем возвращаю отступы и поля туда, где это необходимо - до сих пор никогда не было проблемой :-)

Что вы мне посоветуете для начала работы с веб-дизайном моего сайта?

Получите плагин Firebug для Firefox прямо сейчас!

Первичный CSS использует:

• Посмотрите, какие правила CSS применяются
• Измените CSS в реальном времени и посмотрите на результат
• Изучите другие веб-сайты, чтобы узнать, как они работают

Я не смог бы разрабатывать CSS (и другие веб-технологии) без этого инструмента.

Взгляните на YUI CSS reset / base / font / grid

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

И у Grid 960 также есть несколько хороших макетов (ищите их сайт в google)

Я не знаю, какую ОС вы используете, но если вы пользователь Mac, я предлагаю отличный бесплатный инструмент для CSS: Xyle Scope. Это не редактор, а средство просмотра / сканирования CSS, оно позволяет вам легко просматривать CSS-код любой веб-страницы, чтобы вы могли лучше узнать, как работает css, и проанализировать любой хорошо сделанный макет в Интернете.

CSSEdit (только для Mac) - хорошее решение для написания таблиц Cascade, простое в использовании, недорогое и доступное функций.

Fireworks: Я считаю, что это отличная программа для создания макетов и хорошей графики!

Dreamweaver: это комплексное решение для веб-разработки ... это действительно отличный инструмент, позволяющий легко синхронизировать удаленную версию веб-сайта с локальной.

Coda (только для Mac) - очень хорошая альтернатива Dreamweaver, даже если она не позволяет вам управлять и редактировать файлы .htaccess!

Для кодирования вашего веб-сайта я предлагаю Dreamweaver или Coda, но другой хорошей альтернативой является BBEdit (только для Mac).

Bootstrap, это лучший фреймворк css, который я могу предложить, есть еще один под названием foundation, но я предпочитаю bootstrap, так как он популярен среди разработчиков и расширяем. Есть еще несколько других фреймворков, я написал об этом в блоге. Прочтите также, если хотите http://www.andwecode.com/freebies/5-responsive-css-frameworks :)