Jump to content

Archived

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

  • 0
DanilStopnickiy

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

Question

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

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

Share this post


Link to post
Share on other sites

Recommended Posts

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

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

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

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

Share this post


Link to post
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

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

Share this post


Link to post
Share on other sites
1 час назад, DanilStopnickiy сказал:

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

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

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

Share this post


Link to post
Share on other sites
3 минуты назад, CEPBAJl сказал:

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Спойлер

1111111111.png

 

Share this post


Link to post
Share on other sites
1 час назад, DanilStopnickiy сказал:

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

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

1111111111.png

 

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

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

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

Share this post


Link to post
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

 

Share this post


Link to post
Share on other sites

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

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

Спойлер

1.png

 

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

Люди, помогите кто сможет ! Скиньте ссылки на сайты где публикуются последние новости в сфере web-программирования, Пожалуйста !!!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
3 часа назад, DanilStopnickiy сказал:

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

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

Share this post


Link to post
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 заманивали.

Share this post


Link to post
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;

}

 

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

Share this post


Link to post
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.

 

Share this post


Link to post
Share on other sites

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

Experement.rar

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

Share this post


Link to post
Share on other sites

Давай-давай, Гриня, помогай молодым!

А то развалился там у себя на диване... 

16c652es-960.jpg

Share this post


Link to post
Share on other sites

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

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

 

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

 

 

ex.zip

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Попробовал немного разобраться в LESS. Удобно!

 

Подключил файл .less напрямую к .html с помощью less.js, который конвертирует его "на лету" и немного поэкспериментировал.

По-моему, ошибка в том, что была повторно указана директива @import "less_var.less" в файле less_code.less

И вопрос путей к файлам проекта. Их можно указать по-разному, зависит от того, как проходят эксперименты. На веб-сервере, локальном или удаленном?

 

P.S. Результат изысканий во вложении (добавил пример использования символьного шрифта): www.zip

P.S.S. Похоже, неплохая книга о LESS для начала: https://mrmlnc.gitbooks.io/less-guidebook-for-beginners/content/ Буду читать.

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

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