О проекте  ::  Контакты  ::  Новости  ::  Разработчики  :: ДЛЯ КЛИЕНТОВ
веб-офис - начало работы

Веб-офис — готовые профессиональные сайты для бизнеса

Здесь Вы можете бесплатно создать сайт и использовать его бесплатно в течение 2-х недель!
Если все нравится, то Вы платите только за техническую поддержку и продолжаете пользоваться сайтом далее.

 
 логин
 пароль

Забыли пароль?
На главную страницуКарта сайтаНаписать письмо

Пользоваться «Веб-офисом» просто!

Руководство пользователя по изменению дизайна сайтов, созданных на новой сетке.


1. Введение

Html — язык вёрстки сайта. Вёрстка системы «Веб-офис» блочная, то есть основана не на таблицах (table), а на дивах (div). Это даёт неограниченные возможности дизайнеру сайта. Все основные части сайта находятся в дивах. К каждому диву добавлен class, значение которого лежит в CSS (в системе «Веб-офис» находится во вкладке «Дизайн» → «Изменить стили»).

Html сайта не доступен для редактирования, это обусловлено наличием системы управления. Зато имея навыки работы с Каскадной Таблицей Стилей (CSS), дизайн сайта можно сделать любой.

Загружать фоны и элементы оформления сайта, для дальнейшего использования в css можно во вкладке «Дизайн» → «Элементы оформления». Загружаемый рисунок должен быть в формате .jpg, .gif, .png. Полученный при загрузке url адрес вставляется в нужное место css.

2. Структура сайта

Всё тело сайта лежит в дивах с классами .body и .body-in. Поэтому для всего фона сайта можно задать две фоновые картинки, по каждой к классу.

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

Основные структурные дивы:
<div class="container top">
<div class="container top-menu">
<div class="container middle">
<div class="container bottom">

В стиле .container заданы стандартные структурные настройки отображения сайта.

Стиль .top отвечает за вид шапки сайта, .top-menu отвечает за отображение верхнего меню, .middle — за центральную часть сайта, .bottom — за нижнюю часть сайта.

У всех вышеперечисленных дивов внутри есть вспомогательные дивы: <div class=" bg-01"> и <div class="bg-02">. По названию bg (от слова background) предназначен для задания фона. Таким образом к каждой структурной части сайта (шапка, верхнее меню, центр, низ) можно задать по 3 фоновых изображения.

У пользователей, подключивших на своем сайте Корзину товаров, появляется дополнительный структурный див <div class="basket">, отвечающий за висящее поверх сайта окошко, отображающее заказы. В исходном варианте оно находится в правом верхнем углу.

Внутри <div class="container top">, <div class="container top-menu"> и <div class="container bottom"> существуют дивы отвечающие за левую часть и правую части. А в <div class="container middle"> находятся дивы отвечающие за левую, центральную и правую часть.

<div class="container top">

<div class="left">

<div class="content">

<div class="container top-menu">

<div class="left">

<div class="content">

<div class="container middle">

<div class="left">

<div class="content">

<div class="right">

<div class="container bottom">

<div class="left">

<div class="content">


Рассмотрим каждую часть

Шапка сайта

<div class="container top">

<div class="left">

<div class="content">


В <div class="left"> находится логотип компании. В <div class="content"> — заголовок (<h2>) и слоган сайта (<div class="slogan">).

Верхнее меню

<div class="container top-menu">

<div class="left">

<div class="content">


В <div class="left"> находятся иконки. В <div class="content"> — непосредственно верхнее меню.

Центральная часть сайта

<div class="container middle">

<div class="left">

<div class="content">

<div class="right">


В центральной части сайта в <div class="left"> находится левое меню <div class="menu"> и баннеры <div class="banner">.
 
В <div class="content"> выводится путь <div class="path">, Заголовок страницы <h1> и основное содержание сайта.
 
Все текстовые блоки в основном содержании сайта выводятся в <div class="st">, могут содержать заголовок <h3>, текст, иллюстрацию и прикреплённый файл <div class="file">.
 
Кроме текстовых блоков в основном содержании сайта может выводится галерея <div class="gallery">. Так же как текстовый блок она имеет заголовок <h3>, а вместо содержания картинки с подписями к ним. Каждая картинка с подписью выводится в <div class="block">. Картинка заключена в <div class="img">, а подпись к ней в <div class="title">.
 
На странице могут выводиться Новости. Выводятся они так же как и текстовые блоки в <div class="st">. Имеют заголовок <h3> и список новостей, каждая новости выводится в <div class="lenta"> и имеет дату <div class="l-data">, название <div class="l-name">, содержание и картинку. Если новостей много, появляется листалка <div class="pages">.
 
Ещё в основном содержании сайта выводится каталог товаров <div class="catalog">. Каждый товар лежит в своём <div class="block"> и имеет картинку <div class="img">, номер <div class="number">, артикул <div class="artikyl">, название <div class="model">, краткое описание <div class="sub"> и цену <div class="money">.
 
На странице могут быть подразделы, разделы не отображающиеся в меню, а находящиеся на странице. Выводятся они в <ul class="podr">.
 
Карта сайта выводится в <div class="st">. Заголовки меню выводятся в <div class="map-title">, пункты меню выводятся в <ul class="map">, второй уровень меню отмечен class="li2", третий —  class="li3".
 
В <div class="right"> находятся блоки-анонсы <div class="blocks">.
Блоки-анонсы состоят из заголовка <div class="name"> и содержания <div class="sub">. В содержании выводится как текст, так и прикреплённая картинка.

Нижняя часть сайта (подвал)

<div class="container bottom">

<div class="left">

<div class="content">


В <div class="left"> находится копирайт. В <div class="content"> — чаще всего пишут адрес компании или авторские права, а так же выводятся баннеры <div class="banner">.

3. Работа над сайтом

Чаще всего к нам поступают вопросы «Как изменить фон?» и «Как изменить цвет текста?»

Background (Фон элемента)

Чтобы сделать фон шапки сайта нужно в css (где его редактировать см.1) найти стиль . top

.top {
background-color: #000;
background-image: url('адрес рисунка при загрузке в элементы управления') background-repeat: repeat-x;
background-position: top left;
}

background-color — цвет фона. Для задания цветов используются числа в шестнадцатеричном коде.

background-image — фоновая картинка.

background-repeat — задает как будет повторяться фоновая картинка.
Возможны значения:
no-repeat — устанавливает фоновое изображение без его повторения.
repeat — фоновое изображение повторяется по горизонтали и вертикали.
repeat-x — фоновый рисунок повторяется только по горизонтали
repeat-y — фоновый рисунок повторяется только по вертикали.

Если повторение не задано, по умолчанию ставится repeat.

background-position — задает положение фоновой картинки внутри элемента.
Возможны значения:
top left = 0% 0% (в левом верхнем углу)
top center = 50% 0% (по центру вверху)
top right = 100% 0% (в правом верхнем углу)
center left = 0% 50% (по левому краю и по центру)
center center = 50% 50% (по центру)
center right = 100% 50% (по правому краю и по центру)
bottom left = 0% 100% (в левом нижнем углу)
bottom center = 50% 100% (по центру внизу)
bottom right = 100% 100% (в правом нижнем углу)

Если положение не задано, по умолчанию ставится top left.

Для фона в шапке сайта можно использовать и <div class="bg-01"> и <div class="bg-02">. Таким образом в шапку сайта, при желании можно отображать три фоновых рисунка.

Аналогичным образом задаётся фоновый рисунок к любому элементу.

Цвет и насыщенность

Цвет текста задается шестнадцатеричным кодом, например цвет слогана в шапке сайта задается в css так:

.slogan {
color: #666;
}

Стандартные цвета в шестнадцатеричном коде можно взять здесь http://www.artlebedev.ru/tools/colors/

Насыщенность шрифта (font-weight) задается словами: bold — полужирное, bolder — жирное, lighter — светлое, normal — нормальное. По умолчанию используется normal.
Слоган серого цвета с полужирным начертанием будет выглядеть так:

.slogan {
color: #666;
font-weight: bold;
}

Чтобы  почувствовать всю свободу в оформлении сайта ознакомьтесь с html и CSS, лучшим вашим помощником будет http://www.htmlbook.ru/

НОВОСТИ

06.05.2016

Адаптивный интернет-магазин «SimfoShop» - новый продукт от компании SimfoSoft

Все новости >>>

О СИСТЕМЕ
РЕГЛАМЕНТ И ЦЕНЫ
СОЗДАННЫЕ САЙТЫ
СОТРУДНИЧЕСТВО
СПРАВОЧНАЯ ИНФОРМАЦИЯ
ТЕХНИЧЕСКАЯ ПОДДЕРЖКА
 
Rambler's Top100 Яндекс.Метрика Индекс цитирования.
© 2000-2017

Создание и поддержка сайта Simfosoft