Отправлено: 09.11.07 04:06. Заголовок: "Изюмины" или Как сделать так же?

В целях познания HTML можем разобрать дизайн на примере.


Знайте, юзвери!
Подробный разбор чужих дизайнов осуществляется форумом ForAdmins с января 2007 года.
Другие "форумы тех поддержки" оказывающие данную услугу у нас нагло спёрли идею, а качества всё равно осуществить не могут.

 Отправлено: 09.11.07 04:15. Заголовок: Танго пишет 06.06.07..

Танго пишет 06.06.07 10:00:

цитата:

У меня вопрос - как сделаны кнопочки меню вот тут: http://ossba.borda.ru/ 1)сбоку 2)как меняют окрас

сменили дизайн. by_Ласка.

---

Ласка пишет 08.06.07 21:53:

цитата:

Из значимого. Верх: Скрытый текст <table border=0 cellpadding=0 cellspacing=0 width=100% > <tr><td width=500><img src="ссылка на лого - девочка с крыльями слева" ></td><td background=фон там, где горы видны valign=top> <br><br> <table cellpadding=0 cellspacing=0 width=270 height=250 background=большой синий квадрат сверху (фон таблицы, текста которой всё равно не видно в Мозилле)> <tr><td> <ilayer width="&{marqueewidth};" height="&{marqueeheight};" name="cmarquee01"> <layer name="cmarquee02" width="&{marqueewidth};" height="&{marqueeheight};"></layer> </ilayer> </td></tr> </table> </td></tr></table> <table border=0 cellpadding=0 cellspacing=0 width=100% > <tr><td background=фон под кнопками навигации width=270 valign=top> <div align=right><small =2><i><b><font style="font-size:9pt">Достигнуть зари можно только тропою ночи.</b><br>Джебран</i> <br></small></div> <script language="JavaScript"> if (document.images) { img1on = new Image(); img1on.src ="потемневший шар - Введение"; img1off = new Image(); img1off.src = "обычный синий шар"; img2on = new Image(); img2on.src ="потемневший горизонт - Сайт"; img2off = new Image(); img2off.src = "синий горизонт"; img3on = new Image(); img3on.src ="потемневшая голова - регистрация"; img3off = new Image(); img3off.src = "синяя голова"; img4on = new Image(); img4on.src ="потемневшее крыло - Энциклопедия"; img4off = new Image(); img4off.src = "синее крыло"; img5on = new Image(); img5on.src ="потемневшие холмы - Реклама"; img5off = new Image(); img5off.src = "синие холмы"; img6on = new Image(); img6on.src ="потемневшая нога (да, это нога)- Сюжет"; img6off = new Image(); img6off.src = "синяя нога"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }}//osw function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} </script> <small></small> <a href="ссылка на введение" title=Введение onmouseover="imgOn('img1')"; onmouseout="imgOff('img1')" ><img src="обычный синий шар" border="0" name=img1></a> <br><br> <a href="ссылка на сайт" title=Сайт onmouseover="imgOn('img2')"; onmouseout="imgOff('img2')" ><img src="синий горизонт" border="0" name=img2></a> <br><br> <a href="ссылка на регистрацию" title=Регистрация onmouseover="imgOn('img3')"; onmouseout="imgOff('img3')" ><img src="синяя голова" border="0" name=img3></a> <br><br> <a href="ссылка на энциклопедию" title=Энциклопедия onmouseover="imgOn('img4')"; onmouseout="imgOff('img4')" ><img src="синее крыло" border="0" name=img4></a> <br><br> <a href="ссылка на сюжет" title=Сюжет onmouseover="imgOn('img6')"; onmouseout="imgOff('img6')" ><img src="синяя нога" border="0" name=img6></a> <br><br> <a href="ссылка на рекламу" title=Реклама onmouseover="imgOn('img5')"; onmouseout="imgOff('img5')" ><img src="синие холмы" border="0" name=img5></a> <br><br><br><br><br><small> <b>Администрация:</b> связь с админами </small> <br> баннеры каталогов и рейтингов </td> <td > <table cellpadding=0 cellspacing=0 width=97% ><tr><td> Низ:  цитата: </td></tr> <tr><td colspan="2" width=11 background=11></td></tr> </table> </BODY> </HTML> А вообще респект им за оригинальность. 1) Сделаны в Фотошопе. 2) Это такой вид a:hover - отдельным скриптом - при наведении курсора картинка заменяется на другую с пояснением при этом содержа в себе ссылку.

---

Танго пишет 08.06.07 22:47:

цитата:

Я правильно поняла, что они просто описали переменные, которые потом использовали дальше?

---

Ласка пишет 08.06.07 23:59:

цитата:

Танго Ну в принципе да.

---

Танго пишет 09.06.07 00:41:

цитата:

Ласка, спасибо!

 Отправлено: 06.12.07 14:22. Заголовок: Здравствуйте, вот у ..

 Отправлено: 07.12.07 12:28. Заголовок: Fernanda пишет: Рас..

Fernanda пишет:

цитата:

Расскажите, пожалуйста, как сделать таблицу, как здесь http://magicgame.forum24.ru, как я понимаю, она совмещена как бы с логотипом...

Именно. http://foradmins.forum24.ru/?1-1-0-00000002-000-0-0#006
Тут я рассказала как делается сам дизайн. А на магикгейме просто сверху накинута прозрачная (border="0") таблица, в которой прописаны Дата, Время и т.п. на нужном месте, там где место для новостей в логотипе с поездом, серо-прозрачное место и сверху News написано - Скрытый текст

http://i165.photobucket.com/albums/u45/hameleon_album/inc/11-1.jpg

Можно этого же эффекта добиться и другим способом, посложнее, где всё должно быть рассчитано до пикселя. Только он подходит не для всех разрешений мониторов у пользователей, то есть у монитора с 1024 будет (может быть) всё хорошо, а у 1280 всё будет растянуто и криво. Ну так вот, для этого используется блочный элемент <div>, которому задаются параметры относительно верха, низа и сторон отображаемого окна (только окна у разных мониторов отображаются по-разному, но на это всем начхать, поэтому новости зачастую криво отображаются ) и ширина-высота самого блока, в котором будут собственно новости.
Способ с таблицей проще и надёжней.

---

Fernanda пишет:

цитата:

И второй вопрос, как сделать таблицу самих сообщений полупрозрачной, чтобы виднелся фон? как тут http://darkcastle2.forum24.ru/

А фон-то надо было прикрепить!

http://foradmins.forum24.ru/?1-1-0-00000002-000-0-0#000 В первом посте написано.

 Отправлено: 07.12.07 12:31. Заголовок: Ласка спасибо огром..

Ласка
спасибо огромнейшее!

 Отправлено: 08.12.07 21:33. Заголовок: Fernanda да пожалуйс..

Fernanda да пожалуйста, мне не трудно.

 Отправлено: 15.12.07 14:22. Заголовок: Ласка Подскажите пож..

Ласка Подскажите пожалуйста, как сделать так, чтобы фон поля для ввода сообщений был текстурой? (например, как здесь http://cosy.forum24.ru/)

 Отправлено: 16.12.07 01:15. Заголовок: Ровена респект им за..

Ровена респект им за аккуратный код.

Ищешь место верха про поля ввода и кнопки.


input,select,textarea{font-size:11px;font-family:Verdana;background-image:url('адрес текстуры');}
textarea{width:100%;height:120;}


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

 Отправлено: 16.12.07 13:19. Заголовок: Ласка странно, но у ..

Ласка странно, но у меня не работает... может быть я куда-то не туда вставляю?
Скрытый текст

<HTML> <HEAD> <TITLE>Трасса 57</TITLE> <META content="text/html; charset=windows-1251" http-equiv=Content-Type> <STYLE> BODY { BACKGROUND-POSITION: center top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(http://i020.radikal.ru/0711/95/de85ff3a3ccb.jpg); MARGIN: 15px 10px 10px; BACKGROUND-REPEAT: no-repeat; SCROLLBAR-BASE-COLOR: #ffffff .font1 {COLOR: #000000; font-family:Verdana; font-size:12px;} .font2 {COLOR: #000000; font-family:Verdana; font-size:11px;} .font3 {COLOR: #000000; font-family:Verdana; font-size:12px;} .font4 {COLOR: #000000; font-family:Verdana; font-size:11px;} .font5 {COLOR: #FFFFFF; font-family:Verdana; font-size:12px; font-weight:700;} .font6{COLOR: #000000; font-family:Verdana; font-size:12px;} ul,li {margin: 4px 4px 4px 4px; padding: 0px 0px 0px 0px;TEXT-INDENT: 10pt} input,select,textarea{font-size:11px;font-family:Verdana;background-image:url('http://i034.radikal.ru/0712/e2/81709d780ae3.gif');} textarea{width:100%;height:120;} a:link {COLOR: #1C3070; TEXT-DECORATION: none} a:active {COLOR: #ff0000; TEXT-DECORATION: none} a:visited {COLOR: #4F76B3; TEXT-DECORATION: none} a:hover {COLOR: #ff0000; TEXT-DECORATION: none} input.sender{background-color:#ffffff;font-weight:700;border:1 outset rgb(0,0,0);} </STYLE> </head> <BODY bgcolor=#8B7765 text="EECBAD" font face="comic sans, arial, verdana, courier" leftMargin=50 topMargin=10 marginheight=10 marginwidth=50 alink = "#EECBAD" link ="EECBAD" vlink ="#EECBAD"> <TABLE width="864" align="center" cellSpacing="0" cellPadding="0" height="100%" border="0" bordercolor="#EECBAD"> <TR><TD valign="top">

 Отправлено: 17.12.07 22:00. Заголовок: Ровена попробуй один..

Ровена попробуй одинарные кавычки убрать - 'http://i034.radikal.ru/0712/e2/81709d780ae3.gif' - если не получится, давай адрес форума, постараюсь поправить.

 Отправлено: 17.12.07 23:57. Заголовок: ­Ласка не получилось,..

*PRIVAT*

 Отправлено: 19.12.07 01:48. Заголовок: Ровена в боди скобка..

Ровена в боди скобка не закрыта была. Замени на это нужные куски:

Скрытый текст

В поле новостей: <center><font color="#EECBAD" face="Times" size="7px">Трасса 57</font></center> Куски верха: <HTML> <HEAD> <TITLE>Трасса 57</TITLE> <META content="text/html; charset=windows-1251" http-equiv=Content-Type> <STYLE> BODY { MARGIN: 15px 10px 10px; BACKGROUND-IMAGE: url(http://i020.radikal.ru/0711/95/de85ff3a3ccb.jpg); BACKGROUND-POSITION: center top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-REPEAT: no-repeat; SCROLLBAR-BASE-COLOR: #ffffff;} .font1 {COLOR: #000000; font-family:Verdana; font-size:12px;} .font2 {COLOR: #000000; font-family:Verdana; font-size:11px;} .font3 {COLOR: #000000; font-family:Verdana; font-size:12px;} .font4 {COLOR: #000000; font-family:Verdana; font-size:11px;} .font5 {COLOR: #FFFFFF; font-family:Verdana; font-size:12px; font-weight:700;} .font6{COLOR: #000000; font-family:Verdana; font-size:12px;} ul,li {margin: 4px 4px 4px 4px; padding: 0px 0px 0px 0px;TEXT-INDENT: 10pt;} input,select,textarea{font-size:11px;font-family:Verdana;background-image:url(http://i034.radikal.ru/0712/e2/81709d780ae3.gif);} textarea{width:100%;height:120;} a:link {COLOR: #EECBAD; TEXT-DECORATION: none} a:active {COLOR: #EECBAD; TEXT-DECORATION: none} a:visited {COLOR: #EECBAD; TEXT-DECORATION: none} a:hover {COLOR: #EECBAD; TEXT-DECORATION: none} input.sender{background-color:#ffffff;font-weight:700;border:1 outset rgb(0,0,0);} </STYLE> </HEAD> <BODY bgcolor=#8B7765 text="EECBAD" font face="comic sans, arial, verdana, courier" leftMargin=50 topMargin=10 marginheight=10 marginwidth=50 alink = "#EECBAD" link ="EECBAD" vlink ="#EECBAD"> <TABLE width="864" align="center" cellSpacing="0" cellPadding="0" height="100%" border="0" bordercolor="#EECBAD"> <TR><TD valign="top">

Если background-image:url(http://i034.radikal.ru/0712/e2/81709d780ae3.gif); приставить к textarea, то текстура будет только в полях ввода и кнопки будут простыми белыми без текстуры.

 Отправлено: 19.12.07 19:38. Заголовок: Ласка спасибо, ты пр..

Ласка спасибо, ты просто чудо!

 Отправлено: 05.01.08 13:54. Заголовок: http://harrypotterga..

http://harrypottergame.borda.ru/ А скажите, как делается такой дизайн. Я имею в виду таблицу там, где разделы и темы?

 Отправлено: 21.01.08 18:55. Заголовок: Платина http://i026..

Платина
http://i026.radikal.ru/0712/8b/48bb136ebbc3.png - картинка с лого и местами для писанины.
http://i018.radikal.ru/0801/01/142d45369fa9.png - фон непосредственно таблицы с кирпичиками по краям.
http://i019.radikal.ru/0801/2d/e4a37da57e9f.png - кирпичики ставятся на самый задний общий фон.
http://i023.radikal.ru/0801/95/889072c6b9be.png - низушка с копирайтом.

В самый конец верха:
Скрытый текст

<BODY background="кирпичики" bgproperties="fixed"> <center> <TABLE width="974px" cellpadding="0px" cellspacing="0px" border="0px"> <TR> <TD width="974px" height="633px" background="лого"> <center> <table width="929px" height="610px" border="0px"> <tr align="left" valign="top"> <td width="150px" height="145"></td> <td width="65px"></td> <td width="410px"></td> <td width="30px"></td> <td></td> <td width="5px"></td> </tr> <tr align="center" valign="center"> <td width="150px" height="190px" rowspan="3"> <font color="#2f372e" size="1"> <b>писанина новостей слева</b> </font> </td> <td width="65px" height="180px"></td> <td width="410px"></td> <td width="30px"></td> <td></td> <td width="5px"></td> </tr> <tr align="left" valign="center"> <td width="65px" height="110px"></td> <td width="410px"></td> <td width="30px"></td> <td rowspan="2"> <font color="#2f372e" size="1"> <b>писанина новостей справа</b> </font> </td> <td width="5"></td> </tr> <tr align="center" valign="center"> <td width="65px"></td> <td width="410px"> <font color="#2f372e" size="1"> <b>дата, погода, события игры</b> </font> </td> <td width="30px"></td> <td width="5px"></td> </tr> </table> </center> </TD> </TR> <TR> <TD width="974px" background="фон таблицы с кирпичами по краям"> <table width="900px" align="center" cellpadding="0" cellspasing="0" border="0"> <tr> <td>

Посередине по умолчанию ставится сама таблица форума.

В верх низа:
Скрытый текст

</table> <TR> <TD colspan="7"> <img src="низушка" width="974px" height="150px"> </TD> </TR> </TABLE> </center> </TD></TR> </TABLE> </BODY></HTML>

 Отправлено: 10.06.08 16:48. Заголовок: Ласка я туплю) но к..

Ласка
я туплю) но как в фотошопе делать эти кирпичики? О.О

 Отправлено: 15.06.08 23:31. Заголовок: Главный Псих Проще ..

Главный Псих
Проще найти готовые, чем делать. А потом перекрасить в фотошопе.

 Отправлено: 01.07.08 19:47. Заголовок: Ласка У меня такой ..

Ласка
У меня такой вопросик: можно сделать ссылку рабочей кнопкой? То есть, сделать ссылку кнопкой - это я знаю как. Но можно ли сделать, чтобы когда нажимаешь на кнопку, она видимо продавливалась (как, к примеру, когда отправляешь сообщение здесь). Я соображаю, что нужно сделать две картинки, но как их потом впихивать, чтобы они сменяли одна другую?

В общем, буду очень благодарен, если поможете)))))

 Отправлено: 02.07.08 12:41. Заголовок: McNamara, а где ты т..

McNamara, а где ты тут видишь кнопку, чтобы она "продавливалась", когда на неё нажимаешь? У меня в Опере не продавливается ни одна.

 Отправлено: 02.07.08 16:36. Заголовок: Reineke пишет: а гд..

Reineke пишет:

цитата:

а где ты тут видишь кнопку, чтобы она "продавливалась", когда на неё нажимаешь? У меня в Опере не продавливается ни одна.

Да и у меня в Мозилле тоже.

McNamara пишет:

цитата:

У меня такой вопросик: можно сделать ссылку рабочей кнопкой?

Образец такого эффекта в студию, плиз.

 Отправлено: 02.07.08 19:54. Заголовок: Ва! На Mybb кнопка &..

Ва! На Mybb кнопка "Отправить" (сообщение) продавливается. Или когда входишь на форум то ли "OK", то ли "Войти" тоже продавливаются. (Сейчас Ласка скажет, что на Mybb ей не годится).

Между прочим, в эксплоерере и на foradmins'е продавливается кнопка "Отправить" под формой сообщения, а в Опере - только подсвечивается жёлтым (у меня, в частности). Но однозначно - две картинки должны быть: кнопка нормальная и кнопка продавленная/подсвеченная.

Кстати, в эксплоерере она продавливается, когда кликаешь, в подсвечивается в Опере - когда наводишь.

Только, хорошо бы, чтоб во всех браузерах действовало...