Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Etapy-sozdaniya-sajta » Sozdanie-karkasa-sajta

Создание табличного каркаса сайта

Давайте для начала разберемся: «Что же такое каркас?» В моем понимании этого слова это прежде всего основа (основание), на которой все держится. В данном случае, на нем будет держатся сайт. К нему мы сможем прикреплять картинки, тексты, таблицы и т.д.karkas

Ну вот мы и добрались с вами до самого интересного. Для этого нам понадобится знание языка HTML.


Мы с вами будем делать табличный каркас (существуют и другие виды каркаса). Начнем! Я сделал таблицу из 1-ого столбца и 4-х строк:

  
    <html>
         <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Как создать сайт</title>
         </head> 
           <body>
 <table width="100%" border="1">
    <tr>
       <th scope="col">&nbsp;</th>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
 </table>
          </body>
   </html> 

Далее, в верхней строке таблицы мы вставим ещё одну таблицу, состоящую из 1-ой строки иshapka 3-х столбцов. Логотип, который вы видите в левом верхнем углу этого сайта, находится в первом столбце. Сразу скажу, нашел я картинку с компьютером. Подредактировал в Photoshop, в нем же написал и наложил эффекты на надпись названия сайта. Немного поработал кисточкой, объединил слои — вуаля логотип готов! Здесь нет ничего сложного немного поработайте в Photoshop и я уверен у вас получится намного лучше, чем у меня (я не художник — увы).

Весь HTML-код для нашего каркаса сайта будет следующим:


<html>
              <head>
               <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
               <title>Документ без названия</title>
              </head>
            <body>
               <table width="100%" border="1">
  <tr>
  <th scope="col"><table width="100%" border="1">
   <tr>
  <th width="36%" height="407" scope="col"><img src="file:///Z|/home/sdcvoy.ru/www/img/shapka_saita.jpg" width="332" height="396"></th>
  <th width="33%" scope="col">&nbsp;</th>
  <th width="1%" scope="col">&nbsp;</th>
  </tr>
  </table></th>
  </tr>
  <tr>
  <td>&nbsp;</td>
  </tr>
  <tr>
  <td>&nbsp;</td>
  </tr>
  <tr>
  <td>&nbsp;</td>
  </tr>
  </table>
  </body>
   </html>

Этот код помещаем в файл index.html. Каркас для сайта почти готов, осталось его немного подредактировать и изменить цвет фона для нашего сайта с помощью внешней таблицы стилей CSS. Я думаю, что вы дорогие читатели, уже познакомились с CSS и поняли какой это мощный инструмент для разработки сайта. Многие из вас скажут мне что я использовал не табличный каркас для сайта, а блочный. Но смею вас заверить, что время не стоит на месте, а двигается вперед. И сайт меняется, поэтому на рисунках вы можете видеть старые скриншоты сайта, каким он был в самом начале своего развития.  Я не стал менять статью, хочу чтобы вы посмотрели как создавался сайт.


Каркас для этого сайта сделан, осталось сделать меню и заняться его заполнением. Чем мы и займемся в следующих статьях.



наверх