Создать сайт официально

      Контент сайта >>>>  Структура шаблона >>>>  Графические элементы >>>>
      
      Когда вы создаете официальный сайт, то вам надо выполнить несколько стандартных дейчтвий: заказать хостинг, заказать дизайн сайта, протестировать сайт, устранить замечания, наполнить сайт актуальным контентом, заняться продвижением официального сайта. Официальный сайт для небольшой компании, магазина, торгового центра, школы может быть разработан веб дизайнером самостоятельно с небольшими финансовыми и временными затратами. Это позволит быстро установить контакт с потребителями и заказчиками, довести информацию максимально удобным способом (на смартфоны и планшетные компьютеры).
      Официальные сайты небольших компаний почти всегда разрабатываются под контент - справочную информацию (контактная информация, схемы проезда, способы оплаты и т.д.), ассортимент (каталоги товаров и услуг) и т.п. Оформление таких сайтов может и должно быть функционально простым - удобно и ничего лишнего, отвлекающего от списка товаров или услуг. Такие официальные сайты легко масштабируются под размеры экранов мобильных устройств (Android смартфоны или iPhone) и будут все более и более востребованы.
      Для официального сайта небольшой фирмы важно и то, что такой дизайн сайта может быть разработан в кратчайшие сроки (от 1 дня) и в последствии может быть легко заменен другим, профессиональным.
      

      Создадим официальный сайт, оптимизированный для промотра на смартфонах. Графическое оформление сайта сделаем приглушенным, "подчеркивающим" изображение продвигаемого товара.
      Для создания сайта потребуются два графических редактора - векторный и растровый. В векторном графическом редакторе (например, Corel Draw) рисуется макет веб страницы (рамки, линии, полоски и т.д.). Сформированный макет экспортируется в растровый формат и загружается в растровый редактор (например, Adobe Photoshop). Из картинки вырезаются отдельные элементы, с помощью которых можно сформировать дизайн сайта. Элементы сохраняются в отдельных файлах и используются в качестве графического "задника" ячеек HTML кода.
      
      Пример
      
      В растровом графическом редакторе рисунок шаблона сайта разделим на набор графических элементов. В простейшем варианте (как в данном примере) достаточно 9 элементов - 3 элемента верхней части, 3 элемента средней части шаблона и 3 элемента нижней части.
      При сохранении графических элементов шаблонов запишите их размеры, они понадобятся для параметров width и heighth элементов <td> таблиц.
      

      Посмотрим, как выполнен дизайн и HTML код шаблона для этого сайта. Мы используем шаблон сайта с фиксированной шириной:
      
      <table border=0 cellpadding=0 cellspacing=0 width=900>
      
      и "раздвижной" длиной (высотой страницы):
      
      <td background=5.jpg width=792 align=center> - в колонке, содержащей контент сайта, не задана высота height
      

Создать сайт официально

            
            
            
      
      Рассмотрим HTML код, необходимый для каждой таблиц.
      
      <table border=0 cellpadding=0 cellspacing=0 width=900>
      Обычный тэг для таблицы. width=900 - ширина таблицы. Это значение нам будет необходимо для расчета ширины элементов <td> ... </td>
      <tr valign=top>
      Тэг (открывающий) строки таблицы.
      А далее - самое интересное и важное. В этой строке нужно создать 3 столбца : левый, центральный и правый. Ширина левого столбца и ширина правого будут строго определяться шириной графических элемнтов, которые будут объявлены как background.

      <td background=1.jpg width=49 height=33></td> - для левого столбца
      <td background=2.jpg width=798 height=33></td> - для центрального столбца
      <td background=3.jpg width=53 height=33></td> - для правого столбца
      Обратите внимание, что суммарная ширина столбцов width=49, width=798 и width=53 составляет 900. Т.е. равно ширине таблицы. При этом ширина левого столбца width=49 и ширина правого столбца width=53 точно соответствует ширине графических элементов background=1.jpg и background=3.jpg :
      
          
      
      Точно по такому же принципу делается HTML код для центральной части с контентом. Только не задается высота (height) (для таблицы с большим, длинным контентом) и поэтому высота таблицы (длина страницы) автоматически раздвигается под конкретное наполнение (контент).
      
      <table border=0 cellpadding=0 cellspacing=0 width=900>
      <tr valign=top>
      <td background=4.jpg width=56></td>
      <td background=5.jpg width=792 align=center><font class="next">Разработка web сайтов - вебдизайн</font></td>
      <td background=6.jpg width=52></td>
      </tr>
      </table>
      
      Поэтому высота графических элементов для background левого и правого столбцов центральной части имеют очень маленькое значение - буквально несколько пикселей.   [Шаблоны]
      
          
      
      Ширину сайта (таблицы) можно сделать вычисляемой и зависящей от параметров экрана компьютера (или смартфона) посетителя. Для этого можно использовать следующий скрипт:
      
      <script language="JavaScript">
      <!--
      var wtt=screen.width;
      var htt=screen.height;
      document.write("Screen resolution="+wtt+"x"+htt+" pixels");
      //-->
      </script>
      
      wtt - ширина экрана
      htt - высота экрана
      
      Для динамического формирования таблицы достаточно дописать следующие строки:
      
      var wtt=screen.width - 100; - сделаем ширину таблицы на 100 pix меньше ширины экрана
      ...
      document.write("<table border=0 bgcolor=#C7650E cellpadding=0 cellspacing=0 width="+wtt+">");
      ...
      ...

Создание сайта >> Шаблоны >> Создание сайтов >> Разработка сайтов >> Создание сайта >> Разработка сайта >>

Создание сайта

      Если предполагается делать длинную web страницу сайта, то таких таблиц для средней части нужно делать несколько, разделяя большой массив контента на несколько небольших.  [Раскрутка]
      
      Точно так же делаем для нижней планки - фактически полную копию HTML кода для верхней планки.
      
      <td background=7.jpg width=49 height=33></td> - для левого столбца
      <td background=8.jpg width=798 height=33></td> - для центрального столбца
      <td background=9.jpg width=53 height=33></td> - для правого столбца
      
              
      
      Здесь средний графический элемент очень узкий. В качестве background он будет "растянут" на 798 пикселей (width=798)
      
      Все готово для создания официального сайта, оптимизированного для смартфонов. Создадим сайт - каталог для скачивания электронных книг - под размер экрана iPhone 4 (960 x 640).
      Зададим ширину веб страницы равной 600 pix, чтобы список можно было просматривать в вертикальном положении устройства - так отображается больше информации.
      
      
      
      

      
      
      
      
      
      
      
      
      
      
      Контент сайта >>>>  Структура шаблона >>>>  Графические элементы >>>>

Создание сайтов