урок восьмий

створюємо сайт

Підіб'ємо підсумки наших знань від минулих 8-ми занять.
Ми вміємо робити в HTML:

• Створювати сторінки;
• Набирати і форматувати текст;
• Ставити посилання на сторінки;
• Працювати з квітами фону і тексту;
• Будувати і оформляти таблиці;

Отже. Прийшов час створити щось більш складне, ніж ми робили до цього, але використовуючи отримані знання в попередніх уроках.

У цьому уроці курсу ми зробимо 2х сторінковий сайт. Наприклад про створення сайту.

Запускаємо Блокнот і пишемо наш мінімальний набір для створення сторінки.

Тепер напишемо між тегами назва нашої сторінки, наприклад ось так

Далі розмістимо теги

і . щоб весь вміст нашого сайту було розміщено по центру сторінки.
Якщо ви не забули, теги і треба розмістити між і . тобто ось так

Для створення каркаса сторінки ми будемо використовувати таблицю, але трохи більш хитру ніж ми проходили в HTML-уроці про таблиці. Нам потрібна таблиця, в якій в першому рядку буде 1 осередок, а в іншому рядку буде 2 осередки, тобто ось така нам потрібна таблиця:

Як бачите, в такий ось "хитрою" таблиці використовується лише одна пара тегів в першому рядку таблиці, а не два, як при побудові таблиці 2х2. Але зате з'явився параметр colspan = "2". Цей параметр як би говорить, якого розміру повинна бути комірка. В даному випадку осередок повинна бути шириною в 2 осередки.

Так. Тепер задамо розміри таблиці. Ширину таблиці зробимо 750 пікселів. З розрахунку що хтось із відвідувачів сайту може використовувати монітор здатністю 800х600 пікселів, і переглядати більш широкий сайт йому буде не комфортно.

Висоту таблиці зробимо 600 пікселів

Тобто код нашої сторінки тепер буде ось такий.

Щоб стало видно кордону частин сайту - "заллємо" область меню і область шапки кольором. Наприклад ось так:

Тут у нас буде шапка
Тут буде меню	Тут буде вміст сторінки

Сторінка повинна виглядати ТАК. Якщо у вас не так - шукайте помилку.

Можливо виникло питання. Чому назвали файл сторінки саме так?

Є правило. Головна сторінка сайту повинна називатися index.htm l, або index.htm. Назви інших файлів підбираються абсолютно довільно. Зрозуміло, тільки латинськими літерами (це я так, про всяк випадок уточнив, а то всяке буває.). Або index.php. якщо сторінка написана на мові PHP. Запам'ятайте це.

Тепер вставимо шапку нашого сайту.

Збережіть картинку шапки у себе на комп'ютері в той-же директорії де знаходитися файл сторінки під її "рідним" ім'ям stroymaster6.gif

(Тобто наведіть курсор мишки на картинку, натисніть праву кнопку мишки і виберіть "Зберегти малюнок як."). Вибираємо головну папку WWW і зберігаємо малюнок в папці images (дивись урок чотири). Чому саме так? Хорошим тоном в HTML вважається розташування графічних файлів в одній папці, щоб не вишукувати щоразу потрібний об'єкт. Зазвичай, таку папку-сховище для картинок називають "images".

Де брати такі шапки. Малювати самим. Про те як це робити буде розказано окремо.

Зазвичай, у всякому разі, традиційно, зображення на html-сторінці бувають 2-х видів: .gif і .jpg. Це не означає, що браузер не стане відображати формат .bmp або .tif який-небудь, але є певні традиції і не раджу їх порушувати - так, про всяк випадок.

Тепер вставляємо картинку шапки в наш сайт. Про те як вставити картинку на сайті ми розбирали ТУТ.

Тут у нас буде шапка
Тут буде меню	Тут буде вміст сторінки

Тепер встановимо точні розміри осередку таблиці, призначеної для шапки. Оскільки картинка шапки у нас має розмір 750х144, то і розмір осередку таблиці зробимо 750 х 144.

Тут буде меню	Тут буде вміст сторінки

Тепер наша сторінка буде виглядати ТАК.

Встановимо ширину меню рівній 200 пікселів, для цього додамо width = "200" до відповідного тег

Тут буде меню	Тут буде вміст сторінки

Задній план меню "заллємо" ось таким фоном, для цього збережіть цей фон з його "рідним" ім'ям sv12.gif в тугіше директорію де знаходиться файл сторінки. (Тобто наведіть курсор мишки на картинку, натисніть праву кнопку мишки і виберіть "Зберегти малюнок як."). Вибираємо головну папку WWW і зберігаємо малюнок в папці images (дивись урок чотири).

А тепер прописуємо потрібний код

Тут буде меню	Тут буде вміст сторінки

Для тих, хто ще не встиг розібратися, чим власне відрізняються формати gif та jpg (він же jpeg), побіжно згадаю, що gif має максимум 8-ми бітний формат кольору, а значить, містить палітру з 256 відтінків і менш, в той час , як jpg (24 біта) містить чітку палітру з 256 відтінків червоного, 256 відтінків зеленого і 256 відтінків синього. Таким чином, jpg більше підходить для фотографій і інших складних композицій, а gif - для простенької, немногоцветной графіки, а ще у gif є миле моєму серцю якість - в ньому можна ставити прозорий колір.

Тепер наша сторінка буде виглядати ТАК.

У вас можливо виникло питання, чому браузер не "відпрацьовує" ширину меню 200. Меню адже виглядає ширше ніж 200 пікселів. Так. Є такий глюк браузера, але все встане на свої місця якщо почати писати текст в основному розділі сторінки.

Щоб підтвердити це, додамо тексту на наш сайт.

= "Images / sv12.gif" width = "200"> Тут буде меню	Тут буде вміст сторінки

Сайт буде виглядати ось ТАК

Тепер все майже ОК. Майже бо на обличчя невеликі проблемки. Текст відображається рівно посередині (по вертикалі), а варто було б щоб текст був розташований вгорі осередків.

Для цього нам треба прописати ще один параметр в теги

меню і основного вмісту сторінки. Цей параметр ми проходили в уроці про таблиці - це параметр вирівнювання по вертикалі valign = "top". Значення top означає що вміст буде розташовуватися вгорі. Тепер наша сторінка буде виглядати ТАК. Далі робимо меню. Поки наш сайт буде 2х-сторінковий. Головна сторінка і сторінка посилань. Нехай пункти меню називаються Головна і Посилання. Для того щоб "зрушити" текст використовуємо тег Тепер треба зробити текст меню у вигляді посилань. Слово Головна залінкуем на сторінку index.htm l. а слово Посилання на сторінку ssilki.htm l. яку ми створимо трохи пізніше. Головна посилання Головна посилання Тепер наш сайт буде виглядати ТАК. Залишилося зробити другу сторінку сайту. Для того щоб спростити роботу зробимо так - збережемо нашу сторінку index.html під іншим ім'ям ssilki.html. а потім подредактіруем файл. Вибираємо в блокноті команду Файл-> Зберегти як. вибираємо ту-ж директорію де знаходиться файл index.html. пишемо ім'я сторінки під якою ми хочемо зберегти файл ssilki.html і тиснемо ОК. Тобто на комп'ютері у вас має бути 2 поки що однакових сторінки - index.htm l і ssilki.htm l. Тепер змінимо назву сторінки (між тегами ), І змінимо текст сторінки, наприклад ось ТАК Головна посилання На цій сторінці будуть розміщені посилання на сайти, в яких розміщені матеріали по веб програмуванню і веб дизайну. І збережемо. (Файл -> Зберегти) Друга сторінка сайту буде виглядати ТАК Ось ми і зробили простенький сайтик, який ви можете відредагувати і розмістити в інтернеті. Наступний заключний урок про розміщення сайту в інтернеті дивіться ТУТ. Схожі статті 40 Гранж уроків в фотошоп 9 Уроків стилю від чудової Одрі Хепберн Інтегрований урок (з бібліотека) по темі - що таке емблеми, навіщо вони потрібні людям