Существует ли стандартный макет HTML с несколькими стилями CSS?

Question

Когда дело доходит до веб-дизайна, я ужасно делаю что-то отдаленно красивое. К счастью, существует множество бесплатных источников для дизайна шаблонов . Тем не менее, проблема с этими дизайнами заключается в том, что они охватывают только одну страницу, а не много вариантов использования. Если вы посмотрите на CSS Zen Gardens , у них есть 1 отдельный файл HTML, и он может радикально изменить его стиль, просто изменив файл CSS.

Теперь мне интересно, существует ли стандартная HTML-верстка (теги и идентификаторы), которая охватывает множество вариантов использования и может быть тематически обобщена с помощью различных CSS-файлов, таких как Zen Garden. Я представляю себе набор правил о том, как вы пишете HTML, и какие поля, списки, меню и стили вы должны использовать. Можно создать набор стандартных тестовых страниц, охватывающих различные области применения, и новый файл CSS должен поддерживать все различные страницы в хорошем виде.

Существуют ли проекты, которые охватывают что-то похожее на то, что я описываю?

Answer 1

Ознакомьтесь с гридами от YUI. Особенно хорош Grid Builder . Кроме того, у них есть набор CSS-файлов для сброса, базы и шрифтов, которые обеспечат вам хороший базовый уровень для дальнейшего развития.

Answer 2

Обычно я просто стараюсь следовать рекомендациям, установленным самим стандартом HTML.

• Заголовки указываются в тегах "h" (один тег H1 для основного заголовка, затем один или несколько тегов H2 под этим и т. Д.).
• Свободный текст группируется по абзацам в тегах P.
• Логически сгруппированные разделы информации идут в тегах DIV.
• Любой вид списка (даже меню, которые вы, возможно, в конечном итоге захотите расположить горизонтально) принадлежат тегам списка, таким как UL, OL или DL.
• Таблицы информации идут в тегах TABLE. НЕ используйте теги таблицы для макета.
• Будьте умны с вашими ID и атрибутами CLASS. Сохраняйте идентификаторы уникальными и присваивайте их элементам, которые, как вы знаете, представляют что-то уникальное на странице, например, меню навигации или нижний колонтитул страницы. Присвойте один и тот же класс элементам, которые повторяются, но схожи (которые вы, возможно, захотите визуализировать в похожем визуальном стиле).

Я всегда начинаю с очень простой вертикальной страницы - просто запускаю все, что я хочу, вниз по странице в черно-белом варианте. Затем я начинаю добавлять CSS, чтобы убедиться, что биты отформатированы и размещены так, как я хочу.

Взгляните на источник моей домашней страницы для примера того, о чем я говорю.

Answer 3

BluePrintCSS был, насколько я знаю, первым CSS-фреймворком. Как YUI CSS Framework, он помогает вам обрабатывать макет.

Такая структура поможет вам создать несколько CSS для вашего сайта.

BluePrintCSS - довольно зрелый проект, поэтому я рекомендую вам проверить его.

Answer 4

Я использовал Bluprint CSS , это легко и полезно, как вы увидите. Он также имеет несколько скриптов ruby, которые позволяют вам изменять количество столбцов и расстояние между ними. По умолчанию это 950 пикселей для элемента span-24.