Как зафиксировать фрейм в html

Как зафиксировать фрейм в html

Читаю Кормена

Пользователь

Регистрация: 28.12.2008

Сообщений: 46

Фиксация фреймов

Я недавно столкнулся с проблемой.
Я на сайте использую фреймы, но я не хочу чтобы можно было менять размеры перемещая полоску на верху.
Можно ли её зафиксировать. Если да то как?
Зарание благодарю.

Участник клуба

Регистрация: 04.10.2008

Сообщений: 1,485

можете попробовать указать атрибут scrolling=»no» у фрейма или css-атрибут overflow:hidden

свободен.

Регистрация: 13.02.2009

Сообщений: 3

Для этого служит флаг noresize. Атрибуты тега frameset можно посмотреть в HTML справочнике.

Регистрация: 05.03.2009

Сообщений: 1

Зафиксировать frame окошко в определенной области страницы

И мне нужно зафиксировать frame окошко в определенной области, в моем случае в квадрате справа от стрекозы.
Без пробелов и абзацев это возможно?

Добавлено через 3 часа 9 минут
ап.

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

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

Как зафиксировать элемент по отношению к определенной точке фона?
Подскажите решение: надо логотип всегда держать на уровне моря. Фон у меня background-size: cover;.

Зафиксировать полоску при прокрутке страницы
добрый вечер)такой вот вопрос)как сделать чтоб верхняя полоска при проктурке страницы оставалась.

Зафиксировать блок страницы. Подскажите решение
Здравствуйте Подскажите пожалуйста, как можно зафиксировать блок страницы, который находится не.

Регистрация: 26.05.2012
Сообщений: 164
Записей в блоге: 1
попробуйте css

1 2 3

position:fixed; top:значения сверху; left:значения слева;

или соответствено справа снизу
справа сверху
слева снизу
Регистрация: 30.01.2013
Сообщений: 99
Создай

1 2 3 4 5 6 7

#img{ position: absolute; display: block; width:..px; height:..px; margin:..px ...px ..px ..px; }

попробуй..
для картинки тоже наверное придется класс писать.
Регистрация: 26.05.2012
Сообщений: 164
Записей в блоге: 1

так нада фиксированое положения на странице, тоесть использовать fixed

а лучшый вариант поставь на Mozila FF дополнения FireBug и там удобно стрелочками вниз можно перелистывать разные свойства

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

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

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

Вывод в PictureBox определенной области Web-страницы
Допустим имеется сайт, возьмем данный сайт. Например вот цифра: 9 Как вывести в Windows Forms.

Снять скриншот определенной области страницы, используя Selenium
Всем доброго дня. Selenium умеет снимать скриншот всей страницы на ура: from selenium import.

Урок 4. HTML фреймы и гиперссылки

HTML фреймы используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ (фрейм или кадр).

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

HTML5 окончательно удалил инструмент фреймов, но, при этом элемент , который позволяет вставлять одну страницу в другую, остался в новом стандарте. Это ему удалось по той причине, что он используется на веб-страницах для выполнения ряда интеграционных задач, таких как вставка в страницы окон YouTube, рекламных блоков и поисковых полей Google.

Можно предположить, что тег вряд ли исчезнет из языка HTML, как уже было сказано, он используется для вставки окон YouTube, а на сегодня YouTube является одним из способов заработка и бизнеса, который требует также привлечения пользователей для просмотра видеороликов. Для привлечения пользователей и увеличения просмотров видеороликов развиты специальные сервисы, благодаря которым можно получить 1000 просмотров YouTube и создать значительный трафик на свой видеоканал.

Вернемя к нашим фреймам. Назначение HTML фреймов – это навигация (а не средство для разметки страницы). Идея фрейма заключается в том, чтобы разделить экран на несколько областей или окон. Это позволяет одновременно видеть больше одного документа и дает возможность на все время закрепить навигацию на экране.

При использовании простого дизайна с двумя HTML фреймами (рис.1) задействовано три документа:

• документ, описывающий фреймовую структуру,
• документ для левого фрейма,
• документ для правого фрейма.

Рис. 1. Простая фреймовая структура из двух фреймов

Фреймы содержатся в структуре и , замещающей в странице с фреймами структуру и , т.е. документ, описывающий фреймовую структур не имеет тегов и .

Допускается вложение фреймовых областей.

Атрибуты тега

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

cols=n – определяет столбец шириной в n пикселей.

cols=n% – выделяет данному столбцу фрейма n%-долю ширины окна броузера.

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

rows=n – определяет строку высотой в n пикселей.

rows=n% – выделяет данной строке фрейма n%-долю высоты окна броузера.

frameborder

Этот атрибут определяет отображение рамок фреймовой структуры.

frameborder=yes – отображается трехмерная рамка (значение по умолчанию).

frameborder=no – рамка невидима

Лучше определять строки и столбцы не в пикселах, а используя относительные значения. Символ звездочка (*) используется для указания того, что экран делится на пропорциональные части: COLS=»*,*,*» – соответствует COLS=»33%,33%,33%».

В значениях COLS (столбец), ROWS (строка) перечень должен быть заключен в кавычки. Если кавычки не используются, между значениями не должно быть пробелов.

Рассмотрим пример кода простой фреймовой структуры, изображенной на рис. 1.

Практическое задание 1

1. Создайте папку frames. Скопируйте в нее файлы с изображениями фонов fon3.jpg,fon8.jpg,fon10.jpg из папки html_css_4
2. Откройте файл shablon.html
3. Измените код как в листинге на рисунке 2. Сохраните документ под именем frames_2.html
4. Создайте файл, как на рисунке 3. Сохраните документ под именем doc1.html
5. Создайте файл, как на рисунке 4. Сохраните документ под именем doc2.html
6. Запустите файл frames_2.html двойным щелчком. В окне браузера Internet Explorer web-страница должна иметь вид, как на рис. 1

Рисунок 2. Фреймовая структура из двух столбцов

Рисунок 3. Документ doc1.html

Рисунок 4. Документ doc2.html

На рис. 1 представлен вид этой HTML-страницы в браузере. Экран по вертикали разбивается на 2 фрейма. Левый HTML фрейм занимает 25% экрана и содержит страницу с названием doc1.html. Правый HTML фрейм займет 75% экрана и содержит страницу doc2.html.

Тег определяет отдельный фрейм. Это непарный тег. Тегов должно быть ровно столько, на сколько областей делится экран. У тега имеются следующие атрибуты:

Этот атрибут указывает URL-адрес содержимого фрейма.

С помощью этого атрибута фрейму присваивается имя, которое можно использовать для ссылки на фрейм, обычно из других фреймов той же структуры. В гипертекстовой ссылке при этом используется атрибут target, который ссылается на имя фрейма. Имена фреймов могут состоять из букв и цифр. В качестве первого символа имени нельзя использовать символ подчеркивания ().

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

scrolling=yes (установка полосы прокрутки)

scrolling=no (отсутствие полосы прокрутки)

scrolling=auto (значение по умолчанию)

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

Практическое задание 2

1. Откройте файл shablon.html.
2. Измените текст, как в листинге на рисунке 5.
3. Сохраните документ в папке frames под именем frames_3.html
4. В новом документе наберите текст, изображенный в листинге 6. Сохраните документ под именем doc3.html
5. Запустите файл frames_3.html двойным щелчком. В окне браузера Internet Explorer Web-страница должна иметь вид, как на рис. 7.

Обращаем Ваше внимание на то, что во фреймовой структуре количество открывающих должно быть равно количеству закрывающих

Рисунок 5. Фреймовая структура из трех фреймов

Рисунок 6. Документ doc3.html

Рисунок 7. Фреймовая структура из трех фреймов

Контрольное задание

• Создайте файл с фреймовой структурой нашего сайта MyHouse.ru, состоящей из трех HTML фреймов (рис. 8). Сохраните его в папке public_html под именем index.html
• Правому фрейму присвойте имя main.
• В верхнем фрейме расположите бегущую строку (файл shapka.html)
• В левом фрейме расположите список проектов (файл menu.html).
• В правом фрейме – файл main.html.

Рисунок 8. Фреймовая структура сайта MyHouse.ru

2. Организация гиперссылок

Для организации гиперссылок используется тег а>, у которого есть обязательные атрибуты, иначе гиперссылка работать не будет.

Рассмотрим пока только обязательный атрибут href.

Структура гиперссылки

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

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

Гиперссылки можно встроить в любое место HTML – документа.

На рис. 9 приведен пример HTML-кода создания гиперссылки и вид в браузере страницы с этим кодом:

Подробную информацию об услугах нашего агентства Вы можете получить

Рис. 9. Пример создания текстовой гиперссылки

В этом примере слово “здесь” является элементом привязки (или якорем – anchor), а часть href=”inform.htm” представляет ссылку на URL и означает, что при щелчке на элементе привязки должен быть загружен файл “inform.htm”, находящийся в том же адресе сети.

Элементы привязки (якорь – anchor)

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

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

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

Рассмотрим пример организации графической гиперссылки (рис. 10):

У нас в агентстве приветливые и компетентные диспетчеры

Рис. 10. Пример создания графической гиперссылки

В этом примере рисунок «ris.jpg» является графическим элементом привязки. Браузер выделяет его синей рамкой.

Виды адресов

Абсолютный адрес – это полный адрес в Internet.

• – удаленный переход;
• – использование в ссылке абсолютного адреса на своем сервере ( не используется ).

Относительный адрес. Правила относительной адресации мы рассмотрели в теме 1. При написании адресов гиперссылок используются те же правила. Рекомендуется применение относительных адресов, поскольку при каждом перемещении каталога не приходится менять все ссылки.

• – переход на другой документ на своем сайте

Гиперссылки можно разделить на 3 категории:

1. Внешняя – ссылка на web-страницу, которая находится по другому адресу Internet (за пределами сайта). Для ее организации используется абсолютный адрес.

2. Внутренняя – ссылка на другую web-страницу внутри сайта. Для ее организации необходимо использовать относительный адрес.

3. Внутристраничная – ссылка на другую позицию внутри той же web-страницы. Например, в верхней части web-страницы можно поместить оглавление, а затем связать его пункты с последующими разделами этой же web-страницы или с конкретными разделами другой web-страницы внутри сайта.

Практическое задание 3

1. Откройте раздел «Организация гиперссылок» в файле справочника Sprav_html.doc. Ознакомьтесь с атрибутами тега . Будьте готовы ответить на вопросы по правилам задания значений этих атрибутов.
2. В файле menu.html для пункта «Проекты таунхаусов и блокированных домов», сделайте гиперссылку, целевым адресом которой является web-страница townhouse.html таким образом, чтобы web-страница townhouse.html грузилась в правый фрейм. Напомним, для того, чтобы ссылка грузила документ в нужный фрейм в теге необходимо указать атрибут target, который содержит имя фрейма, куда должен быть загружен документ. Например, . Результат на рис. 11.

Практическое задание 4

1. В папке public_html создайте папку project, а внутри нее папку img_d_152_1d.

2. Оформите web-страницу о проекте d-152-1d, используя материалы (тексты и фотографии) из папки projects/d-152-1d. Для оформления web-страницы должны быть использованы стили в таблице стилей и форматирование средствами атрибутов тегов.

3. Все материалы должны быть использованы. В результате на web-странице у Вас должны быть следующие блоки: Заголовок, Аннотация, Материалы, Цена за проект, Планы, Фасады

4. Сохраните web-страницу под именем projekt_d-152-1d.html в папке projects. Примерный результат на рис. 12.

Рис. 12. Web-страница projekt_d-152-1d.html.

5. На web-странице townhouse.html оформите изображение проекта D-152-1D и фразу «Проект D-152-1D» как гиперссылки на страницу projekt_d-152-1d.html, на которой содержится более полная информация об этом проекте (рис. 13).

6. Проверьте работоспособность гиперссылок.

Рис. 13. Изображение является гиперссылкой

Внутристраничные гиперссылки

Внутристраничная гиперссылка создается в два этапа.

Например, необходимо создать ссылку из оглавления на первую главу

1. В оглавлении рядом с названием главы 1 следует создать запись:

Если необходимо организовать гиперссылку на конкретный фрагмент другого HTML-документа (например, на главу 1 в документе «my.htm»), то этот фрагмент предварительно также помечается. Гиперссылка на него организуется следующим образом . Здесь к имени метки добавляется имя файла.

Практическое задание 5

1. Откройте созданную Вами web-страницу projekt_d-152-1d.html.

2. Под заголовком «Проект дома № D-152-1D» добавьте пункты

• Аннотация
• Материалы
• Цена за проект
• Планы
• Фасады

3. Создайте внутристраничные гиперссылки из каждого только что созданного пункта на соответствующий раздел web-страницы (рис. 14, а)

4. Внизу страницы создайте гиперссылку Наверх, при нажатии на которую пользователь будет возвращаться в начало страницы (рис. 14, б).

Рис. 14. Внутристраничные гиперссылки

Задание цвета гиперссылок

Принятые в Web по умолчанию цвета для гиперссылок: синий – для еще не посещенных гиперссылок, красный – для активизированных гиперссылок (в момент щелчка), фиолетовый – для уже посещенных.

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

Цвет гиперссылки (по умолчанию светло-голубой)

Цвет использованной гиперссылки (по умолчанию темно-фиолетовый)

Цвет активизированной гиперссылки (в момент щелчка)

Практическое задание 6

1. Вверху левого фрейма сделайте логотип графической гиперссылкой таким образом, чтобы при ее активизации в правый фрейм загружалась страница о сайте (файл main.html).
2. Убедитесь в работоспособности всех гиперссылок. Ваш сайт должен выглядеть примерно так, как показано на рис. 15, при переходе по ссылке «Проекты таунхаусов и блокированных домов» так, как на рис. 16, при щелчке на изображении проекта D-152-1D как на рис. 17.

Рис. 15. Главная страница сайта MyHouse.ru

Рис. 16. Вид web-сайта при активной ссылке «Проекты таунхаусов и блокированных домов»

Рис. 17. Вид web-сайта при активной ссылке «Проект D-152-1D»

Работа со специальными элементами

Работа со специальными элементами определяется с помощью псевдоклассов.

Псевдокласс – специальный селектор, определяющий, как выглядит HTML-элемент в определенный момент.

Например, CSS определяет псевдокласс, который устанавливает, как выглядят гиперссылки в определенные моменты времени:

a:link – не посещенные ссылки;

a:visited – посещенные ссылки;

a:active – активные ссылки;

a:hover – ссылка при наведении на нее фокуса.

Можно определить псевдокласс для первого символа элемента. Например, для абзаца:

p:first-letter . Это удобно для задания спецэффектов выделения заглавных букв.

Практическое задание 7

1. Для верхнего меню страницы проекта включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 18.

2. Проверьте работоспособность стиля.

а – не посещенные ссылки

б – ссылка при наведении на нее курсора

Рис. 18. Вид гиперссылки в определенный момент времени

Практическое задание 8

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

2. Проверьте работоспособность стиля. Обратите внимание на то, чтобы не изменился цвет фона и параметры других элементов меню. Измениться должен только вид гиперссылки.

а – не посещенная и посещенная ссылка

б – ссылка при наведении на нее курсора

Рис. 19. Вид гиперссылки «Проекты таунхаусов и блокированных домов»

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

4. Проверьте работоспособность стиля.

а – не посещенная ссылка

б – ссылка при наведении на нее курсора

Рис. 20. Вид гиперссылки для названия проектов

В результате выполнения этой темы, у Вас должны быть созданы следующие файлы:

Уроки HTML и CSS

• Урок 1. Как создать HTML страницу
• Урок 2. Внешние таблицы стилей CSS. Уроки CSS
• Урок 3. Структура HTML-элемента
• Урок 4. HTML фреймы и гиперссылки
• Урок 5. Веб формы (web-формы)
• Урок 6. Табличный макет сайта
• Урок 7. Блочная верстка web-сайта. Часть 1
• Урок 8. Блочная верстка web-сайта. Часть 2
• Урок 9. Фотогалерея для сайта Lightbox 2.04
• Контрольное задание по блочной верстке
• Контрольное задание «Создание HTML-шаблона на основе PSD-файла»
• Контрольное задание «Верстка таблиц»

Фреймы

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

Создание фреймов

Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами и , а в контейнере располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега применяется парный тег (от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:

 

       <p>Ваш браузер не отображает фреймы</p>