Архив форумов ЦИТФорума

kivi · Зарегистрирован: 21.03.2004 Сообщения: 7

подскажите пожайлуста, возможно ли чтоб сайт отображался при разных расширениях экрана (600х800, 1024х768 и др). я имею в виду есть ли скрипт который автоматом это делал. если есть дайте ПЛИЗ.

Кипрень · Зарегистрирован: 26.01.2004 Сообщения: 87

эээ... а слабо поискать в том же гугле?
Но сразу предупреждаю, что скрипт будет выдавать именно разрешение экрана, но никак не размеры рабочей области.
А чтоб с разрешениями не заморачиваться делай "резиновым" дизайн

kivi · Зарегистрирован: 21.03.2004 Сообщения: 7

если бы я знал как называется скрипт, давно нашел. видел я его пару раз, до того как начал заниматься кодингом (подольшему счету баловством). теперь вот на тропу дизайна выхожу, и очч охото его найти

Кипрень · Зарегистрирован: 26.01.2004 Сообщения: 87

или это у меня крыша едет, или одно из двух...
краткое пособие для поиска скрипта:
Открываем google.com.ru в строке поиска пишем: "скрипт разрешение экрана" и тебе выдается куча вариаций на эту тему, остается только выбрать Twisted Evil

Иришка

Привет, Киви!
Свойства экрана screen.availHeight и screen.availWidth содержат информацию о доступной высоте и ширине экрана браузера. Напиши несколько стилей для нескольких возможных размеров и подгружай их в зависимости от значений этих величин.
Пока!
Иришка

kivi · Зарегистрирован: 21.03.2004 Сообщения: 7

большое СЕНКС за ответ, хоть знаю теперь с чего начать поиск.
пока его в рабочем виде не нашол Sad

но найду

или сам напишу.

Иришка

Привет, Киви!

В документации по ДХТМЛ есть пример. Разберись в нем и модифицируй под свой сайт.

<HTML>
<HEAD>
<TITLE> Пример адаптивной схемы размещения </TITLE>
<STYLE TYPE="text/css" ID="default">
/* Таблица стилей по умолчанию всегда применяется к документу. */
/* Определение строки меню для соответствия встроенным меню
пользовательской системы. */
.menu A.highlight {background:highlight; color:highlighttext}
.menu {background:menu}
.menu P {margin-left:5pt; margin-right:5pt}
.menu A {color:menutext; text-decoration:none; font:menu}
/* Определение полей по умолчанию. */
body {margin-top:0pt; margin-left:0pt}
.centerIndent {margin-left:5pt; margin-right:5pt}
.leftIndent {margin-left:5pt; margin-right:5pt}
.rightIndent {margin-left:5pt; margin-right:5pt}
H1 {text-align:center}
.outline {border:1pt solid gray; margin:2pt 2pt 2pt 2pt}
</STYLE>
<STYLE TYPE="text/css" ID="narrowScreen">
/* Дополнительные правила стилей для узкого экрана;
все содержание для широких экранов скрыто. */
.wide {display:none}
</STYLE>
<STYLE TYPE="text/css" ID="midScreen">
/* Правила для экранов среднего размера. Содержание для
узкого экрана скрывается. */
.narrow {display:none}
.floatLeft {margin-left:0; width:150; float:left}
</STYLE>
<STYLE TYPE="text/css" ID="wideScreen">
/* Наилучшая схема размещения на самом широком экране. */
.centerIndent {margin-left:15%; margin-right:15%}
.leftIndent {margin-left:35%; margin-right:5%}
.rightIndent {margin-left:5%; margin-right:35%}
.floatLeft {margin-left:-154; width:150; float:left}
.narrow {display:none}
</STYLE>
<STYLE TYPE="text/css" ID="4bit">
/* Число цветов равно 4 или меньше */
BODY {color:red; background:white}
</STYLE>
<STYLE TYPE="text/css" ID="8bit">
/* Таблицы стилей для 8 или большего числа битов */
BODY {background:URL(fancy.gif)}
H1 {color:purple}
H2 {color:navy}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
// Выберите таблицу стилей для доступного количества цветов.
var ss = document.styleSheets;
ss["4bit"].disabled = (screen.colorDepth >= Cool

;
ss["8bit"].disabled = !(ss["4bit"].disabled);
function updateLayout() {
// Изменение таблицы стилей на основе доступной ширины экрана.
var ss = document.styleSheets;
ss["wideScreen"].disabled =
(450 > document.body.offsetWidth);
ss["midScreen"].disabled =
(!ss["wideScreen"].disabled ||
300 > document.body.offsetWidth);
ss["narrowScreen"].disabled =
!(ss["wideScreen"].disabled &&
ss["midScreen"].disabled);
}
function highlight() {
// Highlight the Anchor element in the menu.
if ("A" == event.toElement.tagName)
event.toElement.className = "highlight";
}

function cleanup() {
// Clear the class.
if ("A" == event.fromElement.tagName) {
event.fromElement.className = "";
}
</SCRIPT>
</HEAD>
<BODY ONRESIZE="updateLayout();">
<SCRIPT LANGUAGE="JavaScript">
/* Данный вызов находится в теле, поскольку метод
updateLayout основан на доступном элементе Body. */
updateLayout();
</SCRIPT>

<DIV CLASS="menu" ONMOUSEOVER="highlight()"
ONMOUSEOUT="cleanup()">
<P><A HREF="home.htm">Home</A>
<A HREF="search.htm">Search</A>
<A HREF="about.htm">About</A></P>
</DIV>
<H1>Adaptive Layout</H1>
<DIV CLASS="centerIndent">
Данный пример демонстрирует использование динамических стилей
для создания страницы, которая адаптируется к окружающей среде.
Строка меню использует системные установки для количества цветов.
Для систем с ограниченной цветовой поддержкой в документе
используется только черный и белый цвета. Схема размещения будет
изменяться в зависимости от размера окна. Содержание также
модифицируется при изменении окружения.
</DIV>
<DIV CLASS="leftIndent">
<H2>Floating Elements</H2>
<TABLE ID="tleft" CLASS="floatLeft">
<TR>
<TD CLASS="outline" VALIGN="Top">
Adaptive Layout and <BR>
Dynamic HTML!
<P>Resize the window<BR>
for an example.
</TD>
</TR>
</TABLE>

<P>The figure
<SPAN CLASS="wide">to the left</SPAN>
<SPAN CLASS="narrow">above</SPAN>
demonstrates that elements can move into and out of the
flow based on the window size.
</P>
<P>The rendering of the page changes based on the window size
and the number of colors supported. The text and the
floating element are repositioned to optimize the amount
of real estate available on the screen.
</P>
</DIV>
<DIV CLASS="rightIndent">
<H2>Conditional Data</H2>
<P>
В зависимости от окружения будут отображаться различные данные.
</P>
<P CLASS="wide" STYLE="color:red">
Вы просматриваете версию документа для широкого экрана.
</P>
<P CLASS="narrow" STYLE="color:red">
Документ имеет отличный стиль, поскольку ширина окна
просмотра мала.
</P>
</DIV>
<DIV STYLE="display:none">

Данную страницу лучше всего просматривать в браузере,
который поддерживает CSS и динамический HTML.
</DIV>
</BODY>
</HTML>

Желаю удачи!
Иришка

	Список форумов Архив форумов ЦИТФорума -> Создание веб-сайтов	Часовой пояс: GMT + 3
Страница 1 из 1