Делаем сайт на практике

Картинки

Создание страницы HTML

Делаем сайт в Photoshop

Делаем сайт в M/Dreamweaver

Установка веб-сервера

Как подобрать тему для сайта

Размещение сайта в интернете

Регистрация сайта

Как зарабатывать на сайте

• КОЛЛЕКЦИЯ КАРТИНОК :

Флеш-алфавит

Изображения людей

Изображения компьютеров

Денежные купюры и монеты

• Инструкции по работе с :

Программа LeapFTP

FTP-клиент в Total Commander

• Скачать шрифты

Подписка на рассылку

Как создать сайт на SMC-движках, таких как, JOOMLA, PHP Fusion, установить на свой сайт форум, гостевую книгу, создать собственную рассылку, установить форму оплаты и т.д.
О выпуске этих и других уроков вы узнаете, подписавшись на рассылку

Ваше имя

Ваш e-mail

Урок-8

И так приступаем к созданию сайта. Если в предыдущих уроках мы учились создавать страницу с фиксированной таблицей, то есть задавали размеры в пикселях ,width= "" height="" , то сейчас мы будем создавать резиновый сайт, чтобы страница растягивалась на всю ширину экрана и одинаково смотрелась во всех браузерах,с любым разрешением экрана, размеры задаются в процентах.

Начнем делать такой сайт

Создайте новую директорию (папку) в нее поместите созданный на предыдущем уроке файл style.css, в этой же папке создайте новую папку и назовите ее images в нее мы будем помещать картинки для сайта. Откройте блокнот и сохраните в этой же директории как index.html. Теперь в этом файле (index.html) напишите следующий код красного цвета:

<!DOCTYPE HTML PUBLIC "-//W3C?//DTD HTML 4.01 TRANSITIONAL//EN">

<html>

<head>

<title> </title>

<meta http-EQUIV="Content-Type" Content="text/html; charset=windows-1251">

<meta name="keywords" Content=" ">

<meta name="Description" Content=" ">

<LINK href="style.css" TYPE="text/css" rel="stylesheet">

</head>

<body>
<table width=100% CELLPADDING=0 CELLSPACING=0 border=0>

<tr>
<td colspan=2 width=100% height=153 bgcolor="#FBE5E7">
</td>
</tr>

<tr>
<td colspan=2 width=100% height=34 background="images/srez.jpg">
</td>
</tr>

<tr>
<td class="menu" width=25% height=100% bgcolor="#FAF0E6">Здесь будет размещено меню </td>

<td width=75% height=100% bgcolor="#FAF0E6"> </td>
</tr>

<tr>
<td colspan=2 width=100% height=27 background="images/srez2.jpg"> </td>
</tr>

</table>
</body>
</html>

После написания этого кода сайт буде выглядеть ТАК

Теперь создадим в программе Adobe Photoshop шапку для сайта (смотри урок Как сделать сайт в программе Adobe Photoshop) Инструментом для вырезания выделим текст с названием сайта и сохраним как "logo.jpg"

Затем отключим в панели слоев программы Adobe Photoshop слой с названием сайта, выделим и вырежем левую сторону, сохраним как "ledi.jpg, так же вырежем правую сторону и сохраним как "globys.jpg".

У нас получилось три отдельные картинки, поместим их в папку "images". Так как в коде сайта, в строке для шапки, мы задали цвет фона такой же как и цвет фона картинок, то разрыв между ними при растягивании страницы будет не заметен.

Страницы 1 2

Для оформления сайта

страницы сайта

Сейчас на этой странице