Это можно сделать только фреймами?

[кэп]

Хочу сверстать страницы таким образом.

Слева - одновременно панель меню и навигации.

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

Я предполагаю сделать это с фреймами.

Теперь вопросы.

1. Если делать фреймами, сколько должно быть html-файлов?

У меня получается два:

- index.html (в нем задается фрейм - left.html)

- и собственно сам left.html

Нужно два html-файла. Или можно обойтись как-то и одним?

2. Как еще можно сверстать то, что я описал?

[ShumNo]

если 2 фрейма то и файлов 2.

делается подобное 1001 способом и самый простой наверное include в языке php

[afdw]

http://jsfiddle.net/ne1p74vb/

[кэп]

А какие DOCTYPE использовать для:

- index.html (содержит описание frameset)

- left.html (меню)

- подгружаемые страницы

Для index.html -- frameset.dtd

А остальные?

[SelenIT]

Забудьте про фреймы и ископаемые доктайпы (чай, не в эпоху нетскейпа 3 живем). Подгружайте контент на обычную страницу аяксом, с jquery это проще простого: $("#id_блока").load("адрес_html_файла.html");

 

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

[кэп]

Я на бесплатном хостинге свои страницы верстаю. narod.ru

[SelenIT]

Это не проблема. Пример из статьи обходится статичными html-файлами (плюс один файл js, тоже статичный), а сам jquery, если что, можно подключать с внешнего CDN. Никакого серверного программирования не понадобится.

[кэп]

Скажите, а с помощью каких технологий сделан сайт

http://remontka.pro

Там тоже неподвижные верх, низ и левое меню.

[SelenIT]

Там обычная страница, некоторым элементам которой задано position: fixed; overflow: auto. При переходе по ссылке она перегружается целиком.

[кэп]

Я заметил, что сейчас многие верстают так.

Но такие страницы на экране почему-то не плавно двигаются.

[кэп]

Забудьте про фреймы и ископаемые доктайпы (чай, не в эпоху нетскейпа 3 живем). Подгружайте контент на обычную страницу аяксом, с jquery это проще простого: $("#id_блока").load("адрес_html_файла.html")

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

[SelenIT]

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

[кэп]

А owerflow, owerflow-x, owerflow-y?

Эта возможность тоже позволяет заменить фреймы?

(я пока детально не разобрался)

[кэп]

Забудьте про фреймы

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

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

А во-вторых. Мне эта индексация нужна как собаке пятая нога. И на своих страницах у меня вот это:

<META NAME=ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

А сами фреймы очень удобны и элегантны.

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

Edited October 23, 2014 by кэп

[SelenIT]

ВСЕ последние версии браузеров превосходно их поддерживают. Почемуууу?

Если не указывать доктайп, они еще не то поддержат (даже размеры без "px" и hex-цвета без "#":). Обратная, так ее, совместимость с тучей не желающих умирать реальных страниц, сделанных в 90-е или позже, но в том же стиле...

 

 

А сами фреймы очень удобны и элегантны.

Можно пример задачи, которая "удобно и элегантно" решается на разбитом экране? Ни модальное окошко на весь экран не развернуть, ни расширить рабочую область, если в ней станет тесно, об адаптивности и мобильных юзерах лучше вообще не вспоминать. Юзер видит в адресной строке один адрес (ничего не значащий), по факту работает с другим. Для элементарного взаимодействия между навигацией и контентом (типа подсветки активного пункта) приходится городить скрипт. Проблему поисковиков тот же скрипт не решает, а в лучшем случае костылем заметает под коврик - как была половина ключевиков в одном документе, а половина в другом, так и осталось. Вдвое больше запросов к серверу, вдвое больше памяти на объекты браузера, путаница с разными глобальными объектами для скриптов, фиг кроссбраузерно застилизуешь пространство между фреймами...

 

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

[кэп]

Про iframe спасибо, что напомнили. Давно хотел опробовать.

Ну а "Если не указывать доктайп, они еще не то поддержат (даже размеры без "px" и hex-цвета без "#":)"...

Препод читает сочинение и говорит ученику: "Вася, сколько раз повторять, "жи", "ши" пишутся с буквой "и"

Вася: "Ну Иван Петрович, не нравится - не читайте".