<script>
var SWidth = screen.width;
var Imgs = new Array('url800.jpg', 'url1024.jpg', 'url1280.jpg');
</script>
...
<img id=titleimg>
<script>
var ti = document.getElementById('titleimg');
if(SWidth == 800) ti.src = Imgs[0];
if(SWidth == 1024) ti.src = Imgs[1];
if(SWidth == 1280) ti.src = Imgs[2];
</script>
Вопрос по разрешению.
Здравствуйте.
Я только начинаю делать сайт и у меня возник вопрос насчет выбора главной рамки, т.е. полей самого сайта. Я хотел бы сделать оптимальным для разрешений 1024 и 1280, ну и 800 наверное.
С чего начинать создание сайта? Какие поля выбирать?
Сейчас изучаю css - в нем можно реализовать какие-либо приемы подобного плана?
Спасибо огромное за ответ!
Я только начинаю делать сайт и у меня возник вопрос насчет выбора главной рамки, т.е. полей самого сайта. Я хотел бы сделать оптимальным для разрешений 1024 и 1280, ну и 800 наверное.
С чего начинать создание сайта? Какие поля выбирать?
Сейчас изучаю css - в нем можно реализовать какие-либо приемы подобного плана?
Спасибо огромное за ответ!
Вообще-то есть измерения относительные. В процентах, например.
А можно об этом подробнее? В кратце, чтобы я наачал искать и изучать сам?
Т.е. задается не в пикселях, а в процентах от экрана? Но например картинки то у меня стандартного размера. Я не буду делать 3 лого: для 3х разрешений!
На 800 будет слишком большая картинка, а на 1280 будет самое то!
Как буть?
Т.е. задается не в пикселях, а в процентах от экрана? Но например картинки то у меня стандартного размера. Я не буду делать 3 лого: для 3х разрешений!
На 800 будет слишком большая картинка, а на 1280 будет самое то!
Как буть?
Цитата:
Originally posted by mituhin
А можно об этом подробнее? В кратце, чтобы я наачал искать и изучать сам?
Т.е. задается не в пикселях, а в процентах от экрана? Но например картинки то у меня стандартного размера. Я не буду делать 3 лого: для 3х разрешений!
На 800 будет слишком большая картинка, а на 1280 будет самое то!
Как буть?
А можно об этом подробнее? В кратце, чтобы я наачал искать и изучать сам?
Т.е. задается не в пикселях, а в процентах от экрана? Но например картинки то у меня стандартного размера. Я не буду делать 3 лого: для 3х разрешений!
На 800 будет слишком большая картинка, а на 1280 будет самое то!
Как буть?
Тут немного другое... Нужно орудовать на стороне браузера. Самое простое - брать изначально экранные параметры и в соответствии с этим загружать нужную картинку.
Т.е., примерно так:
Код:
Вобщем, в этом направлении. Можно, конечно и поизящнее написать...
В процентах обычно задается размер логических блоков (шапки, меню, основного контента), при этом сайт должен выглядеть более-меннее одинаково при любом размере окна браузера.
Можно облегчить жизнь себе и посетителям сайта, определив минимальную (до появления горизонтальной линейки прокрутки) и максимальную ширину окна браузера - и дизайн не поплывет, и текст останется легко читаемым, и картинки поместятся.
Для современных браузеров есть свойства CSS min-width и min-height, для IE - experssion:
Можно облегчить жизнь себе и посетителям сайта, определив минимальную (до появления горизонтальной линейки прокрутки) и максимальную ширину окна браузера - и дизайн не поплывет, и текст останется легко читаемым, и картинки поместятся.
Для современных браузеров есть свойства CSS min-width и min-height, для IE - experssion:
Код:
<!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>
<title>Test width</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 100%;
}
#content {
margin: 0 auto;
padding: 0;
font-family: Tahoma, sans-serif;
font-size: 76%;
min-width: 760px;
max-width: 1000px;
width: expression((documentElement.clientWidth||document.body.clientWidth)<760?'760px': ((documentElement.clientWidth||document.body.clientWidth)>1000?'1000px':'auto'));
border: solid 1px red;
}
#content p {
margin: 0;
padding: 6px 10px;
line-height: 1.5em;
}
</style>
</head>
<body>
<div id="content">
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test width</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 100%;
}
#content {
margin: 0 auto;
padding: 0;
font-family: Tahoma, sans-serif;
font-size: 76%;
min-width: 760px;
max-width: 1000px;
width: expression((documentElement.clientWidth||document.body.clientWidth)<760?'760px': ((documentElement.clientWidth||document.body.clientWidth)>1000?'1000px':'auto'));
border: solid 1px red;
}
#content p {
margin: 0;
padding: 6px 10px;
line-height: 1.5em;
}
</style>
</head>
<body>
<div id="content">
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p>
</div>
</body>
</html>
Спасибо.
Я понял ваши идеи.
Но вот насчет второго скрипта. Не совсем понятно как это работает. В чем суть? Мы создаем минимальный и максимальный размер таблицы. И?
Я понял ваши идеи.
Но вот насчет второго скрипта. Не совсем понятно как это работает. В чем суть? Мы создаем минимальный и максимальный размер таблицы. И?