Part-Start.ru

Январь 31, 2013 | Рубрика: Курсы и тренинги

Научитесь работать с блоками

Научитесь вставлять блоки в любое место на странице

 

Цель: Отработать основные навыки работы с блоками и стилями.

Разберитесь, что такое блок DIV в HTML

Подпишитесь на бесплатный курс по HTML

Обратите особое внимание на раздел посвященный тегам DIV и SPAN, а также:

  • Параграфы и заголовки.
  • Атрибуты.
  • Изображения.
  • Тэги DIV и SPAN.

В обучении двигайтесь от практики к теории. Не нужно мучительно долго изучать всю терминологию и историю возникновения html разметки. У вас уже есть тестовый сайт. Берите и делайте, сразу все проверяйте на практике, смотрите, что получиться.

Наблюдайте, как сделано на других сайтах. На этом этапе, чем чаще у вас получиться сломать тестовый сайт, тем лучше. Вы поймете, чего на рабочем коммерческом сайте делать не нужно. Главное, перед изменением файла, сохраняйте его исходник, тогда легко сможете вернуться к начальному состоянию.

Что такое DIV?

Разберитесь, что такое стиль в CSS

Подпишитесь на бесплатный курс по CSS

Обратите внимание на разделы:

  • Принцип работы CSS.
  • Подключение и 3 базовых селектора.
  • Каскадность и приоритетность.
  • Блочная модель, margin и padding.
  • Блочные и встроенные элементы.
  • Фоновый цвет и изображение.
  • Свойство float.
  • Два способа подключения стилей.

В современном web-дизайне принято разделять содержание и его оформление. Чем четче происходит разделение, тем лучше. Станица без форматирования выглядит, как текстовый документ с гиперссылками. Удалите файл style.css и посмотрите, как выглядит ваш сайт без оформления.

Файл style.css подключется к html странице и задает оформление для всех элементов страницы в браузере. Страница хранится отдельно, стили отдельно, а в браузере происходи окончательная сборка, с учетом стилей оформления. В шаблоне WordPress отдельно хранится даже и не страница, а ее составные части:

  • шапка;
  • подвал;
  • комментарии;
  • боковые колонки;
  • центральная часть документа.

Каждой из этих частей можно задать свой стиль оформления и записать правила в отдельный файл style.css

Что такое CSS?

Изучите основы работы с визуальным HTML редактором

Скачайте и установите визуальный редактор:

  • Лучший и платный Dreamweaver
  • Хороший бесплатный Nvu 

Научитесь вставлять блок на простую html страницу

Создайте в визуальном редакторе простую html страницу. Поместите на страницу блок DIV. Посмотрите, как будут себя вести блоки разных типов:

  • абсолютный;
  • фиксированный;
  • плавающий.

Научитесь выравнивать блок

  • по центру;
  • по левому краю;
  • по правому краю.

Вставьте одни блок в другой, научитесь передвигать вложенный блок внутри родительского внешнего блока.

Научитесь изменять размеры блока, полей и отступов

Разберитесь, и точно понимайте, что такое поля, и что такое отступы в блоке, чем они отличаются. Научитесь задавать абсолютные размеры блока в точках и относительные в процентах.

Научитесь делать цветную заливку блока

Прочитайте статью Блоки рекламы для WordPress

При работе с блоками, удобно заливать их разными цветами, чтобы были видны границы блоков.

Подробнее о том, как можно разместить три рекламных блока в одной записи, читайте в статье Рекламные блоки на странице

Научитесь помещать в блок графический элемент

Умение работать с графическими элементами пригодится тогда, когда вам нужно будет разместить баннер на странице. Баннер - это обычная картинка с которой ведет ссылка на страницу рекламодателя. Обычная, в том смысле, что для баннеров используются файлы в графическом формате:

  • PNG - формат, который позволяет сделать прозрачный фон.
  • GIF - позволяет сделать анимированный файл.

Поместите в блок графический файл, картинку, и поработайте с ней, потренируйтесь выравнивать графический элемент внутри блока. Изменяйте размеры блока и картинки, смотрите, что получится. Сразу все делайте на практике и смотрите на результат.

Научитесь помещать в блок JavaScript

Звучит грозно, однако это не сложнее, чем поместить в блок картинку. JavaScript - это небольшая программа, которая исполняется на стороне клиента, выводит в то место на станице, где установлен скрипт, тот или иной элемент. В нашем случае JavaScript используется для вставки на страницу:

  • баннеров;
  • счетчиков;
  • блоков контекстной рекламы.

Сам скрипит заключен в теги 

<script type="text/javascript">  JavaScript  </script>

Нужно только скопировать его и вставить в нужное место на странице. Если скрипт поместить в блок, то такая конструкция будет выглядеть следующим образом:

<div> <script type="text/javascript">   JavaScript  </script></div>

После чего, с блоком можно делать все, что вам нужно:

  • выравнивать;
  • закрашивать;
  • делать отступы;
  • позиционировать, например - зафиксировать.

Что такое JavaScript?

Научитесь определять стиль элементов страницы в Firefox

Это очень важный навык. Вы можете использовать  любой браузер, а для работы с кодом я рекомендую скачать и установить Mozilla Firefox

Посмотрите видео на странице Дополнительные возможности Firefox

Научитесь создавать свои стили для блоков в файле style.css

Используйте файл стилей, который находится в папке с файлами темы оформления. Этот файл уже подключен ко всем страницам, которые генерирует WordPress. В конце файла допишите свои стили для разных блоков. Сразу учитесь изменять стили через файл style.css.

Научитесь вставлять блок в  файлы темы оформления

Вставьте блок в файлы:

  • header.php
  • footer.php
  • sidebar.php
  • comments.php
  • page.php
  • single.php

Вставьте блок в запись:

  • В начало записи с обтеканием текстом.
  • В середину с обтеканием.
  • В конец с обтеканием.

В этом задании главное - делать. Вставляйте, пробуйте, смотрите, что получится. Особое внимание уделяйте вложенности блоков. В CMS WordPress используется блочная разметка, поэтому блоков много.

Следите за тем, чтобы ваш блок был вложен правильно, чтобы количество открывающих тегов соответствовало количеству закрывающих.  Например, так:

<div><div><div> Третий блок </div></div></div>

Следите за тем, чтобы ваш блок не попал внутрь кода PHP. На странице php-код перемешан с html-кодом. Найти PHP можно по тегам:

 <?php PHP ?>

PHP может находиться внутри блока:

<div><?php PHP  ?></div>

А вот так, быть НЕ должно:

<div><?php PHP  </div> ?>

Будьте внимательны, когда редактируете код, отсутствие одного из закрывающих тегов сломает страницу. Если удалить внутри кода PHP один из символов "точка с запятой" - это сломает страницу. Попробуйте сами. Научитесь ломать, будете знать, как стоить. Тренируйтесь на тестовом сайте, он для того и сделан.

Главная задача на этом этапе - научиться видеть в коде, где начинаются и где заканчиваются границы:

  • блоков DIV;
  • скриптов JavaScript;
  • кода PHP.

Следите за вложенностью и правильным синтаксисом. Это две главные ошибки: либо вложенность нарушена, либо нужный символ удален.

Используйте в Windows две волшебные кнопки: Ctrl+F - поиск на странице, работает со всеми приложениями.

Что такое PHP?

Найдите нужную статью на сайте. Введите слово или фразу в форму поиска!

Комментарии

Научитесь работать с блоками

Avatar

Алевтина

Февраль 11th, 2013 at 13:40

Я отстаю от графика. получается всё медленно. Плагины вставила, тексты на уникальность проверять научилась, да и с блоками худо — бедно немного получается. Я вожусь с рекламной компанией. Написала продаваемую статью в которой привожу рецепты по изготовлению домашнего вина из винограда выращенного на своём приусадебном участке. Лучшего ничего не придумала. Вопрос: у меня есть пустой тестовый сайт на старом сайте, можно ли мне использовать этот тестовый сайт, он никакого отношения не имеет к новому сайту, а тема продающей страницы подходит к новому сайту или же лучше на новом хостинге создать новый совершенно тестовый сайт? У меня проблемы с регистрацией на гугле, почему-то не подтверждается право на сайт, хотя текстовый файл данный гуглом я разместила в корневом каталоге. Связалась с группой поддержки гугла, они мне помогают. Вот пока это главная причина задержки. Было легче, сейчас тяжело, все технические вопросы даются с трудом.

Avatar

Георгий Пичугин

Февраль 11th, 2013 at 16:36

Здравствуйте, Алевтина! Не нужно торопиться, главное заложить фундамент, во всем разобраться и все настроить. Потом только поддерживать, добавлять контент и заниматься платной раскруткой, чтобы довести количество посещений до 1000 в сутки на каждом из сайтов.
Вы можете использовать любые свои сетевые проекты для работы, если они не противоречат правилам партнерской программы.
Технические навыки нарабатываются только опытом. Разделите задачу на короткие этапы, для каждого найдите решение и так по каждому техническому вопросу. Лучше сделать меньше, зато понимать, что нужно делать в том или ином случае. Просто продолжайте делать. Постепенно разберетесь.

Напишите комментарий

Ссылки

PART-START

Свежие записи

Refill Services canadian pharmacy of seeing a doctor. A catalog of medical and cosmetic products with descriptions. Thematic categories, search by alphabet and key words. All in online pharmacies [!* viagra super active We constantly offer promotions for our customers. The details of the bonus program, see Special Offer.