Как да си направите уебсайт - 1

Стъпка 1. Избор на подредба
Как искате да изглежда сайта Ви? – има няколко основни вида изгледи, които се разграничават много лесно. Ако си представите че информацията в една уеб страница е разделена и поместена в колони може визуално да разграничите следните видове изглед от: 1 колона, 2 колони равни 50 на 50%, 2 колони: по-малка и по-голяма, 2колони + горна и долна част, 3 колони, 4 колони и т.н.
Примери: Блоговете често използват 2 или 3 колони, информационните сайтове: 3 и 4 колони, страница с продукт – 1 широка колона, форум – 1 колона и т.н.
Освен по разпределение на информация подредбите/изгледите/разположенията или т.нар. layouts се различават и по начин на конструиране. В случая имаме liquid, fluid, jelly, fixed и други подредби.
При liquid съдържанието заема целият екран, независимо колко е голям монитора, на който се гледа сайта. Този изглед е добър за големи сайтове с много съдържание.
+ разширява се и се стеснява като запълва свободното място
+ повече информация може да се разположи
+ вижда се и на малки екрани
- по трудно се програмират
За fixed варианта се определя предварително ширината на сайта и тя не се променя, това кара сайта да изглежда еднакво голям на всякакви монитори, но негов недостатък е, че не може да се разпъва и като цяло сайта изглежда прекалено малък на по-големи екрани.
+ сайта изглежда идентично на всякакъв вид монитор
- на малки екрани се появява хоризонтално скролиране
- загуба на място при по големи екрани

След като си изберете визуална подредба следва реалното и създаване. Как става това?
Съществуват два начина, осигуряващи плавно и подредено разположение на елементите (картинки и текст) върху една уеб страница. Технически това става като се програмира на езика HTML чрез: таблици или с блокови разделящи елементи + каскадни стилове (CSS).
Не се притеснявайте ако по-горната информация не Ви говори нищо. Просто в първия случай съдържанието на сайта Ви се помества в предварително създадена таблица, състояща се от отделни редове, колони и клетки, чиято рамка бива премахната, за да не се вижда мрежата обграждаща отделните клетки.
Представям Ви 2 работещи кода които може да изпробвате в браузъра си, като ги поставите и запазите в .html файл.

Код1: Шаблон на уеб сайт с 2 колони заглавна и долна част

&l;/tr>

заглавие
колона 1	колона 2
долна част

Обяснение на кода:
Създаваме таблица с от 3 реда и 2 колони, като заглавната и долната част са съставени от по една обединяваща клетка благодарение на свойството colspan=“2“.

---

Вашият коментар за тази статия:

Безплатен абонамент за нови статии на тема: Уеб дизайн
Въведете e-мейл адреса си:

Създай своя тема от тук

Прочети по-късно

Още статии за Уеб дизайн