Веб-Самоделкин. Как самому создать сайт быстро и профессионально
Шрифт:
Вставка графических объектов
В данном разделе мы рассмотрим, каким образом в веб-документ можно вставить изображение, картинку или иной графический объект. Отметим, что возможности программы предусматривают вставку графических объектов тремя способами. Первый заключается в том, чтобы просто вручную ввести фрагмент исходного кода, необходимый для вставки на страницу изображения. Второй частично автоматизирует данный процесс: для этого на вкладке Вставка нужно нажать кнопку Картинку (название кнопки отображается в виде всплывающей подсказки при подведении к ней указателя мыши) – в результате в то место, где находился курсор, будет добавлен следующий фрагмент кода: <img src="« border=»" alt="« width=»" height="">. Как мы уже знаем, этот фрагмент необходимо дополнить значениями атрибутов, как минимум – указать
Однако лучше всего для начинающих веб-разработчиков подходит третий способ вставки изображения, поскольку он является наиболее простым. Суть его заключается в использовании встроенного в программу Мастера вставки изображения, который позволяет полностью автоматизировать процесс формирования соответствующего фрагмента исходного кода. Дополнять этот фрагмент будет уже не нужно – всем атрибутам будут автоматически присвоены требуемые значения.
Итак, установим курсор в строку, следующую за фразой Наша компания была создана в 2005 году (мы продолжаем работать с исходным кодом, который сформировали ранее). После этого выполним команду главного меню Утилиты Мастер вставки изображения или в инструментальной панели, которая расположена слева внизу окна, нажмем кнопку Мастер вставки картинки (чтобы прочесть название кнопки, подведите к ней указатель мыши). В результате любого из этих действий на экране отобразится окно, изображенное на рис. 6.8.
Рис. 6.8. Мастер вставки изображения
В данном окне нужно щелчком мыши выбрать изображение, которое необходимо вставить на веб-страницу. Обратите внимание: в правой части данного окна демонстрируется изображение, на котором установлен курсор. Таким образом, вы можете последовательно просмотреть все имеющиеся изображения, поочередно щелкая по ним мышью.
После выбора изображения нажимаем кнопку Открыть либо клавишу Enter – в результате в наш исходный код будет добавлен следующий фрагмент: <img src="Образец.jpg" width="320" height="240" border=0 alt="">. В этом фрагменте, как мы видим, автоматически сформировано значение атрибута src —этим значением является имя файла графического объекта, а также указаны размеры изображения в пикселях. Дополним фрагмент: зададим обрамление изображения рамкой толщиной 10 пикселей, и введем альтернативный текст, который будет отображаться при невозможности отображения картинки (например, по причине отключения соответствующей функциональности в настройках Интернет-обозревателя) – Извините, изображение не может быть показано. После данного фрагмента вставим тег <br>, чтобы следующая фраза была начата с новой строки, а не начиналась сразу после графического объекта. В результате выполненных действий исходный код нашей веб-страницы будет выглядеть так, как показано в листинге 5.7.
Листинг 5.7. Вставка графического объекта с указанием его размеров, толщины рамки, альтернативного текста
<html>
<head><title>Сведения о компании</title></head>
<body>
<h1>Добро пожаловать</h1>
<b>Наша компания была создана в 2005 году.</b><br>
<img src="Образец.jpg" width="320" height="240" border=10 alt="Извините, изображение не может быть показано"><br>
За прошедшее время мы сумели занять лидирующие позиции на рынке и завоевать немало постоянных клиентов.<br>
Наша прибыль постоянно растет, и мы задумываемся о расширении.<br>
<i>Будем рады видеть вас в числе наших клиентов!</i><br>
</body>
</html>
Теперь сохраним выполненные изменения с помощью команды главного меню Файл Сохранить или нажатием в инструментальной панели кнопки Сохранить изменения, и перейдем на вкладку Просмотр. Результат выполненных действий показан на рис. 6.9.
Рис. 6.9. Вставка графического объекта
Теперь просмотрим, как отображается альтернативный текст. Для этого отключим в Интернет-обозревателе, используемом на данном компьютере, режим показа графических объектов, и откроем нашу страницу в этом обозревателе. Результат выполненных действий показан на рис. 6.10.
Рис. 6.10. Отображение альтернативного текста
Как видно на рисунке, в данном случае вместо графического отображения показан альтернативный текст, который мы ранее определили в исходном коде страницы (см. листинг 5.7). А вот рамка отображения толщиной 10 пикселей осталась на месте, поскольку мы отключили в Интернет-обозревателе отображение только графических объектов (управление отображением рамок, обрамляющих графические объекты, осуществляется отдельно).
Вставка гиперссылок на внутренние и внешние ресурсы
Здесь мы расскажем о том, как средствами программы Extra Hide Studio можно формировать на веб-странице ссылки на внутренние и внешние ресурсы (под внутренними ресурсами в данном случае подразумеваются другие страницы этого же сайта, а под внешними – любые сторонние сайты).
По аналогии с графическими объектами, гиперссылки можно вставлять тремя способами: путем ввода соответствующего фрагмента исходного кода вручную, путем использования кнопки Ссылку на вкладке Вставка, а также с помощью специально предназначенного Мастера ссылок, который позволяет полностью автоматизировать процесс вставки гиперссылки в веб-документ. Отметим, что для вставки тегов и атрибутов гиперссылки можно воспользоваться также панелью Быстрый ввод, которая расположена в правой части интерфейса программы, но по сути это будет то же самое, что и использование кнопки Ссылку.
При нажатии кнопки Ссылку в исходный код страницы (а именно – в то место, где находится курсор) будет вставлен следующий фрагмент: <a href="#" title=""></a>. Очевидно, что его необходимо дополнить, как минимум – вставить адрес гиперссылки, которым может являться как имя файла другой веб-страницы этого же сайта, так и веб-адрес любого другого ресурса. Напомним, что адрес гиперссылки является значением атрибута href.
Начинающим веб-разработчикам для вставки гиперссылок рекомендуется использовать Мастер ссылок. Для перехода в данный режим следует выполнить команду главного меню Утилиты Мастер ссылок или нажать в инструментальной панели, расположенной слева внизу окна, кнопку Мастер вставки ссылки. В любом случае на экране отобразится окно, которое показано на рис. 6.11.
Рис. 6.11. Мастер вставки ссылки
В данном окне осуществляется настройка параметров гиперссылки. Отметим, что перед вызовом данного окна следует поместить курсор в то место исходного кода веб-страницы, в которое должна быть вставлена гиперссылка.
В поле Название с клавиатуры следует ввести название гиперссылки. Иначе говоря, здесь вводится текст, который на веб-странице будет являться гиперссылкой.
В поле Адрес указывается адрес гиперссылки. Если вы хотите сослаться на другую веб-страницу этого же ресурса – в данном поле нужно ввести имя файла данной страницы (например, Test.html). Если же вам нужно создать ссылку на внешний ресурс, то вводите ее в таком формате, как показано на рис. 6.11. Иначе говоря, при создании ссылки на портал www.yandex.ru нужно вводить адрес так: http://www.yandex.ru.
В поле Описание при необходимости можно указать текст всплывающей подсказки, которая будет отображаться при подведении указателя мыши к ссылке на веб-странице. Отметим, что данный параметр не является обязательным для заполнения: он нужен лишь тогда, когда гиперссылка требует дополнительных пояснений.
В поле Открывать как из раскрывающегося списка выбирается способ открытия гиперссылки. Возможен выбор одного из трех вариантов – По умолчанию, В новом окне или На все окно.
Завершается процесс формирования и вставки гиперссылки нажатием в данном окне кнопки Добавить. С помощью кнопки Отмена осуществляется выход из данного режима без вставки гиперссылки.