У порівнянні з попередніми уроками - цей урок як легка прогулянка в порівнянні з тюжелим подорожжю по горах.
Отже міняємо логотип, відкриваємо файл main.tpl. Де в ньому знаходяться модулі ми вже знаємо з попереднього
уроку, а де ж логотип? дивимося в самий початок коду - це таблиця відразу після тега body, ось вона:
У цій же таблиці знаходяться і кнопки навігації - їх ми видалимо, трохи пізніше ми зробимо своє меню навігації.
Отже ваше завдання - підготувати свій логотип - оформлення верхньої частини сайту.
Видаляємо оригінальний код і замість нього вставляємо цей:
Далі в файлі css / style.css внизу вставляємо такий код:
#masthead position: absolute;
top: 0px;
left: 2%;
right: 2%;
width: 95.6%;
>
#pageNav float: left;
width: 178px;
padding: 0px;
background-color: # F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana, Geneva, Arial, Helvetica,
>
#globalNav position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url ( "../ pics / glbnav_background.gif");
background-repeat: repeat-x;
>
#globalNav img margin-bottom: -4px;
>
#gnl position: absolute;
top: 0px;
left: 0px;
>
#gnr position: absolute;
top: 0px;
right: 0px;
>
#globalLink position: absolute;
top: 9px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
>
a.glink, a.glink: visited font-size: 10px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: # 000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid # 8FB8BC;
>
a.glink: hover background-image: url ( "../ pics / glblnav_selected.gif");
text-decoration: none;
Цей код - це оформлення всієї верхівки сайту, логотип, посилання, розташування і т.д.
Далі в файлі css / style.css знаходимо
html, body height: 100%;
margin: 0px;
padding: 0px;
background: #FFFFFF;
font-size: 11px;
font-family: tahoma;
>
html, body height: 100%;
margin: 0px;
padding: 0px;
background: # 333333;
font-size: 11px;
background: #cccccc url ( "../ pics / bg_grad.jpg") fixed;
font-family: tahoma;
>
У файлі main.tpl знаходимо рядок:
У файл style.css додаємо такі рядки:
tt background: transparent;
background: #cccccc url ( "../ pics / bg_grad.jpg") fixed;
>
наша сторінка виглядає все краще і краще, продовжуємо правити її
У файл style.css знаходимо і видаляємо такі рядки:
table td padding: 0px;
>
У файлі main.tpl знаходимо рядок:
|
Скріншот буде трохи далі, коли офрмім всі потрібні частини шаблону. вони всі дрібні і уместтся в один скріншот. 2. Вставляємо меню навігації - main.tpl мова йде не про меню зі списком розділів, про нього ми говорили ще на першому уроці, мова йде про меню самого сайту, Меню ми вже додали, дивіться КОД 2, 1-я частина коду це логотип, друга - меню навігації, класи в CSS ми вже прописали, клас globalLink, glink відповідають за меню і його офрмление + розташування щодо елементів сторінки. ось код меню окремо Тут зовсім просто, відкриваємо main.tpl, знаходимо там рядки Замість цього блоку можна псотавіть все що завгодно, хочете можете просто видалити, хоті міняйте на свою таблицю. беремо нашу найпростішу таблицю з info.tpl і редагуємо, прибираючи зайве верб ставлю заголовок і тег виведення банера, ось що вийшло 4. Міняємо форму пошуку У файлі main.tpl знаходимо код форми пошуку: Видаляємо і вставляємо свій: Форма пошуку готова.  5. Міняємо авторські права - ті, що стоять внизу сторінки -main.tpl УВАГА! Повністю прибрати авторські права на движок може тільки той хто його купив, все тко користуються безкоштовною версією авторські права повинні залишити. Відкриваємо main.tpl, в самому низу знаходимо код: Ось код самого блоку, знаходиться він в самому низу сторінки main.tpl Тут же дублюється меню навігації. Видаляємо весь цей код. шукаємо (main.tpl) тег, відразу після нього вставляємо: Ну і наостанок залишилися ще два тега в сторінці main.tpl які я не описав, хоча це є і в мануалі - виводить службову інформацію движка, нагадування про реєстрацію наприклад або повідомлення про те, що - Висновок контенту на сайті, новин, зворотного зв'язку реєстрації та іншого, основна колонка  На це у мене все. Успіхів! Схожі статті |