Разработанный ориентированный CSS/HTML-учебник/книга

Я разработчик программного обеспечения, который иногда пишет код CSS/HTML. В настоящее время я работаю над приложением, которое требует довольно сложного макета html/css, и я чувствую, что я не понимаю CSS/HTML-макет, достаточный для его реализации. Какие книги и учебные пособия вы можете рекомендовать мне улучшить свои навыки?

P.S. Я понимаю, что разница между блочными и встроенными элементами - это то, что плавает, и т.д., Но то, чего мне не хватает, - это последовательная картина того, как она работает, и как размещать произвольные элементы в html/css.

P.P.S. Я попробовал несколько книг раньше, и они либо имеют справочный формат (например: http://www.amazon.com/Pro-CSS-HTML-Design-Patterns/dp/1590598040) или содержать информацию, которую я уже знаю, например, большинство основных обучающих программ по w3schools, большинство книг для манекенов на амазонке и т.д., или даже хуже, ориентированы на дизайнеры. Мне не нужно читать о цветах и т.д. Мне просто нужно узнать, как сделать макет в HTML/CSS, как в Java/Swing или других подобных фреймворках.

Ответ 1

Позвольте мне предисловие к этому, сказав, что я предпочитаю искать справочные материалы в Интернете по мере необходимости (я храню свои знания в облаке), а не изучать наизусть целую книгу о свойствах css, которая может оказаться совершенно вне контекста; в то же время я считаю более полезным читать глубоко в теории и руководствах более высокого уровня, будь то предметы или книги.

Вам предоставили всеобъемлющий стиль или, может быть, даже несколько макетов, и теперь вы можете сделать это в html + css? В этом случае я предлагаю

Handcrafted CSS: более пуленепробиваемый веб-дизайн - прежде всего, охватывает некоторые из более "хип" -типов, таких как жидкий макет, и позволяет вам комфортно с концепцией грациозной деградации (это означает, что IE6 и FF10 не должны предоставлять один и тот же опыт). Это сэкономит вам головную боль и страдания в долгосрочной перспективе - моя была настолько популярна, что коллега взял ее за границу... в течение восьми месяцев.
CSS: отсутствующее руководство и HTML, XHTML и CSS Библия - достаточно подробно и материал еще не устарел. Я бы предложил сначала прочитать поплавки (многие причуды там, независимо от предыдущего опыта), и в зависимости от того, какие главы заполнят пробелы в знаниях, которые вы чувствуете, если таковые имеются. Помимо этого - используется как ссылка.
Удобно с общими понятиями, но нужно искать случайную собственность? Во-первых, w3schools являются злыми - вместо этого используйте MDN. Несвязанный: фантастический справочник JS, а также CSS/HTML, который вы сейчас используете.
Закладка quirksmode и caniuse, чтобы вы не заходили слишком далеко, когда крупный браузер внезапно отказывается отображать ваш выточенный код правильно.
Исследовательские рамки, которые есть. Грид-системы были бы фантастическим способом сэкономить время, если дизайн подходит; увенчанный jQuery-UI или formalize, у вас будут общие страхи, которые вас заботятся (глядя на вас, макеты форм!).

Если вы хотите глубже копать и лучше понимать принципы дизайна и концепции удобства использования за успешным продуктом, или если вам еще нужно разработать каркасы/макеты страниц и т.д., список чтения будет расширяться:

Дизайнерская книга, не предназначенная дизайнеру - если бы я мог ее повышать сто раз, я бы это сделал. Нет воды, легко понять главы, сосредоточиться на основах проектирования (контраст, повторение, выравнивание, близость), которые в конечном итоге будут способствовать созданию последовательного, удобочитаемого веб-сайта (или печатного носителя).
Вам еще нужно еще? Прочитайте Универсальные принципы дизайна - теперь мы отклоняемся от "общей" территории дизайна, но большинство идей передаются.
Я закончу список с помощью Не заставляйте меня думать!: подход с общим смыслом к веб-юзабилити, который именно это.

И помните stackoverflow - если вы столкнулись с проблемой, кто-то, вероятно, уже ее решил:)

Ответ 2

Я рекомендую читать http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/.

Это не маленькая статья. Это очень детальная, продуманная статья, описывающая несколько аспектов браузера. Следующие могут вас заинтересовать:

Глава 5 - Макет (особенно конец)
Глава 9 - визуальная модель CSS2 (все части)

Ответ 3

Я бы посоветовал вам взглянуть на этот учебник

https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

Это 30-дневный курс HTML/CSS Джеффри Пути, он объясняет все, что вам нужно, очень хорошо и красиво, и что самое лучшее в нем, это бесплатно (вам нужно зарегистрироваться для бесплатной учетной записи, в настоящее время на верхний правый угол).

Альтернатива:

Но есть много много ресурсов для изучения html и css в Интернете.

Ответ 4

Если вы хотите узнать, как работает CSS. Хороший учебник от Google

http://code.google.com/edu/submissions/html-css-javascript/

& как вы сказали, что знаете, что такое CSS. Итак, лучше узнать, как избежать распространенных ошибок, допущенных новичками. есть несколько статей об этом. Их немного:

http://sixrevisions.com/css/12-common-css-mistakes-web-developers-make/

http://webdesignledger.com/tips/the-most-common-html-and-css-mistakes-to-avoid

http://www.designdetector.com/2006/06/ten-common-css-mistakes.php

Ответ 5

Все, что вы хотите знать о html/css, находится на W3C

В CSS-трюках также есть хорошие материалы для чтения

Ответ 6

Я предпочитаю текстовые книги. Вы можете использовать заметки пометить, чтобы помещать в них маркеры страниц (любой из них можно прочитать в туалете!).

Что касается одного для CSS - CSS Отсутствующее руководство, которое я нашел довольно хорошо

HTML - Книги в ореховой скорлупе (которые я всегда находил хорошими) - хороший.

Ответ 7

Просто прочитайте, как работает DOM (объектная модель документа). Самое главное знать, что код html анализируется сверху вниз, и именно это поможет вам знание элементов позиции. Это будет очень удобно при создании макета, а также при сохранении структуры в виде сетки. Также ознакомьтесь с рекомендациями по доступности.

Я также прочитал некоторые хорошие технические статьи/учебники/etc на веб-сайте developerWorks.

Все, что вам нужно, это Google, я думаю, что это просто вопрос использования правильных ключевых слов:)