Краткое содержание в Интернете 1 Краткое содержание 3 часть I 10 Основы Интернета 10 Что такое Интернет 11
|
Скачати 11.08 Mb.
|
| Глава 22
Использование редакторов веб-страниц Код для веб-страниц создается с помощью языка гипертекстовой разметки HTML (Hyper Text Markup Language), использование тегов которого обеспечивает управление расположением и форматом графических и текстовых объектов, видимых на веб-странице (см. главу 21). Создавая собственные веб-страницы, вы можете набирать теги в текстовом редакторе, но большинство веб-мастеров предпочитают использовать с этой целью редакторы веб-страниц, в которых теги HTML генерируются автоматически. (При необходимости такой код можно изменить вручную.) В этой главе рассказывается о том, как создавать страницы и узлы с использованием редакторов веб-страниц. Речь пойдет о таких популярных приложениях, как FrontPage компании Microsoft, Dreamweaver компании Macromedia и GoLive компании Adobe. Ознакомившись с этим материалом, вы без труда сможете работать и с другими веб-редакторами. Когда все страницы будут готовы, их следует загрузить на веб-сервер. Дополнительная информация о размещении файлов на веб-сервере приведена в главе 26. Что такое редактор веб-страниц Редактор веб-страниц — это приложение, используемое разработчиками для написания кода на языке HTML. Вместо создания кода вручную, как при работе с обычным текстовым редактором и дальнейшего просмотра полученных результатов в браузере, вы можете сразу разработать макет страницы в том виде, в каком она должна быть представлена в браузере, а затем задать автоматическое генерирование HTML-кода. Основное преимущество использования редактора веб-страниц связано с экономией времени: поскольку теги HTML не нужно набирать вручную, вы можете сосредоточиться на компоновке элементов и содержимом страницы. Кроме того, большинство веб-редакторов выполняют проверку пропусков начального или конечного тегов, что вручную сделать очень сложно. Некоторые редакторы помогают разобраться с синтаксисом сложных тегов, выводя на экран диалоговые окна с параметрами тега. Редакторы GoLive и Dreamweaver предоставляют следующие возможности.
Основные возможности редакторов веб-страниц При работе в редакторе веб-страниц теги HTML можно вводить, используя команды меню или кнопки панели инструментов. Хотя это проще, чем писать код самостоятельно, однако все равно необходимо знание основ языка HTML, чтобы избежать ошибок в выборе кнопок панели инструментов или команд меню. Кроме того, учтите, что HTML-код, генерируемый редактором веб-страниц, не всегда оптимален и его приходится корректировать вручную. Конечно, чем проще страница, тем меньше вероятность того, что это придется делать. Потренируйтесь, выбирая различные команды меню и нажимая кнопки панелей инструментов, и посмотрите, какие изменения происходят в окне редактора кода. Все редакторы веб-страниц используют стандартные наборы кодов HTML и создают HTML-страницы, которые можно просматривать в любом браузере и редактировать в любом редакторе веб-страниц. Редакторы веб-страниц обычно различаются лишь расположением окон и наличием дополнительных средств, перечисленных выше. Программы профессионального уровня позволяют добавлять на веб-страницы более сложные объекты, такие как серверные сценарии, мультимедийные объекты и каскадные таблицы стилей CSS. Принципы работы всех редакторов веб-страниц аналогичны. С их помощью вы можете создать новую страницу, начав с пустого листа, шаблона или подсказки программы-мастера, отредактировать существующую, просмотреть, как страница будет выглядеть в браузере, и сохранить ее на диске. Создавая веб-страницы, вы можете использовать следующие элементы.
Большинство редакторов позволяют в процессе проектирования веб-страницы просматривать, как она будет выглядеть в окне браузера. В одних редакторах для этих целей предусмотрен встроенный браузер, другие же передают веб-страницу браузеру, установленному на компьютере. В некоторые редакторы встроена программа 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 Файл Правка Вид Вставка Формат Сервис Таблица Рамки Окно Справка □ -
_4.htm X _5.htm \ А кения ы пки )е эту <ув явление 08J Обычный Представл.. _3.htm X Веб-страница для семейной коллекции фотографий Коллекция фотографий
- 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) выберите один из возможных шаблонов для построения узла. Некоторые из них описаны ниже.
В редакторе FrontPage по умолчанию каждый веб-узел создается в виде отдельной подпапки Мои веб-узлы в папке Мои документы. При работе в среде операционной системы Windows 2000/ХР вы можете установить на своем компьютере сервер IIS (Internet Information Server), позволяющий создать собственный веб-узел. Если вы планируете использовать расширения FrontPage, созданные не в HTML, установка IIS при проектировании веб-узла избавит от необходимости поддерживать соединение с веб-сервером. Если ваш веб-сервер не поддерживает расширения FrontPage, для локальных копий файлов применяйте папку Мои веб-узлы (учтите, что страницы, использующие эти файлы, не будут работать после их загрузки на веб-сервер). СОВЕТ Создав новый веб-узел, выберите команду Сервис ► Настройка веб-узла, откройте вкладку Дополнительно и установите флажок Показать скрытые файлы и папки. Такие папки нужны только для серверов, на которых используются расширения FrontPage, поэтому нет необходимости загружать их при публикации файлов своего веб-узла на сервере. Одно из достоинств программы FrontPage состоит в том, что проектирование документов осуществляется в режиме WYSIWYG. Это позволяет мгновенно оценить, как будет выглядеть веб-страница, опубликованная в Интернете. Кроме того, у вас есть возможность вручную отредактировать HTML-код, сгенерированный редактором, для чего необходимо щелкнуть на вкладке HTML в окне редактора. Приемы работы с кодом в данном окне такие же, как и в окне любого текстового редактора. Установка параметров страниц Параметры, которые будут использоваться по умолчанию для новых веб-стра- ниц, задаются в диалоговом окне Настройки страниц. Для того чтобы открыть указанное окно, выберите команду Сервис ► Параметры страницы. Всегда проверяйте эти установки при создании нового веб-узла, так как в дальнейшем они будут применяться ко всем новым страницам данного узла. Перед началом работы над проектом задавайте только нужные параметры, поскольку вы все равно не сможете использовать те функции, которые не поддерживает ваш веб-сервер или данная версия браузера. При добавлении на страницу различных элементов в программе FrontPage автоматически генерируется соответствующий HTML-код. HTML-код страницы, открытой в режиме Обычный, можно просмотреть на вкладке HTML-код (щелкнув на соответствующем ярлыке в нижней части окна страницы). Этот код можно просматривать как во FrontPage, так и в браузере, но учтите, что в каждом случае он будет отображаться по-разному. Параметры отображения HTML-кода в окне FrontPage устанавливаются на вкладке Разметка текста HTML диалогового окна Параметры страницы.
Наиболее важные параметры создаваемого веб-узла устанавливаются на вкладке Совместимость. Здесь следует указать, с помощью каких браузеров может быть отображен ваш узел и поддержка каких серверов необходима для его работы. Если бы все пользователи работали с одними и теми же браузерами, у разработчиков не возникало бы проблем, касающихся совместимости. Однако приходится учитывать, что существуют браузеры различных версий, функционирующие на основе разных стандартов и отображающие страницы по-своему. Кроме того учитывайте, что возможности отдельных серверов различаются. Поэтому необходимо отключить все средства, которые не поддерживает сервер, куда будут загружены файлы проекта, так как вы все равно не сможете использовать их при разработке собственного веб-узла. Не забудьте выполнить установки в этом диалоговом окне, если ваш узел не поддерживает серверные расширения FrontPage и вы предполагаете, что его будут просматривать пользователи, работающие с более старыми версиями браузеров. Использование шаблонов страниц Наиболее удобный способ создания веб-страниц во FrontPage состоит в применении мастера или шаблона. Напомним, что мастер задает вам вопросы о создаваемой странице и строит ее на основании полученных ответов. При использовании шаблонов страница формируется в соответствии с образцом практически без внесения корректив со стороны разработчика. Некоторые шаблоны страниц используются для решения конкретных задач, (например, шаблон Коллекция фотографий предназначен для показа ваших цифровых фотографий). Всего редактор имеет 27 шаблонов страниц, включающих схемы страниц с одним, двумя и тремя столбцами и специальные шаблоны, в том числе шаблоны для библиографии, форм и гостевых книг. Шаблон позволяет создавать веб-узел, страницы которого оформлены в едином стиле. Воспользуйтесь командой Файл ► Создать ► Страница или веб-узел, чтобы отобразить панель задач. Выберите на этой панели элемент Шаблоны страниц, после чего на экране появится одноименное диалоговое окно. Шаблоны страниц Общие Страница рамок Таблицы стилей фотографий страми. Параметры i Добавить веб-задание
Одна колонка и , Одна колонка . Одна колонка, \ Открыть в текущей рамке Описание Одна колонка, Одна колонка; о. Регистраци. форма Страница поиска Создание страницы с узким выровненным по левому краю основным текстом. Образец
О Узкая выравненная по левому краю Узкая выровненн. Форма обрати,. Широкая колонка е.. Типичные Три колонки вопросы Форма подтвержд, Рис. 22.4. Диалоговое окно выбора шаблона страницы Подготовив оригинальный и красочный макет веб-страницы, вы можете сохранить его в виде шаблона. Для этого активизируйте команду Файл ► Сохранить как, в открывшемся окне задайте имя шаблона, а в поле Тип файла выберите элемент Шаблоны FrontPage (*tem). Редактирование веб-страниц Выбрав шаблон и создав на его основе прототип веб-страницы, можно приступать к ее редактированию. Основные способы редактирования предусматривают установку цвета фона и заголовка страницы, ввод и форматирование текста, добавление рисунков, оформление текста в виде нумерованного или маркированного списка, создание таблиц, добавление ссылок на другие веб-страницы, относящиеся к рассматриваемой теме, а также размещение горизонтальных линий на странице для обозначения конца раздела. Установка параметров форматирования Большинство основных параметров страницы устанавливаются в диалоговом окне Свойства страницы. Чтобы открыть его, выполните команду Фон или щелкните правой кнопкой мыши на странице и в появившемся меню активизируйте команду Свойства страницы. На вкладке Фон вы можете выбрать фоновый рисунок для страницы и включить эффект выделения гиперссылок при наведении на них указателя мыши, а также определить цвета для фона, текста и гиперссылок. Если вы добавляете страницу на уже существующий узел, задайте для нее те параметры форматирования, которые уже применялись при оформлении данного узла. Для этого установите флажок Получить сведения о фоне с другой страницы и укажите страницу, параметры форматирования которой нужно использовать. Это позволит обеспечить согласованное форматирование всех страниц веб-узла.
Среди инструментов установки параметров фоновых рисунков имеется флажок Подложка. Подложка — это фоновое изображение, которое остается неподвижным при прокручивании текста или рисунков на странице. Учтите, что такую возможность поддерживают не все браузеры, поэтому применять ее следует осторожно. На вкладках диалогового окна свойств страницы имеется еще ряд инструментов, с помощью которых можно изменять параметры страницы. Поле Название на вкладке Общие позволяет добавить текст, который будет появляться в строке заголовка при отображении страницы в браузере. Используя вкладку Поля, можно задать размер верхнего и левого полей (в пикселах). По умолчанию (флажки не установлены) размеры полей составляют 10 пикселов. На вкладке Другие можно задать информацию о странице, которая будет добавлена в теги <МЕТА>. Щелкните на кнопке Добавить и введите имя тега <МЕТА> в поле Имя. В поле Значение: введите текст, например несколько ключевых слов или описание страницы. Вставка и форматирование текста После создания пустой страницы и папки для файлов HTML введите текст, который должен отображаться на странице, и отформатируйте его с помощью кнопок панели форматирования, которая расположена в верхней части окна FrontPage. Microsoft стремится унифицировать интерфейсы своих программ, поэтому инструменты форматирования текста в редакторе FrontPage очень похожи на аналогичные инструменты в текстовом редакторе Microsoft Word. Если у вас есть опыт работы с этим текстовым редактором, вы без труда выполните форматирование текста во FrontPage. Команды форматирования текста также расположены в меню Формат. Меню Формат включает команду, которую вы будете часто применять в работе над собственными проектами, — Эффекты DHTML. Данная команда позволяет задать анимационные эффекты для выбранного объекта. После ее активизации на экране появляется приведенная на рис. 22.5 панель инструментов.
|
