Добрый день
Все мы знаем , что уникальный шаблон хорошо воспринимается поисковиками .
Так вот, сегодня я хочу поговорить о том , как написать свой собственный шаблон с помощью программы
Adobe DreamweaverЭта программа платная, но если поискать в гугле то можно найти и бесплатную версию(не демо),
[spoiler=""]adobe dreamweaver cs6 + кряк[/spoiler]
Как только скачали и установили, думаю можно начинать
Перед тем как начать , создайте где нибудь папку для сайта ,туда будем сохранять наши файлы . И сразу создайте папку для картинок
В главном меню выберите
HTML[img]http://images.vfl.ru/ii/1366957517/ef72b0ab/2222979_m.png[/img]Перед вами появится исходный код документа.
Title - нужен для отображения названия сайта в браузере. Туда пишем название нашего будущего сайта . К примеру я сейчас буду создавать сайт на тематику туризм . И согласитесь, цены за клик в контекстных рекламах туристических тематик выше чем у тематик кино или спорт . Конечно с моей стороны нехорошо делать сайт исключительно для заработка, но я постараюсь сделать наполовину СДЛ. Сама статьи не пишу , буду только заказывать. Но тематика ТУРИЗМ слишком обширная, так что мой сайт будет о конкретной стране, то есть об
Италии. Вот что у меня получилось
[img]http://images.vfl.ru/ii/1366968598/4ccf646e/2223729_m.png[/img]Body - это тело сайта , ставим между ними курсор , нажимаем на "
Вставка", в нем на "
Таблицы" . Тут можно выбирать количество строк и столбцов .
[img]http://images.vfl.ru/ii/1366969021/56763626/2223765_m.png[/img]С помощью таблицы мы разделим наш сайт на разделы (шапка, меню, подвал, основа) . У меня каркас будет простым . Если сумеете сразу разобраться можете выбрать сложный путь . Вот как я разделила мой будущий сайт :
[img]http://images.vfl.ru/ii/1366969681/7f77eb38/2223842_m.png[/img]Сначала задала 2 столбца и 3 строки , а потом верхние 2 и нижние 2 ячейки объединила . Для этого зашла в "
Дизайн" . Выделила с помощью кнопка "
ctrl" 2 ячейки , и правой кнопки мыши "
таблицы" => "
объединить ячейки"
Вот что у меня получилось в разделе "
Код"
[img]http://images.vfl.ru/ii/1366972868/034c65fe/2224110_m.png[/img]width - ширина , поставил 1115 , шапка тоже будет такого размера
height - высота , 100% , на весь экран
border - пусть пока стоит 1, чтоб мы видели границы . Потом когда все закончите можно изменить его на 0
Хочу выделить одну из преимуществ программы, когда начинаешь писать какой нибудь тег выскакивает подсказка, и там можно сразу выбрать тот тег и вставить .
Один раз сохраните как
index.html . Мало ли что , свет выключат ошибку какую нибудь выдаст ... :)
Теперь давайте начнем наполнять сайт контентом
Сперва мы должны поставить шапку , у меня есть заранее подготовленная шапка
Для этого вставляем курсор в первую ячейку, далее "
вставка" и "
изображение" , выбираем там нашу шапку . И она автоматически вставится в код, ширину я изменяю на 1115px, а высоту оставляю как есть .
Но вот при увеличении масштаба страницы таблица уходит в левую часть и правая остается пустой. Нужно все выровнить по центру . Для этого выделяем всю таблицу (в коде), смотрим вниз и видим там "
выровнять" , выбираем "
по центру", вот и все . Смотрим скрин
[img]http://images.vfl.ru/ii/1366973544/945116b1/2224187_m.png[/img][img]http://images.vfl.ru/ii/1366973623/d606c23f/2224196_m.png[/img]Давайте сразу здесь сделаем нашу шапку кликабельной, выделяем текст, идем вниз и там есть строка "
ссылка" , туда пишем index.html
С шапкой закончили , можете что нибудь еще добавить , сфантазируйте
Теперь можно добавлять категории в блок Меню : "
вставка" - "
гиперссылка" . Изменяя параметры под себя вставляем несколько категорий . Например у меня ,
Города Италии - city.html ,
Италия обзор - italiya.html,
Итальянская кухня - italyanskaya-picca.html и т.д.
[img]http://images.vfl.ru/ii/1366975583/e66e841d/2224388_m.png[/img]Если нажать на кнопку "
свойства страницы" , снизу раздела "
дизайн", можно поменять параметры ссылок (свет, размер, отступы, шрифт и т.д.)
Основная часть: Заходим в дизайн , наводим курсор в блок "основная часть " и вставляем свой текст , код к нему пропишется автоматически . Тут так же, если зайти в "
свойства страницы" , можно отредактировать параметры
[img]http://images.vfl.ru/ii/1366977679/dedd5a01/2224613_m.png[/img]Теперь давайте создадим наши другие страницы
Заходим в "
дизайн", там в блоке "Основная часть" удаляем все, заполняем другой информацией . Например
Города Италии , пишу сюда все что связано с тематикой Города Италии, и сохраняю страницу как
city.html Италия обзор , заполняю и сохраняю как
italiya.htmlВ конце вот что у меня получилось
[img]http://images.vfl.ru/ii/1366978116/1299ba71/2224675_m.png[/img]Это естественно не мастеркласс. И для опытных дизайнеров, которых много на этом форуме, мой урок покажется смешным, но для новичка который и понятия не имеет в создании сайта, вполне сойдет .
Надеюсь мой урок послужит новичкам хорошим примером , и направит его делать более серьезные проекты
Если где то допустила ошибку не судите строго
Автор Марина Волохова :D