Поняття html презентація
0
svvas
Поняття html презентація

HTML – це мова тегів, засобами якої здійснюється розмічання вебсторінок для мережі Інтернет. Браузери отримують HTML-документи з вебсервера або з локальної пам’яті й передають документи в мультимедійні вебсторінки. HTML описує структуру вебсторінки семантично і спочатку включені сигнали для зовнішнього вигляду документа.

Елементи HTML є будівельними блоками сторінок HTML. За допомогою конструкцій HTML, зображення та інші об’єкти, такі як інтерактивні форми, можуть бути вбудовані у візуалізовану сторінку. HTML надає засоби для створення структурованих документів, позначаючи структурну семантику тексту, наприклад заголовки, абзаци, списки, посилання, цитати та інші елементи. Елементи HTML окреслені тегами, написаними з використанням кутових дужок. Теги, такі як і безпосередньо вводять вміст на сторінку. Інші теги оточують і надають інформацію про текст документа і можуть включати інші теги як піделементи. Браузери не показують теги HTML, але використовують їх для інтерпретації вмісту сторінки.

5 колонок Bootstrap
0
svvas
5 колонок Bootstrap

5 колонок bootstrap

HTML

<div class="col-sm-12">

  <div class="row">
    <div class="col-sm-7 five-three">
      <div class="row">
        <div class="col-sm-4">
          Column 1
        </div>
        <div class="col-sm-4">
          Column 2
        </div>
        <div class="col-sm-4">
          Column 3
        </div>
      </div>
    </div>
    <div class="col-sm-5 five-two">
      <div class="row">
        <div class="col-sm-6">
          Col 4
        </div>
        <div class="col-sm-6">
          Col 5
        </div>
      </div>
    </div>
  </div>
</div>

CSS

div.col-sm-7.five-three {
  width: 60% !important;
}
div.col-sm-5.five-two {
  width: 40% !important;
}
Анімація онлайн
0
svvas
Анімація онлайн

Сайт http://preloaders.net/ для створення анімаційних картинок онлайн.

Багато категорій, безліч  варіантів  налаштувань, можливість вибору формату зображення для скачування.
Великий функціаонал для вебдизайнерів.

прапор

 

 

Вставити соціальні кнопки на сайт
0
svvas
Вставити соціальні кнопки на сайт

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

http://www.sharethis.com/

sharethis

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

Однією з основних переваг цього сервісу є те, що він не створює стороніх посилань на сайт розробника.

 

Сніг на сайті на Joomla
0
svvas
Сніг на сайті на Joomla

Простий в налаштуваннях модуль Skyline Snow Falling для сайту на CMS Joomla.

Даний модуль дозволяє створити на сайті святковий настрій – встановити постійно падаючий сніг.

В налаштуваннях можна вибрати розмір,  колір і інші ефекти.

Після встановлення модуля Skyline Snow Falling через менеджер розширень потріно активувати його.

Крім того, потрібно задати модулю позицію  і  призначити для всіх сторінок.

Skyline Snow Falling

Скачати Сніг для Joomla

Мобільна версія сайту на Joomla
0
svvas
Мобільна версія сайту на Joomla

1. MobileTemplate

Сайт розробника: http://www.nhuang.com/joomla/joomla-mobile-template.html

Розширення повністю сумісне з Joomla 2.5 / 3.x.

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

Пакет розширення включає в себе плагін і шаблон. Завантаживши і встановивши його, потрібно перейти в «Менеджер плагінів», знайти плагін «System – Mobile Template» і включити його. У налаштуваннях плагіна в розділі «Фільтр» можна вибрати пристрої, які не будуть використовувати цей плагін. Далі слід перейти до пункту меню «Розширення» – «Менеджер шаблонів», вибрати шаблон «mobiletemplate» і зробити необхідні настройки: ввести назву модуля меню, яке буде відображатися ліворуч, і назва модуля, відповідального за слайд-шоу чи зображень (центральна позиція) ; змінити колір фону меню і сайту в цілому; направлення висновку підміню (вертикальне чи горизонтальне). На вкладці «Прив’язка до меню» можна вибрати пункти меню, які будуть відображатися в мобільній версії сайту.

Так, наприклад, виглядає демонстрація роботи мобільної версії сайту, створеної з використанням плагіна «MobileTemplate», при перегляді з планшетного комп’ютера:

Мобільна версія сайту, створена за допомогою плагіна MobileTemplate

Застосовуваний шаблон дійсно дуже лаконічний і зручний при використанні мобільного пристрою.

2. Mobile Joomla

Сайт розробника: http://www.mobilejoomla.com/

Розширення повністю сумісне з Joomla 1.5 / 2.5 / 3.x.

Для завантаження компонента необхідно створення облікового запису на сайті розробника.

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

Для установки компонента необхідна наявність PHP 5.x, MySQL 5.x, GD2 і прав на запис в папках / administrator / components, / components, / modules, / plugins, / plugins / system, / templates. Після проведення стандартної процедури установки на екрані з’являються поздоровлення і повідомлення про те, що Ви вибрали кращий спосіб для створення мобільної версії сайту Joomla, прекрасно показується на iPhone, iPad, Android, Windows Phone і інших телефонах.

У списку «Компоненти» додався компонент «Mobile Joomla». Перейдемо до його настройок. На вкладці «General» панелі управління компонентом можна змінити назву сайту, вибрати якість зображень при їх перегляді з мобільних пристроїв (у% від вихідного) і спосіб їх адаптації, задати головну сторінку сайту,

Вкладки «Smartphone», «iPhone», «WAP», «iMode» практично ідентичні один одному: на них можна вибрати шаблон і головну сторінку, налаштувати перегляд зображень, метод компресії, конвертацію HTML в символи, висновок модулів для кожного з перерахованих пристроїв. Відповідні налаштування для планшетних комп’ютерів доступні тільки в розширеній платній версії. Крім того, на вкладці «Advanced Settings» можна включити кешування сервером і виробом, Gzip компресію, видалення невикористовуваних тегів, задати ширину шаблону, прописати посилання на домен і посилання перенаправлення, задати піддомени для кожного з типів мобільних пристроїв.

Нижче наведено приклад роботи сайту, що використовує даний компонент, на мобільному пристрої.

Мобільна версія сайту, створена з використанням компонента Mobile Joomla

3. TapTheme

Сайт розробника: https://www.dropbox.com/sh/aglcnswe997yglx/AADSG7BJmufZbU2o4S-E51WWa/Extensions?dl=0

Розширення повністю сумісне з Joomla 2.5 / 3.x.

Плагін встановлюється стандартно, через «Менеджер розширень». Після установки плагін можна знайти в «Менеджері плагінів» під назвою «System – TapTheme». Плагін слід включити і налаштувати. У налаштуваннях плагіна для різних браузерів (Firefox, Safari, Chrome, Opera, Internet Explorer 6-11) і пристроїв (iPhone, iPad, Blackberry, PALM, Android) зі списку встановлених можна вибрати свій шаблон сайту і адміністративної панелі. Таким чином, після вибору кожного шаблону слід переглянути сторінки сайту на відповідному пристрої або браузері, щоб переконатися в адекватності відображення інформації.

З розглянутих розширень для установки найбільш кращий компонент «Mobile Joomla» – його функціональність і наявність ряду опцій роблять його лідером серед аналогів. Плагін «MobileTemplate» також непоганий, має засоби зміни виду мобільної версії сайту, вимагаючи при цьому мінімальної настройки. Останнє з розглянутих розширень вимагає наявності як мінімум одного шаблону, підтримуючого мобільні пристрої, і є, по суті, перемикачем між шаблонами, що залежать від типу пристрою і браузера.

HTML кнопка перехід на нову сторінку
0
svvas
HTML кнопка перехід на нову сторінку

Вставка HTML кнопки при натисненні на яку здійснюється перехід на нову сторінку

Перший спосіб:

<form action=”URL сторінки” method=”get”>
<input type=”submit” value=”Перейти”></form>

Другий спосіб:

<input type=”submit” value=”Перейти” onclick=” location.href=’ http://…../test.php’  “>

Фотоальбом ucoz з прев’юшками розділів
0
svvas
Фотоальбом ucoz з прев’юшками розділів

Суть завдання полягає в тому, щоб видозмінити стандартний укозівський фотоальбом. Для прикладу, нам потрібно  вивести на головну сторінку фотоальбому всі його категорії і в якості “превю” для кожної категорії встановити останню додану до неї фотографію. Це можна зробити таким чином: виводимо  категорії через інформер, а фотографії довантажємо  за допомогою javascript:

halereya

1. Створюємо інформер в панелі управління ucoz

s94251167

 

2. Заходимо в управління дизайном інформера і додаємо туди наступний код:

<div class=”с1″>  
<div class=”с2″>  
<a href=”$CATEGORY_URL$”>  
<span class=”с3″ id=”c$NUMBER$”><span class=”с4″></span></span>  
</a>  
</div>  
<div class=”с5″>  
<b>$CATEGORY_NAME$</b><br>Фотографий: $NUM_DATA$<br><div class=”с6″>$CATEGORY_DESCR$</div>  
</div>  
</div>   <script type=”text/javascript”> $(‘#c$NUMBER$’).load(‘$CATEGORY_URL$ .phtTdMain:first img’);</script>

 
3. В css копіюємо всі необхідні стилі:
.с1 {display:inline-block; overflow:hidden; border:1px dashed #ccc; border-radius:3px; padding:5px; margin-bottom:15px;}  
.с2 {float:left; width:100px;}  
.с4 {float:left; width:90px; height:67px;}  
.с5 {float:left; width:150px;}  
.с3 img {width:90px; height:67px; border-radius:3px;}  
.с6 {font-size:10px; color:#666; margin-top:5px;}
Розміри картинок прев’ю можна підігнати під ваші потреби.
Сховати/показати div
0
svvas
Сховати/показати div

Сховати/показати блочний елемент div можна з допомогою css (display: none) і трохи javascript showhide(‘k’)

Код:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div.hiddenn { 
	display: none;
}
</style>
<script type="text/javascript">
function showhide(x) {
	var o=document.getElementById(x)
	o.style.display=(o.style.display=="block")? 'none': 'block'
}
</script></head>
<body>
<h3 onclick="showhide('k')">Сховати/показати</h3>
<div class="hiddenn" id="k"> Текст блочного елемента
</div>
</body>
</html>