|
Как написать хтмл код к презентации ?
|
|
| Олечка | Дата: Суббота, 28 Апреля 2012, 11.17.26 | Сообщение # 1 |
 адмын :)
Группа: Администраторы
Сообщений: 81
Статус: Offline
| Для начала нам нужно загрузить презентацию на один из хостингов:
http://www.radikal.ru/
http://sevphoto.net/
http://www.imagepost.ru/
http://www.image123.net/
и другие.
Но лично я советую вам загружать свою презентацию на http://sevphoto.net/
В http://sevphoto.net/ ширина и высота презентации пишутся сверху вашего изображения .
Теперь можно приступать .
1.
Открываем Хтмл редактор
http://xhtml.ru/instr/html_editor/
2.
копируем и вставляем код (расчитан на презентацию с 1 окном)
<table style="BACKGROUND: url(ссылка на ваше изображение) no-repeat" border="0" width="ширина изображения" height="высота изображения">
<tbody><tr><td valign="top" width="ширина изображения , та же , что и в первом коде">
<div style="MARGIN-TOP: количество пикселей СВЕРХУpx; FLOAT: left; WIDTH:ШИРИНА окна px; HEIGHT: ВЫСОТА окна px; MARGIN-LEFT: количество пиксилей от левого края px; OVERFLOW: auto">
<font color="цвет шрифта"><font face="стиль шрифта"><font size="размер шрифта">TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </font></font></font></div></td></tr></tbody></table>
если вы хотите сделать код с тенью , просто скопируйте данный ниже код :
<table style="BACKGROUND: url(ссылка на ваше изображение) no-repeat" border="0" width="ширина изображения" height="высота изображения">
<tbody><tr><td valign="top" width="ширина изображения , та же , что и в первом коде">
<div style="MARGIN-TOP: количество пикселей СВЕРХУpx; FLOAT: left; WIDTH:ШИРИНА окна px; HEIGHT: ВЫСОТА окна px; MARGIN-LEFT: количество пиксилей от левого края px; OVERFLOW: auto">
<span style="color: #цвет шрифта; text-shadow: 2px 2px 1px #цвет тени"><font face="стиль шрифта"><font size="размер">TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</font></font></span></div></td></tr></tbody></table>
хтмл код определённых цветов можно посмотреть тут :
http://www.ph4.ru/grafika_colorscale.ph4
стили текстов можно найти тут
http://html.svoymaster.com/html/text.html
и тут
http://www.mycrib.ru/2010/08/2.html
Размер же может быть от 1 до 7-ми пикселей . Наиболее подходящий для себя вы можете выбрать сами .
________
3.
если вам нужно сделать презентацию с наибольшим кол-вом окон ,
вы просто на просто , после 1 кода , жмякая enter ДО(внимание , очень важно !) </td></tr></tbody></table> .
а затем проделываете пункт 2 , только подбирая подходящие критерии для второго окна .
т.е. копируете всё , находящееся ПОСЛЕ
<table style="BACKGROUND: url(ссылка на ваше изображение) no-repeat" border="0" width="ширина изображения" height="высота изображения">
<tbody><tr><td valign="top" width="ширина изображения , та же , что и в первом коде">
Не забываем , что заключать наш код обязательно должно </td></tr></tbody></table> . При том эта часть кода должна находиться в презентации только в конце , и только 1 раз (т.е. </td></tr></tbody></table> </td></tr></tbody></table> - не верно . а </td></tr></tbody></table> - верно)
Вот и всё , наша презентация готова ;D
кликабельные кнопки /копируем код/
<div style="overflow: auto; width: *px; height: *px; margin-left: *px; margin-top: *px; float: left; text-align: center;"><a href="ссылка, куда будет направлять баннер"><img src="ссылка на картинку"></a></font></font></span></div>
Пишем на месте звездочек. Обозначения:
width-ширина кнопки
height-высота
margin-left-сдвиг от левого края
margin-top-сдвиг от верхнего края
Не забывайте , что между числами и px не должно быть пробела , иначе ничего не получится . 
________________________
как сделать банер :
<a href="АДРЕС СТРАНИЦЫ"><img src="АДРЕС КАРТИНКИ"></a>
И как изменить стандартный курсор :
<div style="cursor: url(Ссылка на картинку), crosshair;"> <span style="font-family: Arial; font-size: x-small;"> <br> </span> </div> <div style="cursor: url(Та же ссылка на картинку), crosshair;">
|
| |
| |
| ollik2011 | Дата: Понедельник, 29 Октября 2012, 01.28.19 | Сообщение # 2 |
|
Группа: Гости
| 
Оль , спасибо )
|
| |
| |
| Олечка | Дата: Пятница, 21 Декабря 2012, 17.44.38 | Сообщение # 3 |
|
адмын :)
Группа: Администраторы
Сообщений: 81
Статус: Offline
| или более привычный урок для всех .
Пишем код ХТМЛ к презентации
Здесь я подробно опишу, как сделать код для презентации вручную. Для этого нам понадобится:
ХТМЛ-редактор онлайн-http://xhtml.ru/instr/html_editor/
1. Пишем в нашем ХТМЛ редакторе следующее:
_
<TABLE style="BACKGROUND: url(здесь вставляем ссылку на презентацию) no-repeat" border=0 width=здесь ширина презентации height=здесь высота презентации>
_
*Вместо "здесь вставляем ссылку на презентацию" вы пишете ссылку на презентацию. Для этого нужно загрузить вашу презентацию на один из хостингов: http://www.radikal.ru/, http://ipicture.ru/, http://www.imagepost.ru/, http://www.image123.net/ и другие. Но лично я советую вам загружать свою презентацию на радикал.ру. (точная ссылка дана выше)
*Вместо "здесь ширина презентации" и "здесь высота презентации" вставляете размеры своей презентации. В радикал.ру они пишутся здесь:
Название: ******
Оригинал: 402 x 373 пик., 26 Кб
Результат: 402 x 373 пик., 26 Кб
, где 402 - ширина, 373 - высота. Также размеры своей презентации можно узнать в той программе, в которой вы её делали. Откройте вашу презентацию в программе и нажмите на "изображение" - "размер изображения". И выписываете оттуда данные вашей презентации, её высоту и ширину, и вписываете в хтмл код.
2. В ХТМЛ-редакторе, ниже первого кода пишем такой код:
_
<TBODY>
<TR>
<TD vAlign=top width=здесь пишем ширину презентации, такую же, что и в первом коде>
<DIV style="MARGIN-TOP: 20px; WIDTH: 309px; FLOAT: left; HEIGHT: 450px; MARGIN-LEFT: 460px; OVERFLOW: auto">
<P><STRONG><FONT color=#000000>TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </FONT></STRONG></P></DIV></TD></TR></TBODY></TABLE>
_
Где обозначают:
*MARGIN-TOP: 20px; - вместо "20px" пишем количество пикселей, на которое надо отступить от верхнего края.
*WIDTH: 309px; - вместо "309px" пишем ширину окна вашей презентации
*HEIGHT: 450px; - вместо "450px" пишем высоту окна вашей презентации
*MARGIN-LEFT: 460px; - вместо "460px" пишем количество пикселей, на которое надо отступить от левого края.
*FONT color=#000000 - вместо #000000 пишем код цвета шрифта, которым будете писать в окне. Его можно взять тут: http://35rus.ru/htmlcolor.php (код цвета написан справа, после знака #) или же оставить так, как есть, #000000 - чёрный цвет.
*TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text - вместо "TITLE Text text...." пишем любой текст, который будет показан в окне, или же оставляем так, как есть.
3. В итоге у нас получился такой код:
_
<TABLE style="BACKGROUND: url(здесь вставляем ссылку на презентацию) no-repeat" border=0 width=здесь ширина презентации height=здесь высота презентации>
<TBODY>
<TR>
<TD vAlign=top width=здесь пишем ширину презентации, такую же, что и в первом коде>
<DIV style="MARGIN-TOP: 20px; WIDTH: 309px; FLOAT: left; HEIGHT: 450px; MARGIN-LEFT: 460px; OVERFLOW: auto">
<P><STRONG><FONT color=#000000>TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </FONT></STRONG></P></DIV></TD></TR></TBODY></TABLE>
Этот код рассчитан на презентацию с одним окном. Если вы хотите сделать код к презентации с большим количеством окон, то:
- Если вы хотите добавить ещё одно окно внизу, то пишем вначале такой код:
<TABLE style="BACKGROUND: url(здесь вставляем ссылку на презентацию) no-repeat" border=0 width=здесь ширина презентации height=здесь высота презентации>
<TBODY>
<TR>
<TD vAlign=top width=здесь пишем ширину презентации, такую же, что и в первом коде>
<DIV style="MARGIN-TOP: 20px; WIDTH: 309px; FLOAT: left; HEIGHT: 450px; MARGIN-LEFT: 460px; OVERFLOW: auto">
<P><STRONG><FONT color=#000000>TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </FONT></STRONG></P></DIV>
А ниже него пишем это:
<DIV style="CLEAR: both"></DIV>
Ещё ниже:
<DIV style="MARGIN-TOP: 20px; WIDTH: 309px; FLOAT: left; HEIGHT: 450px; MARGIN-LEFT: 460px; OVERFLOW: auto">
<P><STRONG><FONT color=#000000>TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </FONT></STRONG></P></DIV>
И у нас получилось:
<TABLE style="BACKGROUND: url(здесь вставляем ссылку на презентацию) no-repeat" border=0 width=здесь ширина презентации height=здесь высота презентации>
<TBODY>
<TR>
<TD vAlign=top width=здесь пишем ширину презентации, такую же, что и в первом коде>
<DIV style="MARGIN-TOP: 20px; WIDTH: 309px; FLOAT: left; HEIGHT: 450px; MARGIN-LEFT: 460px; OVERFLOW: auto">
<P><STRONG><FONT color=#000000>TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </FONT></STRONG></P></DIV>
<DIV style="CLEAR: both"></DIV>
<DIV style="MARGIN-TOP: 20px; WIDTH: 309px; FLOAT: left; HEIGHT: 450px; MARGIN-LEFT: 460px; OVERFLOW: auto">
<P><STRONG><FONT color=#000000>TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </FONT></STRONG></P></DIV></TD></TR></TBODY></TABLE>
Если вы хотите разместить 2 окна рядом, то пишем:
<TABLE style="BACKGROUND: url(здесь вставляем ссылку на презентацию) no-repeat" border=0 width=здесь ширина презентации height=здесь высота презентации>
<TBODY>
<TR>
<TD vAlign=top width=здесь пишем ширину презентации, такую же, что и в первом коде>
<DIV style="MARGIN-TOP: 20px; WIDTH: 309px; FLOAT: left; HEIGHT: 450px; MARGIN-LEFT: 460px; OVERFLOW: auto">
<P><STRONG><FONT color=#000000>TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </FONT></STRONG></P></DIV>
<DIV style="MARGIN-TOP: 20px; WIDTH: 309px; FLOAT: left; HEIGHT: 450px; MARGIN-LEFT: 460px; OVERFLOW: auto">
<P><STRONG><FONT color=#000000>TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </FONT></STRONG></P></DIV></TD></TR></TBODY></TABLE>
*Тоесть мы 2 раза копируем это:
<DIV style="MARGIN-TOP: 20px; WIDTH: 309px; FLOAT: left; HEIGHT: 450px; MARGIN-LEFT: 460px; OVERFLOW: auto">
<P><STRONG><FONT color=#000000>TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </FONT></STRONG></P></DIV>
Если вы хотите сделать 2 окна рядом и одно внизу, то пишем такой код:
<TABLE style="BACKGROUND: url(здесь вставляем ссылку на презентацию) no-repeat" border=0 width=здесь ширина презентации height=здесь высота презентации>
<TBODY>
<TR>
<TD vAlign=top width=здесь пишем ширину презентации, такую же, что и в первом коде>
<DIV style="MARGIN-TOP: 20px; WIDTH: 309px; FLOAT: left; HEIGHT: 450px; MARGIN-LEFT: 460px; OVERFLOW: auto">
<P><STRONG><FONT color=#000000>TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </FONT></STRONG></P></DIV>
<DIV style="MARGIN-TOP: 20px; WIDTH: 309px; FLOAT: left; HEIGHT: 450px; MARGIN-LEFT: 460px; OVERFLOW: auto">
<P><STRONG><FONT color=#000000>TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </FONT></STRONG></P></DIV>
<DIV style="CLEAR: both"></DIV>
<DIV style="MARGIN-TOP: 20px; WIDTH: 309px; FLOAT: left; HEIGHT: 450px; MARGIN-LEFT: 460px; OVERFLOW: auto">
<P><STRONG><FONT color=#000000>TITLE Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </FONT></STRONG></P></DIV></TD></TR></TBODY></TABLE>
|
| |
| |
| Leonara | Дата: Воскресенье, 03 Ноября 2013, 13.54.13 | Сообщение # 4 |
 Рядовой
Группа: Пользователи
Сообщений: 2
Статус: Offline
| Спасибо огромное!Если бы не вы то не смогла бы презки делать! Огромно спасибо!
|
| |
| |
| Олечка | Дата: Четверг, 07 Ноября 2013, 16.23.25 | Сообщение # 5 |
|
адмын :)
Группа: Администраторы
Сообщений: 81
Статус: Offline
| Цитата Leonara (  ) Спасибо огромное!Если бы не вы то не смогла бы презки делать! Огромно спасибо!
Спасибо за то , что пользуетесь :З
Удачного вам творчества ! С;
|
| |
| |
| Leonara | Дата: Вторник, 17 Декабря 2013, 19.41.41 | Сообщение # 6 |
|
Рядовой
Группа: Пользователи
Сообщений: 2
Статус: Offline
| Leonara, А можно код для текста с тенью?
|
| |
| |
