Шрифт:
Как выполнить предварительную разметку веб-документа?
Как мы уже неоднократно отмечали ранее, начинать работу по созданию веб-страницы рекомендуется с ее предварительной разметки, иначе говоря – с построения предварительной структуры.
Проще всего предварительную разметку веб-документа делать с помощью панели быстрого ввода, которая расположена в правой части окна программы (см. рис. 6.1). Напомним, что управление отображением данной панели осуществляется с помощью команды главного меню Вид Быстрый ввод.
Предположим, что наша веб-страница будет иметь заголовок, обычный текст, изображение и таблицу.
Первое, что нужно сделать – это идентифицировать наш Html-документ. Для этого в панели быстрого ввода нужно выбрать позицию html – в результате в рабочей области появятся теги <html></html>, между которыми будет помещен весь остальной исходный код веб-страницы.
После этого подготовим место для заголовка нашего документа. Для этого выберем в панели быстрого ввода позицию вначале head, а затем – title (перед этим поместим курсор между тегами <head> </head>). В результате в программный код добавится следующий фрагмент: <head><title> </title></head>.
Далее после закрывающего тега </head> нажмем клавишу Enter и в новой строке введем теги основного текста – <body></body>. Затем в этот контейнер поместим тег ссылки – для этого в панели быстрого доступа выберем позицию img. А после этого сформируем «каркас» таблицы, выбрав в панели быстрого доступа позиции table, td и tr.
В результате выполненных действий по предварительной разметке документа код нашей веб-страницы будет выглядеть так, как показано в листинге 5.4.
Листинг 5.4. Предварительная разметка веб-страницы
<html>
<head><title> <title></head>
<body>
<img src="" border="" alt="">
<table border="" cellpadding="" cellspacing="" bordercolor="">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Теперь можно заниматься формированием содержательной части веб-страницы: вводить текстовый контент, вставлять рисунки, заполнять ячейки таблицы, вставлять заголовок, и т. д. О том, как это делать, будет рассказано далее.
Ввод и форматирование текстовой части контента
Большинство веб-разработчиков после построения структуры веб-документа приступают к написанию и форматированию текстовой части контента. Мы не будем отступать от этого правила и расскажем, как это делается в программе Extra Hide Studio.
Присвоим нашей странице название Сведения о компании, и сформируем в ней следующий текст:
Наша компания была создана в 2005 году. За прошедшее время мы сумели занять лидирующие позиции на рынке и завоевать немало постоянных клиентов. Наша прибыль постоянно растет, и мы задумываемся о расширении. Будем рады видеть вас в числе наших клиентов!
Пока уберем из программного кода ненужные в данный момент элементы (теги вставки графического объекта и таблицы) – в результате он будет выглядеть так, как показано в листинге 5.5.
Листинг 5.5. Ввод текстовой части контента
<html>
<head><title>Сведения о компании</title></head>
<body>
Наша компания была создана в 2005 году.
За прошедшее время мы сумели занять лидирующие позиции на рынке и завоевать немало постоянных клиентов.
Наша прибыль постоянно растет, и мы задумываемся о расширении.
Будем рады видеть вас в числе наших клиентов!
</body>
</html>
Теперь просмотрим, как в данный момент будет выглядеть наша страница в окне Интернет-обозревателя, предварительно сохранив выполненные изменения (рис. 6.5).
Рис. 6.5. Вид страницы в окне Интернет-обозревателя
Отметим, что в программе имеется встроенный обозреватель, позволяющий просматривать текущую страницу. Он находится на вкладке Просмотр рабочей области, его можно также вызвать нажатием клавиши F9 или с помощью команды главного меню Файл Просмотр. Это довольно удобно, но в данном обозревателе не отображается название веб-страницы.