Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий
Шрифт:
Интервал:
Закладка:
Листинг 5.3. Автоматически сгенерированный код веб-страницы по шаблону «Слева и справа вертикальное меню»
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//RU">
<html>
<head>
<title>Слева и справа вертикальные меню</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
<meta name="keywords" content="ключевые слова">
<meta name="generator" content="Extra Hide Studio 2010 (www.ruxesoft.net)">
<meta http-equiv="keywords" content="ключевые слова">
<meta name="robots" content="INDEX,ALL">
<meta name="description" content="Описание сайта">
<meta name="copyright" content="Права">
<meta name="Document-state" content="Dynamic">
<meta name="revisit-after" content="10 days">
<meta name="classification" content="Классификация">
<meta name="CATEGORY" content="Категории">
<meta name="language" content="Russian,English">
<meta name="rating" content="general">
<meta name="resourse-type" content="document">
</head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr width="100%" height=200><td colspan=3 align="center" valign="center">
<h1>Заголовок</h1>
</td></tr>
<tr width="100%">
<td width=150>
Меню
</td>
<td>
Текст
</td>
<td width=150>
Меню 2
</td>
</tr>
</table>
</body>
</html>
Можно прямо сейчас посмотреть, как будет выглядеть страница в окне Интернет-обозревателя (для этого нужно перейти на вкладку Просмотр или нажать клавишу F9) именно в данный момент (рис. 6.3).
Рис. 6.3. Так выглядит шаблон страницы при просмотре в окне Интернет-обозревателя
Как видно на рисунке, шаблон представляет собой своего рода предварительную разметку веб-страницы, на основании которой ведется ее дальнейшая разработка.
По такому же принципу создаются веб-страницы на основании шаблонов, в которых вертикальное меню расположено слева или справа.
Отметим, что вы можете отредактировать любой имеющийся в программе шаблон по своему усмотрению. Для этого выберите соответствующую команду в подменю Файл ► Редактировать шаблон. В этом же подменю находится несколько команд под одинаковым названием Пустой шаблон: с их помощью вы можете самостоятельно сформировать любой шаблон и впоследствии использовать его для создания новых веб-документов.
Открытие созданного ранее документа для просмотра и редактирования кода
Как мы уже отмечали ранее, возможности программы предусматривают не только создание новых, но и редактирование имеющихся веб-документов. Иначе говоря, вы можете забрать файл веб-страницы с удаленного сервера на свой компьютер, внести в него с помощью программы Extra Hide Studio требуемые изменения и вновь вернуть на прежнее место (на удаленный сервер).
Чтобы открыть созданный ранее файл для просмотра и редактирования исходного кода, нужно выполнить команду главного меню Файл ► Открыть, вызываемую также нажатием комбинации клавиш Ctrl+O. Кроме этого, можно воспользоваться кнопкой Открыть, находящейся в инструментальной панели. После выполнения любого из перечисленных действий на экране отобразится окно открытия документа, которое показано на рис. 6.4.
Рис. 6.4. Выбор файла для открытия
В данном окне нужно открыть каталог с требуемым файлом, выделить этот файл щелчком мыши и нажать кнопку Открыть или клавишу Enter. В результате исходный код файла отобразится в рабочей области на вкладке, название которой будет соответствовать имени файла.
Сохранение веб-документа
По мере работы над документом рекомендуется периодически сохранять вносимые в него изменения. Это позволит избежать потери данных при возникновении нештатной ситуации (программный или аппаратный сбой, внезапное отключение электроэнергии, и т.д.). Для сохранения изменений в документе предназначена команда главного меню Файл ► Сохранить, вызываемая также нажатием комбинации клавиш Ctrl+S. Кроме этого, для сохранения изменений вы можете использовать кнопку Сохранить изменения, которая находится в инструментальной панели.
Отметим, что если вы только начали работать с документом и до настоящего момента не сохраняли его в отдельном файле, то при активизации команды Файл ► Сохранить на экране откроется окно, в котором нужно будет указать путь для сохранения и имя файла. А уже впоследствии с помощью данной команды вы будете просто сохранять внесенные в документ изменения.
При необходимости вы можете сохранить изменения, выполненные в документе, в отдельном файле под другим именем. Для этого нужно в главном меню выполнить команду Файл ► Сохранить как, после чего в открывшемся окне нужно будет указать путь для сохранения и имя файла. Также для этого можно воспользоваться комбинацией клавиш Ctrl+Alt+S или нажать в инструментальной панели кнопку Сохранить как.
Если вы работаете с несколькими документами, то можно одновременно сохранять изменения сразу во всех этих файлах. Для этого в главном меню предназначена команда Файл ► Сохранить все. Также можно воспользоваться кнопкой Сохранить все открытые документы, которая находится в инструментальной панели.
Описание режимов работы
Далее мы рассмотрим основные режимы работы, необходимые для создания полноценного веб-документа средствами программы Extra Hide Studio. Начнем с самого начала – с построения структуры веб-документа, после чего добавим и отформатируем текстовый контент, научимся вставлять гиперссылки, графические объекты, таблицы и прочие элементы, и т. д. При этом мы все время будем отслеживать результат выполненных действий, просматривая страницу в окне Интернет-обозревателя.
Как выполнить предварительную разметку веб-документа?
Как мы уже неоднократно отмечали ранее, начинать работу по созданию веб-страницы рекомендуется с ее предварительной разметки, иначе говоря – с построения предварительной структуры.
Проще всего предварительную разметку веб-документа делать с помощью панели быстрого ввода, которая расположена в правой части окна программы (см. рис. 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.
