Реферат: Сравнительная характеристика инструментов для web-дизайна
В появившемся окне выбираем создать новый элемент (наше меню должно быть целиком выделено!). Сразу же вылетает предупреждение о том, что мы применяем к элементу меню особые стили, и он может не отображаться корректно на других страничках. Не пугайтесь, все в порядке, просто нажимайте OK.
Все, осталось только назвать наш элемент поудобнее и при необходимости вставлять его в любой документ при помощи кнопки Insert.
Кстати, все изменения, которые мы будем вносить в наш элемент будут автоматически вноситься во все страницы на которых он используется.
5.8. Особенности форматирования текста в DreamWeaver
После указания имени вашего стиля (или выбора стандартного стиля для переназначения) вы оказываетесь в "настройках" стиля. Делается здесь все довольно просто, за изменениями вы можете наблюдать в режиме realtime (правда с некоторыми оговорками).
На первой закладке мы определяем, как будет выглядеть отдельная буква нашего текста:
- Указываем шрифт, которым будет писаться текст. Обратите внимание, что вы можете либо указать конкретный шрифт, хоть FreeSet, но нет шансов, что он есть у пользователя на машине (а раз его нет - отображаться страничка будет не так). Так что рекомендую пользоваться конструкциями, предлагаемыми самим DreamWeaver - например, Verdana, Arial, Helvetica, sans-serif. В этом случае сначала будет искаться шрифт Verdana - не нашли, тогда Arial, нет такого? Тогда Helvetica, ну а если и ее нет - тогда любой шрифт без засечек - гротеск.
- Указываем размер шрифта - по сравнению с возможностями HTML тут все просто здорово. Размер можно указать практически в чем угодно, начиная от % и заканчивая пикселями и пунктами
- Здесь настраивается степень "веса" буквы или, проще говоря, его толщина. Вариантов как видите тоже немало.
- Стиль написания - наклонный (италлик), стандартный (normal)
- Вариации написания - например, весь текст набран только строчными или только заглавными буквами
- Высота базовой линии шрифта в пунктах, поинтах или любых других величинах
- Какими буквами мы пользуемся - большими, маленькими или стандартно и теми и другими
- Различный декор - подчеркивание, мигание и прочее
- Цвет текста.
Обратите внимание на пункты помеченные *. На этой и на других панелях эта звездочка означает, что данный вариант не отображается визуально в DreamWeaver (т.е. в браузере надо проверять)
На данной закладке мы производим настройки фона. Фона всей странички или только заданного абзаца текста - это уж как вы стиль решили создавать.
- Цвет фона (выбираете вариант из стандартных 256 цветов или создаете свой цвет)
- Файл с фоновым изображением
- Настройка повторения (размножения) фонового изображения по странице, например, можно задать, чтобы изображение копировалось только по оси X
- Здесь указывается как ведет себя фоновое изображение при прокрутке страницы - прокручивается вместе с ней или стоит на месте
- Указание горизонтальной позиции начала фона
- Указание вертикальной позиции начала фона
Сразу замечу, что пунктами 3 и 4 надо пользоваться "с оглядкой" - т.е. проверять во всех необходимых версиях браузеров на совместимость - иначе, может получиться расхождение в отображении...
Пункт block служит для настроек параметров блока текста (т.е. здесь речь идет уже не об отдельных буквах как в пункте Type).
- Настройка расстояния между словами
- Настройка межбуквенного расстояния или трекинг
- Вертикальное выравнивание строки текста
- Горизонтальное выравнивание текста
- Отступ первой строки текста
- Настраивает систему расстановки дополнительных пробелов между словами и предложениями (несколько вариантов)
Здесь все достаточно просто, я обычно использую только Text Align и Text Indent. Остальные пункты только при необходимости создания элементов дизайна именно на основе стилей (при создании текстовой версии).
Данный пункт управляет ограничениями данного куска текста на странице (ограничивает его расположение в определенном прямоугольнике)
- Ширина прямоугольника
- Высота прямоугольника
- Настройка выключки влево или вправо
- Настройка того, как ведет себя текст при использовании элемента с выключкой влево или вправо (как текст обтекает подобный объект)
- Настройка отступа от края прямоугольника до расположенных рядом других элементов
- Настройка отступа от краев прямоугольника до текста.
Пошли различные декоративные настройки. Например, это позволит вам создать бордюр вокруг вашего элемента, со всеми необходиымыми вам настройками.
- Указываем ширину бордюра слева, справа, сверху и снизу
- То же самое но для цвета бордюра
- Стиль бордюра - различные варианты сочетания точек и черточек :)
Настройки списков (нумерованного и списка с буллетами)
- Тип оформления буллета (несколько вариантов)
- Использование в качестве буллета картинки
- Позиционирование буллета
Позиционирование - вещь важная и интересная. Оно помогает "поставить" наш объект в любое место на страничке. Итак:
- Тип позиционирования (относительное, абсолютное и т.д.)
- Расположение по Z-координате - в каком слое будет находится наш объект.
- Видимый или невидимый наш объект (может использоваться для создания пустых полей в документе)
- Чего будем делать с переполнением (т.е. если текст весь не влез)
- Расположение объекта - указание координат вершины + ширины и высоты
- Отступы со всех сторон в пикселях или других единицах.
Ну и последнее...
- Указание обрыва страницы (в основном для печати)
- Визуальный эффект - при наведении на объект курсора он может менять свою форму или при загрузке объекта срабатывает один из стандартных фильтров (последнее верно только для Internet Explorer).
5.9. Фичи
То что я именую фичами прячется в двух разделам муню DreamWeaver - File и Commands.
Начнем с Commands, которые разбиты на несколько групп:
- создание автоматизированных скриптов
- получение дополнительных commands
- работа с исходным текстом HTML
- работа с таблицами
- установка цветовой гаммы сайта
Все эти разделы являются настоящим кладом как для начинающих, так и для профессионалов.
Судите сами: Данный раздел помогает делать нечто очень похожее на макросы в каком-нибудь Word или милые сердцу Actions в PhotoShop. Делается все очень просто:
- запускаем запись нажав на Start Recording
- выполняем нужные дейтсвия
- говорим - Stop Recording
- используем, когда нам это необходимо
Если вам не лениво - попробуйте записать целиком создание дизайна для странички. Целиком. В одну команду. А затем радуйте начальство своим ленивым развалившимся в кресле видом. Машинка сама будет все повторять за вас.
Если вы хотите получить несколько подобных команд, то действовать нужно несколько иначе:
- вызываем палитру history
- выполняем несколько дейтсвий
- выделяем их
- жмем на стрелочку в правом верхнем углу окна history
- выбираем save as command
В итоге получаем любое кол-во команд, которые нам необходимы.
Эта команда поможет тем, кому приходиться исправлять многокилобайтные документы созданные их коллегами в FP или того хуже в Word (не дай бог в Word2000)
Она способна удалить многие лишние теги, но прежде чем с ней работать - сохраните предыдущую версию документа - так как данная команда может немного поубивать то что сделал ваш коллега - веб-программер (например ASP коды повычистит).
Раздел Clean Up Word HTML появилась только в третьей версии DreamWeaver (жаль что не раньше). Те кто видел КАКОЙ HTML (с позволения сказать) выдает Word2000 (да и 97 не лучше) и какого размера получаются файлы из этого "HTML-а" - те меня поймут.
Для остальных простая статистика - обработка файлов, сохраненных как веб-страница в Word уменьшает их размер в среднем в 4-5 раз (а то и все 10) не ухудшая качество внешнего вида документа.
Данная команда "подправляет" неприятную особенность браузеров от Netscape иногда не обновлять содержимое странички при изменения размеров окна браузера. Работает все просто - нажали ADD - нужный скрипт добавился - нашали Remove - скрипт убрался.
Данная команда делает аккуратное форматирование исходного текста (именно форматирование). Но, пользуйтесь ей аккуратно, если DW выделяет часть тегов на вашей страничке желтым цветом (считая их неверными) - то он при форматировании их благополучно убьет. А он бывает не всегда прав при определении "неверных" тегов...