Jump to content
  • 0

Гиперссылки в таблицах

GoodLuck

Asked by GoodLuck,

 Share

Question

GoodLuck Explorer

GoodLuck

Posted
Posted

Всем привет!

Предположим имеем что-то вот такое:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Мой сайтик</title>
</head>
<body>
<table width="100%" height="85" border="1" cellpadding="0" cellspacing="0">
  <tr>
	<td width="23%"><p>набор ссылок</p></td>
	<td width="77%">место их загрузки</td>
  </tr>
</table>
</body>
</html>

Поясню. Имеем таблицу, две колонки, в левой набор ссылок, а правая часть - это то, куда они должны загружаться. Как это сделать можете рассказать?! Причем никаких iframe там быть недолжно. Просто просматривая код сайта сделаного в табличном дизайне, никак не могу понять как они этого добиваются. В общем помогите подалуйста кто может.

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
GoodLuck Explorer

GoodLuck

Posted
  • Author
Posted (edited)

Люди, искал я по форуму... можете пожалуйста кинуть сюда код чтобы я разобрался и не страдал?! Т.е код того, как сделать чтобы содержимое гиперссылок загружалось в отдельную ячейку (или таблицу), по примеру:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Мой сайтик</title>
</head>

<body>
<p> </p>
<table width="100%" height="347" border="1" cellpadding="0" cellspacing="0">
  <tr>
	<td width="18%" valign="top">
	<p> </p>
	<li><a href="1.html">Ссылка 1</a>
	<li><a href="2.html">Ссылка 2</a>
	<li><a href="3.html">Ссылка 3</a>
	</td>
	<td width="82%"> 
	Содержимое ссылок</td>
  </tr>
</table>
<p> </p>
</body>
</html>

Edited by GoodLuck
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

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

Может, они этого и не добиваются? А просто грузят целиком новую страницу, отличающуюся от прежней только контентной ячейкой (ну, еще тайтлом и метатегами), как нормальные люди?

Потому что средствами HTML сделать это есть лишь одна возможность — iframe. Есть еще вариант AJAX (в простейшем виде — яваскрипт запрашивает с сервера готовый код HTML-фрагмента и вставляет его в innerHTML нужного элемента на странице), но сомневаюсь, что на "сайте сделаном в табличном дизайне" в ход идут такие сложности :rolleyes:

Link to comment
Share on other sites
  • 0
CoDy Explorer

CoDy

Posted
Posted

Для каждого элемента html страници браузером создается объект с кучей свойст. Каждый объект контейнерного элемента имеет свойство innerHTML. В нем хранится содержимое элемента(html код).

Если при помощи ява скрипта присвоить данному свойству html код, то данная разметка будет корректно отображена в браузере.

Например вот есть такая таблица:

<table border="1">

<tr><td id="tdid"></td></tr>

</table>

Если при активации ссылки свойству tdid.innerHTML присвоить корректный html код, то эффект будет такой же, еслибы этот код находился в ячейке <td id="tdid"></td> до загрузки странички.

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

http://codydemosite.h18.ru/dhtml/

Link to comment
Share on other sites
  • 0
GoodLuck Explorer

GoodLuck

Posted
  • Author
Posted
Может, они этого и не добиваются? А просто грузят целиком новую страницу, отличающуюся от прежней только контентной ячейкой (ну, еще тайтлом и метатегами), как нормальные люди?

ммм... недумаю ;) Я как глянул хорошие сайты в табличном дизайне (ну как по мне, незнаю насколько они в действительности хорошие), так вот там в коде столько таблиц, ячеек, вложенных в них таблиц, что просто.... В общем незаметил я подгузки новой страницы при приходе по ссылки :rolleyes: Я думаю незаметить было бы весьма сложно такое зрелище :) Кароче если так сделать, то страницы будут долго грузицо вроде как :) Ничего нехочу сказать, просто рассуждаю :)

Link to comment
Share on other sites
  • 0
GoodLuck Explorer

GoodLuck

Posted
  • Author
Posted (edited)
По этой ссылке есть небольшой скрипт, при помощи которого можно просмотреть объектную модель html документа. Там есть небольшой коментарий, думаю, разберешся.

хехехе ;) Если бы. Так ну давайте по основам.

<table border="1">

<tr><td id="tdid"></td></tr>

</table>

Если при активации ссылки свойству tdid.innerHTML присвоить корректный html код, то эффект будет такой же, еслибы этот код находился в ячейке <td id="tdid"></td> до загрузки странички.

Правильно ли я понял суть дела. Имеем ячейку или таблицу, этой ячейке или таблицы можно происвоить id (типа уникальное имя, чтоб не потерялась). И и с помощью innerHTML (несовсем понял что оно такое, думаю гугл пояснит), можно ссылкам что-то такое прописать, чтоб они думали как будто содержимое этих ссылок находится в ячейке или таблицы c указаным id. Примерно так ?! :rolleyes:

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

<!-- inner counter-->

<script type="text/javascript">

pseudocounter = 'http://register.h18.ru/g/pseudocounter.js';

document.write('<script type="text/javascript" src="' + pseudocounter + '?' + Math.random() + '"></scr' + 'ipt>');

</script>

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

Ну В общем спасибо за ответ :) Я конечно пишу ответ перед тем как в гугл и в книжку лезть :) Ладно пойду подумаю.

Edited by GoodLuck
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
Имеем ячейку или таблицу, этой ячейке или таблицы можно происвоить id (типа уникальное имя, чтоб не потерялась).
Да.
И и с помощью innerHTML (несовсем понял что оно такое, думаю гугл пояснит), можно ссылкам что-то такое прописать, чтоб они думали как будто содержимое этих ссылок находится в ячейке или таблицы c указаным id. Примерно так ?!
Не совсем, не так просто. innerHTML — это свойство DOM-элемента (до HTML5 было нестандартным, но поддерживается всеми браузерами), позволяющее записывать в него любой допустимый HTML с помощью javascript-а. По событию клика по ссылке можно вызвать скрипт, который 1) запросит этот HTML с сервера, 2) впишет его в нужную ячейку. Второй шаг элементарный, а вот с первым есть тонкости (подробности здесь).

Кстати, далеко не факт, что на современных каналах табличные страницы "будут долго грузицо". Серверы давно умеют сжимать код gzip-ом, а браузеры — рисовать по мере поступления и довольно быстро...

<script type="text/javascript">

pseudocounter = 'http://register.h18.ru/g/pseudocounter.js';

document.write('<script type="text/javascript" src="' + pseudocounter + '?' + Math.random() + '"></scr' + 'ipt>');

</script>

Тут скрипт вписывает в страницу другой скрипт (счетчика) из внешнего файла. Сабжевую задачу это не решает.
Link to comment
Share on other sites
  • 0
GoodLuck Explorer

GoodLuck

Posted
  • Author
Posted

Ага, вот оно как на самом деле то ;) Ну я как раз скачал соответствующие книжки, буду искать :rolleyes:

А почему такие сложножности с ответом возникают то ? :) Я в плане того, что это вроде как должна быть обыденная задача, т.к ссылки есть на всех сайтах. Или я чего-то непонимаю или незнаю ?! :) Можетя страдаю фигней которую нормальные дизайнеры не используют, а используют кое-что другое ?! :) Или просто чего-то не учитываю. Поясните кто может.

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
Можетя страдаю фигней которую нормальные дизайнеры не используют, а используют кое-что другое ?!
Большинство, насколько я в курсе, не заморачивается такими сложностями и грузит страницу целиком :rolleyes:. При этом стремится к минимизации оформительского кода и выносу всех украшательств в CSS (который кешируется браузером). А AJAX использует для небольших динамических элементов (голосований, комментариев и т.п.). Но всё зависит от задачи...
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept