Алексей Гладкий - Веб-Самоделкин. Как самому создать сайт быстро и профессионально

Читать онлайн «Веб-Самоделкин. Как самому создать сайт быстро и профессионально». Страница 42

Автор Алексей Гладкий

Присвоим нашей странице название Сведения о компании, и сформируем в ней следующий текст:

Наша компания была создана в 2005 году. За прошедшее время мы сумели занять лидирующие позиции на рынке и завоевать немало постоянных клиентов. Наша прибыль постоянно растет, и мы задумываемся о расширении. Будем рады видеть вас в числе наших клиентов!

Пока уберем из программного кода ненужные в данный момент элементы (теги вставки графического объекта и таблицы) – в результате он будет выглядеть так, как показано в листинге 5.5.

Листинг 5.5. Ввод текстовой части контента

<html>

<head><title>Сведения о компании</title></head>

<body>

Наша компания была создана в 2005 году.

За прошедшее время мы сумели занять лидирующие позиции на рынке и завоевать немало постоянных клиентов.

Наша прибыль постоянно растет, и мы задумываемся о расширении.

Будем рады видеть вас в числе наших клиентов!

</body>

</html>

Теперь просмотрим, как в данный момент будет выглядеть наша страница в окне Интернет-обозревателя, предварительно сохранив выполненные изменения (рис. 6.5).

Рис. 6.5. Вид страницы в окне Интернет-обозревателя

Отметим, что в программе имеется встроенный обозреватель, позволяющий просматривать текущую страницу. Он находится на вкладке Просмотр рабочей области, его можно также вызвать нажатием клавиши F9 или с помощью команды главного меню Файл ► Просмотр. Это довольно удобно, но в данном обозревателе не отображается название веб-страницы.

Теперь сделаем так, чтобы каждая фраза текста начиналась с новой строки. Для этого нужно поочередно установить курсор после каждой фразы и нажать кнопку BR на вкладке Основные. В результате после каждой фразы появится тег <br>, предназначенный, как известно, для вставки разрыва.

Теперь добавим на нашу страницу заголовок и займемся форматированием текстовой части контента. Для этого нам нужно перейти на вкладку Шрифт, содержимое которой показано на рис. 6.6.

Рис. 6.6. Инструменты, предназначенные для форматирования текста

В строке, следующей за тегом <body>, введем приветственную фразу Добро пожаловать, затем выделим ее и нажмем в инструментальной панели данной вкладки кнопку H1. Как нетрудно догадаться, эта кнопка предназначена для создания заголовков первого уровня путем вставки тегов <h1> </h1>. Аналогичным образом кнопки Н2, H3, H4, Н5 и Н6 предназначены для создания заголовков соответственно со второго по шестой уровни.

Следовательно, в результате нажатия кнопки Н1 фраза Добро пожаловать будет заключена в теги <h1> </h1>.

Теперь сделаем так, чтобы первая после заголовка фраза отображалась жирным шрифтом. Для этого выделим ее и в инструментальной панели вкладки Шрифт нажмем кнопку В – в исходном коде данная фраза будет заключена в теги <b> </b>. Отметим, что аналогичным образом вы можете включать курсивное (его мы применим к последней фразе текста, заключив ее в теги <i> </i>), подчеркнутое или зачеркнутое начертание шрифта – для этого в инструментальной панели предназначены соответствующие кнопки.

В результате выполненных действий исходный код нашей веб-страницы будут выглядеть так, как показано в листинге 5.6.

Листинг 5.6. Форматирование текста

<html>

<head><title>Сведения о компании</title></head>

<body>

<h1>Добро пожаловать</h1>

<b>Наша компания была создана в 2005 году.</b><br>

За прошедшее время мы сумели занять лидирующие позиции на рынке и завоевать немало постоянных клиентов.<br>

Наша прибыль постоянно растет, и мы задумываемся о расширении.<br>

<i>Будем рады видеть вас в числе наших клиентов!</i><br>

</body>

</html>

Теперь сохраним выполненные изменения и перейдем на вкладку Просмотр (рис. 6.7).

Рис. 6.7. Вид страницы с отформатированным текстом на вкладке Просмотр

На этой же вкладке кнопка Надстрочный предназначена для сдвига выделенного слова или текстового фрагмента вверх относительно расположенного рядом текста (иначе говоря, включается верхний индекс). Кнопка Подстрочный предназначена для сдвига выделенного слова или текстового фрагмента вниз относительно расположенного рядом текста (иначе говоря, включается нижний индекс). Названия кнопок отображаются в виде всплывающих подсказок при подведении к ним указателя мыши.

Кроме этого, на вкладке Выравнивание имеются кнопки для выравнивания текста на странице. Эти кнопки перечислены ниже.

• По левому краю – при нажатии данной кнопки текст выравнивается по левому краю.

• По центру – с помощью данной кнопки текст можно выровнять по центру.

• По правому краю – при нажатии данной кнопки текст выравнивается по правому краю.

• По ширине – в данном случае текст будет растянут по всей ширине веб-страницы.

Порядок применения кнопок прост: нужно выделить в исходном коде соответствующий текстовый фрагмент и нажать требуемую кнопку.

Вставка графических объектов

В данном разделе мы рассмотрим, каким образом в веб-документ можно вставить изображение, картинку или иной графический объект. Отметим, что возможности программы предусматривают вставку графических объектов тремя способами. Первый заключается в том, чтобы просто вручную ввести фрагмент исходного кода, необходимый для вставки на страницу изображения. Второй частично автоматизирует данный процесс: для этого на вкладке Вставка нужно нажать кнопку Картинку (название кнопки отображается в виде всплывающей подсказки при подведении к ней указателя мыши) – в результате в то место, где находился курсор, будет добавлен следующий фрагмент кода: <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.