Создание адаптивной страницы сайта в DREAMWEAVER 15 (HTML5)

  1   2   3   4   5   6   7   8   9

пред след

У конструктора SS есть два режима-«все» и «тек» (рис.18). При «все» выводятся все селекторы страницы. При «тек» выводятся классы, относящиеся к  выделенному тэгу в режимах «Код», «Дизайн» и «Интеракт».  В правом верхнем углу есть «Набор». Если поставить галочку, то в «Свойствах» покажутся только заданные свойства. Свойств много, но не все они нужны для данного селектора.
Для размещения фото или баннера в верхней части страницы используем тэг header. Для него определим селектор .header с шириной 1105 рх и высотой 120рх.
В него вставим навигацию-тэг nav.  Определим для  nav  селектор .gornav (горизонтальную навигацию), т.к. будем далее создавать вертикальную навигацию. Проделаем аналогичную операцию, как с continer. В свойствах для класса gornav зададим по ширине 100% (чтобы по ширине полностью заполнил тэг header) и высоту также 120 рх(на рис. 135 px).  Сделаем голубые рамки для тэгов header и nav, используя тэги .header  и .gornav соответственно:

Создание рамок для тэгов
Рис.19. Создание рамок для тэгов

Рамки можно потом убрать, но для ориентации среди  установленных тэгов лучше установить. В режиме работы «Дизайн» видны тэги  даже без рамок, а вот в режиме «Интеракт» их нет.
В тэг nav  вставим тэг ui с несколькими li, используя «+».  В каждый li вставим ссылки на картинку, используя режим «Код» (рис. 20):


Рис. 20. Вставленные в li ссылки на рисунки

      Выделим первый LI, в селекторах нажмем на «+» и в «селекторах» появится селектор (класс)  .gornav ui li. Мы для него определим свойства- текст по центру (text-align: center;), горизонтальное расположение(float: left;), уберем маркеры (list-style-type: none; ), цвет текста (color: blue;), зададим высоту и ширину в пикселях. Если ширину задать в % от экрана, то при сжатии страницы картинки будут «наезжать» друг на друга, а в рх сдвигаться вниз. Назначим ширину блока li 130 рх.
      После вставки прогноза погоды появится тэг а. Для него определим класс .agor и назначим ему фон такой же, как и для .header.  Это делается для того, чтобы тэг а вертикального меню ( которое мы будем делать далее) не портил фон a  горизонтального меню. Ниже привожу созданный на данный момент фрагмент файла стилей web.ss:
@charset "UTF-8";
body { margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;}

.continer {width: 100%;
background- : url(/piknad/ s/FON/bl4.gif);
height: 3000px;}

.header {width: 1115px;
height: 120px;
border: 0px none #780709;}

.agornav   {background- : url(/piknad/ s/FON/bl4.gif);}

.gornav   {   /* gorizontalnaja navigacija*/
height: 120px;
border: 0px none blue;
display: block;
overflow: hidden;    /*чтобы фото не наезжали друг на друга при сжатииi*/
width: 1100px;}

.gornav ul li { float: left;   /* горизонтальная навигация*/
text-align: center;/* текст в LI по центру */
color: blue;
font-style: italic;
font-weight: bolder;
font-size: 14px;
background- : url(/piknad/ s/FON/bl4.gif);
border: 1px solid blue;
display: block;
width: 130px;
list-style-type: none;/* без маркеров*/
height: 100px;}       
  
После проведенных действий получилось в интерактивном окне:

Полученный фрагмент страницы
Рис. 21. Полученный фрагмент страницы

  1   2   3   4   5   6   7   8   9