Бесплатные шаблоны сайтов
Скриншот шаблона сайта, ориентированного на просмотр на iPhone и iPad
        

Шаблон сайта


      Шаблон сайта - как из шаблона сайта с фиксированной шириной сделать раздвижной шаблон (с переменной шириной).
      Шаблон сайта с фиксированной шириной содержит таблицу с одной или несколькими столбцами. Приведенные здесь шаблоны сайтов имеют 3 столбца. 1-й и 3-й имеют ширину графических элементов (уголков графической рамки). 2-й столбец содержит контент сайта и имеет наибольшую ширину (почти 100% ширины таблицы). К примеру, ширина таблицы равна 900 pix
      
      <table border=0 cellpadding=0 cellspacing=0 width=900>
      
      а ширина 2-го столбца равна 792 pix
      
      <td background=ge5.jpg width=792 align=center>
      
      Можно с помощью Java Script получить значение ширины экрана и вычислить ширину 2-го столбца и таблицы в целом
      
      Листинг Javascript
      
      <script language="JavaScript">
      <!--
      var ts=screen.width;
      var tk=screen.height;
      document.write("Screen resolution="+ts+"x"+tk+" pixels");
      //-->
      </script>
      
      Здесь переменная ts содержит ширину экрана в pix. Это значение можно использовать для вычисления ширины 2-го столбца (среднего столбца таблицы с контентом)
      Ширина 2-го столбца равна ширине таблицы (900 pix) минус ширина левого графического элемента background=ge4.jpg (56 pix) и минус ширина правого графического элемента background=ge6.jpg (52 pix)
      
      Если заменить строку
      
      <td background=ge5.jpg width=792 align=center>
      
      на Java script
      
      <script language="JavaScript">
      <!--
      var ts=screen.width;
      document.write("<td background=ge5.jpg width="+ts-56-52+"align=center>");
      //-->
      </script>
      
      то ширина таблицы шаблона сайта станет вычисляемой, а сайт - "раздвижным". Здесь ts-56-52 - ширина экрана (ts) минус ширина 1-го и 3-го столбцов (элементы рамки). Это самый простой пример. Имеет смысл ограничить минимальную ширину страницы и сделать размеры имиджей на странице вычисляемыми width=... height=...
      
      Теперь при загрузке на устройства с малым размером экрана, размеры сайта будут автоматически пересчитаны и форматирование контента не нарушится.
      

Шаблон сайта


      

      <<<<<< На главную    Шаблон сайта    Скриншот шаблона    Еще шаблоны >>>>>>

        
Бесплатные шаблоны сайтов
Готовые бесплатные сайты и шаблоны сайтов для просмотра на iPhone и iPad