Шапка сайту (header)

На цьому занятті ми займемося шапкою сайту. Відразу хочу вас попередити, що я не ставлю перед собою мети красиво оформити сайт, створенням якого ми займаємося. Швидше навпаки: я вибираю яскраві кольори, великий шрифт і жирні лінії для того, щоб вам краще було все видно, тому його дизайн - це не приклад для наслідування!

Тепер пару слів про шапку і підвалі сайту. Найпростіше, створити для них пару графічних файлів за розміром і встановити їх в таблицю на потрібне місце, але, як показав мій досвід, - це марна трата місця на сайті. Справа в тому, що пошукові роботи текстів на картинках не читають і те, що ви там намалюєте, і напишіть їм по-барабану. Набагато ефективніше ті header-И і footer-И, в які ви можете вставити текст, банери, лічильники, посилання і т.д. Саме таку шапку і такий підвал я і пропоную зробити для нашого HTML-сайту.

Для початку, я пропоную поділити header на дві частини, а footer на три частини, для того, щоб мати можливість розмістити в них різну інформацію і створювати різні стилі. Втілити наше скромне бажання в життя дуже просто: в шапку сайту ми вставимо таблицю, що складається з одного рядка і двох стовпців, а в підвал відповідно таблицю з одного рядка і трьох стовпців. Як створювати таблицю в Adobe Dreamweaver , Докладно описано в уроці 3 цього розділу, тому повторювати не буду, а тільки підкажу - щоб вставити таблицю в header встановіть в нього покажчик і натисніть значок таблиці, ну і в footer-Е точно також.

Після того, як ви створили таблицю в header-Е, пересуньте границю стовпців вліво так, щоб лівий стовпець став в 30% від ширини таблиці, а правий відповідно в 70%. У «Коді» це буде виглядати приблизно так:

У ліву частину header-А ми пропишемо назву сайту, а в праву помістимо який-небудь банер. І так, встановлюйте покажчик в ліву частину таблиці header-А і прописуйте назва сайту:

Щоб помістити баннер в праву частину таблиці header-А, необхідно попередньо його виготовити (у мене це просто картинка 550х104px) і помістити в папку img нашого сайту. Потім зачепити цей графічний файл мишкою, перетягнути в праву частину таблиці і вирівняти його по правій стороні (у вікні «Властивості» в нижньому вікні програми знайти «Вирівняти» і вибрати з меню, що випадає «Вирівняти по правому краю»):

На сьогодні, наш сайт виглядає в браузері приблизно так:

На наступному занятті ми створимо стилі для шапки сайту. Я періодично буду публікувати файли нашого сайту так, щоб ви могли їх копіювати (як в уроці 7 ) І до кінця цього розділу у вас буде готовий шаблон простого сайту.