Как на сайте сделать галерею


Как создать галерею в CSS: практика — учебник CSS

Готовы поупражняться в использовании новых знаний о CSS? В этом практическом уроке вам предстоит узнать, как сделать адаптивную галерею в виде квадратных плиток, применяя полученные навыки. Ознакомьтесь с планом урока, после чего приступим к делу.

План практического урока

Итак, вам наверняка интересно, как будет выглядеть результат ваших трудов по завершению практики. Мы сразу продемонстрируем вам макет будущей фотогалереи:




Пошаговый план создания этой галереи следующий:
  1. Разработка адаптивной сетки.
  2. Оформление миниатюр.
  3. Стилизация подписей.
  4. Финальные штрихи.
  5. Дополнительно: подключение плагина для всплывающих окон.

Загрузка файлов

Скачайте архив с файлами и откройте в удобном для вас редакторе кода файлы gallery.html и style.css (из папки css). Как и в предыдущей практике, в теге <head> мы заранее подключили файл сброса стилей (на этот раз Reset.css вместо Normalize) и основную таблицу стилей (пока что пустую), а также шрифт Google Fonts. Дополнительно мы добавили еще одну таблицу стилей lightbox.min.css, а в конце документа — скрипт lightbox-plus-jquery.min.js. Зачем нужны эти два файла, мы скажем позже.

Загрузить архив RAR

Создание фотогалереи

Изучите структуру HTML-страницы. В теле документа расположен блок-контейнер, в котором есть заголовок <h2> и основной блок <div> с идентификатором #gallery. Внутри блока галереи находится девять HTML5-тегов <figure> с классом .photo, каждый из которых содержит тег <img> с миниатюрой изображения и тег <figcaption> с подписью к фото. Кроме этого, каждое изображение обернуто в тег <a>, который содержит ссылку на соответствующий полноразмерный графический файл.

Перед началом работы хотелось бы сразу упомянуть о нескольких моментах:

А пока что просмотрите веб-страницу gallery.html в браузере. Вот эту разметку, пока что весьма невзрачную и скучную, нам сегодня и предстоит превратить в красивую фотогалерею. Поехали!

1. Разработка адаптивной сетки

Первое, с чего мы начнем, это создание сетки нашей галереи. Сетка является своего рода каркасом, определяющим расположение элементов на веб-странице. Ширина блока-контейнера будет иметь максимальную ширину 960 пикселей, а миниатюры будут выстраиваться в три столбца одинаковой ширины (помните, что мы опираемся на макет). Каждая сторона миниатюры будет иметь внутренний отступ в размере 10 пикселей.

Основываясь на словах выше, запишем первый стиль в файл style.css:


 .container {
 width: 100%; /* ширина блока-контейнера */
 max-width: 960px; /* максимальная ширина контейнера */
 margin: 0 auto; /* этот стиль центрирует контейнер */
 }
 .photo {
 float: left; /* говорим элементам выстраиваться один за другим */
 width: 33.333333%; /* устанавливаем ширину элемента */
 padding: 10px; /* добавляем отступы с каждой стороны */
 box-sizing: border-box; /* меняем способ вычисления ширины */
 }
 

Обновив страницу в браузере, вы увидите первые изменения. Миниатюры уже выстроились плиткой по три в ряд. Возможно, вы хотите узнать, почему мы указали такое странное и дробное число для ширины элемента? Всё весьма просто: нам нужно, чтобы в строке помещалось три миниатюры, которые занимали бы отведенное место по максимуму (все 100% ширины контейнера). Мы делим 100 на 3 и получаем число 33 и 3 в периоде. Округление числа до 33.333333 в нашей ситуации приводит к тому, что ширина миниатюры становится 319.98 пикселей. 319.98 × 3 = 959.94, что практически совпадает с шириной контейнера (к сожалению, совсем без погрешностей обойтись нельзя, когда речь идет о дробных числах в CSS).

Проверим адаптивность нашей сетки. Измените ширину окна браузера несколько раз и понаблюдайте за поведением элементов. При ширине менее 977 пикселей элементы начинают некорректно себя вести. Это происходит потому, что изображения миниатюр не подстраиваются под ширину контейнера. Добавьте следующий стиль для обеспечения адаптивности картинок:


 .photo img {
 display: block;
 max-width: 100%;
 height: auto;
 }
 

Теперь всё работает так, как надо, и даже на небольших телефонах с шириной экрана 320 пикселей наша галерея весьма удобна в использовании и красиво выглядит.

2. Оформление миниатюр

Согласно макету, каждая миниатюра должна быть обрамлена в рамку светло-серого цвета. Ширина рамки с каждой стороны составляет 10 пикселей. Реализовать эту рамку можно двумя способами, и визуально они ничем не будут отличаться. Мы покажем оба способа.

Способ I: свойство border

Первый способ — создать рамку нужного цвета и ширины для каждого тега <img>.
Добавьте этот код к селектору .photo img:


 border: 10px solid #eee;
 box-sizing: border-box;
 

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

Обновите страницу в браузере и запомните результат.
 

Способ II: свойства background-color и padding

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


 padding: 10px;
 background-color: #eee;
 box-sizing: border-box;
 

Сохраните изменения и обновите веб-страницу. Заметили ли вы визуальные изменения? Оба способа приводят к одинаковому внешнему результату, но у них есть отличия в другом.

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

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

Стиль при наведении

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

Для улучшения юзабилити (удобства использования) сайта принято добавлять дополнительные эффекты к активным элементам веб-страницы. Например, все мы привыкли к тому, что при наведении курсора на ссылку стандартная стрелка меняется на pointer — курсор в виде руки. Таким образом мы понимаем, что элемент кликабелен и клик по нему приведет к какому-то событию.

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

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

Запишем стиль для псевдокласса .photo a:hover:


 .photo a:hover {
 opacity: 0.5;
 }
 

А также заставим тег <a> вести себя как блок, иначе мы не увидим, как предыдущий код срабатывает на миниатюре:


 .photo a {
 display: block;
 }
 

Теперь, когда вы сохраните таблицу стилей, обновите страницу в браузере и наведете курсор на любую из фотографий, то увидите, что она стала полупрозрачной. За это поведение отвечает свойство opacity, чье значение может варьироваться от 0 (полная прозрачность) до 1 (полная непрозрачность), включая дробные числа, устанавливающие полупрозрачность. Уберите курсор, и фото вернется к своему первоначальному виду (т. е. к значению по умолчанию, а именно opacity: 1).

Займемся добавлением иконки глаза. Для этого нам понадобится задействовать псевдоэлемент :after. Добавьте следующие стили в вашу таблицу, после чего мы объясним, зачем нужен каждый из них:


 .photo a:after {
 content: '';
 background: transparent url(../img/icons/eye-icon.png) no-repeat center;
 width: 52px;
 height: 35px;
 position: absolute;
 margin: auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 visibility: hidden;
 }
 

Помимо этого допишите свойство position: relative; к селектору .photo a.

Итак, разберемся с вышенаписанным кодом. Обычно псевдоэлемент :after добавляется к элементу для того, чтобы вывести нужный текст после его содержимого. Этот текст добавляется через свойство content. Веб-разработчики используют возможности :after для вывода дополнительных графических элементов. В этом случае значение свойства content остается пустым, а нужное изображение добавляется с помощью свойства background. Именно это мы и сделали по отношению к псевдоэлементу .photo a:after, добавив иконку глаза как фоновый рисунок.

Но после проделывания этих шагов вы еще не увидите никакого изображения. Чтобы оно показалось, мы добавляем ширину и высоту элемента, а также позиционируем его (позже эта тема будет рассматриваться более детально). Мы установили размеры, идентичные размерам самой иконки (52×35 пикселей) и задали свойство position: absolute.

Иконка уже видна, однако она расположена не по центру миниатюры. Чтобы иметь возможность позиционировать иконку относительно элемента .photo a, мы добавили этому элементу свойство position: relative. Повторимся, что со свойством position мы немного забегаем вперед, поэтому пока что вы можете просто скопировать этот код и наблюдать, что получается.

Следующим шагом будет центрирование иконки по вертикали и горизонтали. Элемент со стилем position: absolute и четко определенными размерами можно легко центрировать, указав для свойств top, bottom, left и right значение 0, а для свойства margin — значение auto.

Последнее, что осталось разобрать — это свойство visibility: hidden. Оно отвечает за видимость/невидимость элемента. Его значение hidden можно сравнить с плащом-невидимкой — элемент становится невидимым, но при этом находится на странице и занимает место.

Зачем мы скрыли псевдоэлемент с иконкой? Чтобы делать его видимым только при наведении курсора на ссылку-миниатюру. И для этого мы снова обратимся к псевдоклассу :hover. Запишем следующий код:


 .photo:hover > a:after {
 visibility: visible;
 }
 

Этот на первый взгляд странный селектор сообщает браузеру, что при наведении курсора на элемент .photo необходимо применить стиль к псевдоэлементу :after тега <a>, являющегося дочерним именно для .photo. Сам стиль visibility: visible означает, что иконка глаза становится видимой.

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

3. Стилизация подписей

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


 .photo figcaption {
 font-family: 'Open Sans', sans-serif;
 color: #999999;
 text-align: center;
 margin-top: 20px;
 }
 

4. Финальные штрихи

Мы еще не стилизовали заголовок над галереей. Давайте сделаем это:


 h2 {
 font-size: 36px;
 text-transform: uppercase;
 color: #cccccc;
 text-align: center;
 margin: 30px 0;
 }
 

Чтобы не дописывать свойство font-family к каждому элементу, будет лучше задать его для всего тега <body>, после чего стереть эту строку из стиля для .photo figcaption — она там теперь лишняя:


 body {
 font-family: 'Open Sans', sans-serif;
 }
 

А чтобы сам блок галереи не упирался в низ веб-страницы, добавим ему небольшой отступ снизу:


 #gallery {
 margin-bottom: 50px;
 }
 

Обновим страницу и проверим результат. Но что это? Отступ снизу не появился. И если проверить высоту блока #gallery, мы увидим, что она равна нулю. Как такое может быть, если этот блок не пустой, а внутри него находятся миниатюры? Ответ следующий: свойство float исключает элемент из нормального потока. Поэтому, когда дочерним элементам задано обтекание float, родительский элемент сжимается по высоте, словно игнорируя присутствие float-элементов. Высота родителя становится равной нулю, либо, если внутри находятся дочерние элементы без обтекания, высота родителя приравнивается к высоте этих элементов. Отключить игнорирование float-элементов родителем можно с помощью следующего стиля:


 #gallery:after { 
 content: '';
 display: block; 
 height: 0; 
 clear: both;
 }
 

Это один из нескольких CSS-«хаков», позволяющих решить проблему исчезнувшей высоты контейнера. Немного позже мы еще вернемся к обсуждению этой проблемы и изучим ее более подробно. А пока что сохраните изменения в таблице стилей и обновите веб-страницу. Добавленный нами нижний отступ в 60 пикселей теперь находится там, где и требовалось.

5. Подключение плагина для всплывающих окон

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

Плагин Lightbox, работающий на базе JavaScript-библиотеки jQuery, используется для наложения изображений поверх текущей страницы. Это удобный инструмент, который работает в любом современном браузере.

В начале урока мы уже сказали, что подключили необходимый скрипт и таблицу стилей к нашему HTML-документу. Вам останется лишь инициализировать его, добавив атрибут data-lightbox="roadtrip" к каждому тегу <a>, который ссылается на изображение. Этот код говорит плагину, что ссылку нужно открыть во всплывающем окне, а также добавить возможность переключаться между фотографиями, используя боковые стрелки.

Итак, продублируйте атрибут для каждой из девяти ссылок нашей галереи:


 <a href="img/originals/img-01.jpg" data-lightbox="roadtrip">
 <img src="img/img-01-min.jpg" alt="Eagle" />
 </a>
 

Затем сохраните изменения в документе и просмотрите его в браузере. Согласитесь, что такой вариант просмотра фотографий гораздо более удобен и современен! Переключайте фотографии стрелками, не закрывая всплывающее окно. Понаблюдайте за тем, как окно автоматически изменяет свои размеры, подстраиваясь под размеры изображения.

При желании вы можете сделать так, чтобы плагин отображал в открытом окне и подпись к фотографии. Для этого добавьте к ссылке еще один атрибут — data-title="", а внутрь его кавычек поместите текст подписи, скопировав из тега <figcaption>:


 <a href="img/originals/img-01.jpg" data-lightbox="roadtrip" data-title="Eagle">
 <img src="img/img-01-min.jpg" alt="Eagle" />
 </a>
 

Повторите эти действия для остальных ссылок и проверьте результат.

Заключение

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

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

Смотреть демо

 


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

Как создать галерею в WordPress всего за несколько минут

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

В этой статье мы…

К тому времени, как вы закончите читать, вы будете готовы начать создавать свои собственные галереи в WordPress.

Как создать галерею в WordPress

Вот пример того, что вы можете создать, используя основные функции галереи WordPress:

Готовы начать? Все, что вам нужно сделать, это перейти в обычный редактор WordPress, создав или отредактировав фрагмент контента:

Затем нажмите кнопку Добавить медиа , как если бы вы обычно вставляли одно изображение.

В левом меню выберите Создать галерею . Затем вы можете выбрать существующие изображения из своей библиотеки мультимедиа или перейти на вкладку Загрузить файлы для загрузки новых изображений:

Затем выберите все изображения, которые вы хотите отобразить в своей галерее, и нажмите Создать новая галерея в правом нижнем углу.

Редактировать галерею

Перед тем, как вставить новую галерею на страницу или в сообщение WordPress, у вас есть возможность отредактировать ее.

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

В разделе НАСТРОЙКИ ГАЛЕРЕИ у вас также есть несколько различных вариантов настройки. Здесь вы можете

Щелкнув каждое отдельное изображение, вы также можете добавить свойства изображения.

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

Если вы хотите внести какие-либо изменения в свою галерею, щелкните ее прямо в редакторе. Затем щелкните значок карандаша , и вы вернетесь на страницу Edit Gallery .

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

Использование Jetpack для улучшения ваших галерей

Хотя создать галерею в WordPress можно быстро и легко, параметры и параметры отображения довольно ограничены. К счастью, популярный плагин Jetpack содержит несколько подходящих модулей, которые помогут вам добавить «вау» в ваши галереи.

Под капотом Jetpack работает как любой другой плагин WordPress. Чтобы использовать его, вам сначала необходимо установить и активировать его (вот как). Кроме того, вот наше руководство по некоторым из наиболее полезных функций, которые вы найдете в Jetpack (помимо того, что я описываю ниже).

Итак, давайте посмотрим, что предлагает Jetpack с точки зрения создания галереи в WordPress:

Image CDN

Image CDN, ранее известный как Photon, является полезным модулем для активации, если вы показываете большое количество изображений на своем компьютере. Сайт WordPress. Этот модуль предоставляет услуги ускорения и редактирования изображений для всех веб-сайтов, подключенных к Jetpack.

После того, как вы включите Image CDN, изображения вашего сайта будут динамически загружаться с серверов WordPress.com.Использование Image CDN снизит нагрузку на ваш хост. Это также означает, что изображения будут загружаться быстрее, улучшая работу пользователей на вашем сайте.

Чтобы активировать модуль Image CDN, выберите Jetpack> Настройки в меню WordPress. Затем на вкладке Writing прокрутите страницу вниз, пока не дойдете до Media .

Теперь переключите на кнопку рядом с Ускорить изображения и фотографии .

Важно отметить, что вы должны включить Image CDN, если вы хотите отображать изображения в мозаичных галереях .Давайте узнаем о мозаичных галереях дальше…

мозаичные галереи

Модуль мозаичных галерей позволит вам отображать галереи в трех разных стилях:

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

Чтобы получить доступ к функции мозаичной галереи, сначала вам необходимо активировать Image CDN (как указано выше).Затем, когда вы повторно откроете страницу Edit Gallery в медиа-библиотеке WordPress, вы обнаружите, что в меню GALLERY SETTINGS были добавлены дополнительные параметры.

Попробуйте различные варианты мозаичной галереи, предварительно просмотрев их на внешнем интерфейсе вашего сайта. Вот предварительный просмотр галереи Tiled Mosaic

Когда вы довольны своей галереей, Опубликуйте страницу.

Carousel

Другая функция Jetpack, которая поможет улучшить внешний вид любой галереи WordPress, - это Carousel.С помощью этого модуля любая галерея WordPress, встроенная в ваш сайт, будет запускаться с использованием полноэкранного эффекта лайтбокса, как показано ниже:

Чтобы активировать карусель, просто выберите Jetpack> Настройки в меню WordPress. Затем на вкладке Writing прокрутите вниз до Media . Здесь поверните на , кнопку рядом с Отображать изображения и галереи в великолепном полноэкранном режиме просмотра .

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

Плагины галереи WordPress

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

Вам также следует ознакомиться с нашим обзором 6 лучших плагинов WordPress для лайтбоксов.

Заключительные мысли о том, как создать галерею в WordPress

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

Есть вопрос, как создать галерею в WordPress? Пожалуйста, задавайте вопросы в комментариях ниже…

Бесплатное руководство

5 основных советов по ускорению
Ваш сайт WordPress

Сократите время загрузки даже на 50-80%
, просто следуя простым советам.
.

Как создать галерею портфолио


Узнайте, как создать адаптивную сетку галереи портфолио с помощью CSS.


Портфолио Галерея

Узнайте, как создать адаптивную галерею портфолио, которая может варьироваться между 4 столбцами, 2 столбцами и столбцами полной ширины в зависимости от ширины экрана:

Попробуйте сами »


Как создать сайт-портфолио

Шаг 1) Добавьте HTML:

Пример

MYLOGO.COM



ПОРТФОЛИО


Измените размер браузера окно, чтобы увидеть отзывчивый эффект.





Горы

Моя работа


Lorem ipsum ..






Lights

Мой Работа


Lorem ipsum ..






Природа

Моя Работа


Lorem ipsum ..






Горы

Мой Работа


Lorem ipsum ..





Bear

Другая работа


Lorem ipsum ..





Шаг 2) Добавьте CSS:

Пример

* {
размер коробки: рамка-рамка;
}

кузов {
цвет фона: # f1f1f1;
отступ: 20 пикселей;
семейство шрифтов: Arial;
}

/ * Центр сайт * /
.основной {
max-width: 1000 пикселей;
маржа: авто;
}

h2 {
размер шрифта: 50 пикселей;
разрыв слова: разбить все;
}

. Ряд {
маржа: 8px -16px;
}

/ * Добавить заполнение МЕЖДУ столбцами (если вы хотите) * /
.row,
.row> .column {
отступ: 8 пикселей;
}

/ * Создайте четыре равных столбца, плавает рядом друг с другом * /
.column {
float: left;
ширина: 25%;
}

/ * Очистить числа с плавающей запятой после строк * /
.строка: после {
content: "";
дисплей: стол;
ясно: оба;
}

/ * Содержание * /
.content {
цвет фона: белый;
отступ: 10 пикселей;
}

/ * Адаптивный макет - создает макет из двух столбцов вместо четырех * /
@media screen и (max-width: 900px) {
. Столбец {
ширина: 50%;
}
}

/ * Адаптивный макет: два столбца накладываются друг на друга. вместо рядом друг с другом * /
@media screen и (max-width: 600px) {
.столбец {
ширина: 100%;
}
}

Попробуйте сами »

Совет: Также ознакомьтесь с галереей портфолио с фильтрацией



.

Как сделать страницу домашней страницей - Учебники по WordPress для начинающих

Вы можете легко превратить свой блог в веб-сайт со статической домашней страницей, на которую люди будут заходить каждый раз, когда они приходят. Объедините домашнюю страницу с другими статическими страницами и некоторыми настраиваемыми меню, чтобы помочь посетителям сориентироваться, и прежде чем вы сможете сказать «Я вам это сказал!» у вас есть сайт.


Создайте свою домашнюю страницу

Начните с создания страницы, которую вы хотите использовать в качестве домашней. Перейдите в Мои сайты → Страницы → Добавить .Назовите это «Дом». Пока не беспокойтесь об этом - мы только настраиваем ваш сайт здесь. Если хотите, вставьте немного текста-заполнителя.

Теперь создайте вторую пустую страницу, снова зайдя в Мои сайты → Страницы → Добавить и назовите ее примерно так: «Новости», «Блог» или «Сообщения» - имя, которое поможет вам запомнить, что это это страница, на которой будут появляться ваши сообщения.

Чтобы назначить статическую домашнюю страницу, перейдите в Мои сайты → Настроить → Настройки домашней страницы :

Затем в разделе На главной странице отображается , выберите Статическая страница .Затем щелкните раскрывающийся список Домашняя страница и выберите «Домашнюю» страницу, которую вы создали в качестве статической домашней страницы:

Затем в раскрывающемся списке страниц сообщений выберите страницу «Сообщения», которую вы создали. (Здесь будут появляться ваши новые сообщения в блоге, если вы решите писать сообщения для своего сайта.)

Наконец, нажмите Опубликовать , чтобы изменения вступили в силу.

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


Сделайте свою домашнюю страницу красивой

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


Сделайте так, чтобы ваша домашняя страница работала на вас

Если вы хотите, чтобы ваша домашняя страница действительно служила вашим интересам, подумайте о том, чтобы включить:


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

.

Как создать сайт


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.


Создание веб-сайта с нуля


A «Эскизный план»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Нижний колонтитул


Первый шаг - базовая HTML-страница

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

Пример




Название страницы



кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт


Веб-сайт, созданный мной.


Попробуй сам "

Объяснение примера