Работа в DREAMWEAVER 15 (HTML5). Адаптивность страниц
У конструктора 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/images/FON/bl4.gif);
height: 3000px;}
.header {width: 1115px;
height: 120px;
border: 0px none #780709;}
.agornav {background- : url(/piknad/images/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/images/FON/bl4.gif);
border: 1px solid blue;
display: block;
width: 130px;
list-style-type: none;/* без маркеров*/
height: 100px;}
После проведенных действий получилось в интерактивном окне:
Рис. 21. Полученный фрагмент страницы