Створення сайту в програмі dreamweaver
Тепер можна переходити до створення першої сторінки сайту. Створити новий файл можна декількома способами.
По-перше, за допомогою допоміжного вікна Dreamweaver, з яким ми недавно познайомилися. Create New (Створити новий) | HTML призводить до створення нової порожньої сторінки.
Більш розширені можливості для створення нового документа дає команда меню File (Файл) | New (Новий).
Ця команда, також як і поєднання клавіш
У цьому ж вікні можна вибрати шаблон для сторінки. Але ми не шукаємо легких шляхів :). Тому давайте спробуємо створити сторінку «з нуля». Впевнена, так ви придбаєте набагато більше корисних навичок по роботі з програмою.
Отже, ви натиснули кнопку Create (Створити) і бачите перед собою абсолютно чисту сторінку. На цьому «полотні» ми зараз почнемо творити наш шедевр.
Почнемо з простого, з створення каркаса. Зручніше за все робити каркас за допомогою таблиці.
Зараз таблиці як засіб створення каркаса потроху застарівають, натомість їм приходить верстка за допомогою шарів. Але таблиці все ще залишаються простим і ефективним способом форматування сторінки. Для початку це - в самий раз.
Завжди корисно знати інструменти і функції, що прискорюють роботу. Тому якщо у вас відкрита панель Common (Загальні) (якщо ця панель прихована, її можна викликати за допомогою команди Window | Insert), у вас є можливість відкрити вікно створення нової таблиці одним клацанням миші.
Нову таблицю можна також створити за допомогою команди меню Insert (Вставка) | Table (Таблиця). Підходить поєднання клавіш
У першій області Table size (Розміри таблиці) можна задати:
- кількість рядків (rows) і колонок (columns)
- ширину таблиці (table width). Тут же можна вибрати одну з двох систем вимірювання цієї ширини - відсотки (percent) або пікселі (pixels)
- товщину кордонів (border thickness). За замовчуванням варто 1, але ми зараз робимо макет сторінки, тому краще, щоб сама таблиця не виділялася
- поля між вмістом комірки і її межами (cell padding) і інтервал між осередками (cell spacing). У прикладі я задала поля і інтервал між осередками 5.
У наступній групі Header (Заголовок) можна вибрати один з чотирьох варіантів завдання заголовка таблиці:
- None - немає заголовка
- Left - у вигляді першої колонки
- Top - у вигляді першого рядка
- Both - в об'єднаному вигляді (перша колонка і перший рядок)
Після завдання такого заголовка дані, введені в комірки, будуть автоматично вирівняні по центру і виділені напівжирним шрифтом.
У групі Accessibility можна задати заголовок, який буде відображатися над таблицею (Caption), а також один з п'яти варіантів його вирівнювання (Align caption). Останнє поле Summary. де можна вказати підвідний підсумки текст, не є на даний момент корисним, тому що поки жоден браузер цьому полі нема ніякого відображає. Приклад полеченной таблиці з заголовком показаний на малюнку нижче.
Однак, ми зараз створюємо макет, тому жоден з заголовком нам зараз не стане в нагоді. Саме тому в прикладі я залишила ці поля порожніми. Після того, як всі параметри вказані, натискаємо кнопку ОК і отримуємо на «чистому аркуші» наступну таблицю:
Тепер давайте об'єднаємо два верхніх стовпчика, щоб вони стали одним рядком, в яку ми помістимо заголовок.
Щоб об'єднати комірки, спочатку їх потрібно виділити. Робиться це просто. Підведіть мишку до рядка зліва - кордону осередків стануть червоними, а курсор перетвориться в стрілку:
Клацніть по ній. Тепер у виділених осередків кордону виділяться жирної чорною лінією:
Тепер клацніть по виділених клітинок правою кнопкою миші і в випадаючому меню виберіть пункт Table (Таблиця), а в меню - Merge cells (Об'єднати осередки). Те ж саме можна зробити, натиснувши клавіші
І ось результат:
Те ж саме потрібно зробити і з нижніми осередками, де буде знаходитися копірайт.
А тепер давайте подивимося на панель Properties (Властивості), розташовану внизу:
Якщо у вас ця панель відображається з іншими параметрами, попередньо виділіть таблицю (клацання правою кнопкою миші в будь-якому місці таблиці - в випадаючому меню - Table (Таблиця) | Select Table (Виділити таблицю).
За допомогою цієї панелі, як бачите, можна змінювати початкові установки таблиці - кількість рядків, колонок, ширину і так далі. Також можна встановити колір фону і кордонів, а також вибрати фоновий малюнок.
Якщо тепер ви встановите курсор в одну з комірок таблиці, панель Properties стане виглядати інакше:
Параметри самої комірки перенесені в нижню частину, у верхній же розміщена інформація про властивості тексту, до яких ми повернемося пізніше. Ширина даного осередку - 20%. У ній буде розташовуватися меню сайту.
Тепер потрібно вийшов «шедевр» (в усякому разі, його заготовку) зберегти, щоб в наступний раз, коли ви приступите до процесу творення, вам не довелося робити все заново. Робиться це за допомогою команди File (Файл) | Save as (Зберегти як). Відкриється діалогове вікно:
Чому саме index? Та просто тому що так завжди позначають головну сторінку сайту. А саме її ми зараз і робили. Якщо тепер, вийшовши з програми Dreamweaver, ви відкриєте збережений Вами документ, то побачите, що він автоматично зберігся як index.html.
Для швидкого збереження можна використовувати команду File (Файл) | Save (Зберегти) або спеціальну кнопку на панелі інструментів Standard (Стандартна):
Панель Standard можна викликати за допомогою команди Window (Вікно) | Insert (Вставка) або сполучення клавіш
Щоб відкрити збережений документ, можна спочатку відкрити саму програму. І потім викликати команду File (Файл) | Open recent (Відкрити останні):
Або File (Файл) | Open (Відкрити):
Документ можна відкрити також з тієї в папки, в якій він знаходиться. Для цього потрібно клацнути по ньому правою кнопкою миші і в меню вибрати Edit with Dreamweaver (Редагувати в Dreamweaver).