Какие инструменты CSS (фреймворк, система grids, IDE, ..) мне нужны для начала веб-дизайна?
-
06-07-2019 - |
Вопрос
Я создаю новый веб-сайт, основанный на технологии Grails.
Что касается графического дизайна моего веб-сайта, я планирую воспользоваться услугами профессионального веб-дизайнера, но пока мне нужно самому освоить некоторые основы графического дизайна, чтобы иметь "удобную" бета-версию.
Я прочитал сайт stackoverflow.com, но не смог принять решение.Вот что я выяснил:как-вы-выбираете-css-фреймворк какой-самый-лучший-css-grid-фреймворк может-кто-нибудь-порекомендовать-навороченный-css-фреймворк какой-самый-лучший-css-фреймворкистоятлионизатраченныхусилий
Но, к сожалению, существует много противоречивых ответов.Во-первых, некоторые говорят, что использование CSS framework - это обратная разработка, и это не очень хорошо.Другие советуют YUI Grids, BluePrint, 960 gs, YAML ... И многие говорят, что Compass позволяет легко разрабатывать CSS-макеты и использовать их повторно.
Итак , учитывая , что:
- Я новичок в мире CSS и не собираюсь становиться веб-дизайнером
- Мой макет должен быть удобным для пользователя (но не обязательно потрясающим L & F).
- Он должен быть обслуживаемым и легко совершенствуемым (профессиональным веб-дизайнером).
- Легко внедряется (для того, чтобы быстро получить что-то)
Что бы вы посоветовали мне для начала работы с веб-дизайном моего сайта?
Спасибо вам за ваши советы.
Fabien
Решение
Во-первых, если вы не собираетесь быть веб-дизайнером, я бы предложил передать ваш CSS на аутсорсинг.Есть несколько веб-сайтов, где вы можете предоставьте HTML-код или дизайн Photoshop и закодируйте его стоит значительно меньше штуки (1 тысяча).Или получите бесплатный дизайн HTML / CSS.
Тогда есть одна вещь, которую вам нужно знать, и еще две, которые вам нужно проработать:
весь HTML-код должен быть написан семантически и корректно:семантика = правильно упорядоченные заголовки, списки, отсутствие избыточных разделений и т.д.;valid = пройдет валидационные тесты WC3.Ничто из этого не является ракетостроением, но все же это навык, которому необходимо научиться.У Энди Кларка Выход за рамки CSS это отличная книга по семантическому HTML/CSS.Для удобства обслуживания HTML и CSS должны быть аккуратными, с последовательными отступами и т.д.
вам нужно определить, понадобится ли вам серверная часть администратора и база данных для управления контентом, или вы просто создаете сайт, состоящий из статических страниц (т.е.файлы html и css, изображения и другие носители информации и т.д.).Если это первое, то это совершенно другая кривая обучения :-)
каковы ваши лучшие навыки?Если вы хороший дизайнер, попросите других людей написать HTML / CSS или используйте готовый шаблон (в Интернете их много) и настройте его.Вот хорошее начало для многоколоночных макетов.Если вы программист, научитесь использовать такой фреймворк, как Джанго (Python), Титан (Perl), что-то меньшее в Ruby (потому что Ruby on Rails немного великоват для начала) или на вашем любимом языке.
Хороший CSS - это ремесло, а простота - это суть, но если вы хотите узнать достаточно, чтобы начать, мой совет был бы следующим:
понимать наследование ("каскад" в CSS) и тот факт, что что угодно может быть "блоком", поэтому не используйте множество вложенных divs только для применения стиля.Вместо этого примените стиль к самому HTML-элементу или к элементу только тогда, когда он появляется в родительском блоке (например, неупорядоченный список меню, содержащийся в разделе боковой панели);
узнайте о блочные и встроенные элементы (Веб-дизайн с нуля это отличный учебный ресурс, и я бы рекомендовал его), и что CSS может изменить это поведение;
протестируйте в Firefox, затем протестируйте в Internet Explorer.>= IE7 не так уж плох (но следите за Описание).То, что вы не можете настроить, чтобы получить правильные результаты в IE, используйте условные комментарии чтобы добавить CSS, который может видеть только IE - никогда используйте CSS-хаки - файлы .htc которые добавляют недостающую функциональность IE (напримердоступны стили ролловера для любого элемента);
узнайте о Позиционирование CSS, и используйте "исправлено" экономно;
поместите весь ваш CSS в один файл (для начала) и не используйте встроенный CSS в HTML;
формы для укладки а формировать поля - это почти отдельный навык :-)
Используйте фоновые изображения для придания стиля, но также имейте в виду, что вы можете смещать и перекрывать изображения с помощью позиционирования.Однако вам нужно будет использовать PNGS для обеспечения хорошей прозрачности.О да, и еще непрозрачность выглядит мило, но требуется нестандартный CSS на данный момент.хотя более гибкий rgba метод (a= alpha) широко поддерживается.Как это сделать закругленные углы, но и то, и другое стоит использовать.
Я бы пока избегал CSS-фреймворков и перезагрузок - они усложнят ситуацию на этом этапе, добавив еще один DSL для изучения (но прочтите аргументы и тот плюсы и минусы).Чтобы избежать раздражающих полей и отступов по умолчанию, я всегда все сбрасываю, выполняя html *, body * {margin: 0; padding 0;}
затем верните отступы и поля туда, где это необходимо - до сих пор это никогда не было проблемой :-)
Другие советы
Что вы посоветуете мне, чтобы начать работу над веб-дизайном моего сайта?
Получать поджигатель плагин для Firefox прямо сейчас!
Основной CSS использует:
- Посмотрите, какие правила CSS применяются
- Измените CSS в реальном времени и увидите эффект
- Проверяйте другие веб-сайты, чтобы узнать, как они работают.
Я бы не смог разрабатывать CSS (и другие веб-технологии) без этого инструмента.
Взгляните на сброс YUI CSS/base/font/grid.
http://developer.yahoo.com/yui/3/cssreset/
И у Grid 960 тоже есть несколько хороших макетов (поищите их сайт в Google)
Я не знаю, какую ОС вы используете, но если вы пользователь Mac, я предлагаю отличный бесплатный инструмент для CSS: Ксил Сфера.Это не редактор, а средство просмотра/сканер CSS. Он позволяет легко просматривать код CSS любой веб-страницы, чтобы вы могли лучше узнать, как работает CSS, и проанализировать любой хорошо сделанный макет в Интернете.
CSSПравить (Только для Mac) — хорошее решение для написания каскадных таблиц, простое в использовании, недорогое и с широким набором функций.
Фейерверк:Я считаю, что это отличное программное обеспечение для создания макетов и хороших графических работ!
Ткач снов:это универсальное решение для веб-разработки...это действительно отличный инструмент, позволяющий легко синхронизировать вашу удаленную версию веб-сайта с локальной.
Кода (Только для Mac) — очень хорошая альтернатива Dreamweaver, даже если она не позволяет управлять и редактировать файлы .htaccess!
Для написания кода вашего веб-сайта я предлагаю Dreamweaver или Coda, но есть и другая хорошая альтернатива: BBEредактировать (Только для Mac).
Bootstrap. Это лучший CSS-фреймворк, который я могу предложить. Есть еще один, который называется Foundation, но я больше предпочитаю Bootstrap, поскольку он популярен среди разработчиков и его можно расширять.Есть еще несколько других фреймворков, я написал об этом блог, здесь тоже прочтите, если хотите. http://www.andwecode.com/freebies/5-Response-css-frameworks :)