Dreamweaver, меню, редагування, css

Дуже складно пояснювати гіпотетично, як редагувати меню!

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

Вибрали один з шаблонів і крок за кроком переробляємо його, для того, щоб його можна було використовувати!

Як змінити меню через CSS в програмі Dreamweaver?

Ми багато зробили кроків до нашого нового сайту.

І перша сторінка вже готова і можна її використовувати. Але якщо чесно, то вона мені не зовсім подобається і можна в ній ще багато виправити!

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

Відкриваємо перший наш зроблений шаблон. Подивимося, що тут мені не подобається.

Як виправити меню в шаблоні в програмі Dreamweaver.

Нам доведеться покопатися в коді! Нам потрібно змінити ширину меню, тому що воно зовсім маленьке. А у мене немає таких коротких слів, як в цьому меню. Я зазвичай роблю меню шириною 190 - 200 пікселів!

Так само бачимо, що тут набивка 92 пікселя - нам є куди рухатися вліво, щоб не порушувати цілісності нашої шаблону! Приступимо!

Видалимо «Solutions» - ця деталь взагалі нам не потрібна!

Dreamweaver, меню, редагування, css

І ще видалимо нижнє ліве меню-воно мені просто не подобається!

Нас цікавить стиль верхнього меню - це «leftmenu» - показана стрілкою.

Dreamweaver, меню, редагування, css

Редагування стилю css меню в програмі Dreamweaver.

Я продублював основний шаблон index.dwt і css стиль і назвав його style1.css, інакше попередні всі сторінки, які прикручені до стилю style.css зміняться так само, як і цей головний шаблон.

Відкриваємо наш стиль в програмі Dreamweaver і шаблон index1.dwt.

У відкритому файлі style1.css натискаємо поєднання клавіш ctrl + А і вставляємо шукати leftmenu

У css стилі, ось ці 6 рядків, відносяться до нашого стилю «leftmenu».

Dreamweaver, меню, редагування, css

Змінимо 23,24,25 рядок пікселя поставимо значення 190 - це ширина нашого меню і міжрядкового прикраси ...

Ось, що у нас вийшло. Меню вилізло направо ...

Dreamweaver, меню, редагування, css

Це меню потрібно тиснути вліво, щоб не зламати всю сторінку, можна зменшити набивання - padding, але спочатку змінимо задній фон.

Змінимо задній фон в меню Dreamweaver.

Тепер змінимо картинку зображення фону - ми будемо рухати меню вліво, тому картинка під меню повинна бути білою. Йдемо в папку images шукаємо картинку з ім'ям header.jpg

Очищаємо ліву частину картинки в програмі Paint. І видалимо частина з розміром в 226, розмір знайде дослідним шляхом.

Dreamweaver, меню, редагування, css

Набивка і розмір таблиці меню.

Виділяємо цікаву для нас деталь, праворуч є кнопка CSS стилі - відкриваємо. У списку шукаємо віконце.

Далі нас цікавить набивка - padding і ширина нашого блоку. Наші блок з меню укладений в інший блок, ширина якого 686. Змінимо і нашу ширину до цього значення!

Width змінимо на 778, а лівий padding 92px зменшимо до 12. (це все той простір, який знаходиться зліва від слова -головна).

Dreamweaver, меню, редагування, css

Дивимося, що у нас вийшло: Дуже навіть непогано!

Dreamweaver, меню, редагування, css

Наш наступний крок - змінити логотоіп, який знаходиться нагорі.

Ми витрачаємо час + гроші, щоб у вас була безкоштовна + доступна + правдива інформація.

Схожі статті