Как сделать переход на другую страницу в html: как сделать переход на другую страницу html Archives • Vertex Academy

Переход на другую страницу — Неверов Евгений

Как сделать так, чтобы по нажатию на кнопку (картинку, текст, ячейку таблицы — нужное подчеркнуть) пользователь переходил на другую страницу?

 У каждого (ну, почти) элемента страницы (то есть у практически любого тега) есть специальный атрибут. Этот атрибут и определяет, что произойдёт, когда человек нажмёт на элемент (будь то кнопка, изображение или что-то другое).

А в JavaScript есть такое свойство страницы: location.href. В нём находится текущий адрес страницы. Если это свойство изменить, то браузер перейдёт на новый (изменённый) адрес.

Пример действующего кода:

<input
type="button"
value="Перейти на страницу 1.html"
onclick="top.location.href='1.html';" />

В этом коде префикс javascript: говорит о том, что дальше будет идти JavaScript-код, а слово top сообщает о том, что мы будем менять адрес родительского фрейма. Адрес перехода указывается в одинарных кавычках. В нашем примере переход будет осуществлён на страницу 1.

html.

Если на сайте фреймы не используются, то будет изменён адрес самой страницы, а если используются — тогда переход будет с основной страницы. Более ясно представлено на картинке:

Сверху показан переход с обычной страницы, а снизу — переход со страницы с фреймами.

Как сделать так, чтобы переход был только в текущем фрейме? Вместо слова top подставляем self, которое означает текущий документ. Пример кода:

<input
type="button"
value="Перейти на страницу 1.html в текущем фрейме"
onclick="self.location.href='1.html';" />

 Тогда переход состоится только в текущем фрейме, как показано на картинке:

Ну, а как тогда сделать так, чтобы при нажатии на кнопку в одном фрейме совершался переход в другом фрейме? В JavaScript есть специальный массив: top.frames, который содержит в себе все фреймы, которые есть на странице. А у каждого фрейма (тега <frame>) есть атрибут name, в котором указывается уникальное имя фрейма.

Значит, чтобы сделать переход в определённом окне фрейма нужно написать так:

<input
type="button"
value="Перейти на страницу 1.html в текущем фрейме"
onclick="top.frames['имя фрейма'].location.href='1.html';" />

 И получится так, как показано на картинке:

Прошу не забывать: атрибут onclick можно применять не только к тегу <input>, но и к очень многим другим тегам.

Думаю, вопрос раскрыт. Если есть дополнения — пишите комментарии.

Ну и не забывайте, что если Вы делаете переход в ссылке, то гораздо правильнее воспользоваться атрибутом target тега <a>.

17.10.2006 5:20 der Igel:

В onclick нет необходимости указывать javascript. Это схема в URI, и её надо указывать только в ссылках, т.е. если бы обработчик javascript был указан в атрибуте href ссылки.

Связь с автором: derigel < doggy > rsdn.ru

17.10. 2006 10:10 Евгений:

Совершенно верно, для меня это скорее привычка. Дурная, надо признать…

23.5.2007 6:28 ZelFF:

А вот такой вопрос… Как сделать переход с обычной страницы на страницу, содержащую ифрейм, причём чтоб страница в этом ифрейме отобразилась на нужной метке… Можно ли вообще такое реализовать? Заранее спасибо за ответ:)

23.5.2007 12:26 Евгений:

А это уже сложнее. Сходу так не отвечу даже…
По-моему не удастся так.

Связь с автором: evgeny ( кошка ) neverov.name

Высказаться:

Поставьте свою оценку: Средняя оценка этой страницы: 3.57 (7 оценок)

Создание ссылок на страницы и содержимое и настройка навигации по сайту в Dreamweaver

Руководство пользователя Отмена

Поиск

1. Руководство пользователя Dreamweaver
   
2. Введение
   1. Основы гибкого веб-дизайна
   2. Новые возможности Dreamweaver
   3. Веб-разработка с помощью Dreamweaver: обзор
   4. Dreamweaver / распространенные вопросы
   5. Сочетания клавиш
   6. Системные требования Dreamweaver
   7. Обзор новых возможностей
3. Dreamweaver и Creative Cloud
   1. Синхронизация настроек Dreamweaver с Creative Cloud
   2. Библиотеки Creative Cloud Libraries в Dreamweaver
   3. Использование файлов Photoshop в Dreamweaver
   4. Работа с Adobe Animate и Dreamweaver
   5. Извлечение файлов SVG, оптимизированных для Интернета, из библиотек
4. Рабочие среды и представления Dreamweaver
   1. Рабочая среда Dreamweaver
   2. Оптимизация рабочей среды Dreamweaver для визуальной разработки
   3. Поиск файлов по имени или содержимому | Mac OS
5. Настройка сайтов
   1. О сайтах Dreamweaver
   2. Настройка локальной версии сайта
   3. Подключение к серверу публикации
   4. Настройка тестового сервера
   5. Импорт и экспорт параметров сайта Dreamweaver
   6. Перенос существующих веб-сайтов с удаленного сервера в корневой каталог локального сайта
   7. Специальные возможности в Dreamweaver
   8. Дополнительные настройки
   9. Настройка установок сайта для передачи файлов
   10. Задание параметров прокси-сервера в Dreamweaver
   11. Синхронизация настроек Dreamweaver с Creative Cloud
   12. Использование Git в Dreamweaver
6. Управление файлами
   1. Создание и открытие файлов
   2. Управление файлами и папками
   3. Получение файлов с сервера и размещение их на нем
   4. Возврат и извлечение файлов
   5. Синхронизация файлов
   6. Сравнение файлов
   7. Скрытие файлов и папок на сайте Dreamweaver
   8. Включение заметок разработчика для сайтов Dreamweaver
   9. Предотвращение использования уязвимости Gatekeeper
7. Макет и оформление
   1. Использование средств визуализации для создания макета
   2. Об использовании CSS для создания макета страницы
   3. Создание динамичных веб-сайтов с помощью Bootstrap
   4. Создание и использование медиазапросов в Dreamweaver
   5. Представление содержимого в таблицах
   6. Цвета
   7. Гибкий дизайн с использованием «резиновых» макетов
   8. Extract в Dreamweaver
8. CSS
   1. Общие сведения о каскадных таблицах стилей
   2. Создание макетов страниц с помощью конструктора CSS
   3. Использование препроцессоров CSS в Dreamweaver
   4. Установка настроек стиля CSS в Dreamweaver
   5. Перемещение правил CSS в Dreamweaver
   6. Преобразование встроенного CSS в правило CSS в Dreamweaver
   7. Работа с тегами div
   8. Применение градиентов к фону
   9. Создание и редактирование эффектов перехода CSS3 в Dreamweaver
   10. Форматирование кода
9. Содержимое страницы и ресурсы
   1. Задание свойств страницы
   2. Задание свойств заголовка CSS и свойств ссылки CSS
   3. Работа с текстом
   4. Поиск и замена текста, тегов и атрибутов
   5. Панель DOM
   6. Редактирование в режиме интерактивного просмотра
   7. Кодировка документов в Dreamweaver
   8. Выбор и просмотр элементов в окне документа
   9. Задание свойств текста в инспекторе свойств
   10. Проверка орфографии на веб-странице
   11. Использование горизонтальных линеек в Dreamweaver
   12. Добавление и изменение сочетаний шрифтов в Adobe Dreamweaver
   13. Работа с ресурсами
   14. Вставка и обновление даты в Dreamweaver
   15. Создание и управление избранными ресурсами в Dreamweaver
   16. Вставка и редактирование изображений в Dreamweaver
   17. Добавление мультимедийных объектов
   18. Добавление видео Dreamweaver
   19. Добавление видео HTML5
   20. Вставка файлов SWF
   21. Добавление звуковых эффектов
   22. Добавление аудио HTML5 в Dreamweaver
   23. Работа с элементами библиотеки
   24. Использование текста на арабском языке и иврите в Dreamweaver
10. Создание ссылок и навигация
    1. О создании ссылок и навигации
    2. Создание ссылок
    3. Карты ссылок
    4. Устранение неполадок со ссылками
11. Графические элементы и эффекты jQuery
    1. Использование пользовательского интерфейса и графических элементов jQuery для мобильных устройств в Dreamweaver
    2. Использование эффектов jQuery в Dreamweaver
12. Написание кода веб-сайтов
    1. О программировании в Dreamweaver
    2. Среда написания кода в Dreamweaver
    3. Настройка параметров написания кода
    4. Настройка цветового оформления кода
    5. Написание и редактирование кода
    6. Подсказки по коду и автозавершение кода
    7. Свертывание и развертывание кода
    8. Повторное использование фрагментов кода
    9. Анализ Linting для проверки кода
    10. Оптимизация кода
    11. Редактирование кода в представлении «Дизайн»
    12. Работа с содержимым заголовков для страниц
    13. Вставка серверных включений в Dreamweaver
    14. Использование библиотек тегов в Dreamweaver
    15. Импорт пользовательских тегов в Dreamweaver
    16. Использование вариантов поведения JavaScript (общие инструкции)
    17. Применение встроенных вариантов поведения JavaScript
    18. Сведения об XML и XSLT
    19. Выполнение XSL-преобразования на стороне сервера в Dreamweaver
    20. Выполнение XSL-преобразования на стороне клиента в Dreamweaver
    21. Добавление символьных сущностей для XSLT в Dreamweaver
    22. Форматирование кода
13. Процессы взаимодействия продуктов
    1. Установка и использование расширений в Dreamweaver
    2. Обновления в Dreamweaver, устанавливаемые через приложение
    3. Вставить документы Microsoft Office в Dreamweaver (только для Windows)
    4. Работа с Fireworks и Dreamweaver
    5. Редактирование содержимого на сайтах Dreamweaver с помощью Contribute
    6. Интеграция Dreamweaver с Business Catalyst
    7. Создание персонализированных кампаний почтовой рассылки
14. Шаблоны
    1. О шаблонах Dreamweaver
    2. Распознавание шаблонов и документов на их основе
    3. Создание шаблона Dreamweaver
    4. Создание редактируемых областей в шаблонах
    5. Создание повторяющихся областей и таблиц в Dreamweaver
    6. Использование дополнительных областей в шаблонах
    7. Определение редактируемых атрибутов тега в Dreamweaver
    8. Создание вложенных шаблонов в Dreamweaver
    9. Редактирование, обновление и удаление шаблонов
    10. Экспорт и импорт XML-содержимого в Dreamweaver
    11. Применение или удаление шаблона из существующего документа
    12. Редактирование содержимого в шаблонах Dreamweaver
    13. Правила синтаксиса для тегов шаблона в Dreamweaver
    14. Настройка предпочтений выделения для областей шаблона
    15. Преимущества использования шаблонов в Dreamweaver
15. Мобильные и многоэкранные устройства
    1. Создание медиазапросов
    2. Изменение ориентации страницы для мобильных устройств
    3. Создание веб-приложений для мобильных устройств с помощью Dreamweaver
16. Динамические сайты, страницы и веб-формы
    1. Общие сведения о веб-приложениях
    2. Настройка компьютера для разработки приложений
    3. Устранение неполадок подключений к базам данных
    4. Удаление сценариев подключения в Dreamweaver
    5. Дизайн динамических страниц
    6. Обзор динамических источников содержимого
    7. Определение источников динамического содержимого
    8. Добавление динамического содержимого на страницы
    9. Изменение динамического содержимого в Dreamweaver
    10. Отображение записей баз данных
    11. Введение интерактивных данных и устранение неполадок с ними в Dreamweaver
    12. Добавление заказных вариантов поведения сервера в Dreamweaver
    13. Создание форм с помощью Dreamweaver
    14. Использование форм для сбора информации от пользователей
    15. Создание и включение форм ColdFusion в Dreamweaver
    16. Создание веб-форм
    17. Расширенная поддержка HTML5 для компонентов формы
    18. Разработка формы с помощью Dreamweaver
17. Визуальное построение приложений
    1. Создание главной страницы и страницы сведений в Dreamweaver
    2. Создание страниц поиска и результатов поиска
    3. Создание страницы для вставки записи
    4. Создание страницы обновления записи в Dreamweaver
    5. Создание страниц удаления записей в Dreamweaver
    6. Применение ASP-команд для изменения базы данных в Dreamweaver
    7. Создание страницы регистрации
    8. Создание страницы входа
    9. Создание страницы с доступом только для авторизованных пользователей
    10. Защита папок в ColdFusion с помощью Dreamweaver
    11. Использование компонентов ColdFusion в Dreamweaver
18. Тестирование, просмотр и публикация веб-сайтов
    1. Предварительный просмотр страниц
    2. Предварительный просмотр веб-страниц Dreamweaver на нескольких устройствах
    3. Тестирование сайта Dreamweaver

 

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

После настройки сайта Dreamweaver для хранения документов веб-сайта и создания страниц HTML потребуется создать подключения между вашими и другими документами.

Dreamweaver предоставляет несколько способов создания ссылок на документы, изображения, мультимедийные файлы и загружаемое программное обеспечение. Можно создать ссылки на любой фрагмент текста или изображение внутри документа, включая текст и изображения в заголовке, списке, таблице, элементе с абсолютным позиционированием (AP-элементе) или фрейме.

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

Абсолютные пути, пути относительно документа и корня сайта

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

Каждая веб-страница обладает уникальным адресом, который называется «унифицированным указателем ресурса» (Uniform Resource Locator; URL). Однако при создании локальной ссылки (ссылки с одного документа на другой в пределах одного сайта) обычно задается неполный URL-адрес документа. Вместо этого вводят относительный путь от текущего документа либо от корневой папки сайта.

Существует три типа путей ссылок:

• Абсолютные пути (например, http://www.adobe.com/ru/support/dreamweaver/contents.html).

• Пути относительно документа (такие как dreamweaver/contents.html).

• Пути относительно корня сайта (например, /support/dreamweaver/contents.html).

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

Примечание.

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

Абсолютные пути

К абсолютным путям относятся полные URL-адреса документов, включая название используемого протокола (обычно http:// для веб-страниц), например http://www.adobe.com/ru/support/dreamweaver/contents.html. Для изображений полный URL-адрес должен выглядеть следующим образом: http://www.adobe.com/ru/support/dreamweaver/images/image1.jpg.

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

Примечание.

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

Пути относительно документа

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

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

Допустим, имеется сайт со следующей структурой:

• Ссылку из файла contents. html на файл hours.html (находящихся в одной папке) можно создать с использованием относительного пути hours.html.

• Для связи файла contents.html с файлом tips.html (находящимся во вложенной папке resources) используйте относительный путь resources/tips.html. Каждый символ наклонной черты (/) обозначает переход на один уровень ниже в иерархии папок.

• Для связи файла contents.html с файлом index.html (находящимся в родительской папке, на один уровень выше файла content.html) используется относительный путь «../index.html». Две точки и наклонная черта (../) обозначают переход на один уровень выше в иерархии папок.

• Для связи файла contents.html с файлом catalog.html (находящимся в другой вложенной папке той же родительской папки) используется относительный путь «../products/catalog.html». В данном случае строка ../ обозначает переход в родительскую папку, а строка products/ — переход во вложенную папку products.

  При перемещении файлов группами (например, если перемещается целая папка и при этом все файлы в папке сохраняют те же пути относительно друг друга) для них исчезает необходимость обновления ссылок относительно документов. Однако при перемещении отдельного файла со ссылкой относительно документа (или файла, на который указывает такая ссылка) в ссылку необходимо внести изменения. (Если вы переместите или переименуете панель «Файлы», Dreamweaver обновляет все соответствующие ссылки автоматически.)

Пути относительно корня сайта

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

Пути относительно корня сайта начинаются с наклонной черты, которая символизирует корневую папку сайта. Например, путь /support/tips.html является путем относительно корня сайта к файлу (tips.html) во вложенной папке Support.

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

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

Справки по другим продуктам

• Проверка ссылок в Dreamweaver
• Установка относительного пути для новых ссылок
• Работа с сайтами Dreamweaver

Вход в учетную запись

Войти

Управление учетной записью

Вход в учетную запись

Войти

Управление учетной записью

Как перейти на другую страницу в HTML

Последнее обновление: 9 апреля 2023 г.

IN — HTML

В этом руководстве мы покажем вам, как перейти на другую страницу в HTML и как это сделать. для перехода с одной страницы на другую страницу в HTML.

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

Пошаговое руководство по переходу на другую страницу в HTML: —

Используемый здесь тег называется тегом привязки. Тег привязки используется для навигации между веб-страницами в HTML.

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

Здесь ниже мы собираемся показать вам коды в формате html, которые объясняют вам, как использовать тег привязки для навигации.

 

<голова>
 соответственно.
 В-третьих, тег используется для определения тела веб-страницы. Все содержимое для отображения на веб-сайте написано здесь.
 Здесь в теле мы покажем вам, как использовать тег привязки для перехода на другую страницу. Здесь, в этой статье, мы создаем три тега привязки, и все они разные.
 В первом теге привязки пользователь переходит на домашнюю страницу Google, когда он/она нажимает на текст.
 В следующем случае вы увидите там изображение, и когда вы нажмете на это изображение, вы будете перенаправлены в html-файл в папке проекта с именем this.
 И, наконец, вы увидите кнопку на веб-странице с текстовой кнопкой, нажмите на меня. и когда пользователь нажимает на кнопку. Он/она будет перенаправлен на индексную страницу talkerscode.com.
 Мы надеемся, что вы понимаете, как мы будем использовать тег привязки для навигации.
 Для навигации вам просто нужно написать ссылку на файл в атрибуте href тега привязки, и все готово. Есть много атрибутов страницы привязки, для них вы должны посетить нашу веб-страницу с атрибутом темы тега привязки.
 Наконец, теги и закрываются с помощью  и соответственно.
 Заключение :- 
 Наконец, в заключение, здесь мы можем сказать, что с помощью этой статьи мы можем перейти на другую страницу в html. Я надеюсь, что это руководство о том, как перейти на другую страницу в HTML, поможет вам.
 Как добавить навигацию к простой HTML-странице 
 В этом уроке мы добавим навигацию между двумя нашими простыми веб-страницами HTML. 
 Если вы до сих пор не следовали урокам, вам следует начать с начала курса. Для этого урока вам нужно, чтобы ваш «index.html» был открыт как в Блокноте, так и в вашем браузере, чтобы мы могли вносить в него изменения и обновлять браузер, чтобы увидеть их, как обычно. 
 Наша ссылка вверху выглядит немного потерянной и одинокой. Большинство веб-сайтов имеют более одной страницы, поэтому давайте добавим элемент, который позволит нам перемещаться между несколькими страницами. В процессе мы встретим еще несколько новых тегов и даже добавим наш первый стиль CSS.
  Используйте кнопки ниже для навигации по уроку 
 
 Внесите следующие изменения в свой index.html:
  
 
 
 
 
 Теперь, если вы сохраните и обновите, вы увидите, что у нас есть панель навигации   на обеих наших страницах, и все страницы выглядят намного красивее.
 Пока что не беспокойтесь о понимании кода, который мы только что добавили. Весь незнакомый текст — это CSS, о котором мы поговорим в следующем уроке. Вы можете заметить названия цветов, которые мы добавили — вы можете изменить эти цвета, сохранить их, обновить и посмотреть, что получится!
  Поэкспериментируйте с  , задав названия цветов разными цветами и наблюдая, как это повлияет на ваш сайт. Посмотрите, какие сочетания вам нравятся! 
  Подождите, разве вы не сказали НЕ добавлять стили в наш HTML? Что же это за элемент