АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2003 ГОД

Воплощение мечты

• Все журналы \ Номер 3/226 `2003 от 20.01.2003 \ Воплощение мечты

Анастасия КОВАЛЕВА Nastusha82@ua.fm

Вот вы наконец-то сотворили свой первый сайт. После вереницы бессонных ночей, посвященных изменению дизайна, написанию содержания, проверке орфографии и работоспособности сайта, вы, наконец, закачиваете полученный результат на сервер. Но стоит улечься первым радостным чувствам от результата работы, как вы понимаете, что работа над сайтом далеко не закончена. Для того чтобы ваш сайт жил и на него приходили посетители, необходимо его поддерживать, обновлять информацию. Некоторые разделы оказываются ненужными, приходится удалять, а заодно и менять все страницы, имеющие на эти разделы ссылки, для новых же разделов надо писать содержание. Старый дизайн все хуже натягивается на новый сайт и трещит по всем швам. У вас поменялась ссылка, добавился раздел, изменился цвет фона одной из ячеек таблицы, общей для всех страниц сайта, и т.п. Значит, придется переворотить весь сайт, заменяя один фрагмент HTML на другой. Даже если у вас сайт из 10 страниц, вам вряд ли понравится такое времяпрепровождение. А если 100… Увязая в рутинной работе, вы мечтаете о том, чтобы автоматизировать свой труд.

Что же можно в этой ситуации сделать, чтобы не умереть от скуки, а заодно и поберечь зрение, правя HTML-файлы? Сбыться мечте об автоматизации поможет новая версия известного продукта от Macromedia —Dreamweaver MX, не зря же он носит гордый титул «Сочинитель Мечты». По сравнению с предыдущей версией в MX появились нововведения, которые как раз и помогут в обновлении сайта. Сразу оговорюсь, что программы типа WYSIWYG (что видите, то и получите), к которым относится Dreamweaver, необходимо использовать осторожно, чтобы не раздуть свой код. Проблема «чистого» кода уже поднималась в журнале, и надеюсь, что вы представляете себе, чего нельзя делать, дабы зря не увеличивать размер своих страниц.

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

В тут-то и выходит на арену Dreamweaver MX (Рис. 1). Первым делом мы открываем панель Sites (Windows > Show Sites) и в меню Site выберем пункт New Site, чтобы создать новый проект. В отличие от многих программ для работы с HTML, которые рассматривают каждую веб-страницу отдельно, Dreamweaver всегда знает, какие страницы относятся к какому сайту, а поэтому облегчает вам работу, выполняя множество операций над всем сайтом в целом. Для работы с новым проектом вы должны предварительно настроить его. В принципе, достаточно дать сайту название, чтобы потом отличать его от других, и выбрать папку для хранения файлов сайта. Но вы также можете использовать Dreamweaver MX для закачивания файлов на сервер. Для использования протокола FTP указываете знакомые параметры — имя сервера, логин, пароль, удаленный каталог, при необходимости ставите галочки напротив пунктов пассивный режим, firewall и ssh. Dreamweaver MX имеет ряд преимуществ над Windows Commander’ом, Far’ом или СuteFTP, которые тоже справляются с закачкой файлов на сервер. Во-первых, функция Cloaking — Маскирование (меню Site > Cloaking) пометит не подлежащие закачиванию типы файлов или папки с файлами, и они не окажутся по ошибке на сервере. Во-вторых, Synchronize — Синхронизировать (Site > Synchronize) позволит закачать на сервер (скачать с сервера) только те файлы, которые были изменены, т.е. никакой файл не будет забыт или зря закачан (скачан). В-третьих, возможности Check-in и Check-out помогут, если вы разрабатываете сайт не единолично, а командой. Функцией Check-out вы «захватываете» файл, не позволяя остальным разработчикам изменять его. Check-in помещает на сервер измененный файл, предоставляя его другим членам команды для «захвата» и редактирования. При этом ваш локальный файл становится заблокированным, и вы сможете лишь просматривать его. Этим возможности управления проектами не исчерпываются. Помимо функций работы с удаленным сервером и удобного структурирования сайта на панели Site c последующем отображением древовидной структуры, Dreamweaver проверит сайт на работоспособность в различных браузерах (панель Target Browser Check — команда Check Target Browser for Entire Site во всплывающем меню), обнаружит ведущие в никуда ссылки (Site > Check Links Sitewide) и заменит поменявшуюся ссылку по всему сайту (Site > Change Link Sitewide), найдет отсутствующие подсказки к изображениям и заголовки Untitled Document, уберет лишние тэги, совместит разросшиеся тэги font (Site > Reports):

Все эти функции здорово облегчают работу над сайтом. Но это только начало.

Dreamweaver совмещает в себе визуальную среду разработки (Рис. 2) с редактором кода, имеющим подсветку синтаксиса HTML, CSS, Javascript, PHP, ASP, JSP и т.д. Кроме уже доступных в предыдущей версии справочников по HTML, CSS и Javascript, в MX добавлены новые, среди которых справочник по ASP и JSP. Жаль, PHP-справочника не хватает. Рядом с панелью справочников Reference вы найдете новую панель Snippets (в переводе с английского — «обрывки»). Snippets — хранилище нужного вам кода в Dreamweaver‘е. Возможность создавать папки со «сниппетами» поможет организовать такое хранилище наиболее удобным для вас образом (Рис. 3). Код, помещенный в Snippet‘ы, может быть использован на любом из ваших сайтов. Dreamweaver содержит свой набор готовых «сниппетов», которыми вы сможете распоряжаться в своих целях.

Если вам будет лень писать код вручную и вы решите воспользоваться визуальными средствами разработки сайта, Dreamweaver позаботится о том, чтобы ваш код не был избыточным, что выгодно отличает его от других редакторов WYSIWYG. Панель «Вставки» —Insert позволит легко добавить один из многочисленных элементов web-страницы, разбитой на 12 закладок. На статус-баре вы быстро выберите подлежащий редактированию тэг. А панель Свойств —Properties позволит настроить атрибуты тэга по своему усмотрению. Интересна функция Кальки —Tracing Image (Modify > Page Properties), которая поможет разместить элементы дизайна максимально приближенно к исходной картинке, созданной в графическом редакторе. В качестве Tracing Image выберите тот большой графический файл, который вы ранее сохранили. Эта картинка видна только в самом Dreamweaver’е и служит для страницы каркасом. Чтобы она не мешала, можно установить желаемую прозрачность «кальки» (0% — 100%).

Одна из функций, расширенная в MX — работа с CSS. Таблицы стилей сами по себе оптимизируют вашу работу. Создайте общий для всего сайта файл со стилями. В нем будет описано, как на сайте выглядят ссылки, каким цветом выделяются заголовки, какая толщина границ у картинок, какой фон у ячеек и т.д. Если вам в один прекрасный момент захочется изменить цвет заголовков с ярко-зеленого на темно-синий, то вам достанет лишь поменять цвет в таблице стилей и закачать на сервер измененный файл .css. Не применив стили, вам пришлось бы рыскать по всем страницам сайта за нужным цветом и заменять его новым, а потом еще и закачивать заново весь сайт. Dreamweaver MX еще ощутимее облегчает редактирование и применение стилей (Рис. 4). У панели CSS Styles есть два режима отображения стилей. В первом случае вы можете применить стиль к выбранному фрагменту страницы, нажав на его имя в списке. Во втором случае вы видите сами описания стилей с возможностью добавления нового стиля, редактирования, дублирования, удаления. Диалоговое окно определения стиля содержит 8 категорий, охватывающие все возможные свойства стиля. Чтобы файл был общим для всего сайта, выбираем Define in: New Style Sheet File. Добавляя новый стиль, вы выбираете его тип, т.е. будет ли это класс, селектор или переопределение какого-либо тэга. Какие стили понадобятся сайту — решать вам. Но все же есть некоторые традиционные — внешний вид текста, ссылок, заголовков, фон документа. Также лучше определить, как выглядят таблицы (ширина границ, цвет границ, цвет фона и др.) и изображения (ширина границ, расположение, вертикального и горизонтального полей вокруг изображения). После определения первого стиля сайта указываете имя файла, в котором он будет храниться. При определении очередного стиля вы уже будете ссылаться на этот файл.

Следующие два средства оптимизации вашей работы — библиотека (Library) и шаблоны (Templates). Библиотека (Рис. 5) работает по схожему с Snippets‘ами принципу. Отличие состоит в том, что Dreamweaver фиксирует изменения в библиотечных элементах (Library item) и обновляет все зависимые страницы. Для того чтобы отделить для себя item‘ы от обычного кода, Dreamweaver вставляет следующее:

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

Шаблоны полностью управляют структурой страниц. В Dreamweaver MX добавлены совершенно новые функции работы с ними, появилась специальная закладка для шаблонов на панели Insert (Рис. 6), но общий принцип, использованный в предыдущей версии, разработчики Macromedia оставили. Сначала создается обычная страница HTML, которая сохраняется как шаблон (File > Save as Template). В шаблоне определяются, какие области будут общими для всех страниц. Они остаются без изменения. На созданной по шаблону веб-странице эти статичные области недоступны для изменения. После внесения изменений в шаблон эти области автоматически обновятся на всех зависимых страницах. К тем же элементам, которые меняются от страницы к странице, применяется один из четырех типов областей Dreamweaver‘a MX. Изменяемой областью может быть таблица, ячейка, содержимое ячейки, слой, содержимое слоя. Если вы делаете весь слой изменяемым, то сможете изменять его атрибуты и его содержимое, иначе — лишь его содержимое. То же самое касается и ячеек. Если в 4-й версии Dreamweaver был только один тип области —редактируемая область (Editable region), то в MX появились 3 новых:

Повторяющаяся область (Repeating region) — подразделяется на две категории: повторяющаяся область, которая не может быть редактирована, и редактируемая повторяющаяся таблица (repeating table). Повторяющаяся область может копироваться сколько угодно. Чтобы изменить ее, необходимо внутри поместить редактируемую область. Использование повторяющихся таблиц позволяет управлять их внешним видом, добавлять любое количество редактируемых рядов и наполнять по своему усмотрению.

Опциональная область (Optional region) — добавив такую область в шаблон, на зависящих от него страницах вы выбираете, будет ли она присутствовать на странице или нет (команда Template Properties в меню Modify).

Редактируемый атрибут тэга (Editable tag attribute) — После задания в шаблоне таких атрибутов, вы в самой странице, основанной на шаблоне, определяете, чему будет равен каждый из них (команда Template Properties в меню Modify).

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

Напоследок функция для тех, у кого есть уже сайт, написанный без использования каких-либо из описанных выше средств. И в этом случае Dreaweaver вас не подведет. Конечно, лучше потратить некоторое время на изменение кода сайта, чтобы впоследствии с ним было легче работать. Когда же это по каким-то причинам невозможно, то на помощь приходит функция Find and Replace. Она традиционно находится в меню Edit. Первым делом вы выбираете, где будете заменять, т.е. текущий документ, весь сайт, выбранные файлы либо папку (Рис. 7). Далее — что заменяем: текст, код, расширенный текст, определенный тэг. Возможности этой функции очень велики, используя ее, вы вряд ли столкнетесь с проблемой глобальной замены по всему сайту.

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

Идёт загрузка...

Данную страницу никто не комментировал. Вы можете стать первым.

Ваше имя:
Ваша почта:
Комментарий:
Введите символы или вычислите пример: * Обновить