Каркас страницы html: HTML5 как сделать правильный каркас? — Хабр Q&A – Подключаем к странице другой каркас — Структура HTML-документа — HTML Academy

Верстка CSS. Создаем каркас страницы из одной колонки с header и footer.

Очень часто при разработки сайтов нужно создать простую страницу, которая может состоять из одной колонки с верхней частью (header), содержимым (content) и нижней частью (footer).

Выглядит это примерно вот так:

08-09-2014 5-38-30

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

Создается такой каркас довольно просто. Давайте попробуем это сделать прямо сейчас.

Если вы будете испытывать трудности в его создании, вы можете изучить два моих базовых курса по технологиям HTML и CSS.

Вот ссылки на них:

Базовые знания HTML c НУЛЯ и за 7 дней.

//webgyry.info/base-html-content

Базовые знания CSS c НУЛЯ и за 8 дней.

//webgyry.info/base-css-for-8-day

Начнем с HTML-кода. Для создания такого каркаса страницы нам понадобятся 3 главных блока div:

<div>
 <p>Область заголовка</p>
</div>
<div>
 <p>Область содержимого</p>
</div>
<div>
 <p>Область нижней части страницы</p>
</div>
Для того, чтобы содержимое можно было выровнять по центру, давайте внутри каждой области добавим еще по одному блоку div.
<div>
<div>
<p>Область заголовка</p>
   </div>
</div>
<div>
<div>
<p>Область содержимого</p>
   </div>
</div>
<div>
<div>
<p>Область нижней части сайта</p>
   </div>
</div>

Теперь можно переходить к настройкам внешнего вида и созданию стилей CSS.

#header {
height:100px;
background:#39F;
color:#fff;
padding-top:10px;
}

#content {
padding-top:20px;
}

#footer {
height: 50px;
padding-top:10px;
background:#CCC;
width: 100%;
}

#header .in_header {
width:800px;
margin:auto;
}
#content .in_content {
width:800px;
margin:auto;
}
#footer .in_footer {
width:800px;
margin:auto;
}

08-09-2014 5-32-02

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

Давайте это сейчас и сделаем.

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

//webgyry.info/footer-to-bottom-page-css

Я лишь добавлю сюда код, который за это отвечает.

* {
margin:0; /*Убираем отступы по краям*/
}
body {
height: 100%;
min-width:900px;
font-family:Cambria, "Times New Roman", serif;
}
html {
position:relative;
min-height:100%;
}

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

#content {
padding-top:20px;
padding-bottom: 100px;
}

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

#footer {
height: 50px;
padding-top:10px;
background:#CCC;
position: absolute;
bottom: 0;
width: 100%;
}

Смотрим, что получилось.

08-09-2014 5-38-30

На мой взгляд довольно не плохо.

Скачать страницу можно здесь.

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

Если что-то не получилось, пишите в комментариях, посмотрим.

Далее. Следующие уроки по CSS.

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

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

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

Директория сайта написанного на чистом HTML

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

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

Сначала зайдём в библиотеку «Документы» на нашем компьютере «Пуск-Компьютер-Документы», и щёлкнув правой кнопкой по окну «Документы», выбираем «Создать», а затем «Папку».

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

Пуск - компьютер - документы

Как только папка появилась с названием «Новая папка» в синем фоне, нажимаем клавишу «Backspace», и тем самым убираем название «Новая папка», а вместо него пишем, к примеру, «site»(сайт), и сохраняем, щёлкнув по нему левой клавишей.

Затем двойным щелчком открываем эту папку, и уже в ней, точно так-же, создаём ещё две — «сontent»(содержание) и «images»(изображения)

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

В папку site мы в дальнейшем загрузим ещё файл index.html (главная страница сайта), в папку content — остальные страницы сайта, а в папку images — картинки.

Можно спроектировать директорию немного по другому. Можно вместо папки «content», создать несколько папок — rubrica-1, rubrica-2, rubrica-3, и так далее.

Вместо rubrica, написать название рубрики, и уже в них складывать статьи, написанные по теме рубрики.

Директория сайта

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

Вот и всё. Для сайта на чистом HTML корневая папка готова. Теперь можно создавать файлы станиц и заполнять ими эту директорию.

Директория сайта написанного на HTML+CSS+PHP

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

Денвер — это программа, включающая в себя Apache, PHP, MySQL, Perl и другие необходимые для веб модули.

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

Как установить Денвер, Я очень подробно показал в статье Установка Денвер

Когда Денвер будет установлен, можно приступить к созданию на нём директории сайта.

Запускаем Денвер, щёлкнув по ярлыку «Start Denwer», который появился на Вашем Рабочем столе, после установки.

Заходим «Пуск — Компьютер», и открываем диск «Z», автоматически создающийся при установке Денвера.

Открываем папку «home».

29

В этой папке я стёр свои сайты, чтоб Вас не путать, а Вам нужно будет создать новую папку и назвать её, допустим, «site» или «site.ru» Можно любое другое название английскими буквами, значения не имеет.

31

Затем, открываем эту пустую папку, и в ней создаём ещё одну — «www». Эту уже по другому называть нельзя. И вот в ней и будет расположена директория Вашего сайта.

Открываем её, и создаём ещё 3 папки:

1. images    — для картинок.
2. style    — для стилей.
3. is    — для скриптов.

И ещё в эту папку нам нужно поместить файл .htaccess.

.htaccess — файл дополнительной конфигурации веб-сервера Apache, входящего в сборку Денвер. Он позволяет задавать дополнительные параметры и разрешения для работы веб-сервера.

Чтобы его создать, нужно открыть «Блокнот» (Пуск — Все программы — Стандартные), или если у Вас уже установлен Notepad++. Затем скопировать и вставить в него следующий код:

AddDefaultCharset utf-8
AddCharset utf-8 *
<IfModule mod_charset.c>
CharsetSourceEnc utf-8
CharsetDefault utf-8
</IfModule>

Затем «Файл — Сохранить как …», и в открывшемся поисковом окне находим папку «www».

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

32

После этого файл появиться в директории.

Всё, корень сайта готов. Можно заполнять его файлами.

33

В папку images будем складывать картинки, в папку style файлы css, а в папку is файлы javascript.

Хоть это и выходит за рамки данной статьи, но желательно проверить, как работает интерпретатор php.

Для этого потребуется редактор файлов Notepad++. Если он у Вас ещё не установлен, то Вам необходимо сначала прочитать статью Руководство по установке и использованию Notepad++, и установить редактор.

Затем открыть новый документ и написать в нём следующий скрипт:

<?php
echo 5;

?>

Далее «Файл — Сохранить как …», находим в поисковике папку «www», называем файл «index.php», и сохраняем.

34

После этого можно зайти в нашу директорию, убедиться в том, что файл «index.php» в ней появился, и перезагрузить Денвер, двойным щелчком по «Restart Denwer».

Как только Денвер перезагрузится, открываем новую вкладку в браузере, и вводим в поисковой строке запрос «site/index.php».

На экране должна появиться цифра 5.

35

Это значит, что Денвер работает нормально, можно продолжать изучать веб-дизайн и веб-программирование, и строить свой сайт, хоть только на html + css, хоть с применением php.

Готовый код для сайтов:

1. На чистом HTML

2. На HTML+CSS

3. На HTML+CSS+PHP

Желаю творческих успехов.

Короткий отдых
Перемена

Иду я как-то утром на учёбу, спокойно иду, не опаздываю.
И тут вдруг понимаю, что рядом одеяло, кошка, подушка, будильник: я на кровати!

Делаем сайт и выкладываем его в интернет < < < В раздел > > > Каркас страницы, теги. Создаём файл.

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

Каркас HTML » Видеокурсы, полезный софт и познавательные компьютерные статьи

Итак, давайте начнем.

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

Весь язык HTML состоит из тегов и их параметров. Что же такое тег? Тег – это элемент языка, который указывает браузеру как отображать тот или иной объект. Например, у нас есть участок текста, который мы хотим видеть в виде абзаца, так вот, что бы браузер выполнил наше желание нужно этот участок заключить в тег <p> этот тег обозначает параграф. Все теги заключаются в галочки, теги бывают парными и не парными, парный тег состоит из открывающегося и закрывающегося тега. Закрывающейся тег тоже заключен в галочки только перед ним ставится обратный слеш. Пример: <p>абзац</p>

Что такое тег мы разобрались теперь давайте создадим каркас нашей будущей страницы. И уже там будем изучать остальные теги и их атрибуты. Итак открываем блокнот и прописываем каркас страницы.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv = «Content-Type» content = «text/html» charset = «windows-1251»>
<title>Тестовая страница</title>
</head>

 

<body>

 

</body>
</html>
1) Строка стандарта
2) Парный тег <html>, говорящий браузеру, что все будет написано на языке HTML.

3) Раздел заголовка документа (<HEAD>)

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

Заголовок страницы (тег <TITLE>)
Используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик.

CSS (Cascading Style Sheets, Каскадные таблицы стилей)
Стили хранят набор элементов форматирования, который применяется к тексту документа, чтобы быстро изменить его внешний вид.

Метатеги (тег <META>)
Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег <META> всего один, он имеет множество параметров, поэтому для его обращения применяется множественное число.

Скрипты
Скриптом традиционно называют программу, которая внедряется в тело веб-страницы и выполняет на ней определенные действия. Распространенным языком программирования для написания скриптов является JavaScript.

4) Тело документа (<BODY>)

Тело документа предназначено для отображения данных на веб-странице, в частности, в теле размещается текст, изображения, ссылки, таблицы, списки и т.д.

Что бы сохранить нашу страницу выберем вкладку файл >> сохранить как >> выбирает ту папку в которой мы хотим сохранить наш документ и присваиваем ему имя index.html

На этом наш первый урок заканчивается.

Возможно, Вам будет полезна эта информация:

  1. Подключение CSS
  2. HTML для начинающих от А до Я – скачать видеокурс бесплатно
  3. Создаем ссылки

Каркас сайта - База знаний uCoz

Инструмент «Каркас сайта» позволяет сгенерировать однородную структуру для всех разделов сайта.

Данная инструкция состоит из следующих частей:

  1. Описание строения каркаса
  2. Обзор редактора каркаса
  3. Действия с каркасом
  4. Установка каркаса

Описание строения каркаса

Чтобы изучить строение каркаса, в панели управления откройте раздел «Дизайн», в меню слева выберите пункт «Каркас сайта» и на открывшейся странице нажмите на ссылку «Описание строения каркаса»:

В левой части вы увидите «Помощь по каркасу сайта», а в правой — пример каркаса:

В каркас могут быть добавлены следующие элементы:

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

Для удобства скопируйте пример каркаса и измените его HTML-код по своему усмотрению.

Обзор редактора каркаса

Редактирование каркаса выполняется в специальном поле:

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

Чтобы добавить на сайт файл, удобно использовать файловый менеджер. Он вызывается нажатием на иконку:

Для добавления в каркас изображений, форм и инструментов, нажмите на значок:

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

Панель может находиться под редактором или в новом окне:

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

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

Появится список шаблонов:

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

Действия с каркасом

С каркасом можно производить следующие действия:

  • Добавить в стандартные. Новый дизайн будет добавлен к стандартным шаблонам. Позже, нажав "Восстановить шаблон" в редакторе шаблонов, вы восстановите его к такому виду.
  • Сохранить. После сохранения каркаса на сервере вы сможете снова использовать его позже. Сохраненный каркас будет доступен после нажатия на «Выбор готового каркаса».

Установка каркаса

Когда работа с каркасом завершена, можно приступить к его установке. Нажмите на кнопку «Сохранить» и подтвердите действие:

Дождитесь окончания выполнения операции:

В случае успешного выполнения появится сообщение:

Если появляется сообщение об ошибке, проверьте, добавлена ли в каркас разметка <!-- <popup> -->, которая отвечает за страницы, открывающиеся в новом окне.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *