Суббота, 18 Февраль 2012 20:56

Создаем свой шаблон 3. Joomla 1.5

Автор
Оцените материал
(0 голосов)

   Стили для header, и так посмотрим в каком теге, у нас отображается header, он у нас отображается в теге div, поэтому именно для этого индикатора и для этого блока div нам необходимо, написать стиль. И так я пишу div, потом ставлю знак идентификатора, и пишу header, открываем стиль и сейчас нам необходимо, с вами прописать стили, которые у нас с вами будет определять данный header. Перед тем как вы уже будете создавать сайт, нарисовать в программе фотошоп, какой либо header который будет подходить для вашего сайта, разработать header. Я вот, например, разработал изображение с header и сейчас я его вставлю, и так я пишу background и url указываю ссылку, на данный файл, то есть это у нас папка newtemplate, папка images и здесь у меня есть изображения, которые называются header.png. Отлично изображение вставилось, и так же для примера можно задать я взял простое изображение ничего усложнять не стал, это простое изображение, и мы его вводим в верхушке сайта.

   Теперь необходимо установить высоту, высота у header будет такая же, как у изображения и она у нас равна 199px, нажимаем обновить и видим, что у нас добавился header в верхнюю часть сайта. Ну, в принципе с header это все, то есть в данном примере я рассмотрел вот такой простой header, который  у нас будет просто выводить изображение. Далее давайте посмотрим, как у нас выводятся стили навигации, смотрим у нас здесь есть навигатор, как можно вписать вот эти стрелочки они у нас стандартные. Сейчас я вам покажу, как можно поменять эти стрелочки. Они  у нас будут в стиле, как будут выглядеть по умолчанию, в директории вашего сайта то есть где расположены все файлы Joomla, в папке images, открыв эту папку можно увидеть папку M_images.

   В этой папке располагаются все изображения, которые предустановлены в Joomla в частности вот эта стрелочка arrow вот эту впишу, а эту просто переименую,  и если сейчас мы обновим ваш сайт, у нас все выглядит по умолчанию. То есть по умолчанию вот такая стрелочка, если вы хотите поменять эту стрелочку, на какую ни будь свою, создаете в фотошопе свое изображение, и вот сюда его просто вставляете, как я это сейчас сделал, просто эту пере сохранил.  Вместо вот этой стрелочки я подставил эту стрелочку arrow.png, вот таким очень простым способом меняется вот эта стрелочка. Соответственно вы подбираете под свой дизайн, создаете такую же стрелочку и вставляете ее. Идем далее аналогично создаю новый раздел, который у нас будет описывать стили для навигатора, посмотрим какие нюансы  у нас могут быть здесь и уже сейчас я покажу вам как смотреть и узнать какой именно стиль нам создать или отредактировать для того чтобы у нас менялся шрифт.

   Как видите это еще ссылки, как нам это поменять, а менять их очень просто открываете страницу и у нас здесь есть три элемента (главная, компьютеры, интернет) и наша задача сейчас поменять и прописать стиль этих элементов. Для этого переходим в вид, нажимаем исходный код страницы, показать исходный код страницы, перематываем вниз, и видим код  ячейка <td class=”breadcrumbs”>, потом дальше идет <span class=”breadcrumbs pathway”>, и идут ссылки (главная, компьютеры и интернет). И первое что мы с вами опишем это вот эти ссылки, то есть нам необходимо создать стиль для a.pathway стиль, который будет описывать вот эти ссылки. Главная и компьютеры и так создаем новый стиль a.pathway, перед тем как вы будете создавать эти стили, то есть если вы уже создаете свой сайт, а если вы это делаете просто, как пример то вы можете задавать примерно такие же, хотя можете  задавать другие шрифты и размеры. А если вы делаете на данный момент свой сайт, тогда выбирайте для себя наиболее оптимальные шрифты и устанавливайте  непосредственно подходящие шрифты.

   И так я устанавливают шрифт font-family:, и вот для себя как бы определяйте, какие шрифты, вы будете использовать. Допустим, я сейчас использую такой шрифт Palatino Linotype, вот это семейство шрифтов я поставил, далее для навигатора я установлю text-decoration, поставлю отсутствовать, и устанавливаю какой ни будь цвет, который  у нас будет подходить. К примеру, вот в таких светло синих тонах будет выглядеть сайт, сохраняем данный стиль и переходим на наш сайт. Нажимаем F5 и видим, что для вот этих двух ссылок  у нас применился стиль, так же сейчас сразу здесь же копируем стиль, создаем для данных ссылку псевдо класс hover, который у нас будет определять, как будет выглядеть ссылка при наведении на нее мышкой. В частности я сейчас поставлю text-decoration:underline и поставлю, к примеру, цвет какой ни будь более темный, чтобы при наведении мышью на наш стиль пользователь будет понимать, что это прямые ссылки, что можно на нее нажать и перейти в другой раздел. 

   И последний стиль, который мы с вами создадим это необходимо прописать вот это слово, которое у нас обозначает и позиционирует текущий выбранный раздел, то есть он у нас выглядит не в виде ссылки, а простым текстом. Как нам его прописать, давайте перейдем в исходный код, и здесь нам нужно посмотреть слово «Интернет» для этого стиля можно использовать вот эту ячейку td, по сути, данный текст он находится просто в ячейке <td class=”breadcrumbs”>. То есть именно для этой ячейки можно задать текст и у нас поменяется стиль вот того шрифта, давайте пока это сделаем то есть это у нас идет последовательность стилей для навигатора. Как видите, мы здесь создаем три стиля, создаем td.breadcrumbs, создали описание, так же создали font-family:Palatino Linotype. Продолжение на следующем видео уроке.

Прочитано 933 раз Последнее изменение Среда, 07 Март 2012 16:55
Авторизуйтесь, чтобы получить возможность оставлять комментарии