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

Question

Я создаю новый веб-сайт на основе технологии Grails.

Что касается графического дизайна моего веб-сайта, я планирую использовать услуги профессионального веб-дизайнера, но в то же время мне нужно самому заняться основами графического дизайна, чтобы иметь «удобную» бета-версию.

Я прочитал сайт stackoverflow.com, но не мог определиться. Вот что я узнал: как-ду-ты-выбор-а-CSS-каркас , что-это-The-лучший CSS-сетка-основа может кто--рекомендую-а-колокольчики-и-свистки-CSS-каркас , что-это-The-лучший CSS-каркасного и-в-они-стоит-The-усилие

Но, к сожалению, есть много противоречивых ответов. Во-первых, некоторые говорят, что использование CSS-фреймворка - это обратная авторизация, и это не очень хорошая вещь. Другие советы YUI Grids, BluePrint, 960 GS, YAML ... И многие говорят, что Compass позволяет разрабатывать макеты CSS легко и многократно.

Итак, учитывая, что:

• Я новичок в мире CSS и не собираюсь быть веб-дизайнером
• Мой макет должен быть удобен для пользователя (но не обязательно, потрясающий L & F)
• Он должен быть обслуживаемым и легко улучшаемым (профессиональным веб-дизайнером)
• Простота реализации (для быстрого получения чего-либо)

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

Спасибо за советы.

Фабьен

Answer 1

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

Тогда есть одна вещь, которую вам нужно знать, и еще две, которую вам нужно проработать:

1. весь HTML должен быть написан семантически и корректно: семантически = правильно упорядоченные заголовки, списки, без лишних разделов и т. Д .; 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;}, а затем собираю отступы и поля обратно везде, где это необходимо - до сих пор проблем не было: -)

Answer 2

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

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

Основной CSS использует:

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

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

Answer 3

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

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

И Grid 960 также имеет несколько приятных макетов (поиск по их сайту в Google)

Answer 4

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

Answer 5

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

CSSEdit (только для Mac) - хорошее решение для написания каскадных листов, простое в использовании, не дорогостоящее и обладающее широкими возможностями.

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

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

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

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