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

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

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

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

Делаем сайт на CMS-Joomla

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

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

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

Регистрация доменного имя

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

Раскрутка и оптимизация сайта

• КАК ЗАРАБОТАТЬ НА САЙТЕ

Контекстная реклама

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

Заработок в партнерках

Заработок на СМС и файлах

Другие виды заработка

• ВИДЕОУРОКИ :

Видеоуроки по flash-анимации

Видеоуроки по сайтостроению

Видеоуроки по Photoshop

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

Новогодние открытки, обои

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

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

• РАЗНОЕ

Почтовая форма на сайте

Урок-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 3

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

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

Ваше имя

Ваш e-mail

Бесплатный мини-курс
по созданию сайта на
CMS - JOOMLA

размер файла 8.76 МБ
Скачать