Серед програм для створення сайту найвідомішим є редактор Dreamweaver, створений компанією Macromedia і продовжує розробляти і вдосконалюватися в даний час компанією Adobe.
Dreamweaver - потужне і в той же час зручний засіб для розробки сайтів. У цій статті я розгляну, як створити простий сайт з трьох сторінок за допомогою цієї програми.
Як уже згадувалося в статті " Як створити свій власний сайт ", при створенні складного, добре оформленого сайту зазвичай спочатку цілком малюють дизайн сторінки в графічному редакторі, наприклад, Фотошопі, а потім отримана картинка розрізає на шматочки і верстається за допомогою html-редактора, такого , як Dreamweaver. Але якщо сайт простий, графічні елементи можна зробити окремо і відразу починати його створення в html-редакторі. Так і вчинимо. Нехай сайт, який ми вирішили зробити, буде розповідати про Антарктиду. Зробимо для нього просту шапку і виберемо фон:
Створимо на комп'ютері папку "antarktida" і збережемо туди ці малюнки.
Запустимо Dreamweaver CS5. Тисніть на цифри внизу, щоб послідовно подивитися виконувані дії.
Для початку нам потрібно створити новий сайт. Вибираємо в меню "Веб-сайт" -> "Новий сайт".
Придумуємо назву для сайту і вибираємо папку, в якій зберігатимуться сторінки, картинки та інші файли, пов'язані з сайту.
Зліва список всіх цих файлів можна бачити. Поки в папці всього 2 файла - 2 картинки, які я зберіг у неї раніше.
Тепер потрібно створити першу сторінку сайту. Створимо звичайну порожню html-сторінку.
Збережемо сторінку. Оскільки ця сторінка буде головною, дамо файлу назву index. Сторінка буде збережена під ім'ям "index.html".
Натиснемо на кнопку "Властивості сторінки" внизу, щоб задати фоновий малюнок.
Виберемо картинку, яка містить фонове зображення (01.jpg).
Важливий пункт у властивостях сторінки - це її кодування. Dreamweaver CS5 задав для нової сторінки кодування utf-8, і я не будуть її міняти, проте в деяких більш старих версіях Dreamweaver сторінка за замовчуванням створюється із західноєвропейською кодуванням, що не містить російських символів. У цьому випадку кодування сторінки потрібно поміняти, вибравши, наприклад, "Кирилиця (Windows)" або "Юнікод (UTF-8)".
Тепер приступимо до розташування елементів - тексту і картинок на сторінці. Такий процес називається версткою. Верстка буває двох видів - таблична та блокова. Блокова верстка (або, як її ще називають, верстка на "дівах") вважається більш просунутим способом, проте вона більш складна в освоєнні.
Виберемо наступне розташування основних блоків на сторінці:
розташування блоко
Будемо використовувати при створенні сайту простішу табличну верстку. Тисніть на цифри внизу, щоб послідовно подивитися виконувані дії.
Різні елементи на сторінку можна додавати, вибираючи їх за допомогою пункту меню "Вставка".
Більш зручним варіантом може бути використання панелі інструментів для вставки елементів на сторінку. Якщо цієї панелі ви не бачите, включити її можна, поставивши галочку, як показано на малюнку.
Ось так виглядає ця панель інструментів.
Для початку нам потрібно вставити таблицю. Вкажемо для таблиці такі параметри, як ви бачите на малюнку.
Щоб таблиці не притискалася до лівого краю, вирівняємо її по центру.
На синьому фоні текст буде читатися погано. Задамо для елементів таблиці білий фон. Для початку за допомогою миші виділимо всі осередки.
Внизу виберемо білий колір для фону.
Для шапки та підвалу нам потрібно всього по одній клітинці. Об'єднаймо дві верхніх і дві нижніх осередки. Для початку виділимо дві верхніх осередку за допомогою миші.
Натиснемо внизу на кнопку, яка об'єднує осередки, як зазначено на малюнку.
Аналогічно об'єднаємо два нижніх осередки. Ось що вийшло.
Для меню потрібно менше місця, ніж для основного тексту. Помістимо курсор в ліву середню клітинку і задамо ширину для неї 20%. Тепер вона буде займати 20% ширини таблиці, а правій колонці залишиться 80%.
Ось що вийшло.
Почнемо заповнювати комірки. Вставимо картинку, приготовлену для шапки. Тиснемо кнопку для вставки зображень.
Вибираємо потрібну картинку.
Корисно задати для картинки пояснювальний текст. Якщо раптом у когось будуть відключені картинки в браузері, він побачить цей текст замість картинки, а пошукові системи будуть показувати по цьому тексту картинки з вашого сайту в пошуку по картинках.
Тепер зробимо меню. Нехай на сайті буде три сторінки - головна, про клімат Антарктиди і про тваринний світ Антарктиди. Напишемо заголовки для цих сторінок і виділимо мишкою.
Натиснемо на кнопочку внизу, щоб зробити меню у вигляді маркованого списку (1). Також виберемо вирівнювання по верхньому краю, щоб меню завжди було у верхній частині осередку (2).
Тепер заголовки пунктів меню потрібно зробити посиланнями. Виділимо текст "Головна".
Внизу в поле "Посилання" впишемо назва файлу головної сторінки index.html. Тепер пункт меню "Головна" буде вказувати на головну сторінку index.html
Придумаємо назви для файлів двох інших сторінок, наприклад, klimat.html і zhivotnyj-mir.html і аналогічним чином зробимо відповідні пункти меню посиланнями.
Вкажемо назву для головної сторінки у відповідному полі. Нехай буде "Сайт про Антарктиду".
Додамо в клітинку для основного тексту загальну інформацію про Антарктиду.
Нарешті додамо текст у футер. Головна сторінка готова.
Зробимо дві інші сторінки. Спочатку зберігаємо головну сторінку.
Потім вибираємо "Зберегти як ...", щоб на основі головної зробити наступну сторінку.
Зберігаємо сторінку під іменем "klimat.html".
Міняємо заголовок і текст, зберігаємо, потім таким же чином створюємо ще одну сторінку - про тваринний світ Антарктиди. На цьому створення сайту завершено.
Dreamweaver - потужне і в той же час зручний засіб для розробки сайтів. У цій статті я розгляну, як створити простий сайт з трьох сторінок за допомогою цієї програми.
Як уже згадувалося в статті " Як створити свій власний сайт ", при створенні складного, добре оформленого сайту зазвичай спочатку цілком малюють дизайн сторінки в графічному редакторі, наприклад, Фотошопі, а потім отримана картинка розрізає на шматочки і верстається за допомогою html-редактора, такого , як Dreamweaver. Але якщо сайт простий, графічні елементи можна зробити окремо і відразу починати його створення в html-редакторі. Так і вчинимо. Нехай сайт, який ми вирішили зробити, буде розповідати про Антарктиду. Зробимо для нього просту шапку і виберемо фон:
Створимо на комп'ютері папку "antarktida" і збережемо туди ці малюнки.
Запустимо Dreamweaver CS5. Тисніть на цифри внизу, щоб послідовно подивитися виконувані дії.
Для початку нам потрібно створити новий сайт. Вибираємо в меню "Веб-сайт" -> "Новий сайт".
Придумуємо назву для сайту і вибираємо папку, в якій зберігатимуться сторінки, картинки та інші файли, пов'язані з сайту.
Зліва список всіх цих файлів можна бачити. Поки в папці всього 2 файла - 2 картинки, які я зберіг у неї раніше.
Тепер потрібно створити першу сторінку сайту. Створимо звичайну порожню html-сторінку.
Збережемо сторінку. Оскільки ця сторінка буде головною, дамо файлу назву index. Сторінка буде збережена під ім'ям "index.html".
Натиснемо на кнопку "Властивості сторінки" внизу, щоб задати фоновий малюнок.
Виберемо картинку, яка містить фонове зображення (01.jpg).
Важливий пункт у властивостях сторінки - це її кодування. Dreamweaver CS5 задав для нової сторінки кодування utf-8, і я не будуть її міняти, проте в деяких більш старих версіях Dreamweaver сторінка за замовчуванням створюється із західноєвропейською кодуванням, що не містить російських символів. У цьому випадку кодування сторінки потрібно поміняти, вибравши, наприклад, "Кирилиця (Windows)" або "Юнікод (UTF-8)".
Тепер приступимо до розташування елементів - тексту і картинок на сторінці. Такий процес називається версткою. Верстка буває двох видів - таблична та блокова. Блокова верстка (або, як її ще називають, верстка на "дівах") вважається більш просунутим способом, проте вона більш складна в освоєнні.
Виберемо наступне розташування основних блоків на сторінці:
розташування блоко
Будемо використовувати при створенні сайту простішу табличну верстку. Тисніть на цифри внизу, щоб послідовно подивитися виконувані дії.
Різні елементи на сторінку можна додавати, вибираючи їх за допомогою пункту меню "Вставка".
Більш зручним варіантом може бути використання панелі інструментів для вставки елементів на сторінку. Якщо цієї панелі ви не бачите, включити її можна, поставивши галочку, як показано на малюнку.
Ось так виглядає ця панель інструментів.
Для початку нам потрібно вставити таблицю. Вкажемо для таблиці такі параметри, як ви бачите на малюнку.
Щоб таблиці не притискалася до лівого краю, вирівняємо її по центру.
На синьому фоні текст буде читатися погано. Задамо для елементів таблиці білий фон. Для початку за допомогою миші виділимо всі осередки.
Внизу виберемо білий колір для фону.
Для шапки та підвалу нам потрібно всього по одній клітинці. Об'єднаймо дві верхніх і дві нижніх осередки. Для початку виділимо дві верхніх осередку за допомогою миші.
Натиснемо внизу на кнопку, яка об'єднує осередки, як зазначено на малюнку.
Аналогічно об'єднаємо два нижніх осередки. Ось що вийшло.
Для меню потрібно менше місця, ніж для основного тексту. Помістимо курсор в ліву середню клітинку і задамо ширину для неї 20%. Тепер вона буде займати 20% ширини таблиці, а правій колонці залишиться 80%.
Ось що вийшло.
Почнемо заповнювати комірки. Вставимо картинку, приготовлену для шапки. Тиснемо кнопку для вставки зображень.
Вибираємо потрібну картинку.
Корисно задати для картинки пояснювальний текст. Якщо раптом у когось будуть відключені картинки в браузері, він побачить цей текст замість картинки, а пошукові системи будуть показувати по цьому тексту картинки з вашого сайту в пошуку по картинках.
Тепер зробимо меню. Нехай на сайті буде три сторінки - головна, про клімат Антарктиди і про тваринний світ Антарктиди. Напишемо заголовки для цих сторінок і виділимо мишкою.
Натиснемо на кнопочку внизу, щоб зробити меню у вигляді маркованого списку (1). Також виберемо вирівнювання по верхньому краю, щоб меню завжди було у верхній частині осередку (2).
Тепер заголовки пунктів меню потрібно зробити посиланнями. Виділимо текст "Головна".
Внизу в поле "Посилання" впишемо назва файлу головної сторінки index.html. Тепер пункт меню "Головна" буде вказувати на головну сторінку index.html
Придумаємо назви для файлів двох інших сторінок, наприклад, klimat.html і zhivotnyj-mir.html і аналогічним чином зробимо відповідні пункти меню посиланнями.
Вкажемо назву для головної сторінки у відповідному полі. Нехай буде "Сайт про Антарктиду".
Додамо в клітинку для основного тексту загальну інформацію про Антарктиду.
Нарешті додамо текст у футер. Головна сторінка готова.
Зробимо дві інші сторінки. Спочатку зберігаємо головну сторінку.
Потім вибираємо "Зберегти як ...", щоб на основі головної зробити наступну сторінку.
Зберігаємо сторінку під іменем "klimat.html".
Міняємо заголовок і текст, зберігаємо, потім таким же чином створюємо ще одну сторінку - про тваринний світ Антарктиди. На цьому створення сайту завершено.
No comments:
Post a Comment