Глава 22
Использование редакторов веб-страниц
Код для веб-страниц создается с помощью языка гипертекстовой разметки HTML (Hyper Text Markup Language), использование тегов которого обеспечивает управление расположением и форматом графических и текстовых объектов, видимых на веб-странице (см. главу 21). Создавая собственные веб-страницы, вы можете набирать теги в текстовом редакторе, но большинство веб-мастеров предпочитают использовать с этой целью редакторы веб-страниц, в которых теги HTML генерируются автоматически. (При необходимости такой код можно изменить вручную.) В этой главе рассказывается о том, как создавать страницы и узлы с использованием редакторов веб-страниц. Речь пойдет о таких популярных приложениях, как FrontPage компании Microsoft, Dreamweaver компании Macromedia и GoLive компании Adobe. Ознакомившись с этим материалом, вы без труда сможете работать и с другими веб-редакторами.
Когда все страницы будут готовы, их следует загрузить на веб-сервер. Дополнительная информация о размещении файлов на веб-сервере приведена в главе 26.
Что такое редактор веб-страниц
Редактор веб-страниц — это приложение, используемое разработчиками для написания кода на языке HTML. Вместо создания кода вручную, как при работе с обычным текстовым редактором и дальнейшего просмотра полученных результатов в браузере, вы можете сразу разработать макет страницы в том виде, в каком она должна быть представлена в браузере, а затем задать автоматическое генерирование HTML-кода.
Основное преимущество использования редактора веб-страниц связано с экономией времени: поскольку теги HTML не нужно набирать вручную, вы можете сосредоточиться на компоновке элементов и содержимом страницы. Кроме того, большинство веб-редакторов выполняют проверку пропусков начального или конечного тегов, что вручную сделать очень сложно. Некоторые редакторы помогают разобраться с синтаксисом сложных тегов, выводя на экран диалоговые окна с параметрами тега. Редакторы GoLive и Dreamweaver предоставляют следующие возможности.
-
Справка HTML. Содержит информацию о параметрах каждого тега HTML и атрибутах любого объекта.
-
Средства редактирования графики. Программа содержит встроенный графический редактор или связана с графическим редактором, который можно использовать для создания и обновления изображений на веб-странице.
-
Средства управления узлом. Обеспечивают отслеживание содержащихся на узле файлов (например, HTML-документов, графических изображений и таблиц стилей CSS). Кроме того, редактор может проверять правильность связей на узле — если вы переименуете файл, редактор обновит все соответствующие ссылки. Некоторые редакторы веб-страниц могут создавать карты расположения файлов на узле.
-
Встроенная возможность передачи файлов. Избавляет от необходимости использовать отдельную программу FTP для загрузки файлов созданного узла на веб-сервер.
-
Функция проверки корректности ссылок. Проверяет, действительны ли внешние ссылки (ссылки на страницы, находящиеся вне узла).
-
Средства создания сценариев. Представляют собой встроенные простые программы JavaScript, позволяющие создавать различные часто используемые сценарии посредством команд меню.
Основные возможности редакторов веб-страниц
При работе в редакторе веб-страниц теги HTML можно вводить, используя команды меню или кнопки панели инструментов. Хотя это проще, чем писать код самостоятельно, однако все равно необходимо знание основ языка HTML, чтобы избежать ошибок в выборе кнопок панели инструментов или команд меню. Кроме того, учтите, что HTML-код, генерируемый редактором веб-страниц, не всегда оптимален и его приходится корректировать вручную. Конечно, чем проще страница, тем меньше вероятность того, что это придется делать. Потренируйтесь, выбирая различные команды меню и нажимая кнопки панелей инструментов, и посмотрите, какие изменения происходят в окне редактора кода.
Все редакторы веб-страниц используют стандартные наборы кодов HTML и создают HTML-страницы, которые можно просматривать в любом браузере и редактировать в любом редакторе веб-страниц. Редакторы веб-страниц обычно различаются лишь расположением окон и наличием дополнительных средств, перечисленных выше. Программы профессионального уровня позволяют добавлять на веб-страницы более сложные объекты, такие как серверные сценарии, мультимедийные объекты и каскадные таблицы стилей CSS.
Принципы работы всех редакторов веб-страниц аналогичны. С их помощью вы можете создать новую страницу, начав с пустого листа, шаблона или подсказки программы-мастера, отредактировать существующую, просмотреть, как страница будет выглядеть в браузере, и сохранить ее на диске. Создавая веб-страницы, вы можете использовать следующие элементы.
-
Текст. Введите текст, который будет размещен на веб-странице, и при необходимости измените его, воспользовавшись кнопками форматирования панели инструментов. Инструменты форматирования в редакторах веб-страниц подобны таковым в текстовом редакторе. Если же вам потребуется отформатировать текст большого объема, обратитесь к таблицам стилей.
-
Изображение. Чтобы поместить на веб-страницу рисунок, щелкните на кнопке Insert Image (Вставить рисунок) и укажите имя файла, а также размер рисунка на странице.
-
Списки. Если требуется отформатировать инструкции в виде нумерованного или маркированного списка, щелкните на соответствующей кнопке, расположенной на панели инструментов.
-
Таблицы. Для создания таблицы используйте кнопку Insert Table (Вставить таблицу), которая имеется в большинстве редакторов веб-страниц. Затем в ячейку таблицы можно поместить текст или рисунок.
-
Ссылки. Чтобы добавить на свою страницу ссылки на другие веб-страницы, которые имеют отношение к рассматриваемой теме, щелкните на кнопке Insert Link (Вставить ссылку).
-
Линии. Если нужно отметить конец раздела, выполните щелчок на соответствующей кнопке панели инструментов, поместите на страницу горизонтальную линию, отмечающую конец раздела.
Большинство редакторов позволяют в процессе проектирования веб-страницы просматривать, как она будет выглядеть в окне браузера. В одних редакторах для этих целей предусмотрен встроенный браузер, другие же передают веб-страницу браузеру, установленному на компьютере. В некоторые редакторы встроена программа FTP, позволяющая выгрузить созданную веб-страницу и содержащиеся на ней изображения на веб-сервер.
Где найти редактор веб-страниц
Редакторы веб-страниц поставляются в виде отдельных приложений либо в составе пакетов программного обеспечения Интернета. В настоящей главе описано, как использовать некоторые популярные редакторы: FrontPage компании Microsoft, Dreamweaver компании Macromedia и GoLive компании Adobe. Все они работают в системах Windows 98/МЕ/2000/ХР. Программы Dreamweaver и GoLive можно также использовать на компьютерах Macintosh, a GoLive 6 работает и в системе Mac OS X.
Кроме названных существуют десятки превосходных редакторов веб-страниц. Для получения информации обо всех редакторах, доступных в Веб, воспользуйтесь какой-либо поисковой системой и выполните поиск по критерию «HTML editors» (редакторы HTML). Можно также зайти на сайт www.download.com и выбрать команду Web Developer ► HTML Editors, или на сайте www.versiontracker.com щелкнуть на названии используемой вами операционной системы и выбрать ссылку HTML Tools. Информацию о том, как загружать и устанавливать программное обеспечение, вы найдете в главе 28.
Создание и редактирование веб-страниц с помощью FrontPage
FrontPage — это редактор веб-страниц, разработанный компанией Microsoft. Он идеально подходит для пользователя, желающего создать простой коммерческий
узел или личную веб-страницу. (Ранее FrontPage поставлялся в составе пакета Microsoft Office.) В этом разделе описываются версии редактора FrontPage 2000 и 2002. Дополнительную информацию об этой программе можно получить на сайте www.microsoft.com/frontpage.
Чтобы запустить редактор FrontPage, выберите команду Пуск ► Все программы ► Microsoft FrontPage (не изменяйте установки, заданные по умолчанию в стартовом диалоговом окне редактора FrontPage, которое представлено на рис. 22.1), и можете приступать к созданию собственного веб-узла.
ВНИМАНИЕ
редактор FrontPage поддерживает нестандартные серверные расширения Веб, которые работают на серверах с установленной программой FrontPage Server Extensions.
К Microsoft FrontPage - C:\Pasko\MoM веб-уэлы\туу/е1) 81\new_page_2.htm
Файл Правка Вид Вставка Формат Сервис Таблица Рамки Окно Справка □ -
_2.htm N(
_4.htm X
_5.htm \
А
кения
ы пки )е эту <ув
явление 08J
Обычный Представл..
_3.htm X
Веб-страница для семейной коллекции фотографий
Коллекция фотографий
Примечание Чтобы создать фотоальбом, дважды щег
т gL v «о -
- 3 (12 пт) т ж К Ч Ш Ш
ЦПН-Й % ®
в И А * 1= :=
1Г
Й □ ^ ^ А . .
Создание веб-страни! ▼ х Открытие страницы
new_page_l.htm new_page_2.htm index.htm new_page_l.htm Другие страницы...
Создание
Q Пустая страница ЦН Пустой веб-узел
Создание из имеющейся страницы
Й Выбор страницы... Создание с помощью шаблона
Библиография Коллекция фотографий 83 J Шаблоны страниц... !<Я Шаблоны веб-узлов...
f^f Добавление узла... [?t Справка Microsoft FrontPage * Показывать при запуске
Д g 245 сек на 28,8
свои собственные фотографии и рисунки,
подписи и описания, а также выбрать макет страницы
Переходы
Гиперссылки
И Обычный ЕЭ HTML-код ^Просмотр ■<
Рис. 22.1. Окно программы Microsoft FrontPage
Создание новой страницы
Для создания нового веб-узла с нуля выберите в области задач, расположенной в правой части окна редактора, элемент Шаблоны веб-узлов. Если эта область не отображается на экране, вызовите команду Область задач меню Вид. Начать работу по созданию веб-узла можно также с помощью команды Файл ► Создать ► Страница или веб-узел.
Щаблодо веб-узлов |?|[х|
Веб-узлы |
Веб-узел проекта
Веб-узел рабоче...
Веб-узел техническ,,
Мастер Мастер еб-импорта веб-обсуж,,
Мастер интерфейс,,
Пустой веб-узел
Одностранич ный веб-узел
Личный веб-узел
Мастер корпорати...
Параметры
Укажите расположение нового веб-узла: |C:\Pasko\MoH веб-узлы\тушеЬ82 ▼ | Обзор...
г" Добавить в текущий веб-узел
г" Требуется подключение 5SL Описание
Создание веб-узла с одной пустой страницей.
Рис. 22.2. Диалоговое окно Шаблоны веб-узлов
В открывшемся диалоговом окне (рис. 22.2) выберите один из возможных шаблонов для построения узла. Некоторые из них описаны ниже.
-
Одностраничный веб-узел. Шаблон простого веб-узла с одной пустой страницей, которую можно заполнить любыми элементами. Это наиболее часто используемый шаблон для создания узлов «с чистого листа».
-
Личный веб-узел. Шаблон узла, где предусмотрены страницы для размещения фотографий и ссылок на наиболее часто посещаемые страницы.
-
Мастер корпоративного веб-узла. Мастер создания корпоративных узлов, содержащих новости и информацию о продуктах, сервисах и услугах, предоставляемых компанией.
-
Веб-узел технической поддержки. Шаблон узла, на котором содержится информация об услугах отдельной компании.
-
Мастер интерфейса базы данных. Мастер, позволяющий создать веб-узел, посетители которого смогут установить соединение с базой данных Access для просмотра ее содержимого или ввода новой информации. На основе данного шаблона создаются страницы с расширением asp. Для построения такого узла требуется, чтобы хост поддерживал стандарт ASP (Active Server Pages — активные серверные страницы) и расширения FrontPage.
-
Мастер веб-обсуждения. Мастер, который оказывает помощь при проектировании узлов для проведения форумов (подобные возможности рассмотрены в главе 12). Для создания такого узла необходимо, чтобы хост поддерживал расширения FrontPage.
-
Мастер веб-импорта. Мастер предоставляет функции для импорта содержимого существующего веб-узла или отдельных его файлов на новый узел.
-
Веб-узел проекта. Шаблон узла, создаваемого для контроля за работой над проектом и управления таковым. Позволяет составлять отчеты и архивировать информацию.
-
Веб-узел рабочей группы на основе SharePointPoint. Шаблон узла, на котором в распоряжение каждого зарегистрированного пользователя предоставляется одна или несколько отдельных страниц. На веб-сервере должна быть установлена программа SharePoint Team Services. Данный шаблон впервые появился в редакторе FrontPage 2002.
-
Пустой веб-узел. Шаблон узла, не содержащего ни одной страницы. На экране вы увидите изображение пустой папки.
В редакторе FrontPage по умолчанию каждый веб-узел создается в виде отдельной подпапки Мои веб-узлы в папке Мои документы.
При работе в среде операционной системы Windows 2000/ХР вы можете установить на своем компьютере сервер IIS (Internet Information Server), позволяющий создать собственный веб-узел. Если вы планируете использовать расширения FrontPage, созданные не в HTML, установка IIS при проектировании веб-узла избавит от необходимости поддерживать соединение с веб-сервером. Если ваш веб-сервер не поддерживает расширения FrontPage, для локальных копий файлов применяйте папку Мои веб-узлы (учтите, что страницы, использующие эти файлы, не будут работать после их загрузки на веб-сервер).
СОВЕТ
Создав новый веб-узел, выберите команду Сервис ► Настройка веб-узла, откройте вкладку Дополнительно и установите флажок Показать скрытые файлы и папки. Такие папки нужны только для серверов, на которых используются расширения FrontPage, поэтому нет необходимости загружать их при публикации файлов своего веб-узла на сервере.
Одно из достоинств программы FrontPage состоит в том, что проектирование документов осуществляется в режиме WYSIWYG. Это позволяет мгновенно оценить, как будет выглядеть веб-страница, опубликованная в Интернете. Кроме того, у вас есть возможность вручную отредактировать HTML-код, сгенерированный редактором, для чего необходимо щелкнуть на вкладке HTML в окне редактора. Приемы работы с кодом в данном окне такие же, как и в окне любого текстового редактора.
Установка параметров страниц
Параметры, которые будут использоваться по умолчанию для новых веб-стра- ниц, задаются в диалоговом окне Настройки страниц. Для того чтобы открыть указанное окно, выберите команду Сервис ► Параметры страницы. Всегда проверяйте эти установки при создании нового веб-узла, так как в дальнейшем они будут применяться ко всем новым страницам данного узла. Перед началом работы над проектом задавайте только нужные параметры, поскольку вы все равно не сможете использовать те функции, которые не поддерживает ваш веб-сервер или данная версия браузера.
При добавлении на страницу различных элементов в программе FrontPage автоматически генерируется соответствующий HTML-код. HTML-код страницы, открытой в режиме Обычный, можно просмотреть на вкладке HTML-код (щелкнув на соответствующем ярлыке в нижней части окна страницы). Этот код можно просматривать как во FrontPage, так и в браузере, но учтите, что в каждом случае он будет отображаться по-разному.
Параметры отображения HTML-кода в окне FrontPage устанавливаются на вкладке Разметка текста HTML диалогового окна Параметры страницы.
Рис. 22.3. Вкладка Совместимость диалогового окна Параметры страницы
Наиболее важные параметры создаваемого веб-узла устанавливаются на вкладке Совместимость. Здесь следует указать, с помощью каких браузеров может быть отображен ваш узел и поддержка каких серверов необходима для его работы. Если бы все пользователи работали с одними и теми же браузерами, у разработчиков не возникало бы проблем, касающихся совместимости. Однако приходится учитывать, что существуют браузеры различных версий, функционирующие на основе разных стандартов и отображающие страницы по-своему. Кроме того учитывайте, что возможности отдельных серверов различаются. Поэтому необходимо отключить все средства, которые не поддерживает сервер, куда будут загружены файлы проекта, так как вы все равно не сможете использовать их при разработке
собственного веб-узла. Не забудьте выполнить установки в этом диалоговом окне, если ваш узел не поддерживает серверные расширения FrontPage и вы предполагаете, что его будут просматривать пользователи, работающие с более старыми версиями браузеров.
Использование шаблонов страниц
Наиболее удобный способ создания веб-страниц во FrontPage состоит в применении мастера или шаблона. Напомним, что мастер задает вам вопросы о создаваемой странице и строит ее на основании полученных ответов. При использовании шаблонов страница формируется в соответствии с образцом практически без внесения корректив со стороны разработчика. Некоторые шаблоны страниц используются для решения конкретных задач, (например, шаблон Коллекция фотографий предназначен для показа ваших цифровых фотографий). Всего редактор имеет 27 шаблонов страниц, включающих схемы страниц с одним, двумя и тремя столбцами и специальные шаблоны, в том числе шаблоны для библиографии, форм и гостевых книг. Шаблон позволяет создавать веб-узел, страницы которого оформлены в едином стиле.
Воспользуйтесь командой Файл ► Создать ► Страница или веб-узел, чтобы отобразить панель задач. Выберите на этой панели элемент Шаблоны страниц, после чего на экране появится одноименное диалоговое окно.
Шаблоны страниц
Общие Страница рамок Таблицы стилей
фотографий страми.
Параметры i Добавить веб-задание
Одна колонка .
Одна колонка и ,
Одна колонка .
Одна колонка,
\ Открыть в текущей рамке Описание
Одна колонка,
Одна колонка; о.
Регистраци. форма
Страница поиска
Создание страницы с узким выровненным по левому краю основным текстом.
Образец
О
Узкая выравненная по левому краю
Узкая выровненн.
Форма обрати,.
Широкая колонка е..
Типичные Три колонки вопросы
Форма подтвержд,
Рис. 22.4. Диалоговое окно выбора шаблона страницы
Подготовив оригинальный и красочный макет веб-страницы, вы можете сохранить его в виде шаблона. Для этого активизируйте команду Файл ► Сохранить как, в открывшемся окне задайте имя шаблона, а в поле Тип файла выберите элемент Шаблоны FrontPage (*tem).
Редактирование веб-страниц
Выбрав шаблон и создав на его основе прототип веб-страницы, можно приступать к ее редактированию. Основные способы редактирования предусматривают установку цвета фона и заголовка страницы, ввод и форматирование текста, добавление рисунков, оформление текста в виде нумерованного или маркированного списка, создание таблиц, добавление ссылок на другие веб-страницы, относящиеся к рассматриваемой теме, а также размещение горизонтальных линий на странице для обозначения конца раздела.
Установка параметров форматирования
Большинство основных параметров страницы устанавливаются в диалоговом окне Свойства страницы. Чтобы открыть его, выполните команду Фон или щелкните правой кнопкой мыши на странице и в появившемся меню активизируйте команду Свойства страницы. На вкладке Фон вы можете выбрать фоновый рисунок для страницы и включить эффект выделения гиперссылок при наведении на них указателя мыши, а также определить цвета для фона, текста и гиперссылок.
Если вы добавляете страницу на уже существующий узел, задайте для нее те параметры форматирования, которые уже применялись при оформлении данного узла. Для этого установите флажок Получить сведения о фоне с другой страницы и укажите страницу, параметры форматирования которой нужно использовать. Это позволит обеспечить согласованное форматирование всех страниц веб-узла.
СОВЕТ
Среди инструментов установки параметров фоновых рисунков имеется флажок Подложка. Подложка — это фоновое изображение, которое остается неподвижным при прокручивании текста или рисунков на странице. Учтите, что такую возможность поддерживают не все браузеры, поэтому применять ее следует осторожно.
На вкладках диалогового окна свойств страницы имеется еще ряд инструментов, с помощью которых можно изменять параметры страницы. Поле Название на вкладке Общие позволяет добавить текст, который будет появляться в строке заголовка при отображении страницы в браузере. Используя вкладку Поля, можно задать размер верхнего и левого полей (в пикселах). По умолчанию (флажки не установлены) размеры полей составляют 10 пикселов. На вкладке Другие можно задать информацию о странице, которая будет добавлена в теги <МЕТА>. Щелкните на кнопке Добавить и введите имя тега <МЕТА> в поле Имя. В поле Значение: введите текст, например несколько ключевых слов или описание страницы.
Вставка и форматирование текста
После создания пустой страницы и папки для файлов HTML введите текст, который должен отображаться на странице, и отформатируйте его с помощью кнопок панели форматирования, которая расположена в верхней части окна FrontPage. Microsoft стремится унифицировать интерфейсы своих программ, поэтому инструменты форматирования текста в редакторе FrontPage очень похожи на аналогичные инструменты в текстовом редакторе Microsoft Word. Если у вас есть опыт работы с этим текстовым редактором, вы без труда выполните форматирование текста во FrontPage. Команды форматирования текста также расположены в меню Формат.
Меню Формат включает команду, которую вы будете часто применять в работе над собственными проектами, — Эффекты DHTML. Данная команда позволяет задать анимационные эффекты для выбранного объекта. После ее активизации на экране появляется приведенная на рис. 22.5 панель инструментов.
Эффекты DHTML
|
|
|
т X
|
Вкл Двойной щелчок
|
» Применить Вылет
|
» Вверх направо по словам
|
- Удалить эффект [§£|
| |