Flamio.ru

Работа и деньги
12 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Сайт из 3 страниц

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

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

  1. Для этого понадобится готовый дизайн сайта собственного производства или скачанный из сети psd исходник. Его нужно раскроить для верстки html.
  2. Блокнот, а именно NotePad++. Его можно скачать с официально сайта.
  3. Файл index.html. Его можно создать в любой удобной папке на компьютере. Но лучше выдели отдельную папку для своего сайта и размести его там. У меня это папка c:siteindex.html
  4. Файл c:sitestyle.css. Это файл стилей, зачем он нужен станет понятно позже.
  5. Папка c:siteimages. В эту папку нужно поместить все изображения нужные для будущего сайта.
  6. Купить хостинг и домен если нужно сайт выложить в интернете

Для удобства я сделал архив с изображениями и уже готовыми пустыми файлами index.html и style.css. Скачай и распакуй архив в нужную тебе папку.

Для работы сайта в сети необходим веб-сервер. Сервер при обращении к домену или папке сайта без указания конкретного файла будет искать в ней index.html или index.php если не найдет отобразит список файлов папки.

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

Теперь нужно открыть файл index и style в NotePad++

Структура html документа

Скопируй код в файл index.html

Теперь открой его в браузере, должно получится так:

В кратце опишу что значат эти теги. Если хочешь подробнее разобраться то по googl-и как говорится информации на эту тему море.

Указываем браузеру по какому стандарту нужно отображать страницу:

Тег html говорит о том где начинается и заканчивается html документ

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

Тег body содержит разметку страницы, содержимое этого тега видят посетители сайта.

Верстка или создание сайта на html

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

Итак что будем верстать:

Фон и основной каркас сайта

Замени содержимое своего файла index.html на следующее:

И добавь в style.css такой код:

Обнови страницу с сайтом в браузере (F5), должно получится так:

Шапка сайта

Добавьте в тег div с идентификатором basic следующий код:

Что бы получилось следующее:

И добавляем в файл css строки:

Верхнее меню сайта

Что бы на нашем html сайте появилось навигационное меню, которое изображено в макете добавить в index.html после:

Что бы получилось так:

А в файл style.css:

Теперь сайт имеет логотип телефон и меню при наведении на которое меняется фон:

Левое меню и контент

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

Файл index.html будет выглядеть вот так:

И в конец файла css копируем:

Если все сделано правильно получится сайт как на картинке ниже:

Подвал сайта

Теперь весь файл index.html выглядит вот так:

В файл css добавляем код в самый низ:

Теперь весь файл style.css выглядит следующим образом:

А сам сайт вот так:

Другие страницы сайта и ссылки меню

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

Названия страниц должны быть уникальными и состоять из латинских символв. Я просто перевел названия пунктов меню на транслит.

  • o-nas.html — О нас
  • assortiment.html — Ассортимент
  • otzivi.html — Отзывы
  • zabronirovat-stolik.html — Забронировать столик
  • nashi-klienty.html — Наши клиенты
  • kontakty.html — Контакты

То же самое нужно сделать и с левым меню.

  • kofe-ayrish.html — Кофе Айриш
  • kofe-amerikano.html — Кофе Американо
  • kofe-glyase.html — Кофе Глясе
  • kofe-dippio.html — Кофе Диппио
  • kofe-kapuchino.html — Кофе Капучино
  • kofe-kon-panna.html — Кофе Кон Панна
  • kofe-koretto.html — Кофе Коретто
  • kofe-latte.html — Кофе Латте
  • kofe-lungo.html — Кофе Лунго

Теперь открываем index.html в NotePad++ и добавляем нужные ссылки соответствующему меню, что бы получилось так:

Теперь жми «Сохранить» потом «Файл > Сохранить как» и сохраняй для каждой ссылки файл с соответствующим именем в папке с файлами сайта. Вот что получилось у меня:

Все сайт готов. Осталось только поменять в каждой странице контент.

У такого сайта не смотря на его простоту есть очень большой недостаток. Что бы поменять один пункт меню или элемент дизайна придется это делать это в каждом сайте. Когда страниц больше 10 начинается страшная путаница при его обслуживании. Так что создание сайта html в блокноте советую делать только для очень маленьких сайтов или одно-страничных LandingPage. А для полноценных сайтов осваивать CMS (они не так сложны как кажется).

Сайт из 3 страниц

Готовые веб-сайты на базе Weblium: включены настройка, хостинг и доменное имя.

MotoCMS конструктор сайтов

Новый drag-and-drop конструктор сайтов от MotoCMS с хостингом, бесплатным доменном и 24/7 сапортом.

  • WordPress
    шаблоны 2152

Три причины использовать вордпресс: простота, надежность, скорость

Elementor маркетплейс 624

Новинка!! Шаблоны, плагины и темы для настоящих поклонников Elementor

Joomla
шаблоны 1173

Лучший выбор для пользователей с опытом создания сайтов!

Moto CMS 3
шаблоны 807

Система управления сайтами для новичков.

Drupal
шаблоны 357

В умелых руках Drupal может все!

MotoCMS HTML
шаблоны 1772

Мощная админка с функциональными шаблонами для пользователей без технических навыков.

  • Адаптивные
    шаблоны 10578

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

Посадочные страницы 648

Шаблоны, которые помогут превратить посетителей в клиентов!

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

HTML5
шаблоны 2512

Идеальные шаблоны по стандартам HTML5. Крутой дизайн и чистый код!

Unbounce
шаблоны 44

Приносящие клиентов Unbounce шаблоны. Лендинги для профессионалов.

Читать еще:  Blogger создать сайт

Шаблоны
фотогалерей 217

Идеальное сочетание простоты и возможностей админки со стильным дизайном.

Шаблоны email рассылок 203

Адаптивные письма с современным дизайном значительно повысят эффективность ваших рассылок.

Muse
шаблоны 174

Создайте функциональный кросс-браузерный сайт на основе решения от Adobe.

Специальные страницы 21

Лучшие шаблоны специальных страниц от TemplateMonster! Теперь вам не придется нанимать профессинальных разработчиков для дизайна и создания отдельных страниц как Страница 404, Вскоре и другие.

Найдите лучшие eBay шаблоны, чтобы увеличить прибыль вашего интернет-магазина на базе eBay

Шаблоны для админок 57

Шанс для контрольных панелей выглядеть хорошо! Стильные темы на основе Bootstrap.

Шаблоны
приложений 12

Лучшие шаблоны приложений на TemplateMonster! Теперь вам не нужно нанимать профессиональных разработчиков, чтобы создать мобильное приложение для сайта

  • WooCommerce
    темы 620

Готовые шаблоны, что бы добавить магазин на ваш WordPress сайт

Shopify
шаблоны 618

Простая e-commerce платформа для тех, кто не хочет задумываться об администрировании сайта

PrestaShop
шаблоны 700

Дружественная платформа с быстрой установкой и простым управлением

Magento
шаблоны 494

Надежные и масштабируемые интернет-магазины для профессионалов

OpenCart
шаблоны 759

Шаблоны для магазинов, которым нужен задел для роста

MotoCMS
магазины 130

Адаптивные шаблоны с Drag&Drop редактором позволяют создавать интернет-магазины еще проще.

BigCommerce шаблоны 8

Премиум BigCommerce шаблоны для интернет-магазинов. Наслаждайтесь высокой функциональностью и эффективностью шаблонов

VirtueMart
шаблоны 220

Гибкий плагин для создания интенет-магазина на Joomla. Идеален для мелкого и среднего бизнеса.

ZenCart
шаблоны 224

Интернет магазины с огромными маркетинговыми возможностями

Шаблоны X-Cart 17

Купите премиум шаблон X-Cart, чтобы быстро и легко создать надежный проект электронной коммерции! Получите полностью адаптивный дизайн и высокую производительность шаблонов

  • WordPress
    плагины 40

Гарантированный способ расширить функциональность вашего WordPress сайта.

PrestaShop
модули 30

Улучшите функциональность вашего магазина с помощью удобных модулей для Prestashop.

Лучшие JavaScript и jQuery плагины от TemplateMonster. Сделайте ваш сайт более интерактивным с помощью дополнительных плагинов.

  • PowerPoint
    презентации 1261

Шаблоны для идеальной визуализации любой информации на презентации

Шаблоны
Keynote 326

Шаблоны Keynote — это профессионально разработанные шаблоны, на основе которых вы можете создать свою презентацию

Шаблоны логотипов 3467

Логотип является очень важной составляющей корпоративного дизайна. Шаблоны логотипов – продукты, созданные в Adobe Photoshop, Adobe Illustrator или Corel Draw форматах

PSD
шаблоны 3316

Многофункциональные шаблоны, кототые содержат исключительно графические файлы

Шаблоны
резюме 586

Лучшие шаблоны резюме для печати на TemplateMonster! Выберите подходящий дизайн и расскажите о своем опыте профессионально

Шаблоны сертификатов 81

Лучшие шаблоны сертификатов от TemplateMonster. Вы найдете множество разных дизайнов сертификатов для любой сферы

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

Элементы инфографики 22

Лучшие элементы для инфографики на TemplateMonster. Используйте их, чтобы улучить свои проекты, статистику, публикации в блоге и прочее.

Универсальные шрифты для Photoshop и Illustrator в формате TTF (TrueType).

Мокапы продуктов 82

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

Лучшие наборы продуктов от различных авторов на TemplateMonster. Это категория, которую вы так ждали. Бандлы включают шаблоны, изображения, иконки, мокапы, шрифты, баннеры для рекламы и многое другое!

Элементы интерфейса 25

Купите набор эелементов интерфейса на TemplateMonster, чтобы оживить свой сайт.

Социальные сети 85

Лучшие наборы шаблонов для социальных сететй от разных поставщиков TemplateMonster. Найдите больше шаблонов для постов в Instagram, обложек для Facebook, Pinterest и YouTube каналов, а также много других

Шаблоны
видео 240

Голливудское качество видео на любой вкус!

Анимированные баннеры 61

Лучшие Анимированные баннеры от TemplateMonster. продвигайте свой сайт или зарабатывайте на рекламе. В нашей коллекции вы точно найдете подходящий баннер

Фирменный
стиль 6090

Шаблоны фирменного стиля включают в себя логотип, фирменный бланк, дизайны визиток

Наборы иконок 170

Наборы иконок включают 10 тематических иконок. Все они могут редактироваться в Adobe Photoshop, Adobe Illustrator или Corel Draw.

Коллекция лучших паттернов только на TemplateMonster

Премиум Sketch шаблоны только на TemplateMonster

Знания в формате 4 и 5

Меню навигации

Пользовательские ссылки

Информация о пользователе

Вы здесь » Знания в формате 4 и 5 » 11 класс (Семакин И.Г.) » П/р № 3.7* Интернет: создание Web-сайта на языке HTML

П/р № 3.7* Интернет: создание Web-сайта на языке HTML

Сообщений 1 страница 1 из 1

Поделиться12012-10-31 22:02:16

  • Автор: Евгений Александрович
  • Администратор
  • Зарегистрирован: 2012-02-01
  • Приглашений: 0
  • Сообщений: 468
  • Провел на форуме:
    25 дней 10 часов
  • Последний визит:
    Вчера 07:08:16

Цель работы: освоение приемов создания Web-страниц и Web-сайтов на языке HTML: знакомство с элементами HTML и структурой HTML-документа; управление форматами текста и шрифтами; организация гиперсвязей между документами.

Используемое програмниое обеспечение: текстовый редактор «Блокнот».

Справочная информация

Структура HTML-документа. Существует много различных инструментальных средств для создания Web-страниц. Для работы с ними можно ничего не знать о языке разметки гипертекста — HTML. Однако любой HTML-редактор на основе создаваемой визуальной модели документа строит в памяти компьютера код страницы с использованием команд этого языка. Таким образом, независимо от способа создания, основа каждой Web-страницы — язык HTML. Документ, который написан на этом языке, представляет собой обычный текстовый файл в формате ASCII, в который вставлены дескрипторы, или тэги.
Файлы, содержащие информацию на языке HTML, обычно имеют расширение htm или html. Они могут создаваться либо с помощью простейших текстовых редакторов (например, «Блокнота»), либо с помощью специальных HTML-редакторов. Основной файл каждого каталога обычно имеет имя index. Если при загрузке страницы в адресе не указывать имя файла, то обычно будет производиться поиск.
Тэги (флаги, дескрипторы, контейнеры) — это специальные кодовые слова, определяющие внешний вид текста и графики, выводимой на экран, и формирующие связи с другими web-сайтами и ресурсами Интернета.
Тэги представляют собой определенные последовательности символов, заключенные между знаками . Тэги бывают парные и непарные, открывающие и закрывающие. Область действия парного тэга начинается с того места, где стоит открывающий тэг, а кончается там, где стоит закрывающий тэг. Отличительный признак закрывающего дескриптора — символ /.
HTML-документ начинается с тэга и заканчивается тэгом . Между ними располагается то, что будет выводиться на экран
программой просмотра: текст, картинки, видеофрагменты и т. д. Любой HTML-документ состоит из двух частей: заголовка и тела. Кроме того, допускается использование комментариев. Комментарий должен начинаться с . Всё, что располагается между этими тэгами, на экран выводиться не будет. Комментарии помогают лучше разобраться в коде HTML-доку мента.
Таким образом, общая структура HTML-документа имеет вид:

Читать еще:  Шаблоны сайтов html на русском языке

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

Тело документа — это содержимое Web-страницы. Оно располагается между тэгами и . Тэг может содержать ряд атрибутов для глобальных установок, относящихся ко всему документу: цвета гиперссылок, цвет текста, фона, фоновый рисунок и т. д. Некоторые атрибуты тэга :

• аlinк=цвет — цвет загружаемой гиперссылки;
• link=цвет —цвет невыбранной гиперссылки;
• vlink=цвет — цвет посещенной гиперссылки;
• bgcolor=цвет — фоновый цвет страницы;
• background=»имя графического файла» — повторяющаяся фоновая графика. Рисунок, хранящийся в указанном файле, будет размножен по всему экрану и перекроет цвет фона. Можно использовать форматы файлов GIF и JPEG;
• text=цвет — цвет текста;
• topmargin=n — расстояние между верхним краем окна браузера и содержимым страницы (задается в пикселях);
• leftmargin=n — расстояние между левым краем окна браузера и содержимым страницы.

Цвет указывается с помощью либо его имени, либо его шестнадцатеричного кода.
Некоторые цвета:
black — черный (000000);
aqua — бирюзовый (00ffff);
blue — синий (0000ff);
gray — серый (808080);
green — зеленый (008000);
red — красный (ff0000);
white — белый (ffffff);
yellow — желтый (ffff00);
maroon — коричневый (800000);
fuchsia — розовый (ff00ff);
lime — светло-зеленый (008000);
navy — ультрамариновый (000080);
olive — оливковый (808000);
purple — пурпурный (800080);
silver — серебряный (c0c0c0);
teal — темно-зеленый (008080).

Форматирование текста. Шрифты. Тэги форматирования служат для определения внешнего вида текста и задания его расположения на странице.
1)

Значения параметра align:
left — по левому краю;
right — по правому краю;
center — по центру;
justify — по центру.

— выделение абзаца текста.
В отличие от тэга

3) . . . — центрирование всех элементов, расположенных между этими тэгами (текста, таблиц, графики).

4)
— принудительный разрыв строки в месте установки данного тэга.

Это форматирование заголовков. Тэги с номерами 1-3 пригодны для вывода заголовков (большой размер шрифта). Тэги с номерами 4-6 задают размер шрифта, равный или меньший размеру шрифта текущего текста.
По умолчанию текст выводится на экран тем шрифтом, который задан в установках браузера. Для изменения шрифта используется тэг :
. — определение шрифта.
Атрибут face определяет тип шрифта (Arial, Times New Roman, Courier New, Impact и т. д.). По умолчанию текст будет выводиться тем шрифтом, который задан в настройках программы-браузера. То же самое будет происходить, если указанный шрифт не установлен на компьютере. Возможно задание сразу нескольких шрифтов через запятую. Тогда сначала будет искаться первый, в случае его отсутствия — второй и т. д.
size — размер шрифта; может задаваться абсолютным значением в диапазоне от 1 до 7 и относительным (по отношению к базовому значению). При относительном задании необходимо перед числом поставить знак +(увеличение) или — (уменьшение). Рекомендуется использовать относительное значение.
color — цвет; задается так же, как цвет фона.

Для изменения начертания шрифта используются тэги;
1) . . . — полужирный шрифт;
2) . . . — курсив;
3) . . . — подчеркивание;
4) . . . — нижний индекс;
5) . . . — верхний индекс.

Гиперсвязи и гиперссылки. Реализуемые в Интернет-документах ссылки можно разделить на две категории:
1) ссылки на другие позиции внутри того же документа;
2) ссылки на другой документ.

Для задания этих типов гиперсвязей используется один тэг , имеющий следующий вид:

текст или графика

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

Сама метка на экране не отображается. Для организации перехода к меткам документа следует записать следующий HTML-код:

текст или графика

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

Пример
Файл index.htm:

Файл history.htm:

Задание 1
1. Создать Web-сайт «Моя домашняя страница», состоящий из пяти страниц.

Страница 1 должна содержать:
• заголовок;
• четыре гиперссылки: «Обо мне», «Моя семья», «Друзья», «Мои увлечения».

Страницы 2, 3,4 и 5 должны содержать:
• заголовок;
• по 2 два или более отформатированных абзаца текста (один абзац — не менее трех полных строк);
• фотографии (минимум по одной на каждой странице).
Сайт должен содержать информацию о вас, а также ваших родственниках, друзьях, одноклассниках и т. д.

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

2. Протестировать работоспособность сайта в браузере (по возможности в двух различных браузерах).
3. Протестировать работоспособность сайта при выключенной графике.
4. Изменить в настройках браузера шрифт по умолчанию на Courier New, размер 14 и убедиться, что это не повлияло на внешний вид страниц вашего сайта.
5. Разместить созданный сайт на любом бесплатном хостинге (например, на http://www/narod.ru). Проверить его работоспособность.

Задание 2

1. Создать сайт на тему «Времена года», «Животные» или «Природа», состоящий не менее чем из пяти страниц. Перед созданием сайта найти соответствующие вашей теме фотографии (скачать из Интернета, отсканировать или сфотографировать).
Первая страница сайта должна содержать заголовок и графические миниатюры ваших изображений (их уменьшенные копии). Изменение размеров изображений выполнить в Adobe Photoshop, ACDSee или другом графическом приложении, работающем с форматом JPEG. Каждая графическая миниатюра должна являться гиперссылкой на соответствующую страницу сайта (обязательно наличие всплывающих подсказок).

Читать еще:  Создание персонального сайта воспитателя бесплатно

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

2. Протестировать работоспособность сайта в браузере (по возможности в двух различных браузерах).
3. Протестировать работоспособность сайта при выключенной графике.

Задание 3

1. Создать Web-сайт произвольной фирмы, состоящий не менее чем из четырех страниц. Сайт должен содержать страничку новостей, информацию об оказываемых услугах и ценах на них, информацию о сотрудниках фирмы, контактную информацию. Для перемещения по сайту пользователь не должен возвращаться на главную страницу (панель навигации должна присутствовать на всех страницах сайта). Заголовок сайта должен содержать логотип (разработать самостоятельно) и название (в графическом виде). Для этого использовать любой известный вам графический редактор, а затем полученное изображение преобразовать в формат JPEG с помощью Photoshop. Сайт должен быть выдержан в едином дизайнерском стиле (одинаковые шрифты для однотипных элементов, единая цветовая гамма, одинаковое расположение гиперссылок на всех страницах сайта).
2. Протестировать работоспособность сайта в браузере (по возможности в двух различных браузерах).
3. Протестировать работоспособность сайта при выключенной графике.

Задание 4 (конкурсное)

1. Разработать Web-сайт вашего класса (не менее 6-8 страниц).
2. Протестировать Web-сайты ваших одноклассников и отметить слабые стороны каждого сайта.
3. Провести голосование по выбору лучшего сайта класса.
4. Разместить лучший сайт на любом бесплатном хостинге или сервере вашей школы (если таковой имеется).

Готовые макеты блоков для веб-страниц на HTML и CSS

2014-06-25 / Вр:00:49 / просмотров: 116841

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

Итак, существуют резиновые и фиксированные макеты.

Фиксированные макеты – это когда ширина блоков задается в пикселях (px), а это значит, что размер макета сайта будет фиксированным не зависимо от размера экрана.

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

Макет может быть одноколоночным:

Одноколоночные макеты (веб-страницы)

○ Выравниваем блок с контентом по центру экрана.
Пример :

Такое размещение блока будет полезно и интересно для дизайна:

— точки входа на сайт или в админ-панель;

— сообщения об отправленном письме и т. д.

Макет одной колонки:

○ Еще один вариант одноколоночного макета:

Двухколоночные макеты (веб-страницы)

Фиксированные макеты

Частенько в сети интернет встречаются двухколоночные веб-страницы. Это самые распространенные варианты верстки сайтов, так как считаются самыми удобными и для создания. А также они хорошо воспринимаются пользователями. В правой колонке размещается меню, а в левой – контент. Или в правой колонке размещается контент, а в левой – меню.

Двухколоночный макет (слева меню, справа контент):

Двухколоночный макет (слева контент, справа меню):

Примечание: чтобы поменять местами блоки, достаточно поменять значение в строках 30, 33, 41:

(слева контент, справа меню)

float: right; /* Обтекание блока по левому краю */

margin-right: 130px; /* Отступ справа */

clear: right; /* Отменяем действие float */

(слева меню, справа контент)

float: left; /* Обтекание блока по правому краю */

margin-left: 130px; /* Отступ слева */

clear: left; /* Отменяем действие float */

○ Другие варианты фиксированного макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

○ Другие варианты фиксированного макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

Резиновый двухколоночный макет

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

Резиновый двухколоночный макет (слева меню, справа контент):

Резиновый двухколоночный макет (справа меню, слева контент):

Чтобы поменять местами меню с контентом (справа меню, слева контент), достаточно в строке 22 (.s >leftна right :

float: right; /* Обтекание справа */

и в строке 29 (.content) заменить числовое значение 10px 5px 20px 25% на 10px 25% 20px 5px

margin: 10px 25% 20px 5px; /* Значения отступа от правого блока */

○ Другие варианты резинового макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

○ Другие варианты резинового макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

Триколоночные макеты (веб-страницы)

Фиксированный макет в три колонки

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

○ В первой колонке размещается контент, во второй колонке может находиться реклама или новости и в третей колонке меню:

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

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

Резиновый макет в три колонки

○ В первой колонке размещается контент, во второй колонке может находиться реклама или новости и в третьей колонке меню.

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

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

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

Ссылка на основную публикацию
Adblock
detector