Простой веб дизайн для начинающих

Здесь разбираются видеокурсы и видеоуроки авторов по созданию простых сайтов с помощью редакторов сайтов типа:сайт визитка или простая продающая страница.

Модератор: Дмитрий

Простой веб дизайн для начинающих

Сообщение vantel » Сб окт 13, 2012 10:57

Существует простая "одностраничная" (в смысле объема руководства) методика создания сайтов.
Даже малоопытный разработчик может делать по одной веб странице в час, если придерживаться следующей методики.

1. Сайт имеет компактное и простое графическое оформление, что отнюдь не говорит о том, что оно будет примитивным.
2. HTML код сайта имеет в своей основе набор таблиц <TABLE> с строками <TR> и ячейками <TD>, в которых размещается контент.

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

Нарисуем макет веб страницы в векторном редакторе — обычный набор рамок, прямоугольников, линий. Зададим цвет и толщину линий и заливку.

Изображение — рисование в Word

Изображение — скругленный угол для рамки

Получится что-то вроде

Изображение

Раскрасим и зальем цветом

Изображение

Рисуночек маленький, но этого достаточно. Экспортируем его в растровый графический файл формата JPG или просто сделаем Print Srcr экрана (нажав кнопку на клавиатуре). Загрузим изображение в Photoshop или какой-то другой растровый редактор.
Разделим рисунок на важные составные части — верхнюю планку (в ней должны полностью уместиться углы), центральную (можно шириной в несколько пикселей — потом будет автоматически растягиваться под контент) и нижнюю (аналогично верхней)

Изображение

Изображение

Изображение

Потом каждую из этих частей разделим еще на три части — левую, центральную и правую — см. подробнее http://website.oflameron.ru/
HTML код пишем в простейшем редакторе notepad.exe который есть в каждом Windows

Код: выделить все
<table cellpadding="0" width=180 cellspacing="0" border="0">
<tr>
<td background=400/design.jpg width=20 height=23></td>
<td background=400/site.jpg width=141 height=23></td>
<td background=400/tutorial.jpg width=19 height=23></td>
</tr>
</table>
<table cellpadding="0" width=180 cellspacing="0" border="0">
<tr>
<td background=500/design.jpg width=17 height=60></td>
<td background=500/site.jpg width=148 height=60>  Здесь контент сайта  </td>
<td background=500/tutorial.jpg width=15 height=60></td>
</tr>
</table>
<table cellpadding="0" width=180 cellspacing="0" border="0">
<tr>
<td background=600/design.jpg width=17 height=22></td>
<td background=600/site.jpg width=145 height=22></td>
<td background=600/tutorial.jpg width=18 height=22></td>
</tr>
</table>



Тут все просто — набор таблиц. Получится вот такой вариант с графикой

Изображение

Из нескольких рамочек и контента с имиджами можно сделать несложную, но сбалансированную страницу

Изображение

Это очень удобная технология. По ней можно создавать эффективно индексируемые сайты за час-полтора.



vantel
Студент
Студент
 
Сообщений: 3
Зарегистрирован: Сб окт 13, 2012 10:12
Пункты репутации: 0



Вернуться в Создание простых HTML сайтов и страниц

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2