Каскадните стилови таблици (CSS) значително ще упростят подобни задачи. Използвайки една стилова таблица вие можете да измените облика на своя сайт изцяло от раз.
Съществува огромно количество редактори за създаване на уеб-страници. Те биват визуални и текстови. Визуалните редактори не изискват от вас знания по html, css и други уеб-технологии. Остава единствено да ги включите и да излеете в тях наличното съдържание, формиращо страницата. Именно по това ги наричат още WYSIWYG-редактори. Абревиатурата WYSIWYG се разшифрова като What You See Is What You Get - каквото виждаш, това получаваш. Първото усещане с подобен род програми е, че са идеални за целта, но за тях професионалистът еднозначно отговаря:
- Готовите уеб-страници, генерирани от WYSIWYG съдържат излишно, даже пренапълнено количество HTML-елементи.
- Подобен код намалява прилекателността за индексиращите системи и търсачки.
- Не всички интернет ползватели за преглед на уеб-страници ползват Internet Explorer, от което страда кросбраузерността, а това не е по силите на визуалния режим на редактора.
- Ако пожелаете след време, да увеличите функционалността на вашата страница за сметка на допълнителни скриптове ще ви се наложи да се обърнете към кода.
Своите първи html-страницы създадох в обичайния текстови редактор Notepad. Разбира се допусках много синтактически и пунктуационни грешки в кода. В последствие разбрах за WYSIWYG-редакторите и фаворитен ми стана WYSIWYG Web Builder. Това временно развърза ръцете ми и обхождаше моето незнание, но трупаше нови грешки. Нещата се забатачваха допълнително от това, че браузерите не съобщават за наличните грешки, а се опитват да ги заобиколят според заложените алгоритми. В резултат, уеб-страниците се извеждаха на екрана не според моя замисъл. По тази причина се опитах да разбера как работи WYSIWYG-редактора.
WYSIWYG-редакторът е настроен под един браузър, в повечето случай Internet Explorer. Генерацията на страницата пропуска Reset файл, което е съществено за кросбраузерността. Приема елементи HTML и Body на 100%. Задава един общ блок с позициониране relative, който се явява родителски за останалите елементи. Останалите елементи пък автоматично стават дъщерни с абсолютно позициониране. В ход се пуска z-index и се почва едно тъпчене на код. Форматирането е най-зле от цялата работа. То е преплетено от възможностите на HTML и на вложен стил. От това разбира се страда читаемостта на кода. При прочит нещата отблъскват, защото изглеждат километрични и претъпкани. Друг съществене недостатък е непоследователността на елементите. WYSIWYG-редактора следва вашите действия и в един момент настъпва каша. При проследяване на кода се виждат елементи от футера, заели ред преди тези от шапката, защото е напълно възможно да сте работили по оформянето на шапката, после да се стуснали към дъното и да сте върнали отново към шапката.
Как да направя сайт с CSS?
Този въпрос има три отговора. Първият се заключва в нужните знания по HTML и CSS.
За втория е нужен специализиран редактор. Изборът пада на Notepad++ или PSPad editor. Това са безплатни редактори за уеб-страници под Windows. Работа с тях има определени преимущества, като подсветка на кода, номериране, енкодиране. Интерфейсът на PSPad editor силно наподобява този на WYSIWYG-редактор. Към този арсенал добавям AkelPad и причината е, че този редактор безпроблемно конвертира страница от windows-1251 към UTF-8.
Дойде ред и на третия отговор, а той е главен виновник на темата. Топлата вода е открита не от мен, велосипеда тоже, значи ще копираме умните. А те ползват CSS-генератори, за да си спестят труда, при това on-line.
Скелета на сайта ще формираме на http://csstemplater.com/ стъпка по стъпка.
Генераторът е интуитивен руски ресурс на шаблони, по-точно макети, защото крайния продукт е полуфабрикат, на когото в последствие ще придадем завършен вид.
Приемам стандартен изглед. Шапка, странична дясна колона, съдържание, футер.
Първа стъпка е избор на DOCTYPE. Аз се спирам на XHTML 1.0 Transitional.
Следващ избор е тип на занулителя. Това е нещо като късо съединение, така го наричам аз, защото дава на късо заложените таблици в всеки един браузър. По този начин всеки един браузър посетил нашата страна и прочел тези правила започва да се съобразява с тях. Избирам тези от Yahoo. По тази въпрос можете да намерите в нета много становища и варианти.
Предпочитам фиксиран размер пред "гумен" и това е трета стъпка. На снимката не се вижда, но в този пунк задавам ширина на сайта 1000px (извинявам се за пропуска).
Според художествения замисъл, шапката е 515рх и това въвеждам като значение.
Избирам един сайдбар в дясно с ширина 285рх.
Последно избирам футер, когото искам да е притиснат в долната част на монитора с височина 285рх. Остава да натиснете синьото бутонче, което в превод е "получи адрес". На отведения адрес ще получите архив на бъдещия ви макет. Той съдържа HTML-структурата на сайта и съпътсващите го каскадни стилови таблици.
Всеки един може да премине на посочения адрес и да пробва по свой вкус, а до тогава нека надникнем отблизо как работи всичко това. Първо поглеждаме HTML-кода.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="title" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="wrapper">
<div id="header">
<strong>Header:</strong> Lorem ipsum dolor sit amet,
</div><!-- #header-->
<div id="middle">
<div id="container">
<div id="content">
<strong>Content:</strong> Lorem ipsum dolor sit amet,
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar" id="sideRight">
<strong>Right Sidebar:</strong> Lorem ipsum dolor sit amet,
</div><!-- .sidebar#sideRight -->
</div><!-- #middle-->
</div><!-- #wrapper -->
<div id="footer">
<strong>Footer:</strong> Lorem ipsum dolor sit amet,
</div><!-- #footer -->
</body>
</html>
Работата ни започва с доработки. Моят сайт е насочен към рускоезично общество, затова добавям в 2-ри ред език.
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
Шаблонът идва с зададена кодировка utf-8, а това означава, че текстове на кирилица ще трябва да конвертираме с AkelPad при изключен BOM. Надолу следва стандартна разкройка с контейнери.
Да надникнем в файла с CSS - style.css. Той е далеч по-интригуващ и загадъчен, защото той върши голямата работа.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
ol, ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
/* Header
----------------------------------------*/
#header {
height: 515px;
background: #FFE680;
}
/* Middle
----------------------------------------*/
#middle {
width: 100%;
padding: 0 0 285px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
}
#content {
padding: 0 280px 0 0;
}
/* Sidebar Right
----------------------------------------*/
#sideRight {
float: left;
margin-right: -3px;
width: 260px;
margin-left: -260px;
position: relative;
background: #FFACAA;
}
/* Footer
----------------------------------------*/
#footer {
width: 1000px;
margin: -285px auto 0;
height: 285px;
background: #BFF08E;
}Първата работа е да отрежем на ламята главата. Този CSS - файл тепърва ще расте по обем и ще става все по-голям, а това значи по труден за четене/ориентиране. За целта всичко от 01 до 56 ред копираме и изрязваме в нов css-файл под име reset.css. На практика след това действие разполагаме с два файла - style.css и reset.css. Към тях обаче ще се присъедини трети. Той ще се яви главен за сайта, нещо като регулировчик. Да го наречем global.css и изглежда така.
@import url("./reset.css");
@import url("./style.css");
В глобалния файл може да добавяте произволно количество адреси към подобни файлове, според вашите нужди. За по-голяма пригледност тези файлове се намират в обща папка под име style. При мен те са 5 на брой и в другите два съм отделил стила на галерията, и стила на контактна форма. В наличния .htaccess-файл забранявам достъпа до стиловете и прегледа на индекса, като пренасочвам любопитните на главната страница.
<link rel="stylesheet" href="./style/global.css" type="text/css" media="screen, projection" />
Какво става на практика?
За да разберете принципа на тази технология сложете пред очите си html и css файлове.Веднага след тагове </head> <body> виждаме контейнер wrapper, който се затваря преди контейнер footer. Свойствата на wrapper са зададени в css. Зададена е ширина от 1000рх, това което исках от on-line генератора, а margin: 0 auto; ще фиксира сайта по средата спрямо ос Х и ще "залепи" двата края по рамката на браузъра по ос Y.
height: auto !important; height: 100%; ще се грижат винаги да са изпълнява условието по ос Y. На свой ред контейнер wrapper съдържа контейнер header и контейнер middle.
Относно header няма нищо интересно. Просто наследява ширината на wrapper и според първоначалното условие е висок 515px. Естествено генерирания фонов цвят е само за първоначална ориентация.
Какво става в middle? Контейнер middle съдържа контейнер container, а той на свой ред контейнер content. Тук именно в content ще изливаме нашето главно съдържание с последвали подконтейнери. Но внимание, в middle се намира и контейнер с клас sidebar и идентификатор sideRight. В този контейнер ще добавяме разните джаджи, гаджети и всичко, което е замислено да бъде в тази колона. Внимателен оглед показва, че контейнер sideRight е плаващ (float) с отстъп в ляво -260px. Този минус кара sideRight да налети върху content и това се случва. Нещата са нормални до тук, защото на content се отрежда поле в ляво (padding: 0 280px 0 0;) от цели 280px. На практика sideRight с своите 260рх се разполага върху това поле от 280pх. Разликата от 20px ще формира граница между двата блока на сайта.
Преминаваме нататък и тук следва не по-малка изненада с контейнер footer.
Според условието за wrapper (гледаме css) min-height: 100% кара нашия сайт да се разпъне и залепи по рамката на браузъра, респективно контейнер wrapper. Да но под wrapper започва footer(гледаме html). Би следвало да очакваме поява на плъзгач за вертикално скролиране или footer да премине зад пределите на видимото. Как може да се избегне това и да очакваме очакваното? Поглеждаме отново файл css и намираме отговор. В свойствата на footer виждаме зададена ширина width: 1000px, която да пасне на общата такава, а още зададеното по условие височина. Интересен е margin: -285px auto 0. Този минус от -285px кара footer да налети нагоре по wrapper и това се случва, auto ще го държи по средата спрямо ос X, a 0-та ще го залепи за дъното на прозореца. ОК, отлично. Нататък отново преглеждаме кода в стиловете и виждаме, че контейнер middle образува поле в долната си част от 285px. Позната история с сайдбара. Именно на това заделено поле ще се намести footer.
Нагледна схема на шаблона.
до нови срещи ^.^
Публикувано от Profruit за Profruit на 04 декември 2010 23:33
Поздрав с арабски мотиви и някой подобни неща, които може да ти харесат - http://dox.bg/files/dw?a=a87af0b8c1
Благодаря ти за помощта, още веднъж.
лека
Знаят таратанци. Не се въздържах ^^`