Работа с дизайном сайта ucoz |
Работа с дизайном сайта ucoz
Создавая свой сайт каждый хочет чтобы его сайт отличался от других. Для этого нужен уникальный дизайн. В этой статье мы рассмотрим как создать свой уникальный дизайн из стандартного дизайна ucoz. Для того чтобы изменить дизайн под себя нужно зайти в раздел «Управление дизайном» в панели управления. Для этого авторизуйтесь в вебтобе системы ucoz и перейдите в раздел Дизайн> Управление дизайном(шаблоны) в панели управления. Откроется соответствующая страница.
|
Как посмотреть html-код в разных браузерах |
|
Очень удобная шпаргалка!!! |
|
Редкие дополнительные символы |
|
|
Урок по созданию рамочек с разрывом от MissKcu |
Серия сообщений "Мои уроки по Ли.ру":
Часть 1 - Урок создания прозрачного фона от MissKcu
Часть 2 - Как вставить разделители в пост. Урок от MissKcu
...
Часть 9 - Создаем кнопку-переход на свой блог
Часть 10 - Урок по написанию поста на Ли.ру от MissKcu
Часть 11 - Урок по созданию рамочек с разрывом от MissKcu
|
Шпаргалочка по тегам Берём к себе в цитатник. |
|
Очень полезная HTML-ШПАРГАЛКА |
|
HTML-хулиганство)))) |
|
|
Как поменять код флеш-картинки(на Ли.ру) на html-код для других сайтов.Урок. |
перед вами флеш-картинка,часики и плеер,я их уменьшила в размере,чтобы они стояли в ряд.Под ними коды,которые работают здесь. В каждой флешке,как и в открытке есть адрес,возьмем для примера адрес первой флеш-картинки.Вот он: http://www.xcwhw.cn/fla/bb/th/1.swf В коде на Ли.ру перед адресом стоят размеры флешки-высота и ширина,вот смотрите: [flash=500,500,http://www.xcwhw.cn/fla/bb/th/1.swf] Теперь внимание:чтобы поменять код в этом случае,нужен вот такой код,шаблон: <embed src="АДРЕС ФЛЕШКИ,ЧАСИКОВ,ПЛЕЕРА"width="ширина"height="высота"> |
|
КАРТИНКА В УГЛУ ЗАПИСИ.УРОК 2 |
|
|
УРОКИ -Защита изображения от копирования |
|
от Светланика.
|
ВСЕ о тегах и оформлении постов |
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
Закрепить текст |
|
|
||
|
||
|
||
|
|
Инет учебник по верстке |
|
Создание ссылок на участках изображения: карта (map) ссылок |
В предыдущем посте "Создание карты (map) для ссылок в Photoshop" я сделал заготовку для размещения на определенных ее участках ссылок на разные web-страницы. Если кликнуть на фигуры с надписями, то откроются соответствующие им странички: профиль, дневник или все посты из раздела "Уроки Photoshop"
|
Коды для оформления блога. |
|
Как расположить несколько элементов на страничке рядом друг с другом.Урок для начинающих! |
|
Делаем вместе рамку с уголками. |
|
|
Без заголовка |
|
Подписать картинку. (памятка) |
Ветер перемен |
---|
Серия сообщений "~ < htmlka >":
Часть 1 -
Часть 2 - Подписать картинку. (памятка)
Часть 3 - Памятка по html
Часть 4 - Текст обтекает картинку.
...
Часть 16 - Пипетка. Узнает цвет в любой точке монитора.
Часть 17 - Оформляем текст и картинки
Часть 18 - СКРИПТИК - ЧУДЕСНЫЙ САЙТ
|
Без заголовка |
|
Без заголовка |
|
Без заголовка |
|
|
Без заголовка |
|
|
Без заголовка |
|
Серия сообщений "Для дневников и блогов.":
Часть 1 - Помошник...
Часть 2 - Часто применяемы формулы HTML для вашего блога
Часть 3 - ПОЛЕЗНЫЕ ССЫЛКИ ДЛЯ РАБОТЫ.
Часть 4 - Для оформления блога.
Часть 5 - Открыткин дом.
Часть 6 - Сделать свой логотип.
Часть 7 - УРОКИ НАЧИНАЮЩИМ.
Часть 8 - Сделать текст с прокруткой.
Часть 9 - картинки для блогов.
Часть 10 - Содержание для блога...
Часть 11 - Часики.
Часть 12 - Комментарии.
Часть 13 - Все для оформления блога.
Часть 14 - Добавляем музыку в блог.
Часть 15 - Бродилка по моим открыткам.
Часть 16 - Спецсимволы для текста.
Часть 17 - Web-графика для сайтов. Анимация для страниц.
Часть 18 - Анимашки.Блестяшки.Картинки...
Часть 19 - Блестящий текст онлайн на русском языке.
Часть 20 - Красивые надписи. СДЕЛАЕМ САМИ
|
Без заголовка |
|
Без заголовка |
|
Без заголовка |
Делала картинку с кликабельными надписями в целях рекламы моего блога (не этого блога; всё, что рекламируется, есть уже здесь:)))), а потом подумала - фишка неплохая, почему бы и не сделать урок для ЛиРушников! Во всяком случае, на просторах ЛиРу не встречала такого урока, правда, специально не искала.Но неважно. Главное, чтобы урок пригодился кому-нибудь!
Покликайте, пожалуйста, надписи на картинке для того, чтобы проверить, как она работает!
Ну, как?! Здорово?! :)))
Если хотите научиться делать такие же, читайте, пожалуйста, дальше! Я постараюсь подробно, просто и доступно рассказать, да и вовсе это не сложная методика.
|
Без заголовка |
|
Без заголовка |
|
Без заголовка |
|
Без заголовка |
Делала картинку с кликабельными надписями в целях рекламы моего блога (не этого блога; всё, что рекламируется, есть уже здесь:)))), а потом подумала - фишка неплохая, почему бы и не сделать урок для ЛиРушников! Во всяком случае, на просторах ЛиРу не встречала такого урока, правда, специально не искала.Но неважно. Главное, чтобы урок пригодился кому-нибудь!
Покликайте, пожалуйста, надписи на картинке для того, чтобы проверить, как она работает!
Ну, как?! Здорово?! :)))
Если хотите научиться делать такие же, читайте, пожалуйста, дальше! Я постараюсь подробно, просто и доступно рассказать, да и вовсе это не сложная методика.
|
Без заголовка |
/s004.radikal.ru/i206/1001/d8/5bf67ce7f6a0.jpg" target="_blank">//s004.radikal.ru/i206/1001/d8/5bf67ce7f6a0.jpg);padding:5px">/s001.radikal.ru/i196/1006/30/025d8dd3e1d2.jpg" target="_blank">//s001.radikal.ru/i196/1006/30/025d8dd3e1d2.jpg);padding:5px">/s004.radikal.ru/i206/1001/d8/5bf67ce7f6a0.jpg" target="_blank">//s004.radikal.ru/i206/1001/d8/5bf67ce7f6a0.jpg)">
|
|
Без заголовка |
Строим таблицу
|
Код простой сетки <TABLE border=4> <TR> <TD>первая клетка в первой строке</td> <TD>вторая клетка в первой строке</td> </tr> <TR> <TD> первая клетка во второй строке</td> <TD>вторая клетка во второй строке</td> </tr> </table> |
||||
Сетка с фоном <TABLE background="URL адрес ФОНА" border=8> Вместо URL адрес ФОНА поставляем адрес фонового рисунка.
|
Код сетки с фоном <TABLE background="URL Адрес фона"border=4> <TR> <TD>первая клетка в первой строке</td> <TD>вторая клетка в первой строке</td> </tr> <TR> <TD> первая клетка во второй строке</td> <TD>вторая клетка во второй строке</td> </tr> </table> |
||||
Рамки с разрывом рисунка: |
Рамки с разрывом рисунка: <fieldset><legend><img src="адрес картинки"></legend>рамка растягивается на всю ширину записи</fieldset> |
||||
Рамка с разрывом текста: | Рамка с разрывом текста: <fieldset><legend>Запись в разрыве</legend>Основная запись</fieldset> | ||||
Фон записи поста
|
Код фона записи поста <Table background= вместо этих слов пишите URl фдрес картинки или ссылку№1 Радикала border="0"> <TBODY> <TR> <TD width=650 > Вместо этих слов пишите свой текст </TD> </TR> </TBODY> </TABLE> |
|
Без заголовка |
|
Без заголовка |
Картинка обтекаемая текстом![]() |
Код обтекания картинки текстом <img src="httр:адрес картинки" align="left" vspace="10" hspace="30" alt=>"здесь нет картинки, хотя должно быть изображение. Какое оно будет, решать вам" |
|||
Картинка слева от текста ![]() |
Код картинки слева <img src="URL адрес картинки" align="left" border="0"> И снова пишем свой текст, или стихотворение, или.... придумали? молодцы! |
|||
Картинка справа от текста:![]() Все правила написания для правой стороны такие же , как и для левой. |
Код для картинки с права: <img src="URL адрес картинки" align="right" border="0">Пишем свой текст, что напишем, то и увидим |
|||
Картинка в центре текста: Обратите внимание, что текст пишется перед кодом и после кода. Это для того, чтобы обтекание было полноценным, ![]() |
Код для картинки в центре текста: Первая часть текста <img src="URL адрес картинки" align="middle" border="0"> Вторая часть текста. |
|||
Текст между двух картинок
|
Код для текста между двух картинок <table align=center border=0> <tr> <td><img src="URL адрес КАРТИНКИ"></td> <td>Текст, который красиво расположится между картинками.</td> <td><img src="URL адрес КАРТИНКИ"></td> </tr> </table> |
|||
Картинка между текстом
|
Код для картинки между текстом <table align=center border=0> <tr> <td>ТЕКСТ</td> <td><img src="URL адрес КАРТИНКИ"></td> <td>ТЕКСТ</td> </tr> </table> |
|
Без заголовка |
1![]() | 2 ![]() |
|
Без заголовка |
|
Поговорим о тексте и различных манипуляциях с ним |
Рамка и пост от
|
|
Без заголовка |
![]() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Помните! Гораздо важнее содержание блога, нежели его оформление. |
|
Без заголовка |
Теперь рассмотрим как делать таблицы на странице.
Вообще это ОЧЕНЬ ВАЖНАЯ тема. Поэтому не пропускайте этот раздел, хоть он пожалуй самый сложный.
Дело в том что таблицы в HTML используются в основном не для представления данных в виде таблицы, а для создания ДИЗАЙНА сайта...для создания каркаса страницы, в котором уже размещается содержимое страницы. Но обо всем по порядку.
Таблица описывается парным тегом <table> и </table>
<table> говорит браузеру , что начинается таблица, а </table> говорит о том, что таблица заканчивается. Запомнили ?
|
Без заголовка |
Продолжим разбор полезных тегов. На очереди тег HR. Это тег, рисующий линию. Линии как правило применяют для того, чтобы делить пост на логические разделы, отделять друг от друга цитаты, мысли, афоризмы. Ну и просто чтобы восприятие текста улучшить.
Вот она, линия:
По умолчанию линия имеет толщину 2 пиксела и некоторую объемность.
Необъемная линия:
|
Без заголовка |
1. <MARQUEE>Ваш текст</MARQUEE>
2. <MARQUEE style="HEIGHT: 50px" direction=up>Ваш текст</MARQUEE>
3. <MARQUEE style="HEIGHT: 50px" direction=down>Ваш текст</MARQUEE>
4. <MARQUEE style="WIDTH: 200px" direction=right>Ваш текст</MARQUEE>
5. <MARQUEE style="WIDTH: 200px" direction=left>Ваш текст</MARQUEE>
6. <MARQUEE style="WIDTH: 200px" behavior=alternate>Ваш текст</MARQUEE>
Переменные:
HEIGHT высота "окошка", в котором двигается текст;
WIDTH расстояние, на которое перемещается текст.
Можно ли уменьшить скорость прокрутки при использовании тега marquee?
Так вот, для этого необходимо в открывающий тег добавить параметр scrollamount="Х", где Х — скорость прокрутки от 1 до 9.
Результат будет выглядеть так:
<MARQUEE style="WIDTH: 200px" direction=right scrollamount="Х">
|
Без заголовка |
Как создать простую галерею из фотографий
Дорогие читатели представляю вашему вниманию простенькие html коды при помощи которых можно сделать довольно интересные галереи фотографий. Следуйте простым инструкциям и вы тоже сможете вставить себе дневник такую галерею.
Перед вами готовая галерея из 10 красивых фотографий. Такими галереями вы можете украшать свои записи, при этом можно использовать различные комбинации. Направлять картинку с лева на право или с право на лево, вверх или вниз и т.д. А теперь я расскажу вам как в течении 10 минут сделать данную галерею.
|
Без заголовка |
|
|
Без заголовка |
|
Без заголовка |
|
|
Без заголовка |
|
Без заголовка |
Ваш текст Ваш текст ттттттттттттт ттттттттттттттттттттттт тттттттттттттттттттттт |
|
![]()
![]() | ![]() ![]() ![]() |
Ваш текст Ваш текст Ваш текст Ваш текст |
![]() ЭКСПЕРИМЕНТ 2 Что Если поменять некоторые теги в готовом изображении ![]() |
Ваш текст Ваш текст Ваш текст . . . . . . . . . . . . . . . . |
Ваш текст Ваш текст Ваш текст / / / / / / / / / / / / / / / / / / / |
![]() |
|
Без заголовка |
Ваш текст |
|
Без заголовка |
Разместим в дневнике большое количество небольших по размеру рисунков. Для примера я взял 6 анимированных смыйликов
Для того что бы рисунки располагались горизонтально необходимо убрать галочку с "Сохранять переводы строк в тексте.".
Я специально взял смайлы разного размера. Попробуем теперь сделать вывод рисунков более логичным.
Большие смайлы в одной колонке, маленькие - в другой
Для этого построим таблицу из двух колонок и трех строк ( по количеству смайлов одного размера )
Коды рисунков смайлов ( видны при редактировании черновика или поста )
Что бы не гадать где какой рисунок я в кодах рисунков, в alt подписал рисунки. alt - это альтернативный текст который виден в том случае если рисунок по какой то причине не может быть показан
Все что теперь осталось это разместить рисунки каждый в своей ячейке таблицы
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Ширина первой и второй колонки не одинаковые что не всегда красиво. Добавим в нашу таблицу еще одну строку Эта строка задаст ширину колонок в 200 пикселей ( можно указать ширину в процентах от общей ширины таблицы )
Что бы не загромождать код я в дальнейшем буду показывать только часть кода где делаем изменения
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Осталась самая малость. Разместить рисунки по центру ячеек. Для этого в добавим valign="middle" и align="center"
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Подпишем колонки. Для этого добавим вначале еще одну строку в которой вместо пропишем
Большие смалы | Маленькие смайлы |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Добавим к каждому смайлу название.
Вид таблицы мягко говоря не очень :)
Большие смалы | Маленькие смайлы |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Исправим это добавив еще 2 колонки для названий смайлов
Обратите внимание на то что добавилось еще две строки с и . Даже если в ячейках ничего не выводится количество ячеек в каждой строке должно быть одинаковым!!!!!
Название колонок "Большие смайлы и маленькие смайлы" не совсем правильно расположены
Большие смалы | Маденькие смайлы | ||
---|---|---|---|
![]() |
Большой1 |
![]() |
Маленький1 |
![]() |
Большой2 |
![]() |
Маленький2 |
![]() |
Большой3 |
![]() |
Маленький3 |
Объеденим попарно ячейки с названием колонок.
Большие смалы | Маденькие смайлы | ||
---|---|---|---|
![]() |
Большой1 |
![]() |
Маленький1 |
![]() |
Большой2 |
![]() |
Маленький2 |
![]() |
Большой3 |
![]() |
Маленький3 |
Не нравится мне грозный красный смайл :)). Я его выделю каким то фоном что бы он бросался в глаза :). Добавлю в ячеку с этим смайлом фоновый цвет
Заодно и строку с названием колонок выделю фоном
Большие смалы | Маденькие смайлы | ||
---|---|---|---|
![]() |
Большой1 |
![]() |
Маленький1 |
![]() |
Большой2 |
![]() |
Маленький2 |
![]() |
Большой3 |
![]() |
Маленький3 |
Сделаем этот грозный смайл не таким грозным. Разместим его на этом фоновом рисунке :))
Для этого добавим в ячейку с этим смайлом параметр background
Большие смалы | Маденькие смайлы | ||
---|---|---|---|
![]() |
Большой1 |
![]() |
Маленький1 |
![]() |
Большой2 |
![]() |
Маленький2 |
![]() |
Большой3 |
![]() |
Маленький3 |
Что еще творить с таблицей зависит только от вашей фантазии :)) Можно каждую строку выделить своим цветом добавиви в параметр background. Можно для каждой ячейки или строки задать фоновый рисунок прописав background. Вместо текста в ячейках можно прописать ссылки.
ps: Добавьте в код рисунка title="текст" и при наведении мышки на рисунок будет выскакивать подсказка с текстом
|
Страницы: | [2] 1 |