Алексей Гладкий - Веб-Самоделкин. Как самому создать сайт быстро и профессионально
Листинг 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="« class=»" title=""></a>. Очевидно, что его необходимо дополнить, как минимум – вставить адрес гиперссылки, которым может являться как имя файла другой веб-страницы этого же сайта, так и веб-адрес любого другого ресурса. Напомним, что адрес гиперссылки является значением атрибута href.
Начинающим веб-разработчикам для вставки гиперссылок рекомендуется использовать Мастер ссылок. Для перехода в данный режим следует выполнить команду главного меню Утилиты ► Мастер ссылок или нажать в инструментальной панели, расположенной слева внизу окна, кнопку Мастер вставки ссылки. В любом случае на экране отобразится окно, которое показано на рис. 6.11.
Рис. 6.11. Мастер вставки ссылки
В данном окне осуществляется настройка параметров гиперссылки. Отметим, что перед вызовом данного окна следует поместить курсор в то место исходного кода веб-страницы, в которое должна быть вставлена гиперссылка.
В поле Название с клавиатуры следует ввести название гиперссылки. Иначе говоря, здесь вводится текст, который на веб-странице будет являться гиперссылкой.
В поле Адрес указывается адрес гиперссылки. Если вы хотите сослаться на другую веб-страницу этого же ресурса – в данном поле нужно ввести имя файла данной страницы (например, Test.html). Если же вам нужно создать ссылку на внешний ресурс, то вводите ее в таком формате, как показано на рис. 6.11. Иначе говоря, при создании ссылки на портал www.yandex.ru нужно вводить адрес так: http://www.yandex.ru.
В поле Описание при необходимости можно указать текст всплывающей подсказки, которая будет отображаться при подведении указателя мыши к ссылке на веб-странице. Отметим, что данный параметр не является обязательным для заполнения: он нужен лишь тогда, когда гиперссылка требует дополнительных пояснений.
В поле Открывать как из раскрывающегося списка выбирается способ открытия гиперссылки. Возможен выбор одного из трех вариантов – По умолчанию, В новом окне или На все окно.
Завершается процесс формирования и вставки гиперссылки нажатием в данном окне кнопки Добавить. С помощью кнопки Отмена осуществляется выход из данного режима без вставки гиперссылки.
В листинге 5.8 представлен исходный код созданной нами ране веб-страницы, в которую вставлена гиперссылка в соответствии с настройками, представленными на рис. 6.12. В данном случае ссылкой являются слова лидирующие позиции.
Листинг 5.8. Вставка гиперссылки на внешний ресурс
<html>
<head><title>Сведения о компании</title></head>
<body>
<h1>Добро пожаловать</h1>
<b>Наша компания была создана в 2005 году.</b><br>
<img src="Образец.jpg" width="320" height="240" border=10 alt="Извините, изображение не может быть показано"><br>
За прошедшее время мы сумели занять <a href="http://www.yandex.ru" target="_blank" title="Подробности">лидирующие позиции</a> на рынке и завоевать немало постоянных клиентов.<br>
Наша прибыль постоянно растет, и мы задумываемся о расширении.<br>
<i>Будем рады видеть вас в числе наших клиентов!</i><br>
</body>
</html>
После сохранения внесенных изменений наша страница в окне Интернет-обозревателя будет выглядеть так, как показано на рис. 6.12.
Рис. 6.12. Страница с гиперссылкой
Как видно на рисунке, гиперссылкой в данном случае является словосочетание лидирующие позиции, и эта ссылка ведет на портал www.yandex.ru (информация об этом отображается в строке состояния Интернет-обозревателя). Если подвести указатель мыши к гиперссылке, то отобразится всплывающая подсказка со словом Подробности.
Представление данных в табличном виде
Как мы уже неоднократно отмечали ранее, представление данных в табличном виде имеет немало преимуществ: наглядность, компактность, эргономичность, хорошая восприимчивость информации, и др. В данном разделе мы рассмотрим, как осуществляется формирование и вставка таблиц в веб-документ средствами программы Extra Hide Studio.
Здесь мы продолжим работу с той же веб-страницей, на примере которой работали и ранее. Таблицу, состоящую из трех строк и четырех столбцов, мы поместим между двумя последними фразами текстовой части контента.
Для построения таблиц в программе предназначены инструменты, которые находятся на вкладке Таблицы. Содержимое данной вкладки показано на рис. 6.13.
Рис. 6.13. Инструменты, предназначенные для формирования и вставки таблиц
Как видно на рисунке, данная вкладка содержит четыре кнопки. С помощью кнопки Таблица в исходный код текущей страницы вставляется фрагмент, позволяющий идентифицировать таблицу и задать ее основные параметры: <table border="« cellpadding=»" cellspacing="« bordercolor=»" bgcolor=""></table>. Теги <table> </table> идентифицируют таблицу, а с помощью атрибутов можно задать толщину рамки таблицы, расстояние от содержимого ячеек до их границ, а также цветовое оформление таблицы.
Кнопки Строка и Столбец предназначены для добавления в таблицу соответственно строк и столбцов. С помощью этих кнопок в исходный код вставляются теги <tr> </tr> и <td> </td>.
Однако формирование таблиц с помощью кнопок Таблица, Строка и Столбец – это, можно сказать, наполовину ручной способ, поскольку многие параметры придется задавать вручную. Намного удобнее воспользоваться режимом автоматического формирования таблиц, который вызывается с помощью кнопки Мастер или команды главного меню Утилиты ► Мастер создания таблиц. Окно Мастера, которое отображается на экране при активизации данной команды, представлено на рис. 6.14.
