![]() |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Как создать сайт?
Как создать свой сайт легко и просто, имеются библиотеки html, css, php, javascript, jquery, web-график. автор: Васильев Олег Никандрович. КАК СОЗДАТЬ САЙТ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
С двумя колонками структура страницы.На предыдущей странице изменили структуру сайта и оставили одну лишь центральную колонку на странице. Для закрепления навыка изменения структуры страницы, чтобы убрать последние сомнения, скажем "непонятки", быть уверенными и понять процедуру превращения и изменения структуры страницы сайта проделаем следующее: уберем левую колонку и оставим центральную и правую колонки на всю ширину окна. Совсем другой вид, другая структура страницы. Но при этом делается все быстро и легко. Немного усложним задачу. Не всю ширину окна будут занимать колонки и верхний и нижний блоки. Оставим с обеих сторон страницы сайта полосы фона тела страницы. При этом как оформляется файл каскадных таблиц стилей приводится чуть ниже и там же все объясняется. @charset "utf-8"; /* CSS Document */ body { background: #FFFFFF; background-image: url(../fon/bkgnd.jpg); margin: 0; } div#nav { width: 85%; position: relative; left: 7.5%; background: #F5F5F8; background-image: url(../fon/b14.jpg); padding-top: 50px; padding-bottom: 50px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 28px; color: #636; text-align: center; } table { width: 100%; height: 72%; border-spacing: 0px 0px; margin: 0 0 0 -2px; } td#tdleft { } td#tdcenter { width: 75%; position: relative; left: 7.5%; background: #FCDC99; } td#tdright { width: 25%; position: relative; right: 7.5%; background: #CCC; background-image: url(../fon/628.jpg); } div#copy { width: 85%; position: relative; left: 7.5%; background: #FCF; background-image: url(../fon/09.jpg); padding-top: 20px; padding-bottom: 20px; font-family: Verdana, Geneva, sans-serif; font-size: 18px; color: #FFF; text-align: center; margin: -1px; } Суммарную ширину колонок сделаем равной 85% от окна и тела страницы сайта. Ширина блока div#copy( верхняя часть) задается width: 85%; Тогда с двух сторон остаются полосы по 7.5% шириной. По умолчанию обычно все начинается слева, поэтому мы должны сдвинуть блок на 7.5% от левой стороны и это задается строкой position: relative; left: 7.5%; . Убираем двойную рамку border-style: double; в блоке, чтобы Вас она не смущала при расчетах( double - двойная рамка увеличивает на несколько пикселей размер блока). Все остальное на странице сайта оставляем не тронутым. Ширина table должна быть width: 100%; , как обычно, межблочное расстояние( вертикальное и горизонтальное) убираем border-spacing: 0px 0px; . Остальное также. Ширина центральной колонки страницы td#tdcenter пусть будет 75% width: 75%; , сдвигаем на величину полоски 7.5% position: relative; left: 7.5%; . Остальное оставляем. Тогда ширина правой колонки td#tdright останется 25% width: 25%; . Правую колонку сдвигать на ширину полосы придется с правой стороны, то есть position: relative; right: 7.5%; . Остальное не трогаем. "Подвал", то есть блок div#copy должен как и верхний блок быть шириной 85% width: 85%; , сдвигается слева position: relative; left: 7.5%; . Все. Теперь Вы убедились, что зная функциональные возможности каскадных таблиц стилей можно легко и просто видоизменять страницу сайта. Нет занудных и кропотливо-долгих историй созидания. Есть интересный и вдохновляющий труд при создании сайта. Просто и быстро, легко и интересно создавать сайт собственными руками и головой. Пробуйте и творите согласно Вашему вкусу и желанию. Выбирайте яркие и приятные краски. Строгие и в то же время ласкающие глаза тона и цвета страниц сайта. Здесь нужна мера и умеренность. Хотя на вкус и цвет - ... . О каскадных таблиц стилях читайте здесь. Удачи в добрых начинаниях. Думаю, нам пора переходить к разметкам и стилевому содержанию текстовых документов: строкам, абзацам, текстам и к многим еще приятным и интересным занятиям.
обратно на главную назад дальше вперед ПОНРАВИЛОСЬ?
|
с ранним добрым утром!
фотограф
Оля Леман свадьбы и торжества. нажмите сюда ![]()
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Сайт работает с 04.12.2013г. по 24-01-2021г. уже 8 лет © Права на сайт у Олега Васильева.
Копирование сайта при указании ссылки на источник. |