Четверг, 21 Ноября 2024, 17:13

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 1
  • 1
Делаем небольшой сайтец
daunДата: Воскресенье, 22 Апреля 2012, 13:42 | Сообщение # 1
постоянный участник
Сейчас нет на сайте
Для тех, кому очень хочется, но не знается. smile
Делаем небольшой сайтец, для игровых поделок, с нуля, на пустом месте.



6. Далее займемся версткой нашего сайтика.
На время забудьте про php, только html и css.

В "index.php" вставляем:

Code

<?php
echo '
<html>
<head>
<!-- Кодировка -->
<meta charset="utf-8">
<!-- Подключаем style.css -->
<link href="style.css" rel="stylesheet" type="text/css">
<title> Gamiki </title>
</head><body>

    <!-- Страница с прозрачным фоном  настройки в style.css -->
    <div class="stol">

    <!-- страницу разделяем на три горизонтальные полосы, у каждой свой цвет -->
       <!-- верх  настройки в style.css -->
       <div class="verh">
          <h1>GAMIKI.RU</h1>
          <div class="font3">Ля ля ля</div>
       </div>

       <!-- центр  настройки в style.css -->
       <div class="centr">

          <!-- центр разделяем на две колонки -->
          <!-- левая колонка -->
          <div class="kolL">
          <!-- бокс контента -->
          <div class="box">
              <!-- заголовок -->
              <h4>Заголовок</h4>
              <!-- линия -->
              <div class="lin"></div>
              <!-- картинка -->
              <div class="img"><img src="img/1.jpg"></div>
              <!-- шрифт для текста -->
              <div class="font2">
                    Text
              </div>
              <!-- линия -->
              <div class="lin"></div>
              <!-- Просмотров и Подробно разделяем на две колонки -->
              <div class="lev">
              <div class="font3">Просмотров: </div>
              </div>
              <div class="rig">
              <div class="font3"><a href="#">Подробно</a></div>
              </div>

          </div>
          </div>
           
          <!-- правая колонка -->
          <div class="kolR">
             <!-- бокс ? -->
             <div class="box">

             </div>

             <!-- бокс меню -->
             <div class="box">
                <ul>
                   <li><a href="#"></a></li>
                </ul>
             </div>

             <!-- бокс ? -->
             <div class="box">

             </div>
          </div>

          <div class="stop"></div>

       </div>

       <!-- низ  настройки в style.css -->
       <div class="niz">
          <div class="copyrig"> copyright © 2012 All rights reserved. </div>
       </div>

    </div>

</body></html>
';
?>


В "style.css" вставляем:

Code

/*  цвет фона и горизонтальный размер страницы  */
body{background: #BD7C54;   max-width: 1280px; min-width: 950px; margin: 0 auto;}  

/* страница */
.stol{  align: center; width: 950px;  padding: 0px 0px 0px 0px; margin: 0px auto 0px auto;}

/* страницу разделяем на три горизонтальные полосы, у каждой свой цвет */
/* можно фон заливать бесшовным тайлом .centr{background: #FFFFFF url(img/pik.png); padding: 10px 20px 10px 20px; margin: 0px 0px 0px 0px;} */
.verh{background: #915840 url(img/log.jpg); padding: 10px 20px 10px 40px; margin: 0px 0px 0px 0px;}
.centr{background: #915840; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
.niz{background: #915840; padding: 10px 20px 10px 20px; margin: 0px 0px 0px 0px;}

/*центр разделяем на две колонки*/
.kolL{  float:left;  width: 655px;  padding: 0px 0px 0px 5px; margin: 0px 0px 0px 0px; }
.kolR{  float:left;  width: 280px;  padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}

/* "Подробно" разделяем на две колонки*/
.lev{  float:left;  width: 540px;  padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
.rig{   padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}

/*бокс для контента*/
.box{ background: #F0A765;   padding: 5px 10px 10px 10px; margin: 7px 2px 7px 7px; border: 1px solid  #542729; border-radius: 7px 7px 7px 7px;}

/*Картинка с рамкой и обтеканием текста*/
.img{ float:left;  padding: 3px 3px 3px 3px; margin: 0px 10px 5px 0px; border: 1px solid #BD7C54; border-radius: 0px 0px 0px 0px}

/*линия*/
.lin{background: #BD7C54;   padding: 1px 0px 0px 0px; margin: 10px 0px 5px 0px;}

/*шрифт и цвет заголовка*/
h1{ color: #FFCD72; font-family: "Verdana"; font-size: 40px;}  
h2{ color: #00C0FF; font-family: "Tahoma"; font-size: 13px;}  
h3{ color: #999999; font-family: "Verdana"; font-size: 12px;}  
h4{ color:#915840; font-family: "Verdana"; font-size: 13px;}

/*шрифт и цвет текста*/
.font1{ font-family: "Verdana"; font-size: 10px; color: #666666;}
.font2{ font-family: "Verdana"; font-size: 12px; color: #542729;}
.font3{ font-family: "Verdana"; font-size: 11px; color: #7D1B17;}

/**/
.copyrig{width: 900px; text-align: center; font-family: "Verdana"; font-size: 10px; color: #452409; padding: 30px 0px 0px 0px; margin: 0px 0px 0px 0px;}

/*разделитель*/
.stop{clear: both;}

/*цвет точки в меню*/
ul{color: #8C752D;}

/*цвета и шрифт ссылок*/
a{ color: #542729; text-decoration: none;  font-family: "Verdana";  font-size: 11px; }
a:hover{ color: #996666; text-decoration: underline; font-family: "Verdana";  font-size: 11px; }


Запускаем денвер и смотрим на результат.
Там и там есть комментарии. Можно многое менять, подгоняя под свой вкус.
Шаблон жутко примитивный, но для начинающих самое то.

smile ...


Сообщение отредактировал daun - Понедельник, 23 Апреля 2012, 10:07
reyzorДата: Воскресенье, 22 Апреля 2012, 13:55 | Сообщение # 2
Проггер в законе
Сейчас нет на сайте
И где может пригодиться описанный выше метод ?

Юзаю Unity3d +C#
Мой твиттер
Помог - ставь +, Ответил на вопрос - ставь +.
ShadowZiДата: Воскресенье, 22 Апреля 2012, 14:02 | Сообщение # 3
постоянный участник
Сейчас нет на сайте
Для локального тестирования php сайтов на своём компе

Хостить с денвера на другой мир можно но геморно.
dima9595Дата: Воскресенье, 22 Апреля 2012, 14:45 | Сообщение # 4
почти ветеран
Сейчас нет на сайте
Quote (ShadowZi)
Для локального тестирования php сайтов на своём компе Хостить с денвера на другой мир можно но геморно.

И нафига это всё писать тогда?Просто взял и поставил новый сайт(можно и движок),и зачем этим мучиться?


daunДата: Понедельник, 23 Апреля 2012, 10:13 | Сообщение # 5
постоянный участник
Сейчас нет на сайте
Добавил

Quote (dima9595)
И нафига это всё писать тогда?Просто взял и поставил новый сайт(можно и движок),и зачем этим мучиться?

Все ровно все подохнем. biggrin
biohazardoДата: Понедельник, 23 Апреля 2012, 10:48 | Сообщение # 6
участник
Сейчас нет на сайте
Что за уроки копипаста... Ни объяснений, ничего нет, а комменты сильно не помогут. Так веб невозможно начать учить, и понять что нибудь. Поэтому либо учить серъезно с нуля, либо брать CMS и вообще не париться.

web-developer, который хочет делать игры хотя-бы чуть-чуть

Сообщение отредактировал biohazardo - Понедельник, 23 Апреля 2012, 10:49
  • Страница 1 из 1
  • 1
Поиск:

Все права сохранены. GcUp.ru © 2008-2024 Рейтинг