Как редактировать сайт на компьютере


Редактирование сайтов: что и как

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

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

Проще всего редактировать сайты в блокноте. Можно воспользоваться стандартным блокнотом или скачать популярную программу notepad++.

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

<html> <head> <title>Мой первый сайт</title> </head> <body> <p>Hello world</p> </body> </html>

Сохраните. Далее запустите файл в любом современном браузере.

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

CMS

Чтобы создать или редактировать более сложный сайт, можно воспользоваться CMS. CMS (Content menedgment system) - это система управления контентом.

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

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

Редактирование сайтов - очень интересный процесс. В этой области можно очень долго развиваться, дойдя в конечном итоге до очень серьёзного уровня программирования. И рамок здесь практически нет. Информации очень много, как и инструментов. Всё зависит от того, насколько есть желание тратить время на изучение чего-то нового, и насколько полезна информация.

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

Первое, что нужно сделать, это изучить HTML. Это то, на чём строятся все остальные технологии. Язык гипертекстовой разметки необходим для построения каркаса сайта - вставки текста, картинок, списков. Когда вы закончите изучение HTML, вы уже будете понимать теги. Но вам покажется, что вы пока не можете отредактировать интерфейс своего сайта полностью так, как хотите - изменить отступы, толщину границы, шрифт. Тогда можно приступать к изучению CSS. Технология каскадных таблиц даст вам решение этой проблемы. Свойств каскадных таблиц очень много, и зачастую это справочная информация, которую необязательно знать наизусть. CSS3 уже даст возможность вставлять анимацию. И сайт начнёт приобретать современный вид.

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

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

Чтобы более гибко использовать анимацию на сайте, необходимо изучить JavaScript. Лично мне во время изучения он показался сложнее PHP, и я советую изучать JavaScript уже после PHP. В целом JavaScript позволяет манипулировать любыми объектами на сайте, создавать сложную анимацию, когда в зависимости от состояния одного объекта, изменяется состояние и внешний вид другого объекта.

Edit Any Website (бесплатный инструмент) :: Kopywriting Kourse

Обновлено в марте 3-й, 2016 г.

Вот как вы можете редактировать любой веб-сайт прямо из браузера:

Шаг 1.) Выделите текст в синем поле:

javascript: document.body.contentEditable = 'true'; документ.designMode = 'на'; недействительно 0

Шаг 2.) Перетащите выделенный текст на панель закладок.

Шаг 3.) Щелкните значок, когда хотите отредактировать любую страницу!

Попробуйте сами:
Щелкните эту ссылку, и вы сразу же сможете редактировать текст на этой странице в своем браузере. Обновите страницу, если хотите прекратить редактирование.

У этого небольшого приемника редактирования есть множество полезных и глупых применений!

Полезное использование:

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

Веселое использование:

Сделайте свой банковский счет огромным! Перейдите к Биллу Гейтсу, на моем счете в BankOfAmerica теперь миллиарды долларов:

Эта полезная маленькая закладка была для меня чрезвычайно полезной на протяжении многих лет, надеюсь, вам она тоже понравится!

Смотрите, как редактируем сайт:

С уважением,
Невилл Н.Медхора

П.С. Сообщите мне, поможет ли этот инструмент и как вы его используете!

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

  • Электронное письмо 1: появится электронное письмо с названием «Это письмо покажет вам, как лучше писать».
  • Электронное письмо 2: электронное письмо, показывающее мои любимые уловки со строкой темы.
  • Электронное письмо 3: электронное письмо, показывающее тактику, чтобы люди обращали внимание на то, что вы продаете.
  • … затем я отправляю около 2 электронных писем в неделю, все с лучшими маркетинговыми материалами. Большая часть этого не будет размещаться в блоге, только по электронной почте.

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

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

.

Редактирование веб-сайта без изменения его текущих настроек

Лучше всего позвонить по номеру:

1. Сделайте резервную копию вашего сайта. Есть несколько хороших бесплатных плагинов, например: All-in-One WP Migration и Duplicator.

2. Установите сайт на свой локальный компьютер. Вам нужно будет установить XAMP / LAMP или WAMP в зависимости от вашей операционной системы.

https://www.wpbeginner.com/wp-tutorials/how-to-move-live-wordpress-site-to-local-server/

3.Внесите все необходимые изменения на локальном хосте.

4. После этого снова сделайте резервную копию, но на этот раз с localhost и отправьте ее на рабочий сервер.

https://premium.wpmudev.org/blog/guide-to-migrating-localhost-wordpress-to-live-site/

Надеюсь, он ответит на ваш вопрос.

Модератор Ян Дембовски

(@jdembowski)

Модератор форума и Brute Squad

Перемещено в раздел «Исправление WordPress», это не тема «Разработка с помощью WordPress».

Hi Kyrstan,

Как упоминал Прамод, вы можете настроить локальную версию для разработки, но если это окажется слишком сложным или не совсем соответствует вашим потребностям, вы можете рассмотреть возможность обращения к своему хостинг-провайдеру и посмотреть, смогут ли они скопировать ваш сайт. на поддомен (например, dev.domain.com).

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

Если вы все же пойдете по этому пути, вы можете заблокировать домен dev паролем.Опять же, хозяин может помочь с этим. В противном случае вы можете попробовать этот плагин: https://wordpress.org/plugins/password-protected/

Надеюсь, это помогло,
- Кейси

.

Как временно редактировать любую веб-страницу

В вашем браузере скрывается мощный инструмент: Inspect Element .

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

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

Inspect Element - идеальный способ узнать, что движет Интернетом, выяснить, что сломано на ваших сайтах, смоделировать, как будет выглядеть изменение цвета и шрифта, и избавиться от необходимости передавать в Photoshop личные данные на скриншотах. Это суперсила, о которой вы даже не подозревали.

Давайте узнаем, как использовать Google Chrome Inspect Element для облегчения вашей работы, независимо от того, являетесь ли вы разработчиком или маркетологом, который никогда не писал ни строчки кода.Если вы читаете это на своем телефоне, пора переключиться на ноутбук, открыть Google Chrome и приготовиться настроить код.

Большинство веб-браузеров, включая Mozilla Firefox и Apple Safari, включают инструмент Inspect Element, тогда как Microsoft Internet Explorer и браузер Edge включают аналогичный набор инструментов разработчика. В этом руководстве основное внимание уделяется инструментам проверки элементов Google Chrome, но большинство функций работают так же в других браузерах.

Подождите, почему я должен использовать элемент Inspect?

Google Chrome Inspect Element позволяет просматривать исходный код веб-сайта и настраивать все, что угодно

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

  • Дизайнер : Хотите узнать, как дизайн сайта будет выглядеть на мобильных устройствах? Или хотите увидеть, как другой оттенок зеленого будет выглядеть на кнопке регистрации? С Inspect Element вы можете сделать и то, и другое за секунды.
  • Маркетолог : Вам интересно, какие ключевые слова используют конкуренты в заголовках своих сайтов, или вы хотите узнать, не слишком ли медленно загружается ваш сайт для теста Google PageSpeed? Inspect Element может показать и то, и другое.
  • Writer : Устали размывать свое имя и адрес электронной почты на скриншотах? С помощью Inspect Element вы можете изменить любой текст на веб-странице за секунду.
  • Агент поддержки : Нужен лучший способ рассказать разработчикам, что нужно исправить на сайте? Inspect Element позволяет вам быстро изменить пример, чтобы показать, о чем вы говорите.

Для этих и десятков других случаев использования Inspect Element - удобный инструмент, который стоит иметь под рукой. Это часть инструментов разработчика в вашем браузере, которая включает в себя ряд дополнительных функций: консоль для запуска кода, страницу View Source для просмотра только необработанного кода сайта, страницу Sources со списком всех загруженных файлов. на веб-сайте и многое другое.Вы можете изучить все это самостоятельно, а пока давайте посмотрим, как использовать основную вкладку Elements , чтобы настроить веб-страницу самостоятельно.

Как начать работу с элементом Inspect

Есть несколько способов получить доступ к Google Chrome Inspect Element. Просто откройте веб-сайт, который хотите попробовать отредактировать (чтобы следовать этому руководству, откройте Zapier.com), затем откройте инструменты Inspect Element одним из следующих трех способов:

  • Щелкните правой кнопкой мыши в любом месте веб-страницы, и в самом низу всплывающего меню вы увидите « Inspect ."Щелкните здесь.
  • Щелкните гамбургер-меню (значок с 3 точками) в правом углу панели инструментов Google Chrome, щелкните Дополнительные инструменты , затем выберите Инструменты разработчика . Либо в меню «Файл» выберите «Вид» -> «Разработчик» -> «Инструменты разработчика».
  • Предпочитаете сочетания клавиш? Нажмите CMD + Option + I на Mac или F12 на ПК, чтобы открыть Inspect Elements, ничего не нажимая.

По умолчанию Инструменты разработчика открываются на панели в самом низу браузера и показывают вкладку Elements - это знаменитый инструмент Inspect Element, который мы искали.

У вас не будет много места для работы с элементом Inspect Element в нижней части экрана, поэтому щелкните три вертикальные точки в верхней правой части панели элемента Inspect рядом с знаком «X» (который вы бы щелкнули, чтобы закройте панель). Теперь вы увидите возможность переместить панель в правую часть браузера (вид справа) или открыть панель в совершенно отдельном окне (вид отстыковки).

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


Теперь, когда мы находимся в Inspect Element, у нас под рукой есть множество полезных инструментов, которые мы можем использовать, чтобы любой сайт выглядел именно так, как мы хотим. В этом руководстве мы сосредоточимся на вкладках «Элементы», «Эмуляция» и «Поиск».

Искать

Вкладка «Поиск» позволяет искать на веб-странице определенное содержимое или элемент HTML.Он немного скрыт: вам нужно щелкнуть 3 точки, затем щелкнуть Search All Files , чтобы раскрыть его. Тогда вы сможете искать в каждом файле на веб-странице все, что захотите.

Элементы

«Inspect Element» - это инструмент, который мы больше всего будем изучать в этом руководстве, и он открывается первым, когда вы запускаете Инструменты разработчика в большинстве браузеров. Или щелкните вкладку «Элементы» в Инструментах разработчика, чтобы вернуться к ней, если вы изучали где-то еще.

На вкладке «Обзор» вы можете увидеть все элементы HTML, JavaScript и CSS, с помощью которых был создан веб-сайт.Это почти то же самое, что просто просмотреть исходный код веб-сайта, с одним важным отличием: вы можете изменить любой код и видеть изменения в реальном времени на открытом сайте. Вы можете изменить что угодно, от копии до гарнитуры, затем сделать снимок экрана нового дизайна или сохранить изменения (просто перейдите в View> Developer> View Source и сохраните страницу как файл HTML или скопируйте изменения кода в текстовый редактор ). Однако после повторной загрузки страницы все ваши изменения исчезнут навсегда.

Эмуляция

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

Он также немного скрыт: вам нужно открыть Inspect Element и щелкнуть значок телефона, чтобы запустить его.Тогда у вас будет отличный инструмент, чтобы понять, как другие воспринимают веб-страницу.


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

Найдите что-нибудь на сайте с помощью поиска по элементам проверки

Хотите знать, что входит в ваши любимые сайты? Поиск - ваш лучший инструмент для этого, помимо чтения всего исходного кода сайта.Вы можете просто открыть представление элементов по умолчанию, нажать CTRL + F или CMD + F и выполнить поиск по исходному коду, но полный инструмент поиска позволит вам искать по каждому файлу на странице, помогая вам найдите текст в файлах CSS и JavaScript или найдите изображение значка, которое вам нужно для статьи.

Для начала откройте Zapier.com в Chrome, если вы еще этого не сделали, затем откройте Inspect Element, щелкните 3 вертикальные точки в правом верхнем углу панели инструментов разработчика (рядом с закрывающим «X») и выберите «Искать во всех файлах."Вкладка" Поиск "появится в нижней половине панели инструментов разработчика.

Помните, как открыть Inspect Element? Просто щелкните правой кнопкой мыши и выберите Inspect Inspect Element или нажмите Command + Option + i на Mac или F12 на ПК.

В поле поиска вы можете ввести что угодно - ANYTHING - что вы хотите найти на этой веб-странице, и оно появится на этой панели. Посмотрим, как это можно использовать.

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

Попробуем другой запрос. Удалите мета-имя , вместо этого введите h3 в поле поиска и нажмите «ввод». Вы увидите каждое вхождение «h3» в файлах JavaScript Zapier вверху, но как только вы прокрутите вниз, вы увидите каждый заголовок «h3» на этой странице.

Search также является эффективным инструментом для дизайнеров, так как вы также можете искать по цвету. Введите # ff4a00 в поле поиска и нажмите «ввод» (и обязательно установите флажок рядом с «Игнорировать регистр», чтобы увидеть все результаты). Теперь вы должны каждый раз видеть цвет # ff4a00, оттенок оранжевого Zapier, в файлах CSS и HTML этого сайта. Затем просто щелкните строку с надписью «color: # ff4a00;» чтобы перейти к этой строке в HTML-коде сайта и настроить ее самостоятельно (мы рассмотрим это в следующем разделе).

Это удобный способ для дизайнеров убедиться, что сайт соответствует руководству по стилю их бренда. С помощью инструмента «Поиск» дизайнеры могут легко проверить CSS веб-страницы, чтобы узнать, применен ли цвет к неправильному элементу, используется ли неправильное семейство шрифтов на веб-странице или вы все еще используете свой старый цвет где-то на вашем сайте.

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

Или вы можете изменить веб-страницу самостоятельно с помощью Elements , основной части инструментов разработчика Chrome.

Измените что угодно с помощью элементов

Front-end разработчики используют инструмент Inspect Element каждый день, чтобы изменять внешний вид веб-страницы и экспериментировать с новыми идеями - и вы тоже можете. Inspect Elements позволяет настраивать внешний вид и содержимое веб-страницы, добавляя временные изменения в файлы CSS и HTML сайта.

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

Посмотрим, что мы можем с этим сделать.

Щелкните вкладку «Элементы» на панели инструментов разработчика - и, если вам нужно больше места, нажмите клавишу «Esc», чтобы закрыть ранее открытое окно поиска.Вы должны увидеть HTML-код этой страницы - теперь вы знаете, как делают колбасу.

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

Изменить текст на веб-странице

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

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

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

Введите все, что угодно, в это текстовое поле («Аури - гений» должно работать нормально) и нажмите Enter. Вуаля! Вы только что изменили текст на веб-странице.

Обновите страницу, и все вернется в нормальное состояние.

Весело? Давайте изменим еще кое-что на этой странице.

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

Круто. Теперь мы снова откроем его - прямо на тексте, который хотим отредактировать. Все, что вам нужно сделать, это щелкнуть правой кнопкой мыши ту часть страницы, которую вы хотите изменить, а затем щелкнуть ссылку Inspect или Inspect Element , которая появляется в нижней части контекстного меню.

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

Теперь, когда мы выбрали слоган на сайте Zapier, давайте изменим его внешний вид.

Изменение цвета и шрифта элементов

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

Вы можете заметить, что некоторые элементы перечеркнуты во вкладке «Стили». Это означает, что эти стили не активны для выбранного нами элемента, поэтому изменение этих значений не повлияет. Мы можем игнорировать их для наших целей.

Попробуем что-нибудь изменить. Снова щелкните значок стрелки в верхней части Inspect Element и выделите текст прямо под кнопкой «Зарегистрироваться» на странице. Найдите "выравнивание текста" на вкладке "Стили" (возможно, вам придется немного прокрутить, чтобы найти это).

Прямо сейчас он установлен в «центр», но дважды щелкните «центр» и введите left . Это выравнивает текст на странице по левому краю.

А теперь поиграемся с цветом. Используйте значок мыши в Inspect Element, чтобы выбрать кнопку на этот раз, затем на вкладке Styles найдите эту строку:

И дважды щелкните "# ff4a00". Наберите # 4199ad (не забудьте #) и нажмите «ввод».

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

Изменить состояние элемента

Хотите увидеть, как будет выглядеть кнопка или ссылка, когда кто-то наведет на нее курсор или щелкнет? Chrome Inspect Element может показать это с помощью инструментов состояния силового элемента. Вы можете увидеть, как будет выглядеть элемент, когда посетитель наводит курсор на элемент (состояние наведения), выбирает элемент (состояние фокуса) и / или щелкает по этой ссылке (состояние посещения).

Давай попробуем. Убедитесь, что вы выбрали кнопку регистрации на главной странице Zapier. Затем щелкните правой кнопкой мыши этот код на вкладке «Элементы» и выберите в этом меню : active: .

Это изменит цвет кнопки на серый, который отображается на сайте Zapier при нажатии кнопки.

Теперь измените значение background-color на # FF4A00 , и вы должны сразу увидеть изменение цвета кнопки.

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

Изменить изображения

Вы также можете легко менять изображения на веб-странице с помощью Inspect Element.Давайте заменим фон Супергероя на сайте Zapier на эту впечатляющую фотографию солнечной вспышки, сделанную НАСА.

Сначала скопируйте и вставьте эту ссылку в изображение:

https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg

Теперь откройте Inspect Element на фоне домашней страницы Zapier и убедитесь, что вы выбрали строку signup-hero в коде. Дважды щелкните ссылку URL-адреса фона на панели «Стили» и вставьте ссылку, которую вы скопировали выше.

Нажмите "ввод" и сразу увидите разницу.

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


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

Вот где появляется эмуляция - здесь все, что мы рассмотрели до сих пор, можно применить еще дальше.Посмотрим как.

Тестирование сайта на любом устройстве с эмуляцией

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

Эмуляция

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

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

Измените размер небольшого браузера, чтобы увидеть, как все выглядит, если вы просматриваете страницы на планшете, телефоне или даже на меньшем экране. Или щелкните меню вверху, чтобы выбрать размеры устройства по умолчанию, например iPad Pro или iPhone 8 Plus - вперед и выберите последнее.

Экран веб-страницы должен уменьшиться до размера iPhone 8 Plus, и вы можете немного увеличить масштаб, щелкнув значок + рядом с числом в правом верхнем углу сетки - так сайт будет выглядеть, если кто-то увеличит масштаб. на мобильном телефоне.

Увеличьте изображение, перетащив правый край эмуляции веб-страницы вправо. Смотрите, что происходит? Мы больше не находимся в представлении iPhone 8 Plus. Перетаскивание экрана по сетке позволяет увидеть, как веб-страница будет изменяться при изменении размера экрана, но ваше представление больше не будет отражать модель устройства, которую вы выбрали ранее.

Вернемся к представлению iPhone 8 Plus, снова выбрав его в раскрывающемся списке модели. Рядом с выпадающим списком есть слово «Портрет». Как вы уже догадались, это позволяет переключаться между пейзажным и горизонтальным видом.

Теперь мы можем увидеть, как выглядел бы этот пост, если бы вы читали его на iPhone 8 Plus. Не стесняйтесь поэкспериментировать с другими устройствами, чтобы увидеть, как изменяется эта веб-страница и разрешение экрана. Все другие инструменты разработчика, которые мы рассмотрели до сих пор, также будут реагировать на представление устройства.Например, снова выберите текст слогана Zapier.

В представлении iPhone 8 Plus мы видим, что это текст 2em, а в представлении по умолчанию на компьютере - 3em.

«em» - это единица размера шрифта, которая позволяет автоматически изменять размер текста относительно окружающего текста. Например, предположим, что у нас есть пользователь с большими настройками пользовательского шрифта в своем браузере. Если вы установите размер шрифта абзаца на 14 пикселей, ваш шрифт всегда будет 14 пикселей для этого пользователя, несмотря ни на что.Однако, если вы установите размер шрифта абзаца равным 1em, браузер вашего пользователя будет использовать эту единицу измерения для масштабирования текста в соответствии с большими пользовательскими настройками. Телефоны и планшеты делают это для удобного увеличения текста.

Теперь давайте переключимся на представление Apple iPad и выберем заголовок «тестирование на разных устройствах» выше. На этот раз размер шрифта 3em. Размер шрифта изменился в зависимости от вида устройства, вернувшись к размеру по умолчанию, который использовался бы на компьютере, благодаря большему экрану планшета.


Эмуляция датчиков мобильных устройств

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

Вы даже можете заставить ваш браузер работать как телефон. Нажмите клавишу «Esc», чтобы снова открыть панель поиска в Inspect Element, и на этот раз щелкните меню с тремя точками слева, чтобы открыть меню параметров.Выберите Sensors , чтобы получить три новых инструмента: Geolocation, Orientation и Touch.

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

Давайте попробуем просмотреть этот сайт из штаб-квартиры Google в Маунтин-Вью, Калифорния.

Установите флажок «Эмулировать координаты геолокации» и введите значение 37 в текстовое поле Lat = и 122 в текстовое поле Lon = . Нажмите Enter на клавиатуре.

Ничего не меняется, да?

Это связано с тем, что на этой странице нет содержимого, которое изменяется в зависимости от вашего местоположения. Если вы измените координаты на сайте вроде Groupon.com , который использует ваше местоположение для отображения локализованного контента, вы получите другие результаты.Перейдите на Google.com в другом месте, и, возможно, вы увидите новый логотип Google на празднике в другой стране или, по крайней мере, получите результаты на другом языке.

Эмуляция

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

Эмуляция мобильных сетей

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

Чтобы попробовать, снова нажмите кнопку с тремя кружками слева от вкладки поиска «Проверить элемент» и выберите «Условия сети». Здесь вы можете выбрать быстрый или медленный 3G или автономный режим, чтобы увидеть, как страница работает без Интернета. Или щелкните Добавить… , чтобы включить собственное тестирование (возможно, добавьте 56 Кбит / с для тестирования Интернета по коммутируемому доступу). Теперь перезагрузите страницу, и вы увидите, сколько времени потребуется сайту для загрузки при медленном соединении - и как сайт выглядит во время загрузки. Это покажет, почему вам следует улучшить свой сайт, чтобы он загружался быстрее при медленных соединениях.

Вы также можете изменить свой пользовательский агент - снимите флажок «Выбирать автоматически» рядом с «Пользовательским агентом» и выберите «Internet Explorer 7», возможно, чтобы увидеть, изменит ли сайт свою визуализацию для старых браузеров. Это также удобный способ заставить веб-страницы загружаться, даже если они утверждают, что работают только в другом браузере, таком как Internet Explorer.


Вызовы

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

  1. Изменить заголовки на CNN.com и отправьте нам снимок экрана с заголовком своей популярной статьи.
  2. Дублируйте ваш любимый веб-сайт, используя «Просмотр исходного кода», и возитесь с HTML, чтобы сделать его своим.
  3. Посмотрите, как ваш веб-сайт отображается на мобильном устройстве, и покажите своему разработчику, что можно сделать лучше, исправив это самостоятельно!

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

Как использовать Inspect Element? Мы будем рады услышать ваши истории в комментариях ниже!

Вам нравятся ваши новые хакерские навыки? Изучите их дальше в нашем руководстве «Как создать веб-сайт без какого-либо программирования» и его сопутствующем руководстве «Как создать отличную графику без какого-либо кодирования».

Это руководство было первоначально опубликовано 5 января 2015 г., затем было обновлено и переиздано 6 июня 2017 г. и 25 января 2018 г. со скриншотами и шагами из последней версии Google Chrome.

.

Как заблокировать любой веб-сайт на вашем компьютере, телефоне или в сети

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

Существуют разные способы блокировки веб-сайтов.Вы можете заблокировать веб-сайты только в определенных браузерах, во всей операционной системе или даже в вашем сетевом маршрутизаторе. Вот как заблокировать веб-сайты.

На вашем компьютере

Если вы хотите контролировать доступ к веб-сайтам только на одной машине, вы можете установить блокировку на уровне операционной системы. Этот метод блокировки веб-сайтов несложно настроить и будет работать во всех браузерах.

Как заблокировать любой веб-сайт на компьютерах с Windows

Одной из опор Интернета является система DNS, которая переводит легко запоминающиеся (и вводимые) имена, такие как www.google.com на эквивалентные IP-адреса (8.8.8.8). Хотя вы используете DNS-серверы для доступа к веб-сайтам, на вашем компьютере также есть так называемый файл HOSTS, в котором эта информация может храниться локально. Это можно использовать для отключения доступа к нежелательным веб-сайтам. Мы проверили этот метод как с Windows 7, так и с Windows 8.

1. Убедитесь, что у вас есть права администратора на вашем компьютере. Войдите в свой компьютер, используя учетную запись администратора, и перейдите в C: \ Windows \ System32 \ drivers \ etc \

2. Дважды щелкните файл с именем «hosts» и выберите Блокнот из списка программ, чтобы открыть файл.Щелкните ОК. Последние две строки вашего файла hosts должны читать "# 127.0.0.1 localhost" и "# :: 1 localhost".

2а. Если вы не можете редактировать файл, вам нужно щелкнуть правой кнопкой мыши файл с меткой hosts и выбрать «Свойства». Щелкните вкладку «Безопасность», выберите учетную запись администратора и нажмите «Изменить».

2б. Во всплывающем окне снова выберите учетную запись и установите флажок Полный доступ. Щелкните Применить> Да. Теперь нажмите ОК во всех всплывающих окнах.

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

4. Чтобы заблокировать Google, например, добавьте "127.0.0.1 www.google.com" в конец файла без кавычек. Таким образом вы можете заблокировать столько сайтов, сколько захотите, но помните, что вы можете добавлять только по одному в каждой строке.

5. Повторяйте этот шаг, пока не добавите все веб-сайты, которые хотите заблокировать.

6. Закройте файл hosts и нажмите Сохранить.Перезагрузите компьютер, чтобы изменения вступили в силу, и вы обнаружите, что все эти веб-сайты теперь заблокированы.

Как заблокировать любой веб-сайт на вашем Mac

Вот как заблокировать веб-сайты в OS X.

  1. 1. Убедитесь, что у вас есть доступ администратора к вашему Mac. Теперь откройте Терминал. Вы можете найти его в / Applications / Utilities / Terminal.
  2. 2. Введите sudo nano / etc / hosts и нажмите Enter. При появлении запроса введите пароль пользователя (логина).
  3. 3. Это откроет файл / etc / hosts в текстовом редакторе. Введите название веб-сайта с новой строки в этом формате «127.0.0.1 www.blockedwebsite.com» (без кавычек). Для каждого веб-сайта, который вы хотите заблокировать, начните новую строку и введите ту же команду, но только с именем заменяемого веб-сайта. Когда закончите, нажмите ctrl + x, а затем Y, чтобы сохранить изменения.
  4. 4. Теперь введите команду sudo dscacheutil -flushcache и нажмите Enter или перезагрузите компьютер, чтобы убедиться, что веб-сайты заблокированы.

Как заблокировать любой веб-сайт на уровне браузера

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

В Firefox вы можете установить надстройку BlockSite для блокировки веб-сайтов.

  1. Установите надстройку, нажмите ctrl + shift + a и слева щелкните Расширения. Теперь щелкните Параметры под BlockSite. Во всплывающем окне нажмите «Добавить» и введите имя веб-сайта, который вы хотите заблокировать. Повторите процесс для всех веб-сайтов, к которым вы не хотите получать доступ.Щелкните ОК.
  2. Теперь эти сайты будут заблокированы в Firefox. Вы также можете установить пароль в BlockSite, чтобы другие пользователи не могли редактировать список заблокированных веб-сайтов. Это можно сделать через меню опций, описанное в предыдущем шаге.

BlockSite также доступен в Google Chrome.

Internet Explorer позволяет легко блокировать веб-сайты. Вот как.

  • Откройте браузер и выберите Инструменты (alt + x)> Свойства обозревателя. Теперь щелкните вкладку «Безопасность», а затем щелкните красный значок «Ограниченные сайты».Нажмите кнопку "Сайты" под значком.
  • Теперь во всплывающем окне вручную введите веб-сайты, которые вы хотите заблокировать, один за другим. Щелкните Добавить после ввода названия каждого сайта. Когда закончите, нажмите «Закрыть» и нажмите «ОК» во всех остальных окнах. Теперь эти сайты будут заблокированы в Internet Explorer.

На телефоне или планшете

Как заблокировать любой веб-сайт на iPhone и iPad

У Apple есть удобные инструменты родительского контроля, которые позволяют блокировать определенные веб-сайты.Вот как.

  1. Выберите «Настройки»> «Основные»> «Ограничения».
  2. Нажмите Включить ограничения. Теперь установите пароль для ограничений. В идеале он должен отличаться от пароля, который вы используете для разблокировки телефона.
  3. После установки пароля прокрутите вниз и коснитесь Веб-сайты. Здесь вы можете либо ограничить контент для взрослых, либо разрешить доступ только к определенным веб-сайтам.
  4. Только на определенных веб-сайтах есть краткий список разрешенных веб-сайтов, включая Discovery Kids и Disney, но вы также можете добавлять сайты, нажав «Добавить веб-сайт».
  5. Если вы нажмете «Ограничить контент для взрослых», Apple заблокирует веб-сайты, которые считаются нежелательными, но вы можете занести веб-сайты в белый список, нажав «Добавить веб-сайт» в разделе «Всегда разрешать», или занести их в черный список, нажав его в разделе «Никогда не разрешать».
  6. Если вы попытаетесь получить доступ к заблокированному веб-сайту, вы увидите сообщение о том, что он ограничен. Коснитесь Разрешить веб-сайт и введите пароль ограничений, чтобы открыть этот веб-сайт.

Как заблокировать любой веб-сайт на вашем телефоне Android

На Android вы можете сделать несколько разных вещей.Если у вас есть телефон с рутированным доступом, вы можете заблокировать веб-сайты, отредактировав файл hosts на своем устройстве, чтобы перенаправить сайты, которые вы хотите заблокировать. Вам понадобится файловый менеджер и текстовый редактор - самый простой вариант - использовать наше любимое приложение ES File Explorer, которое позволяет делать и то, и другое. Вот как это работает.

  1. Установите ES File Explorer. Откройте ES File Explorer и нажмите кнопку меню в верхнем левом углу. Нажмите «Локальный»> «Устройство»> «Система»> и т. Д.
  2. В этой папке вы увидите файл с именем «hosts» - нажмите его и во всплывающем меню нажмите текст.В следующем всплывающем окне нажмите ES Note Editor.
  3. Нажмите кнопку редактирования на верхней панели.
  4. Теперь вы редактируете файл, и чтобы заблокировать сайты, вы хотите перенаправить их DNS. Для этого просто начните новую строку и введите «127.0.0.1 www.blockedwebsite.com» (без кавычек, где заблокированный веб-сайт - это имя сайта, который вы блокируете) для каждого веб-сайта, который вы хотите заблокировать. Например, вам нужно будет ввести 127.0.0.1 www.google.com, чтобы заблокировать Google.
  5. Перезагрузите Android-устройство.

Если этот метод слишком сложен для вас, вы можете установить антивирусное приложение, такое как Trend Micro, которое позволяет блокировать веб-сайты.

  1. Установите приложение и запустите его. Выберите Параметры> Безопасный серфинг.
  2. Теперь смахните до Родительского контроля и нажмите настроить учетную запись. Создайте учетную запись, и вы увидите в приложении опцию под названием Blocked List. Коснитесь его и коснитесь «Добавить». Теперь по одному добавляйте сайты, которые хотите заблокировать. Как только это будет сделано, вы не сможете получить доступ к этим веб-сайтам на своем смартфоне Android.

Как заблокировать любой веб-сайт на Windows Phone

Вы не можете выполнить полную блокировку веб-сайтов на Windows Phone, купите, вы можете загрузить браузер AVG Family Safety. По умолчанию он блокирует веб-сайты с вредоносным или явным содержанием, и если вы приобретете антивирусную лицензию AVG и создадите учетную запись, вы можете настроить список заблокированных веб-сайтов.

Как заблокировать любой веб-сайт в вашей сети

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

Изменение неправильной настройки может случайно деактивировать ваше соединение, поэтому, если вы застряли, немедленно позвоните своему интернет-провайдеру.

  1. Мы пробовали это на маршрутизаторе Beetel 450TC1, предоставленном MTNL в Дели, и на маршрутизаторе Binatone, предоставленном Airtel.Шаги были одинаковыми для обоих. Для начала вам необходимо зайти в настройки вашего роутера. Откройте любой браузер и введите 192.168.1.1 в адресной строке. Нажмите Ввод. Некоторые маршрутизаторы используют другой адрес, поэтому, если это не сработает, проверьте, упоминается ли он в документации вашего интернет-провайдера.
  2. Теперь вам нужно будет ввести логин и пароль. Это должно было быть установлено во время установки вашего соединения - по умолчанию обычно используется имя пользователя: admin и пароль: пароль. Если нет, обратитесь к своему интернет-провайдеру и получите правильное имя пользователя и пароль.
  3. Как упоминалось ранее, интерфейс может отличаться. В нашем маршрутизаторе MTNL мы обнаружили, что можем блокировать веб-сайты в разделе «Управление доступом»> «Фильтр».
  4. Здесь есть раскрывающееся меню под названием Выбор типа фильтра. Мы выбрали фильтр URL-адресов и ввели веб-сайт, который мы хотели заблокировать, в поле URL-адреса ниже. Над этим полем есть опция «Активно». Здесь мы увидели две кнопки, Да и Нет. Мы выбрали Да и нажали Сохранить. Это заблокировало сайт в нашей сети.
  5. Вы можете создать 16 списков заблокированных веб-сайтов, каждый из которых содержит 16 веб-сайтов, используя этот метод, что позволяет заблокировать до 256 веб-сайтов.Опять же, это будет отличаться от маршрутизатора или маршрутизатора.

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

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий