Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Создание сайтов » Создание сайтов. Первый шаг
Не нравится(-) 149 Нравится(+)
Создание сайтов. Первый шаг

Здравствуйте уважаемые посетители Российской школы CSS! Сегодня, после длительного перерыва, мы возобновляем свою работу. Новый "сезон" начнём с детальной, пошаговой инструкции по созданию простейшего, но уже реального сайта.

В этой инструкции не будет специальных терминов, сокращений, пропущенных пунктов и т.д. Наша задача - объяснить основные принципы создания сайта тем, кто ещё не занимался этим интересным и потенциально полезным делом.

Итак, давайте начинать...
Сразу зададим ряд условий для разработки сайта:
1) У нас нет денег (или мы не хотим их тратить) - будем использовать бесплатный хостинг (место для размещения сайта);
2) У нас нет специальных навыков дизайна (Работы в Photoshop) - не будем использовать графику для создания шаблона;
3) У нас нет серьёзных навыков программирования, верстки и работы со стилями - напишем код в чудесной программе "Блокнот". Как и какой? - читайте ниже.

Начнём с того, что возьмём карандаш, листок бумаги и нарисуем макет будущего сайта. Тут никаких навыков кроме фантазии не надо. У меня получился такой желаемый макет:
Создание сайтов. Первый шаг


Простенько, зато аккуратно. Главное, что мы следуем начальным условиям разработки нашей персональной странички.

Теперь, приступим к самому интересному - написанию исходного кода нашего сайта (пишем на языке HTML).
Начнем с того, что откроем программу "Блокнот". Видим перед собой такое окно:
Создание сайтов. Первый шаг


Теперь запишем туда такой начальный код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Российская школа CSS. Персональный сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Весь шаблон -->
<div id="body">

Он призван обеспечить валидность (правильность) нашего сайта, задать его заголовок (title) и начать общий блок сайта.

Далее - нам необходимо задать верхний блок сайта. Конкретно - этот:
Создание сайтов. Первый шаг

Для этого - запишем в наш блокнот такой код:
  <!-- Строка заголовка -->
  <div id="header"><h1>Мой личный дневник</h1>
<a href="http://www.css-school.ru/">Российсая школа CSS</a></div>
  <!-- Конец стоки заголовка -->

Замечательно! первый блок задан. Теперь зададим блок с меню (навигацией по сайту). Вставим в блокнот такой код:
  <!-- Навигация по сайту -->
  <div id="navigation"><a href="/">Домой</a> <a href="/about.html">Обо мне</a> <a href="/gall.html">
    Галерея</a> <a href="/links.html">Полезные сайты</a> </div>
  <!-- Конец навигации -->

Готово. Теперь у нас есть навигация.
В своём шаблоне, мы не будем использовать страниц, а значит левая и правая колонки будут заданы блоками (div).
Запишем код для левой колонки:
    <!-- Левая колонка -->
    <div id="leftcolumn">
    <h3>Мои друзья</h3>
    <div id="rcs"><a href="http://www.css-school.ru/">Российсая школа CSS</a></div>
    <div id="gzweb"><a href="http://www.gzweb.ru/">GZweb.ru</a></div>
    <div id="wallday"><a href="http://www.wallpapersday.ru/">Wallpapers Day</a></div>
        <hr />
           <h3>Интересные события</h3>
     <ul>
     <li><a href="/">Российская школа CSS оживилась</a></li>
     <li><a href="/">У GZweb.ru новый дизайн</a></li>
     <li><a href="/gall.html">Моя галерея</a></li>  
     </ul>
     <br /><br />
    </div>
    <!-- Конец левой колонки -->

Теперь - для правой колонки (основного содержания сайта):
   <!-- Основное содержание сайта -->
    <div id="rightcolumn">
      <h1>Мой дневник появился</h1>
      <img src="1.jpg"  alt="Мой дневник появился" /><br />
        Рад сообщить Вам, что сегодня начал работать мой собственный дневник!!!
;)
<div id="undernew">Я опубликовал этот материал <b>12 октября 2008 года</b>. Категория - <b>Новости дневника</b>.</div>
    </div>
    <!-- Конец основного содержания сайта -->

Готово! Осталось сделать "подвал" сайта и закрыть наш код. Для этого - вставим в блокнот такой код:
    <div class="clear"> </div>
  <!-- Подвал -->
  <div id="footer">© 2008 Российская школа CSS. Материалы и шаблон сайта
    распространяются бесплатно.</div>
  <!-- Конец подвала -->
</div>
<!-- Конец шаблона -->
</body>
</html>

Вот и всё. Осталось - правильно сохранить нашу страничку. Для этого нажимаем: Файл -> Сохранить как -> index.html (Все файлы).
Создание сайтов. Первый шаг


Теперь создадим остальные веб-страницы. Начнем с галереи.
Заменим в нашем коде правую колонку на такую:
    <!-- Основное содержание сайта -->
    <div id="rightcolumn">
<div id="gall"><a href="/2.jpg"><img src="2s.jpg" alt="" /></a>
<a href="/2.jpg"><img src="2s.jpg" alt="" /></a>
<a href="/2.jpg"><img src="2s.jpg" alt="" /></a>
<a href="/2.jpg"><img src="2s.jpg" alt="" /></a>
<a href="/2.jpg"><img src="2s.jpg" alt="" /></a>
<a href="/2.jpg"><img src="2s.jpg" alt="" /></a></div>
</div>
    <!-- Конец основного содержания сайта -->

Сохраним этот файл как gall.html (в одной папке с index.html и необходимыми картинками).

Сделаем раздел "Обо мне". Для этого заменим правую колонку на такой код:
    <!-- Основное содержание сайта -->
    <div id="rightcolumn">
<div id="linfo" align="center"><img src="av.png" alt="Ya"></div>
<div id="myinfo">Информация обо мне...
</div>
</div>
    <!-- Конец основного содержания сайта -->

Сохраним его как about.html

Далее - сделаем страницу со ссылками на интересные ресурсы. Для этого заменим правую колонку на такое:
    <!-- Основное содержание сайта -->
    <div id="rightcolumn">
      <h1>Полезные ссылки</h1>
<a href="http://www.gzweb.ru/">Всё для Photoshop и веб-мастеров</a>
<div id="undernew">Ежедневно обновляемый, действительно полезный ресурс</div><br /><br />
<a href="http://www.css-school.ru/">Российская школа CSS</a>
<div id="undernew">Наше всё...</div>
    </div>
    <!-- Конец основного содержания сайта -->

Сохраним файл как links.html

Итак... Самое простое - позади. Теперь - пришло время поработать со стилями. Для этого - создадим в папке с сайтом файл style.css (создаём тоже с помощью блокнота).
В первую очередь - задаём стили для всего шаблона:
/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Персональный сайт
style.css - Набор стилей для урока
=============================================================
*/

/* Задание стилей всего шаблона */
* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding:10px;
}

#body {
margin: 0 auto;
width: 960px;
}

Очень хорошо. Начало положено. Теперь зададим стили для блока заголовка:
#header {
color:#fff;
width:946px;
padding:15px;
height:100px;
margin:5px 0;
background:#0d3143;
font:18px Verdana;
border:2px solid #466677;
}

#header a {
   text-decoration:none;
   color:#b7b7b7;
   font-size:13px;
   font-weight:bold;
}

#header a:hover {
   color:#ffa800;
}


Теперь надо оформить навигацию и добавить её кнопкам эффект при наведении на них мыши. Сделаем это:
#navigation {
color: #fff;
padding: 10px;
background: #466677;
width:956px;
border:2px solid #0d3143;
margin-bottom:10px;
}

#navigation a {
   margin:2px 10px;
   padding:5px 7px;
   color:#fff;
   text-decoration:none;
   font-size:13px;
   font-weight:bold;
   border:1px solid #466677;
}

#navigation a:hover {
   background: #ffa800;
   color:#333;
   border:1px solid #ffd89b;
}

Теперь зададим все стили для левой колонки. Особое внимание стоит уделить атрибуту float:left (он задаёт обтекание блока по левому краю).
#leftcolumn {
background:#e7e7e7;
display: inline;
color: #333;
margin-right:10px;
padding:10px;
width: 246px;
height:auto;
float: left;
border:2px solid #ddd;
}

#leftcolumn hr {
    margin:20px 0;
    border:0;
    width:95%;
    background-color:#0d3143;
    color:#0d3143;
    height:1px;
    text-align:center;
}

#leftcolumn ul {
   margin-left:10px;
   margin-top:10px;
}

#leftcolumn li {
   padding:5px 0;
}

#leftcolumn li a {
   text-decoration:none;
   font-weight:bold;
   color:#066dab;
}

#leftcolumn li a:hover {
   color:#ffa800;
}

#rcs a {
   display:block;
   padding:15px 20px;
   color:#fff;
   font:16px Verdana;
   text-align:center;
   text-decoration:none;
   font-weight:bold;
   background:#00a8ff;
   border:3px solid #a4e0ff;
   margin-top:10px;
}

#rcs a:hover {
   background: #a4e0ff;
   border:3px solid #00a8ff;
   color:#333;
}

#gzweb a {
   display:block;
   padding:15px 20px;
   color:#fff;
   font:16px Verdana;
   text-align:center;
   text-decoration:none;
   font-weight:bold;
   background:#22cb19;
   border:3px solid #a8f2a4;
   margin-top:10px;
}

#gzweb a:hover {
   background: #a8f2a4;
   border:3px solid #22cb19;
   color:#333;
}


#wallday a {
   display:block;
   padding:15px 20px;
   color:#fff;
   font:16px Verdana;
   text-align:center;
   text-decoration:none;
   font-weight:bold;
   background:#ff9c00;
   border:3px solid #ffd89b;
   margin-top:10px;
}

#wallday a:hover {
   background: #ffd89b;
   border:3px solid #ff9c00;
   color:#333;
}

Теперь зададим начальные стили правой колонки, её ссылок и картинок:
#rightcolumn {
float: right;
color: #333;
padding:0;
width: 680px;
display: inline;
position: relative;
text-align:center;
}

#rightcolumn a {
   text-decoration:none;
   color:#115375;
   margin:5px;
   display:block;
   font-weight:bold;
}

#rightcolumn a:hover {
   color:#ff7200;
}

#rightcolumn img {
border:2px solid #2a6a8b;
padding:5px;
margin:10px;
background:#e7e7e7;
}

Отлично. Теперь - стили для оформления новостей -
#rightcolumn h1{
color: #555;
display:block;
height:35px;
border-bottom:4px solid #ff9c00;
padding-left:30px;
font-size:28px;
margin-bottom:15px;
text-align:left;
}

#undernew,
#undernew1 {
color: #555;
padding: 10px;
background: #466677;
border:2px solid #2a6a8b;
margin:10px 0;
background:#e7e7e7;
}

Пришло время оформить и "подвал". Здесь обратим внимание на стиль .clear. Он позволяет избежать наезда подвала на основное содержание сайта.
.clear { clear: both; background: none; }

#footer {
clear: both;
color: #fff;
padding: 10px;
background: #466677;
width:956px;
border:2px solid #0d3143;
margin:10px 0;
}


Вот и всё. Оформление главной страницы закончено.
Для страницы "Обо мне" зададим такие стили:
#linfo {
  float:left;
  width:250px;
}

#myinfo {
   border-left:1px dotted #666;
   margin-left:250px;
   text-align:left;
   padding-left:10px;
   height:380px;
}

Для галереи зададим специальные атрибуты прозрачности. Скажу сразу, что они не являются валидными, но адекватно работают во всех распространённых браузерах.
#gall a {
float:left;
width:210px;
height:135px;
padding:0;
margin:3px;
display:block;
filter:alpha(opacity:50);
opacity:0.5;
}

#gall a:hover {
  filter:alpha(opacity:100);
  opacity:1.0;
}

#gall img {
padding:0;
margin:0;
border:none;
}


Итак, мы закончили со стилями. Теперь - нам надо опубликовать сайт в интернете. Для этого воспользуемся услугами Яндекса (www.yandex.ru).
Для начала - нам надо зарегистрироваться в почте
Создание сайтов. Первый шаг

Замечу, что Логин - имя нашего будущего сайта. После удачной регистрации - увидим такую панель:
Создание сайтов. Первый шаг

Кликнем на "Народ" и создадим свой сайт.

Всё готово. Осталось только закачать файлы сайта на сервер "Народа" и посмотреть на результат.
Для этого откроем "Мой компьютер" и в поле адреса впишем [b]ftp.narod.ru

Создание сайтов. Первый шаг

Нажмем Enter и увидим такую форму входа:
Создание сайтов. Первый шаг

Где Логин - Ваш логин на Яндексе, а пароль - Ваш пароль на Яндексе.
Далее - простым перетаскиванием, копируем файлы сайта на сервер. После завершения этой операции - посмотрим наш сайт, вбив в адресную строку браузера его адрес. В нашем случае это будет Ваш_логин.narod.ru. Теперь - наш сайт доступен всему миру!

Вот и всё. На этом пока остановимся. Спасибо за внимание!

P.S. HTML код представленного шаблона полностью валиден
P.P.S. Все правки и предложения по поводу этой статьи принимаются в комментариях к ней
P.P.P.S Администрация начинает ряд процедур по восстановлению и модернизации сайта. В ближайшее время будет запущен форум и скорректированы правила.
Комментарии - включены., но в связи с тем, что здесь тварилось в последние пару месяцев - каждый комментарий будет проходить полную проверку.



Автор: Григорий Загребельный, Российская школа CSS


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 33909 раз(а) и написали 33 комментариев.
1 2


Подписаться на канал RSS Добавить сайт в закладки

«    Декабрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!