Jump to content

Web-программирование.

KoTuK_B_KyCTuKE

Recommended Posts

KoTuK_B_KyCTuKE Newbie

KoTuK_B_KyCTuKE

Posted
Posted

Тема посвящается Web - программированию, все вопросы о создании сайта и его дизайне, а также помощи начинающим и обмен новостями и советами. :)

Сам создал тему, и первый вопрос: Решил в своей работе сменить скролл при помощи HTML и CSS, поискав ответы в инете нормального ничего не нашёл, помогите пожалуйста !)

Link to comment
Share on other sites
CEPBAJl Rising Star

CEPBAJl

Posted
Posted

Даня, из твоего вопроса не совсем понятно чего ты хочешь добиться. Какие именно изменения в скроллбаре ты хочешь получить?

Вот что можно поменять с помощью CSS: http://www.ruled.ru/scrollbar-css.html

Для более значительных изменений без javascript не обойтись: http://beloweb.ru/novichkam/kak-izmenit-polosu-prokrutki-na-sayte-26-gotovyih-tem.html

Ох тыж Йожкин кот! Ток что Йежа то и не было! Йа ни первый на... :P

Link to comment
Share on other sites
KoTuK_B_KyCTuKE Newbie

KoTuK_B_KyCTuKE

Posted
  • Author
Posted
3 минуты назад, CEPBAJl сказал:

Даня, из твоего вопроса не совсем понятно чего ты хочешь добиться. Какие именно изменения в скроллбаре ты хочешь получить?

Вот что можно поменять с помощью CSS: http://www.ruled.ru/scrollbar-css.html

Для более значительных изменений без javascript не обойтись: http://beloweb.ru/novichkam/kak-izmenit-polosu-prokrutki-na-sayte-26-gotovyih-tem.html

Ох тыж Йожкин кот! Ток что Йежа то и не было! Йа ни первый на... :P

Спасибо, сохранил оба сайта, буду разбираться что к чему относится :)

Link to comment
Share on other sites
CEPBAJl Rising Star

CEPBAJl

Posted
Posted
1 час назад, DanilStopnickiy сказал:

Решил в своей работе сменить скролл при помощи HTML и CSS

Еще немного по вопросу: HTML не должен иметь никакого отношения к тому как внешне выглядит веб-страница. Это, если правильно, каркас, скелет сайта. При том что есть возможность (пока еще) использовать атрибуты тегов для изменения внешнего вида, пользоваться ими в приличном обществе давно противопоказано. Единственное исключение — в html-коде прописывают изображение логотипа, но на то есть причины.

Так что прими во внимание: html - каркас (количество блоков, семантика, вложенность), css - внешний вид.

Link to comment
Share on other sites
KoTuK_B_KyCTuKE Newbie

KoTuK_B_KyCTuKE

Posted
  • Author
Posted
3 минуты назад, CEPBAJl сказал:

Еще немного по вопросу: HTML не должен иметь никакого отношения к тому как внешне выглядит веб-страница. Это, если правильно, каркас, скелет сайта. При том что есть возможность (пока еще) использовать атрибуты тегов для изменения внешнего вида, пользоваться ими в приличном обществе давно противопоказано. Единственное исключение — в html-коде прописывают изображение логотипа, но на то есть причины.

Так что прими во внимание: html - каркас (количество блоков, семантика, вложенность), css - внешний вид.

просто все мои знания это HTML и CSS и то не полностью )))

Link to comment
Share on other sites
CEPBAJl Rising Star

CEPBAJl

Posted
Posted

Да ты как то говорил уже что вас учат писать код на FrontPage :P Его тоже в приличном обществе уже давно не упоминают. 

Вообще по html и css в ru-нете лучший сайт https://webref.ru/, там отличный справочник, куча руководств, плюс неплохое описание перспективных направлений в front-end разработке. Очень советую. Это новая реализация широко известного сайта http://htmlbook.ru/content. Им тоже можно пользоваться, но в нем много устаревшей информации и в то же время нет множества фич появившихся недавно.

Link to comment
Share on other sites
  • 2 months later...
CEPBAJl Rising Star

CEPBAJl

Posted
Posted
1 час назад, DanilStopnickiy сказал:

Можете скинуть видео обучение работы с программой, если кто знает. Вот информация о проге. Заранее большое спасибо.

  Скрыть контент

1111111111.png

 

Даня, так на ТыТрубе поищи. Или лень? 

Вот попробуй в этом порыться https://www.youtube.com/results?search_query=phpstorm+уроки. У loftblog неплохие видеоуроки.

К сожалению, большую часть работы этого IDE придется изучать самому, с учетом того что ты хочешь от него добиться и в какой области применять. У PhpStorm есть аналог - WebStorm. Он попроще для освоения из-за того что ориентирован только на frontend-разработку.

Link to comment
Share on other sites
KoTuK_B_KyCTuKE Newbie

KoTuK_B_KyCTuKE

Posted
  • Author
Posted
В 21.02.2017 в 17:37, CEPBAJl сказал:

Даня, так на ТыТрубе поищи. Или лень? 

Вот попробуй в этом порыться https://www.youtube.com/results?search_query=phpstorm+уроки. У loftblog неплохие видеоуроки.

К сожалению, большую часть работы этого IDE придется изучать самому, с учетом того что ты хочешь от него добиться и в какой области применять. У PhpStorm есть аналог - WebStorm. Он попроще для освоения из-за того что ориентирован только на frontend-разработку.

я скачал виде, теперь не хочу навязываться но есть ли обучение пользованию WebStorm ? пожалуйста :)

Спойлер

111111.png

 

Link to comment
Share on other sites
  • 1 month later...
KoTuK_B_KyCTuKE Newbie

KoTuK_B_KyCTuKE

Posted
  • Author
Posted

Кто знает, как можно выполнить след. задачу (если это возможно конечно...):

У меня уже почти готовая выполненная работ по веб, остаётся один маленький штрих в котором только вы можете помочь, так как я с JavaScript я пока не лажу. Хотелось бы узнать, есть ли возможность при нажатии на видео или же блок (салатового цвета), это видео открывалось бы в новом окне браузера (именно окне, не в новой вкладке). Пока у меня получилось: только при обновлении сайта (и то, браузер сразу блокирует окно).

Спойлер

1.png

 

Link to comment
Share on other sites
CEPBAJl Rising Star

CEPBAJl

Posted
Posted

@DanilStopnickiy А ты это извращение сам придумал или тебе это в задании строго прописано?

Атрибут в теге <a> target="_blank" раньше открывал ссылки в новом окне браузера, в современных браузерах он же по-умолчанию открывает ссыль в новой вкладке, изменить поведение можно настройками браузера.

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

Link to comment
Share on other sites
  • 3 weeks later...
programist434 Newbie

programist434

Posted
Posted
3 часа назад, DanilStopnickiy сказал:

Можете скинуть ссылки, где можно нормально научиться подключать шрифты через Less ( именно через Less, таково задание ), заранее большое спасибо )

Чем тебя css не устраивает? 

Link to comment
Share on other sites
CEPBAJl Rising Star

CEPBAJl

Posted
Posted
37 минут назад, programist434 сказал:

Чем тебя css не устраивает? 

Чистый css это трудночитаемый и трудноподдающийся редактированию код. В отличии от него в препроцессорах есть переменные, есть функции и примеси. Сам код читается намного легче и может быть разбит на множество файлов для большей понятности. Из недостатков - требуется компиляция в css. Но никто не применяет препроцессоры напрямую. При использовании gulp для того чтоб собрать все созданные в препроцессоре файлы стилей в один, скомпилировать их в css, минфицировать и очистить от ненужных комментарием достаточно набрать в консоли команду gulp build. Команда может быть и другой, каждый сам пишет код для своего сборщика.

@DanilStopnickiy Даня, почитай тут https://toster.ru/q/183489 и тут http://chimir.ru/post/39 описания как сделать это с помощью миксинов. Я с less не возился, меня на sass заманивали.

Link to comment
Share on other sites
KoTuK_B_KyCTuKE Newbie

KoTuK_B_KyCTuKE

Posted
  • Author
Posted
8 часов назад, programist434 сказал:

Чем тебя css не устраивает? 

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

 

<table class="table_staff>

     <tr>

        <td>№</td>

        <td>Имя сотрудника</td>

        <td>Часы работы</td>

     </tr>

     <tr>

        <td>1</td>

        <td>Гриня @CEPBAJl</td>

        <td>с 6:00 до 21:00</td>

     </tr>

     <tr>

        <td>2</td>

        <td>Рома @programist434</td>

        <td>с 6:00 до 21:00</td>

     </tr>

</table>

 

Таблица пример (взята с потолка) =)

 

Как примерно в Less будет выглядеть ( Рамка самой таблице, отступы внутри ячеек и ширина ячейки ):

 

table.table_staff{

            border: 1px solid black;

 

                 tr{

 

                     td{

                         padding: 10px;

                         background-color: yellow;

                         width: 100px;

                        }

            }

}

 

А теперь как оно выглядит в итоге в CSS (как у меня выходило всегда):

 

.......table.table_staff {

                                   border: 1px solid black;

}

.......table.table_staff td tr{

                         padding: 10px;

                         background-color: yellow;

                         width: 100px;

}

 

"......." - означает трёх-километровый путь, т.к. страница не обходится парочкой элементов.

Link to comment
Share on other sites
CEPBAJl Rising Star

CEPBAJl

Posted
Posted

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

! Даня, отучайся от инлайновых стилей, это плохо, даже в примерах. Лучше уж выше прилепи тег <style></style>

Вот очень простенький пример на SASS

Это правила стилей записанные с помощью CSS:

body {
  color: red;
}
body p {
  font-size: 14px;
}
body p .someclass {
  font-weight: bold;
}
Тоже самое записанное с помощью SASS (именно SASS, а не SCSS!):

body
  color: red
  p
    font-size: 14px
    .someclass
      font-weight: bold

Даже в этом микроскопическом коде получилось короче. Но главное в препроцессорах все же то. что там есть переменные и функции. Для html тоже есть препроцессоры, но смысл использовать их пропал с появлением emmet.

 

Link to comment
Share on other sites
KoTuK_B_KyCTuKE Newbie

KoTuK_B_KyCTuKE

Posted
  • Author
Posted

@CEPBAJl Прошу помоги !!! Мне в мои оленьи мозги никак не доходит, как правильно подключить шрифт. Я скину "Experement.rar" ( + там безнадёжная моя попытка подключить шрифт ), где пытался подключить шрифт Times New Roman, а архив со шрифтом по почте ( он не влезает в стандарты форума 5Мб ). Если что-то ещё нужно, пинай меня, постараюсь как-нибудь помочь разобраться, в том, что навоял))

Experement.rar

Основной Less файл который компилируется в CSS ( он один ) - less_main.less. Программа которой пользуюсь - NetBeans 8.2, для компиляции less-файлов использую "Koala". Заранее большое спасибо !

Link to comment
Share on other sites
artyom_ktk Community Regular

artyom_ktk

Posted
Posted

Не спец, немножко интересуюсь данной областью знаний... :)

В файле less_main.css подправил путь к шрифтам, положил в папку шрифт (его там не было) и добавил несколько правил для примера использования этого символьного шрифта. Правила не моего авторства, взял для примера из bootstrap'а ( http://getbootstrap.com/components/#glyphicons-how-to-use )

 

В LESS пока сильно не вник. В процессе :)

 

 

ex.zip

Link to comment
Share on other sites
CEPBAJl Rising Star

CEPBAJl

Posted
Posted

@DanilStopnickiy Даня, я не работал с LESS, а он всё же отличается от SASS. И к тому же я через час уезжаю на шашлыки по случаю Днюхи у моей крестницы, поэтому хоть немного повникать смогу только завтра, т.к. собираюсь употребить немного жидкого топлива. Ты уж прости меня, редкого алкаша. :buhlo:

Link to comment
Share on other sites
CEPBAJl Rising Star

CEPBAJl

Posted
Posted

Данил, в LESS же используются фигурные скобки и закрывающая правило точка с запятой, попробуй прописать подключение так же как в обычном CSS, а вдруг получится. Я вот точно знаю что в SCSS можно писать обычные CSS-правила и они полностью работоспособные, про LESS надо почитать. 

Link to comment
Share on other sites
programist434 Newbie

programist434

Posted
Posted
5 часов назад, DanilStopnickiy сказал:

@CEPBAJl Прошу помоги !!! Мне в мои оленьи мозги никак не доходит, как правильно подключить шрифт. Я скину "Experement.rar" ( + там безнадёжная моя попытка подключить шрифт ), где пытался подключить шрифт Times New Roman, а архив со шрифтом по почте ( он не влезает в стандарты форума 5Мб ). Если что-то ещё нужно, пинай меня, постараюсь как-нибудь помочь разобраться, в том, что навоял))

Experement.rar

Основной Less файл который компилируется в CSS ( он один ) - less_main.less. Программа которой пользуюсь - NetBeans 8.2, для компиляции less-файлов использую "Koala". Заранее большое спасибо !

В Less не работал но если он схож синтаксисом с css то у тебя тут не хватает двух точек.

src: url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),

так как папка fonts не вложена в папку less.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

Используя данный сайт, Вы соглашаетесь с положением Terms of Use.

  I accept