Что такое страницы сайта? Книжные, журнальные... Это понятно, а что скрывается под страницами сайта? Старинная поговорка, — что написано пером — не вырубишь топором?! Да, в бумажном варианте как бы где-то, что-то, как-то?! А в электронном? Здесь не всё так просто... Да, для среднестатистического пользователя, всё та же бамашка с текстом-картинками, а на самом деле? Правильно, есть лицевая сторона и есть изнаночная, оборотная. Это во-первых. Во-вторых, одну и ту же книгу тысячи людей видят одинаково. Всё потому, что путь от листа до глаза у всех плюс-минус одинаковый (очки не в счёт?). А, вот со страницами сайтов, всё гораздо сложнее, я уже не говорю о настройке мониторов: яркость, контрастность, цвета... Но есть ещё и другое... В первую очередь разрешение мониторов которое влияет и на читабельность вообще и вид общий страниц в связи с изменением формата. И наверное самая немаловажная деталь Ваш браузер! Конечно в последнее время пытаются изо всех сил привести к одному знаменателю, но? Но не всегда это получается... Чем проще страница, тем больше вероятности, что Вы увидите оригинал?! Того, что задумал WEB-дизайнер?! А в нашем случае, это ВЫ!
Первое о чём я хочу Вас предупредить, это о применении экзотических шрифтов которыми Вы обзавелись. Скорее всего его красоты никто не увидит, даже если Вы укажете браузеру на это! Ведь он должен его (шрифт) найти в своих закромах и компьютера тоже. Да, по умолчанию операционная система приходит со своим самоваром... Вот только системы у всех могут быть разные, это во-первых, и закрома разные, это во-вторых! А посему готовьтесь увидеть Вашу страницу со шрифтом по умолчанию! И скорее всего это будет Times New Roman?
Теперь о желательном, но не обязательном! В смысле — хозяин-барин! Традиционно страница состоит из: «шапки» или header, верхней части страницы, заголовок и прочее. Блока навигации или menu по-ресторанному. Содержание или content. И нижней части страницы подвала или footer.
Ну шапка она и в Африке шапка, а вот с меню тут как бы не очень?.. Обычно она сразу же под «шапкой», но бывает и сбоку слева и реже справа. Ну, содержание как получится, а подвал само-собой внизу страницы. Хотя для простых сайтов это никому не нужно?! А вот к сайтам от «сыра в мышеловке» Вам обязательно пришлёпают всякую рекламную дрянь. Жители ПРОЗы могут всё это (подвал-footer) увидеть, подняв страницу вверх!
Внешний облик страниц и их красоты чисто художественно-дизайнерские решения. А мы же с Вами рассматриваем только «техническое» решение. Одно из этих решений, а ещё точнее выбор уже готового, это тип страниц (страницы)? Их два, а точнее три. Третий промежуточный как бы случайный... Два типа: фиксированная страница и «резиновая». Правда с изделием №2 их связывает только некая эластичность и не более...
Начнём разборки с фиксированных страниц. Шастая по просторам инета Вы встречались с такими, без сомнения, особенно с нехорошими картинками! Если в книжном варианте страницы имеют конкретный размер длину (высоту) и ширину, то в нашем случае вопрос мягко говоря далеко не однозначный?!! Во-первых (за редким исключением), длина (высота) страницы не регламентируются и может быть бесконечно длинной. Во-вторых, с таким же успехом это касается и ширины, но?! Но есть средства ограничивающие эту бесконечность! И первое это то, что касается страниц ФИКСИРОВАННОЙ ШИРИНЫ!
Осталось решить главный вопрос, как повлиять на страницу и посредством чего?! Начнём традиционно со средств HTML, а уж потом перейдём и к CSS. Наш объект испытаний текст, набор слов с пробелами между ними. Текст заключен в контейнер <P>, он в свою очередь в<BODY> и далее в <HTML>. И, что? А ничего... Не один из этих контейнеров не имеет аргументов как-то влияющих на размер! Что же может повлиять на распространяющийся до бесконечности текст? Ограничить движение может только окно программы (браузера). По-видимому в башке у него прописано некое правило, как только пробел достигает правого края окна, текст поворачивает оглобли! В смысле продолжение начинается с новой строки. И чем окно уже, тем раньше начнётся поворот. Говорят, что происходит ПЕРЕПЛЫВАНИЕ текста. А такая странная страница называется «РЕЗИНОВОЙ». От растягивания и сжатия которой текст не меняется, а лишь переплывает со строки на строку. Такие страницы используют там где содержание гораздо важнее, чем форма подачи?! Но есть и такие сайты (страницы) где обратное важнее! Вот их-то и делают фиксированной ширины. Но нам-то как быть? Совершенно верно, — заключить в такой контейнер у которого есть атрибут WIDTH. Таким контейнером является наша старушка таблица со своими строками и ячейками! Достаточно создать такую вот конструкцию <TABLE width="600">и всё, — фиксация достигнута. Страница стала с шириной в 600 точек и не более и не менее...
А, что мы видим в результате? Страница сжалась, текст переплыл как мог и замер. А сама страница стала мало того, что сжалась но просто прилипла к левому краю окна (по умолчанию). Хорошо, это или плохо? Посмотрите в правый верхний угол страницы. Там традиционно располагаются три пимпочки, слева-направо: сворачивающая, разворачивающая/восстанавливающая и закрывающая. Если в средней кнопке два квадратика как на рис2а слева, значит окно программы растянуто до предела. Если же один квадрат рис2а справа, то окно сжато и мы можем манипулировать его шириной. Подогнав указатель мышки к краю окна (лучше к правому) так, чтобы появилась двойная стрелочка как на рис2b нажимаем левую кнопку мыши (для левшей может быть правой) и мы можем двигать край окна по стрелочке. Сжимать или наоборот растягивать окно. Постепенно двигаем край влево. Пустое место окна начинает сжиматься, а край окна приближается к правому краю страницы... И когда край окна и страницы сходятся, наступает момент истины. Дальнейшее сжатие приводит к появлению полосы прокрутки. Это означает, что наша страница не вмещается по ширине в окно программы! И, что? Текст не перетекает, а остаётся неизменным (положение в пространстве). Но окно программы начинает закрывать часть текста, всё более и более. И чтобы прочитать невидимое приходится с помощью прокрутки выдвигать закрытую часть текста! Думаю многим-многим такая процедура знакома. Если это так, то Вы имели дело со страницей фиксированной ширины! На рис1 фрагмент именно такой со всеми делами! Её ширина 600 точек, а окно как Вы и видите 485 точек (px).
Можно ли из фиксированной страницы сделать «резиновую»? Без проблем (почти). Нужно вместо 600 в тег рис1е вписать 100% рис2с. Это означает, что ширина страницы будет равна ширине окна и не будет зависеть от разрешения монитора. Можно задать и другие проценты (50, 60, 80%). И страница будет занимать именно такой процент ширины окна. При сжатии такой страницы вместе с текстом будет переплывать и заголовки состоящие из нескольких слов. Точнее в момент пробела, что Вы и видите на рис2. Как будет происходить (визуально) перетекание Вам показывает двойная стрелочка на слово ОПРЕДЕЛЯЕТСЯ. С фиксированной и «резиновой» страницей.
Теперь напутствие тем авторам сайтов (страниц) самых честных правил. Это я о тех кто верит о «пером и топором»?! Если Вы внимательны, то в WEB-страницах не принято применять знаки переноса к которым привыкли любители чтива (книжного). Если уж Вам так хочется делайте это только на страницах фиксированной ширины, а не наоборот?! Встречал я тексты перенесённые (готовые) из каких-то редакторов сторонних с этими самыми знаками переноса. И на страницах «резиновых», тем более ПРОЗА-ровских эти знаки могут оказаться не к селу, ни к городу?!! В результате перетекания обе части слова вместе со знаком оказаться посередине строки. Автор либо не понимает, что делает либо упёртый на все сто?!! ЗАПОМНИТЕ в нашем случае СЛОВА ПЕРЕНОСЯТСЯ ЦЕЛИКОМ!!! И если уж Вам уж, замуж, невтерпёж, и Вы хотите книжный готовый текст один в один перенести на WEB-страницу, пользуйтесь фиксированной шириной. И мало того Вам придётся подогнать её (ширину) пропорционально книжной (регулируя ширину?!!).
Ладно с изделием №3 мы разобрались. А, как быть с фиксированной? В смысле куды ставить эту ширину? Вот на рис1a,b,c,d показаны варианты. a) ширина страницы равна ширине окна монитора с самым малым разрешением (шириной). У меня ещё существует 800 точек, хотя я практически не пользуюсь. Следующая 1024 точки моя основная. У каждого пользователя свои тараканы и соответственно своя ширина окна монитора... Сами понимаете, что Вы окажетесь в затруднительном положении?!! И еже ли, что то у вас появятся остальные варианты... b) по умолчанию. Так увидит Вашу упёртую страницу пользователь с шириной окна монитора больше Вашей страничной. А остальные варианты по Вашему желанию. Либо всё разместить посередине окна и страница окажется там при любом разрешении, либо? Либо сдвинуть страницу к правому краю рис1d. Но не знаю? Лично я не видел такого в чистом виде? Вообще-то пустышки заполняют чем-то?.. В последнем случае пустышка окажется приоритетнее основного, почему? Потому, как уменьшении окна основное окажется за бортом (будет закрыто). В большинстве случаев применяют вариант [b] или [с] которые при малом разрешении превратятся в [a], Вам выбирать?!
В HTML это всё делается с помощью атрибута ALIGN и его значений: left; center; rifht. Что по-русски: влево; по центру и вправо и относится уже к ячейке, а не к таблице!
А, что же с CSS, как там всё делается? Там 600 точек и 100% применяют в правилах для блоков (в HTML же нельзя!) и традиционно для DIV. Вот на рис1 в голубом прямоугольнике, а на рис2 зелёном, всё это и показано. А, что же делать с фиксированной страницей и применить положение страниц как на ри1a,b,c,d? У CSS больше возможностей на этот счёт. Для ДИВОВ есть свойство position c значением relative. С помощью значений свойств: top и left можно страницу загнать куда Вам надо. Но есть ещё вариант, может и не совсем по правилам? Но почему бы не использовать? Этот способ двигает страницу по горизонтали. У каждого блока (в нём же страница размещена) есть такое понятие как margin, по-русски ПОЛЯ. Это некая защитная зона, отделяющая блок от других элементов страницы. При значении auto свойства margin блок (страница) с двух сторон оказывается зажатым «подушками безопасности». После чего блоку ничего не остаётся как оказаться прямо ровно по центру. При том же значении, но уже свойства margin-left «подушка» оказывается только слева и прижимает блок к правому краю окна. А если тоже самое для margin-right «подушка» справа и блок прижмётся к левому краю! Вот всё это можете поэкспериментировать при помощи листинга который ниже.
Если Вы не читали предыдущие лекции, то? То мне придётся повториться. Листинг выделите и скопируйте. Затем сразу же вставьте его в БЛОКНОТ. Затем сохраните всё это d в виде HTML-документа (страницы) по типу, ИМЯ.htm После чего щёлкните по файлику и в Вашем основном браузере (если их несколько) Вы увидите страничку. На этот момент она будет фиксированной ширины и равной 600 px. И расположена будет посередине окна. Не закрывая страницы откорйте файл в БЛОКНОТЕ и найдите (там комментарий есть) #carrier идентификатор. Ниже свойства: margin, mmargin-left и mmargin-right
Почему у второго и третьего свойства в начале стоят mm, а в первом только m? Если у всех оставить по одной m, то получится как у Крылова, лебедь, рак и щука! И как отреагирует браузер, он и сам ещё не знает? Так, что нам нужно оставить только одно свойство. А остальные? Остальные можно просто отключить. Добавив вторую m мы собьём браузер с правильного пути! У него в башке нет такого понятия margin с двумя m (буква, цифра может быть любой) и он всё это прореагирует.
А, что нам делать чтобы подключить второе свойство вместо первого... Ну, догадались? Правильно, к первому вторую m, а у второго наоборот удалить. И всё получится как в комментарии. Аналогично и с третьим свойством. Не забывайте обновлять страницу в браузере! Надеюсь у Вас всё получится...
После окончания экспериментов, в том же блокноте замените 600px на 100%. Сохраните. Открытую в браузере страницу обновите, она будет «резиновой» и естественно растянутая на всё окно. Ниже и до конца страницы тот самый, обещанный листинг...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Правильный сайт</title>
<style type="text/css">
<!--
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
body {
color: #000;
background: #999;
font-family: Georgia,
"Times New Roman", Times, serif;
text-align: center;
}
/* ИДЕНТИФИКАТОР ДЛЯ ЭКСПЕРИМЕНТОВ ИЗМЕНЕНИЯ КАК СТАТУСА, ТАК И ПОЛОЖЕНИЯ СТРАНИЦ В ОКНЕ БРАУЗЕРА */ #carrier {
background: #fff;
width: 600px; /* ЗАМЕНИВ 600px НА 100% МЫ ПОЛУЧИМ «Резиновую» страницу! */
margin: auto; /* НАХОЖДЕНИЕ СТРАНИЦЫ ПО ЦЕНТРУ */
mmargin-left: auto; /* НАХОЖДЕНИЕ СТРАНИЦЫ ПО ПРАВОМУ КРАЮ */
mmargin-right: auto; /* НАХОЖДЕНИЕ СТРАНИЦЫ ПО ЛЕВОМУ КРАЮ */
text-align: left;
}
#header, .menu, #text h2, #footer {
font-family: Tahoma, Verdana,
Arial, Helvetica, sans-serif;
}
#header, #footer {
color: #fff;
background: #369;
padding: 10px 20px;
}
#header {
font-size: 250%;
margin: 0px;
}
.menu {
font-size: 120%;
background: #fc9;
border-style: solid none;
border-width: 2px 0px;
border-color: #c00;
margin: 2px 0px;
padding: 5px 20px;
text-align: center;
Wwhite-space: nowrap;
}
#text {
margin: 20px;
padding: 20px;
border: solid 1px #ccc;
}
#text h2 {
color: #369;
}
#text p {
text-align: justify;
text-indent: 1.5em;
margin: 0px;
}
#footer {
font-size: 70%;
}
-->
</style>
</head>
<body>
<div id="carrier">
<h1 id="header">Правильный сайт</h1>
<div class="menu">
Здесь • Будет • Меню • Навигации </div>
<div id="text">
<h2>Организация пространства страницы</h2>
<p>Успех будущего веб-проекта во многом определяется качеством исполнения фундамента — шаблонов главной и внутренних страниц сайта. Мы приняли за аксиому тот факт, что все сайты информационного характера (в отличие от презентационных проектов) в значительной мере похожи друг на друга. И общность эта сильнее всего выражена в составе и взаимном расположении элементов страниц</p>
<p>В организации пространства страницы любого информационного сайта можно выделить как минимум четыре функциональные области со строго определенными ролями. Это «шапка» (в английской терминологии — header), блок навигации, область основного текста и «подвал» (footer).</p>
</div>
<div id="footer">
Правильная веб-студия. </div>
</div>
</body>
</html>