| Дизайн Сайтов - Онлайн Учебник |
| Как разработать оптимальный дизайн веб сайта |
|
Однако, не все здесь просто - есть как минимум три особенности. 1. - Использование площадок для бесплатного хостинга мало эффективно, т.к. такие сайты существенно хуже индексируются, их надежность меньше (бесплатные хостинги рано или поздно переключаются на платный сервис) и, главное, на них ограничивают размещение Вашей рекламы. Использование нескольких зарегистрированных доменов - лучшее, но дорогостоящее решение. Весьма подходящим и недорогим решением может быть использование большого количества поддоменов (доменов третьего уровня) на зарегистрированом Вами домене второго уровня (например music.oflameron.ru и proxy.oflameron.ru для домена www.oflameron.ru) Такие web сайты, размещенные на Вашем основном домене можно с успехом регистрировать в каталогах как самостоятельные веб ресурсы. 2. - Однако, для этого сайты должны иметь существенно различное оформление (дизайн) и содержимое (контент). Чтобы создать заметно отличающееся оформление сайтов, Вы должны использовать специально отработанные, оптимизированные технологии "поточного производства" веб дизайна. Веб сайт совершенно не нужно делать очень красочным, "навороченным", перегруженным визуальными эффектами, скриптами и информерами. Если Вы зарабатываете на показе рекламы, то самое важное - это качественный и привлекательный контент (содержимое веб сайта). Ведь наибольшее влияние на индексирование в поисковых системах имеет текстовое содержание. 3. - Текстовое содержимое. При создании большого количества веб сайтов весьма эффективно использование бесплатного контента, например, качественных курсовых работ (обратите внимание на следующую надпись Если Вас не затруднит - выложите эти руководства на Ваши сайты для бесплатного скачивания на сайте freeproject.narod.ru Либо разделив большое бесплатное руководство на несколько разделов, оформив их как самостоятельные веб сайты. Например, "Приемы раскрутки WEB-сайтов". [База каталогов сайтов-TXT] [ZIP] [Добавить web сайт] [Бесплатные сайты] [Курсовая на VB] Воспользуемся этим онлайн учебником и рассмотрим подробнее п.2 Разработаем собственную оригинальную технологию "поточного производства" веб дизайна. Для разработки собственного дизайна сайта Вам понадобится две программы - векторный графический редактор 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 Разделим имидж на четыре вертикальных части: верхнюю, с верхними углами, узкую среднюю часть с разделительной линией, узкую среднюю часть и нижнюю, с нижними углами. |
|
|
|
<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>
Высота у всех элементов одинаковая, т.к. мы выделяли их из одного общего верхнего элемента |
|
Теперь добавим контент (содержимое) на веб страницу. В таблицу 3 добавим еще 3 строки. Для двух строк зададим выравнивание в обе стороны align=justify, а для четвертой - оставим выравнивание по центру. В нее поместим графический файл img/player.jpg
|