Форум » Проблемы с дизайном » "Изюмины" или Как сделать так же? » Ответить
"Изюмины" или Как сделать так же?
Ласка: В целях познания HTML можем разобрать дизайн на примере. Знайте, юзвери! Подробный разбор чужих дизайнов осуществляется форумом ForAdmins с января 2007 года. Другие "форумы тех поддержки" оказывающие данную услугу у нас нагло спёрли идею, а качества всё равно осуществить не могут.
Ответов - 38, стр:
1 2 All
Ласка: Танго пишет 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: Ласка, спасибо!
Fernanda: Здравствуйте, вот у меня два вопроса. Уже не знаю сколько ищу, думаю, как же это сделать, но никак не получется. Расскажите, пожалуйста, как сделать таблицу, как здесь http://magicgame.forum24.ru, как я понимаю, она совмещена как бы с логотипом... И второй вопрос, как сделать таблицу самих сообщений полупрозрачной, чтобы виднелся фон? как тут http://darkcastle2.forum24.ru/
Ласка: 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 В первом посте написано.
Fernanda: Ласка спасибо огромнейшее!
Ласка: Fernanda да пожалуйста, мне не трудно.
Ровена: Ласка Подскажите пожалуйста, как сделать так, чтобы фон поля для ввода сообщений был текстурой? (например, как здесь http://cosy.forum24.ru/)
Ласка: Ровена респект им за аккуратный код. Ищешь место верха про поля ввода и кнопки. input,select,textarea{font-size:11px;font-family:Verdana;background-image:url('адрес текстуры');} textarea{width:100%;height:120;} И помним о том, что ничего яркого туда вставлять просто нельзя - пожалейте глаза юзеров! И просто неудобно будет.
Ровена: Ласка странно, но у меня не работает... может быть я куда-то не туда вставляю? <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">
Ласка: Ровена попробуй одинарные кавычки убрать - 'http://i034.radikal.ru/0712/e2/81709d780ae3.gif' - если не получится, давай адрес форума, постараюсь поправить.
Ровена: *PRIVAT*
Ласка: Ровена в боди скобка не закрыта была. Замени на это нужные куски: В поле новостей: <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, то текстура будет только в полях ввода и кнопки будут простыми белыми без текстуры.
Ровена: Ласка спасибо, ты просто чудо!
Платина: http://harrypottergame.borda.ru/ А скажите, как делается такой дизайн. Я имею в виду таблицу там, где разделы и темы?
Ласка: Платина 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>
Главный Псих: Ласка я туплю) но как в фотошопе делать эти кирпичики? О.О
Ласка: Главный Псих Проще найти готовые, чем делать. А потом перекрасить в фотошопе.
McNamara: Ласка У меня такой вопросик: можно сделать ссылку рабочей кнопкой? То есть, сделать ссылку кнопкой - это я знаю как. Но можно ли сделать, чтобы когда нажимаешь на кнопку, она видимо продавливалась (как, к примеру, когда отправляешь сообщение здесь). Я соображаю, что нужно сделать две картинки, но как их потом впихивать, чтобы они сменяли одна другую? В общем, буду очень благодарен, если поможете)))))
Reineke: McNamara, а где ты тут видишь кнопку, чтобы она "продавливалась", когда на неё нажимаешь? У меня в Опере не продавливается ни одна.
Ласка: Reineke пишет: а где ты тут видишь кнопку, чтобы она "продавливалась", когда на неё нажимаешь? У меня в Опере не продавливается ни одна. Да и у меня в Мозилле тоже. McNamara пишет: У меня такой вопросик: можно сделать ссылку рабочей кнопкой? Образец такого эффекта в студию, плиз.
Reineke: Ва! На Mybb кнопка "Отправить" (сообщение) продавливается. Или когда входишь на форум то ли "OK", то ли "Войти" тоже продавливаются. (Сейчас Ласка скажет, что на Mybb ей не годится). Между прочим, в эксплоерере и на foradmins'е продавливается кнопка "Отправить" под формой сообщения, а в Опере - только подсвечивается жёлтым (у меня, в частности). Но однозначно - две картинки должны быть: кнопка нормальная и кнопка продавленная/подсвеченная. Кстати, в эксплоерере она продавливается, когда кликаешь, в подсвечивается в Опере - когда наводишь. Только, хорошо бы, чтоб во всех браузерах действовало...
полная версия страницы