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

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

Он-лайн руководство по разработке сайтов

    Как показывает опыт использования веб сайтов, посетителей больше всего привлекает информационное наполнение сервера, чем его дизайн (если это не фото галерея). Содержимое страниц, так же, наибольшим образом влияет на индексацию сайта в поисковых системах. Большинство доступных онлайн учебников по разработке сайтов не расчитаны на дизайнеров, создающих свою первую страницу - как правило без графики или на основе шаблонов с бесплатного хостинга.
   Здесь представлен компактный иллюстрированный онлайн учебник по разработке сайтов, позволяющий разработчику самого начального уровня разработать оригинальный графический дизайн веб страницы, прекрасно оптимизированный для добавления в каталоги и индексации поисковыми системами.
   Для разработки собственного дизайна сайта Вам понадобится две программы - векторный графический редактор Corel Draw (можно использовать даже MS Word) и растровый редактор Adobe Photoshop.  [Готовые сайты]  [Бесплатные сайты]  [Блог]

   Запустим Corel Draw и нарисуем 3 прямоугольника - первый (нижний) будет создавать "фон", два последующих - рамки для веб страницы.

       Дизайн

   Скачать бесплатно файл в формате Corel Draw 11 - corel1.zip    Сайт бесплатно >>

   Доработаем оформление в Corel Draw - выберем другую толщину линий и скруглим углы прямоугольников.



       Дизайн страницы

   Скачать бесплатно файл в формате Corel Draw 11 - corel2.zip

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



   Скачать бесплатно файл в формате Corel Draw 11 - corel1.zip

Разработка графического оформления сайта

   Вырежем в Photoshop основные контуры из общего рисунка - см. файл tmp.jpg  [Раскрутка]

   Разделим имидж на три вертикальных части: верхнюю, с верхними скруглёнными углами, узкую среднюю часть и нижнюю, с нижними скругленными углами.    Скачать бесплатно >>>>  Сайты >>>>

   И поместим их в отдельные окна для дальнейшего разделения.

       Группа

   Высота верхней и нижней частей определяется радиусом закругления углов, а высота средней части может быть вообще равна 1 pix.    Разработка сайтов >>>>  Создание сайтов >>>>
   Разделим каждую из 3-х частей еще на три части - левую, среднюю и правую и поместим их в отдельные файлы. При этом запишем их размеры (высоту и ширину), чтобы потом при разработке HTML кода можно было задавать параметры ячеек таблицы в тэге TABLE.

       Edit

   Сохраним их под именами 1.jpg - 9.jpg

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

       Рисунок    Дизайн

HTML код можно взять почти без изменений отсюда. Обратите внимание, что с одинаковым успехом Corel Draw можно заменить любым векторным редактором, даже MS Word. [Учебник Word]

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

<table cellpadding="0" width=280 cellspacing="0" border="0">
<tr>
<td background=img/1.jpg width=61 height=32></td>
<td background=img/2.jpg width=190 height=32></td>
<td background=img/3.jpg width=29 height=32></td>
</tr>
</table>
<table cellpadding="0" width=280 cellspacing="0" border="0">
<tr>
<td background=img/4.jpg width=60 height=6></td>
<td background=img/5.jpg width=190 height=6>Здесь размещаем содержимое сайта</td>
<td background=img/6.jpg width=30 height=6></td>
</tr>
</table>
<table cellpadding="0" width=280 cellspacing="0" border="0">
<tr>
<td background=img/7.jpg width=61 height=29></td>
<td background=img/8.jpg width=191 height=29></td>
<td background=img/9.jpg width=28 height=29></td>
</tr>
</table>

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

   <td background=img/1.jpg width=61 height=32></td> - здесь img/1.jpg - подкаталог, в котором лежит файл с имиджем левого угла.

   <td background=img/3.jpg width=29 height=32></td> - здесь img/3.jpg - подкаталог, в котором лежит файл с имиджем правого угла.

   А вот со средним столбцом все сложнее. Нам нужно вычислить его ширину. Наша таблица имеет ширину 280 (к примеру), левый и правый углы - 61+29=90. Т.е. на ширину среднего столбца остается 280-90=190.

   Так и пишем: <td background=img/2.jpg width=190 height=32></td>

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

       Линия

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

   Теперь зададим фон страницы и фон таблицы, совпадающий с фоном оформления:

   <body bgcolor=#454869 text=000000 ... marginheight=0>

   <table bgcolor=#454869 cellpadding="0" width=280 cellspacing="0" border="0">

   Вот и все, что нужно, чтобы разработать простой и очень эффективный дизайн сайта. Теперь следовало бы посмотреть на реальные примеры страницы сайтов с таким дизайном. Нет ничего прощще - эта веб страница разработана именно по такому принципу. Впрочем, как и вот эта и эта, и многие-многие другие, эффективно раскрученные страницы.    Разработка сайтов >>>>  Скачай бесплатно >>>>