[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / Java Script /

Изменения в зависимости от разрешения экрана— подгрузка фонов, изменение стилей

Илья Алямкин
http://mtk.on.ufanet.ru/

Похоже, эта тема становится любимой. :)) Хотя тема действительно актуальная, очень часто web дизайнеру приходиться придумывать "универсальные" странички под все возможные разрешения экранов. Как решать эту проблему— личное дело каждого. Можно использовать таблицы, можно все просто сделать одного фиксированного размера, можно использовать скрипты. У использования JavaScript есть только два серьезных минуса, на мой взгляд, первый— отключенная поддержка в броузере посетителя, второй— недостаток знаний и опыта у web дизайнера. Очень часто встречается и то, и это. :))) Гениев нет, так сказать...

Изменение фонового рисунка в зависимости от разрешения экрана.

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

<script language="JavaScript">
<!--
if (self.screen) {
width = screen.width
height = screen.height
}
else if (self.java) {
var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}else{
width = height = 'x'
}
if (width == 640) {
 document.write('<BODY
BACKGROUND=fon1.jpg>');  }
else if (width == 800) {
 document.write('<BODY
BACKGROUND=fon2.jpg>');  }
else if (width == 1024) {
  document.write('<BODY
BACKGROUND=fon3.jpg>');   }
else if (width == 1280) {
 document.write('<BODY
BACKGROUND=fon4.jpg>');  }
else {
 document.write('<BODY
BACKGROUND=fon5.jpg>');  }
//-->
</script>

Вариант второй

<SCRIPT LANGUAGE="JavaScript">
<!-- Script Begin
  if (screen.width==800)
    {  document.write("<BODY
BACKGROUND='/images/800.jpg'>");
    }
  else if (screen.width==1024)
    {  document.write("<BODY
BACKGROUND='/images/1024.jpg'>");
    }
  else
    {  document.write("<BODY
BACKGROUND='/images/other.jpg'>");
    }
//  Script End -->
</SCRIPT>

Изменение параметров фреймовой структуры в зависимости от разрешения экрана.

Фреймовые структуры не всегда "выживают" при изменении размеров экрана, данный скрипт изменяет размеры фреймов и вполне может пригодиться... По идее, ничего особо и не изменилось по сравнению с предыдущими JavaScript-ами.

<script language="JavaScript">
<!--
if (self.screen) {
width = screen.width
height = screen.height
}
else if (self.java) {
var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}else{
width = height = 'x'
}
if (width == 640) {
document.write('<FRAMESET cols=20%,80%>
<FRAME src="menu.htm">
<FRAME name=display src="firstpage.htm">
</FRAMESET> '); }
else if (width == 800) {
document.write('<FRAMESET cols=50%,50%>
<FRAME src="menu.htm">
<FRAME name=display src="firstpage.htm">
</FRAMESET>'); }
else if (width == 1024) {
document.write('<FRAMESET cols=10%,90%>
<FRAME src="menu.htm">
<FRAME name=display src="firstpage.htm">
</FRAMESET> '); }
else if (width == 1280) {
document.write('<FRAMESET cols=30%,70%>
<FRAME src="menu.htm">
<FRAME name=display src="firstpage.htm">
</FRAMESET> '); }
else { document.write('<FRAMESET cols=40%,60%>
<FRAME src="menu.htm">
<FRAME name=display src="firstpage.htm">
</FRAMESET> '); }
//-->
</script>

Всем этим можно воспользоваться, но лучше попробовать обойтись простыми таблицами и компоновкой графики. Не всегда имеет смысл "наворачивать" все возможные эффекты и удобства... Самая универсальная страничка— просто таблицы, графические файлы в GIF или JPG, без скриптов, эффектов и прочего. Возможно, возникнет некоторое неудобство при просмотре на совсем маленьком или, наоборот, большом экране, но все броузеры поддерживающие графику отобразят все в приемлемом виде и без потери информации. А web дизайнеру и тут работы много будет, одна графика чего стоит...




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / Java Script /

Живые меню или Как сделать красиво с помощью CSS и JavaScript
14-03-2009   

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

Кол. просмотров: общее - 3576 сегодня - 0

Локальная баннерная система
14-03-2009   

Этот скрипт поможет вам организовать на своем сайте или страничке баннерную систему. Первый фрагмент вы вставляете в любое место странички... подробнее

Кол. просмотров: общее - 3262 сегодня - 0

Локальная реклама
14-03-2009   

В Internet Zone-154 была небольшая заметка Локальная баннерная система. Автор - Вадим Беляков (http://tuta.da.ru) предлагал поставить на страничку баннер, используя небольшой javascript. Я прочитал этот номер лишь в середине апреля. Мне сразу же пришло в голову использовать его для текстовой рекламы... подробнее

Кол. просмотров: общее - 3375 сегодня - 1

Использование JS для создания «умных» форм
14-03-2009   

JS, или JavaScript язык сценариев, которые выполняются на стороне клиента и не требует перезагрузки страницы. JavaScript был разработан компанией Netscape в 1995 году... подробнее

Кол. просмотров: общее - 3382 сегодня - 0

Обманщик спам-роботов
14-03-2009   

Как известно, бичом современного Интернета является спам - непрошенная рассылка рекламных и прочих сообщений. По данным некоторых аналитиков, он составляет более 50% всех сообщений в Сети... подробнее

Кол. просмотров: общее - 3534 сегодня - 0



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects