Как редактировать HTML код, убираем все лишнее с сайта! Как внести изменения на сайте


Как редактировать страницы сайта: пошаговая инструкция

Чтобы редактировать страницы сайта, зайдите в админку и выберите раздел «Страницы» в меню слева.

Перед Вами откроется перечень страниц, которые наполняют Ваш сайт. Выберите страницу, в которую нужно внести правки, и нажмите кнопку «Редактировать».

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

Например, у секретаря организации изменился номер телефона, и Вы хотите внести эту информацию на сайт. В меню Вашего сайта есть страница «Контакты», а в нее вложены страницы «Директор», «Зам. директора», «Секретарь». Тогда в перечне страниц сайта Вам нужно выбрать страницу первого уровня — «Контакты» — и нажать на синюю папку рядом с названием страницы. Откроется список вложенных страниц: выберите из них нужную (в нашем случае — «Секретарь») и нажмите «Редактировать».

Теперь перед Вами открыты поля для редактирования страницы: Вы можете создавать, удалять и редактировать блоки, менять их местами, редактировать оформление и заголовки и т.д. С подробной информацией о том, как работать с блоками, Вы можете ознакомиться в отдельной статье.

Обратите внимание: при редактировании страницы крайне нежелательно изменять значение поля «Имя для построения URL». Дело в том, что это значение используется для построения адреса страницы, которое мы видим в адресной строке браузера.

 

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

Когда Вы внесете все необходимые изменения, не забудьте сохранить страницу.

Если Вы внесли изменения, но не хотите их сохранять, нажмите «Отмена». В этом случае страница на сайте сохранит свой первоначальный вид.

Также Вы всегда можете добавить на сайт новые страницы, подробнее об этом - в отдельной статье.

nubex.ru

Как редактировать сайт?

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

Как редактировать сайт HTML

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

WYSIWYG — это аббревиатура означает: "что вижу, то и получаю". Современные веб-дизайнеры, пишущие на html, в основном используют такие редакторы. Самый известный из них - Dreamweaver. Он позволяет не только легко создавать, редактировать страницы и управлять структурой сайта, но и автоматически выгружать готовые изменения в интернет.

Dreamweaver стоит немалых денег и для начала можно попробовать альтернативы, например phpDesigner, который значительно дешевле, Codelobster у которого есть бесплатная версия, или полностью бесплатный редактор с открытым исходным кодом QUANTA PLUS для linux.

Как редактировать сайт CMS

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

WordPress — самая простая из всех CMS, изначально предназначенная для создания персональных блогов, но позволяет создавать и вполне функциональные сайты.

Joomla — имеет более широкие возможности, но несколько труднее в ос

elhow.ru

Как изменить информацию на сайте?

После того как веб-дизайнер создаст и поместит сайт на хостинге, многих владельцев таких сайтов ставит в тупик вопрос - как же добавить туда что-нибудь свое? Действительно, не все владельцы сайтов имеют навыки HTML-программирования, но любому из них рано или поздно потребуется что-то поменять на своем сайте, добавить информацию или вставить картинки. Эта инструкция по установке шапки для сайта основана на стандартном шаблоне Ucoz, все, что применимо к нему, в 95 процентах случаев применимо и к любому другому сайту.Создать сайт самостоятельно с Wix.com

Вам понадобится
  • Компьютер, доступ в интернет, сайт
Инструкция
  • Перед созданием шапки, создайте картинку для шапки сайта, которая будет зависеть только от вашей фантазии. Вам требуется закачать картинку для вашей шапки на хостинг, при закачке не забудьте, что название должно быть на английском языке или необходимо выбрать название типа 1.jpeg, закачка делается через любой файловый менеджер (например FAR Manager).
  • Щелкните правой кнопкой мыши по странице своего сайта в системе Ucoz . Выберите «Общие», далее «Панель управления». Введите пароль. После подтверждения правильности пароля, перейдите в раздел «Дизайн» - «Управление шаблонами».
  • Найдите глобальный блок «Верхняя часть сайта», найдите закаченный файл под названием 1.jpeg. Если вы его не нашли, отправляйтесь в «Панель управления» - «Управление дизайном» - «Таблица стилей CSS». Тут и найдете свой потерянный файл 1.jpeg.
  • После того как вы найдёте искомый файл, отыщите ссылку на файл, который установлен стандартно на вашем сайте. Замените ссылку на этот стандартный файл, ссылкой на свой файл (в данном случае это1.jpeg). Перегрузите страницу и наслаждайтесь новой шапкой вашего сайта!
  • По такому же принципу, вы можете заменять любой фон сайта, блоки или весь стиль оформления. Запомните! Вам нужно только изменить ссылку, не забывая сохранять кавычки. Если по каким-то причинам у вас изменился номер телефона и электронной почты, надо просто обновить информацию в своем «Личном кабинете».
  • Для этого зайдите в «Личный кабинет», используя зарегистрированный логин и пароль. Затем выберите раздел под названием «Настройки». Введите новый адрес своей электронной почты и номер телефона. Введите свой текущий пароль и нажмите кнопку «Сохранить».
  • Оцените статью!

    imguru.ru

    Как изменить дизайн блога или дизайн сайта?

    Привет, дорогие читатели блога! Сегодня я расскажу как изменить дизайн блога или дизайн сайта. В современном сайтостроении смена дизайна сайта не представляет трудности, и с ней справиться даже пользователь, не знающий HTML и CSS, ведь благодаря движку сайта, дизайн можно менять и в визуальном редакторе.

    дизайн сайта

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

    Конечно в зависимости от того на каком движке у вас сайт, смена дизайна может немного отличаться но в целом все идентично. В статье я расскажу:

    Зачем нужно менять дизайн сайта или блога?Из каких элементов состоят web сайты?Как быстро изменить дизайн сайта на WordPress?Как изменить шапку блога или сайта?Как изменить дизайн сайдбара и элементов в нем?Изменить подвал сайта (footer).Как изменить дизайн страниц с текстом?

    Зачем нужно менять дизайн сайта или блога?

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

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

    Из каких элементов состоят web сайты?

    Несмотря на то, что в сети интернет существует миллионы сайтов, структура всех веб сайтов схожа:

    структура сайтов

    • Header – шапка сайта;
    • Footer – подвал;
    • Sidebar – сайдбар или боковая колонка;
    • Body – тело страницы;

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

    Как быстро изменить дизайн сайта на WordPress?

    Так как я использую движок WordPress, начну традиционно с него.

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

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

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

    И затем загрузить его в корневую директорию блога через FTP клиент или напрямую через браузер.

    Чтобы добавить новую тему через браузер, выберете в меню «Внешний вид», «Темы», «Добавить новую».

    настройка внешнего вида

    добавить тему

    Обращу ваше внимание, что лучше устанавливать адаптивную тему, чтобы ваш блог было удобно просматривать на мобильных телефонах и планшетах.

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

    Заходим в раздел «Внешний вид», «Настроить». Перед вами будет раздел настроек. В зависимости от особенностей шаблона, этот раздел может несколько отличаться, но в целом принцип схож.

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

    фон

     

    Если в разделе «Внешний вид» таковых настроек нет, возможно настройки дизайна темы вынесены отдельно. Проверьте так ли это. Для этого зайдите в раздел «Внешний вид», «Настройка темы».

    настройка темы

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

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

    Весь дизайн блога формируется в одном файле style.css

    Как изменить дизайн шапки блога или сайта?

    В файле style.css найдите раздел «HEADER». В этом разделе можно изменить дизайн шапки сайта, изменить цвет и размер шрифта названия сайта и его описания, а так же при необходимости изменить размер шапки сайта.

    Для того, чтобы изменить дизайн шапки сайта, будем менять саму картинку, для этого в разделе «HEADER» ишем фоновое изображение, обычно оно находиться в классе #site-heading, #header-logo или что-то вроде этого и следует за значением background.

    шапка сайта

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

    Как изменить дизайн сайдбара и элементов в нем?

    В визуальном редакторе дизайн сайдбара изменить нельзя. Можно лишь менять местами блоки. Для того, чтобы изменить дизайн сайдбара сайта, снова заходим в файл Style.css и ищем раздел «SIDEBAR».

    Аналогично изменению шапки сайта, меняем и сайдбар.

    • Фоновое изображение – background;
    • Ширина сайдбара – width;
    • Рамка сайдбара – border;

    Изменить подвал сайта (footer)

    Чтобы изменить подвал сайта, нужно в файле style.css найти раздел «FOOTER».

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

    Так же как в предыдущем случае ищем фоновое изображение background и меняем на свое, затем меняем цвет и размер шрифта и ссылок.

    • font-size – размер шрифта;
    • color – цвет шрифта;
    • text-align – расположение текста;

    Как изменить дизайн страниц с текстом?

    Очень часто бывает, что скачав бесплатный шаблон, web мастер недоволен не только дизайном сайта, но и цветом шрифта, а так же его размером.

    Для того чтобы изменить шрифт, в файле style.css ищем значение bodyи меняем :

    • Размер шрифта и сам шрифт – font;
    • Цвет шрифта – color;
    • Фон страницы – background;

    дизайн страницы

    На скриншоте видно, что для дизайна страницы сайта заданы значения:

    • Шрифт – Arial, Verdana, Geneva;
    • Размер шрифта – 14 пикселей;
    • Отступ между строками – 1.6;
    • Цвет шрифта – черный;
    • Фон страницы – белый;

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

    nazyrov.ru

    Как редактировать HTML код на сайте самостоятельно!

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

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

    Как редактировать HTML код!

    Посмотрите на картинке, как вообще устроен блог и что за что отвечает.

    Далее Вам это пригодится:

    как редактировать html

    Я  предлагаю отредактировать вот эти элементы для начала:

    Как редактировать HTML

    Начнем с заголовка. Заголовок должен, конечно, соответствовать выбранной тематики блога. У меня тематика связана с созданием, продвижением и заработке на блоге. Заходим в админ-панель, далее внешний вид-настроить. Открылась окно с настройками, меняем заголовок и краткое описание блога. Вот как то так: (Razvitie. Создание и продвижение блога!!!) В этом же окне есть пункт «Статическая главная страница» я её оставил без изменений, если при входе на сайт, вы хотите чтобы всегда открывалась какая то определенная страница, то создайте ее и выберите статистическая. Не забудьте сохранить и активировать.

    Теперь настраиваем сайдбар, убираем колонки (форму поиска, последние записи, последние комментарии, архивы, управление). Для этого заходим в панель управления — внешний вид — виджеты.

    Как редактировать HTML

     

    Таким образом, убираем с блога разные виджеты. Когда необходимо будет восстановить обратно их, нужно просто перетащить нужные вам из соседнего меню слева.

    Так форму даты пока не будем трогать, а вот тестовую страницу удалим. Заходим в панель управления, далее кликаем на меню страницы, ставим галочку и перемещаем в корзину. Штуки, которые снизу поста мы тоже можем оставить, это кнопки навигации – они пока не активны т.к. у нас всего одна запись.

    Так вот смотрите, под записью есть 2 кнопки «Подробнее и 1 комментарий», я хочу слово подробнее изменить на «читать далее». Это очень просто сделать. Запустите свою FileZille и установите соединение со своим блогом. Дальше значит, открываем по очереди (domains, ваш блог, wp-content, themes и выберайте вашу тему).

    Находим файл “index.ph” и перетащите его на свой рабочий стол. Чтобы открыть его, вам понадобиться любой блокнот (notepad++ или akelpad). Открываем его и находим строку

    <div> <a href="<?php the_permalink() ?>">Подробнее...</a> </div>

    <div>

    <a href="<?php the_permalink() ?>">Подробнее...</a>

    </div>

    Теперь просто заменяем слово «подробнее» на своё, я пишу «читать далее». Не забудьте сохранить изменения, и переносим его обратно, откуда взяли. Теперь обновите блог и посмотрите что получилось. Также в файлах (page.php, singlе.php, archive.php) это же слово надо изменить. Делайте это осторожно, не задевая другие составляющие кода!!! 

    Вообще редактировать HTML код страниц не сложно, главное понять как устроен код. Есть специальные курсы по изучению HTML и СSS языка, с их помощью узнаете как редактировать HTML на профессиональном уровне. Изучите хотя бы бесплатные курсы чтобы знать как редактировать код страниц своего сайта. В интернете масса бесплатных курсов.

    Далее отредактируем файл “single.php”.

    Также в программе FZ находим этот файл в той же папке, и переносим его на рабочий стол.

    Как редактировать HTML

    Открываем файл и смотрим, что мы можем изменить. Формат даты можно установить как вам угодно. Для этого в файле ‘’single.php” изменяем вот эти сочетания (y.d.m – d/m/y – D-m-Y и т.д.) Сохранитесь, обновите и смотрите что получается!

    Как редактировать HTML

     

    Из той же папке найдите и перетащите на рабочий стол файл

    В нем мы заменим фразу «Leave a Reply» на «Оставьте и вы свой комментарий!»

    И исправим на русский язык слово “comments’’. А вообще в принципе это слово можете и удалить, оно и так понятно, что это страница с комментариями.

    Как редактировать HTML

    Как редактировать HTML

      Смотрим что получилось!

     

    Редактирование шаблоКак редактировать HTMLна блога

    Ещё один момент по редактированию файла “archive.php”.

    Если перейти на вкладку новости после даты и автора есть надпись “Edit”, её можно заменить на свою. Для этого переместите файл на рабочий стол и откройте его. 

    Как редактировать HTML

    Забыл еще кое-что. Откройте свою запись, и там видно под словом «комментарии» есть надпись («2 комментария к «привет мир!»). Предлагаю написать («2 комментария к записи «привет мир!»). Откройте файл “comments.php” найдите нужную строку и вставьте свое слово.

    Как редактировать HTML код

    Открываем запись и смотрим что у нас еще и здесь маленькое неправильно оформлены записи комментариев:

    Как редактировать HTML страницу

    Чтобы её убрать, откройте файл “singl.php” и удалите вот эту строку:

    Udaljaem-stroku

    Теперь удаляем стандартную первую запись, точно также как и страницу (панель управления – записи – запись «Привет мир!» перемещаем в корзину). После удаления у меня появилась надпись «К сожалению, по вашему запросу ни чего не найдено», возможно, у вас она тоже появилась! Все зависит от вашего шаблона. Комментарий тоже удалите, чтобы у Вас ни чего не осталось.

    Полезные сочетания клавиш, если вдруг кто не знает:

    (ctrl+A – выделить все, ctrl+Z – удалить, ctrl+X – вырезать, ctrl+C – копировать, ctrl+V – вставить). Сочетания клавиш в браузере и программе “notepad++:

    (ctrl+u – открыть исходный код страницы, ctrl+f – открыть поиск файлов).

    С помощью этих сочетаний Ваша работа намного будет приятнее :)

     

    Думаю, что у Вас все получилось! На этом я заканчиваю данный урок, получилось много информации, делайте все внимательно – ради Вашего блога. Изучайте основы HTML чтобы узнать самим как редактировать HTML код страниц своего сайта.

    Всем пока, и до встречи в следующем уроке. Не пропустите!

    blogorazvitie.ru

    Как изменить дизайн готового сайта. Азбука CSS

    Итак, у вас есть готовый сайт на UMI.ru. С профессиональным дизайном, тщательно спроектированными интерфейсами, настроенными стилями форматирования. Но что делать, если текущий шаблон вам не совсем подходит: хочется изменить внешний вид сайта, поиграть с цветами, адаптировать веб-страницы под ваш корпоративный стиль или ваше видение? Как изменить сайт?

    Прежде всего, внимательно изучить все основные правила юзабилити и сверять с ними все дальнейшие действия. И действовать!

    А можно такой же, но с перламутровыми пуговицами? Да!

    На 1С-UMI есть возможность изменить внешний вид готового сайта несколькими способами, которые можно сочетать или использовать по отдельности:

    1. Самый простой способ — изменить вид страниц сайта при помощи картинок. 

    • Поставьте ваш логотип в левом верхнем углу сайта. Если у вас нет логотипа – это может быть любое имиджевое изображение, дающее понять, чему посвящен сайт. Это может быть даже ваша фотография – если бизнес привязан к вашей личности (например, уроки английского языка).
    • Замените основное имиджевое изображение в “шапке” сайта. Это ключевой элемент вашего брендинга и первое, что увидит посетитель вашего сайта, поэтому подбирайте изображение очень тщательно. Оно должно быть качественным, демонстрировать суть вашего предложения и особенности позиционирования. Использовать его можно также в качестве временного или постоянного баннера, рекламирующего какое-либо предложение или акцию.
    • Добавьте картинки, иллюстрирующие текст сайта. Это легко сделать при помощи визуального редактора. Иллюстрации в тексте нужны, но, в зависимости от использования, они могут как улучшить сайт, так и испортить его. Про то, как грамотно работать с изображениями для веб-страниц, мы поговорим отдельно, в другой раз.

    Исходный шаблон дизайна:

    скриншот исходного шаблона

    Шаблон, измененный при помощи картинок:скриншот сайта

     

    2. Самый радикальный способ - изменить шаблон дизайна.

    Этот способ подойдет, если вы хотите полностью изменить внешний вид сайта, выбрав другую тематику оформления. Для этого просто зайдите в раздел “Дизайн – Смена дизайна” в панели управления вашего сайта и выберите новый дизайн. При этом, вы можете сохранить все внесенные изменения: тексты, картинки, структуру, объекты каталога и т.д.

    3. Самый творческий способ - редактирование стилей CSS.

    CSS - это технология описания внешнего вида веб-страниц, написанных на языке разметки HTML. Определенные стили CSS уже применены к готовым сайтам на UMI.ru и описывают внешний вид всех элементов: текстов, кнопок, ссылок, меню, “хлебных кошек” и др. Для их изменения необходимо прописать новые стили в специальном файле, который находится в разделе “Дизайн” - “Управление CSS” в панели управления вашего сайта (доступно на платном тарифе).

    С помощью стилей CSS можно изменить:

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

    Все это можно сделать самостоятельно, но вам потребуются некоторые базовые знания о редактировании стилей CSS. Не пугайтесь, вам не придется сочинять код: все стили уже есть в специальных учебниках. Разобраться в основах вам поможет отличный самоучитель CSS - htmlbook.ru, а получить нужный код - генераторы CSS:  css3maker.com и css3generator.com. А если у вас есть знакомые, знающие язык HTML, то они с легкостью помогут в редактировании стилей.

    И сайт превращается…

    Как изменить сайт при помощи CSS и посмотреть, какие стили уже применены к элементам страниц - вы узнаете из нашего руководства. 

    А чтобы вы поняли, насколько это легко - разберем несколько примеров.

    Действия с объектами

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

    Перед тем, как изменить сайт, не забудьте сохранить его резервную копию - тогда вы сможете его легко восстановить с случае неполадок. Теперь можно приступать к редактированию. При помощи инструмента инспектирования кода (в нашем примере использован Firebug в браузере Mozilla Firefox) находим код необходимого элемента - в данном случае, это код кнопки:

    скриншот адаптивного сайта

    В правом окошке инспектора “Стиль” прописан код, обозначенный разными цветами:  

    • черным - класс (в данном случае, кнопка),
    • зеленым - CSS-свойство (в данном случае, цвет),
    • синим - значение (в данном случае, голубой),
    • зачеркнутый код обозначает, что данный стиль не работает, поскольку конфликтует с другим, более приоритетным стилем.

    Мы видим, что класс кнопки называется .direction_title. Чтобы понять, какой фрагмент представленного кода отвечает за цвет, можно “перевести” зеленые теги, воспользовавшись поиском в справочнике. За цвет фона кнопки отвечает свойство background (не путайте со свойством color, оно отвечает за цвет шрифта). Сейчас кнопке присвоен стиль background: #1f1f1f; где background - это свойство, определяющее стиль фона, а #1f1f1f - голубой цвет в шестнадцатеричной кодировке цвета.

    скрин свойства backgroundЧтобы сделать кнопку красной, нужно узнать цифровой код красного цвета. Его можно посмотреть с помощью онлайн-палитры, либо в любом графическом редакторе, которым вы привыкли пользоваться (например, Microsoft Paint, Photoshop, онлайн-редактор и т.п.). Итак, код красного цвета - #ff0000: скриншот палитры цветов

    Теперь перейдем в раздел “Дизайн” - “Управление CSS” админзоны нашего сайта и пропишем новое значение для класса кнопки, соблюдая тот же синтаксис, что показывает инспектор в исходном коде: между открывающей и закрывающей фигурной скобкой помещают CSS-свойства со значениями, разделяя их знаком “;”.

    Таким образом, в общем виде схема CSS-кода выглядит так:

    Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

    • записываем класс (название элемента) - .direction_title
    • ставим фигурные скобки - { }
    • внутри фигурных скобок прописываем стиль кнопки - background:
    • после двоеточия указываем код красного цвета - #ff0000
    • в конце строки ставим ;
    • не забываем в самом конце закрыть фигурную скобку.
    скриншот схемы CSS-кода

    Что получилось: 

        Было                                                                                                   Стало

    скринщот адаптивного сайта с синей кнопкой скриншот адаптивного сайта после изменений

    Вторая задача: перемещение кнопки вверх и вправо на 100px.

    Для начала посмотрим значения текущего расположения кнопки с помощью инспектора, если нужно - “переведем” через самоучитель. Сейчас стоят значения bottom: 20px; left: 40px; где bottom - расстояние от нижнего края кнопки до нижнего края родительского блока, а left - расстояние от левого края кнопки до левого края родительского блока.

    скриншот значения текущего расположения кнопки

    Таким образом, для перемещения кнопки вверх и вправо на 100px нужно прибавить по 100px снизу и слева - получится 120px снизу и 140px слева. Добавим новые значения в наш файл стилей к уже прописанному классу нашей кнопки .direction_title, соблюдая синтаксис исходного кода:

    скрин изменения значений для перемещения кнопки вверх и вправо на 100px

    Что получилось:

        Было                                                                                                  Стало

    скрин адаптивного сайта с кнопкой внизускрин адаптивного сайта со смещенной кнопкой

    Изменение шрифтов

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

    Задача: изменить размер и цвет шрифта в заголовке “Новости”.

    Найдем класс заголовка и значения стилей при помощи инспектора кода Firebug, если нужно - “переведем” значения через справочник.

    скриншот инспектора кода Firebug

    Мы видим, что класс заголовка “Новости” называется .shop-heading, за размер шрифта отвечает свойство font-size, значение которого сейчас - 18px; а за цвет - свойство color со значением #111111 (темно-серый).

    Перейдем в раздел “Дизайн” - ”Управление CSS” админзоны сайта и изменим эти значения на нужные нам. Например, увеличим размер до 28px, а цвет изменим на красный. Как вы помните, цвет указывается в шестнадцатеричном коде:

    скриншот раздела CSS

    Сохраняем и смотрим, что получилось. Обратите внимание, что при изменении стиля элемента внешний вид поменяют ВСЕ элементы на сайте, к которым применен данный стиль. В нашем случае, стиль .shop-heading применен к заголовкам “Новости” и “Популярные товары”.

    Что получилось:

    Было                                                                                                          Стало

    скрин каталога с черным шрифтом

    скриншот каталога с караным шрифтом

     

     

     

     

     

     

     

     

     

     

     

    Еще несколько примеров работы с CSS описаны в нашем руководстве.

    Возможные сложности

    1. Не “срабатывают” стили, прописанные в файле CSS.    Решение: после значения свойства прописать правило !important, которое позволяет повысить приоритет стиля. Например:

    .shop-heading{ color: #ff0000 !important; font-size: 28px !important;}

    2. Вам не понравился результат работы со стилями. Решение: просто очистить файл стилей CSS в админзоне.

    3. Если после изменения CSS вы сменили шаблон дизайна, то прописанные вами стили сохранятся, но могут не работать в случае, если на новом шаблоне используется другая верстка. Решение: внести изменения в CSS заново, с учетом новой верстки.

    umi.ru

    Легкое изменение кода сайта

    Изменение в незнакомом движке

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

    Первая задача состоит в следующем:

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

    У меня недавно возникло желание удалить из URL-адреса ссылки “Читать далее” на этом блоге код, который прокручивал страницу подробного содержимого статьи к месту установки тега more. Такое поведение WordPress мне не понравилось, как-то сбивает это все с толку и я решил удалить лишнее из URL-адреса, а именно, кусок кода #more.

    Кто не понял постановки задачи, поясню: аналогичное прокручивание страницы вы можете увидеть перейдя по ссылке к комментариям данной статьи. Страница будет проскролированна благодаря содержащейся в URL инструкции #comments (подробнее о работе с такого рода ссылками можно прочитать на HTML-book). Все тоже самое происходило со ссылкой Читать далее, с той лишь разницей, что страница скролировалась к якорю more. В программном коде движка нужно было найти то место, где указана эта директива и удалить ее.

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

    Оказывается все очень просто. Нам потребуется программа Total Commander и ее способность искать текст внутри файлов.

    Интерфейс поиска вызывается нажатием горячих клавиш Alt + F7.

    В интерфейсе поиска нас будет интересовать раздел, относящийся к возможности искать заданный текст внутри файлов.

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

    Поиск можно производить как в файлах локального компьютера, так и на сервере. Я подключился к серваку, используя возможности все того же Total Commander-а.

    Для тех кто не в курсе:

    Горячее сочетание клавиш Ctrl + F вызывает диалог подключение к серверу.

    • Нажимаете кнопку Добавить.
    • Вводите Имя соединения (любое буквосочетание, чтобы самому потом вспомнить к чему происходит подключение).
    • Указываете Сервер[:Порт], здесь достаточно указать адрес вашего FTP-подключения (его сообщает провайдер).
    • Учетная запись и Пароль (пароль лучше не указывать, а вводить его каждый раз в ручную при подключении, дабы защитится таким образом от всяких троянов, сами знаете).
    • Иногда нужно ставить галочку рядом с пунктом Пассивный режим обмена (как Web-браузер), иначе будут постоянно происходить обрывы подключения.

    Но сейчас речь не об этом.

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

    После завершения поиска мне были показаны 2-а файла, в которых был обнаружен искомый текст. Открыв первый файл и перейдя к месту расположения текста #more, я понял, что достиг цели.

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

    Теперь пойдем чуть дальше и разберем еще одну задачу:

    “Необходимо сделать замену одинакового куска кода в большом количестве файлов”

    У меня частенько возникает такая задача. Например, сайт сделан на чистом HTML и нужно заменить на всех его страницах подпись в футере. Тут либо лазить текстовым редакторам по всем файлам, либо как-то автоматизировать этот процесс.

    Займемся автоматизацией. Для этого нам понадобится мой любимый редактор PSPad.

    Выбираем пункт Поиск и замена:

    Поиск и замена в файлах

    И в интерфейсе поиска указываем искомую фразу (текст, который был в футере) и новое содержимое, ниже выбираем место для поиска (папку, в которой расположен наш сайт) и замену за нас делает робот, а мы продолжаем пить кофе.

    С уважением, Андрей Морковин.

    www.sdelaysite.com