Пошаговый процесс для CSS/HTML-разметки?
Попробуйте Apache Commons IO за протестированную реализацию.
Однако я не думаю это, это решает проблему бесконечной рекурсии.
4 ответа
Вот правильный способ сделать это с помощью чисел:
1) Напишите свой HTML. Ничего не делайте, а пишите. Не визуализируйте его в браузере, чтобы увидеть, как это выглядит наиболее важно. Сосредоточьтесь на семантике, краткости и доступности. На данный момент все остальное не имеет значения. Если вы сделаете этот шаг неправильно, все остальное не будет иметь значения.
2) Подтвердите свой HTML. Если ваш HTML не прошел проверку, исправьте это, прежде чем делать что-либо еще.
3) Напишите CSS для вашего HTML. На этом этапе вам нужно будет отобразить HTML-код в браузере, чтобы увидеть влияние вашего CSS. Не вносите изменений в структуру вашего HTML, чтобы соответствовать требованиям презентации. Вот почему вы сначала пишете свой HTML. Единственное, что вы должны изменить в своем HTML на этом этапе, - это атрибуты class, id и title ваших тегов. На CSS ссылаются из заголовка HTML с помощью тега ссылки с атрибутом rel = "stylesheet". Не пытайтесь включить таблицу стилей с помощью тега стиля или правила @import.
4) После того, как CSS завершен и все выглядит красиво, создайте любые фоновые изображения, необходимые для CSS.
5) Только после CSS и все, что требуется от CSS, завершено, если вы работаете с JavaScript. JavaScript никогда не входит в ваш HTML. JavaScript всегда идет во внешний файл js. Ссылка на JavaScript осуществляется с помощью тега сценария, который встречается только непосредственно перед закрывающим тегом тела.
6) После завершения вашего JavaScript передайте его через инструмент JSLint. Перепишите ваш JavaScript в точности так, как он говорит.
Когда я работал с дизайнерами, которые перешли с печати на Интернет, я столкнулся с проблемами. Дизайнеры полиграфии обычно не могут оставить мир печати позади, когда они пытаются адаптировать свой опыт верстки к сети. Интернет не печатается. Печать имеет другие ограничения и свободы, чем Интернет. Даже макеты сетки иногда не перестают быть преобразованными из печати в веб-дизайн.
Начните с системы сеток 960, из http://960.gs - Она будет содержать несколько сеток для печати для набросков идей. Этот CSS-фреймворк облегчит быструю разработку макетов с очень простой для понимания разметкой и минимальным количеством CSS с вашей стороны.
Nettuts недавно сделал видеоурок, демонстрирующий, как легко создавать макеты с помощью системы сетки 960. Вы можете просмотреть его в Интернете по адресу http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/
Если вы предпочитаете читать, у них есть также письменное руководство .
Связано:
Если вы решите поиграть с системой сетки 960, вы можете добавить букмарклет, который будет перекрывать ваши страницы сеткой, чтобы облегчить вам работу. получить понравившийся макет. Дополнительная информация (вместе с самим букмарклетом) доступна на http://gridder.andreehansson.se/
После нарезки композиций Photoshop я обычно сначала пишу HTML. Я максимально использую семантический HTML. После завершения HTML-страницы я перехожу к CSS. Системы сеток, описанные в предыдущих ответах, действительно хорошо помогают вам разметить ваш CSS, но вам действительно нужно, чтобы ваш дизайн создавался с учетом этого.
Если я не использую сетку CSS, я использую CSS Reset (тот, который предоставил Эрик Мейер), так как это дает вам наилучшую возможную отправную точку и наименьшие проблемы при разработке для IE7 / IE8 / Safari / Firefox. Недавно я отказался от поддержки IE6, если мне не заплатили специально за это.
Я всегда использую фреймворк css, который я сделал из нескольких базовых таблиц стилей. Reset.css, чтобы убедиться, что все поля, отступы, границы и т. Д. Одинаковы во всех браузерах. Затем файл typography.css, чтобы установить несколько правил для всех шрифтов, размеров, цветов и т. Д. Для всех стандартных элементов, таких как абзацы, списки, заголовки и т. Д. Затем файл forms.css для работы с формами и, наконец, wireframe.css, который позволяет мне создать страницу на основе Святого Грааля A List Apart: http://www.alistapart.com/articles/holygrail/
В моем случае каркас состоит из верхнего колонтитула, подзаголовка, контейнера и нижнего колонтитула. В контейнере я могу указать один, два из трех столбцов, присвоив ему соответствующий класс.
С этой базовой настройкой я начинаю писать HTML очень глобально. Конечно, это разделы для каркасных разделов, а затем разделы внутри этих разделов. Обычно я заполняю заголовок h1 и список с основными элементами навигации (в зависимости от дизайна), боковые панели - одним или несколькими блоками списков и / или абзацев, а основной столбец - всего несколькими абзацами. Это просто для того, чтобы немного заполнить страницу, даже если содержимое все еще бессмысленно.
Затем я начинаю брать каждый элемент (например, меню навигации), сначала записывая для него HTML-код, как если бы он был показан в браузере без таблицы стилей. Убедитесь, что с семантикой все в порядке, используйте h1 для заголовков, p для абзаца, ul / ol для списков и т. Д. Затем, когда HTML этого конкретного элемента готов и хорошо выглядит в браузере без стиля, я начинаю применять css.
Все стили, которые я добавляю после настройки таблиц стилей фреймворка, помещаются в отдельную таблицу стилей main.css.