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



Скачати 11.08 Mb.
Сторінка30/35
Дата конвертації31.03.2017
Розмір11.08 Mb.
1   ...   27   28   29   30   31   32   33   34   35



Рис. 22.5. Панель инструментов для задания анимационных эффектов


В поле Вкл этой панели можно указать событие, которое будет активизировать эффект. В поле Применить представлен список эффектов, а следующее поле по­зволяет задать параметры выбранного эффекта. Чтобы отменить любой эффект, следует щелкнуть на кнопке Удалить эффект.



СОВЕТ

Если ваш веб-узел включает довольно большое число страниц, подумайте, не восполь­зоваться ли для их форматирования таблицами стилей (информация о таблицах стилей содержится в главе 21).

Добавление ссылок и рисунков

Любой объект, находящийся на странице, можно использовать в качестве гипер­ссылки. Выполнив щелчок на таком объекте, вы можете перейти по заданному URL-адресу или указанной закладке. При отображении в окне браузера гипер­ссылка обычно выделяется цветом и подчеркиванием (в браузере можно задать, каким цветом выделить гиперссылку и нужно ли ее подчеркивать).

Для добавления на страницу гиперссылки выберите текст или изображение и щелкните на кнопке Гиперссылка панели инструментов. В результате отобразит­ся диалоговое окно Добавление гиперссылки (рис. 22.6).

В области Связать с: выберите элемент файлом, веб-страницей. Теперь вы можете ввести адрес URL или имя веб-страницы, к которой должен быть осуществлен переход по гиперссылке. Для поиска нужной страницы воспользуйтесь кнопкой Интернет (с изображением земного шара). После выполнения всех установок в диалоговом окне щелкните на кнопке ОК.

В качестве гиперссылки может выступать не только текст, но и целое графиче­ское изображение или его фрагменты. Чтобы использовать графическое изобра­жение как гиперссылку, щелкните на кнопке Добавить рисунок из файла панели инструментов FrontPage, выберите рисунок, который вы хотите поместить на страницу в качестве гиперссылки, и щелкните на кнопке ОК. Если возникнет не­обходимость отредактировать рисунок, например изменить цвет фона или обрам­ление, выполните двойной щелчок на этом рисунке, чтобы открыть приложение, в котором он был создан.


До ба вле н ие гн пе рссылк и



Подсказка..



Рис. 22.6. Диалоговое окно Добавление гиперссылки


Вставка таблиц

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

Для создания таблицы выберите команду Таблица ► Вставить ► Таблица и в открыв­шемся диалоговом окне Вставка таблицы укажите основные параметры таблицы. Вы можете установить следующие параметры: количество строк и столбцов, ши­рину таблицы, толщину линий, разделяющих ячейки и ограничивающих табли­цу, величину интервалов между содержимым и внутренним краем границ ячей­ки, тип выравнивания таблицы и т. д. Задав нужные значения, щелкните на кнопке ОК. В дальнейшем значения параметров таблицы можно изменить. Для этого нужно щелкнуть правой кнопкой мыши внутри таблицы и в контекстном меню выбрать команду Свойства таблицы.

Использование тем в редакторе FrontPage

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

Выбор и назначение тем производится в диалоговом окне Темы (рис. 22.7), кото­рое открывается с помощью команды Формат ► Темы. Переключатели в левом верхнем углу страницы позволяют указать, к каким страницам будет применять­ся тема. Она может быть применена к одной или нескольким страницам (пере­ключатель к выбранной странице), а также ко всему веб-узлу (переключатель ко всем страницам). Если тема задана для всех страниц веб-узла, она становится те­мой, используемой на этом узле по умолчанию. При создании новых страниц тема,
заданная по умолчанию, применяется автоматически. Если тема, используемая по умолчанию, была изменена или удалена, это отразится на всех страницах веб-узла.












ш




ш




Кнопка



Кнопка



Кнопка










^ Маркированный список 1 ■ Маркированный список 2 ■ Маркированный список 3

Образец темы:



Применить тему: ^ ко всем страницам к выбранным страницам

Контраст

л

Копирка




Леденцы




Ледник




Лезвие




Листопад




Лоскутки




Магистраль




Международная




Модули




Мультипликация




Паспорт




Перетекание




Песчаник




Пиксел




Пласты




ПаЛГмПН'И'У

«II

<

9

Яркие цвета Активные рисунки Фоновый рисунок Г" Применить с помощью CS5

-Pi

Объявление

Стиль заголовка 1
Стиль заголовка 2


Сохранить



Удалить
Образец обычного текста

Предполагаемые изменения Ответа,,,



Сохранить как.

Изменить І







Рис. 22.7. Редактор FrontPage поставляется со встроенными темами

В нижней части диалогового окна FrontPage Темы расположены четыре флажка, три из которых предназначены для задания дополнительных эффектов. Установ­ка флажка Яркие цвета приводит к использованию более насыщенных цветов. Флажок Фоновый рисунок позволяет заменить сплошной фон графическими фо­новыми изображениями, расположенными в виде мозаики. Флажок Активные ри­сунки служит для преобразования навигационных кнопок на страницах веб-узла в динамические элементы 0ауа-апплеты). При установке любого из флажков из­менения немедленно отображаются в области предварительного просмотра. По­экспериментируйте с установками в этом окне, пока не выберете нужные пара­метры, после чего щелкните на кнопке ОК.

На странице веб-узла, для которого задана тема, можно выполнять обычные опе­рации форматирования (например, изменять цвет и размер шрифта, выравнива­ние абзаца). Однако изменение некоторых атрибутов страницы в режиме Обыч­ный при использовании темы невозможно, в частности нельзя изменить фоновое изображение страницы и цвет гиперссылок. Указанные атрибуты доступны для изменения лишь при модификации параметров темы, используемой для оформ­ления страницы, в диалоговом окне Темы.

Чтобы изменить тему, необходимо выполнить щелчок на кнопке Изменить, и с по­мощью кнопок Цвета, Графика и Текст (см. рис. 22.7) внести необход имые изменения.


После модификации темы изменения следует сохранить с помощью кнопку Сох­ранить как.

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

Создание рамок на страницах

Рамки — это области, размещенные на веб-странице и предназначенные для ото­бражения содержимого других веб-страниц. На странице можно расположить любое количество рамок.



ПРИМЕЧАНИЕ

Кроме термина «рамка» для обозначения таких областей используются термины «кадр» и «фрейм». В данной главе при описании FrontPage используется термин «рамка», по­скольку он применяется в справочной системе этой программы.

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

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

Откройте область задач, воспользовавшись командой Файл ► Создать ► Страница или веб-узел, и выберите элемент Шаблоны страниц. В отобразившемся диалоговом окне перейдите на вкладку Страница рамок. Последовательно выбирая шаблоны, озна­комьтесь с их описанием. Затем отметьте подходящий шаблон, например Колон­титулы и оглавление, и щелкните на кнопке ОК.

В результате будет создана страница (рис. 22.8), включающая четыре рамки, каж­дая из которых содержит две кнопки: Задать начальную страницу и Создать страни­цу. Первая используется для выбора страницы, отображающейся в рамке после загрузки страницы рамок в браузер. Щелчок на второй кнопке приводит к созда­нию пустой страницы.

При необходимости размеры рамки можно изменить. Для этого нужно перета­щить ее край или щелкнуть правой кнопкой мыши на рамке и выбрать команду Свойства рамки. Если вы хотите создать страницу рамок, которая должна загру­жаться в браузеры, не поддерживающие рамки, щелкните на кнопке Без рамок в нижней части окна и измените содержимое страницы. На этой странице долж­ны быть ссылки на страницы с основным содержимым вашего веб-узла.
К Microsoft FrontPage -C:\Pasko\MoM ne6-y3/ibiVmyweb81 Vnew page_6.htm

Файл Правка Вид Вставка Формат Сервис Таблица Рамки Окно Справка Введите вопрос







е :е іщ іщ | и - £ • а .


ж к ч в в в в А


Представл... |/ riew_page_2.htm* \ new_page_3.htm \ new_page_4.htm \ new_page_5.htm Упем»_раде _6.htm \


Страница








Задать начальную страницу..

Соадать страницу
Задать начальную страницу.. Создать страницу





Переходы

Рис. 22.8. Страница с рамками, созданная на основе шаблона Колонтитулы и оглавление

Компоненты редактора FrontPage

Часто от вас требуется нечто большее, чем создание простой HTML-страницы. Может возникнуть необходимость добавить на узел дополнительные компонен­ты, такие как формы, средства баз данных или элементы управления ActiveX. Во FrontPage для этого используются команды меню Формат. Если ваш узел не под­держивает серверные расширения FrontPage (компоненты WebBot), некоторые из этих компонентов, например счетчик страниц, работать не будут, поэтому их всегда следует проверять перед загрузкой на веб-сервер.

СОВЕТ

Если вы установите параметры совместимости на соответствующей вкладке диалого­вого окна Параметры страницы (команда Сервис ► Параметры страницы), некоторые элементы меню и окон могут стать недоступными, что позволит избежать загрузки не­нужных элементов на ваш узел.

Дополнительную информацию о FrontPage можно получить, обратившись по ад­ресу www.microsoftfrontpage.com.


Создание и редактирование веб-страниц в Dreamweaver

Dreamweaver MX — профессиональный редактор веб-страниц, созданный компа­нией Macromedia (производителем популярной мультимедийной программы Flash.). Этот редактор предоставляет разработчику современные инструменталь­ные средства проектирования и компоновки веб-узлов, а также дает возможность применять такие динамические средства HTML, как анимационные слои, без на­писания кода. Программа Dreamweaver MX является полностью настраиваемой. Режим проверки пригодности для конкретного браузера позволяет убедиться в отсутствии проблем, которые могут возникнуть при использовании узла для любых популярных платформ и браузеров.

Информацию о программе (и бесплатную тестовую версию) можно получить на сайте компании Macromedia по адресу www.macromedia.com.

Создание новой страницы

После запуска Dreamweaver на экране появляется главное окно редактора, пока­занное на рис. 22.9. Кроме него, вы увидите несколько других окон и панелей с ин­струментами проектирования. Закрыть их можно стандартным для среды Win­dows способом, выполнив щелчок на кнопке закрытия окна или воспользовав­шись командами меню Windows.

Sf Macromedia Dreamweaver MX [List.Gala.Net / Бизнес и Экономика / Банки и Финансы (Temp/Web-site.h.

j File Edit View Insert Modify Text Commands Site Window Help


D ^
111] Ш I Ш I Title: |Li8tGala.Net t Б нанес и 3 кон] flfc I Q {}, Ш,

di p-


Common Layout Tent Tables Frames Forms Templates Characters Media Head Script Application





.BODY bottomMargin=10 bgColor=8ffff(f leftMargin=0 topMargin=5 rightMaigin=0 rnarginheight=' '0'' marginwidth="0"> Stsnd&dHeadei ■■><. N 01N D EX>

TABLE cellS рас in g=0 cellPadding-1 width="100r border=0;




; * Design

CSS Styles HI ML btyles Behaviors] @ Apply Syles Q Edit Styles

of HblueSmall of НЫиеТдад of Hblui-TeaiBold of Hbm of HsraiiSmill of HgraijTwet Small

<^TD>

Layout View









Website.htm p

e

mala Nat


body>

Рис. 22.9. В редакторе Dreamweaver основное окно редактирования появляется вместе с окнами с дополнительной информацией и средствами разработки

Book.: Us-ableNet Aceessibiliq Reference Rule:

Ж

w

UsableNet Accessibility Reference is based on reference material developed by UsableNet* an industry leader in developing easy- to-use software to automate usability and accessibility testing and repair. For more information on UsableNet:

http ://'.'."■■■"■■■'■ usablenet. ■
€l Л •

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

СОВЕТ

Проследите, чтобы на экране было открыто окно объектов (Common), содержащее ин­струменты для выполнения многих задач. Если оно не появилось при запуске програм­мы, выберите команду Windows ► Objects или нажмите Ctrl+F2.

Когда будете готовы к загрузке веб-страниц на сервер, обратитесь к главе 26, где объясняется, как использовать встроенную программу FTP редактора Dream­weaver.

Редактирование объектов страницы

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

Если окно инспектора свойств отсутствует на экране, выберите команду Win­dow Properties или нажмите комбинацию клавиш Ctrl+F3. Внешний вид окна по­стоянно меняется, но вы быстро к этому привыкнете. Данное окно незаменимо при форматировании различных объектов веб-страниц, в частности текста и гра­фики.



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

  • Графическое изображение. Отметив изображение, отобразите окно Proper­ties, чтобы задать имя файла, размеры по горизонтали и вертикали, способ вы­равнивания, параметры рамки или размеры пустого пространства вокруг изо­бражения.

СОВЕТ

Для изменения свойств веб-страницы (таких как текст заголовка, цвет фона, фоновое изображение, цвет текста и ссылок) выберите команду Modify ► Page Properties, после чего отобразится диалоговое окно Page Properties.

Page Properties






Title: a.Net 1 Бизнес и Экономика 1 Банки и Финансы

Background Image: Bear.gif | Browse...

Background: ffifffff

Tent: | B00FF99 | Visited Links: |«003300

Links: Q SFF6633 Active Links: J' "

Left Margin: 0 Margin Width: C|

Top Margin: 5 Margin Height:

Document Encoding: Korean (EUC-KR) v | Reloac

Tracing Image: file:///C|/Prograrn Files/Adobe/Ph j Browse

Image Transparency: 100?

Transparent Opaque

Document Folder: C:\Ternp\


OK



Apply

Cancel

ttFF9900

Help
Site Folder: C:\Pasko\Unnarned Site 1 \





Рис. 22.10. Диалоговое окно свойств страницы

Добавление ссылок

Для добавления на страницу гиперссылки выберите текст или изображение, ко­торые вы хотите использовать в качестве ссылки, и перейдите в окно инспектора свойств. Введите ссылку в поле Link (если же это ссылка на веб-страницу, кото­рую вы ранее редактировали в Dreamweaver, выберите ее в списке). Или же щелкните на значке папки справа от поля Link, чтобы указать путь к файлу, на ко­торый нужно установить ссылку.

Форматирование текста и изображений в таблицах

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

Использование фреймов в редакторе Dreamweaver

При необходимости добавить фрейм на страницу, создаваемую в редакторе Dream­weaver, выберите команду Insert Frame. На экране появится список, элементы

которого обозначают варианты размещения фреймов на странице. Переход меж­ду фреймами осуществляется с помощью мыши. Добавьте текст, вставьте графи­ческое изображение так, как вы бы это сделали при создании любой другой веб-страницы. Однако учтите, что при сохранении на диске имя файла каждого фрейма должно быть указано отдельно. Для сохранения фрейма щелкните на нем и выберите команду File Save Frame As. Вы можете сохранить все фреймы одно­временно, выбрав команду File Save All Frames, однако и в этом случае вам при­дется присваивать имена каждому фрейму по отдельности.

Дополнительные ВОЗМОЖНОСТИ программы Dreamweaver

Редактор Dreamweaver обладает несколькими функциями, применение которых существенно упрощает выполнение таких сложных задач, как разработка изобра­жений с анимационными эффектами, добавление на страницы изображений, создан­ных во Flash, размещение страниц по слоям и редактирование сложной графики.

Разработка изображений с анимационным эффектом

Для создания изображения с анимационным эффектом, например таким, при ко­тором одна картинка сменяется другой, если навести на нее указатель мыши, обычно требуется знание основ языка JavaScript. Однако при работе в Dream­weaver можно обойтись без этого. Выберите команду Insert Interactive Images Rollover Image, и программа Dreamweaver выведет на экран диалоговое окно, где вы сможете указать имена двух графических файлов (исходного изображения и того, которым оно будет заменяться), а также URL, по которому следует перей­ти при щелчке на изображении. Dreamweaver автоматически сгенерирует весь код на языке JavaScript, необходимый для воспроизведения эффекта.

Добавление кнопок и текста Flash

Dreamweaver также предоставляет простой способ добавления встроенных кно­пок, подобных кнопкам Flash, и SWF-файлов в мультимедийных веб-презента- циях. Чтобы выбрать нужный элемент из списка встроенных кнопок Flash, изо­бражение которых изменяется при щелчке на них или наведении указателя мыши, нажмите кнопку Insert Flash в окне Objects или выберите в меню команду Insert Interactive Images Flash Button. На экране появится окно Insert Flash Button со списком и изображениями встроенных кнопок Flash.

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

Аналогичным образом вы можете применять к тексту эффекты, которые доступ­ны во Flash. Такая возможность полезна в случае, если вы хотите, чтобы внешний вид кнопок и надписи на них были оформлены в едином стиле. Кроме того, это необходимо, когда для надписи на кнопке используется нестандартный шрифт, который может отсутствовать на других компьютерах.




Insert Flash Button fx

Sample;










1 0K 1













| Apply













Cancel

Style;

Beveled Rect-Blue

Л










Beveled Rect-Bionze

Ш




[ Get More Styles .. j




Beveled Rect-Greeri










Beveled Rect-Grev







| Help |




В lip Arrow ,—|







Blue Warper

Ш







Button Text:

Отправить]

1




Font;

Tahorna

Size: 13




Link;

|

[ Browse... J




Target;

_parent







Bg Color:










Save As: buttonl.swf

[ Browse... |




Рис. 22.11. Диалоговое окно Insert Flash Button


Редактирование изображений в Fireworks MX

Бесспорно, основное преимущество Dreamweaver MX перед другими веб-редак- торами заключается в его интеграции с графической программой Fireworks MX. К сожалению, приложение Fireworks MX является достаточно сложным для изу­чения, поэтому мы не рекомендуем использовать его тем, кто только начинает ов­ладевать секретами работы с графикой. Однако более опытные разработчики благодаря этой программе смогут сэкономить огромное количество времени. Средства интеграции Dreamweaver MX и Fireworks MX позволяют при проекти­ровании веб-страницы рисовать графические изображения и видеть, как они бу­дут выглядеть в окне браузера.

СОВЕТ

Тестовую версию программы Fireworks MX можно загрузить с сайта; эта программа зна­чительно отличается от графических редакторов, подобных Paint Shop Pro.

Расширения Dreamweaver MX

Компания Macromedia поощряет создание сторонними разработчиками расшире­ний для приложения Dreamweaver MX — программ, добавляющих новые воз­можности для редактора Dreamweaver MX и страниц, которые с его помощью можно создавать. Информацию о доступных расширениях вы найдете по адресу /software/Dreamweaver, щелкнув на ссылке Dreamweaver Exchange. Здесь можно бес­платно загрузить расширения, позволяющие отображать на веб-страницах пре­зентации слайдов или использовать электронные коммерческие средства.

Управление файлами веб-узла

Dreamweaver MX предоставляет эффективные инструменты управления файла­ми веб-узла. Эти инструменты полезны, если вы постоянно модернизируете свой узел и добавляете на него новые графические, звуковые и видеофайлы. Прежде чем воспользоваться средствами управления файлами Dreamweaver MX, необхо­димо создать каталог, в котором будут храниться все ваши веб-файлы. С помо­щью окна Site, которое открывается посредством одноименной команды меню Win­dows, можно создать подкаталоги для изображений, видео- и звуковых файлов.

Затем в окне Dreamweaver MX необходимо указать имя веб-узла, вызвав команду Site New Site. Присвоив узлу имя, сохраните его в только что созданном основном каталоге. Щелкните на кнопке New Folder и задайте отдельные папки для файлов различных типов, которые находятся на вашем узле. Вы можете проверить нали­чие неработающих ссылок, совместимость вашего узла с различными браузерами, выполнить глобальную замену некоторых участков текста или HTML- кода.

Создание и редактирование веб-страниц в Adobe GoLive

Adobe GoLive — это полнофункциональный инструмент для разработки веб-узлов. Тестовую версию данной программы можно загрузить с сайта www.adobe.com/go- live. Там же вы сможете найти информацию об основных возможностях редактора GoLive, таких как средства поддержки языков XHTML, XML, разработка браузе­ров, инструменты динамического (управляемого базой данных) создания веб-уз- лов и поддержки групповой разработки. Редактор GoLive совместим с различны­ми операционными системами; он работает как в системах Windows XP, 2000, ME и 98, так и в системах Mac OS-X 10.1 (Native и Classic), Mac OS 9.1 и 9.2. При­чем приемы работы с ним в системах Windows и Mac совершенно одинаковы (различие состоит лишь в комбинациях клавиш, используемых для быстрого дос­тупа). Файлы веб-узлов, созданные с помощью редактора Adobe GoLive, можно без проблем передавать из одной операционной системы в другую.

Создание новой страницы

Для запуска редактора GoLive выберите команду Пуск ► Программы ► Adobe GoLive 6.0. При загрузке программы на экране появится окно приветствия, изображенное на рис. 22.12, где нужно выбрать одно из действий: создать новую страницу, новый узел или открыть уже существующий узел. Можно отключить этот мастер и начать работу с меню File. Если вы приступаете к созданию нового веб-узла с использова­нием мастера, выберите значок New Site и следуйте дальнейшим указаниям мастера.

Проще всего создать новую страницу, щелкнув правой кнопкой мыши в любом месте свободной области вкладки Files и выбрав в контекстном меню команду New New Page. Новая страница отобразится на вкладке Files окна узла, ее имя бу­дет выделено (при необходимости его сразу же можно изменить).

СОВЕТ

Чтобы не начинать работу над очередной страницей веб-узла с нуля, создайте страни­цу, содержащую общие элементы: фон, цветовое оформление, заголовок, свойства, изображения, текст и ссылки. Сохраните ее в папке Stationery. Файлы страниц, сохра­няемые в этой папке, представляют собой шаблоны. Их значки находятся на вкладке Site Extras панели Objects. В дальнейшем вы сможете создавать на их основе новые страницы путем перетаскивания значков шаблона из панели Objects в окно узла.


Adobe GoLive

Please choose one of the following options

New Page

Click to create a new untitled HTML page.

New Site

Click to open the wizard for creating new sites,

Open

Click to open a Web page or site project file (with the filename extension ".site").



D Don't show again, (You can also choose this option in [ close


►t



Extras\ ErroiTX FTP \ WebDAV ;site08.data/
the General Preferences dialog box.)

Рис. 22.12. Окно, открывающееся при запуске редактора GoLive

По окончании работы мастера отображается окно нового узла (рис. 22.13), кото­рое содержит только одну страницу под названием index.html (ими домашней страницы, используемой по умолчанию). Вы можете изменить имя или расшире­ние, заданные по умолчанию.



С Adobe GoLive - Site08.site

File Edit Type Special Site Diagram View Window Help

dr I'Q'i ft m «і
D

I Files \ External \ Diagrams \ Colors Л Font Sets \ library



/5iteOS/





Ir^jl Generatedltems

j CSScriptLib.js ii"~i images i. dot.gif i, tides_logo.gif £) pdf


m

в
"Q generic_PDF.pdf benefits.html g] forms.html й] indeK.html з] management _lraining.html й) positions.html X position 1 X position? •i, position^ X position4 g| travelpolicy.html

Size Date Modified



  • 03.07.2003 16:33 43.0 KB 14.02.2002 12:54

  • 03.07.2003 16:32 43 bytes 14.02.2002 12:54

2,7 KB 14.02,2002 12:54

  • 03.07.2003 16:33 54.0 KB 03.07.2003 16:33

  1. KB 03.07.2003 16:33


  1. Ш

    Components

    address.html logo.html Diagrams Library Site Trash SmartObjects

    tides Jogo.psd Stationery Templates

    501 bytes 359 bytes
    KB 03.07,2003 16:33 t.9 KB 03.07.2003 16:33


  1. KB 03.07.2003 16:33 10.0 KB 03.07.2003 16:33

7.1KB 03.07.2003 16:33





> © [ 10 items

Рис. 22.13. Окно узла в редакторе GoLive с файлами сайта

Окно редактора GoLive

Окно, изображенное на рис. 22.13, содержит основные инструменты проектиро­вания веб-страниц редактора GoLive. В нем можно добавлять и упорядочивать страницы, рисунки, таблицы стилей, внешние файлы JavaScript и другие файлы, которые будут находиться на веб-сервере.

Чтобы открыть это окно, дважды щелкните на файле с расширением site. В верх­ней части экрана появится панель инструментов, элементы которой сгруппирова­ны по определенным задачам. Вкладка Files предназначена для просмотра списка файлов веб-узла. Вы можете просматривать папки веб-страниц, графических изо­бражений, сценариев, шаблонов и файлов других типов. На вкладке External ото­бражаются списки ссылок, которые можно задействовать при проектировании веб-страницы. Если вы измените параметры ссылки на вкладке External, редактор GoLive автоматически изменит их на всем узле. Используя вкладку Diagrams, можно вывести на экран диаграмму файлов узла. Вкладка Library поможет сохра­нить таблицы, текст или любой объект страницы, чтобы впоследствии его можно было использовать на других веб-страницах.

В процессе разработки веб-страниц проектировщики, в основном, применяют ин­струменты панели Objects, изображенной на рис. 22.14.







III Objects\ Color \










□ □на

В 0 & @ & Р










<И>



U




ш

ваш







Рис. 22.14. Панель инструментов Objects


Если вы раньше работали с другими приложениями компании Adobe, например с Photoshop, плавающие панели вам уже знакомы. Наиболее часто используемые панели должны оставаться открытыми. Поэтому, добавив объекты на страницу, не скрывайте панель Objects, кроме того, для форматирования объектов отобрази­те на экране панель Inspector. Панели можно расположить по краям рабочей об­ласти, чтобы они не мешали, когда в них нет необходимости.

Для начала работы над первой страницей дважды щелкните на странице index.html в окне узла. Вы увидите окно редактирования программы GoLive, где можно вве­сти текст.

ПРИМЕЧАНИЕ

Информацию об использовании встроенной в редактор GoLive программы FTP, которая предназначена для загрузки файлов веб-узла на сервер, вы найдете в главе 26.

Редактирование страниц

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


Inspector откроется вкладка Page, где вы сможете установить основные свойства страницы.

: View

| Page '"' 'HTML \ Title

Welcome to Adobe GoLive 6




Text Colors 0Text 0Link [j

EH Active Link 0 Visited Link







Background 0 Color [

0 Image ||®J File:///C:/Temp/Web-site.fili l^llLl Margin Width Height

Page


Рис. 22.15. Панель свойств страницы


_ ff x


Paragraph



сю с/а * ТЙ - «3D - BR?

|Layout □ЧрЧзшгсе SI"f^4!Preview |Ш] Welcome to Adobe GoLive 6

ШШШШШШШ

Рис. 22.16. Установка цветов веб-страницы

ж

3
Чтобы задать или изменить цвет фона, щелкните на поле цвета и откройте панель Color. Для удобства работы с панелью цвета группируются по пространствам цве­тов. На рис. 22.16 показана панель Color в окне редактирования.

L Adobe GoLive - untitled 3.html *

File Edit Type Special Site Diagram View Window Help


Для того чтобы в качестве фона использовать изображение, подберите понравив­шийся вам рисунок и перетащите его файл из окна Проводника Windows в то ме­сто вкладки Files окна узла, где находятся страницы. Затем установите флажок Image в разделе Background вкладки Page на панели Inspector и выберите этот гра­фический файл.

Оформление заголовка страницы

Внешний вид веб-страниц определяется значениями ряда параметров, называе­мых также свойствами. Установка этих значений делает узел более привлека­тельным и полезным для будущих посетителей. Так, используя эти установки, вы можете присвоить веб-узлу и его страницам броские и понятные имена, которые позволят пользователям судить о содержимом узла, а также находить его посред­ством поисковых систем. Имя любой страницы узла можно изменить на вкладке Page панели Inspector. Однако более распространен другой способ изменения заго­ловка. В верхней части каждой открытой страницы GoLive, помимо значка с изо­бражением страницы, имеется надпись «Welcome to Adobe GoLive 6» (Добро по­жаловать в Adobe GoLive 6). Щелкните мышью на этой надписи, установите курсор и введите новый текст заголовка.

Чтобы добавить описание и ключевые слова тегов <МЕТА>, выберите любое нужное слово или фразу на странице, а затем вызовите команду Special Add То Keywords. GoLive сгенерирует тег <МЕТА> и поместит в него выбранные слова. Для того чтобы изменить содержимое тега <МЕТА>, откройте раздел Head, щелкнув на стрелке в ле­вом верхнем углу страницы, и дважды щелкните на значке Keywords. Панель ин­спектора трансформируется в панель Keywords Inspector, что позволит просмот­реть и изменить ключевые слова (рис. 22.17).



Cr Adobe GoLive

File Edit Type Special Site Diagram View Window Help







Paragraph



CO С/Э ■!& "5] '

|Layout "□Чр4)Source SIЧШМPreview |i] HR Intranet

Welcome to the Group's Human Resources Intranet Web site.

Ш В I T . 1

Lore consequisrnodipit exero eugait ate dunt Ian hent praese tatis nullan henit landit autpat dolore dolore magna cornmolor si ese cornrny nulla commoloreet alit alis dolut euis alit la consequisirn dio odolobore consequisit landrern vullarmcon utet wisi estrud eurnsandionullam dolenim niat eliquipis atet augait wismolor aliquismo olenit, consequisl eu feugiarn quam dipit lutatuerostrud rnin erosto od enisrnolobore
И I





Рис. 22.17. Окно добавления тега <МЕТА> для описания страницы

Чтобы добавить тег <МЕТА> для описания узла или страницы, перетащите значок Meta со вкладки Head панели объектов в любое место страницы.

L Adobe GoLive

File Edit lype Special Site Diagram View Window Help


ЕШЕ)



*> Ф * 1 - - Н5ЯГ
|| [Paragraph v| M # W BIT HT"





Welcome to the С Intranet Web site



<я>1 I | <•&>! ош>| <а>| | <;р>|



Lore consequismodipit exero eugait ate dunt Ian hent praese tatis nullan henit landit autpat dolore dolore magna cornrnolor si ese cornrny nulla cornrnoloreet alit alis dolut euis alit la consequisirn dio odolobore consequisit landrern vullarncon utet wisi estrud eurnsandionullarn dolenirn niat eliquipis atet augait wisrnolor aliquisrno olenit, consequisl eu feugiarn quarn dioit lutatuerostrud rnin erosto od enisrnolobore

Resource
| Layout аЧрЧ Source Ш ЧЧ| Preview -J\ ^ 8] HR Intranet

| | ||








пуск £ й © * и Ю '' [ * N" й в-

! щщеш mm 1*19

Рис. 22.18. Вы можете поместить тег <МЕТА> в любом месте страницы







В процессе перетаскивания редактор GoLive откроет раздел Head, куда и следует поместить значок. Затем на панели Meta Inspector выберите элемент Description в списке тегов <МЕТА> и добавьте описание тега.

Форматирование текста

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

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

Заголовки (с HI по Н6). Используйте теги <Н1>, <Н2> и другие теги заголов­ков, чтобы наглядно представить всю структуру веб-страницы. Щелкните на любом месте внутри абзаца и в контекстном меню команды Header выберите уровень заголовка от 1 до 6. Присвоить нужный стиль заголовка выделенному абзацу можно также с помощью команды Туре ► Paragraph Style. Независимо от выбранного способа, абзац будет отформатирован как заголовок.


  • Полужирный, курсив или подчеркнутый. Вместо кнопок Bold, Italic и Teletype

можно применять средства форматирования из меню, вызываемого командой Туре ► Structure. При использовании команд меню генерируются теги, значе­ния которых средства доступа в Веб смогут воспринимать и правильно интер­претировать.

  • Выравнивание и центрирование. Способ выравнивания, как и стиль заголов­ка, применяется ко всему абзацу. Щелкните в любом месте абзаца и восполь­зуйтесь кнопкой панели инструментов, задающей нужный тип выравнивания: Left, Center, Right или Justified.

  • Списки. Для создания списка укажите первый его элемент и щелкните на кнопке Numbered List или Unnumbered List панели инструментов. Затем, чтобы упорядочить список, воспользуйтесь кнопкой Increase List Level или Decrease List Level. Для отмены форматирования списка уменьшите отступ слева до раз­меров поля.

ВНИМАНИЕ

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

Применение горизонтальных линий

Разную по тематике информацию обычно разделяют при помощи горизонталь­ных линий. Для создания таких линий используются теги

1   ...   27   28   29   30   31   32   33   34   35


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

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