Махимка

Махимка

 

Приготовление щавеля холодника


   Необходимые ингредиенты:

  Щавель

  Зеленый лук

  Укроп

  Яйца

  Сметана

  Соль

   Способ приготовления:

 Щавель нужно перебрать, помыть и по желанию нарезать. Уложить щавель в кипящую воду проварить примерно 2 минуты, затем отвар охладить. Такой щавель можно хранить в холодильнике несколько дней.

   Заправка холодника:

В готовый щавель мелко нарезать зеленый лук, укроп, сваренные в крутую яйца. Заправить сметаной, посолить и хорошо размешать. Подавать можно с отварным холодным картофелем.

   Приятного аппетита!

 

Приготовление «Ботвиньи» борщ с ботвой

  

Ингредиенты:

  Мясо

  Свекла

  Ботва со свеклы

  Картофель

  Перец горошком, лавровый лист

  По желанию щавель

  Сметана

  Способ приготовления:

От свеклы отрезать ботву и нарезать ее, свеклу очистить и нарезать соломкой. Варим мясной бульон, я его варю на говядине. Добавляем нарезанный кубиками картофель, свеклу, затем посолить и варить 30 – 40 минут. Можно картофель сварить целым, затем его достать из кастрюли, сделать из него пюре и добавить обратно в борщ. Затем добавляем ботву и варим до готовности. За 10 минут до конца варки можно добавить немного щавеля для кислоты. Лавровый лист, перец горшком. Борщ готов. Дать борщу настояться подавать со сметаной.

   Приятного аппетита!

 

Приготовление домашнего борща


   Необходимые ингредиенты:

  Мясо

  Свекла

  Картофель

  Капуста

  Сушеные грибы

  Морковь, лук, помидоры

  Перец горошком

  Лавровый лист и соль

  Сметана

   Способ приготовления:

Берем мясо на кости свинину, говядину или курицу. Вымачиваем мясо примерно 30 минут в холодной воде. Заливаем мясо свежей водой, и ставим на огонь. Когда вода начинает закипать, тщательно снимаем с бульона пенку. Убавляем огонь и даем мясу вариться 30 минут. Очищаем и нарезаем овощи, в бульон добавляем замоченные сушеные грибы, нарезанный картофель. Варить 10 минут. Далее добавляем морковь и варим еще 10 минут и добавляем капусту. Свеклу натереть на крупной терке, сбрызнуть уксусом и пассировать на подсолнечном масле 10-15 минут, до тех пор, пока она не станет мягкой. Посолить свеклу, добавить немного сахара и переложить в кастрюлю.

Делаем поджарку: лук обжарить до золотистого цвета, добавить морковь и отправить в кастрюлю. Так же потушить помидоры и добавить их в борщ. Специи  перец горошком, лавровый лист и соль добавить по вкусу. Так же можно добавить дольку чеснока. Борщу дать настояться 40 минут. Подавать с зеленью и сметаной.

   Приятного аппетита!

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

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

   Стили для 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. Продолжение на следующем видео уроке.

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

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

   Добавляете все изображения для данного шаблона, желательно сохранять в папку images. Идем дальше структуру нашу рассматриваем, здесь также, если вам вдруг понадобится какие-то дополнительные файлы, ну допустим для одной какой-то странички вам, возможно, понадобится определенный набор стилей, вот как у меня сделано, есть урок на сайте по CSS, и я отдельно прикрепил файл, который назвал csslesson.css. Вот таким образом, то есть это был блок head, как видите здесь все очень просто.

   Для того чтобы создать шаблон, я использовал простую разметку table, в принципе она наиболее простая и для того чтобы вам объяснить, понять и создать первый шаблон в принципе можно с использованием таблиц, дальше уже по мнению профессионального роста уже конечно будем использовать блоки div и различные более сложные элементы. Ну, вот на первом этапе в принципе можно создать ваш первый ваш шаблон с таблицей, потому что когда мы с вами посмотрим далее весь контент Joomla, он используется на основе таблиц и в принципе можно их использовать. Но мы с вами будем комбинировать, то есть у нас будут идти таблички, и блоки div также иногда будут встречаться, мы будем смотреть каким образом, присваивать стили этим элементам.

   Давайте посмотрим сейчас эту структуру, здесь все очень просто, здесь табличная разметка, то есть я вначале в самом верху сайта, я вставил таблицу, то есть у нас идет простая таблица, ширина таблицы 100%. Рамочка отсутствует, по центру, padding и spacing установлены 0. И внутри этой таблицы 2 строчки, в верхней строчке у нас будет содержаться картинка нашего header, а вторая строчка у нас, системный модуль breadcrumbs - это у нас навигатор и второй строчкой <jdoc:include type="module" name="breadcrumbs"/> добавляется как раз этот блок, в котором у нас будет размещаться навигатор сайта.

   Идем дальше, табличка закрывается и открывается следующая таблица, она также расположена по ширине 100% и данная таблица у нас разбивается на 3 столбца, то есть мы взяли в этом шаблоне образец стандартной разметки таблицы. Который в себе содержит header, содержит leftmenu, center или основной контент, right и еще у нас будет footer, вот такой вот простой шаблон. И здесь у нас идет ячейка td с идентификатор id="leftmenu" ширина данной ячейки 200px, здесь же мы вставляем jdoc:include type="module" name="left" здесь присваиваем ему style="xhtml" это такой системный стиль, если вы этот стиль не поставите, у вас не будет выводиться заголовок модуля. Поэтому вот этот стиль вставляйте, также можно какой-то свой стиль приписать. Для удобства можно каждую ячейку именно помечать идентификатором, для того чтобы вы могли очень гибко настроить или прописать какие либо определенные стили именно левому блоку или правому блоку, поэтому я их здесь пометил leftmenu, rightmenu. Далее в центре у нас идет id="component", здесь вообще у нас очень простая строчка <jdoc:include  type="component" /> эта строчка выводит основной контент, все статьи которые у нас будут появляться, они будут выводиться вот этой строчкой component. Внизу добавляется еще одна таблица, которая у нас будет содержать в себе footer, в которой мы размещаем счетчик или какую либо еще системную информацию.

  Теперь мы с вами можем перейти в администраторский раздел сайта и уже вот на этом этапе, вот этот шаблон который мы с вами создали, то есть пока мы с вами не создавали css стили, то есть css файл на данный момент у нас пустой, мы с вами создали файл index.php и создали файл templateDetails.xml и на этом этапе уже можно применить шаблон к сайту и посмотреть, что же получилось, и дальше я вам покажу методику, по которой я создаю обычно шаблоны, то есть я по порядку иду и создаю все стили для различных элементов.

   И так переходим в расширение, в менеджер шаблонов, мы с вами назвали шаблон New Template Lesson. Открываем все шаблоны, открываем весь список и здесь видим наш шаблон New Template Lesson, то есть, как видите этот шаблон, который мы сейчас создали, который мы поместили его в папку templates и он у нас уже здесь доступен. У многих шаблонов вы можете увидеть миниатюру, но у нас пока с вами никакого оформления нет, пока нам еще рано, то есть это простой png файл, который добавляется также, если вы посмотрите какой либо любой шаблон, вы здесь можете увидеть template_thumbnail.png файл, то есть потом можно, когда вы создадите полностью весь шаблон сайта, его Print Screen делаете, сохраняете вот с таким же форматом png и вас также будет для вашего сайта вот эта миниатюра, если конечно она вам нужна, то есть в принципе если это простой рабочий шаблон и поставили его на свой сайт и используете, то можно в принципе и не создавать эту миниатюру.

   И так ставим New Template Lesson, нажимаем по умолчанию, у нас применяется данный шаблон к сайту и нажимаем просмотр, что мы видим, вот в принципе то, что мы видим в самом чистом виде, вот что из себя представляет выборка данных из баз данных Joomla, то есть мы можем увидеть главное меню, оно у нас выводится компонентом left, здесь у нас выводится breadcrumbs, здесь если мы нажмем, у нас сейчас будут выводиться статьи, то есть основной контент и выводится правое меню, правые модули, которые мы с вами создавали. То есть все работает, но вот в таком виде.

   Теперь наша с вами задача применить и прописать стили для всех этих элементов. Первое с чего мы начнем, это мы вставим header, то есть верхнюю часть сайта, мы с вами создадим стили, которые у нас будут определять header. Как создавать стили, для этого мы открываем файл template.css и здесь начинаем прописывать стили. Итак я обычно, для того чтобы было все понятно, я создаю определенные разделы, пишу таким образом комментарии. Продолжение в следующем видео уроке.

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

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

   Ну что же приступаем к видео уроку, в котором мы приступим к созданию шаблона Content Manager System Joomla с самого нуля, посмотрим с самого начала, как создается шаблон. Из каких файлов он состоит, и научимся создавать различные типы для данной системы. И так для того чтобы вам создать новый шаблон переходите на диск С, WebServers открываете папку home открываете ваш сайт, ваш домен который вы создали, открываете папку www и здесь мы находим папку templates. В этой папке мы в предыдущем уроке мы в нее копировали все шаблоны, которые у нас имеются коллекция шаблонов. И мы сейчас по аналогии одного из имеющихся шаблонов создадим, свой собственный шаблон, и я вам покажу каким образом, создаются все стили и то, как вы сами можете создать свой уникальный дизайн. Применить свои шрифты, и различные элементы.

   И так первоначально мы с вами создаем новую папку, вписываем  newtemplate, отлично создали новую папку, я уже до этого создавал здесь небольшой шаблон, поэтому возьму вот здесь уже заготовленный и вам покажу по аналогии создания. Каждый шаблон состоит из двух файлов и первый файл templateDetails.xml, давайте его сразу откроем, и посмотрим из чего, данный файл состоит – это простой xml файл, куда вписываются все данные сведения о шаблоне.  То есть - это имя, автор, копирайтер, Е-мэйл, версия, описание, создание шаблона и далее непосредственно вот в таких  xml тегов файлах идет описание всех шаблонов. В принципе можно описать, как я сделал основные файлы, как вы видите здесь структура очень простая, открывается тег, открывающий и закрывающий <filename>, и описывается имя файла index.php. Вот этот файл index.php он основной файл вашего шаблона, далее аналогично описывается в разделе CSS, в принципе просто открыть <files>, и просто перечислить xml файлов, существует разбивка файлов по типу файлов.

   То есть файлы вначале идут php html, далее идут  CSS и идут изображения - это думаю вам понятно. Пока если вы создаете шаблон, вы просто опишите несколько основных файлов, например файл index.php, можно написать файл CSS который находится  в директории  css/template.css, данный файл будет называться 111. То есть напишите основные сведения, кто автор, свое имя введите, и с этим файлом мы заканчиваем. Сейчас я напишу, чтоб было понятно NEW TEMPLATE LESSON, то есть вот это имя будет отображаться, когда мы с вами откроем Joomla, «Менеджер шаблонов» и у нас будет отображаться это имя. Ну что ж думаю, что с именем templateDetails.xml вам все понятно, закрываем его и переходим к основному файлу, имя которому index.php, посмотрим его структуру. Входим в код данного файла, в принципе вот эти все строчки в ручную вы можете не набирать, копируете, из имеющегося какого ни будь шаблона, который имеется в коллекции или вот из этого шаблона mynewtemplate.

   В дополнительном материале я вам все эти шаблоны предлагаю, вы просто открываете вот эту папочку и копируете этот код. Он является системным кодом Joomla, и далее идет описание нашего шаблона, как видите здесь простой html, открывается doctype, потом идет дальше открывается и показывается php вставляется язык, язык именно того сайта который выбран. То есть будет русский язык, обращаю ваше внимание, если вы будете вставлять надписи в ручную, к примеру вставите какую ни будь надпись внизу сайта, то для того чтобы она у вас отображалась на русском языке. Обязательно этот файл создайте в кодировки UTF-8, то есть если это будет в кириллице или в западноевропейской кодировке, у вас просто на просто этот текст не отобразится. Поэтому если вы в ручную создаете, нажимайте файл File New php вот видите по умолчанию выбрана Кириллица для того чтобы ваш новый выбранный файл создавался в Юникод. Вы переходите в Edit preferences, выбираете  в Default recording, кодировки по умолчанию New Document, выбираете UTF-8. И тогда  переходите  к созданию, какого ни будь документа, вот здесь будет кодировка UTF-8, -это очень важный момент.  Как я уже сказал если вы, будете вставлять русские символы, непосредственно в этот файл, из базы то все будет выводиться нормально. И так язык у нас подставляется, дальше идет открывающий <head> и идет первая системная строчка (которая у нас будет отвечать за добавление блока  Joomla) уже непосредственно сюда в этот шаблон. Вот такая простая строчка пишется <jdoc:include type=”head” />.

   То есть при помощи вот этого блока подцепляются все необходимые дополнительные стили, которые могут быть понадобится для этого документа. И другая системная информация такая как, например ключевые слова keyword description,  основные все методы которые находятся в блоке  head, они дополняются при помощи вот этой строчки. То есть вы ее сюда вот так просто вставляете, далее вы видите, у нас здесь подключаются, прописаны два файла со стилями, это system и general.css. Эти два файла у нас подключаются, и далее у нас идет подключение, вы подключаете те стили, которые необходимы для работы именно вам.

   Давайте вернемся  в шаблоны и посмотрим, то есть вот это xml файл index.php, мы его открыли и работаем и дальше вот этими двумя важными папками. Папка CSS в этой папке у нас будет находиться файлы с именем template.css и как раз вот этой строчкой у нас прикрепляется стиль. В котором мы будем работать, и в котором мы будем создавать все стили для шаблона. И вторая папка, это папка images в папке images вы уже можете заранее, перед тем как вы будете создавать Joomla или по ходу созданию, если вы, к примеру, какой-то элемент нужно нарисовать вы рисуете элемент в фотошоп, просто сохраняете и добавляете. Продолжение в следующем видео уроке.

 

Страница 1 из 3