Самый быстрый метод для изучения веб-дизайна для разработчика
Я - Веб-разработчик, и в моих проектах я заметил, что мое самое слабое место не способно к дизайну фронтенда. Доверие другим разработчикам может быть раздражающим, если они не могут произвести так быстро, как я хочу.
Мой взгляд на HTML/CSS - то, что это - в основном большой взлом, который удивительно работает. Существуют слишком многие CSS и браузер определенные ошибки/причуды, чтобы изучить и помнить их всех, не проводя экстремальное количество времени, пытающееся распутывать все. Существует ли маршрут кратчайшего пути к получению CSS в мой мозг? Я посмотрел на некоторые книги CSS, но мне они действительно читают как длинные списки того, как представить вещи правильно в IE6 и как сделать углы округленными. (Серьезно, почему это требует, чтобы столько приемов сделало круг острого угла? На любой платформе, но сети это назвали бы основным контролем.)
Там существует что-то, что делает аналогичное CSS, который jQuery делает для JavaScript? Используя jQuery Вы не должны знать, что JavaScript хорошо делает вещи той работой.
Я не интересуюсь изучением, почему IE6 делает вещи странными способами, потому что я не забочусь о поддержке его вообще. Я больше интересуюсь методом изучения, как использовать CSS, чтобы сделать то, что я хочу, не проводя часы и часы, читая неясные блоги.
6 ответов
Да, есть фреймворки CSS, которые являются «jQuery of CSS». Некоторые из наиболее популярных включают 960 и Blueprint . Я лично использую 960 и обнаружил, что он требует много догадок от макета.
Как другие говорили, CSS трудно выучить, читая. В конечном итоге это одна из тех вещей, к которым вам просто нужно развить инстинкт благодаря большому опыту (что обычно означает множество проб, ошибок и разочарований). Как вы подчеркнули, это не идеальная ситуация, но это то, что есть.
Другая трудность заключается в том, что используемые методологии или рабочий процесс действительно могут различаться у разных людей. Некоторые люди сначала создают макет в Photoshop, а затем производят точный "рендеринг" пиксель за пикселем с помощью HTML / CSS. Другие используют Photoshop, Illustrator, или другой инструмент, чтобы просто набросать набросок и идею, а затем воссоздать ее с нуля в HTML / CSS. А третьи предпочитают начинать непосредственно с HTML / CSS и всего лишь нескольких эскизов. Еще одна важная часть головоломки - выяснить, какой из этих методов подходит вам лучше всего.
В этом случае я не думаю, что книги сильно помогут. CSS чрезвычайно легко выучить и чрезвычайно сложно освоить.
Все, что я могу предложить, это учиться на ходу… Вам понадобится большой опыт!
Или вы можете отказаться от поддержки IE7 и особенно IE6. Если вы сделаете это, вы найдете очень-очень мало и очень-очень редких причуд :)
Карандаш и бумага для зарисовки ваших идей (думайте в ящиках, а не в треугольниках или шестиугольниках), а затем просто разбивайте все маленькие части и учитесь делать каждую из них. Нет проблем слишком больших, чтобы их нельзя было сломать. И, как всегда, TMTOWTDI!
Найдите примеры и учитесь на них - по крайней мере, так я начал учиться. Изучайте используемые стили и играйте с ними. Когда вы найдете что-то, что делает то, что вам нравится, создайте макет и поиграйте с ним. Затем протестируйте его на кросс-браузерную совместимость.
Если вы расстроились из-за того, что что-то работает в Firefox и Chrome, но не в IE (такое часто случается), не сдавайтесь. Я нахожу проклятие имени Билла Гейтса и все, что он означает - это большое снятие стресса. :-)
Отличный инструмент, который мне нравится использовать - это Firebug, плагин для Firefox, который позволяет, помимо многих других вещей, редактировать CSS правила в браузере и видеть результаты сразу же, как только вы это сделаете.
Я согласен, что CSS был своего рода последумкой в мире веб-дизайна, но это одно адское изобретение и делает вещи намного проще и быстрее развиваться.
.Для этого нужно время и практика. Но вы можете избавить себя от многих неприятностей, если будете держать свой html в чистоте и прямолинейности. Вот несколько правил, которые мне помогли:
- Используйте DOCTYPE на своих html-страницах, начните с переходного периода, так как в нем самые слабые правила, и проверяйте свой html. Если вы будете держать свою страницу в стандартном режиме, а не в режиме причуд, то у вас будет значительно меньше проблем.
- Выберите браузеры, которые вы будете поддерживать на ранних этапах, и поддерживайте их в логическом порядке. Для меня, я развиваю в Firefox, а затем убедитесь, что вещи твердые на хрома / сафари. IE может использовать специальный вид комментария, который позволяет вставить html видимым только для IE. Используйте это, чтобы добавить на таблицах стилей для IE7, а затем IE6 для переопределения стилей и исправить любые проблемы с отображением в этих браузерах. Как правило, вы должны начать с лучшего браузера и работать в обратном направлении.
- Будьте осторожны с набивкой. Это одно из самых проблемных свойств, с которыми я сталкивался. Когда вы можете, выберите использование небольшого элемента-субконтейнера с отступом вместо отступов. Это больше разметки, но поле обрабатывается намного лучше во всех браузерах.
- Абсолютные элементы внутри относительных элементов. Это решает LOT. Когда вы относительно позиционируете элемент, он остается в нормальном потоке. При абсолютном позиционировании элементов внутри родительского элемента, который является относительным, абсолютные элементы работают по отношению к местоположению родительского элемента.
Take some classes in graphics design. Ни один язык программирования не сделает вас художником, а для хорошего дизайна пользовательского интерфейса требуется артистизм.
.[или Вы можете найти лучших графических дизайнеров для работы с]
.Подпишитесь на css-обсуждения , поиграйте с общими проблемами и поговорите с другими о своих успехах. Вики также является очень полезным ресурсом.