Как начать создавать CSS для заданного (динамически сгенерированного) HTML?
Separatион макета и содержимого - это область CSS и HTML - до сих пор хорошо изученная. Теперь про сепаратing ...
Я ищу подсказки и передовые методы, чтобы приступить к задаче создания «обложки» или «темы» для системы управления контентом.
Фон:
Мы начинаем использовать сервер портала / систему управления контентом и начинаем изменять внешний вид в соответствии с нашими потребностями.
Наш дизайнер до сих пор в основном работал с полным контролем над HTML и CSS, настраивая любой из них, чтобы получить макет с идеальным пикселем. С принятием cms появилось много предварительно созданного HTML (очень семантического, почти без таблиц :), который нужно обработать с помощью CSS и изображений. Хотя можно изменить фрагменты HTML, я бы предпочел сделать это только в крайнем случае.
Поскольку это создает проблему «с чего начать», мой вопрос касается любых советов, как действовать дальше, или статей, которые могут помочь в управлении или организации этой задачи - например, лучшие практики в дизайне, как разрезать эту задачу или какой инструмент использовать.
Кажется плохой практикой просто сохранять динамически сгенерированную страницу на диск и вносить изменения локально. Это было бы неплохо для файлов CSS, но изменения в элементах HTML должны быть адаптированы к фрагментам, из которых они созданы. Я бы хотел, чтобы это не входило в компетенцию дизайнера, если это возможно. Кроме того, меня пугает мысль о том, что Dreamweaver (или любой подобный инструмент) неявно изменяет структуру HTML.
Для любопытных: упомянутая CMS / Portalserver - это Liferay, но вопрос действительно не зависит от языка и инструментов.
Обновлено: FireBug (как предложил Джош) отлично подходит для попытки изменения на лету css. Есть ли что-то еще - в области инструментов или в процессе и самоорганизации?
Ответы 3
Обычно, когда я нахожусь в подобной ситуации, я открываю страницу в FireFox, проверяю различные элементы с помощью FireBug и точно вижу, какой CSS применяется к ним. Затем я просто изменю существующий CSS, пока не получу то, что мне нравится. Вы даже можете поиграть в firebug и изменить CSS без «сохранения» этих изменений.
Если вы ищете практические примеры разделения стиля и содержания, я бы предложил CSS Zen Garden. Изучение HTML и CSS вдохновляет и поучительно и должно помочь в том, что вы пытаетесь сделать.
Мой совет №1 - сделать все как можно более семантическим и использовать множество классов и идентификаторов для привязки ваших стилей.
Большой. Я знал CSS Zen Garden, но только как пример мощи CSS. Я никогда не замечал ссылку «Ресурсы CSS», которая указывает на «Записи процесса кодирования и дизайна в Zen Garden», и это именно то, что я искал. Ты заставил меня снова посмотреть - большое спасибо.
Взгляните на CSS Tidy, мы обычно используем его для очистки CSS и реорганизации для разработки и производства. Однако я лично предпочитаю писать HTML / CSS вручную, прежде чем использовать это. Думаю, это всего лишь вопрос индивидуальных предпочтений.
Спасибо. Насколько я понимаю, сценарии сборки Liferays будут выполнять некоторую магию упаковки в нашем CSS, но я сохраню ссылку на css tidy для других проектов. Знание о том, что CSS может быть упакован, в первую очередь не помогает его писать. В любом случае - Большое спасибо за ваш ответ.
Спасибо за ответ - мы тоже начали этот путь, он кажется немного "хакерским". Но я действительно люблю Firebug для этой функции ...