Home О нас Самоучитель иврита Путеводитель по Израилю Фотопутешествия Города Израиля Телефонный справочник Еврейские имена Еврейские праздники Ивритская поэзия
Как построить сайт
Учебник HTML и Photoshop. Построение блога на WordPress. Построение портала на Drupal.




HTML
Photoshop
WordPress
Drupal

Учебник HTML и Photoshop



Предыдущая глава


Создаем графический заголовок сайта



Давайте теперь вместо скучной надписи-заголовка сделаем для нашего сайта картинку-заголовок. Допустим, мы хотим написать заголовок желтыми буквами на оливковом фоне. Нажимаем в меню Tools на верхний из двух квадратиков внизу, определяющих цвет, и в раскрывшемся окошке с цветами выбираем в радужной вертикальной полоске желтый цвет, затем в большом квадрате - его точный оттенок, который нам нравится. Нажимаем ОК. Теперь нажимаем на нижний квадратик - для выбора фона, и точно так же выбираем понравившийся нам оттенок оливкового цвета.

Открываем новый файл. Пусть он будет длиной 600 пикселей и высотой 100 пикселей. Цветовой режим должен быть RGB. И, конечно же, указываем, что фоном нашего файла должен стать выбранный нами фоновый цвет.

Теперь во все том же меню Tools находим справа в середине квадратик с буквой Т. Нажав на него, мы переходим в режим текста. Ткнув где-нибудь (лучше полевее и пониже) внутри нашего нового файла с оливковым фоном, мы увидим курсор.

А теперь просто пишем текст: "Домашняя страница Лены Петровой". Буквы будут получаться выбранного нами желтого цвета.

Теперь, так же, как вы сделали бы это в любом текстовом редакторе, выделите мышкой весь написанный текст, а затем выберите его шрифт и величину. Вы можете также на этом этапе, если захотите, изменить цвет букв. Все эти опции вам предлагает меню Options, расположенное наверху под основным меню. Как видите, вы можете даже центрировать наш текст или прижать его вправо или влево.

Выходим из текстового режима, выбирая в меню Tools правую верхнюю опцию - крестик со стрелкой. Если вы теперь поставите курсор на вашу надпись, вы увидите, что вы можете ее двигать по фону. Установите ее там, где вам нравится (в данном случае посередине).

Наш файл готов. Осталось его записать. Для этого в основном меню выбираем File -> Save to Web. Теперь нам нужно выбрать расширение для файла - оно должно быть jpeg, gif или png. Давайте выберем jpeg. Все. Нажимаем на Save. Выбираем название для файла, например, zagolovok.jpg.

Файл для заголовка сайта готов. Чтобы вставить его в код нашей страницы, нам надо заменить

<center><h1>Домашняя страница Лены Петровой</h1></center>

на

<center>
<img src="zagolovok.jpg" alt="Страничка Лены Петровой" width=600 height=100 border=0>
</center>

(Обратите внимание, что в качестве "альтернативного текста" мы написали "Страничка Лены Петровой" - в случае, если картинка по какой-либо причине не появится, пользователь увидит на ее месте эту надпись).

Сделав эту замену и визуально оценив последствия, мы видим, что лучше теперь убрать промежуток между ставшим картинкой заголовком и таблицей под ним. Что ж, доверимся своему вкусу и выкинем стоящие там три <br>.

Теперь, заглянув одним глазком в программу Adobe Photoshop и поняв, что с ней вполне можно справиться, Лена, возможно, задумается о том, чтобы разместить на своем сайте альбом фотографий - например, из ее последнего путешествия в Грецию. Пока она раздумывает, давайте прямо сейчас поставим на него ссылку с заглавной страницы, под ссылкой на содержание стихов и рассказов (не забыв отделить ее тегом <p>). Допустим, файл с альбомом будет называться albom.html.

<html>
<head>
<title>Лена Петрова. Стихи, рассказы, фотографии.</title>
<meta name="description" content="Литературная страничка Лены Петровой">
<meta name="keywords" content="литература стихи рассказы повести фотографии">
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<link href="styl.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor=yellow>

<br><br>
<center>
<img src="zagolovok.jpg" alt="Страничка Лены Петровой" width=600 height=100 border=0>
</center>
<center>

<table width=600>
<tr>
<td>

<center>

<table width=600 border=0 cellpadding=5>
<tr valign=top bgcolor=gray>
<td width=300 height=200>
<img src="lena.jpg" alt="Лена Петрова" width=300 height=200 border=0>
</td>
<td align=left>
<h2><font color=yellow>Лена Петрова</font></h2>
<font color=white>Это скамейка неподалеку от дома, на которой я люблю сидеть в одиночестве. Именно здесь лучше всего пишутся мои стихи.</font>
</td>
</tr>
<tr>
<td colspan=2 align=center bgcolor=olive>
<br><br>
<h3><font color=yellow>Я рада, что вы ко мне зашли!!</font></h3>.
</td>
</tr>
</table>

<p>

<a href="soderjanie.html">Содержание стихов и рассказов</a>
<p>
<a href="albom.html">Альбом фотографий</a>
</center>

</td>
</tr>
</table>

</body>
</html>



Следующая глава






О чем здесь можно узнать: УЧЕБНИК HTML И PHOTOSHOP

ПОСТРОЕНИЕ БЛОГА НА WORDPRESS
ПОСТРОЕНИЕ ПОРТАЛА НА DRUPAL








© Netzah.org.
Разрешается свободное цитирование материалов сайта
при условии указания активной ссылки на эту страницу: http://textbook.netzah.org/