Изменение стилей 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 может отобразить скрытые элементы

В данном случае мы изменили в коде только значение none, на block В абзаце, который мы создали с новым элементом id дописали стиль. Вот так:
<div id="demo_hidden" style="display:none">

Переключение картинок 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 (источника) изображения.

 

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

Абсолютные и относительные ссылки. Как указать путь к файлу правильно Абсолютные ссылки всегда начинаются с имени протокола. Например 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>

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

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

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

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

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

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

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

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

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

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

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

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

Установка 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:

1. cms работающие и располагающиеся в Интернете
2. 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/.
                                                                                                                                                             

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

Довольно часто приходится сталкиваться с обычным, казалось бы вопросом - как увеличить шрифт на странице блога или вашего сайта. Наверное все пользователи знают, что увеличить масштаб страницы, а с ней и увеличить шрифт, можно при просмотре обычным сочетанием клавиш 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. Задавайте вопросы, делитесь своими успехами.