Jump to content

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


Recommended Posts

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

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

Link to comment
Share on other sites

  • Replies 46
  • Created
  • Last Reply

Top Posters In This Topic

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

Вот что можно поменять с помощью 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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 2 months later...
1 час назад, DanilStopnickiy сказал:

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

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

1111111111.png

 

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

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

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

Link to comment
Share on other sites

В 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...

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

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

Спойлер

1.png

 

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 3 weeks later...
3 часа назад, DanilStopnickiy сказал:

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

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

Link to comment
Share on other sites

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

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

@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

@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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.

×
×
  • Create New...

Important Information

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