В этом видеоуроке мы рассмотрим 3 варианта как сделать кнопку НАЗАД для перемещения по сайту на предыдущие страницы в обратном порядке. Кнопка НАЗАД также необходима когда с нескольких страниц сайта (A1, A2…An) ссылки ведут на одну и ту же страницу (B), а с этой страницы (B) необходимо вернуться на предыдущую страницу (An) сайта, с которой Вы попали на страницу (B).
Смотрите новый видеоурок:
Код кнопки “вернуться назад” для размещения на сайте:< a href = "#" onclick = > < img src = "assets/back2.png" alt = "Назад" / > < / a > |
В этом видеоуроке мы сделаем кнопку возврата назад на предыдущие страницы сайта в программе Adobe Muse. Эта кнопка будет возвращать по тому же пути, по которому мы ходили на сайте.
Кнопка Назад. Проект для урока.Для того чтобы сделать этот урок, я приготовил небольшой проект, точнее его небольшим называть нельзя, здесь он состоит из , страниц верхнего уровня, страниц первого уровня и также для страницы «page-2» есть еще несколько дочерних страниц. И для разнообразия я создал два шаблона. Первый шаблон применил к трем первым страницам. А второй шаблон применил ко всем остальным.
Давайте начнем. Кнопку Назад – мы будем делать в «Шаблоне С», чтобы она сразу появилась на тех страницах, к которым применен данный шаблон. Я захожу в редактирование данного шаблона, и именно сюда мы будем вставлять нашу кнопку «Назад».
Кнопка Назад. 3 способа.Кнопку «Назад» мы сможем вставить тремя способами. У меня есть специальный файл, который я уже заготовил в блокноте. И есть три способа, три кода, используя которые, у нас получится вставить такую кнопку на сайте.
Кнопка Назад. Способ№1 – простой текст.Первый вариант – это просто текст. Кнопка будет у нас в виде текста. Я копирую данный код:
< input type = "button" onclick = "history.back();" value = "Назад" / > |
И вставляю его в шаблон. Выглядит это вот так. У нас просто текст и он выделен белым цветом. Я размещу его вот здесь. Для того чтобы понять, как это все работает, мы нажимаем клавиши ctrl+alt+E для того, чтобы просмотреть весь сайт со всеми его страницами в браузере. Вот так выглядит главная страница сайта. Мы можем серфить по меню, выбирать страницы. Здесь у нас есть выпадающие меню. И, например, с главной страницы мы сразу перешли на страницу «page-3». И здесь у нас есть кнопочка «Назад».
Эта кнопка активная, но при наведении курсора мыши на нее, не появляется рука с пальцем. Мы можем спокойно нажать на эту кнопку, и нас перебросит назад на главную страницу. Точно также мы можем нажать на страницу «page-3», потом перейти на страницу «page-4» и нажать кнопку «Назад», она нас перебросит на страницу «page-3», и если мы еще раз нажмем на кнопку «Назад», то она нас переносит на главную страницу. Вот таким образом работает кнопка «Назад».
Но данную кнопку сложно назвать кнопкой, поскольку она представляет собой только вот такую надпись, выделенную белым цветом. Если мы захотим отредактировать ее в Muse, мы сможем изменить только размер текста, например, я поставлю здесь «36», чтобы вам было лучше видно. Цвет текста мы, по-моему, менять не можем. Сейчас я попробую поставить красный. Я выбрал красный цвет, но это никак не повлияло на нашу надпись, так что цвет мы менять не можем. Мы можем поменять размер. Попробуем сделать жирным и выставить по центру. Все, что мы можем сделать, так это такое редактирование. Если мы хотим сделать заливку данному блоку, например, сделать оранжевым цветом, то наш текст все равно будет выделяться белым, и, в принципе, выглядит не очень красиво.
Кнопка Назад. Способ№2 – Текст-ссылка.< a href = "#" onclick = "history.back();return false;" > Назад< / a > |
Сейчас мы его скопируем. Я нажимаю ctrl+C и перехожу в программу, и нажимаю ctrl+V для того, чтобы вставить на сайт. Он у нас выглядит вот такой ссылкой. Ссылка у нас синяя. Сейчас она не очень хороша видна. Давайте сделаем тоже 36-ой шрифт, чтобы укрупнить и увидеть поближе. Вот это у нас просто синяя ссылка. Если мы сейчас нажмем ctrl+alt+E, то увидим, что при просмотре она выглядит вот такой обычной синей ссылкой. Давайте еще перейдем пару раз, чтобы увидеть, нажимаем раз, два, возвращаемся. Вид у данной ссылки обычный, как у обычной ссылки.
К ней мы можем применять в программе Adobe Muse стили ссылок. Находятся стили ссылки в разделе «Гиперссылки», выбираем «Редактировать стили ссылки». У меня уже есть заготовленный вариант. Сейчас у меня уже есть заготовленный вариант. Вы видите, что к ней применен стиль. В стандартном состоянии и при наведении курсора мыши цвет синий и при активном состоянии – красный. Вы видели это при просмотре. Второй стиль я создал просто все черные состояния. Этот стиль мы можем применить к данной кнопке. Например, я выберу и применю к данной кнопке этот специальный стиль. И вы увидите, что наша надпись стала черной.
Здесь мы также можем сделать заливку, например, я сделаю тем же оранжевым цветом. Здесь уже можно редактировать текст. Поставим его по середине, выделим жирным. И, в принципе, этот вариант уже более похож на кнопку. Здесь уже нет такого белого выделения, и уже, в принципе, вариант уже вполне подходящий. При просмотре (ctrl+alt+E) давайте перейдем на страницу «page-3», на страницу «page-4» и еще раз пощелкаем. Эта кнопка работает точно также, как и первая, только имеет больше возможностей для редактирования дизайна.
Кнопка Назад. Способ№3 – кнопка – картинка.И третий вариант как мы можем разместить кнопку – это кнопка у нас будет картинкой. Я копирую данный код:
< a href = "#" onclick = "history.back();return false;" > < img src = "img.png" alt = "Картинка" / > < / a > |
Перехожу в Muse, нажимаю «Вставить». И этот третий вариант у нас – картинка. Для того, чтобы у нас тут появилась картинка какая-нибудь, нам необходимо скачать из интернета какой-нибудь файлик картинки либо создать его самостоятельно. Картинку мы добавляем через функцию программы «Файл», выбираем «Добавить файлы для передачи». Я уже скачал пару картинок из интернета. Мы можем выбрать какую-нибудь. Давайте выберем вот эту с кнопкой «Назад». Теперь если мы посмотрим в разделе «Ресурсы», то у нас добавилась кнопка «back2.png» – «Передать». Этот файл у нас для передачи.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Назад" / > < / a >
Все, нажимаем «ОК». В самом Muse мы не увидим никаких изменений. Все изменения мы увидим только при просмотре сайта в браузере. Давайте нажмем снова ctrl+alt+E для просмотра сайта в браузере и попробуем посерфить по нашим страницам.
Кнопка Назад. Просмотр результата.Перейдем на страницу, например, «page 2-1», теперь перейдем на страницу «page-2», теперь перейдем на страницу «page 3», далее на страницу «page-4». И теперь, если мы будем нажимать на кнопку назад, мы будем возвращаться последовательно в обратном порядке к главной странице сайта. Нажимаем «Назад», перемещаемся на страницу «page-3», на страницу «page-2». И здесь у нас уже нет кнопки. Если бы мы ее разместили в шаблоне, который применен к странице «page-2», то у нас бы здесь тоже была кнопка «Назад». Поскольку у нас ее нет, нам приходится перемещаться к главной странице, только нажав на кнопку «Главная» в меню. Давайте перейдем, например, на страницу «page 2-2-2», потом перейдем на страницу «page 2-2-1», потом на страницы «page-3 » и «page-4». И теперь в обратном порядке: страница «page-3», страница «page 2-2-1», страница «page 2-2-2» и на главную.
Конечно, вы можете не размещать данную кнопку у себя на сайте, а использовать обычные стрелки в браузере. Но если вы хотите, чтобы такая кнопка была у вас на сайте, то можете ее сделать вот такими способами.. И ссылка на статью будет под этим видео. На этом все. С вами был Дмитрий Шаповалов. Ставьте лайк к данному видео, подписывайтесь на канал , пишите комментарии внизу, а прощаюсь с вами до следующих видеоуроков.
Добрый день, возник вопрос как перенести кнопку назад и поставить ее рядом с кнопкой далее при оформлении заказа.У меня сейчас это выглядит так.https://yadi.sk/i/_ZNvGrvEhqSk3Если перенести ее вниз то она перестает работать.код отвечающий за...
Есть решение
Приветствую, кто подскажет, как можно сделать кнопку назад, к примеру в корзине, чтобы человек мог вернуться на предедущую страницу?
Воткнуть в шаблон где хотите кнопку, например, вот это
+1
Когда нажимаю кнопку назад на браузере у меня как будто слетают все стили пока не обновлю страницуТема default должно показывать как на скрине ниже)Подскажите в чем проблема
Здравствуйте, сделал кнопку "Вернуться назад" в корзине, даже не кнопку, а просто ссылку с кодомВернуться назадТеперь при возвращении назад в корзине...
Есть решение
Добрый день!Столкнулся с такой проблемой: при добавлении товара в корзину и нажатии в браузере кнопки "назад", информация о товарах в корзине (в дополнительном блоке) не сохраняется, пока не обновишь страницу. Т.е. заходим на сайт, переходим...
На сайте, который вы указали используется плагин для корзины.Как вариант с доработками, можно использовать отправку добавления товаров не на?html=1, а на?html=1&items=1 это в ответ даст полностью содержимое корзины.
Добрый день.При каждом шаге во время оформления заказа указывается кнопка "Далее".В теме "Suprime" код кнопки я нашел:
