Как менять текст и картинки на html сайте

После скачивания архива с сайтом, внутри будут папки и файлы вне этих папок.

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

Сначала давайте разберемся с тем

Как менять текст на html сайте

Это самая популярная правка, поменять кусок текста, например цену, или заголовок или еще чего.

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

Например, у нас есть сайт, там есть заголовок «Модные детские 3D рюкзаки и сумки из неопрена»

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

тут мы видим написано zvonok.html вот этот файл нам и нужно открыть в блокноте, если текст который мы хотим менять находится на ней.

Чаще всего в лендингах только одна страница (index.html), есть еще и дополнительные вроде ok.html (страница успешной отправки формы) и privacy.html (Политика конфиденциальности) но их править вам скорее всего никогда не придется, поэтому будем их игнорировать.

Значит мы открываем блокнотом (советую notepad ++, скачать можно здесь: https://notepad-plus-plus.org/download/v6.8.8.html)

Открываем в нем файл index.html (он находится в корне сайта, иногда может быть еще index.php, но это сути не меняет). Нажимаем комбинацию клавиш ctrl + F (будучи в Notepad++ при открытом в нем файле index.html). В появившемся окошке переходим во вкладку «заменить» (в самом верху окошка, которое всплыло, кнопочка, кликните по ней). Там будет два поля «Найти:» и «Заменить на:» В первое вставляем текст с сайта (который стоит на сайте в данный момент и его нужно заменить на новый), а в поле «Заменить на:» вставляем собственно новый текст, когда оба поля заполнены (в верхнем старый текст, в нижнем новый) кликаем по кнопке «Заменить всё» (она расположена правее этих полей, по счету третья сверху). После нажатия текст поменяются, программа уведомит, что произведено столько-то успешных замен. После чего нажимаем комбинацию клавиш ctrl + S (сохраняем наш файл index.html). Теперь копируем отредактированный файл index.html на хостинг, согласившись при этом на замену.

Допустим нам нужно заменить «Модные детские 3D рюкзаки и сумки из неопрена» на «Современные детские 3D рюкзаки и сумки из неопрена«. Тогда в поле «найти» вставляем «Модные детские 3D рюкзаки и сумки из неопрена», а в поле заменить на, соответственно новый заголовок: «Современные детские 3D рюкзаки и сумки из неопрена». После чего сохраняем файл (комбинация ctrl+s, или иконка с дискетой в верхнем левом углу программы), теперь перезаливаем отредактированный файл index.html на хостинг, согласившись при этом на замену. Переходим на сайт, обновляем вкладку и видим, что старый заголовок поменялся на новый.

Точно так же можно поменять какой угодно текст, допустим есть цена товара 800 рублей, а нам надо поставить 790. В строке найти пишем 800 в заменить на 790 кликаем заменить все, программа уведомит нас о количестве замен (сколько раз на сайте встречается эта цена. столько замен и будет произведено), далее сохраняем файл перезаливаем на хостинг и радуемся результату. Если цена повторяется, допустим два товара есть по 800 рублей, а снизить цену до 790 нужно только на одном, тогда нужно найти именно тот товар (по названию допустим) и заменить цену только на нем, сохранить перезалить и удостоверится, что все сделали правильно, а если все таки не правильно, то у нас же есть резервная копия которую мы создали в начале. Берем его, и повторяем процедуру, до тех пор пока не получим нужный результат. Например, если поменяли первую цену, и оказалось что это не то что нужно, тогда возвращаем все как было (в нотепаде есть срелка «назад» кликая по ней, можно отменять внесенные правки), и меняем вторую цену, после проверяем все ли в порядке.

А теперь давайте разберемся со вторым моментом.

Как менять картинки на html сайте

Есть два способа, 1й самый простой, буквально заменить старую картинку на новую. Давайте рассмотрим на примере, у нас есть картинка с названием 1.jpg (банально находите в папке нужную картинку)

На скриншоте я кликнул по той картинке которую хочу заменить, потом нажал правую кнопку мыши и кликнул по пункту «свойства» во всплывающем окне. Увидел, что она называется 1 и расширение (формат) у нее .jpg, то-есть 1.jpg (в вашем случае название будет не «1» а другое, название именно той картинки которую хотите поменять), но суть та же.

Заменить эту картинку я хочу на такую:

Как видите называется она 2.jpg

Далее мы называем новую картинку (2.jpg) точно так же как называется старая (та которую мы хотим заменить, в нашем случае это 1.jpg), для этого нажимаем по старой картинке правой кнопкой мыши, кликаем переименовать, название картинки выделится (подсветится синим), после чего нажимаем комбинацию клавиш ctrl+c (стандартная команда «скопировать» в виндовс).

Теперь, когда в буфере обмена у нас уже имеется название картинки, пора переименовать нашу новую картинку, кликаем по ней так же правой кнопкой мыши, нажимаем переименовать, когда название снова подсветится, как и в прошлый раз нажимаем комбинацию ctrl+v (вставить), после нажимаем клавишу Enter. Все! Картинка переименована, теперь нам нужно скопировать новую картинку в ту папку где находится старая, просто перетягиваем мышкой из одной папки ее в другую, при этом согласившись на замену (так же можно ее загружать сразу на хостинг).

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

Мы буквально заменили старую картинку на новую.

Тут нужно упомянуть о нескольких нюансах:

 

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

Вот видео инструкция, для наглядности:

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

Сделаю сайт, который
будет продавать

Эта статья не единственная, по ссылке есть еще ...