Разработка сайтов
Создание сайтов. Анализ и оптимизация HTML кода готовых бесплатных сайтов для раскрутки
Сайт
Создание сайта >> Разработка сайта >> Создание сайтов >> Разработка сайтов >> Создание >> Разработка сайтов >>
      

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


      Контент сайта >>>>  Структура шаблона >>>>  Графические элементы >>>>
      
      Чтобы создать шаблон сайта с графическим оформлением за 1.5 - 2 часа нужно совсем не многое. Нужен векторный графический редактор (Corel Draw или даже MS Word) и растровый графический редактор (напирмер, Adobe Photoshop). Причем, это могут быть совсем ранние простые версии программ. Векторный редактор необходим для того, чтобы нарисовать внешний вид графического формления - в данном случае это несколько прямоугольных рамок с зливкой, наложенных друг на друга. После этого векторную картинку надо сохранить в растровом формате (можно даже .JPG) и загрузить ее в растровый графический редактор (Adobe Photoshop).
      В графическом редакторе рисунок шаблона сайта разделим на набор графических элементов. В простейшем варианте (как в данном примере) достаточно 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
      

Разработка сайта

      1. Структура web страницы Веб страница состоит из стандартного заголовка, набора мета-тегов, списка стилей и основного блока контента. Основной блок контента сайта - набор таблиц одинаковой ширины и одинакового оформления. Несмотря на то, что на экране броузера web страница выглядит цельным блоком, на самом деле, на уровне HTML кода, она разделена "поперечно" на несколько таблиц меньшего размера. Дело в том, что web броузеры имеют одну особенность - таблица отображается в окно броузера (и становится видимой пользователю) только после полной загрузки её и всех её элементов (текста, графики, скриптов и т.д.) При одинаковом видимом результате загрузка отдельных "маленьких" таблиц выполняется быстрее и на экран web страница отображаются быстрее.

      Рассмотрим в качестве примера разработку HTML кода формирования "шапки" этой веб сайта.
      
            Сайт
      
      "Шапка" данной web страницы состоит из трёх таблиц : верхней планки, центральной части с контентом (заголовком страницы в данном случае) и нижней планки.


            Разработка сайтов
            Разработка сайтов
            Разработка сайтов
      
      Рассмотрим 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)
      
      Как писать контент
      
      Если шаблоны для создания большого количества сайтов, может возникнуть потребность в большом количестве оригинального контента. Контнт невозможно просто копировать из разных мест и размещать на своих сайтах. Поисковые системы имеют специальные программы для поиска дубликатов (зеркал) сайтов. Посещаемость таких сайтов будет минимальной.
      Существуют программы и онлайновые сервисы для обработки контента - уникализаторы, синонимайзеры, генераторы контента. Эти сервисы обрабатывают введенный исходный текст переставляя предложения или абзацы, заменяя слова в тексте синонимами, кириллические буквы аналогичными латинскими и т.д. Такой текст выдается за оригинальный, уникальный.
      Несмотря на уверения владельцев таких сервисов, эффективность такого контента стремится к нулю. Если ваша страница с таким контентом хорошо индексируется и будет приличная посещаемость, ваш сайт будет проверен "вручную". Я сталкивался с практикой ручной проверки сайтов из 1-2 страниц на бесплатном хостинге. Пришлось выполнить значительный объем работ для выполнения требований представителей поисковой системы.
      Сайты, попавшие в блокировку, можно считать потерянными. Даже если потом написать полностью авторский контент, разблокировка может произойти через пол-года и это не гарантировано.
      Наилучшим вариантом для переработки контента можно считать изложение. Т.е. необходимо несколько раз прочитать исходный текст и затем его изложить по памяти. Желательно в тексте использовать другие имена собственный, бренды, географические названия.
      
      Кое-что дополнительно о графике
      
      Поисковые системы индексируют информацию о изображениях, содержащихся в контенте веб сайта и его графическом оформлении.

      Поэтому для картинок в тексте заполняйте поля Alt="" См. пример - <img src=4.jpg alt="Веб дизайн" border=1>
      
      Кроме того, картинки имеют несколько полей, которые почти никогда не заполняют, но которые обрабатываются фото сервисами и могут так же влиять на индексацию сайта.
      
      Document title - Название работы. Лучше вводить текст, который чаще подают в запросах в поисковых системах.
      
      Author - автор работы (ФИО).
      
      Description - Описание того, что изображено на рисунке или фотографии.
      
      Description writer - Составитель описания

      Keywords - набор ключевых слов, характеризующих изображение и необходимых для быстрого поиска в базе. Должны разделяться точкой с запятой.
      
      Copyright status - в "выпадающем" списке необходимо выбрать "Copyrighted", т.е. защищено авторскими правами.
      
      Copyright notice - необходимо указать текущий год, имя и фамилию автора.
      
      Copyright info URL - указать www адрес, где прописана правовая информация на данное произведение.
      
      Headline - описание места съемки, если это фотография. Подробнее
>>
      
      Контент сайта >>>>  Структура шаблона >>>>  Графические элементы >>>>

Разработка сайтов

        

Рейтинг@Mail.ru     Amfibi Web Search & Directory   Занесено в каталог Deport.ru