Как найти и изменить код html
Категория: Оптимизация и продвижение сайта Опубликовано: 25.11.2016
После установки шаблона, со временем у начинающих веб мастеров возникает закономерный вопрос, как изменить цвет, стилистику написания заголовков, добавить объем и сделать шрифт тех же заголовков побольше. Многих новичков это вводит в ступор, так как непонятно, что и где искать.
Конечно, можно заняться глубоким изучением всех этих тонкостей сайтостроения, но пока еще на горизонте перспектив, как таковых не наблюдается, становится еще один закономерный вопрос, а оно вам нужно?
На освоение азов веб-мастеринга у вас уйдет приличный отрезок времени. А время это деньги. Поэтому если вы нуждаетесь в незначительной корректировке некоторых элементов шаблона и не знаете, как найти нужный код HTML в независимости от платформы сайта, эта статья именно для вас.
HTML и CSS — взаимосвязь
На самом то деле тема должна называться как-то наподобие: «Как править код CSS». Ну да ладно начнем мы с HTML, а закончим CSS. Все дело в том, что при необходимости изменения цвета, шрифта сайта, хлебные крошки приводят к файлам СSS.
Давайте для начала определимся с этими двумя понятиями:
— Код HTML является основой, на которой создается сайт. Именно благодаря нему браузер понимает, какие элементы и в каком порядке выводить на ту или иную страницу.
— Код CSS является языком программирования, отвечающим за внешний вид веб-страниц. Именно этот код должен поддаваться правке при надобности изменения внешнего вида сайта.
Становится очевидным, что если нужно изменить, к примеру, цвет заголовка в статье либо в пунктах меню, то в правке нуждается один из файлов CSS. Именно это нужно уяснить на начальном этапе внесения изменений самостоятельно.
Где находится html код страницы
Не буду скрывать, что в начале моего ознакомления с принципами сайтостроения, я был не то, что чайником, я был настоящим ржавым самоваром. Поэтому у вас, как и у меня все обязательно получится.
И так возвращаясь к теме изменения кода страницы, необходимо сначала посмотреть html код. Я расскажу на примере браузера Opera, так как работаю в основном в нем. Спешу сообщить, что если вы предпочитаете пользоваться иным браузером, не стоит сразу же закрывать эту страницу, поскольку принцип проверки в независимости от браузера практически идентичен.
Как изменить стиль заголовка
В одной из предыдущих статей я рассказал, «Как убрать ссылку из заголовка Joomla», а сегодня вы узнаете, как все это дело подправить и сделать более привлекательным.
Допустим нам нужно изменить цвет и размер заголовка статьи.
Для этого нажимаем по нему левой кнопкой мышки и в открывшемся окне выбираем «Посмотреть код элемента». После чего в левой части экрана нашему вниманию предстанут фантастические иероглифы, с помощью которых мы и определим, где собака зарыта.
Таким способом можно посмотреть и подправить практически каждый элемент шаблона.
Далее хочу обратить ваше внимание на скриншот.
В его верхней части я выделил HTML код, отвечающий за вывод заголовка h1. По умолчанию при проверке он подсвечивается серым фоном. Ну да ладно, это так для общего сведения.
Нам же нужно обратить внимание в нижнюю часть скриншота, где расположены скрипты, отвечающие за вывод CSS стилей.
Хочу сразу же предупредить, что в зависимости от шаблона название CSS файла может отличаться, но, как правило, это style.css или template.css.
И так с файлом мы определились, но как узнать где он находится? Элементарно просто, нужно навести курсор мышки на расположенное с правой стороны слово style.css, после чего возле него отобразится путь нахождения файла. Вместе с тем здесь же будет указана и строка, которую нам нужно подправить. Как видно на картинке это первая строка.
Важный момент! Перед тем как вносить изменения сделайте резервную копию сайта, так сказать на всякий пожарный
Некоторые свойства CSS
Ниже я приведу некоторые свойства, с помощью которых можно внести определенные изменения и поэкспериментировать со стилями.
— font-size – изменение размера текста.
— text-decoration – в зависимости от команды сюда относится зачеркивание и подчеркивание текста, а также выделение линиями.
— font-family – семейство шрифтов.
— font-weight – выделение.
— color – цвет текста.
Если у вас после корректировки ничего не изменилось, очистите кэш браузера. Как видите, чтобы изменить внешний вид заголовков и освежить дизайн сайта всего лишь понадобится подправить css код, а ни как не изменить код html.
Спасибо за внимание и до скорого на страницах Stimylrosta.
Оставить комментарий
- ВКонтакте
Источник: http://stimylrosta.com.ua/optimizatsiya-i-prodvizhenie/57-kak-najti-i-izmenit-kod-html
Как редактировать HTML код, убираем все лишнее с сайта!
Для того чтобы понять как как редактировать HTML код страниц, советую Вам от начала до конца прочитать этот пост, чтобы принимать какие-то решения по редактированию кодов. До того как начать редактировать, изменять какой либо код, настоятельно Вам рекомендую сделать резервные копии ваших файлов, если вдруг вы что то лишнее затронете Ваш блог может перестать правильно функционировать!!!
После того как поменяли тему блога (может кто то и не менял, оставил стандартную), убираем не нужные пока нам вещи. Если вы установили такую же тему как у меня, то вам будет гораздо проще и быстрее во всем разобраться.
Как редактировать HTML код!
Посмотрите на картинке, как вообще устроен блог и что за что отвечает.
Далее Вам это пригодится:
Я предлагаю отредактировать вот эти элементы для начала:
Начнем с заголовка. Заголовок должен, конечно, соответствовать выбранной тематики блога. У меня тематика связана с созданием, продвижением и заработке на блоге. Заходим в админ-панель, далее внешний вид-настроить. Открылась окно с настройками, меняем заголовок и краткое описание блога.
Вот как то так: (Razvitie. Создание и продвижение блога!!!) В этом же окне есть пункт «Статическая главная страница» я её оставил без изменений, если при входе на сайт, вы хотите чтобы всегда открывалась какая то определенная страница, то создайте ее и выберите статистическая.
Не забудьте сохранить и активировать.
Теперь настраиваем сайдбар, убираем колонки (форму поиска, последние записи, последние комментарии, архивы, управление). Для этого заходим в панель управления — внешний вид — виджеты.
Таким образом, убираем с блога разные виджеты. Когда необходимо будет восстановить обратно их, нужно просто перетащить нужные вам из соседнего меню слева.
Так форму даты пока не будем трогать, а вот тестовую страницу удалим. Заходим в панель управления, далее кликаем на меню страницы, ставим галочку и перемещаем в корзину. Штуки, которые снизу поста мы тоже можем оставить, это кнопки навигации – они пока не активны т.к. у нас всего одна запись.
Так вот смотрите, под записью есть 2 кнопки «Подробнее и 1 комментарий», я хочу слово подробнее изменить на «читать далее». Это очень просто сделать. Запустите свою FileZille и установите соединение со своим блогом. Дальше значит, открываем по очереди (domains, ваш блог, wp-content, themes и выберайте вашу тему).
Находим файл “index.ph” и перетащите его на свой рабочий стол. Чтобы открыть его, вам понадобиться любой блокнот (notepad++ или akelpad). Открываем его и находим строку
| <div class=»excrept_but»><a href=»<?php the_permalink() ?>»>Подробнее…</a> |
Теперь просто заменяем слово «подробнее» на своё, я пишу «читать далее». Не забудьте сохранить изменения, и переносим его обратно, откуда взяли. Теперь обновите блог и посмотрите что получилось. Также в файлах (page.php, singlе.php, archive.php) это же слово надо изменить. Делайте это осторожно, не задевая другие составляющие кода!!!
Вообще редактировать HTML код страниц не сложно, главное понять как устроен код. Есть специальные курсы по изучению HTML и СSS языка, с их помощью узнаете как редактировать HTML на профессиональном уровне. Изучите хотя бы бесплатные курсы чтобы знать как редактировать код страниц своего сайта. В интернете масса бесплатных курсов.
Далее отредактируем файл “single.php”.
Также в программе FZ находим этот файл в той же папке, и переносим его на рабочий стол.
Открываем файл и смотрим, что мы можем изменить. Формат даты можно установить как вам угодно. Для этого в файле ‘’single.php” изменяем вот эти сочетания (y.d.m – d/m/y – D-m-Y и т.д.) Сохранитесь, обновите и смотрите что получается!
Из той же папке найдите и перетащите на рабочий стол файл
В нем мы заменим фразу «Leave a Reply» на «Оставьте и вы свой комментарий!»
И исправим на русский язык слово “comments’’. А вообще в принципе это слово можете и удалить, оно и так понятно, что это страница с комментариями.
Смотрим что получилось!
Ещё один момент по редактированию файла “archive.php”.
Если перейти на вкладку новости после даты и автора есть надпись “Edit”, её можно заменить на свою. Для этого переместите файл на рабочий стол и откройте его.
Забыл еще кое-что. Откройте свою запись, и там видно под словом «комментарии» есть надпись («2 комментария к «привет мир!»). Предлагаю написать («2 комментария к записи «привет мир!»). Откройте файл “comments.php” найдите нужную строку и вставьте свое слово.
Открываем запись и смотрим что у нас еще и здесь маленькое неправильно оформлены записи комментариев:
Чтобы её убрать, откройте файл “singl.php” и удалите вот эту строку:
Теперь удаляем стандартную первую запись, точно также как и страницу (панель управления – записи – запись «Привет мир!» перемещаем в корзину). После удаления у меня появилась надпись «К сожалению, по вашему запросу ни чего не найдено», возможно, у вас она тоже появилась! Все зависит от вашего шаблона. Комментарий тоже удалите, чтобы у Вас ни чего не осталось.
Полезные сочетания клавиш, если вдруг кто не знает:
(ctrl+A – выделить все, ctrl+Z – удалить, ctrl+X – вырезать, ctrl+C – копировать, ctrl+V – вставить). Сочетания клавиш в браузере и программе “notepad++:
(ctrl+u – открыть исходный код страницы, ctrl+f – открыть поиск файлов).
С помощью этих сочетаний Ваша работа намного будет приятнее 🙂
Думаю, что у Вас все получилось! На этом я заканчиваю данный урок, получилось много информации, делайте все внимательно – ради Вашего блога. Изучайте основы HTML чтобы узнать самим как редактировать HTML код страниц своего сайта.
Всем пока, и до встречи в следующем уроке. Не пропустите!
Источник: https://blogorazvitie.ru/kak-redaktirovat-html
Как внести изменения в код сайта легко и непринужденно
Друзья, хочу поделиться с вами маленькой заметкой на тему внесения изменений в программный код сайта.
Первая задача состоит в следующем:
Вы хотите изменить текст/ссылку/картинку, но среди кучи файлов, относящихся к программному коду сайта не можете найти тот, в котором нужно сделать желаемые изменения.
У меня недавно возникло желание удалить из 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.
Выбираем пункт Поиск и замена:
И в интерфейсе поиска указываем искомую фразу (текст, который был в футере) и новое содержимое, ниже выбираем место для поиска (папку, в которой расположен наш сайт) и замену за нас делает робот, а мы продолжаем пить кофе.
С уважением, Андрей Морковин.
Источник: http://www.SdelaySite.com/development/pravim-kod
Как правильно задать кодировку для страницы и сайта в целом?
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
01.04.2013
Раздел: Создание сайта / Тонкости работы с CMS
Доброго времени суток, уважаемые читатели блога Site on! Сегодня речь пойдёт о такой мелочи, как кодировка страниц наших с вами сайтов на Joomla, WordPress и вовсе без CMS. Несмотря на то, что в этом нет ничего сложного, множество людей до сих пор задают вопросы на форумах, связанные с этой проблемой.
Сейчас самой распространённой кодировкой по праву считается UTF-8 и чтобы не растягивать статью не нужными разглагольствованиями просто скажу, что я абсолютно всем рекомендую использовать именно её.
Как изменить кодировку страницы?
Теперь, когда мы знаем, какая кодировка нам нужна, первым делом нужно сохранить все файлы, которые нужно перекодировать в UTF-8 без BOM, это можно сделать с помощью большинства текстовых редакторов для программистов (не Microsoft Office), например, PSPad или Notepad++, а также множество других.
Перекодирование в UTF-8 на примере PSPad
Если Вы используете бесплатный редактор PSPad, то всё что вам необходимо, это открыть в нём нужный файл, выбрать из верхнего меню «Формат» и выбрать из выпавшего списка UTF-8, после чего обратите внимание на смену кодировки в нижнем правом углу вашего окошка с PSPad, незабываем сохранить изменения!
Данную статью можно было бы поместить в раздел PHP, так как именно PHP играет в нашем спектакле самую значимую роль. Всегда указывайте кодировку страниц ваших сайтов прежде всего через PHP заголовок:header(«Content-Type: text/html; charset=utf-8»);
который должен быть как можно выше в вашем коде, обязательно перед первым выводом любого символа на странице (в том числе HTML теги, просто буквы, пробелы).
Данный способ является наиболее приоритетным, в то время как мета-тег:Просто ещё раз подчёркивает и объявляет (а не назначает!) принадлежность к той или иной кодировке, но никак не говорит серверу посылать документы именно в данной кодировке, в отличие от PHP. Именно PHP говорит серверу, на котором находится ваш сайт, в какой кодировке послать страницу клиенту.
Так же это можно делать и с помощью .htaccess – файла тонкой конфигурации веб-сервера Apache, но лично мне больше импонирует вариант с PHP. Тем более я слышал, что не все хостеры предоставляют конфигурацию с помощью .htaccess, слава богу не сталкивался 🙂
Итак, после того как мы пересохранили все нужные нам файлы в UTF-8 без BOM и указали кодировку с помощью PHP, остаётся лишь «подтвердить» её мета тегом, который также обязательно нужно указывать! Это рекомендует сам W3C для того, чтобы устройства, роботы и клиентские браузеры могли безошибочно определить, в какой кодировке ваш сервер послал страницу.
Как поменять кодировку страниц в Joomla?
Давайте рассмотрим пример правильного указания кодировки на Joomla 2.5 Это вовсе не сложно и займёт менее минуты:
1) Заходим в главный файл нашего шаблона сайта под названием index.php. Он находится по адресу: /templates/ваш_шаблон/index.php
2) Перекодируем этот файл с помощью текстового редактора для программистов, как было описано для PSPad.
3) Сразу после строки, которая предотвращает прямое обращение к файлу defined(«_JEXEC») or die; пишем код, который пошлёт заголовок с нашей кодировкой:header(«Content-Type: text/html; charset=utf-8»);Если у вас возникли трудности с поиском данной строки, то можете вставить код просто в самом вверху, например, первой строкой файла, главное не забудьте, что PHP код всегда должен быть размещён внутри конструкции В нашем случае:
4) Не забываем проверить, что Joomla поставила правильный мета-тег: <\p>
Заметка:
В Joomla 2.5 за вывод мета-тегов и прочей информации, заключённой в «голове» нашего сайта, отвечает следующая конструкция:
Как поменять кодировку страниц в WordPress и других CMS?
Для сайтов на WordPress и любых других сайтов смысл остаётся точно таким же. Вы находите основной файл, отвечающий за вывод информации на вашем сайте, перекодируете его в UTF-8 без BOM, указываете PHP заголовок и мета-тег.
Исключения составляют сайты на чистом HTML, где PHP кода не может быть в принципе. Для таких сайтов можно просто пропустить данный шаг.
Вот и всё на сегодня, спасибо за ваше внимание и до встречи в новых статьях блога о самостоятельном создании и продвижении сайтов – Site on!
Источник: http://site-on.net/create/cms/1-kak-pravilno-zadat-kodirovku-dlya-saita
Кодировка HTML-страницы
Первая серьёзная проблема, с которой сталкиваются большинство новичков при создании HTML-страниц, связана с набором символов (англ. character set).
Выражается эта проблема с кодировкой в, так называемых, «кракозябриках», которые мы получаем вместо указанных в HTML-файле символов.
В данной статье я хочу остановиться на проблеме с кодировкой подробнее, постараться расставить всё по полочкам и дать варианты решения.
Содержание:
- Что такое кодировка?
- Кодировка файла (редактирование в Notepad++)
- Кодировка отображения (просмотр в браузере)
- Как указать кодировку HTML-страницы? (метатег charset)
- Всё ещё есть проблема с кодировкой? (header charset в php)
Что такое кодировка?
Условно говоря, каждый символ (знак) состоит из кода и картинки. Здесь код – это уникальный идентификатор символа в наборе символов, который определяется выбранной кодировкой, а картинка – это визуальное представление символа, которое содержится в файле шрифта в соответствующей коду символа ячейке.
Другими словами, кодировка (англ. charset) – это набор взаимосвязей кодов символов с их визуальными представлениями в шрифте.
Кодировка файла
HTML-страница представляет собой обычный текстовый файл, кодировка которого выбирается при его создании и/или сохранении на запоминающее устройство (жёсткий диск, флэшка и т.д.).
В случае с Notepad++, кодировка нового документа задаётся в настройках текстового редактора. Выбираем в меню: Опции > Настройки… – и переходим на вкладку «Новый документ». Здесь нас интересует секция «Кодировка». По умолчанию, выбрана кодировка ANSI.
Настройка кодировки нового документа в Notepad++
Напомню, что это кодировка, в которой будет храниться HTML-файл.
Впрочем, Вы всегда можете преобразовать кодировку HTML-страницы, используя соответствующие функции текстового редактора. Например, в Notepad++ для этого кликните пункт меню «Кодировки» и выберите нужное преобразование.
Преобразование кодировки текущей HTML-страницы в Notepad++
В данном случае файл был в кодировке ANSI и я преобразовал его в UTF-8 (без BOM). О том, что такое этот BOM Вы можете прочитать в моей статье: PHP: как удалить BOM в WordPress — проследовав по этой ссылке.
Кодировка отображения
Важно разделять кодировку файла и кодировку отображения. Независимо от того, в какой кодировке хранится файл, он может быть отображен и в любой другой кодировке. Это и является одной из причин проблем с кодировкой.
Например, если Вы сохранили HTML-страницу в кодировке ANSI и откроете её в браузере, вместо русских символов Вы можем получить, так называемые, «кракозябрики».
Проблемы с кодировкой отображения HTML-страницы в браузере Firefox
В данном случае нам надо убедиться, что кодировка файла совпадает с кодировкой отображения файла в браузере. Для этого в Firefox кликните иконку меню, а потом пункт «Кодировка». Если такого у Вас нет, кликните пункт «Изменить» и добавьте элемент «Кодировка» в меню.
Смена кодировки отображения HTML-страницы в браузере Firefox
Как вы видите, браузер отображает файл в кодировке «Юникод» (например, UTF-8), в то время как файл был сохранён в кодировке ANSI (например, Windows-1251). Выбрав нужную кодировку, мы получим нужный нам результат.
Проблема с кодировкой решена
В случае с Notepad++ также имеется возможность выбора кодировки отображения. Для этого кликните пункт меню «Кодировки», а потом нужный вариант используемой для отображения кодировки.
Смена кодировки отображения HTML-страницы в Notepad++
В данном случае я изменил кодировку отображения ANSI на UTF-8 (без BOM).
Как указать кодировку HTML-страницы?
И так, мы уже разобрались с тем, что такое кодировка и в чём состоит отличие кодировки файла и кодировки отображения. Теперь нам нужно решить проблему с кодировкой, которая заключается в неправильной интерпретации браузером (или любым другим клиентом) кодировки HTML-страницы.
Почему возникают проблемы с кодировкой? Определить кодировку HTML-страницы не просто, а зачастую и не возможно, т.к. у того же браузера нет информации о ней или она указана неправильно.
Для того чтобы указать кодировку HTML-страницы используется специальный метатег. В HTML5 он имеет следующий урезанный вид:
В данном случае указана кодировка UTF-8 (Юникод).
В более старых версиях HTML этот метатег имеет следующий вид:
Этот метатег создаёт HTTP-заголовок Content-Type, в котором указывается тип документа text/html и его кодировка Windows-1251 (ANSI).
Лично я рекомендую использовать именно этот вариант, т.к. с ним будет меньше всего проблем. Главное чтобы такой метатег присутствовал в секции HEAD, и указанная в нём кодировка соответствовала кодировке файла. В большинстве случаев этого будет достаточно.
Всё ещё есть проблема с кодировкой?
В некоторых случаях указать метатег с кодировкой HTML-страницы будет недостаточно. Такая проблема может быть вызвана настройками самого сервера, на котором находится файл HTML-страницы. Дело в том, что сервер способен выдавать свой HTTP-заголовок Content-Type, который будет, условно говоря, иметь приоритет перед метатегом.
В данном случае эту проблему можно решить путём внесения изменений в настройки сервера. Я не буду вдаваться в детали данного вопроса и порекомендую лишь отключать всю эту перекодировку через файл .htaccess, например:
CharsetDisable Off
Также можно производить изменения HTTP-заголовка Content-Type и программными средствами. В том же PHP для этого используется функция header(), например:
Источник: http://www.chuvyr.ru/2014/07/kodirovka-html-stranitsy.html
Как посмотреть код страницы сайта и стили с помощью веб-инспектора
Эта статья начинает цикл, цель которого — верстка красивой формы подписки для сайта или подписной страницы. К этой цели мы будем продвигаться маленькими шажками. В результате вы получите красивую форму подписки, оформленную в вашем вкусе, которую вы сможете использовать в своих проектах, а также научитесь разбираться в коде html и стилях и попробуете верстку «на вкус».
Форма подписки, предназначенная для сбора адресов электронной почты вашей аудитории, обычно генерируется сервисами, такими как Justclick и Smartresponder. Эти сервисы предлагают изменить дизайн формы, но самостоятельно можно сделать форму гораздо красивее. А красота, как известно, привлекает людей.
Подписная страница, или лендинг, собственно и делается ради этой небольшой формочки с полем Email, в которое посетитель введет свои данные. На сайт же форму подписки можно добавить в шаблон статьи, чтобы она появлялась после текста статьи, на главную страницу сайта или в боковую панель.
Мы начнем заниматься версткой с организации «рабочего места» и подготовки инструментов, и в этой статье я расскажу вам, как смотреть html код и стили, расположенные на вашей странице, с помощью веб-инспектора (или FireBug в браузере Firefox).
Это нужно для того, чтобы точно знать, что происходит на странице, какой код видят браузеры ваших посетителей и какие стили применяются к этому коду.
Также этот инструмент используется для отладки кода, так как код и стили можно писать прямо в инспекторе.
Итак, прямо сейчас наведите мышь на какой-либо фрагмент текста и нажмите правую кнопку мыши. Да-да, прямо на этой странице. В выпадающем меню выберите «Посмотреть код элемента», если вы используете браузеры Opera или Chrome, «Исследовать элемент», если у вас браузер Firefox или «Проверить объект» в Safari.
Дальше я буду показывать на примере Веб-инспектора, в других отладчиках все будет аналогично.
Нас интересует первая вкладка в инспекторе — Elements. Слева в большом поле вы видите html код. Устанавливайте курсор на какую-нибудь строчку кода, и вы увидите этот участок, выделенный в основном окне браузера.
Инспектор подскажет вам ширину и высоту выделенного элемента, поля и отступы (на моем скриншоте розовая полоса внизу заголовка — это отступ). Устанавливайте курсор на различные элементы кода и смотрите, как они выглядят в браузере.
Можно подойти к коду с другой стороны — в окне браузера наводите курсор мыши на интересующий элемент, нажимайте на правую кнопку и выбирайте «Посмотреть код» — вы увидите в инспекторе именно этот элемент.
Вы можете двигать границу окна инспектора, увеличивая или уменьшая это окно. Настройте все так, чтобы вам было удобно рассматривать элементы страницы и их код.
Теперь посмотрим стили css. Вот как выглядит правило css (стилей).
Правила применяются к элементам html, эти элементы называются «селекторы». На схеме выше вы видите как стиль применяется к селектору а — это ссылка. Свойство, которое мы задаем — это цвет фона. Его значение — желтый, то есть этим правилом мы зададим желтый цвет для всех ссылок в нашем документе.
Стили css отображаются в маленьком окошке справа (его границу тоже можно двигать для вашего удобства). В этом окошке вы видите стили выделенного в данный момент элемента.
Выше всего расположена группа стилей, подписанная element style — это стили элемента, заданные прямо в коде html, это иногда используется.
Скопируйте между двумя фигурными скобками какой-нибудь стиль из другого элемента, и вы увидите, как изменится код html слева — у элемента появится атрибут style=»», в нем будет прописан этот стиль.
Не бойтесь экспериментировать, изменения, которые вы внесете в инспекторе, действуют только в вашем браузере и только до перезагрузки страницы. Перезагрузите страницу, и все изменения исчезнут.
Вернемся к окну стилей css. Ниже вы видите стили, расположенные в файлах css (этих файлов может быть несколько). Самих правил для каждого элемента тоже может быть несколько, одни из них перекрывают другие. Разобраться в этом нелегко, но веб-инспектор вам поможет — правила, которые не действуют на данный элемент, будут видны, но будут зачеркнуты.
Вы также можете отключить любой стиль, сняв галочку около этого правила. Попробуйте! Смотрите, как изменится страница в браузере. Еще можно мышью установить курсор на стиль и изменить его значение. Попробуйте и это тоже! Если правило написано неправильно, инспектор покажет вам восклицательный знак слева от правила, и действовать оно не будет.
Допустим, вы изменили какое-то правило css в веб-инспекторе и теперь хотите внести изменения в соответствующий файл. Как найти нужное правило? И здесь нам поможет веб-инспектор. Справа от каждого правила css указан файл, из которого происходит это правило, и даже строка в этом файле.
В этой небольшой статье я рассказала о небольшой части возможностей веб-инспектора, но этих его возможностей достаточно для того, чтобы посмотреть и отладить код, который вы вставляете на страницу.
Я предлагаю вам открывать веб-инспектор на вашем сайте и на других интересных сайтах, смотреть код, смотреть и править стили (кстати, код html в левой части тоже можно редактировать), и это поможет вам понять, как устроен сайт.
В дополнение к этой статье предлагаю вам посмотреть запись вебинара, который я вела в рамках вводной открытой недели курса «Администратор сайта на WordPress». В этом вебинаре я рассказываю про то, что такое верстка, что такое html, css и про веб-инспектор там тоже есть в конце. Если у вас есть вопросы, пожалуйста, задайте их в комментариях!
Источник: http://sitesdesigns.ru/kak-posmotret-kod-stranicy-sajta-i-stili-s-pomoshhyu-veb-inspektora/
Загрузка...
