Для начала хочу сказать, что это будут несколько несложных и надеюсь, для всех понятных, уроков по созданию сайтов. Первый их которых – главная страница сайта, вернее ее создание. Если Вы думаете что в предыдущих уроках что-то было не так и я хочу это исправить, то вы глубоко ошибаетесь. Цель этих нескольких статей будет не в корректировке каких-то неточностей. А в чем, спросите Вы?
Во-первых в том, что я попытаюсь на примере создания простого сайта более глубоко показать сам процесс , то есть как создается страница сайта, и не только в визуальном режиме, а и в режиме html кода.
Во вторых, мы не будем создавать дизайн сайта в программе Photoshop, ну может только в конце вставим какую-то графику
В третьих, мы попытаемся создать универсальный шаблон веб-страницы, на основе которого может быть легко создана как главная страница сайта, так и внутренние страницы.
Интересна такая тематика? Ну, тогда начинаем! Итак, мы создаем простой сайт, и начнем с создания главной страницы сайта. Хотя в конечном результате, мы получим некий шаблон, из которого очень просто будет делать как главную, так и внутренние страницы сайта.
Основной инструмент – всем знакомая программа создания сайтов Dreamweaver. Структура веб-страницы стандартная – шапка(header), контент (content), две колонки для меню (sidebarl и sidebarr) и подвал (futer). И все это мы ставим во внешний контейнер, как это показано в статье Принципы создания страницы сайта в Dreamweaver.
Запускаем редактор Dreamweaver. Надеюсь для Вас уже не секрет, как настраивается эта программа. Ну а если не знаете или забыли то эту проблему легко решить, если посетить страницу Настройка редактора Dreamweaver. Будем считать, что редактор настроен и мы переходим в режим создания html страницы. Напоминаю, что это будет главная страница сайта.
Первое, что мы создадим – это внешний контейнер. Для этого в главном меню выберем пункт Вставка — Объекты макета и щелкнем Тег Div:
В появившемся окошке Вставить тег Div ничего не меняем, а просто щелкнем ОК. Вот и есть первый контейнер. Теперь внимание! Мы не будем пока вставлять в него другие контейнеры, а сразу зададим для него «правили поведения», точнее создадим для него набор стилей CSS и таблицу, в которой эти стили будут находиться. Для этого в правом доке редактора активируем меню Стили CSS, если оно не активно. Как видите, в окошке стилей надпись – Стили не определены. Будем определять. Самый простой метод – щелкнуть правой клавишей мышки на окошке и в выпадающем меню выбрать пункт Создать:
Как создавать стили CSS мы уже знаем по статье Создаем страницу сайта в Dreamweaver. Стили CSS. Мы сейчас конкретно создаем стилевой класс для внешнего контейнера, под названием cont и одновременно создаем таблицу стилей, в которой будут храниться стиль cont и все последующие, которые мы создадим:
Щелкнем ОК и в окошке Сохранить файл таблицы стилей как задаем имя файла таблицы (я назвал ее простенько – stil), если нужно папку где этот файл будет храниться и жмем Сохранить. В появившемся окошке Определение правила CSS для .cont в stil.css можно непосредственно задать практически любые параметры для создаваемого СSS стиля. Мы же зададим размеры внешнего контейнера и его положение в окне браузера через категорию Рамка:
Высоту задаем временно, просто чтобы видеть сам контейнер, потом мы это значение уберем. Ну и жмем ОК! Привязываем стиль cont к внешнему контейнеру. Как это делается? Посмотрите в статье Стилевой класс CSS для внешнего контейнера. Это очень просто. А вот и результат, как говориться, на лицо! В окне редактора видим прямоугольник внешнего контейнера. Теперь будет очень просто затолкать в него контейнеры остальных составных частей веб-страницы, из которых будет создана главная страница сайта. И первый у нас на очереди это, естественно, шапка(header).
Внутрь внешнего контейнера вставляем еще один контейнер. Точно так же, как и в случае с внешним контейнером, создаем стилевой класс под названием header, определяем его в той же таблице стилей stil и в категории Рамка задаем ширину хедера 890 пикселей, высоту пусть 150 и в окошке Плавающий – левая. Жмем ОК – стиль готов! Привяжем его к новому контейнеру. О! Внутри контейнера cont ясно виден контейнер header.
Ставим курсор за ним и вставляем контейнер левого сайдбара. Создаем стиль с названием sidebarl, в котором ширину сайдбару зададим в 150 пикселей и в окошке Плавающий – левая. Привязываем его к контейнеру левого сайдбара.
О размерах. Естественно, что размеры составных частей из которых состоит страница сайта, Вы можете ставить свои, какие Вам нужны. Тем боле, что редактируя стили все это очень легко можно изменить в любой момент верстки, что Вам, скорее всего и понадобиться при доводке главной страницы сайта, да и остальных, до нужных именно Вам кондиций. Точно так же вы вправе сами выбрать количество сайдбаров и их расположение.
А мы тем временем ставим курсор за контейнером левого сайдбара и вставляем контейнер контента. Создаем стилевой класс для него, с названием content, в котором задаем ширину контейнера 585 пикселей, в окошке Плавающий – левая. Ну и привязываем его к контейнеру контента.
На очереди правый сайдбар. Ставим курсор за контейнером content и вставляем контейнер правого сайдбара. Создаем стилевой класс для него, с названием sidebarr, в котором задаем ширину контейнера 150 пикселей, в окошке Плавающий – левая. И привязываем его к контейнеру правого сайдбара.
И вот, наконец, последний контейнер футера. Ставим курсор за контейнером sidebarr и вставляем контейнер футера. Создаем стилевой класс для него, с названием futer, в котором задаем ширину контейнера 890 пикселей, высоту 50, в окошке Плавающий – левая. И привязываем его к контейнеру футера.
Это и будет основа, на которой впоследствии, будет создана главная страница сайта. Если Вы сделали правильно, то в окне редактора у Вас будет вот такая конструкция:
Если переключить редактор в режим Код, то между тегами <body> и </body> вы должны видеть вот такой код:
И вот на этом мы завершаем первый этап и у нас почти создана главная страница сайта. Как видите у нас готов каркас веб-страницы. Увидеть этот каркас мы пока что можем только в редакторе Dreamweaver. Создавать видимый каркас веб-страницы, я имею в виду видимый в каком-либо браузере, мы будем в следующей статье - Продолжаем создавать веб-страницу