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

StackOverflow https://stackoverflow.com/questions/1612398

  •  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.

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

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

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

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

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

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

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

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

  4. узнайте о Позиционирование CSS, и используйте "исправлено" экономно;

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

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

Используйте фоновые изображения для придания стиля, но также имейте в виду, что вы можете смещать и перекрывать изображения с помощью позиционирования.Однако вам нужно будет использовать 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 :)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top