Меню

Блок настройка css ucoz



Как работать с таблицей стилей? (CSS UcoZ)

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

Заходим в свою панель управления сайтом. Далее идем в Управление дизайном — Таблица стилей (CSS). Теперь вы зашли в саму таблицу, и там много не понятных кодов. Далее вы узнаете, что они делают.

В ней расположены все коды, что отвечают за сам каркас шаблона, он
отвечает за отображение таблиц, тип и цвет шрифта и ссылок и прочих
мелочей.

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

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

/* Module Part Menu */

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

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

/* Entry Manage Table */

Здесь я никогда ничего не меняю, не видел за что он отвечает. Можете его не редактировать.

По названию можно понять, что отвечает за отображение вид комментариев, и мини-чата. можно изменить фон, цвет текста.

/* Comments Form Style */

Отвечает за саму таблицу комментариев. Также можно добавить фон и сменить границы самой таблицы, их цвет и размер.

/* News/Blog Archive Menu */

Буквально вчера разобрался за что отвечает эта часть таблицы. после
обновления системы, можно добавить блок «Архив материалов», после чего
будет доступен блок, с месяцами обновлений на сайте. Пример на главной
моего блога.

/* News/Blog Archive Style */

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

/* News/Blog Calendar Style */

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

Регулирует отображение, функции «опрос» на сайте.

/* User Group Marks */

Здесь можно изменить цвет группы пользователей. Поставить дополнительные иконки.

Осталась часть, которая отвечает за отображение форума. Начинается она с такого текста:

/* General forum Table View */

Регулирует вид блока форума.

Тут
начинается самый сложный момент таблицы. Много блоков и каждый нужно
редактировать отдельно. Рассказать об этом я не смогу, надо вам
научится самому, узнать, где что и тд. Я вам лишь посоветую.
«Если
вы хотите создать свой шаблон, то выбирайте стандартную таблицу css,
которая подходит по цветовой гамме, вам меньше путаться придется. И
быстрее вы его создадите.»

При копирование материалов с сайта необходимо указать активную ссылку источника — Скрипты для uCoz 2013 и Как работать с таблицей стилей? (CSS UcoZ)

Источник

Вёрстка страницы сайта

Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.

Как создать структуру страницы с помощью блоков (блочная вёрстка)

1. Как разбить макет страницы на секции

Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье 1.11. HTML5 семантические элементы.

Стандартная веб-страница содержит следующие секции:

Рис. 1. Основные секции страницы

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

Рис. 2. Основные секции страницы с тегом-контейнером

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

Читайте также:  Msi z77a g43 настройка

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

2. Разметка шапки сайта и позиционирование её элементов

Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега логотип сайта и навигационные ссылки:

Рис. 3. Шапка сайта с добавленными логотипом и ссылками

Разместим логотип слева, а ссылки навигации — с выравниванием по правому краю шапки (для наглядности я добавила элементам белую границу):

Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке Горизонтальное меню для сайта.

Рис. 4. Эффект схлопывания блока-контейнера

Обратите внимание, что после того, как мы применили обтекание, шапка исчезла. Это произошло потому, что плавающие элементы (для которых задано свойство float ) изымаются из нормального потока и родительский контейнер больше не видит их высоту, поэтому и элемент и элемент внутри него с классом .container схлопнулись. Чтобы исправить эту ситуацию, воспользуемся очисткой потока для элемента с классом .container :

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

Рис. 5. Очистка потока

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

Рис. 6. Логотип-картинка

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

Рис. 7. Выравнивание ссылок меню шапки

3. Создание сетки для основной части страницы

Основная часть страницы чаще всего представляет собой сетку из блоков разной ширины. Позиционирование таких блоков осуществляется также с помощью свойства float . Каждую строку блоков обернём дополнительным блоком с классом .row :

Рис. 7. Сетка основной части страницы

Для элемента с классом .row также применим очистку потока:

Чтобы отделить ряды друг от друга, можно добавить нижний внешний отступ:

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

Рис. 8. Разная высота элементов сетки

Высоту блоков можно зафиксировать, указав её явно, например, .row div . Но в этом случае нужно быть уверенным, что при добавлении адаптивности макету содержимое блоков не будет выходить за край блока.

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

Рис. 9. Фоновая подложка

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

4. Разметка подвала страницы

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

Источник

Блок настройка css ucoz

ИСПОЛЬЗОВАНИЕ КОНСТРУКТОРА БЛОКОВ НА САЙТАХ UCOZ

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

Одним из наиболее простых способов настройки сайта размещенного на сервере uCoz является применение конструктора блоков из административной панели на вашем сайте.

Для того чтобы открыть конструктор, войдите на свой сайт как администратор. Это можно сделать через кнопку «Вход» расположенную под названием вашего сайта, либо через блок «Форма входа», который расположен на одной из боковых колонок вашего сайта (в зависимости от выбранного шаблона дизайна сайта их может быть одна или две – левая и правая).

Читайте также:  Настройка аудитории в adwords

В блоке «Форма входа» вы можете выбрать метод входа: «Вход через uID» или «Старая форма входа». Нажав на кнопку «Вход» под названием вашего сайта, вам будет предложена только одна форма входа «Вход через uID». Результат входа будет один и тот же, независимо от формы входа, которую вы выберете. Вы окажетесь на той же странице сайта, на которой вы осуществляли вход, только у вас появится панель управления администратора (админ-бар). (См. Скриншот 1).

Выберите вкладку «Конструктор» и, в открывшемся меню нажмите левой кнопкой мыши (ЛКМ) «Включить конструктор». Не пугайтесь, когда увидите, что ваш сайт преобразился. (См. Скриншот 2).

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

Органы управления конструктором блоков

На скриншоте 2 обозначены доступные органы управления. Во-первых, обратите внимание, что после включения конструктора изменилась содержание меню «Конструктор». Появились пункты: «Сохранить изменения», «Добавить блок +» и «Отключить конструктор». Соответственно, с помощью этих пунктов меню вы можете сохранить изменения, которые вы внесли в блоки конструктора, добавить новый блок, если вам не хватает уже имеющихся, для нормальной работы вашего сайта и отключить конструктор. При чем, если вы отключите конструктор, не сохранив изменения, эти изменения не будут внесены в структуру сайта.

Во-вторых, обратите внимание, что инструмент управления меню (разводной ключ), присутствует только над блоком «Меню сайта». Лично мое мнение, менять меню сайта целесообразней из «Панели администрирования» или, как ее называют «Панели управления».

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

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

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

Нажатием на голубую шестеренку (справа над каждым блоком), вы можете вызвать набор инструментов, с помощью которого вы можете поменять содержание уже имеющегося блока.

Корректировка названия и содержания блоков

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

1. Изменить название блока. Для этого нажмите ЛКМ (левой кнопкой мыши) на названии блока, когда в поле названия появится курсор, вы можете дать этому блоку свое название, ну, например, вместо «Поиск», написать «Поиск на сайте», в общем, то, что отвечает вашим вкусам.

2. Изменить содержание блока. Для этого вам необходимо нажать на синюю шестеренку над блоком, который вы захотели изменить. Перед вами появится окно «Управление содержимым блока». (См. Скриншот 4).

Читайте также:  Sony xperia настройка блютуз

В верхней части открывшегося окна есть три вкладки: «Содержимое», «HTML», «Доступ». Первая – отражает предлагаемое вам меню для выбора содержимого блока, который вы переделываете под свои нужды. Вторая – отражает html-код выбранного вами меню. Ну, и третья – определяет настройки прав доступа к вашему блоку. Поставив определенные галочки при открытой третьей вкладке, вы даете разрешение определенным группам пользователей вашего сайта, которые могут воспользоваться данным блоком, а также определяете модули, для которых этот блок применим, т.е. на какой странице вашего сайта появится данный блок. Ну, к примеру, если один из разделов вашего сайта будет посвящен некрологам о безвременно ушедших, блок «Аудиоплеер», при включении которого будет звучать песня «Атас…» в исполнении группы Любэ (или же марш Мендельсона, в исполнении Большого симфонического), будет неуместным.

3. Сохранить изменения содержания блока.

После того, как вы успешно внесли изменения в блок, если вы хотите, чтобы эти изменения были сохранены, вам необходимо, нажать ЛКМ на вкладке «Конструктор» админ-бара и выбрать пункт меню «Сохранить изменения». (См. Скриншот 2).

P.S. Если вы проводили корректировку блока только в целях тренировки, просто не сохраняйте изменения, перед отключением «Конструктора».

Содержание и возможности утилиты «Управление содержимым блока» (см. Скриншот 4) настолько велики, что для их описания потребуется не одна статья, поэтому я со временем буду описывать ее возможности на конкретных примерах.

Создание нового блока

Рассмотрим создание блока на примере создания блока «Аудиоплеер».

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

1. Войти на сайт как администратор.

2. В админ-баре выбрать вкладку «Конструктор». (С.м. Скриншот2).

3. В открывшемся меню конструктора выбрать меню «Включить конструктор».

4. Снова нажать «Конструктор». Вы увидите, что меню этой вкладки несколько поменялось по сравнению с предыдущим пунктом.

5. Выбрать пункт меню «Добавить блок +». У вас в районе центральной колонки появится новый блок, который так и будет называться. (См. Скриншот 2).

6. С помощью ЛКМ перетащите создаваемый вами блок в левую или правую колонку. (См. Скриншот 3).

7. Как в случае «Корректировка названия и содержания блоков», введите название нового блока в моем случае это «Аудиоплеер» (2 скриншот 4).

8. Настройте новый блок под ваши потребности, нажав шестеренку над этим блоком.

Настройка блока

Для настройки вновь созданного блока (см. Скриншот 4) «аудиоплеер»:

1. На вкладке «Содержание» утилиты «Управление содержимым блока» (1), выберите кнопку «Audio» — 3.

2. В открывшемся окне (Скриншот 5) выберите плеер с плей-листами.

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

4. После того, как вы определились с настройками, нажимаете «выбрать» и перед вами откроется окно загрузки аудио файлов. Не забывайте, что надо выбирать файлы формата mp3.

5. В открывшемся окне (см. скриншот 7), нажимаете «Выбрать». Перед вами откроется окно доступа к файлам вашего компьютера, загружаете те файлы, которые вы хотите загрузить на свой аудиоплеер.

6. Поле того, как вы выбрали файл, нажимаете «Загрузить файл» (скриншот 7), и снова повторяете п.п.4-5, пока не загрузите все необходимые файлы. Но не забывайте а) размер вашего сайта не безграничен; б) существует ограничение по количеству отдельных файлов, которые можно загружать на сайт, так, что файлы любимых песен целесообразно объединять в папки.

7. Как только вы загрузите файлы, смело жмите «Применить» (скриншот 6), «Сохранить изменения» (скриншот 2) и «отключить конструктор» (скриншот 2).

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

Источник

Adblock
detector