Добавление новостей в HTML [закрыт]
Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме.
Закрыт 6 лет назад .
Создаю сайт на чистом HTML (css), не подскажете пожалуйста, как автоматизировать добавление новостей на сайт, не используя различных движков?
Можно в Microsoft Office составлять страницы и сохранять их в формате HTML и делать это мир лучше.
Существует классная технология асинхронного программирования ajax) Есть хороший фреймворк jQuery) Ну так вот можно создать html файл «news.html», где размещать новости в контейнерах с классом «new». В вашей, например, главной странице сайта в теге head подключаете jQuеry и будущий скрипт новостей, где будет размещена функция вывода новостей на страницу:
где ‘#newslist’ — идентификатор блока, в который будут выводиться все новостные блоки с классом ‘.new’ из документа ‘/news.html’.
И вызов функции:
Действует эта схема так: загружается ваш документ, когда парсер браузера закончит с DОМ, то заработает наш скрипт. Сначала он закачает в ваш браузер страницу новостей в фоновом режиме, затем найдёт в нём новостные блоки и вставит их в блок вывода новостей колонкой.
Как сделать новости на сайте html
Кликните для просмотра в действии
2. Делаем каждый столбец flexbox-контейнером
Кликните для просмотра в действии
Кликните для просмотра в действии
Кликните для просмотра в действии
Кликните для просмотра в действии
Верстаем новостной сайт с помощью Flexbox
Поверьте, нет никакой необходимости в детальном разборе всех аспектов работы с Flexbox, если вы хотите начать им пользоваться уже сейчас. В этом руководстве автор собирается познакомить вас с некоторыми свойствами Flexbox и сделать «новостной лейаут» наподобие того, который вы могли видеть на сайте The Guardian.
Причина, по которой автор использует Flexbox – это большое количество возможностей, которые он предоставляет:
— легкость в создании адаптивных столбцов;
— создание столбцов одинаковой высоты;
— возможность прижатия содержимого к низу контейнера.
1. Начинаем с создания двух столбцов
Создание столбцов при помощи CSS всегда влекло за собой определенные трудности. На протяжении длительного времени для выполнения данной задачи широко использовались (и используются) float’ы и / или таблицы, но каждый из этих методов имел (и имеет) свои недостатки.
В свою очередь, Flexbox упрощает этот процесс, обладая рядом таких преимуществ, как:
— написание более «чистого» кода: от нас лишь требуется создать контейнер с правилом display: flex;
— гибкость: мы можем изменять размер, растягивать и выравнивать столбцы путем изменения пары строк CSS;
— семантическая разметка;
— кроме того, с использованием Flexbox отпадает необходимость отменять обтекание во избежание непредсказуемого поведения лейаута.
Давайте начнем работу с создания двух столбцов, один из которых будет занимать 2/3 ширины нашего контейнера, а еще один — 1/3 его часть.
Здесь присутствуют два элемента:
— контейнер columns;
— два дочерних элемента column, один из которых имеет дополнительный класс main-column, который мы используем позже для того, чтобы сделать столбец шире.
Поскольку main-column имеет значение flex равное 2, то этот столбец займет в два раза больше места, чем второй.
Добавим немного визуального оформления и, в итоге, получим:
Кликните для просмотра в действии
2. Делаем каждый столбец flexbox-контейнером
Каждый из двух столбцов будет содержать несколько вертикально расположенных статей, поэтому из этих двух элементов мы, в свою очередь, также должны сделать flexbox-контейнеры.
Итак, нам необходимо, чтобы статьи:
— располагались вертикально внутри столбца-контейнера;
— занимали все доступное место.
Правило flex-direction: column, указанное для контейнера, вместе с правилом flex: 1, указанным для дочернего элемента, позволяет статье заполнить все свободное место по вертикали, при этом высота первых двух столбцов останется неизменной.
Кликните для просмотра в действии
3. Делаем контейнер из статьи
Теперь, чтобы еще больше расширить наши возможности, давайте представим каждую статью в виде flexbox-контейнера. Каждый такой контейнер будет содержать:
— заголовок;
— параграф;
— информационную панель с именем автора и количеством комментариев;
— какую-нибудь адаптивную картинку.
Здесь мы используем Flexbox для того, чтобы «прижать» информационную панель к низу элемента. Вот, посмотрите, какой результат мы ожидаем получить.
А вот и сам код:
Элементы внутри статьи расположены вертикально благодаря использованию правила flex-direction: column.
Также мы применили свойство flex: 1 к элементу article-content, тем самым растянув его на все свободное место и прижав article-info к низу. Высота столбцов в этом случае не имеет значения.
Кликните для просмотра в действии
4. Добавляем несколько вложенных столбцов
На самом деле, нам нужно, чтобы левый столбец включал в себя еще несколько столбцов. Поэтому нам необходимо заменить второй элемент, отвечающий за статью, контейнером columns, который мы использовали ранее.
Поскольку мы хотим, чтобы первый вложенный столбец был шире, добавим к элементу класс nested-column, а в CSS укажем:
Теперь этот столбец будет вдвое шире второго.
Кликните для просмотра в действии
5. Делаем первую статью с горизонтальным лейаутом
Первая статья у нас на самом деле большая. Дабы эффективно использовать место на экране монитора, давайте изменим ее ориентацию на горизонтальную.
Свойство order в данном случае играет большую роль, поскольку оно позволяет изменять очередность HTML-элементов без изменения HTML-разметки. В действительности, article-image в коде идет перед элементом article-body, но ведет себя так, будто стоит после него.
Кликните для просмотра в действии
6. Делаем адаптивный лейаут
Теперь все выглядит так, как мы хотели, хотя и немного сплющено. Давайте исправим это, добавив нашему лейауту гибкости.
Одной из замечательных вещей в Flexbox является то, что достаточно удалить правило display: flex в контейнере для того, чтобы полостью отключить его (Flexbox), в то время, как остальные его свойства (такие, как align-items или flex) останутся рабочими.
В результате, мы можем активировать адаптивный лейаут, задействовав Flexbox только тогда, когда в этом будет необходимость.
Итак, мы собираемся удалить display: flex из селекторов .columns и .column, вместо этого «запаковав» их в медиа-запрос:
Вот и все! На экранах с маленьким разрешением все статьи будут располагаться друг над другом, а на экранах с разрешением свыше 800 пикселей — в два столбца.
7. Добавляем завершающие штрихи
Для того, чтобы лейаут выглядел более привлекательно на больших экранах, давайте добавим кое-какие CSS-твики:
Содержимое первой статьи выровнено по горизонтали: текст расположен по левой стороне, а картинка — по правой. Также, главный столбец теперь стал шире (75%). То же самое касается и вложенного столбца (66%).
А вот и финальный результат!
Кликните для просмотра в действии
Как создать простую новостную ленту
В этом уроке мы рассмотрим, как мы можем преобразовать некоторый семантический и доступный базовый HTML в привлекательный и функциональный новостной тикер, который плавно прокручивает его содержимое. Некоторые новостные ленты расположены горизонтально, а некоторые – вертикально; тот, который мы собираемся создать сегодня, будет вертикальным.
Контекстом примера является скроллер новостей, поэтому мы будем работать с простым текстом, но мы должны иметь возможность поместить все, что мы хотели, в базовую разметку; изображения или ссылки, или что-то еще. Мы будем использовать jQuery в качестве базовой библиотеки JS, а также немного HTML и CSS. Давайте начнем.
Базовый HTML
На новой странице в вашем текстовом редакторе добавьте следующий код:
Сохраните его как simpleTicker.html в каталоге, содержащем jQuery 1.3.2. Как и обычная мебель страницы – DOCTYPE, META-тип контента, заголовок и т. Д. – у нас есть настраиваемая таблица стилей, которую мы создадим в одно мгновение, и в конце тела мы даем ссылку на jQuery (из соображений производительности ).
На странице есть контент, который мы будем постепенно улучшать в новостной ленте; он состоит из простого элемента списка определений, который подходит для наших целей. Хотя в каждый элемент <dt> может быть помещено только встроенное содержимое, содержимое уровня блока может быть помещено в элементы <dd>.
Код минимален и высокодоступен; браузеры, мобильные устройства и программы для чтения с экрана не должны испытывать затруднений при интерпретации и визуализации. Однако без стиля это выглядит довольно шокирующим:
Предоставление стиля по умолчанию
Давайте добавим некоторые базовые стили; даже если JavaScript отключен, никто не хочет видеть список таким, какой он есть в данный момент. В новом файле в вашем текстовом редакторе добавьте следующий код:
Сохраните этот файл в том же каталоге, что и страница, и назовите его simpleTicker.css. Мы даем списку заданную ширину и высоту и устанавливаем для свойства overflow значение auto; высота тикера меньше пространства, необходимого для отображения всех новостных элементов, поэтому полоса прокрутки позволит посетителям с отключенным JavaScript просматривать весь контент.
Некоторые из стилей являются чисто презентационными; все, что задает цвет фона, рамку или шрифт, является абсолютно произвольным и используется, чтобы сделать пример немного более привлекательным. Теперь виджет должен выглядеть так:
Каким бы минимальным мы ни выбрали его, это значительное улучшение по умолчанию для рендеринга; теперь он вполне мог бы вписаться в боковую панель или колонку; это приемлемый откат от готового виджета и отличная основа для постепенного улучшения.
Постепенно улучшая тикер
Теперь мы можем перейти к забавной части – добавив JavaScript, который превратит это из простого списка в автоматический тикер; в пустой элемент <script> внизу страницы добавьте следующий код:
Весь наш код заключен в ярлык jQuery document.ready $ (function () <>), который будет выполнять анонимную функцию, как только страница загрузится. Первое, что мы делаем, это кешируем наш главный селектор, который является внешним элементом <dl>; это избавит нас от необходимости многократно выбирать элемент из DOM всякий раз, когда мы захотим с ним работать, и повысит производительность страницы.
Базовый список определений содержит как термины определения, так и элементы описания определения, каждый из которых может иметь различные размеры. Чтобы немного упростить наш сценарий, мы обернем каждую пару <dt> и <dd> в содержащий элемент <div>; это позволяет нам логически сгруппировать различные элементы и сгладить анимацию. Это также означает, что мы можем использовать любые поля и отступы для * lt; dt> и
элементы без необходимости учитывать их в наших расчетах анимации.
Для этого мы выбираем все дочерние элементы из нашего кэшированного селектора и используем метод фильтра jQuery, чтобы отбросить все элементы <dd>. Затем для каждого оставшегося <dt> мы создаем новый контейнер <div> и добавляем оба <dt> и <dd> в новый контейнер. Мы должны сначала добавить <dd>, который следует за текущим <dt>, потому что после добавления <dt> к контейнеру после него не будет <dd>. Поэтому нам нужно использовать метод prepend для <dt> после добавления <dd>.
Когда все пары <dt> и <dd> обернуты в элементы <div>, мы изменяем свойство CSS переполнения тикера на скрытое, чтобы полоса прокрутки была удалена. Это является частью стратегии доступности и гарантирует, что только посетители с включенным JavaScript смогут увидеть расширенный тикер.
Затем мы определяем нашу функцию аниматора, где мы устанавливаем анимацию, которая заставляет тикер начать прокрутку, а затем продолжать прокрутку до бесконечности. Это обычная функция JavaScript, которая принимает один параметр; когда мы вызываем эту функцию, мы передаем первый элемент контейнера внутри тикера.
Первое, что мы делаем в этой функции, это вычисляем расстояние, которое должен пройти выбранный элемент, и продолжительность анимации. Часть расстояния легка; это просто высота текущего элемента контейнера.
Продолжительность немного сложнее; это общее расстояние, которое вы должны пройти за вычетом пройденного расстояния, деленное на базовую скорость, которую я произвольно установил на уровне 0,025. Высота уже будет целым числом, но метод css вернет строку, представляющую верхнюю границу анимируемого элемента, поэтому нам нужно использовать функцию JavaScript parseInt (), чтобы преобразовать ее в число. Это также будет отрицательное число, поэтому мы используем функцию JavaScript Math.abs (), чтобы преобразовать ее из отрицательного в абсолютное (положительное) число.
По моему мнению, базовая скорость, на которую мы делим оставшееся расстояние, чтобы проехать, довольно медленная; Я уже видел тикеры (созданные на Java), и они работали примерно с одинаковой скоростью, и у меня не было укачивания или каких-либо побочных эффектов. Если вы чувствуете, что анимация слишком быстрая (или даже слишком медленная), смело изменяйте эту цифру. Это должно быть действительно небольшое число, хотя; все в диапазоне от 0,01 до 0,09, вероятно, будет в порядке.
Получив эти цифры, мы можем создать анимацию, используя метод анимации jQuery. Первым параметром для этого метода является сама анимация; мы хотим, чтобы первый из элементов контейнера в тикере был перемещен вверх, пока он не будет полностью скрыт в переполнении, но мы также хотим перетащить остальные элементы контейнера вверх на то же расстояние, поэтому мы используем параметр marginTop из элемент.
Второй аргумент метода animate – это продолжительность, которую мы разработали минуту назад. Третий аргумент – это метод ослабления; Пользовательские анимации jQuery автоматически получают два типа замедления – свинг и линейный. Swing заставляет анимацию ускоряться и замедляться, в то время как linear делает ее плавной и непрерывной, так что это вариант для нас в этой ситуации.
Последний аргумент – это функция анонимного обратного вызова, которая будет выполнена после завершения анимации. Внутри этой функции мы перемещаем только что анимированный элемент в конец набора контейнеров, сбрасываем его marginTop обратно в 0, а затем рекурсивно вызываем функцию аниматора снова, передавая нового первого потомка тикера.
Наконец, нам нужно вызвать функцию аниматора один раз, чтобы начать весь процесс. Когда мы просматриваем эту страницу в браузере, тикер должен плавно прокручивать каждый элемент списка несколько раз:
Запуск и остановка
Теперь нам нужно подумать о том, что мы хотим сделать, когда посетитель наводит мышью на новость; лично я думаю, что поведение по умолчанию должно состоять в том, что оно останавливается при наведении мыши, а затем снова запускается при наведении мыши. Мы можем легко добавить это поведение с помощью пары обработчиков событий jQuery; добавьте следующий код непосредственно перед финальной комбинацией скобка / фигурная скобка: