Перейти к содержанию
СофтФорум - всё о компьютерах и не только

Альтернатива фреймам


Рекомендуемые сообщения

Делаю сейчас сайт - http://www.fricom.com.ua/new/1.html

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

Подумал о фреймах. Воспользовался поиском - много недовольных фреймами. Тогда нужна альтернатива. Прочитал, что можно использовать SII и PHP include. C функцией include я хорошо знаком, но что она даёт в моей ситуации? Моя страничка построена на таблицах.

Ссылка на комментарий
Поделиться на другие сайты

Подумал о фреймах. Воспользовался поиском - много недовольных фреймами.
если не хочешь использовать <frame> можешь воспользоваться <iframe> почти тоже самое что и <frame>,

но жалоб на этот тег я еще не слышал, да и его воспринимают все браузеры...

C функцией include я хорошо знаком, но что она даёт в моей ситуации? Моя страничка построена на таблицах.
одно другому не мешает ...
Ссылка на комментарий
Поделиться на другие сайты

Функция include дает тебе возможность быстро и ненапряжно вставить меню в любую страничку, и при необходимости внести измнения меню - они вносятся только в одном месте.

Ссылка на комментарий
Поделиться на другие сайты

Видел как делают чаты без фреймов?

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

<div id=page></div>

id можешь задать любой, главное следи за кодом.

сразу после тега body вставь строку:

<div style="display:none"><iframe name=loader onload="showpage()"></iframe></div>

если хочешь сменить имя, опять же следи за кодом.

В этот скрытый фрейм мы будем грузить HTMLки особого формата, примерно так:

<html><body><div id=load_page>Здесь размести то что будет загружаться</div></body></html>

а теперь внутри блока head вставь яваскрипт:

<script language=javascript><!--function loadpage(url){loader.src=urlpage.innerHTML="<b style="color:#0000ff">Идёт загрузка</b>"}function showpage(){page.innerHTML=loader.document.getElementById('load_page').innerHTML}//--></script>

а используется всё просто, в сылках меню пишешь <a href="java script:loadpage('путь_к_паге_осбого_формата')">...</a>

Ссылка на комментарий
Поделиться на другие сайты

2 Лорд Дмитрий:

Многое непонятно. Если можно - поясни на примере. С учётом того что все div`ы будут находится в ячейках страницы. То есть раздели, например, страничку на 2 части - меню и контент. Java-скрипт понятно где размещать, а всё остальное не понятно.

Ссылка на комментарий
Поделиться на другие сайты

Java это конечно хорошо, не забывай что у некоторых Ява отключена...(кстати у меня) :g:

лучше исползовать include - удобней, быстрей, короче, и у всех работать будет +

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

ИМХО

Ссылка на комментарий
Поделиться на другие сайты

в моменте решается твоя проблемка..

1)Мне как-раз и нужно, чтобы меню не сворачивалось, а оставалось таким-же. Или сворачивалось, но при загрузке страницы снова стало в предыдущее положение. Чтобы посетителю снова не приходилось его разворачивать (что на мой взгляд неудобно)

2)Или можно сделать как-то ещё более удобней или рациональней?

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

4)Я думаю всё привязывать к базе данных MySQL и PHP, то есть чтобы всё хранилось в базе. Создать какую-то систему для редактирования базы на PHP. Чтобы можно было организовать поиск, сортировку данных. Но я пока не владею PHP и MySQL, но нахожусь в процесе изучения.

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

С помощью myAdmin (точно не помню) создам таблицу (или 4-е таблицы?), выберу типы данных, занесу в поля в данные и с помощью определённого скрипта будут загружаться нужные мне данные из базы. Если можно - обьясните пободробней как всё это сделать или может нужно что-то ещё сюда добавить.

Ссылка на комментарий
Поделиться на другие сайты

verba: Я не знаю такого меню, которые бы сворачиволось\разворачевалось без явы!

Emotion: Попробую собрать в единую страничку, то что показал, может понятнее будет.

<html><head><script language=javascript><!--function loadpage(url){loader.src=urlpage.innerHTML="<b style="color:#0000ff">Идёт загрузка</b>"}function showpage(){page.innerHTML=loader.document.getElementById('load_page').innerHTML}//--></script></head><body><div style="display:none"><iframe name=loader onload="showpage()"></iframe></div><table width=100%><tr><td width=200px>твоё меню</td><td><div id=page></div></td></tr></table></body></html>

А странички, которые будут загружаться, должны иметь формат

<html><body><div id=load_page>Здесь размести то что будет загружаться</div></body></html>

теперь понятно?

Ссылка на комментарий
Поделиться на другие сайты

...

Я думаю всё привязывать к базе данных MySQL и PHP, то есть чтобы всё хранилось в базе. Создать какую-то систему для редактирования базы на PHP. Чтобы можно было организовать поиск, сортировку данных. Но я пока не владею PHP и MySQL, но нахожусь в процесе изучения.

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

С помощью myAdmin (точно не помню) создам таблицу (или 4-е таблицы?), выберу типы данных, занесу в поля в данные и с помощью определённого скрипта будут загружаться нужные мне данные из базы. Если можно - обьясните пободробней как всё это сделать или может нужно что-то ещё сюда добавить

...

Если не владеешь лучше не привязывай к базе (будет много всяких проблем с этим)

но если очень хочеЦЦа то чуть-чуть попишу :

Одной хватит таблицы в большинстве случаев

Создать систему для простого редактирования придется в любом случае если программка твоя не маленькая (для удобства конечно)

делается довольно просто (описывать не буду, муторно и долго =) не занимаюсь пока этим , но могу немного рассказать)

табличка в базе примерно такая:

id INT NOT NULL AUTO_INCREMENT,

ware varchar(255),

img_path varchar(100),

descr text,

feat varchar(255),

PRIMARY KEY (id) )

делаешь html с полями которые хочешь добавить

например как ты говоришь название товара фото все это конечно же в форме т.е (<input type=text name=ware maxlength=255> ...)

а action формы посылаешь на скрипт обработчик так: <form action=act.php method=POST> ...

act.php может выглядеть как-то так:

<?

// сначала получаем данные из

// POST массива

$ware = $_POST['ware'];

$img_path = $_POST['img_path'];

// Но при добавлении картинки придется поработать с объектом file в html (<input type=file name=img_path> ... )

// с ним возни много объяснять не могу, извини

...

// далее конечно надо провести коррекцию

// полученных данных из POST массива

// ну и можно добавлять в базу

// обработанные данные

// перед этим конечно же подключившись

// к ней, процесс подключения

// описывать не могу

$query = mysql_query("INSERT INTO имя_таблицы_куда_вставляем VALUES('$ware','$img_path' .........)") or die("<script>alert('Не удалось добавить данные!');history.back</script>");

// все данные вставлены

// можем сказать это =)

echo "<script>alert('Данные успешно внесены в таблицу!')</script>";

......

дальше в том же духе я привел только пример как можно это сделать

?>

Ссылка на комментарий
Поделиться на другие сайты

Я создал одну страничку - в неё поместил код.

Потом создал вторую - в неё поместил другую часть кода.

Получилось - на первой странице нажимаю на текст - он исчезает и вместо него появляется второй. А какую это имеет связь с меню?

Изменено пользователем Emotion
Ссылка на комментарий
Поделиться на другие сайты

Немного поменялся адресс моей странички - http://www.fricom.com.ua/new/1.php

если не хочешь использовать <frame> можешь воспользоваться <iframe> почти тоже самое что и <frame>

Главное для меня, чтобы было всё красиво и удобно для пользователей. Можешь привести пример использования <iframe>? И какие недостатки этого тега?

Пока дело стоит на месте. Может есть смысл использовать другое меню? Мне кажеться, что такое меню удобное и наглядное. Ну если не удасться его реализовать - придётся придумывать что-то другое. Может кто-то что-то посоветует?

Изменено пользователем Emotion
Ссылка на комментарий
Поделиться на другие сайты

Emotion

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

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

Ссылка на комментарий
Поделиться на другие сайты

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

А как это реализовать на JS? И как на PHP?

Ссылка на комментарий
Поделиться на другие сайты

А как это реализовать на JS? И как на PHP?

Разницы практически нету. Суть в том, что ты читаешь значение переданного параметра с номером раскрытого пункта, и раскрываешь его при помощи js.

Если полностью на js - то читаешь скриптом значение параметра и вызываешь функцию раскрытия соответствующего пункта меню.

Если за основу взять php, то на php читаешь значение параметра и вставляешь на страницу js код, который при выполнении откроет нужный пунт меню.

Ссылка на комментарий
Поделиться на другие сайты

Можно на моем примере(именно для моего меню)? Я просто плохо знаком с JS и PHP.

Возьмем для примера JavaScript (потому что на php я в жизни не писал :no: ).

Ставим задачу: Открыть на новой странице пункт меню, из которого к ней обратились.

Разобьем задачу на подпункты.

1. Передать на новую страницу идентификатор нужного пункта меню.

2. Принять на странице идентификатор открываемого пункта меню.

3. Открыть нужный пункт меню после загрузки страницы.

1. Для того, чтобы передать на новую страницу идентификатор нужного пункта меню - отредактируем ссылки меню. Пусть открываемая страница имеет название page.html. Параметр назовем openId. Тогда ссылка будет выглядеть так:

page.html?openId=идентификатор_открываемого_пункта_меню

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

// Modified code taken from MSTV OneWorld UIvar QueryString = new Array();QueryString["_"]="";function unspace( qs_element ) {return qs_element.split( '+' ).join( ' ' );}if ( location.search.length > 1 ) {var qs_query = location.search.substring( 1, location.search.length );var qs_pairs = qs_query.split( '&' );for ( var qs_index = 0; qs_index < qs_pairs.length; qs_index++ ) { var qs_element = qs_pairs[qs_index].split( '=' ); QueryString[qs_element[0]] = unspace( unescape( qs_element[1] ) );}}

3. Посмотрев код скрипта я делаю вывод, что для того, чтобы открыть нужный пункт меню - надо div'у с заданным идентификатором установить style.display = "". Пишем соответствующую функцию:

function openElement(targetId){targetElement = document.all(targetId);targetElement.style.display = "";}

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

<script> openElement(QueryString["openId"]); </script>

Все!

Вот тебе пример на основе твоей страницы (я пропатчил ссылки только для первых трех пунктов меню, ссылается страница сама на себя):

page.rar

page.rar

Ссылка на комментарий
Поделиться на другие сайты

Почему-то не работает. Я просто взял твою страницу и запустил, предварительно скопировав содержимое файла script в свой файл script. Если у тебя работает - значит я что-то не так сделал...

Ссылка на комментарий
Поделиться на другие сайты

Попробуй просто распаковать page.html и script в отдельнуб папку и оттуда открыть page.html.

Ссылка на комментарий
Поделиться на другие сайты

Взял 2 твоих файла, поместил в пустую папку. Добавил туда файл css и все картинки. Вид принял оригинальный + стало работать. Проверил на загрузке другой странице(page1.html, только немного с другим содержимым). Всё ок.

Но есть ещё несколько проблемок:

1)Мой оригинальный сайт использует функцию php - include(). Ты видишь только результат обработки php-файла. Мне нужно, чтобы ты поэтапно обьяснил, что и куда ты добавлял(код). Чтобы я мог тоже самое проделать. Я вроде бы всё так же сделал - но у меня не получилось ничего.

2)Возникает ситуация - если я открыл несколько пунктов меню. Потом я нажимаю на ссылку и у меня закрываются все пускты меню кроме последнего открытого. Можно ли сделать, чтобы открытым оставалось всё что открывалось?

Ссылка на комментарий
Поделиться на другие сайты

1)Мой оригинальный сайт использует функцию php - include(). Ты видишь только результат обработки php-файла. Мне нужно, чтобы ты поэтапно обьяснил, что и куда ты добавлял(код). Чтобы я мог тоже самое проделать. Я вроде бы всё так же сделал - но у меня не получилось ничего.

Я же вроде и писал поэтапно. Вот еще раз вкратце, код смотри в посте №16.

1. Изменить ссылки в меню, добавив в них идентификатор пункта меню.

2. Добавить в файл со скриптом чтение параметров.

3. Добавить в файл со скриптом функцию открытия пункта меню.

4. В конце страницы (page.html) добавить скрипт, открывающий пункт меню.

2)Возникает ситуация - если я открыл несколько пунктов меню. Потом я нажимаю на ссылку и у меня закрываются все пускты меню кроме последнего открытого. Можно ли сделать, чтобы открытым оставалось всё что открывалось?

Можно. На JavaScript. Но обьяснение без кода, я так понимаю, тебя не устраивает, а код писать мне лень. Если вкратце - то я вижу два способа:

1. Через массив. Создать массив, куда при открытии пунктов меню добавлять идентификаторы открытых пунктов, а при закрытии - исключать из массива. Все ссылки меню не указывают на страницу, а вызывают скрипт перехода на новую страницу, передавая ему ссылку. Скрипт добавляет к ссылке соответствующее количество параметров с идентификаторами раскрытых пунктов меню и вызывает переход по этой ссылке. Принимающая страница читает параметры, раскрывает меню.

2. Через куки. Раскрытие/закрытии пунктов меню фиксируется в куках при помощи js. Страница после загрузки читает эти данные из куков и раскрывает меню.

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

Но это так, общие рекомендации.

Ссылка на комментарий
Поделиться на другие сайты

1)Попробую ещё раз перенести твой код. Сразу отпишусь.

2)Был бы очень благодарен, если бы ты написал мне этот скрипт, так как сам не владею JS.

3)По-идее не у многих людей отключён JS. А как по другому разментить такое количество ссылок? Они ведь будут тянуться вниз, а это не удобно. По-моему почти везде навигация сделана на JS. Или я не прав? Ведь DHTML построен на JS?

Сайт www.fujifilm использует JS для работы своего меню? Ведь компания серйозная...

Или можно использовать какую-то проверку - если JS включен - одна страница, нет - другая(статическая)?

Кстати, где-то через недельку планирую пойти на компьютерные курсы по web-дизайну. Вот сюда - http://contact.com.ua

Сейчас выбираю куда пойти - на программирование на PHP или на сам web-дизайн.

Курсы находятся в 100-200 метрах от моего учебного корпуса (что очень удобно) :blushing:

Изменено пользователем Emotion
Ссылка на комментарий
Поделиться на другие сайты

По-идее не у многих людей отключён JS. А как по другому разментить такое количество ссылок? Они ведь будут тянуться вниз, а это не удобно. По-моему почти везде навигация сделана на JS. Или я не прав? Ведь DHTML построен на JS?

Сайт www.fujifilm использует JS для работы своего меню? Ведь компания серйозная...

Или можно использовать какую-то проверку - если JS включен - одна страница, нет - другая(статическая)?

Ты путаешь украшение и функционал.

У тебя на сайте доступ к линкам внутри меню можно получить только при помощи js. Если оы отключен - человек не может добраться к ссылкам.

Теперь посмотри на сайт http://www.fujifilm.com Допустим нам нужен пункт Comersial & Goverment -> Audio Video Media. Пользователь, у которого включен js наводит на пункт Comersial & Goverment и выбирает подпункт Audio Video Media. Пользователь, у которого отключен js кликает на пункт Comersial & Goverment и попадает на страницу, на которой отображены подпункты. На ней он может кликнуть на Audio Video Media.

Понимаешь разницу?

Ссылка на комментарий
Поделиться на другие сайты

Теперь понятно. Но ведь не многие отключают Java Script? А кто и отключает(думаю новички этого не делают) - догадаются в чём проблема.

Можно например сделать, что при наведении на пункт меню появляется подсказка(но по моему у тега <a> нет такого параметра <alt>, но надо подумать, может как-то по-другому реализовать)

А вообще лучше сделать какую-то проверку - если JS включён - инклудить текущее меню, если выключен - инклудить другое, развёрнутое.

Насколько я понял, чтобы доделать скрипт - нужно учить JS самому :mad:

Ссылка на комментарий
Поделиться на другие сайты

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

Ссылка на комментарий
Поделиться на другие сайты

// включен ли JS на html

// в самом начале паги вставляем

<noscript>

<html>

<head>

<meta HTTP-EQUIV="REFRESH" CONTENT="0; URL=./noscript.htm">

</head>

</html>

</noscript>

в noscript.htm пишем:

<html>

<head>

<title>Пожалуйста включите JavaScript | Please on JavaScript</title>

</head>

<body>

<span style="color:black"><center>Пожалуйста включите JavaScript | Please on JavaScript</center></span>

</body>

</html>

все вот тебе проверка на вкл/выкл js

ЗЫЖ: Ваш скрипт работает только в ie

js редко кто отключает в основном из за безопасности

но все же js отключают не более 10 процентов всех юзеров

Изменено пользователем Dimon#ic
Ссылка на комментарий
Поделиться на другие сайты

Гость
Эта тема закрыта для публикации ответов.
  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...