Опубликовал HaZarD 23.04.2024 в раздел: Общие уроки | 0 комментов

Первый шаг

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

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

Итак, давайте начинать...
Сразу зададим ряд условий для разработки сайта:
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>Персональный сайт</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://allto.ucoz.ru/">Путеводитель Web-мастера</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://allto.ucoz.ru/">Путеводитель Web-мастера</a></div>
</div>
        <hr />
           <h3>Интересные события</h3>
     <ul>
     <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 AllTo.uCoz.Ru - Материалы и шаблон сайта
    распространяются бесплатно.</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.AllTo.uCoz.ru/">Всё для Photoshop и веб-мастеров</a>
<div id="undernew">Ежедневно обновляемый, действительно полезный ресурс</div><br /><br />
    </div>
    <!-- Конец основного содержания сайта -->

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

Итак... Самое простое - позади. Теперь - пришло время поработать со стилями. Для этого - создадим в папке с сайтом файл style.css (создаём тоже с помощью блокнота).
В первую очередь - задаём стили для всего шаблона:

/*
=============================================================
© 2008 Путеводитель Wеб-мастера
http://All
Персональный сайт
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).
Для начала - нам надо зарегистрироваться в почте

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


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

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

Нажмем Enter и увидим такую форму входа:


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

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

P.S. HTML код представленного шаблона полностью валиден
P.P.S. Все правки и предложения по поводу этой статьи принимаются в комментариях к ней

0 Комментариев