Веб-Самоделкин. Как самому создать сайт быстро и профессионально
Шрифт:
<img src="Образец.jpg" width="320" height="240" border=10 alt="Извините, изображение не может быть показано"><br>
За прошедшее время мы сумели занять <a href="#" target="_blank" title="Подробности">лидирующие позиции</a> на рынке и завоевать немало постоянных клиентов.<br>
Наша прибыль постоянно растет, и мы задумываемся о расширении.<br>
<i>Будем рады видеть вас в числе наших клиентов!</i><br>
</body>
</html>
После сохранения внесенных изменений наша страница в окне Интернет-обозревателя будет выглядеть так, как показано
Рис. 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.
Рис. 6.14. Создание таблицы в автоматическом режиме
В данном окне в поле Число столбцов с клавиатуры либо с помощью кнопок счетчика вводится количество столбцов создаваемой таблицы. В поле Число строк аналогичным образом задается
число строк. С помощью кнопок Цвет фона и Цвет обрамления можно задать соответственно цвет фона таблицы, и цвет ее рамки. Толщина рамки выбирается из раскрывающегося списка в поле Толщина обрамления (диапазон возможных значений – от 0 до 15), это значение выражается в пикселях. Очевидно, что использование параметра Цвет обрамления имеет смысл только в том случае, если в таблице планируется использовать рамку (то есть если в поле Толщина обрамления указано любое значение, кроме 0).Завершается процесс формирования таблицы нажатием в данном окне кнопки Создать. С помощью кнопки Отмена осуществляется выход из данного режима без сохранения выполненных изменений. Напомним, что код таблицы будет вставлен в то место исходного кода веб-страницы, в котором находится курсор.
В листинге 5.9 представлен код нашей веб-страницы, в которую вставлен код таблицы в соответствии с настройками, изображенными на рис. 6.14.
Листинг 5.9. Исходный код страницы после автоматической вставки таблицы
<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="#" target="_blank" title="Подробности">лидирующие позиции</a> на рынке и завоевать немало постоянных клиентов.<br>
Наша прибыль постоянно растет, и мы задумываемся о расширении.<br>
<table border=3 bordercolor="#FF8000" bgcolor="#FFFF00" cellspacing=0 cellpadding=3>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<i>Будем рады видеть вас в числе наших клиентов!</i><br>
</body>
</html>
Теперь доработаем наш код, присвоив атрибуту cellspacing значение 3, и введя информацию в ячейки таблицы. Будем считать, что в таблице представлена информация о прибыли компании в каждом месяце текущего года. После внесения всех требуемых изменений код нашей веб-страницы будет выглядеть так, как показано в листинге 5.10.
Листинг 5.10. Исходный код страницы с готовой таблицей
<html>
<head><title>Сведения о компании</title></head>