HTML с нуля

Страница: « 1 2 3 4 5 6 »

Сообщений 41 страница 50 из 57

Поделиться4124.03.09 14:31

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10113

Ступенька 39-ая.
"Убираем полосу прокрутки, избавляемся от рамок, регулируем ширину полей фрейма".

Допустим, мы решили остановиться на последнем варианте фреймовой структуры для нашей страницы, значит будем приводить его в более-менее нормальный вид. Для начала избавимся от полосы прокрутки (скрулинга) во фрейме, содержащим документ logo.html.

<html>
<head>
<title>Хождение по фреймам</title>
</head>
<frameset cols="100,*">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">

</frameset>
</html> (посмотреть)

Scrolling - атрибут тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна.

Собственно, scrolling="auto", можно не прописывать, т.к. если атрибут scrolling не задан, то полоса прокрутки появится, если она нужна, а если нет - ее не будет.

Если вы подведете мышку к границе какого-либо фрейма, то увидите, что потянув за нее, вы можете изменить размеры фрейма. Как же запретить вашему посетителю это делать? При помощи атрибута noresize для тэга <frame>:

<html>
<head>
<title>Хождение по фреймам</title>
</head>
<frameset cols="100,*">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no" noresize>
<frame src="menu.html" noresize>
</frameset>
<frame src="content.html" noresize>

</frameset>
</html> (посмотреть)

Теперь давайте избавимся от рамок между фреймами. Для этого мы используем параметр border, с которым мы раньше уже встречались. Итак, border="0".

<html>
<head>
<title>Хождение по фреймам</title>
</head>
<frameset cols="100,*" border="0">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">

</frameset>
</html> (посмотреть)

Так уже лучше . Но все же, что-то еще хочется исправить... А! Картинку с чёртом так и хочется прижать в левый верхний угол:

<html>
<head>
<title>Хождение по фреймам</title>
</head>
<frameset cols="100,*" border="0">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="menu.html">
</frameset>
<frame src="content.html">

</frameset>
</html> (посмотреть)

Атрибуты marginwidth и marginheight вам уже знакомы, они определяют ширину полей фрейма. В нашем документе мы убрали поля, задав значения этим атрибутам равные нулю для фрейма, содержащего документ с нашим чертом (logo.html).

Стоп, стоп, скажет мой читатель, вы же говорили об этих атрибутах, как о нестандартных. Да, конечно, но не стандартны они лишь при употреблении с тэгом <body>, т.к. этого спецификация не предусматривает, однако для тэга <frame>, они могут использоваться без опасений, т.к. для него они в спецификации как раз и предусмотрены.

Вот такие пироги:) Остальное будет на других ступеньках.

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 41

Поделиться4224.03.09 14:36

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10113

Ступенька 40-ая.
"При нажатии на ссылку документ открывается в другом фрейме, в полное окно".

В этой главе мы поговорим о том, что становиться проблемой для каждого человека, начинающего осваивать фреймы.

Итак, обратимся к нашему примеру. Нажмите на любую из ссылок. Документ, на который введет ссылка, откроется в том же фрейме, в котором располагается документ с меню. А нам нужно, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Как это сделать?

Для начала, господа, познакомьтесь с новым атрибутом тэга <frame> - name (кстати, name, мне кажется, что мы с вами уже знакомы:). Пустим name в дело:

<html>
<head>
<title>Хождение по фреймам</title>
</head>
<frameset cols="100,*" border="0">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="menu.html">
</frameset>
<frame src="content.html" name="window-1">

</frameset>
</html>

Параметр name задает уникальное имя для фрейма (в нашем случае для того, который содержит документ content.html).

Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута тэга <a> target (target="имя_фрейма"), с которым мы, кстати, тоже уже знакомы.

Введем атрибут target в документе со ссылками - menu.html.

<html>
<head>
<title>Документ с Меню</title>
</head>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html">Главная</a>
<a href="tumki.html">Тумки</a>
<a href="bumki.html">Бумки</a>
<a href="tururumki.html">Турурумки</a>
<a href="tra-la-la.html">Траляля</a>
</center>
</body>
</html>

Вот такой он (menu.html), в нашем случае. Теперь для каждой ссылки укажем параметр target="window-1", где window-1 - это имя фрейма, в котором у нас располагается документ с основным содержанием (content.html).

<html>
<head>
<title>Документ с Меню</title>
</head>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html" target="window-1">Главная</a>
<a href="tumki.html" target="window-1">Тумки</a>
<a href="bumki.html" target="window-1">Бумки</a>
<a href="tururumki.html" target="window-1">Турурумки</a>
<a href="tra-la-la.html" target="window-1">Траляля</a>
</center>
</body>
</html> (посмотреть)

Теперь, все ссылки открываются в нужном нам фрейме, а меню никуда не исчезает, при этом мы не приложили никаких особых усилий, а только изменили немного два документа – наш фрейм-документ (index) и документ, содержащий ссылки (меню).

Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение _top:

<a href="project.html" target="_top">Мой проект о рыбках</a>

Страница с проектом о рыбках откроется в полное окно, закрыв (уничтожив) остальные кадры (фреймы).

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 42

Поделиться4324.03.09 14:45

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10113

Ступенька 41-ая.
"Последняя глава о фреймах. Что такое IFrame".

Вот мы добрались и до последней главы о фреймах. Собственно, о фреймах мы закончили говорить в предыдущей главе, а на этой ступеньке мы поговорим об IFrame - "плавающем" фрейме.

Итак, что такое Iframe, и чем он отличается от просто фреймов. IFrame - "плавающий" или встроенный фрейм. Вы, наверняка встречали его уже много раз на разных сайтах. Для Iframe нам не нужно создавать фрейм-документ, и прописывать в нем фреймовую структуру нашей страницы. Iframe позволяет нам вставить один html-документ в другой html-документ.

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

«Плавающий» фрейм вводится в наш обычный html-документ при помощи тэга <iframe></iframe>:

В атрибуте src мы указываем путь к документу, который отобразиться во встроенном фрейме.

Атрибуты height и width отвечают за ширину и высоту встроенного фрейма.

Атрибут scrolling (полоса прокрутки) и его значения мы тоже уже знаем из уроков по фреймам: он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна.

Атрибут frameborder указывает отображать или нет границы встроенного фрейма, возможные значения 1 (да, отображать) и 0 (нет, не отображать).

Границы встроенного фрейма растягивать при помощи мыши ваш посетитель не может, поэтому атрибута noresize встроенные фреймы не имеют.

Iframe может выравниваться относительно содержимого страницы: текста и картинок, и может, соответственно, быть заключен в тэги выравнивания и таблицы.

Какие подводные камни нас могут ожидать при использовании Iframe – он не поддерживается многими броузерами, в основном старыми версиями броузеров, поэтому стоит подумать прежде, чем включать этот элемент на страницы вашего сайта, так ли это уж необходимо.

На этом наш разговор о фреймах завершен, напоминаю о полезных ссылках в правой колонке, советую изучить, а после переходить к следующей ступеньке, на которой мы начнем новую тему поговорим об объектах и дополнительных средствах, которые облегчают нашу жизнь, делают html-документы динамичными, расширяют наши возможности при создании страниц.

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 43

Поделиться4424.03.09 14:48

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10113

Ступенька 42-ая.
"Немного об объектах. Вставка объектов в наш документ при помощи тэга OBJECT".

Как вы уже могли понять, html не слишком функционален, его возможности весьма ограничены. Из-за этого ему уже много лет предрекают скорую смерть, как стандарту веб, однако, он до сих пор жив и будет жить, скорее всего, еще долго. В чем же причина: он очень прост в изучении и эксплуатации, любой человек может освоить html. Но куда же деваться от недостатков? Для этого разработчики стандарта ввели в html тэги, при помощи которых мы можем встраивать в наш html-документ различные объекты, а также можем привязывать к html-документу другие технологии (CSS, Javascript и т.д.), при помощи которых наш документ становится динамичным. Но обо всем по порядку.

Итак, представьте себе елочку, которую вы принесли в свой дом под новый год. Html подобен такой елочке. Но елочку надо нарядить. Что мы для этого можем сделать – покрасить ветки, навесить мишуру – мы весьма ограничены без дополнительных средств для украшения нашей елки (html).

Итак, я говорила, о том, что мы можем встраивать объекты в нашу страницу. Один тэг для вставки объекта в страницу мы уже знаем <img>, вводя его в код нашего документа, мы указываем броузеру подгрузить картинку на нашу страницу. Т.е. <img> позволяет нам повесить на нашу елку шарик. Но шарик не является частью елки, это посторонний объект. А тэг <img> в данном случае играет роль веревочки, при помощи которой мы присоединяем шарик (картинку, объект) к елочке (html).

Вы должны понимать, что картинки, это не единственное, что мы можем повесить на нашу елочку. Кроме картинок мы можем включить в наш документ музыку, другой документ, flash-анимацию, апплеты, клипы и многие другие объекты.

Какие объекты, кроме картинок, мы уже умеем включать в наш документ? Это другие документы, мы научились их внедрять в наш документ при помощи тэга <iframe>.

Как же быть с остальными объектами, как же их вешать на нашу елочку, внедрять в наш документ? Для общего внедрения объектов в наш документ существует тэг <object>, этот тэг достаточно многофункционален, и обо всех тонкостях его применения и свойствах я вам рассказывать не буду, надеясь, что вы сами потом поближе познакомитесь с ним при помощи спецификации по HTML, однако, в приличном обществе принято представлять людей друг другу при первом знакомстве, поэтому позвольте вас немного ознакомить с тэгом <object>, полагаю, что вы не будете возражать , но для начала немного вспомним пройденное ранее.

Итак, вы уже знакомы с тэгом <img>. Напишем код для вставки картинки в наш документ:

<img src="sobaka.jpg" alt="тут был большой любитель сосисок">

Это вам все знакомо – src - указывает, где находится изображение, которым будет подменен тэг <img>, alt – альтернативное описание, на всякий случай, если картинка не загрузится, тогда мы увидим его.

То же самое мы можем сделать при помощи тэга <object>, подгрузить картинку в наш документ.

<object data="sobaka.jpg" type="image/jpeg">
тут был большой любитель сосисок
</object>

Теперь будем по обычаю разбираться, что к чему.

Атрибут data указывает местоположение данных для объекта, в нашем случае он указывает на то, где лежит подгружаемая картинка. Атрибут type указывает тип содержимого для данных, указанных в data, т.е. он указывает броузеру с каким типом объекта он имеет дело, в нашем случае это image – изображение, картинка, jpeg – тип картинки (изображения). Текст, который мы заключили в тэг <object></object>, ваш посетитель увидит, если броузер не сможет отобразить ваш объект – картинку.

Что, если мы хотим подгрузить другой объект (не картинку, а допустим какой-либо видеоклип)? Наши действия аналогичны, указываем местоположение данных объекта, и тип данных:

<object data="film.mpeg" type="application/mpeg">
здесь была фильма
</object>

Как видите, все не так уж сложно. Но на этом возможности и функции тэга <object> не ограничиваются. С помощью него мы можем сделать альтернативную генерацию объектов: это, допустим, когда ваш фильм (клип) не загрузился, вы можете указать, чтобы вместо него подгрузился клип с другого адреса, можете указать, что если и другой клип не подгрузится, чтобы вместо него подгрузилась картинка, и т.д. И это далеко не все, что вы можете сделать при помощи тэга <object>, но, как я говорила, наше знакомство с ним в данном учебнике будет кратким и обзорным, более тесно и серьезно познакомиться с <object> вам поможет спецификация (официальная документация по HTML), где наиподробнейшим образом расписаны все возможности применения <object> в ваших документах. А пока что наш с вами путь лежит на следующую ступеньку, где мы продолжим наш разговор об объектах и их внедрении в наш документ.

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 44

Поделиться4524.03.09 14:50

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10113

Ступенька 43-ая.
"Вставка объектов в наш документ при помощи тэга EMBED. Разница между OBJECT и EMBED".

Очень часто для внедрения в документ таких объектов, как видеоклипы, музыкальные файлы, flash-анимация и прочих подобных используется не тэг <object>, а тэг <embed>. Почему происходит так, и что это такое за тэг:

Тэг <embed> не фигурирует в спецификации HTML (ни в нынешней, ни в старых), однако, он появился по инициативе одного из производителей броузеров и используется очень давно, и поддерживается на данный момент почти всеми броузерами, возможно, его даже безопаснее использовать, чем тэг <object>, для внедрения объектов в ваш документ. Итак, давайте посмотрим, как он работает, допустим, нам нужно внедрить музыкальный файл в наш документ:

<embed src="music.mid" width="50" height="20" autostart="false" loop="true" play_loop="5" hidden="false">
</embed>

1 - src="music.mid" – путь к музыкальному файлу (для веб, используюся файлы в формате *.mid и *.wav)
2 - width="50" height="20" - ширина (width) и высота (heigth) пульта управления
3 - autostart="false" - надо ли проигрывать снова ваш видео или музыкальный ролик (false - нет, true - да)
4 - loop="true" - повторять ролик с самого начала (false - нет, true - да)
5 - play_loop="5" - если да, то сколько раз (вместо 5 поставьте кол-во раз)
6 - hidden="false" - спрятать пульт ролика (false - нет, true - да)

Как видите, достаточно много возможностей для управления объектом, который вы внедряете в документ, однако, не все атрибуты, которые мы рассмотрели с вами сейчас, поддерживаются всеми броузерами, поэтому использовать их надо аккуратно.

Давайте поговорим о тех атрибутах тэга <embed>, которые по идее должны поддерживаться всеми броузерами, т.е. о безопасных. Часть этих атрибутов вы знаете: src (путь к объекту), align (выравнивание), width (ширина), height (высота), hspace (расстояние до текста или других объектов по горизонтали), vspace (расстояние до текста или других объектов по вертикали).

Из незнакомых нам атрибутов:

- pluginspage=”http://…” (путь к плагину, plug-in – небольшая программка, выполняющая какие-либо дополнительные функции в главной программе, так, например, чтобы проиграть flash-анимацию броузеру нужен плагин, в некоторых броузерах он есть, а в некоторых нет, для последних мы указываем путь к плагину, чтобы пользователь мог скачать плагин и просмотреть нашу flash-анимацию, мультик).
- hidden=”true” (false) - отображать указанный объект (да/нет)
- type=” image/jpeg” – тип подгружаемого объекта

Давайте рассмотрим новые атрибуты (и парочку старых, известных нам) на примере вставки flash-анимации в наш документ:

<embed src="mult.swf" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="200" height="300">
</embed>

И снова ничего сложного не оказалось:)

Но что делать, если мы хотим подстраховаться, если мы боимся, что если, отдав предпочтение одному из тэгов <object> или <embed>, мы все же рискуем тем, что наш объект не отобразиться в броузере посетителя нашей страницы? Боязливые могут почитать рецепт здесь: http://flash-ripper.com/articles/.

Вот, собственно, и все, что я хотела вам рассказать об объектах. Однако, прежде, чем мы перейдем на следующую ступеньку, мне хотелось бы вас, мой читатель, предупредить и образумить: я понимаю, что когда мы создаем наши первые страницы нам хочется наполнить их и музыкой, и анимационными картинками, и многим прочим, однако, помните, что вы делаете страницу не для себя, а для своих посетителей, вы прежде всего заинтересованы в них, а значит надо делать так, как им будет удобнее. Так, возможно, стоит отказаться от музыки на веб-сайте, ведь многие, сидя за компьютером, слушают музыку с него же, а значит музыка, которую вы установите на своем сайте, ворвется какофонией в наушники (колонки) вашего посетителя, и вызовет только раздражение. Но даже, если вы устанавливаете музыку на свой сайт – постарайтесь, чтобы это был качественный звук, чтобы была возможность выключить эту музыку, также можно предупредить вашего посетителя, что на вашем сайте будет играть музыка, и предложить ему возможность отказаться от музыки на вашем сайте заранее.

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

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 45

Поделиться4624.03.09 14:53

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10113

Ступенька 44-ая.
"Что такое таблицы стилей и для чего они нужны (CSS - Cascading Style Sheets)".

В двух прошлых главах мы обсуждали с вами возможность вставки объектов в наш документ. Однако, вы должны понимать, что музыка, видеоклипы, flash и другие объекты – не единственное, чем мы можем оживить и сделать страницы нашего сайта интереснее. В этой и следующей главе мы поговорим с вами еще об одном средстве, которые позволяет нам делать наши документы более гибкими, дает нам больше возможностей в работе над нашим сайтом – это Таблицы Каскадных Стилей (CSS - Cascading Style Sheets), еще один стандарт и разработка Консорциума, организации занимающейся разработкой стандартов и спецификаций для веб.

Первое, что нам следует понять – CSS отличный от HTML стандарт. Почему же мы говорим о нем в рамках учебника о HTML, потому что CSS – это стандарт, расширяющий возможности HTML. Как мы уже с вами знаем – используя только HTML, мы весьма ограничены в средствах. Вспомним пример с елкой – так вот, CSS зажигает на нашей елочке огоньки, заставляет нашу елку искриться, сверкать. Однако, чтобы гирлянда горела на елке, надо ее прежде повесить на елку, вкрутить все лампочки, куда надо, и воткнуть в розетку.

Чтобы ввести CSS в наши HTML-документы, нам опять же, как и в случае с объектами, понадобятся связующие звенья – специальные тэги и их атрибуты. Но о них мы будем говорить в следующей главе, в этой же главе я вам дам представление о том, что такое CSS.

Давайте, подумаем, что вызывало у вас удивление, когда вы сталкивались с этим на других страницах, а потом хотели реализовать то же самое у себя на сайте, но не могли понять как. Это могли быть ссылки, которые изменяют цвет при наведении, ссылки у которых убрано подчеркивание, текст, который увеличивается в размере при наведении на него, ячейки таблицы, которые меняют цвет при наведении, картинки и текст, которые наслаиваются друг на друга – и многое другое. Теперь вы знаете, что такие и подобные трюки реализуются при помощи CSS.

Что же именно можно сделать при помощи CSS:

* Использовать собственные расширения HTML (так, например, вы можете окрасить текст в синий цвет при помощи атрибута color тэга FONT, а можете использовать Таблицы Каскадных стилей, для того, чтобы сделать тоже самое, преимущество в этом, что стили могут быть вынесены в отдельный файл, и, чтобы потом поменять цвет указанных блоков текста во всех документах вашего сайта, достаточно изменить одну строку в одном файле, а так вам бы пришлось вручную менять код многих страниц).
* Свободно управлять содержимым веб-страниц (позиционировать блоки текста, таблицы, картинки, как вам угодно, например, наложить текст и картинки друг на друга, в любом месте страницы).
* Различные визуальные эффекты (прозрачность, смена цвета при наведении и прочее)
* И так далее

Как вы сами теперь можете понять, CSS стоит того, чтобы вы его изучили, вы даже должны его изучить, если хотите создавать профессионально свои странички, в этом вам поможет спецификация по CSS, а также различные учебники и статьи, ссылки на которые вы по традиции найдете в правой колонке. А пока что мы с вами вернемся на землю, и продолжим осваивать HTML, ведь мы можем с вами перейти к изучению других, более сложных технологий не раньше, чем мы освоим с вами простейшие, но все-таки нужные, такие как HTML.

Итак, в этой главе у меня была цель ознакомить вас с CSS, что я и сделала, в следующей же главе мы поговорим с вами о том, как внедрять CSS в наш документ, поэтому шагаем на следующую ступеньку за новыми знаниями.

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 46

Поделиться4724.03.09 14:59

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10113

Ступенька 45-ая.
"Как внедрять таблицы стилей (CSS) в наш документ".

Об одном из способов внедрения CSS в наш документ я почти проговорилась в прошлой главе, когда упомянула о том, что стили могут быть вынесены в отдельный файл, а это значит, что нам остается лишь указать путь к этому файлу, и указать, что это файл с CSS:

<head>
<link href="special.css" rel="stylesheet" type="text/css">
</head>

Итак, когда стили вынесены в отдельный файл – это называется внешние таблицы стилей. Их мы вводим в документ при помощи тэга <link>, который размещается внутри тэга <head></head>, а не <body>, как мы привыкли.

Давайте ознакомимся с атрибутами тэга <link>:

1 – href=”http://…” – пусть к файлу со стилями
2 - rel="stylesheet" – указывает, является ли подгружаемые таблицы стилей постоянными, предпочитаемыми или альтернативными. В нашем случае мы установили постоянные таблицы стилей для документа. Подробнее об атрибуте rel и его значениях вам расскажет спецификация по HTML.
3 - type="text/css" – тип содержимого, подгружаемой информации, в нашем случае мы указываем, что это CSS.

Но не надо думать, что если вы связали документ с внешней таблицей стилей через тэг <link> – этого достаточно, чтобы все заработало. Надо еще указать для каких тэгов (элементов нашего документа) мы используем таблицы стилей.

Допустим, некоторая таблица стилей (которая у нас хранится в файле special.css) устанавливает красный цвет для абзаца, вот такой код будет у нее (в файле special.css):

P.special {
color : red;
}

Однако, в данном случае, таблица стилей указывает, что не все блоки текста, заключенные в параграфы (<p>текст</p>), будут выделены красным цветом, а только те блоки, которым мы это укажем.

<html>
<head>
<title>Документ с CSS</title>
<link href="special.css" rel="stylesheet" type="text/css">
</head>
<body>

<p class="special">В этом абзаце текст должен быть красным.</p>
<p>А в этом абзаце нет, потому что мы не указали это при помощи атрибута class.</p>

</body>
</html>

Посмотрите на код нашего документа, при помощи атрибута class мы задали тэгу <p> имя класса. Затем, когда мы писали код таблицы стилей (в файле special.css), мы указали, что этот стиль будет применяться только к тем тэгам (атрибутам) <p>, для которых мы задали имя класса special. Вот теперь у нас все связано между собой.

Таблицы стилей не обязательно должны быть вынесены во внешний файл, вы можете внедрять их непосредственно в ваш документ при помощи тэга <style>, в котором вы разместите код ваших таблиц стилей (<style>код таблицы стилей</style>):

<html>
<head>
<title>Документ с CSS</title>

<style type="text/css">
P.special {
color : red;
}
</style>

</head>
<body>

<p class="special">В этом абзаце текст должен быть красным.</p>
<p>А в этом абзаце нет, потому что мы не указали это при помощи атрибута class.</p>

</body>
</html>

Обратите внимание, тэг <style>, как и тэг <link>, размещается внутри тэга <head></head>, а не <body>.

Есть еще и третий способ внедрения CSS в ваш документ, когда при помощи атрибута (не путать с тэгом) style код CSS вводится непосредственно для какого-либо тэга:

<html>
<head>
<title>Документ с CSS</title>
</head>
<body>

<p style="color: red">В этом абзаце текст должен быть красным.</p>
<p>А в этом абзаце нет, потому что мы не задали для него стиля.</p>

</body>
</html>

color: red – это код таблицы стилей, задающей красный цвет для абзаца, ее мы ввели в наш документ при помощи атрибута style, естественно, что в атрибут style вы будете помещать уже свои, другие, таблицы стилей.

Вот и вся премудрость с внедрением стилей в наш HTML-документ. Уже не все так просто, как хотелось бы, но и не сложно при этом. Напоминаю вам, что о том, как писать коды таблиц стилей вы узнаете из спецификации по CSS, а также из учебников и пособий, ссылки на которые вы найдете в правой колонке.

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 47

Поделиться4824.03.09 15:05

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10113

Ступенька 46-ая.
"Что такое скрипты. Как внедрять скрипты в html-документы".

Итак, на нашу елку (html) мы можем повесить шарики и игрушки (объекты - картинки, музыка, фильмы и т.д.), можем приладить электрические гирлянды и другую мишуру (CSS), но также мы можем внедрить в нашу елку целый инородный механизм - скрипты - которые заставят нашу елочку плясать, петь, и делать, что нам угодно.

Скрипт - это некий механизм, программа, специальная программа для веб. Как объекты и CSS, скрипты не являются частью html, это другие технологии, которые мы привязываем к нашему документу при помощи специальных тэгов или их атрибутов. Скрипты (программы) бывают как простыми (выпадение нового окна без тулбаров и меню, выпадающее меню, кнопки "назад-вперед" и т.д), так и сложными (гостевая книга, счетчик, форум, голосование, чат и т.д.).

Подробнее о скриптах, где их взять, как с ними обращаться, где найти учебную литературу по скриптам, и все остальное расскажет вам раздел Программирование на нашем сайте. Моя же задача в рамках данного учебника научить вас некоторым способам внедрения скриптов в наш html-документ.

Итак, как и в случае с CSS код скрипта может внедряться непосредственно в код вашего html-документа при помощи специального тэга SCRIPT:

<html>
<head>
<title>Документ со скриптом</title>
</head>
<body>

<script type="text/javascript">
... код скрипта...
</script>

</body>
</html>

Атрибут type определяет тип содержимого (язык скрипта, в нашем примере указано, что будет использоваться Javascript).

Однако, скрипт может быть вынесен и во внешний файл, из которого он будет подгружаться. А значит, надо указать путь к этому файлу, при помощи атрибута src:

<html>
<head>
<title>Документ со скриптом</title>
<script type="text/javascript" src="http://site.ru/put_k_sciptu/"></script>
</head>
<body>

<script type="text/javascript">
... код скрипта...
</script>

</body>
</html>

Вы, наверное, уже обратили внимание, что из тела документа я не убрала html-код для внедрения скрипта. Это не ошибка, это может быть часть скрипта, без которой он не будет работать. Или же это может быть еще один скрипт, который мы внедрили в наш документ (т.е. в итоге получили два скрипта на один html-документ).

Кроме того, для внедрения скрипта в наш html-документ, мы можем использовать специальные атрибуты, которые могут употребляться почти со всеми тэгами.

<html>
<head>
<title>Документ со скриптом</title>
</head>
<body>

<a name="ist"></a>
<a href="ist2.html#ist" onclick='open("big.html", "displayWindow1", "width=780, height=540, status=no, toolbar=no, menubar=no");'><img src="small.gif"></a>

</body>
</html>

Итак, полужирным шрифтом в нашем примере выделен код скрипта, который отвечает за открытие нового окна определенных размеров без меню и тулбара при нажатии на ссылку, в которую, собственно, наш скрипт и внедрен.

Скрипт внедрен в тэг <A> при помощи специального атрибута onclick - указывающего, что при одиночном нажатии на ссылку (или объект, или кнопку) - произойдет какое-то событие, какое именно, зависит от скрипта, который мы внедрили в наш документ, в нашем случае это открытие нового окна.

Кроме атрибута onclick существет еще много специальных атрибутов, каких именно и с какими тэгами они употребляются вам расскажет спецификация по HTML. А о других возможностях html - на следующей ступеньке

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 48

Поделиться4924.03.09 15:08

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10113

Ступенька 47-ая.
"Формы. Введение в тему".

В этой главе мы начнем разговор о формах. Каждый из вас наверняка, как пользователь интернет, хоть раз да видел или заполнял какую-либо форму.
Пример формы - это форма ответа на нашем форуме. =)

Не пытайтесь нажимать на кнопки и ставить курсор на поля формы, это картинка

Все вы знаете, что формы создаются средствами html - это верно. Однако, это служит возникновению одного большого заблуждения: многие считают, что достаточно научится создавать формы средствами html, чтобы у них на сайте появилась, например, гостевая книга - это не верно.

Форма - это лишь каркас. При помощи html мы лишь определяем, что тут у нас будет поле формы, а вот тут у нас будет кнопка, а на кнопке будет такая надпись, и т.д. Однако, чтобы при нажатии на кнопку формы ваше сообщение добавилось в гостевую книгу нужна иная технология - нужна некая программа, скрипт, который мы должны привязать к нашей форме.

Формы вводятся в документ при помощи тега <form></form>:

<form>
</form>

Данные из формы могут быть отправлены на обработку к какому-либо скрипту (путь к которому надо, конечно же, указать):

<form action="http://www.mysite.ru/cgi-bin/guestbook/">
</form>

Или на какой-либо почтовый сервер (к вам на е-майл):

<form action="mailto:vasya@mail.ru">
</form>

Как видите, пока что все просто и понятно.

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 49

Поделиться5024.03.09 15:19

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10113

Ступенька 48-ая.
"Элементы формы. Создание простой формы".

Элементов формы не так уж много, это: кнопки, флажки, переключатели, поля и списки (выпадающий и прокручивающийся). Кроме того, в формы можно внедрять другие объекты.

Есть два варианта изучения форм: 1 - рассмотреть все элементы форм подряд, 2 - рассмотреть создание форм на конкретных примерах. Мы с вами пойдем по второму пути и начнем с такой вот формы:
http://postroika.ru/html/48step2.html

В данной форме присутствуют следующие элементы: поле для ввода некой информации (имя), поле для ввода текста (комментарий), кнопка отправки и кнопка сброса информации.

Давайте представим, что наш хостер (компания, предоставившая нам место под страничку) не дает нам возможности использовать скрипты, поэтому мы не можем привязать данную форму к скрипту гостевой книги, чтобы при нажатии на кнопку отправки данные из формы сразу же добавились на наш сайт. Однако, мы хотим, чтобы наш посетитель мог отправить нам свой отзыв, поэтому мы укажем в этой форме, чтобы данные из нее отправлялись на наш е-майл, как это делать, мы уже знаем:

<form action="mailto:vasya@mail.ru">
</form>

Теперь введем в эту конструкцию элементы формы. Многие элементы формы создаются при помощи тега <INPUT>. Тип элемента мы определяем атрибутами этого тега.

Итак, создадим поле для ввода некой информации, в нашем случае имени человека, заполняющего форму.

<form action="mailto:vasya@mail.ru">
<input type=text name=firstname>
</form>

Итак, тег <INPUT>, как мы знаем, создает элемент формы. Какой именно элемент - мы определили при помощи атрибута type, задав ему значение text. Type=text - создает элемент для ввода текста из одной строки.

Name - имя элемента, обязательный атрибут.

Кроме обязательных атрибутов type и name, элемент формы может иметь и другие полезные атрибуты, для поля ввода текста (и не только него) это value - значение по умолчанию, size - длинна поля для ввода текста (измеряется в печатных символах, по умолчанию = 20), maxlength - определяет максимальное число символов, вводимых пользователем в поле формы.

<form action="mailto:vasya@mail.ru">
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20">
</form>

Итак, поле стало длиннее, т.к. мы ввели для него size="40". Пользователь не сможет напечатать в этом поле больше 20-ти символов (maxlength="20"), а value подсказывает для непонятливых, что именно нужно ввести в данном поле. Вообще-то для поля ввода текста value устанавливать необязательно, даже не желательно, некоторых посетителей раздражает необходимость стирать информацию, установленную вами по умолчанию.

Теперь введем в нашу форму следующий элемент: поле для ввода информации, комментариев.
Такое поле вводится при помощи тега <TEXTAREA></TEXTAREA>. <TEXTAREA> - создает элемент для многострочного ввода текста:

<form action="mailto:vasya@mail.ru">
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>
<textarea name="comments"></textarea>
</form>

Разберемся: name - как вы уже знаете, обязательный атрибут, поэтому мы его ввели (куда бы мы делись). Чтобы расположить элементы формы друг под другом, мы ввели уже знакомый вам тег <br>. Вообще, как располагаются элементы формы относительно друг друга вы можете определять уже при помощи знакомых вам тегов и атрибутов. Используйте их, не стесняйтесь. Хотите - можете расположить форму в таблице, где каждый элемент формы будет находится в отдельной ячейке. Хотите введите поясняющий текст с картинками (или без):

<form action="mailto:vasya@mail.ru">

Ваше имя:<br>
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>

Ваш комментарий:<br>
<textarea name="comments"></textarea>

</form>

Но мы немного отвлеклись, а ведь мы еще не договорили о <TEXTAREA> и его атрибутах. Что мы можем с ним сделать? Указать высоту поля (rows = количество строк), указать ширину поля (cols = количество печатных символов в строке), ввести некий текст, который будет отображен в форме (<TEXTAREA>текст по умолчанию</TEXTAREA>).

<form action="mailto:vasya@mail.ru">

Ваше имя:<br>
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>

Ваш комментарий:<br>
<textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea>

</form>

Итак, часть работы по созданию нашей формы мы проделали, осталось ввести кнопки, а то не порядок, когда и нажать не на что

В нашу форму мы будем вводить два типа кнопок: кнопку отправки и кнопку сброса. Есть еще и третий тип кнопок, для которых спецификацией по умолчанию значение не определено. Какое событие происходит при нажатии на такую кнопку - определяет создатель формы при помощи какого-либо скрипта. Этот тип кнопки мы с вами рассматривать не будем, если вы увлечетесь программированием или кодингом серьезно - то, как я полагаю, вы сами разберетесь, что к чему с этим третьим типом кнопки. Для создания типичных форм - он вам не нужен.

Итак, кнопка для отправки информации (к вам на е-майл или к скрипту на обработку) создается при помощи уже знакомого вам тега <INPUT> и его атрибута type.

<form action="mailto:vasya@mail.ru">

Ваше имя:<br>
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>

Ваш комментарий:<br>
<textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br>

<input type=submit>

</form>

Как вы видите, для кнопок атрибут name не обязателен, поэтому мы его не вводим.

Кнопка сброса информации создается аналогично. Только для type мы вводим не значение submit, а reset:

<form action="mailto:vasya@mail.ru">

Ваше имя:<br>
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>

Ваш комментарий:<br>
<textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br>

<input type=submit> <input type=reset>

</form>

Стандартные надписи на копках мы можете заменить на свои при помощи уже знакомого вам атрибута value:

<form action="mailto:vasya@mail.ru">

Ваше имя:<br>
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>

Ваш комментарий:<br>
<textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br>

<input type=submit value="ОК"> <input type=reset value="Отмена">

</form>

Лирическое отступление: многие читатели справшивают меня, а как изменить вид кнопок или полей, т.е., например, сделать кнопку оранжевого цвета. Отвечаю: при помощи CSS. Что это такое и с чем его едят мы с вами рассматривали. Поскольку CSS - технология не имеющая к HTML отношения, то в учебнике я не буду рассматривать конкретный код изменения цвета кнопок и полей формы, однако, вы можете найти учебник по CSS и освоить эту технологию, в том числе понять, а как же сделать кнопки оранжевыми

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

<form action="mailto:vasya@mail.ru" method=post>

Ваше имя:<br>
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>

Ваш комментарий:<br>
<textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br>

<input type=submit value="ОК"> <input type=reset value="Отмена">

</form>

Method - определяет метод отправки данных из формы (к скрипту или на почтовый сервер). Возможные значения: get или post. Подробнее о method и его значениях, о разнице между ними, мы поговорим в следующей главе. А сейчас просто укажем для нашей формы method=post, и закончим наш урок, имея на руках готовую форму, содержимое которой, после ее заполнения пользователем и нажатием на кнопку отправки (ОК), будет отослано вам на е-майл.

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 50

Ответить

Страница: « 1 2 3 4 5 6 »

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»

Имя

font_download format_size format_bold format_italic format_underlined strikethrough_s format_paint color_lens

format_align_left format_align_center format_align_right list table_view

link add_photo_alternate ondemand_video mood mic

content_cut lock_open format_quote code

horizontal_rule anchor live_help emoji_symbols library_add

ТочкамиDots

КружочкамиCircles

КвадратамиSquares

ЦифрамиNumbers

Римскими цифрамиRoman Numerals

Без обозначенийNo Markers

Многострочный пункт спискаMultiline List Item

ТекстText

HTML

Javascript

Bebas Neue Arial Georgia Microsoft Sans Serif Tahoma Verdana Century Gothic Palatino Linotype Times New Roman Franklin Gothic Medium Impact Arial Black Courier New Lucida Console Comic Sans Ms

10px 12px 14px 16px 18px 20px 22px

ЗаголовокTitle Автосжатие больших картинокAuto-resize large images Скрыть от гостейHide from guests Ссылка «скачать» Download link Имя читателяReader's name Добавлено спустя…Added after... Надстрочный текстSuperscript text Подстрочный текстSubscript text БлокBlock HTML иконка

Скрыть инструментарий Показать инструментарий

Теги оформления специальных постов

Сделать пост специальным[block="portfoliopost"]portfoliopost[/block],

Светлый фон[block="makeportfoliolight"]makeportfoliolight[/block],

Красный пост[block="saledpost"]saledpost[/block],

Синий пост[block="forsalepost"]forsalepost[/block],

Зеленый пост[block="freepost"]freepost[/block],

Пост без профиля[block="no-prof"]no-prof[/block],

Теги оформления картинок

Обложки: Для одной картинки по центру в рамке, автоматически уменьшается до ширины 480px

Обложка[block="cover"][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Закрыто[block="cover"][block="icon material-icons"]lock[/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Продажа[block="cover"][block="icon fa-solid fa-sack-dollar"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Подарок[block="cover"][block="icon fa-solid fa-gift"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Превью: Для любого количества картинок по центру в рамке, автоматически уменьшается до ширины или высоты 300px

Блок для превью[block="morepics"],[/block]

Разноцветные картинки-ссылки: Для любого количества картинок по центру в разноцветных рамках с заголовком, автоматически уменьшается до ширины 350px, минимальная высота 230px (если высота больше, картинка "обрезается" снизу, но не сжимается)

Блок для картинок-ссылок[block="port-block"],[/block]

Красный[block="p-out saled"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Синий[block="p-out forsale"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Зеленый[block="p-out free"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Желтый[block="p-out yellow"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Теги оформления контента

Обведенный текст[block="details"] [block="det"],[/block] [/block]

Добавить еще блок[block="det"],[/block]

Блок с кнопками[block="links"] [block="demo"][url=ссылка]синяя кнопка,[/url][/block] [block="store"][url=ссылка]оранжевая кнопка[/url][/block] [/block]

Синяя кнопка[block="demo"][url=ссылка]текст,[/url][/block]

Оранжевая кнопка[block="store"][url=ссылка]текст,[/url][/block]

добавить работу [block="wow bounceIn p-out,"] иконка [block="p-descr"][url=https://forumd.ru/viewtopic.php?id=]описание[/url][/block] [block="p-inner"][url=https://forumd.ru/viewtopic.php?id=][img]картинка[/img][/url][/block] [/block]

Иконки:

lock[block="icon material-icons"]lock,[/block]

[block="icon fa-solid fa-sack-dollar"],[/block]

[block="icon fa-solid fa-gift"],[/block]

ТЕГИ (вставить в p-out через пробел)

Тип работы:

под заказ saled,

на продажу forsale,

бесплатно free,

Основная категория:

Вебдизайн dis,

(для всего связанного с работой на сайтах/форумах, кроме готовых скриптов и мелкой графики)

Графика graf,

(для графона, НЕ включающего кодинг/скрипты)

Скрипты/коды code,

(для готовых разработок и работы по верстке/кодингу)
Мини-фильтры дизайнов:

адаптивные mob,

ролевые игры frpg,

компьютерные игры game,

нейтральные flat,

Подкатегории:

Дизайн форумов/сайтов fulldis,

(для полных работ по дизайну)

Макеты layout,

(для дизайнов, где только макет без кода, или работ по созданию макетов чего-либо)

Верстка dis-code,

(для работ по верстке чужих дизайнов или отдельных штук)

Соц-сети/стримы graf-s,

(графон для оформления соцсетей/стримов)

Ролевая графика/арт art,

(для мелкой графики)

Javascript/CSS js,

(для скриптов или выложенных цсс кодов)

Бесплатный диз от FD [block="p-out free fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Платный диз от FD [block="p-out forsale fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Дизайн от юзеров [block="p-out yellow"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

ТЕГИ (вставить в p-out через пробел)

Платформа:

MyBB.ru mybb-ru,

Макет (любая платформа) any,

Параметры:

+ PSD psd-in,

(в наличии макет помимо кодов)

+ адаптивка mob,

(есть версия для мобилок)

Тематика:

нейтральные flat,

ролевые игры frpg,

компьютерные игры game,

фентези fant,

аниме anime,

кино/сериалы kino,

стимпанк/киберпанк cyb,

мультфильмы kids,

животные cats,

Цвета:

тёмные darkst,

светлые light,

яркие bright,

добавить скрипт/код [block="SCRBLOCK"] [block="stforlink"] иконка, [block="link"][url=https://forumd.ru/viewtopic.php?id=]название[/url][/block] [/block] [block="sttags"] теги [/block] [/block]

Иконки:

[block="icon fa-brands fa-js"],[/block]

[block="icon fa-brands fa-css3-alt"],[/block]

[block="icon fa-regular fa-file-lines"],[/block]

[block="icon fa-solid fa-file-code"],[/block]

[block="icon fa-solid fa-file-invoice-dollar"],[/block]

ТЕГИ (*значение в скобках вставить в SCRBLOCK через пробел)

Тип кода:

скрипт (js)[block="js"]скрипт, js[/block]

css код (css)[block="css"]css код, css[/block]

HTML/CSS шаблоны (shab)[block="shab"]HTML/CSS шаблоны, shab[/block]

Модули/Расширения (global)[block="global"]Модули/Расширения, global[/block]

Платформа:

MyBB.ru (mybb-ru)[block="mybb-ru"]MyBB.ru, mybb-ru[/block]

Любой движок (any)[block="any"]Любой движок, any[/block]

Тип для форума:

Пользователи (users)[block="users"]Пользователи, users[/block]

Профиль (userprof)[block="userprof"]Профиль, userprof[/block]

Доп. поля профиля (adfield)[block="adfield"]Доп. поля профиля, adfield[/block]

Аватары (avatars)[block="avatars"]Аватары, avatars[/block]

Репутация (repa)[block="repa"]Репутация, repa[/block]

Группы (groups)[block="groups"]Группы, groups[/block]

Гoсти (guest)[block="guest"]Гoсти, guest[/block]

Администраторы (admins)[block="admins"]Администраторы, admins[/block]

Модераторы (moders)[block="moders"]Модераторы, moders[/block]

Регистрация (regis)[block="regis"]Регистрация, regis[/block]

Личные сообщения (ls)[block="ls"]Личные сообщения, ls[/block]

Вход (login)[block="login"]Вход, login[/block]

Подписки (subsc)[block="subsc"]Подписки, subsc[/block]

Поиск (search)[block="search"]Поиск, search[/block]

Цитирование (quotes)[block="quotes"]Цитирование, quotes[/block]

Пагинация (pagin)[block="pagin"]Пагинация, pagin[/block]

Опросы (polls)[block="polls"]Опросы, polls[/block]

Смайлы (smiles)[block="smiles"]Смайлы, smiles[/block]

Фикс скриптов QuadroBoards (qbfix)[block="qbfix"]Фикс скриптов QuadroBoards, qbfix[/block]

Страница форума:

На всех страницах (allpages)[block="allpages"]На всех страницах, allpages[/block]

Страницы (созд. в админке) (fpages)[block="fpages"]Страницы (соз. в админке), fpages[/block]

Главная страница (mainpage)[block="mainpage"]Главная страница, mainpage[/block]

Объявление (announ)[block="announ"]Объявление, announ[/block]

Категории (categ)[block="categ"]Категории, categ[/block]

Форумы (forums)[block="forums"]Форумы, forums[/block]

Статистика (stats)[block="stats"]Статистика, stats[/block]

Список тем (topiclist)[block="topiclist"]Список тем, topiclist[/block]

Страница профиля (profpage)[block="profpage"]Страница профиля, profpage[/block]

Тема (topics)[block="topics"]Тема, topics[/block]

Сообщения (posts)[block="posts"]Сообщения, posts[/block]

Контент сообщений (p-content)[block="p-content"]Контент сообщений, p-content[/block]

Рейтинг постов (p-repa)[block="p-repa"]Рейтинг постов, p-repa[/block]

Профиль автора поста (p-prof)[block="p-prof"]Профиль автора поста, p-prof[/block]

Форма ответа (fo)[block="fo"]Форма ответа, fo[/block]

Модификация ФО (fomod)[block="fomod"]Модификация ФО, fomod[/block]

Новые BB-теги (newbb)[block="newbb"]Новые BB-теги, newbb[/block]

Инструментарий спец тем/постов (spesh)[block="spesh"]Инструментарий спец тем/постов, spesh[/block]

Универсальные теги:

Дизайн/стиль (dis)[block="dis"]Дизайн/стиль, dis[/block]

Замена элементов/атрибутов (chan)[block="chan"]Замена элементов/атрибутов, chan[/block]

Загрузка (load)[block="load"]Загрузка, load[/block]

Переадресация (redir)[block="redir"]Переадресация, redir[/block]

Скроллинг (scroll)[block="scroll"]Скроллинг, scroll[/block]

Виджеты (vidjet)[block="vidjet"]Виджеты, vidjet[/block]

Меню (menu)[block="menu"]Меню, menu[/block]

Вкладки (ttabs)[block="ttabs"]Вкладки, ttabs[/block]

Галереи (gall)[block="gall"]Галереи, gall[/block]

Слайдеры (sliders)[block="sliders"]Слайдеры, sliders[/block]

Ротаторы (rotat)[block="rotat"]Ротаторы, rotat[/block]

Таймеры/даты (timers)[block="timers"]Таймеры/даты, timers[/block]

Спойлеры (spoilers)[block="spoilers"]Спойлеры, spoilers[/block]

Реклама (adv)[block="adv"]Реклама, adv[/block]

Изображения (pics)[block="pics"]Изображения, pics[/block]

Медиа (media)[block="media"]Медиа, media[/block]

Ролевые игры (frpg)[block="frpg"]Ролевые игры, frpg[/block]

Hover-эффекты (hover)[block="hover"]Hover-эффекты, hover[/block]

Анимация (anim)[block="anim"]Анимация, anim[/block]

Украшения (decor)[block="decor"]Украшения, decor[/block]

Праздники (seleb)[block="seleb"]Праздники, seleb[/block]

Ограничения/запреты (stops)[block="stops"]Ограничения/запреты, stops[/block]

Антикопирование (nocopy)[block="nocopy"]Антикопирование, nocopy[/block]

Уведомления (notif)[block="notif"]Уведомления, notif[/block]

ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Меню навигации

Пользовательские ссылки

Объявление

🎧 Подкаст «НЕТЕРОЛЕВЫЕ»

🍁 Что такое осень? Конкурс осенних дизайнов!

🔥 Акция! Осенние скидки на Мгновенные уведомления

❤️ Поддержи проект! Стань модератором!

💌 Акция! Подписка, лайк, коммент, репост!

🌟 SPECIAL OFFER: We distribute designs for free

❤️ Support the project

Информация о пользователе