Резиновый или фиксированный сайт MEIN ARBEIT
   

Резиновый или фиксированный сайт

Дата: 25/10/2014

Здравствуйте, дорогие читатели MEIN ARBEIT. Сегодня я хочу с вами поговорить о том, какой лучше делать сайт - резиновый или фиксированный. Этот вопрос интересует всех начинающих вебмастеров. Я сам задался этим вопросом, когда занялся разработкой этого сайта. Для начала, давайте разберём, что нам даёт резиновый сайт.

Резиновый сайт

Резиновый - мы его называем не из-за физическо-химических свойств, а из-за возможности растягивания сайта на весь экран. Резиновый сайт очень хорош, когда вашу страничку будут загружать через разные гаджеты, имеющие разные размеры экрана. Не скажу, что отображаться всё будет хорошо, но, зато, ваш сайт будет всегда отображаться в рамках экрана, с которого будет взирать пользователь. Вообще, резиновые сайты выбирают многие вебмастера, потому что на любом экране сайт отображается целиком в заданных условиях, то есть, в процентных соотношениях, заданных вами. Это удобно для сайтов с информационными, музыкальными и фотогалерейными ресурсами. Обычно, такие сайты создаются при помощи блоков DIV или таблиц TABLE, где в их параметрах устанавливаются процентные соотношения на экран.

Фиксированный сайт

Фиксированные сайты создаются в рамках стандартного окна и, обычно, в области 1000 пикселов на 700 или 800 пикселов. Фиксированные сайты хороши лишь, когда вам надо сверстать сайт под линейку. Такие сайты выглядят, куда более профессионально, чем резиновые. Минусом этого является затруднения просмотра такого сайта, если экран размера 640х480. Такие размеры экранов присутствуют на гаджетах, и пользователю, чтобы просмотреть ваш сайт, придётся передвигаться по нему слева-направо и сверху-вниз. Сами понимаете, что не каждый будет таким образом исследовать сайт, и может, просто не читая, уйти с него, найдя для более удобной читабельности резиновый сайт. Но не стоит отказываться от фиксированных сайтов. Обычно, фиксированные сайты применяются при сайтах визитках, сайтах с играми, где нужны определённые размеры экранов для игры и, иногда, на сайтах каталогах. Фиксацию можно делать также в div блоках и в таблицах table, просто, вместо свойств параметров в процентах % - используются пиксели px. Давайте я приведу два примера, которые вы сможете скопировать себе и, изменив параметры, проверить наглядно, что и как:

Пример резиновой странички:

<document HTML>
<html>
<head>
<title> Главная страница резинового сайта </title>
</head>
<body>
<div style="position: absolute; left:100%; top:0%; right:0%; bottom:100%;" align="center"> Привет. Это моя первая страничка! </div>
</body>
</html>

Если вы создадите web-страничку с этими параметрами и запустите её на своём компьютере, меняя размеры экрана, то сможете убедиться, что фраза: "Привет. Это моя первая страничка!" будет постоянно находиться в центре и не уходить за углы экрана.


Пример фиксированной странички:

<document HTML>
<html>
<head>
<title> Главная страница фиксированного сайта </title>
</head>
<body>
<div style="position: absolute; left:1600px; top:0px; right:0px; bottom:800px;" align="center"> Привет. Это моя первая страничка! </div>
</body>
</html>

Если вы сохраните web-страничку с этими параметрами и начнёте менять размеры экрана, то сразу сможете увидеть, как меняет свои позиции фраза: "Привет. Это моя первая страничка!"

Дополнительный пример резинового сайта из трёх блоков DIV

<document HTML>
<html>
<head>
<title> Главная страница резинового сайта из трёх блоков DIV </title>
</head>
<body>
<div style="position: absolute; left:100%; top:0%; right:0%; bottom:33%;" align="left"> Привет. Это моя первая страничка! </div>
<div style="position: absolute; left:100%; top:33%; right:0%; bottom:67%;" align="center"> Привет. Это моя первая страничка! </div>
<div style="position: absolute; left:100%; top:67%; right:0%; bottom:100%;" align="right"> Привет. Это моя первая страничка! </div>
</body>
</html>

Это более наглядный пример работы с блоками div для резинового сайта. Меняя параметры соотношений, вы сможете сделать блочный сайт, где сможете разместить любой контент, как вам задумается! Более подробно о блоках DIV вы можете прочитать в статье Блоки DIV в HTML. Подставив вместо тега div тег table, вы увидите, что таблицы также растягиваются по экрану, как и блоки. Некоторые из вас, увидев работу с блоками, могут отказаться от таблиц, но не спешите отказываться от них. Таблицы часто используются для разметки странички, чтобы разместить содержимое. Страничка, расчерченная таблицей, всегда выглядит аккуратно, но не забывайте, что таблицы ещё используются по назначению, и тогда можно будет запутаться, если вы делаете сайт вручную! Ознакомившись со статьёй HTML таблицы, вы поймёте, почему.

Прошу вас заметить, что атрибут style принадлежит свойствам CSS, о котором я вам поведую позже. Главное, вы для себя решите, какой сайт - резиновый или фиксированный - вы будете создавать!!. Я свой выбор уже сделал!

С уважением, Администратор!


предыдущая следующая
Список статей по теме...




   
Бесплатный Хостинг Яндекс.Метрика