Створення web-сторінок (частина 3) - верстка в dreamweaver e - заборонені уроки photoshop
1. Створимо нову папку і скопіюємо в неї все картинки минулого уроку.
2. Запускаємо Macromedia Dreamweaver
3. Якщо ви запускаєте Macromedia Dreamweaver перший раз - то ви при запуску побачите таке ось вікно. Вибираємо - Designer.
4. Далі з'явиться ось таке вікно (а може і не з'явиться якщо ви або хтось його відключили раніше.) Інтерфейс продукту поки особливо не розглядаємо. Меню, панелі інструментів - все як всюди. Тому нехай вас не бентежить їх кількість - не лякайтеся, і взагалі не звертайте на них поки уваги. Ми ж в Dreamweaver. попрацювати прийшли.
5. Створюємо новий файл. Якщо ви побачили сторінку як на малюнку вгорі, клацніть на пунктк HTML в розділі Create New. Якщо сторінка відключена, теж не біда - виберіть у верхньому меню File - New. З'являється таке вікно як на картинці внизу. Вибираємо - HTML - ми ж робити сторінку будемо. Потім натискаємо кнопку Create. Тепер ЗБЕРЕЖЕМО нашу сторінку. І ім'я їй буде index.html Зробіть саме так. Потім це нам буде потрібно, щоб наша сторінка називалася саме так при загрузкеее на хостинг. Зберегти її потрібно туди, де лежать картинки, тобто і картинки і сторінка повинні знаходиться в одній папці.
6. Тепер встановимо основні властивості нашої сторінки. Вибираємо пункт меню Modify - Page Property (або тиснемо Ctrl + J). З'являється віконце Page Property (Властивості сторінки)
7. Тут ми будемо вибирати для нашої майбутньої сторінки тип і розміри шрифту, його колір, колір фону. Дивіться на картинку і встановлюйте параметри які вказані. Хоча можете і поекспериментувати - все знову легко можна буде змінити.
8. Тепер переходимо на вкладку Links (посилання) тут вибирайте тип шрифту, колір посилань, їх колір після відвідування, і їх стиль (підкреслені чи ні наприклад).
9. Це дуже важливе вікно. І не тому що в ній ми вводимо заголовок сторінки - ту рядок що буде відображатися в заголовку вікна браузера. Тут ми вибираємо кодування. Не та кодування - і замість українських символів кракозябри. Ми вибираємо Кирилицю! І натиснемо кнопку - Reload. На цьому з цим окношком і закінчимо.
10. А ось з цього місця і починається той самий табличний дизайн. Тому що ми будемо нарешті створювати таблицю! Але найголовніше, ви побачите, що робити то це ненабагато складніше, ніж в добре знайомому багатьом Worde, наприклад! У чому ми зараз і переконаємося. Отже, пункт меню Insert - Table або (Ctrl + Alt + T)
З'являється вікно Table (Таблиця) Ми створимо таблицю фіксованої ширини - 700 пікселів, що складається з 4 рядків (Row) і 1 шпальти (Columns) Все інше - по нулях, і що це таке поки пропустимо, щоб не втрачати загальний темп. Чи не інтерфейс Macromedia Dreamweaver вивчаємо - сторінку створюємо! Далі тиснемо - ОК
11. Тепер вирівняємо таблицю по центру. І ось тут доведеться трохи подивитися на пенелі. Дивимося в нижню частину екрану. Шукаємо там панель Properties, якщо такої не спостерігається - йдемо в верхнє меню, пункт Windows - Properties і вона з'явиться.
12. Вибираємо в списку Align (вирівнювання) пункт Center. Таблиця слухняно центрируется. Поки все йде за планом! Тепер змінимо колір її фону - нехай наша таблиця буде білою на загальному сірому тлі сторінки.
13. Починаємо вставляти картинки! Уже! Спочатку вставимо картинку в хедер сторінки. Клацаємо курсором в самому верхньому рядку таблиці. Потім верхнє меню, пункт Insert - Image або (Ctrl + Alt + I) З'являється вікно в якому вибираємо потрібне нам зображення. Вибираємо картинку зі слонами, тиснемо ОК.
14 Таким же чином вставимо футер. Різниця тільки в тому, що в цьому випадку встановлюємо курсор в саму нижню рядок таблиці. І ось, що повинно вийти у нас в кінцевому підсумку. Вийшло? Мої вітання! Не забувайте, до речі, по ходу роботи зберігати файл.
15. Переходимо в 2 рядок таблиці (відразу під хедером). Вставляємо таблицю, як це зробити ви вже знаєте. Забули? Дивіться пункт 10. Параметри таблиці вказані на зображенні.
17. Таблиця під наше меню сформована. Тепер вставляємо в осередку картинки. Цим ми вже займалися в пункті 14 - 15 прочитайте щоб освіжити в пам'яті цей процес. А вийти повинно у нас щось таке:
Ми стрімко наближаємося до фінішу! Залишилося тільки створити таблицю з трьох колонок в яку ми помістимо текст і в першому наближенні сторінка готова! Хоча звичайно це далеко не все, але головне - то що ми зробили дійсно вже схоже на справжню web - сторінку.
18. Вставляємо таблицю під контент. Клацаємо в рядку таблиці, нижче меню - вона у нас одна незаповненими залишилася. Уважно подивіться на малюнок, у параметрах таблиці ми використовуємо нову властивість. Збільшуємо ширину кордонів осередку. Навіщо? А якщо цього не зробити текст з рядом стоять стовпців - колонок буде впритул примикати один до одного - некрасиво, і ескізу не відповідає.
І ось ще - щоб текст виглядав добре, виконаємо вирівнювання по осередках. Клацайте в осередку, і на панелі внизу виберіть вирівнювання по лівому краю, і по верху. Ну ми таке зробимо в кожному осередку - для одноманітності.
20. Тепер вводимо текст.
Ну ось і все на сьогодні. Наша перша сторінка готова. Вона звичайно ще далеко не ідеальна, ну та й у нас це не останнє заняття.
До швидкого і удачі вам друзі!