![]() |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Как создать сайт?
Как создать свой сайт легко и просто, имеются библиотеки 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: 70%; position: relative; left: 15%; background: #F5F5F8; background-image: url(../fon/b14.jpg); border-bottom-style: double; 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: 0 0; } td#tdleft { width: 15%; font-family: "Arial Black", Gadget, sans-serif; font-size: 14px; margin: 25px; padding: 5px; text-align: center; } td#tdcenter { width: 70%; background: #FCDC99; } td#tdright { width: 15%; } div#copy { width: 70%; position: relative; left: 15%; 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; } Как быстро и просто можно переделывать структуру страницы сайта, если использовать каскадные таблицы стилей. Сравните, не так много изменений произошло. В теле body ничего не затронули, какой фон страницы бесплатного сайта был - такой и остался. Ширину центральной колонки страницы бесплатного сайта не изменили ( хотя одним росчерком можно изменить из 70% в любой другой формат, допустим 85%). И так изменения у нас произошли в верхнем блоке страницы. Смотрите в блок div#nav. Тут строка width: 70%; задает ширину блока такой же как у центральной колонки страницы. Строка position: relative; подготавливает базу отсчета для сдвига блока, так он у нас сузился и переместился влево. Строка left: 15%; сдвигает верхний блок на 15% ширины левой колонки и совмещает верхний блок с центральной колонкой страницы сайта. Строка background: #FCF; появляется для того, чтобы в случае по каким-либо причинам нет возможности вызвать картинку для замощения блока, то блок будет окрашен в этот цвет. Строка background-image: url(../fon/09.jpg); вызывает кусочек рисунка и оформляет блок. Все остальное в верхнем блоке остается также. В левой колонке страницы сайта убрали фон и раскраску. Так как рамку уже убрали строкой border-spacing: 0 0; в table, то у нас исчезает левая колонка страницы сайта td#tdleft; остается всего лишь надпись " Левая колонка". В центральной колонке страницы бесплатного сайта ничего не меняем, она какая была - такой и осталась. В правой колонке страницы сайта убираем фон и раскраску, тут также нет рамки и поэтому правая колонка исчезает; остается всего лишь надпись " Правая колонка". Для справедливости надо сказать левую и правую колонки страницы сайта просто сделали прозрачной, безцветной. Для того чтобы полностью снивелировать эти блоки, необходимо во-первых убрать все надписи, рисунки и любой символ из этих блоков; во-вторых ширину width: 0; сделать нулевой или эти строчки совсем убрать из блока, или полностью убрать td#tdleft и td#tdright. В подвале у нас появляются строки width: 70%; position: relative; left: 15%;, для чего они нужны Вы уже знаете. Вот и все.
обратно на главную назад дальше вперед ПОНРАВИЛОСЬ?
|
доброй ночи!
фотограф
Оля Леман свадьбы и торжества. нажмите сюда ![]()
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Сайт работает с 04.12.2013г. по 25-01-2021г. уже 8 лет © Права на сайт у Олега Васильева.
Копирование сайта при указании ссылки на источник. |