Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Веб-дизайн_ч_1.rtf
Скачиваний:
1
Добавлен:
01.05.2025
Размер:
582 Кб
Скачать
☆

Создание ссылок

Ссылка на HTML-документ имеет вид:

<a href="URL">текст_подсказки_для_ссылки</a>

Пример:

<a href="http://www.mycorporation.com/index.htm"> Главная страница </a>

Если задан базовый адрес, то ссылка будет иметь вид:

<a href="index.htm"> Главная страница </a>

!!! Нельзя делать вложенные ссылки.

Ссылки на элементы текущей страницы (закладки)

Если имеется длинный html-документ, то удобно сделать ссылки внутри этого документа для быстрого перехода на нужные разделы. Для этого в начале необходимо присвоить имя той части текста, на которую вы хотите сделать ссылки, а затем поставить якорь, указывающий на нее (т.е. назначить закладку).

Пример:

Пусть необходимо организовать закладку на почтовом адресе фирмы. Помечаем этот текст:

<a name="#q1">ул. Мира, 19 </a>

Теперь в другом месте странице можно сделать ссылку на этот раздел:

<p>Смотрите <a href="#q1"> Наш адрес </a> </p>

На именованные разделы можно ссылаться и с других страниц. В этом случае имя раздела становится частью адреса.

Пример:

<p>Смотрите <a href="http://mycorporation/index.htm#q1"> Наш адрес </a> </p>

Специальные ссылки Ссылка mailto

Создание ссылки на электронный почтовый адрес делается следующим образом:

<a href="mailto:почтовый_адрес">Текст_подсказки </a>

Пример:

<a href="mailto:ivanov@mail.ru">Мой e-mail </a>

Ссылка на сайт ftp

Протокол FTP используется для обмена файлами между компьютерами. Для этого нужен адрес FTP-сервера. Если вы предлагаете пользователю скачать какой-нибудь файл, нужно указать путь к нему.

Пусть имеется каталог товаров фирмы (файл catalog.zip) в каталоге products сайта. Тогда ссылка на него будет выглядеть так:

<a href="ftp://ftp.mycorporation.com/products/downloads/catalog.zip">Получить каталог товаров </a>

!!! Здесь downloads – это папка, вложенная в папку products и хранящая файлы, которые предлагается пользователям скачать с сервера.

Обмениваться файлами можно и по протоколу http:

<a href="http://mycorporation.com/products/downloads/catalog.zip">Получить каталог товаров </a>

Протокол http:// позволяет передавать двоичные файлы, особенно файлы *.exe, *.zip, *.sit.

Изображения

Для размещения изображений в HTML-документах используется элемент <img/>. Следует учитывать, что вы добавляете ссылку на файл, содержащий эту картинку, при этом сам файл может находиться на жестком диске сервера в каталоге вашего сайта или где-то в Сети.

Изображения – это файлы определенных форматов, которые распознаются браузерами и графическими приложениями. В Сети используются форматы JPEG, GIF и PNG. Если ваши файлы других форматов, их следует преобразовать в один из этих форматов с помощью графического редактора. Следует учесть, что большие по размеру графические файлы увеличивают время загрузки страницы.

Элемент <img/>

Формат элемента:

<img src="адрес_изображения"/>

Пример:

<p> <img src="portrait.gif"/> Наш коллектив</p>

(если картинка в том же каталоге, что и страница.)

<p> <img src="/images/portrait.gif"/> Наш коллектив</p>

если картинка в подкаталоге images корневого каталога сайта.)

Адрес изображения может задаваться абсолютной ссылкой.

<p> <img src="http://www.mycorporation.com/images/portrait.gif"/> Наш коллектив</p>

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

<img src="graph1.gif" alt="Здесь картинка"/>

Для размещения картинок совместно с поясняющими их текстом используется атрибут align элемента img:

<img align="значение" src="адрес_изображения"/>

Возможные значения атрибута: top (текст располагается рядом с верхней границей изображения), middle (рядом с серединой) и bottom (рядом с нижней границей).

Пример:

<p><img align="top" src="graph1.gif" alt="Наш офис"/>Наш офис</p>

На экране

Наш офис

Атрибут align может принимать значения right (справа) и left (слева), которые переводят изображения в разряд плавающих. Картинки появятся не в том месте, где расположен элемент <img/>, а рядом с указанным полем (левым или правым).

У элемента <img/> есть еще два атрибута: width (ширина) и height (высота). Эти атрибуты позволяют изменять реальный размер изображений и тем самым влиять на скорость загрузки страницы в окне браузера. Значения задаются в пикселах или процентах.

<img src="graph1.gif" width="150" height="75"/>

Ссылки с использованием изображений

Если вы хотите, чтобы ссылка представляла собой не просто описательный текст, а какое-нибудь изображение, необходимо поставить якорь, включив в него ссылку на это изображение.

<a href="адрес_ссылки"> <img src="адрес_картинки" alt="текст"/> </a>

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

Редактор Microsoft Word

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

Новый документ Word можно сохранить как веб-страницу. Соответственно, создавая документ на основе любого шаблона, вы создаете веб-страницу. Тем не менее, в состав средств редактора входит набор шаблонов для создания веб-страниц. Кроме того, можно создавать собственные шаблоны веб-страниц.

Для создания веб-страницы на основе шаблона необходимо выполнить следующие действия.

    1. Ввести команду File/New (Файл/Создать).

    2. В окне появившемся окне диалога выбрать вкладку «Веб-страница».

    3. На данной вкладке выбрать значок требуемого шаблона и нажать кнопку ОК.

!!! При создании документов на основе шаблонов веб-страниц редактор автоматически переключается в режим просмотра веб-документов. Если вы создаете документ на основе шаблона другого типа, то для работы над веб-страницей необходимо переключиться в режим просмотра командой View/Web document

!!! Для создания собственного шаблона веб-страницы необходимо в окне диалога создания страницы установить опцию «Template» («Шаблон»).