понедельник, 5 декабря 2016 г.

Изменение текста при клике мыши.

Click on this text!

<html>
<body>

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

</body>
</html>

То же самое с помощью функции:

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
    id.innerHTML = "Ooops!";
}
</script>

Можно использовать обработчик события в виде кнопки:

Кликни по кнопке, чтобы увидеть дату.

<p>Кликни по кнопке, чтобы увидеть дату.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
    document.getElementById("demo1").innerHTML = Date();
}
</script>

<p id="demo1"></p>

Тоже самое можно записать так:

<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

Изменения при наведении мышкой

Mouse Over Me

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:240px;height:40px;padding:40px;color:white;">
Mouse Over Me</div>

<script>
function mOver(obj) {
    obj.innerHTML = "Thank You"
}

function mOut(obj) {
    obj.innerHTML = "Mouse Over Me"
}
</script>

Можно сделать изменения при клике:

Click Me

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38; width:280px;height:100px;padding:40px;">
Click Me</div>

<script>
function mDown(obj) {
    obj.style.backgroundColor = "#1ec5e5";
    obj.innerHTML = "Release Me";
}

function mUp(obj) {
    obj.style.backgroundColor="#D94A38";
    obj.innerHTML="Thank You";
}
</script>

вторник, 22 ноября 2016 г.

Переменные и массивы.

Массивы и переменные

Переменные

Для того, чтобы лучше понять как это работает создадим на рабочем столе папку C2S2.
Далее мы создадим в ней файл index.html. Если сейчас открыть это документ в браузере, то мы увидим пустую страницу. Для того, чтобы ее заполнить, мы откроем этот документ в редакторе Notepad++ или Sublime и добавим туда обычный макет документа.

<doctype ntml>
<html>
<head>
<meta charset="utf-8">
<title>Variable & Arrays</title>
<script>
 var car = 'Honda';//объявили переменную car со значением'Honda'
car = "toyota";// переопределили переменную - теперь надпись будет toyota
var x = 5;
</script>
</head>
<body>
<script>
document.write('Anysing');//вывели на страницу надпись Anysing
 document.write(car);//значение переменной car
 document.write("I have " + x + " aples");
</script>
</body>
</html>

Важно помнить что можно получить данные из одной части скрипта в другой области. Мы создали два скрипта. Один в голове и один (чтобы его было видно) в теле документа.
Чтобы вывести переменную в строке, нам нужно сделать так как в случае с яблоками. То есть использовать конкатенацию строк

Массивы

Создали новый массив (в голове документа) var cars = new Array('Honda', 'Toyota', 'Ford');
Добавили новый элемент в массивcars[3] = "Dodge";
Вывели на экран значение элемента массиваdocument.write(cars[0]);
Узнали длину массиваdocument.write(cars.length);
Узнали место элемента в массиве document.write(cars.indexOf('Toyota'));

<html>
  <head>
    <title>Variables & Arrays</title>
    <script>
      var cars = new Array('Honda', 'Toyota', 'Ford');
       cars[3] = "Dodge";
     </script>
  </head>
  <body>
    <script>
     document.write(cars[0]);
      document.write(cars.length);
      document.write(cars.indexOf('Toyota'));
    </script>
  </body>
</html>

воскресенье, 20 ноября 2016 г.

Подключение библиотеки JQuery

Основы Jquery

Подключение библиотеки

все библиотеки можно посмотреть здесь или перейдя по этой ссылке вручную. https://developers.google.com/speed/libraries/

Например вот так для работы с файлом, который вы скачали и поместили в папку вашего сайта. Этот метод более предпочтительный при работе на локальном сервере


<script type = "text/javascript" src = "jquery.js"></script>

Или вот так для любого другого сайта находящегося в интернете:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script >

Для того, чтобы код выполнялся после загрузки самого документа его надо вставить внутрь вот такой функции:

$(document).ready(function)(){
//all JQuery code goes here.
});

Выбор элементов

С помощью библиотеки можно выбрать практически любой документ DOM. Добиться этого можно при использовании селекторов. Селектор это знак $ и рядом внутри круглых скобок мы указываем какой элемент мы хотим выбрать.

$("div") - выбирает все divна странице.
$("#myDiv") - по ID
$("p.myClass") - выбирает все теги р с классом myClass

Это расширяет возможности использования библиотеки, потому что просто JavaScript-ом мы можем обратиться к элементу только с определенным ID - document.getElementById()

Методы и Действия JQuery

Как только объект выбран мы можем произвести над ним какие-то действия.

Например

$("div")addClass("myClass"); - позволяет добавить выбранным элементам класс
$("#myDiv").css("color","red"); - позволяет добавить css. (Метод css)
Var myElement=$("#myElement").html();Позволяет получить html - код выбранного элемента (Метод html). В этом случае мы создаем переменную, которая получает весь код от элемента с id. Это моэет быть слово, параграф, изображение или вся страница целиком. Далее мы можем использовать эту структуры в своих собственных целях.

События JQuery

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

$("a").click(function(){
//здесь сама функция.
});

Можно например окрасить все ссылки в определенный цвет или сделать какое-либо другое действие.

Например:

Blur - размытие
Focus - резкость
Hover - наведение
Key Down - нажатие клавиши "стрелка вниз"
Load - загрузка

На сайте JQuery можно найти полный список всех событий (Events)

Показать или скрыть

$("#myElement").hide(function(){//here some function}); скрывает элемент с ID
$("#myElement").show(function(){//here some function}); показывает ID
$("#myElement").toggle(function(){//here some function}); переключение между "показать" и "скрыть"
$("#myElement").slideDown("fast",function(){//here some function});- перемещает элемент вниз со скоростью "fast" и второй параметр это функция, которая будет выполнена по завершении перемещения
$("#myElement").slideUp("slow",function(){//here some function}); - тоже самое "вверх"
$("#myElement").slideToggle(1000,function(){//here some function}); - переключение между перемещениями с числовым параметром скорости

четверг, 10 ноября 2016 г.

Как изменить картинку при наведении на неё курсора

Ранее я рассказывал как можно изменять картинки при помощи JavaScript

Самый простой способ радикально изменить изображение при наведении на него курсора это разместить две картинки в один контейнер и спрятать их одну под другой с помощью css правила position: absolute:

<div class="animate2">

    <img class="first" src="img/1.jpg" />

    <img class="second" src="img/2.jpg" />

</div>

Добавляем css

.animate2{

  position:relative;

  margin:0 auto;/* устанваливаем блок div по центру страницы*/

  width:480px; /* Ширина */

  height: 360px;  /* Высота */                

}

.animate2 img {

  position:absolute; /* абсолютное позиционирование*/

  left: 0; /* выравниваем картинки по левому верхнему углу div-а*/

  top: 0; /* выравниваем картинки по левому верхнему углу div-а */  

}

После добавления правил css, картинки будут размещены друг под другом. Теперь управляя прозрачностью картинок с помощью свойства opacity в обычном состоянии будем показывать вторую картинку, а при наведении курсора первую. Для этого в обычном состоянии делаем картинку с классом first полностью прозрачной, а при наведении курсора наоборот: картинка с классом second будет полностью прозрачной, а с классом first не прозрачной:

.animate2 img.first { /* первая картинка полностью прозрачная */

  opacity:0;

  filter:alpha (opacity=0);

}

.animate2:hover img.first { /* при наведении курсора первая картинка становится не прозрачной */

  opacity:1;

  filter:alpha (opacity=100);

}

.animate2:hover img.second, .animate2 img.second:hover { /* а вторая при наведении курсора становится прозрачной */

  opacity:0;

  filter:alpha (opacity=0);

}

Можно добиться плавности перехода добавив к последнему правилу свойство CSS transition:

.animate2:hover img.second, .animate2 img.second:hover {
  opacity:0;
  filter:alpha (opacity=0);
  -moz-transition: all 2s ease;
  -webkit-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

ИЛИ

.animate2:hover img.second, .animate2 img.second:hover { /* а вторая при наведении курсора становится прозрачной */

  opacity:0;

  filter:alpha (opacity=0);
     -moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */

    -webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */

    -o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */

transition: all 1s ease-in-out; 
}

Источник

От себя добавлю, что вы также можете сделать плавным переход и после отведения курсора с картинки. Для этого нам нужно добавить следующий код:

.animate2:not(:hover) img.first {
  opacity: 0;
  filter: alpha (opacity=0);
  -moz-transition: all 3s ease;
  -webkit-transition:all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}
.animate2:not(:hover) img.second, .animate img.second:not(:hover) {
  opacity: 1;
  filter:alpha (opacity=100);
  -moz-transition: all 3s ease;
  -webkit-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}

понедельник, 7 ноября 2016 г.

Установка wordpress на хостинг или OpenServer.

Скачиваем отсюда -wordpress.org или отсюда - ru.wordpress.org

Распаковываем, копируем то что внутри папки и вставляем в папку public на хостинге по FTP соединению (используем FileZila).
Можно скопировать всю папку wordpress, в распакованном архиве, и переместить ее в папку domensна OpenServer, там ее нужно переименовать - (имя вашего сайта).
Я предпочитаю копировать всё содержимое папки wordpress и вставлять его непосредственно в папку с названием сайта (например bootwp, которая находится в папке domains на OpenServer). Это позволяет сразу попадать на главную страницу сайта, без дополнительных изменений файла .htaccess

Затем, следует переименовать файл wp-config-sample.php в wp-config.php. Открываем его и прописываем наши данные, как показано на рисунке.

Теперь переходим по ссылке, которая указана в этом файле (на фото подчеркнута) -> https://api.wordpress.org/secret-key/1.1/salt/ и полученный блок кода копируем и вставляем вместо того, что есть в вашем файле.

Идем в настройки OS и Apach 2,4//// php 5,6x64 MySQL 5,6x64 (в зависимости от разрядности компа)
Создаем базу данных mySQL идем во вкладку -> "Дополнительно" и ->"PHPMyAdmin"

Пользователь : root пароль не надо...Нажимаем далее

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

Далее переходим во вкладку БАЗА ДАННЫХ
Название базы : как название папки сайта, кодировка - utf8_general_ci
Нажимаем клавишу Создать.

Перезапускаем Сервер.

Далее идем на наш сайт. Мои сайты - и ваш сайт. Открывается окно запуска
нажимаем вперед :

Дальше мы приступим к созданию собственной темы на вордпресс.

вторник, 9 августа 2016 г.

Изменение стилей CSS с помощью JavaScript

Изменение стиля CSS с помощью javascript

С помощью javascript мы можем изменить стиль css для части документа.

Вот пример:

Таким же образом мы с вами можем изменить и другой стиль элемента - это цвет

Код для этого прописывается внутри html документа следубщим образом:

<button type = "button"
onclick = "document.getElementById('demo_css').style.fontSize = '35px'">Нажми, чтобы посмотреть</button>

То, что отметил в коде, можно изменить на color ='red' и получим пример изменения цвета текста.

С помощью javascript мы можем скрыть какую - либо часть текста, или страницы. Для этого мы просто заменим выделенную часть кода на display='none'

И наоборот. JavaScript может отобразить скрытые элементы

понедельник, 8 августа 2016 г.

Переключение картинок javascript

Делаем смену картинки по клику на кнопку.

Для этого нам нужен такой html код.

<h1>Что может делать JavaScript?</h1>
<p>Можем изменить картинку по клику на кнопку..</p>
<p>В этом случае JavaScript изменит атрибут
SRC (источника) изображения.</p>
<button onclick="document.getElementById('myImage')
.src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage')
.src='pic_bulboff.gif'">Turn off the light</button>

Здесь вы можете посмотреть как можно изменять картинки при наведении курсора с помощью только css!

Что может делать JavaScript?

Можем изменить картинку по клику на кнопку..

В этом случае JavaScript изменит атрибут
SRC (источника) изображения.

четверг, 30 июня 2016 г.

Как правильно задать путь к файлу

Абсолютные и относительные ссылки. Как указать путь к файлу правильно Абсолютные ссылки всегда начинаются с имени протокола. Например http:// и содержат имя файла.

Относительные - ведут отсчет от корня сайта или текущего документа.

При обращении к каталогу без явного указания названия файла (то, что пишется в конце, после /fail.html) обычно открывается индексный файл - index.html. Это стоит помнить, чтобы всегда вы могли защитить свой сайт от мошенников. Об этом я рассказываю в настройках WP.

Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.
Если вы забыли как правильно написать ссылку в коде, то следует вернуться к этому посту.
Рассмотрим создание относительных ссылок более подробно.

Вариант 1 Фалы располагаются в одной папке?

Здесь все просто. Нужно сделать ссылку из исходного на ссылаемый. То есть вот так:

<a htrf="Ссылаемый_документ.html'>Текст ссылки </a>

Вариант 2. Исходный в папке, а ссылаемый в корне

<a htrf="../Ссылаемый_документ.html'>Текст ссылки </a>

../ мы говорим, что нужно выйти из текущей папки на уровень выше. Много папок, значит и ../ ../ ../ - много. Столько сколько папок (уровней)

Вариант 3. Исходный в корне сайта, ссылаемый в папке
То есть зеркальный вариант от предыдущего.

Здесь путь такой

<a htrf="Папка/Ссылаемый_документ.html'>Текст ссылки </a>

Если много папок, то

<a htrf="Папка1/Папка2/Папка3/Ссылаемый_документ.html'>Текст ссылки </a>

Вариант 4.Файлы в разных папках

Здесь нужно выйти - ../ из одной и второй ../ папки и там уже найти файл

<a href="../../Ссылаемый_документ.html">Ссылка </a>

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

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

Зато на компьютере вообще все проще простого.

Сейчас я вам расскажу пару фишек о том, как легко и точно прописать путь к файлу.

Вариант первый.

Выбираете нужный вам файл
Зажмите кнопку Shift и щелкаете правой кнопкой мыши.
В открывшемся меню выбираете копировать путь к файлу.
Вставляете сразу после = без кавычек. Они подставятся автоматически.

Если вы пользуетесь командной строкой на компьютере. Лично у меня она даже закреплена в панели задач. То..

Вариант второй.

Открываете командную строку
Просто перетаскиваете туда нужный файл
Получаете точный путь к вашему файлу. Копируйте и наслаждайтесь!

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

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.

Удачного кодирования!

понедельник, 27 июня 2016 г.

Установка cms Joomla на локальный сервер - Denwer

Прежде чем мы начнём установку Joomla 2.5 на Денвер, нам нужно создать папку для нашего сайта. Для этого есть два варианта:
Первый вариант - это создать папку в каталоге локального сервера.
C:\WebServers\home
Затем в папке \home нужно создать папку нашего сайта, например 'joomla' >> далее в папке 'joomla' нужно создать папку 'www', в этой папке будут находится файлы сайта. Тем самым, адрес, который мы будем набирать в браузере для доступа к сайту, будет:
http://joomla
Второй вариант - это создать папку в каталоге локального сервера.
C:\WebServers\home\localhost\www

Для этого в папке 'www' нужно создать папку для сайта, например 'joomla' >> и в эту папку нужно будет распаковать архив с Joomla
При этом адрес который мы будем набирать в браузере будет:
http://localhost/joomla

Лично мне больше нравится второй вариант, но вы можете использовать любой из них, разницы особо нет никакой, это только для удобства.
Итак, давайте создадим папку 'joomla' в каталоге:
C:\WebServers\home\localhost\www
и у нас получится
C:\WebServers\home\localhost\www\joomla
Теперь нужно распаковать в эту папку ('joomla') архив с Joomla, для этого скачайте Joomla и распакуйте скачанный архив в папку 'jooma'.

Примечание:
Для удобства Вы можете заходить в папку Вашего сайта через виртуальный диск (Z), который создался при установке Денвера. Более короткий путь в ту же самую папку будет:
Z:\home\localhost\www\joomla

'joomla' >> Папка файлов сайта (сюда распаковать архив с Joomla ).

Теперь нужно запустить Denwer (если он не запущен), затем набрать в браузере:
http://localhost/joomla и нажать кнопку 'Enter'.
В окне браузера откроется страница установки Joomla

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

На втором шаге установки Joomla проходит проверка на совместимость с сервером, в нашем случае это локальный сервер (Denwer).

Как видно на рисунке проверка прошла успешно и сервер полностью соответствует нашей версии Joomla, поэтому переходим к третьему шагу установки Джумла на локальный сервер, и нажимаем кнопку 'Далее'.

На третьем шаге нам предлагается согласиться с лицензией GNU/GPL.

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

Тип базы данных: 'MySQL'.
Имя сервера базы данных: 'localhost'.
Имя пользователя: 'root' - по умолчанию в конфигурации Денвера уже создан привилегированный пользователь 'root' для которого не задан пароль.
Пароль: оставляем это поле пустым.
Имя базы данных: 'my_site' можно ввести любое имя базы данных и она будет создана автоматически.
Префикс таблиц: оставляем это поле как есть.

На пятом шаге установки Joomla нам предстоит ввести параметры Конфигурация FTP. Обычно этот пункт всегда пропускается, тем более, что мы устанавливаем Joomla на локальный сервер.
Нажмите на кнопку далее, чтобы пропустить этот шаг.

На шестом шаге мы видим страницу, конфигурации сайта, где нужно ввести название и описание будущего сайта.
Здесь каждый заполняет как считает нужным, однако, если вы никогда не работали с Joomla, советую установить демо-данные, с ними вам намного проще будет разобраться с Joomla.

Седьмой шаг завершает установку Joomla и, установка не будет завершена, пока Вы не удалите директорию INSTALLATION, для удаления директории просто нажмите на кнопку удалить. Для входа в администраторскую зону (панель управления) по умолчанию логин admin, если вы его конечно не изменили в ходе установки на шестом шаге.

Для входа в панель управления наберите в Вашем браузере:

http://localhost/joomla/administrator
Для входа на сайт:

http://localhost/joomla

CMS сайта. Что это?

Для того, чтобы понимать и продолить создание своего сайта, давайте разберемся, что такое CMS и для чего она нужна.

CMS - это аббревиатура от Content Management System, что в дословном переводе означает "система управления контентом сайта" или просто "система управления сайтом". Иногда CMS называют "движок" сайта.

CMS - это программное обеспечение, которое позволяет разрабатывать и поддерживать динамические информационные web-сайты. Разные cms позволяют проектировать сайты различной сложности, вплоть до интернет-магазинов и информационных порталов.
Есть два основных вида cms:

cms работающие и располагающиеся в Интернете
cms установленные на компьютере и соединенные с сайтом автоматически или через интерфейс обновления файлов.

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

Цели и задачи cms (Content Management System) - управление, наполнение и редактирование информации и графики клиентом. Проще говоря, это система предоставляющая Вам возможности изменять и дополнять разделы, редактировать содержимое сайта, менять графику и дизайн сайта.

Система управления контентом сайта cms снижает стоимость создания и поддержки web-сайтов, а также увеличивает скорость обновления материалов. Т. е. время, которое проходит от появления материала у хозяина сайта до его публикации на сайте, благодаря CMS, становится минимальным.

Несомненным плюсом системы управления контентом cms является снижение стоимости администрирования и поддержки сайта. Это происходит за счет снижения потерь на зарплату web-мастеру, а также времени на поиски документов, пресечения дублирования и ошибок, увеличения скорости связи с партнерами и клиентами.. . Вам не потребуется нанимать специалиста для поддержки и развития проекта. С помощью CMS Вы сможете снизить зависимость стоимости сайта от объема размещенной на нем информации. Система управления контентом cms позволить вам размещать на сайте любые объемы информации.

Часто страницы сайта, базирующегося на cms, не хранятся целиком, а формируются "на лету" при обращении к ним, это позволяет повысить скорость загрузки страниц, так как шаблон страницы (дизайнерское оформление) загружается единожды и дальнейшим при запросе каждой новой страницы открывается уже с компьютера пользователя.

В системе управления сайтом часто реализуется механизм кэширования, который позволяет снизить нагрузку на оборудование и способствует увеличению скорости работы и пропускной способности сайта за счет сохранения результатов запросов к базе данных и статических материалов. Обычно систему CMS предлагает установить компания-разработчик сайта. Это более правильный вариант, т. к. система затачивается и адаптируется к Вашему сайту с самого начала. Так же системы CMS предлагают дополнительные функции и к сайту в последствии можно подключить форум, гостевую книгу, вопросы и ответы и т. д.

Перед установкой cms на свой сайт, посмотрите пост "Как установить денвер"

Установка денвера

Давайте разберемся с вами вначале, что такое Денвер и зачем он нам нужен. Денвер (от сокр. Д. н. w.р — джентльменский набор Web-разработчика [1]) — набор дистрибутивов и программная оболочка, предназначенные для создания и отладки сайтов (веб-приложений, прочего динамического содержимого интернет-страниц) на локальном ПК (без необходимости подключения к сети Интернет) под управлением ОС Windows.
Теперь переходим к установке Denwer.

Установка Denwer

Скачиваем Denwer Скачать денвер можно бесплатно с официального сайта: www.denwer.ru. Весит денвер совсем немного (6,2 Мбайта):

Запуск инсталлятора

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

Задание параметров установки

1. Первый параметр, который необходимо задать - это директория установки денвера:
Задание директории установки денвера
В рассматриваемом примере я не менял стандартную директорию и поэтому просто нажал Enter.

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

Я решил указать имя виртуального диска L. Для продолжения установки нужно будет нажать Enter:
Продолжение установки Denwer

3. Третий параметр - выбор режима запуска денвера (автоматически при запуске ОС или вручную). Я всегда выбираю 2 пункт, поскольку я пользуюсь денвером не часто:
Выбор режима запуска денвера.

Завершение установки

После завершения установки, у Вас должен открыться браузер и сообщить Вам о том, что "Denwer успешно установлен":
Завершение установки денвера

Использование Denwer

Пользоваться им очень просто

1.Для того, чтобы запустить денвер, достаточно кликнуть два раза на иконку "Start Denwer" на вашем рабочем столе. Там же вы сможете бес труда останвить работу денвера кликнув два раза на иконку "Stop Denwer".

2. Проверка работы денвера

Вбейте в адресной строке любого браузера: http://localhost/. Если все установлено верно, то должна открыться страница приветствия от денвера:
http://localhost/denwer/. После этого Вы можете начинать пользоваться денвером.

Куда заливать файлы сайта в Denwer

Для начала откройте "Мой компьютер", там после запуска денвера там должен появится ещё один виртуальный диск (в моем случае L):

Виртуальный диск

Файлы Вашего сайта должны будут лежать в директории: L:\home\localhost\www:

Файлы сайты должны лежать в home\localhost\www

На скриншоте я специально открыл файл index.php, чтобы Вы увидели редирект, который ведет на http://localhost/denwer/ (страница приветствия денвера), теперь становится понятно почему когда Вы проверяли работу денвера (в 2 пункте), была автоматически открыта страница http://localhost/denwer/. Подведу итог. Денвер установлен, все файлы из директории L:\home\localhost\www удаляйте и заливать сюда свой сайт. Далее Ваш сайт будет доступен в браузере при работающем денвере по адресу http://localhost/.

вторник, 21 июня 2016 г.

Как увеличить шрифт на странице.

Довольно часто приходится сталкиваться с обычным, казалось бы вопросом - как увеличить шрифт на странице блога или вашего сайта. Наверное все пользователи знают, что увеличить масштаб страницы, а с ней и увеличить шрифт, можно при просмотре обычным сочетанием клавиш Ctrl+(+) , а уменьшить Ctrl+(-) соответственно.

Этот метод подходит для пользователей, но не для владельцев блога. сайта, когда мы хотим, чтобы наш сайт выглядел красиво и был удобным для посетителя. В блогспоте это можно сделать зайдя в Шаблон - Настроить - Дополнительное - Текст страницы. Здесь вы можете выбрать подходящий шрифт, его Цвет и Размер. Я на этом останавливаться не буду. Если есть желание вспомнить, то посмотрите мой пост-"Как изменить текст в сайдбаре"

Многие пользователи используют шрифты из различных сервисов, например Google Fonts . Здесь тоже, нет ничего сложного. Достаточно выбрать нужный шрифт из понравившегося. Прописать его в CSS и задать необходимый размер.

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

Сейчас давайте разберем самый простой способ, который позволит пользователю увеличить шрифт на вашей странице сайта по своему вкусу. Для этого, мы идем в Дизайн нашего блога и в уже знакомой графе "Добавить гаджеты", выбираем "Добавить HTML/JavaScript". Лучше всего разместить это блог в верхней части вашего сайта на видном месте.

Добавляем в него следующий код:

Изменить размер текста 

<a href="javascript:void(0);"

onclick="javascript:body.style.fontSize='.5em'">

<span style="font-size: xx-small;">+</span>

</a> <a href="javascript:void(0);"

onclick="javascript:body.style.fontSize='1em'">

<span style="font-size: x-small;">+</span>

</a> <a href="javascript:void(0);" 

onclick="javascript:body.style.fontSize='1.5em'">

<span style="font-size: small;">+</span></a> 

<a href="javascript:void(0);" 

onclick="javascript:body.style.fontSize='2em'">

<span style="font-size: large;">+</span></a> 

<a href="javascript:void(0);"

onclick="javascript:body.style.fontSize='2.5em'">

<span style="font-size: x-large;">+</span></a>

Сохраняем и проверяем. Должно получиться точно так, как у меня на сайте Training
В этом блоге я решил не ставить этот гаджет, потому что вы,я уверен, можете без труда не только увеличить шрифт на странице, но и поставить свой и шрифт, и размер.
Экспериментируйте, пробуйте и делитесь своими результатами. Присоединяйтесь к сообществу в Google+ Business and IT technology (Бизнес и IT-технологии) и Facebook. Задавайте вопросы, делитесь своими успехами.

воскресенье, 19 июня 2016 г.

38 клавиатурных сокращений, которые работают в любом браузере

Работа с вкладками :

Ctrl+1-8 – Переключение на вкладку, положение которой на панели вкладок соответствует нажатой вами цифре.
Ctrl+9 – Переключение на последнюю вкладку независимо от ее номера.
Ctrl+Tab – Переключение на следующую вкладку, то есть на одну вправо.
Ctrl+Shift+Tab – Переключение на предыдущую вкладку, то есть на одну влево.
Ctrl+W, Ctrl+F4 – Закрыть текущую вкладку.
Ctrl+Shift+T – Открыть повторно последнюю закрытую вкладку.
Ctrl+T – Открыть новую вкладку.
Ctrl+N – Открыть новое окно браузера.

Навигация:

Alt+Стрелка Влево, Backspace – Назад.
Alt+Стрелка Вправо, Shift+Backspace – Вперед.
F5 – Обновить.
Ctrl+F5 – Обновить с игнорированием кэша, то есть загрузить страницу по новой.
Escape – Остановить загрузку.
Alt+Home – Открыть домашнюю страницу.

Масштабирование:

Ctrl+»+», Ctrl+Колесо мышки вверх – Увеличить.
Ctrl+»-», Ctrl+Колесо мышки вниз — Zoom out.
Ctrl+0 – Вернуть исходный масштаб.
F11 – Полноэкранный режим.

Скроллинг:

Space, Page Down – На один экран вниз.
Shift+Space, Page Up – На один экран вверх.
Home – В начало страницы.
End – В конец страницы.

Адресная строка:

Ctrl+L, Alt+D, F6 – Выделить текст в адресной строке.
Ctrl+Enter – Автоматически добавит www. в начало и .com в конце введенного вами слова и откроет эту страницу.
Alt+Enter – Откроет набранный адрес в новой вкладке.

Поиск:

Ctrl+K, Ctrl+E – Фокусировка на встроенном в браузер поле поиска для ввода запроса.
Alt+Enter – Открыть результаты поиска в новой кладке.
Ctrl+F, F3 – Открыть инструмент поиска по текущей странице.
Ctrl+G, F3 – Найти следующее значение при поиске по странице.
Ctrl+Shift+G, Shift+F3 – Найти предыдущее значение при поиске по странице.

История & закладки:

Ctrl+H – Открыть просмотр истории.
Ctrl+J – Открыть загрузки.
Ctrl+D – Сохранить закладку на текущий сайт
Ctrl+Shift+Del – Открыть инструмент очистки истории, кэша, загрузок и т.д.

Другие функции:

Ctrl+P – Печать текущей страницы.
Ctrl+S – Сохранить страницу на жесткий диск.
Ctrl+O – Открыть файл.
Ctrl+U – Посмотреть код текущей страницы. (Кроме IE).

среда, 15 июня 2016 г.

Как добавить картинку вместо маркеров в списке.

Мы с вами уже изменяли, некоторым образом, оформление наших списков. Про это я рассказывал в прошлом посте: «Как изменить оформление списка»

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

Для этого нам понадобится сама картинка. Я рекомендую использовать небольшие изображения, примерно 16х16 рх . Следует помнить, что сам сюжет на картинке, если там таковой имеется, лучше расположить ближе к левому краю. Так у вас будет лучше смотреться вся конструкция.

Сделать картинку можно самому. Как это сделать я рассказывал в отдельном посте. Посмотрите здесь. «Как сделать прозрачный фон укартинки»

Теперь, когда у нас есть готовая картинка, нам нужно загрузить ее в интернет и получить ссылку. Это я подробно рассказывал в посте«Как загрузить картинку в интернет и получить ссылку»

Теперь остается перейти к самому главному – редактированию нашего кода. Как вы помните из поста «списки» состоят из li ( открывающего и закрывающего) внутри ul

<ul>

</ul>

Теперь, для того, чтобы поставить вместе маркера картинку, в наши список, нам остается прописать только CSS код :

ul {

list-style-image: url(images/book.png); /* Путь к изображению маркера */

}

Все готово. Осталось только напомнить, что CSS код вставляется в блоге в разделе Шаблон – Настроить – Дополнительные – Добавить СSS.

От себя добавлю, что код , который вы добавляете, лучше всего комментировать текстом (что это и для чего добавлено). Для добавления комментария в CSS используйте /*---Здесь комментарий---*/ ,а в HTML <!--<комментарий>- ->

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

Для этого, нам нужно присвоить списку какой либо класс. Например, вот так:

</ul>

А уже в CSS написать :

.news li{

list-style-image: url(https://sites.google.com/site/youmorestop/home/arrow_1.png);

}

.news a:hover{

color:red;

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

маркером перед всеми тегами li , которые расположены внутри класса news, будет картинка, которая находится по этому адресу: https://sites.google.com/site/youmorestop/home/arrow_1.png
При наведении курсора (a:hover) на ссылку «а», которая находится внутри класса news , цвет ссылки меняется на красный.

Результат можете посмотреть в блоге «Трейдер», раздел «Новости».Я сделал, таким образом, там страницу.

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

Бывают случаи, когда в списке нужен:

Нужен квадратный маркер:
list-style-type: square;

Если нам не нужен вообще маркер, то ставим:

list-style-type: none;

Если хотим символ вместо маркера, то например так:

li {

list-style-type: none; /* Убираем маркеры у списка */

}

li:before {

content: "ƥ "; /* Добавляем в качестве маркера символ */

}

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

Страницы

Translate

Поиск по этому блогу

понедельник, 5 декабря 2016 г.

Click on this text!

Изменения при наведении мышкой

вторник, 22 ноября 2016 г.

Массивы и переменные

Переменные

Массивы

воскресенье, 20 ноября 2016 г.

Основы Jquery

Подключение библиотеки

Выбор элементов

Методы и Действия JQuery

События JQuery

Показать или скрыть

четверг, 10 ноября 2016 г.

понедельник, 7 ноября 2016 г.

вторник, 9 августа 2016 г.

Изменение стиля CSS с помощью javascript

понедельник, 8 августа 2016 г.