Разработка сайтов - руководство. Руководство по разработке сайтов. Создание сайтов. Разработка сайтов бесплатно
Разработка сайтов

  

Разработка сайтов - руководство


    
  2      3  
    
    
Существует много ситуаций, когда надо быстро разработать веб сайто. Например, вам нужно раскрутить какой-то веб сайт, создать сайт для магазинчика или продажи своих поделок. Предложенное здесь руководство - лучшее по соотношению объем/сложность/время разработки. Объем руководства - всего одна веб страница, сложность - проще уже невозможно, время разработки - примерно 1 час.

    Рассмотрим здесь процесс разработки оригинального дизайна для одностраничного сайта. В принципе, ничто не мешает вам потом сделать сколько угодно страниц для сайта, но с точки зрения раскрутки - достаточно одной страницы. При разработке сайта основное внимание уделим компактности дизайна (чтобы сайт загружался быстро даже на медленных каналах) и эффективности его индексации в поисковых системах.
   Т.к. количество посетителей сайта в основном определяется, его содержимым, то разработаем компактный дизайн с небольшим количеством графических элементов - всего 9 файлов в формате JPG. 4 элемента - оформление углов. 4 элемента - оформление боковых, верхней и нижней линий таблицы. 1 элемент - для заполнения фона таблицы (не обязаетльный элемент, если нет текстуры). Используя такое небольшое количество графических элементов, можно разработать несколько вариантов дизайна - достаточно разместить на веб странице несколько таблиц. Как пример - "
Шаблоны сайтов".
   Можно посмотреть, сколько разных по оформлению сайтов можно разработать с использованием описанной ниже технологии -
Сайты
   

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


   
Для разработки собственного дизайна сайта Вам понадобится две программы - векторный графический редактор Corel Draw (можно использовать даже MS Word) и растровый редактор Adobe Photoshop.
   Запустим Corel Draw и нарисуем 5 прямоугольников - первый (нижний) будет создавать "фон", следующий - "тень", два последующих - рамки для web страницы и еще один - верхнюю рамку для заголовка.
   

      Дизайн
   
   Файл в формате Corel Draw 11 - corel1.zip  Раскрутка сайтов

В принципе, Corel Draw можно больше не использовать. Мы создали в нем шаблон web страницы, который теперь можно разделить на элементы графического оформления и по ним создавать HTML код страницы. Все необходимые надписи на странице мы выполним в виде JPG картинок ( в Adobe Photoshop), Java script и в виде HTML текста. Конвертируем векторное изображение нашего шаблона из Corel Draw самым простым способом - захватом изображения экрана. Нажмите кнопку PrtScr на Вашей клавиатуре и поместите изображение экрана в буфер обмена. Запустите Adobe Photoshop, создайте новое окно:
   
      Разработка сайтов
   
   Файл в формате Corel Draw 11 - corel1.zip
   
   Вырежем в Photoshop основные контуры из общего рисунка - см. файл tmp.jpg
   
   Разделим имидж на четыре вертикальных части: верхнюю, с верхними углами, узкую среднюю часть с разделительной линией, узкую среднюю часть и нижнюю, с нижними углами.


   И поместим их в отдельные окна для дальнейшего разделения.
   
      Разработка сайтов
   
   Высота верхней и нижней частей определяется площадью, занимаемой углами прямоугольников.
   
      Разработка сайтов - hight=19
   
      Разработка сайтов - hight=11
   
      Разработка сайтов - hight=6 - может быть 1pix
   
      Разработка сайтов - hight=24
   
   Разделим каждую из 5-ти частей на три части - левую, среднюю и правую и поместим их в отдельные файлы. При этом запишем их размеры (высоту и ширину), чтобы потом при разработке HTML кода можно было задавать параметры ячеек таблицы в тэге TABLE.


      Edit  Элементы
   
   Сохраним их под именами 1.jpg - 12.jpg
   
   

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


   Теперь можно создать минимальный HTML код web страницы, использующей в качестве оформления созданные нами элементы.
   
      Разработка сайтов  Разработка сайтов  Разработка сайтов
   
      Разработка сайтов  Разработка сайтов  Разработка сайтов
   
      Разработка сайтов  Разработка сайтов  Разработка сайтов
   
      Разработка сайтов  Разработка сайтов  Разработка сайтов


   HTML код можно взять почти без изменений отсюда, нужно только использовать не 3 а 4 таблицы (т.к. у нас используется 4-е первоначальных графических элемента). Обратите внимание, что с одинаковым успехом Corel Draw можно заменить любым векторным редактором, даже текстовым процессором MS Word.
   
<table cellpadding="0" width=480 cellspacing="0" border="0">
<tr>
<td background=img/1.jpg width=47 height=19></td>
<td background=img/2.jpg width=407 height=19></td>
<td background=img/3.jpg width=26 height=19></td>
</tr>
</table>
<table cellpadding="0" width=480 cellspacing="0" border="0">
<tr>
<td background=img/4.jpg width=47 height=11></td>
<td background=img/5.jpg width=407 height=11></td>
<td background=img/6.jpg width=26 height=11></td>
</tr>
</table>
<table cellpadding="0" width=480 cellspacing="0" border="0">
<tr>
<td background=img/7.jpg width=55 height=6></td>
<td background=img/8.jpg width=393 height=6>
Здесь размещаем содержимое сайта</td>
<td background=img/9.jpg width=32 height=6></td>
</tr>
</table>
<table cellpadding="0" width=480 cellspacing="0" border="0">
<tr>
<td background=img/10.jpg width=49 height=24></td>
<td background=img/11.jpg width=403 height=24></td>
<td background=img/12.jpg width=28 height=24></td>
</tr>
</table>

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

   Обратите внимание, что код состоит из 4-х таблиц (по числу наших первых графических элементов - верхнего, нижнего и среднего). Между таблицами не должно быть пробелов!
   Рассмотрим таблицы по отдельности. Верхняя таблица
   Ширина таблицы width=480 выбрана нами из условий размещения дизайна на экране. Вы можете выбрать другое значение и далее производить вычисления с ним.
   Наша таблица имеет: одну строку (<tr>) и в ней 3 столбца (<td> ... </td>).
   Используем наши графические элементы, сохраненные в файлах 1.jpg - 3.jpg в качестве фона столбцов. При этом, самый левый и самый правый столбцы должны иметь ширину, равную имиджам в файлах 1.jpg и 3.jpg соответственно (углы) и такую же высоту.
   
   <td background=img/1.jpg width=47 height=19></td> - здесь img/1.jpg - подкаталог, в котором лежит файл с имиджем левого угла.

   
   <td background=img/3.jpg width=26 height=19></td> - здесь img/3.jpg - подкаталог, в котором лежит файл с имиджем правого угла.
   
   А вот со средним столбцом все сложнее. Нам нужно вычислить его ширину. Наша таблица имеет ширину 480 (к примеру), левый и правый углы - 47+26=73. Т.е. на ширину среднего столбца остается 480-73=407.
   
   Так и пишем: <td background=img/2.jpg width=407 height=19></td>

   Высота у всех элементов одинаковая, т.к. мы выделяли их из одного общего верхнего элемента
      
      Линия

   
   Точно так же переписываем 2-ю, 3-ю и 4-ю таблицы. Причем, для третьей таблицы
      Линия высота совершенно не имеет значения. При наполнении ее содержимым ( а все, что Вам нужно разместить на сайте следует писать сюда), таблица будет автоматически "растягиваться" по высоте.

   
   Теперь зададим фон страницы и фон таблицы, совпадающий с фоном оформления:
   
   <body bgcolor=#FEFE9A text=000000 ... marginheight=0>
   
   <table bgcolor=#FEFE9A cellpadding="0" width=280 cellspacing="0" border="0">
   
   Поместим наши четыре таблицы в HTML файл design.htm и посмотрим результат
   
      Вебсайт

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

   Убедившись, что все линии сопадают (т.е. при подсчете ширины Вы не ошиблись), можно начинать улучшать дизайн и заполнять его содержимым.
   Напишем заголовок и разместим его по центру таблицы. Для этого добавим выравнивание align=center в строку <td background=img/8.jpg width=393 height=6 align=center>Каталог бесплатных MP3 архивов</td>
   


      Разработка сайтов см. файл design2.htm

   Теперь добавим контент (содержимое) на веб страницу. В таблицу 3 добавим еще 3 строки. Для двух строк зададим выравнивание в обе стороны align=justify, а для четвертой - оставим выравнивание по центру. В нее поместим графический файл img/player.jpg
   
    <table cellpadding="0" width=480 cellspacing="0" border="0"> - Таблица №3
<tr> - Строка #1
<td background=img/7.jpg width=55 height=6></td>
<td background=img/8.jpg width=393 height=6 align=center>
Каталог бесплатных MP3 архивов</td>
<td background=img/9.jpg width=32 height=6></td>
</tr>
<tr> - Строка #2
<td background=img/7.jpg width=55 height=6></td>
<td background=img/8.jpg width=393 height=6 align=justify>
<a href=http://musicmp3.spb.ru/mp3/><b>musicmp3.spb.ru</b></a> - Архив mp3</td>
<td background=img/9.jpg width=32 height=6></td>
</tr>
<tr> - Строка #3
<td background=img/7.jpg width=55 height=6></td>
<td background=img/8.jpg width=393 height=6 align=justify>
<a href=http://www.zvuki.ru/A/L/225/MP3/><b>www.zvuki.ru</b></a> - Архив mp3</td>
<td background=img/9.jpg width=32 height=6></td>
</tr>
<tr> - Строка #4
<td background=img/7.jpg width=55 height=6></td>
<td background=img/8.jpg width=393 height=6 align=center>
<img src=img/player.jpg border=0></td>
<td background=img/9.jpg width=32 height=6></td>
</tr>
</table>

   
   См. файл design3.htm)
   
   Добавим стили (см. файл design4.htm)
   
   <style type="text/css">
   a { text-decoration: none; color: #E8E8D3;}
   a:hover { text-decoration: underline; color: #E8E8D3;}
   font { font-family: Arial, Tahoma, Helvetica; font-size: 8pt; color: black;}
   font.tt { font-family: Arial, Tahoma, Helvetica; font-size: 12pt; color: black;}
   </style>
   
   И применим определенные в стилях шрифты к тексту
   
   <font class=tt><b>Каталог бесплатных MP3 архивов</b></font>
   
   <font><b>musicmp3.spb.ru</font></b></a><font> - Архив mp3</font>
   
   Разработка сайта. Вот и все, что нужно, чтобы разработать простой и очень эффективный веб дизайн. Теперь следовало бы посмотреть на реальный пример страницы с таким дизайном. Нет ничего прощще - эта веб страница сделана именно по такому принципу. Впрочем, как и вот эта и эта, и многие-многие другие, эффективно раскрученные страницы.
   

    Скачать готовый сайт - 44 веб страницы - 29 Мбайт >>>>    
    Скачать готовый сайт - 21 веб страница - 453 Кбайт >>>>    
    ТОП-руководство по раскрутке сайтов - 9 Мбайт >>>>             


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

Каталог сайтов Всего.RU      ,   Handmade game

    Разработка сайтов - руководство. Руководство по разработке сайтов. Создание сайтов. Разработка сайтов бесплатно