Благодаря «визуализации» и простоте использования многие друзья пишут CSS в DreamWeaver. Сегодня мы познакомим вас с некоторыми «лучшими привычками» написания CSS в Dreamweaver, надеемся, что они будут полезны всем.
CSS меняет ход дизайна веб-сайтов. Чтобы удовлетворить растущее число дизайнеров, склонных к CSS, Macromedia DW MX представляет ряд новых и улучшенных функций, связанных с CSS. Благодаря этим новым функциям вы можете планировать будущие обновления и разрабатывать сайты, более соответствующие стандартам W3C. В этой статье обсуждаются некоторые предложения по использованию CSS в DW MX и выделяются определенные функции CSS.
Вообще говоря, таблица стилей — это набор правил форматирования, которые управляют внешним видом веб-контента. Вы можете использовать CSS на своих страницах тремя различными способами:
Встроенный: одноразовые стили, записанные в коде.
Встроенная: таблица стилей, которая может управлять всеми элементами на странице. Внешняя: таблица стилей, которая может управлять элементами на многих страницах.
Фактически, многие сайты при необходимости используют комбинацию этих трех методов.
При работе с CSS важно учитывать тот факт, что разные браузеры и разные версии одного и того же браузера анализируют CSS по-разному. Помимо различий в веб-браузерах, вам также необходимо понимать, что существует множество других браузеров, таких как браузеры для слуховых аппаратов, браузеры для телевизоров и портативные устройства, такие как Palm Pilot и TTY (телетайп, удаленная пишущая машинка).
Каковы лучшие практики?
Большинство технологий имеют свои собственные согласованные стандарты. CSS не является исключением. Хотя не весь CSS, существующий в сети, стандартизирован, полезно использовать CSS в соответствии с существующими стандартами. В общем, разработчикам следует максимально отделять контент от отчетов. Преимущества этого:
1. Увеличение срока службы сайта. Нестандартные таблицы стилей могут показаться удобными в то время, но после выхода новой версии браузера могут возникнуть проблемы с совместимостью. В то время постраничное изменение сайта станет очень трудоемкой задачей, а также сделает бессмысленным использование CSS.
2. Сделайте свой сайт доступным для всех пользователей и браузеров. Некоторые местные органы власти постановили, что веб-сайты должны быть доступны для людей с ограниченными возможностями. Устройства просмотра, предназначенные для людей с ограниченными возможностями, такие как слуховые браузеры, предъявляют чрезвычайно строгие нормативные требования CSS.
3. Упростите обновление и обслуживание сайта. При правильном использовании CSS может позволить быстро применить изменения, внесенные вами на одной странице, ко всем страницам.
Первый выбор, который вам нужно сделать, — это какую таблицу стилей использовать. Вот разбивка различных таблиц стилей, когда дело доходит до лучших практик:
Встроенный CSS: Проще говоря, вам следует стараться избегать его использования. Помимо других недостатков, использование встроенного CSS означает, что вы не можете воспользоваться реальным преимуществом CSS, а именно тем, что вы не отделяете контент от форматирования. DW MX использует встроенный CSS в основном для позиционирования элементов страницы (эти элементы называются «слоями» в пользовательском интерфейсе DW MX) или для использования определенного эффекта DHTML, который требует использования встроенного JavaScript-кода для изменения свойств объекта.
Встроенный CSS: он также не идеален, поскольку влияет только на текущую страницу. Если в процессе обновления страница будет потеряна, стиль сайта будет несовместимым. Кроме того, когда пользователи просматривают ваш сайт, для каждой страницы необходимо загрузить информацию о таблице стилей;
Внешний CSS: это ваш первый выбор. Внешний CSS позволяет всем страницам, подключенным к нему, сохранять единообразный внешний вид и стиль; изменять его один раз и легко обновлять все связанные страницы, уменьшая размер страницы и ускоряя ее просмотр; Другие лучшие практики обсуждаются ниже при анализе конкретных функций CSS.
Создание таблицы стилей CSS в DW MX
При создании таблицы стилей CSS в DW MX (Текст 》Стиль CSS 》Новая таблица стилей) во всплывающем диалоговом окне у вас есть две опции: Новый файл таблицы стилей) и только для текущая страница (только этот документ). Выберите «Новый файл таблицы стилей», и вы начнете процесс создания внешнего CSS. Этот вариант требует, чтобы вы назвали таблицу стилей и выбрали место для ее сохранения перед фактическим процессом создания; другой вариант, «Только этот документ», запишет соответствующий код непосредственно на страницу.
Вы также можете выбрать существующую таблицу стилей для редактирования или добавления новых определений в диалоговом окне «Новый стиль».
Должен ли он быть подключен к внешнему CSS или импортирован?
После создания внешней таблицы стилей вам необходимо прикрепить ее к каждой странице (или шаблону). Для этого нажмите кнопку «Прикрепить таблицу стилей» на панели CSS. Откроется диалоговое окно «Ссылка на внешнюю таблицу стилей», в котором вы сможете перейти к целевой таблице стилей. Найдя имя, вы можете выбрать ссылку или импорт. эту внешнюю таблицу стилей.
Соединение — наиболее часто используемый метод. Выберите «ссылка», чтобы подключить таблицу стилей к странице. На вашу страницу будет добавлена следующая разметка:
Опция подключения поддерживается всеми браузерами, поддерживающими CSS. Если вы хотите, чтобы некоторые старые браузеры (например, Netscape 4.x) «видели» эту таблицу стилей, вам нужно использовать следующий метод.
Если вы выберете опцию «Импортировать», будут использованы следующие теги:
NetSscape4 будет полностью игнорировать импортированный CSS и интерпретировать страницу в соответствии с подключенным CSS. Таким образом, мы можем использовать новые возможности CSS, не беспокоясь о проблемах совместимости браузера.
Инспектор свойств CSS
Вы можете легко переключиться в режим CSS в инспекторе свойств DW MX. По умолчанию инспектор свойств отображает теги шрифтов в режиме необработанного HTML. Нажмите маленькую букву «А» рядом с раскрывающимся меню «Шрифты», и вместо списка тегов шрифтов вы увидите доступные на данный момент таблицы стилей CSS.
В то же время вы можете легко переключиться обратно в режим HTML.
Готовые таблицы стилей CSS
Одной из интересных функций CSS в DW MX является включение готовых таблиц стилей CSS. Новые пользователи CSS могут сначала попробовать его. Выберите «Файл» > «Новый», выберите «Таблицы стилей CSS» во всплывающем диалоговом окне «Новый документ», и в поле справа появится список всех доступных CSS. Чтобы попрактиковаться в том, что мы называем лучшими практиками, выберите один из них с пометкой «Доступно».
Сохраните документ в папке сайта, а затем добавьте CSS в документ, используя метод, описанный выше.
Таблицы стилей времени разработки (таблицы стилей времени разработки).
Эта функция DW MX позволяет применять таблицы стилей к страницам во время работы в представлении «Дизайн», что дает вам более интуитивное представление о внешнем виде вашего сайта. Таблицы стилей времени разработки не будут отображаться на сайте. Эта функция очень полезна с точки зрения наших лучших практик. Если вы используете методы импорта и ссылки (как описано выше), прикрепление таблиц стилей времени разработки позволяет вам разрабатывать сайт, используя любой из них. Вы можете легко перейти на другую таблицу стилей, если хотите увидеть, как страница будет выглядеть под другой таблицей стилей.
Таблицы стилей времени разработки также полезны для разработчиков, которые хотят применять CSS на стороне сервера (например, ASP, PHP или ColdFusion) или на стороне клиента с помощью JavaScript. Таблицы стилей на стороне сервера — это еще один способ справиться с плохой поддержкой CSS в клиентских браузерах. Но в предыдущих версиях DW этот метод не позволял увидеть реальный эффект CSS на этапе проектирования. Таблицы стилей во время разработки позволяют просматривать эффекты таблиц стилей в реальном времени, что позволяет работать в DW MX визуально. Еще одним преимуществом является то, что при загрузке файлов сайта вам больше не придется просматривать весь сайт в поисках избыточных таблиц стилей.
Проверка
Независимо от того, создаете ли вы собственную таблицу стилей или редактируете существующую, проверка гарантирует, что вы не будете использовать нестандартные теги или неправильный код неправильно. Сам DW MX не включает валидатор CSS, вы можете использовать службу проверки, предоставляемую сайтом W3C. В DW MX вы можете проверять теги HTML или DHTML («Файл» > «Проверить страницу» > «Проверить разметку» (для HTML) или «Файл» > «Проверить страницу» > «Проверить как XML для XHTML»). DW MX предоставляет множество вспомогательных инструментов при разработке сайтов на основе CSS. С помощью MW MX в сочетании с хорошим пониманием CSS вы сможете разработать сайт, который выдержит испытание временем.