Как сделать корзину в dreamweaver

Примеры сайтов на Dreamweaver (Дримвивер)

Мы собрали подборку готовых сайтов для демонстрации возможностей системы.

Dreamweaver стал популярным ещё в начале 2000-х годов, когда только начали появляться первые более-менее нормальные конструкторы сайтов и CMS. Он являлся хорошей альтернативой созданию сайтов в блокноте благодаря наличию визуального редактора: пользователь сразу видел эффект от изменений, вносимых в код, что заметно ускоряло разработку страниц. Некоторые операции автоматизированы, все проекты собраны в библиотеки для удобства доступа. Программа откровенно сложная, требует уверенных навыков работы с кодом. Не для новичков. Она платная, готовые сайты необходимо загружать на хостинг.

Сайты, созданные в Dreamweaver, не имеют каких-либо характерных черт. Они собираются вручную, хотя нередко в ход идут шаблоны различных элементов, которых в Сети сотни тысяч. Качество дизайна и сайтов, в целом, зависит исключительно от мастерства разработчика. Платформа позволяет создавать сайты любого типа и сложности, но её использование оправдано лишь для небольших проектов. С большим количеством страниц трудно работать, да и разработка обходится дорого. Выгоднее взять конструктор или CMS. Экзотический по нашим меркам, но всё ещё мощный движок. Давайте посмотрим примеры готовых сайтов.

Примеры Dreamweaver-сайтов:

Сайт СПбГУ

Cdop.chem.spbu.ru – сайт Санкт-Петербургского государственного университета, по формату является визиткой. Дизайн макета адаптивный. Выглядит чисто и ярко за счёт использования оттенков красного для выделения важных элементов. Есть поиск по сайту. Меню простейшее, страницы открываются молниеносно. Кажущаяся простота структуры обманчива: в разделе образовательных программ сокрыты разделы с доступом ко множеству статических страниц, организованных в блоговом формате (характерный порядок публикаций и дочитывание через кнопку «подробнее»). Материалы ожидаемо качественные – всё лаконично и доходчиво подано.

Правый сайдбар содержит множество ссылок на различные формуляры документов, необходимых для поступления, да и просто информационного характера. Страница контактов сдобрена простенькими иконками. Справа на всех страницах висит вкладка для перехода в различные разделы основного портала университета. Сделана качественно, эргономика отличная, содержит ссылки на почтовый аккаунт, соцсети и ленту RSS учебного заведения. Футер простейший, дублирует информацию из шапки и страницы контактов. Вполне сбалансированная, качественная работа без изысков либо явных недостатков.

Уютный дом – дизайнерская компания

Domkomforta32.ru – сайт-визитка компании, которая предоставляет услуги по дизайну интерьеров, ландшафтов и всего в таком духе. Макет проекта выполнен в устаревшем стиле, но смотрится симпатично – работа качественная. Стилизованное под лист пергамента меню, эффекты, активируемые наведением курсора мыши, вычурные шрифты, атмосферная подложка и затемнение фона контентной области (зона прозрачности) вместе смотрятся приятно, вызывают ностальгию по сайтам 2000-х годов. Галерея готовых работ вынесена в отдельную вкладку справа и оформлена хорошо.

Весь контент размещается внутри статичной центральной области и, зачастую, помещается на 1 экран. Для расширения рабочего пространства используется пагинация, но не вертикальный скроллинг, как это обычно бывает. Форматирование материалов непростое: много картинок, значков, отступов и прочего. Описания услуг более-менее качественные, доходчивые. Есть ссылки на стоимость элементов оборудования, необходимых для выполнения конкретных видов работ. Есть прайс, что вызывает доверие. В целом, сайт вызывает симпатию, он ощущается уютным на фоне современных модных макетов.

Сайт ботанического сада

Garden.tversu.ru – портал ботанического сада Тверского государственного университета. Довольно крупный проект по меркам движка, труда вложено немало. Сайт был разработан одним из сотрудников команды сада – специалистом по маркетингу и связям с общественностью. Дизайн простой, но подходящий – серьёзный, эргономичный и, так сказать, зелёный, экологичный. Ширина макета фиксированная – адаптивности нет. Шрифты мелковаты, но читаются нормально. Статьи с глубоким смыслом по теме, грамотные, но форматирование местами хромает на обе ноги – читать простыни мелкого текста без разделителей и малыми отступами между абзацами откровенно трудно. Качалка пользовательского внимания.

На сайте используются Flash-элементы, которые по умолчанию отключены в большинстве браузеров. Навигация одноуровневая, но, тем не менее, сложная – основное меню из двух ярусов, плюс приличной длинны сайдбар со ссылками на разделы. Всё это вызывает уважение – создать на Dreamweaver такой массив страниц непросто. Оформление многих материалов выполнено колонками, используется большое количество значков и фотографий. Никаких социалок и прочих интеграций здесь нет. Сайт контентно-ориентированный. В этом его сила и слабость: оформление статей не везде качественное, трудно читать. В остальном порядок.

Euro Alliance – магазин бытовой химии

Eu-all.ru – пример магазина на Dreamweaver. Дизайн довольно хороший, хоть и не адаптивный. Яркий, все элементы качественно подогнаны – магазин не злоупотребляет расширением пространства и необходимостью скроллинга на несколько экранов. Всё сложено компактно, даже слишком кучно, но при этом выглядит совершенно нормально. Тут есть всё необходимое, что и у магазинов на движках: корзина, возможность указания количества товаров, заказа обратного звонка, лента популярных товаров и прочее. Меню у сайта понятное, одна его часть висит в шапке, а другая показывает категории товаров в сайдбаре. Эргономика отличная.

Витрина пестрит всеми цветами радуги, перенимая палитру с ярких упаковок моющих средств на миниатюрах. Товарные карточки компактные, информативные, с качественными описаниями характеристик. Все заказы собираются в корзине, а оттуда уже можно отправить заполненную форму с данными продавцу. В магазине есть панель партнёрских брендов, оформленных логотипами со ссылками на их сайты. Эта деталь придаёт веса проекту. В футере находятся аккуратные значки доступа к соцсетям. Есть стрелка «наверх», хотя она и не нужна – почти все манипуляции занимают не более 1 экрана по высоте. Хороший, небольшой магазин.

MedTran – бюро медицинских переводов

Medtran.ru – мощный сайт-визитка компании, которая специализируется на переводах медицинской документации с английского на русский язык. Дизайн отличный: чистый, адаптивный, структура макетов страниц грамотная, форматирование текстовых материалов выполнено на высоком уровне. Используются эффекты увеличения изображений при наведении курсора мыши. Зелёные акценты на белом фоне освежают атмосферу сайта. Логотип выглядит привлекательно, внушительно. Всё вместе это смотрится убедительно, добротно.

Меню одноуровневое, но довольно обширное. В него спрятана и панель контактов. Страницы содержат довольно много качественного текстового контента и ссылок. Шрифты хорошо читаются, материалы грамотно структурированы. Разборчивость контента увеличивает большое количество иконок для иллюстрации преимуществ и прочих текстовых тезисов. Футер в привычном формате отсутствует. Вместо него разместили аккуратную форму обратной связи. Итого, на сайте есть всё необходимое: доказательства компетентности команды, смежные материалы, контакты и красивое обрамление всего этого дизайном. Хорошая работа.

Gas13 – сайт графического дизайнера

Gas13.ru – сайт-визитка человека, который специализируется на пиксельной графике. Дизайн необычный, его можно назвать устаревшим. Тем не менее, по сегодняшним меркам он является оригинальным. Главная страница оформлена оттенками серого с оранжевыми акцентами на разделах с примерами работ и уроками. Короткий вводный текст выглядит контрастно, изобилует ссылками. Тут же чётко видны контакты. С точки зрения структуры и читаемости всё отлично. Дизайн не адаптивный. Сайт имеет английскую локализацию.

При переходе в любой раздел появляется меню с примерами работ, уроками, магазином, формой обратной связи и полезными для дела ссылками. В правом сайдбаре находятся миниатюры примеров работ, при клике по которым появляются детальные превьюшки со вкладками для переключения страниц иллюстраций. Несмотря на кажущуюся простоту структуры, на сайте довольно много контента, в основном, графического. В целом, работа хорошая, атмосферная и необычная. Напоминает выставочный зал со множеством вспомогательных материалов.

1001stoleshka – магазин столешниц

1001stoleshka.ru – сайт-визитка компании-производителя столешниц. Задумка по дизайну вполне нормальная, всё выглядит и читается просто, хорошо. Структура и навигация очевидные. Сайт старый, ещё с 2011 года работает, судя по футеру. Но его не доделали: в категориях левого сайдбара нет контента, большинство ссылок меню и прочих не кликаются – они пустые. Основная информация вроде контактов и карты проезда присутствует, по характеру заголовков и меню можно понять, что может предложить компании, но деталей нет. Очевидно, раз хостинг продлевают, значит, всё работает до сих пор. Но наполнение забросили, а жаль.

Reste 2.0 – сайт-справочник

100menu.ru – масштабный проект формате справочника рецептур, предназначенный для рестораторов. Здесь можно приобрести ТТК (технико-технологические карты) огромного количества блюд – рецептуры с граммовками и технологией приготовления по кулинарным стандартам. То есть мы, по сути, имеем дело с магазином, торгующим информацией. Оплата принимается через Webmoney, банковские карты и ещё множество средств онлайн-оплаты. Контента множество – каталог впечатляет размахом и удобством навигации. Ссылок огромное количество, но, ввиду простоты дизайна, всё отлично видно и хорошо читается.

Дизайн адапативный, оформление простое – всё в оттенках синего на белом фоне. Посетителю не на что отвлекаться, всё внимание сосредоточено на разделах справочника. Есть сортировка по фильтрам. Есть готовые пакеты ТТК по акциям, заточенные под различные типы меню. Футер в привычном формате отсутствует, его роль выполняет качественный текст на манер описания преимуществ и мотивации приобретения рецептов, разбитый на 3 колонки. В своём роде сайт отличный – узкопрофильный проект с большим количеством контента и подходящим дизайном.

Ярмарка новостроек – справочник новостроек

1stroy-dom.ru/ – сайт-агрегатор, который содержит предложения застройщиков. Увы, нигде не указан регион, для которого возможен подбор жилплощадей клиентам. Сайт выполнен в формате ленгдинга. Выглядит броско, контрастно, но нет разделов, пагинации и каких-либо других разделителей, способных структурировать предложения. Всё свалено в одну кучу – несколько десятков экранов скроллинга. Найти что-либо в таком хаосе трудно. Опознавательных знаков нет – где, что, как? При клике на кнопку «Подробнее» появляется форма заказа обратного звонка. То есть просто так прочитать информацию о предложении с сайта не получится. Совсем неудобно.

Под несколькими сотнями предложений застройщиков начинаются блоки преимуществ, отзывов и прочего из этой серии. Но кто до этого уровня долистает? Структура сайта совершенно не продумана, формат для каталога выбран наиболее неудачный из всех возможных. Сайт напоминает спамную страницу. Хорошо, что хоть адрес есть и телефон компании в футере. С технической точки зрения сделано неплохо, хотя слишком наляписто и шаблонно (кто в теме лендингов, тот поймёт). Сплошная реклама без опознавательных знаков. Дизайн не адаптивный. Проект не вызывает доверия ввиду формата и особенностей реализации.

АС-Софт – курсы 1С-программирования

1s-master.ru – сайт-визитка для сбора заявок на платные курсы по 1С-программированию. Для детей и взрослых. Оформление простенькое, школьное, можно сказать, дружелюбное. Яркие кнопки с обычной CCS-анимацией (смена цвета фона и шрифта свойством hover), красные акценты, весёлая графика в хедере. Дизайн адаптивный – макет корректно сдвигается по ширине, ничего не теряется и не смешивается в кучу. Главная страница содержит общую информацию, напоминает обычный документ Word по формату.

Раздел курсов и услуг информативный, содержит чёткий, хорошо читаемый перечень услуг с более-менее нормальным форматированием. В футере висят ссылки на социалки. Навигация простая, одноуровневая, на сайте всего 5 страниц. Есть возможность участия в вебинарах по входу с паролем – это формат монетизации сайта на равне оффлайновыми курсами. Страница контактов содержит форму обратной связи, которая позволит получить доступ к бесплатным лекциям. Сайт простейший по структуре и функционально. Но свои функции явно выполнять способен.

Подведём итоги

Dreamweaver – потенциально очень мощная программа для сборки веб-страниц. Мало кто использует её возможности на полную катушку. Здесь нужен опыт. С программой плотно работает поколение, которое занималось разработкой сайтов ещё в 2000-х. Более молодых разработчиков трудно заинтересовать столь сложным инструментом в пору массового распространения качественных конструкторов сайтов и CMS.

Да, сайты, созданные в Dreamweaver, работают быстро, если грамотно собраны. Программа любит сорить лишним кодом, если пользователь делает упор на работу с визуальным редактором. Технологически продукт хорош, с его помощью создано огромное количество сайтов. Чаще всего это обычные визитки. Тем не менее, в примерах вы видели справочники и магазины. Всё это делают, но далеко не новички. Есть ли смысл использовать движок? Пожалуй, нет: он сложный и дорогой, как и большинство продуктов Adobe. Более рентабельных альтернатив множество.

Источник

Создание сайта на Adobe Dreamweaver

В этой главе мы познакомимся с замечательной программой, с помощью которой создают сайты — Adobe Dreamweaver. Это интуитивно понятный визуально ориентированный HTML-редактор. Мы уже знаем начальные элементы, из которых состоит веб-ресурс. С помощью Dreamweaver мы сможем делать сайты сложнее, лучше и быстрее, чем, если бы мы писали руками в блокноте. Для начала давайте познакомимся с основными управляющими элементами редактора.

В открывшемся окне нам редактор предлагает несколько вариантов создания сайта. Начнем с самого простого:

Перейдите на вкладку Advanced, в категорию Local Info. В поле Site name введите название сайта, в поле Local root folder введите путь к папке, где будут хранится файлы вашего ресурса. Дальше, нажмите кнопку ОК.

Цифрой 1 обозначено место, где будет название нашего файла, цифрой 2 место, куда мы можем вписать название нашей страницы, которая будет отображаться в браузере, цифрой 3 обозначено место, где мы сможем выбрать, как будет отображаться наш сайт в редакторе.

Пощелкайте по области 3, вы увидите что редактор отображает нашу страницу по-разному. Если мы нажмем на кнопку Code, редактор отобразит только код нашей страницы, если мы нажмем на Design, то редактор покажет нам, как бы выглядел сайт в браузере. На рисунке 3 нажата кнопка Split, в этом режиме редактор показывает нам сверху страницу в режиме код, а снизу страницу в режиме дизайна.

В самом низу находится панель форматирования, в ней мы можем форматировать текст как в Word.

По умолчанию редактор добавляет вместо тега следующие строки кода:

Оставим эти строки как есть.

В поле Title (цифра 2) введите название нашей страницы- First Site.

Щелкните правой кнопкой мышки по названию файла (цифра 1), выберите Save As, введите имя файла — index.html и нажмите Сохранить.

С правой стороны, во вкладке Files вы увидите свой файл index.html.

По умолчанию главной страницей веб-ресурса должен быть файл с названием index.html.

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

В следующей главе мы научимся вставлять и форматировать текст нашего сайта с помощью Dreamweaver.

Источник

Быстрый Web-дизайн с Dreamweaver

Эффективные технологии превращения макетов в страницы Web

Тем, кто работает с Internet, хорошо известно, что наиболее заметные различия между страницами Web и печатными публикациями касаются не цвета, не размера изображений или анимации, а скорости. Конечно, время загрузки страницы имеет существенное значение, но работа Web-дизайнеров напрямую зависит от требований, предъявляемых клиентами к темпам реализации проекта на всех его стадиях, начиная с рождения идеи и заканчивая ее практическим воплощением. Не менее важно и то, как часто клиент планирует обновлять содержание узла, а также добавлять к нему новую информацию.

В мире печати сроки определяются жесткими графиками работ типографий и структур распространения. Однако разработчикам Web не приходится ждать печатников. Какая-то новая, интересная статья, или, скажем, информация о смене руководства большой компании могут появиться в Сети немедленно. Именно в этом сила пакета Macromedia Dreamweaver. Он сбережет время разработчика, а в Web время — решающий аргумент.

Если вы вовлечены в «дикий» мир Web-дизайна, то, вероятно, знаете, что зачастую приходится работать всю ночь, чтобы успеть к назначенному клиентом сроку или опередить конкурентов. В этом могут помочь ценнейшие возможности Dreamweaver, такие как шаблоны, трассировка изображений, Cascading Style Sheets (каскадные таблицы стилей — CSS), улучшенные средства поиска и замены, библиотека элементов, поддержка динамического HTML (DHTML), упрощенное создание таблиц и фреймов, управление структурой узла.

В этой статье вы найдете советы и секреты, которыми делятся дизайнеры Web (в их числе и авторы публикаций). Надеюсь, предлагаемые материалы помогут вам извлечь максимум полезного из этого пакета.

По шаблонам

На мой взгляд одна из интереснейших особенностей в Dreamweaver 2.0 — примененный в ней новый подход к использованию шаблонов. Во многих программах для создания HTML есть шаблоны для домашних страничек, но лишь немногие из них имеют качество, достаточное даже для личного узла, не говоря уж о коммерческом дизайне по заказу клиента. В Dreamweaver шаблоны подняты на новый уровень: при изменении существующего шаблона возможно обновление всех созданных с его помощью страниц текущего узла.

Приведем пример, подтверждающий, что с помощью шаблонов Dreamweaver можно сэкономить время. Ваши клиенты хотят, чтобы у каждой страницы узла был ярко-желтый фон с розовой и голубой полосами, а также фирменная панель навигации с розовыми, зелеными и пурпурными цветами. Не слушая ваши доводы, они настаивают на том, что все страницы должны выглядеть именно так, как хочется им. Итак, вопреки своему желанию, вам приходится создавать шаблон со всеми этими элементами.

Но, после того как все 368 страниц смакетированы, президент этой фирмы, будучи человеком, не лишенным художественного вкуса, осмотрев узел, выражает свое недовольство. По его мнению, на каждой странице должна быть темно-синяя панель навигации, а фон должен быть бордовым.

К счастью, вместо того, чтобы потратить день или два на переделывание всех страниц, вы можете сделать это за несколько часов. Поскольку исходный вариант дизайна был создан в шаблоне Dreamweaver, вы просто изменяете панель навигации, фон и другие элементы шаблона, а затем выполняете команды Modify (Изменить), Templates (Шаблоны), Update Pages (Обновить страницы). После этого Dreamweaver применит изменения ко всем страницам узла.

Шаг за шагом: можно и назад

Тереза Ривьера из Новато (шт. Калифорния), разработавшая много коммерческих узлов, включая сервер компании Beth’s Fine Desserts (см. врезку «Использование трассировки изображений»), подобно многим другим дизайнерам предпочитает создавать свои страницы в графических программах, и только потом переходит к работе с HTML-редактором. Одной из самых интересных с ее точки зрения возможностей Dreamweaver является функция трассировки изображений. Используя эту опцию, можно создавать изображение в программе типа Adobe Photoshop или Macromedia FreeHand, размещать его на заднем плане страницы Web, а затем трассировать изображение, воссоздавая исходный дизайн.

Функция трассировки изображений — идеальный способ размещения слоев или создания ячеек таблицы в HTML, поскольку он гарантирует, что изображения и другие элементы окажутся именно там, где они были в исходном варианте дизайна. Dreamweaver воспринимает изображения для трассировки из любого графического приложения, поддерживающего форматы JPEG, GIF или PNG.

Следует помнить, что оттрасированное изображение не является фоновой картинкой и поэтому оно не отображается при просмотре страницы через браузеры Netscape Navigator или Internet Explorer. Когда вы вставляете оттрассированное изображение в документ Dreamweaver, фоновое изображение или цвет оказываются скрыты; однако, если вы хотите видеть задний план окна документа, то можете отключить отображение оттрассированного изображения.

Стили с помощью CSS

Иоланда Баррелл, корпоративный web-мастер компании Etec Systems (Хайворд, шт. Калифорния), особенно ценит в Dreamweaver гибкую поддержку технологии Cascading Style Sheets (CSS) и улучшенную функцию поиска и замены, которая позволяет выполнять поиск в тегах HTML, игнорируя незначащие символы. Можно также ограничить поиск рамками определенного узла или каталога и сохранить критерии поиска в папке. Это значит, что вам не придется заново писать стандартные выражения (чтобы задать некоторые сочетания букв, используются специальные символы) и вы сможете сохранить определенный шаблон поиска (например, поиск определенного тега или атрибута), а затем повторно использовать его.

Технология CSS поможет поддерживать однообразный вид и стиль в рамках всего узла Web. Работая с большим узлом intranet, Баррелл использует стилевые листы для упрощения форматирования содержания новых страниц и добавления информации к существующим. Если вы знакомы со стилевыми листами в таких программах, как Adobe PageMaker, Microsoft Word или QuarkXPress, то быстро оцените полезность этой функции для Web-дизайна.

Стилевые листы позволяют описывать широкий набор опций форматирования — таких как начертание шрифта, выравнивание и размер в пунктах — а затем применять этот набор к любому элементу Web-страницы. Скажем, вы описываете стиль заголовка, который набирается жирным красным шрифтом Helvetica и выравнивается по центру. Каждый раз, собираясь создать новый заголовок, вы можете применить все элементы стиля одновременно, а не по отдельности.

Можно описать стиль для раздела документа, всего документа или всего узла Web. Позже, если вам понадобится изменить стиль — например, заменить шрифт заголовка с Times на Helvetica — можно глобально обновить все элементы, описанные данным стилем. Достаточно просто изменить описание стиля, созданного для заголовков, и весь текст с этим стилем преобразуется автоматически.

Единственный недостаток стилевых листов в том, что технология CSS является относительно новой для Web и, следовательно, стилевые листы поддерживаются только новейшими версиями браузеров, в частности, Netscape Navigator 4, Microsoft Internet Explorer 4 и более поздними. (Некоторые элементы поддержки стилей предусмотрены в Internet Explorer 3, но там реализованы не все возможности, имеющиеся в Dreamweaver.) Если вы, как и Баррелл, занимаетесь разработкой узла intranet, то ваши «читатели» скорее всего используют новейшие версии браузеров, поддерживающие CSS. Однако, если вы взялись за дизайн для более широкой аудитории, в процессе проектирования вам придется учитывать возможность просмотра узла далеко не самыми современными браузерами.

К счастью, компания Macromedia при разработке Dreamweaver учитывала различия между браузерами, и программа обладает возможностями, которые помогают подстроиться под различные браузеры. Например, вы можете создать узел со стилевыми листами, а затем с помощью опции Convert To 3.0 Browsers (Конвертировать для браузеров версий 3.0) создать альтернативные страницы, которые будут работать с устаревшими браузерами. Хотя этот процесс относительно прост, вам придется поддерживать две различные версии узла Web.

Кроме возможности управления большинством традиционных атрибутов форматирования текста, стили в документах HTML могут также описывать уникальные атрибуты HTML, такие как позиционирование, специальные эффекты и ролловеры — элементы, изменяющие свое состояние при прохождении над ними указателя мыши. Однако Dreamweaver не отображает все доступные опции стилей в окне документа. Неотображаемый атрибут появляется в окне Style Definition (Описание стиля) со звездочкой (*) вслед за названием. Чтобы увидеть стиль таким, каким он показывается в браузере, вы должны просмотреть его через установленный браузер, поддерживающий CSS. Чтобы выполнить предварительный просмотр любой созданной в Dreamweaver страницы, выберите команды File, Preview In Browser (Предварительный просмотр через браузер), а затем выберите браузер.

В библиотеку

Функция Library (Библиотека) пакета Dreamweaver автоматизирует процесс вставки и изменения элементов, которые расположены на нескольких страницах узла. Программа хранит библиотечные элементы в папке Library и связывает их со всеми страницами, на которых элементы были размещены. Это значит, что если браузер один раз загрузил библиотечный элемент, ему уже не придется делать это снова, когда этот элемент повстречается на следующих страницах. (Чтобы функция Library работала правильно, оригинальный файл должен остаться в том же месте.)

Описать как библиотечный можно любой элемент, такой как панель навигации из изображений и ссылок, логотип, или даже анимация Macromedia Shockware. Затем достаточно просто перетащить элемент из библиотеки на любую страницу. Кроме того, если вы вносите изменения в элемент библиотеки (например, добавляя изображение или меняя ссылку), то можете глобально обновить элемент на всем узле.

Для каждого разрабатываемого узла нужно задавать отдельную библиотеку. Если вы хотите использовать элемент библиотеки с другого узла, достаточно скопировать элемент в буфер обмена и вставить его оттуда; можно также открыть страницу, из которой вы хотите использовать библиотечные элементы, выполнить команду Save As и сохранить страницу в новом узле. Затем можно переопределить каждый элемент библиотеки (см. врезку «Создание и использование библиотеки элементов»).

В библиотеки можно включать любые элементы — такие как таблицы, формы, изображения, апплеты Java, дополнительные модули и текст — из области BODY файла HTML. Но библиотеки не могут содержать такие элементы, как временные шкалы, стилевые листы или функции JavaScript, так как исходный текст этих объектов входит в область HEAD файла HTML. Хотя вы можете добавлять «поведения» (behavior) (сочетания событий, таких как ролловеры и действий JavaScript) к библиотекам элементов, в Dreamweaver имеются особые требования к редактированию «поведений» в библиотечных элементах, поскольку часть исходного текста «поведений» находится в области HEAD.

Динамический дизайн

Те, кто разрабатывает сложные узлы с DHTML, обязательно оценят возможности анимации с временной шкалой, а также большой набор предопределенных вариантов «поведения», которые можно использовать при дизайне страниц — все это реализовано в Dreamweaver. Дизайнеры, обладающие навыками программирования, могут также создавать «поведения» и делать их доступными своим менее опытным коллегам. На часто обновляемом узле Web компании Macromedia, http://www.dreamweaver.com, можно найти постоянно растущий список «поведений», а также выгружаемые расширения.

Джанин Уорнер — редактор Web-узла издательства Miami Herald Publishing. Она также является профессиональным диктором и автором шести книг по Web-дизайну, включая Dreamweaver for Dummies (IDG Books) Flash 3.0 Web Animation F/X and Design (Coriolis).

Использование трассировки изображений

Первоначально Тереза Ривьера дизайн Web-узла компании Beth’s Fine Desserts выполнила в Photoshop, а затем повторила его в Dreamweaver, поместив на страницы поверх оттрассированных исходные изображения GIF и JPEG, что должно было гарантировать точное воссоздание первоначального замысла.

Чтобы добавить к странице Web трассированное изображение, откройте файл страницы в Dreamweaver и выполните команды Modify, Page Properties (Свойства страницы). В окне диалога Page Properties щелкните по кнопке Choose (Выбрать), расположенной рядом с текстовым боксом Tracing Image, и в окне открытия файлов выберите изображение для вставки. Чтобы сделать изображение частично сливающимся с фоном и облегчить процесс трассировки, переместите движок Transparency (Прозрачность) в положение между 50 и 70 процентами (в зависимости от характера изображения). Для просмотра результатов щелкните по кнопке Apply (применить)(на рисунках она не показана), а по завершении — по кнопке OK (рис. А).

А

Опираясь на трассированное изображение, можно создать слои или таблицу (рис. В).

В

Для точного воссоздания первоначального дизайна поверх трассированного изображения можно

С

расположить несколько других изображений (рис. С).

Описание и применение стилевых листов

Вы можете описать любое сочетание опций форматирования как новый стиль, а затем применить его к выделенному тексту или любому другому элементу документа. Чтобы создать стиль, выполните команды Window (Окно), Styles (Стили) — или щелкните по кнопке Styles в панели Launcher — откроется палитра Styles (рис. D).

D

Теперь, чтобы открыть окно диалога Edit Style Sheet (Редактирование стилевого листа), щелкните по кнопке Style Sheet (Стилевой лист)(рис. E).

Е

Для создания стилевого листа нужно выполнить команду New (Новый) — откроется окно диалога New Style (Новый стиль).

Чтобы создать совершенно новый стиль, выберите радиокнопку Make Custom Style (Сделать заказной стиль)(рис. F). А для изменения или добавления опций форматирования к любому существующему тегу HTML (например, чтобы выровнять тег заголовка по центру) щелкните по радиокнопке Redefine HTML Tag (Переопределить тег HTML).

F

Для создания стиля, который будет применяться к ссылке, щелкните по радиокнопке Use CSS Selector (Использовать селектор CSS). Сделав свой выбор, щелкните по кнопке OK и в окне диалога Style Definition For (Описание стиля для) задайте атрибуты, которые хотите связать со стилем. Для получения стиля подзаголовка, показанного на рис. G, задано три опции — Arial, Helvetica и шрифт без засечек.

G

Поскольку Dreamweaver задействует возможности HTML по заданию нескольких шрифтов, пользователи, у которых нет установленных у вас шрифтов, все же увидят текст, отображаемый шрифтом без засечек, который подберет их браузер. Чтобы создать новый стиль и добавить его к палитре Styles, щелкните по кнопке OK, а затем — Done.

Любой стиль можно применить, выбрав текст или другой элемент страницы (например, подзаголовок на рис. H),

H

а затем щелкнув по названию стиля в окне диалога Styles.

Создание и использование библиотеки элементов

Повторяющиеся на многих страницах узла элементы можно сохранить в библиотеке элементов. Однажды сохранив элемент или сочетание нескольких элементов в библиотеке, вы сможете вставить их на любую страницу. Отредактировав библиотечный элемент, можно либо изменить его всюду, где он был размещен ранее, либо использовать измененную версию только для вставки на новые страницы.

Чтобы создать библиотечный элемент, выберите нужный элемент или их сочетание. Выполните команды Window, Library (Библиотека) — откроется палитра Library; затем перетащите элемент (например, палитру навигации на рис. I)

I

в нижнюю секцию палитры Library. Чтобы сделать его библиотечным, щелкните по кнопке Create (Создать) и присвойте элементу название (автор назвал его navbar).

Добавить элемент библиотеки можно к любой странице узла. Достаточно открыть новый или существующий документ, выполнить команду Window, Library, чтобы открыть палитру Library, выбрать нужный элемент библиотеки и щелкнуть по кнопке Add to Page (Добавить к странице) в верхней правой части палитры Library. Элемент библиотеки можно также вставить, выбрав его в палитре Library и перетащив в окно документа (рис. J).

J

Чтобы отредактировать элемент библиотеки, дважды щелкните по нему в палитре

K

Library и внесите необходимые изменения, например, коррекцию ссылки, замену изображения или добавление нового текста. Когда вы сохраните элемент, Dreamweaver отобразит окно диалога, где спросит, хотите ли вы выполнить глобальное обновление (рис. K). Если щелкнуть по кнопке Yes, Dreamweaver внесет изменения во все страницы текущего узла, содержащие данный элемент. Если щелкнуть по кнопке No, изменения коснутся только тех страниц, куда элемент будет вставляться в дальнейшем.

Те, кто разрабатывает сложные узлы с динамическим HTML, обязательно оценят возможности анимации с временной шкалой в Dreamweaver.

Источник