Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Your support
Ваша поддержка

Посмотрим, что у нас получилось.

И так, у Вас главная страница сайта готова и уже залита на сервере( может быть, еще не размещена - не важно). Главное Вы построили структуру страницы сайта, которая функциональна и она работает.

Для этого набираете имя своей страницы сайта или имя своего домена на хостинге и нажимаете. У Вас появиться чистый экран без какой-либо информации. Это первый признак, что Ваша страница сайта отобразилась( кто еще не успел или не захотел еще обзавестись собственным доменом, тот все это проделывает через Total Commander нажимает на файл index.html правой кнопкой на" открыть с помощью" и далее...)

Щелкаем правой кнопкой, нажимаем на "Исходный код" и видим нашу структуру страницы сайта:

           < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
           < html>
           < head>
           < title>Demo.< /title>
           < link rel="stylesheet" href="../stylesheet/.css" type="text/css">
           < /head>
           < body>
           < div id="nav">< /div>
           < table>
           < tr>
           < td id="tdleft">
           < /td>
           < td id="tdcenter">
           < /td>
           < td id="tdright">
           < /td>
           < /tr>
           < /table>
           < div id="copy">< /div>
           < /body>
           < /html>

Чтобы визуально представить структуру сайта, верхний колонтитул( < div id="nav">< /div>), левая колонка( < td id="tdleft">< /td>), центральная колонка( < td id="tdcenter">< /td>), правая колонка( < td id="tdright">< /td>), нижний колонтитул( < div id="copy">< /div>).

Вот здесь надо сказать, что вместо табличных элементов более эффективнее и мощнее будет если три колонки оформить используя блочный элемент div: тогда левая колонка будет выглядеть как < div id="sidebar1">, центральная как < div id="content">, правая колонка как < div id="sidebar2">, потому как они будут независимы друг от друга и при помощи каскадных таблиц стилей можно творить чудеса. Почитайте основы HTML.

Но наша задача понять суть структуры страницы сайта и потому просто оконтурим блоки рамками, так как блоки и есть прямоугольные рамки внутри которых можем размещать любой текст, коды, изображения, аудио, видео ролики и т.д. Проявим эти рамки каскадными таблицами стилей. Заходим Adobe Dreamweaver CS5 открываем файл index.css и там напишем следущее:

          @ charset "utf-8";
          /* CSS Document */

          body {                 
                                                /* Все что будет находиться между этими слешами
                                                   ( косой черточкой) и звездочками 
               }                                 есть комментарий, машины не будут выполнять. */
	   
          div#nav {                 
               width: 100%;                 /* Верхний колонтитул будет шириной( width)
               border: solid 1px;               окна = 100%, рамка будет     
               }                                   одинарной( solid) и шириной в один пиксель 1px; */
	           
          table {
                  width: 100%; 
                  height: 95%;            /* Общая рамка таблицы будет шириной( width: 100%;)
                  border: 1px;                    и высотой( height: 100%;),рамка будет      
                 }                                 одинарной( solid) и шириной в один пиксель 1px;  */          
	  
          td#tdleft { 
                 width: 20%;
                 border: solid 1px;  
	                                            /* Далее тут все понятно, что ширина левой колонки
                   }                              будет 20% от ширины таблицы,центральная колонка
                                                   будет занимать 60%, правая колонка 20%, всего,
                                                    как видите в сумме будет 100%./* ширина нижнего 
	                                                    колонтитула 100% */
         td#tdcenter {
                 width: 60%;
	             border: solid 1px;
	                }
         td#tdright {
                 width: 20%;
	             border: solid 1px;
	                  }	  
         div#copy {
	              width: 100%;
	              border: solid 1px;
	               }
                 

Все это заносите в файл index.css и через Total Commander копируйте в корневой "Сайт" на хостинге( как обычно в левом окне открываете диск"с", нажимаете на FTP, соединиться, на имя своего домена и с правого окна сохраненный файл index.css копируете при помощи F5).

В файле zagolovok.html заносите следующее:

                 < /head>
                 < body>
                 < div id="nav">Верхний колонтитул< /div>
                 < table>
                 < tr>

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

В файле barlevij.html заносите следующее:

                < td id="tdleft">
                Левая колонка
                < /td>
                < td id="tdcenter">
                Центральная колонка

В файле barpravij.html заносите следующее:

                < /td>
                < td id="tdright">
                Правая колонка
                < /td>
                < /tr>
                < /table>

Все файлы сайта сохраняем и копируем. Вызываем свою страницу сайта и появляются блок верхнего колонтитула, левая, центральная, правая колонки, блок нижнего колонтитула;

Как видите легко и просто оформлять и управлять страницей сайта. Какой формы Вы хотите видить страницу сайта такой сделайте себе. Хотите убрать верхний колонтитул, пожалуйста. Просто в файле zagolovok.html убираете строчку блока < div id="nav">Верхний колонтитул< /div>. Хотите страничку бесплатного сайта без левой колонки, пожалуйста. В файле barlevij.html убираете строчку левой колонки < td id="tdleft">Левая колонка< /td>. И в файле каскадной таблицы стилей index.css ширину центральной колонки и правой колонки такой как Вам нужны и хочется. Экспериментируйте и пробуйте. Прочитайте про стили CSS. Знание в создании сайта приходит с опытом. Но наши файлы-блоки zagolovok.html, barlevij.html, barpravij.html, golova.html, podval.html лучше не трогать и не изменять, пусть они останутся пока не тронутыми.

Ведь управлять можно просто через файл index.css не заходя в файлы-блоки. Всего лишь задавая параметры блоков: отключая рамки, оформляя фон блоков, цвет, размер, стиль буквы и строк. Ведь абзацы p сайта тоже по блочному принципу строятся. Теперь можно и начать разукрашивать все это хозяйство по своему вкусу. Тут миллионы вариантов цветов и форм. Заметили, наверное, что при оформлении файла Вам на помощь выбрасываются варианты кодов HTML, скриптов только остается правильно определить, что куда и все. Давай для примера посмотрим на другой странице.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную   назад   дальше   вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: