Краткое содержание в Интернете 1 Краткое содержание 3 часть I 10 Основы Интернета 10 Что такое Интернет 11



Скачати 11.08 Mb.
Сторінка29/35
Дата конвертації31.03.2017
Розмір11.08 Mb.
1   ...   25   26   27   28   29   30   31   32   ...   35
Глава 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 компании Micro­soft, 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, выберите команду Пуск ► Все программы ► Mi­crosoft 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= :=



Й □ ^ ^ А . .

Создание веб-страни! ▼ х Открытие страницы

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

Вкл Двойной щелчок

» Применить Вылет

» Вверх направо по словам

- Удалить эффект [§£|
1   ...   25   26   27   28   29   30   31   32   ...   35


База даних захищена авторським правом ©lecture.in.ua 2016
звернутися до адміністрації

    Головна сторінка