Очень часто при разработки сайтов нужно создать простую страницу, которая может состоять из одной колонки с верхней частью (header), содержимым (content) и нижней частью (footer).
Выглядит это примерно вот так:
Такие страницы часто используются для того, чтобы вывести пользователю какую-либо информацию. Например, что он успешно подписался на рассылку, оформил заказ и.т.д. Часто такие шаблоны используют для того, чтобы создать рекламный текст на какой-либо товар, страницу подписки на рассылку и.т.д.
Создается такой каркас довольно просто. Давайте попробуем это сделать прямо сейчас.
Если вы будете испытывать трудности в его создании, вы можете изучить два моих базовых курса по технологиям 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;
}
Основной каркас страницы уже появился, но здесь есть две основные проблемы: 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%;
}Смотрим, что получилось.
На мой взгляд довольно не плохо.
Скачать страницу можно здесь.
В следующих своих курсах я часто буду ссылаться на эту заметку, чтобы каждый раз не создавать такую страницу заново. Можете сохранить ее к себе на компьютер, так как пользоваться такими шаблонами приходится довольно часто на практике.
Если что-то не получилось, пишите в комментариях, посмотрим.
Далее. Следующие уроки по 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».
В этой папке я стёр свои сайты, чтоб Вас не путать, а Вам нужно будет создать новую папку и назвать её, допустим, «site» или «site.ru» Можно любое другое название английскими буквами, значения не имеет.
Затем, открываем эту пустую папку, и в ней создаём ещё одну — «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», и теперь уже «Сохранить» (не пропустите точку впереди, так как это расширение).
После этого файл появиться в директории.
Всё, корень сайта готов. Можно заполнять его файлами.
В папку images будем складывать картинки, в папку style файлы css, а в папку is файлы javascript.
Хоть это и выходит за рамки данной статьи, но желательно проверить, как работает интерпретатор php.
Для этого потребуется редактор файлов Notepad++. Если он у Вас ещё не установлен, то Вам необходимо сначала прочитать статью Руководство по установке и использованию Notepad++, и установить редактор.
Затем открыть новый документ и написать в нём следующий скрипт:
<?php
echo 5;
?>
Далее «Файл — Сохранить как …», находим в поисковике папку «www», называем файл «index.php», и сохраняем.
После этого можно зайти в нашу директорию, убедиться в том, что файл «index.php» в ней появился, и перезагрузить Денвер, двойным щелчком по «Restart Denwer».
Как только Денвер перезагрузится, открываем новую вкладку в браузере, и вводим в поисковой строке запрос «site/index.php».
На экране должна появиться цифра 5.
Это значит, что Денвер работает нормально, можно продолжать изучать веб-дизайн и веб-программирование, и строить свой сайт, хоть только на 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
На этом наш первый урок заканчивается.
Возможно, Вам будет полезна эта информация:
- Подключение CSS
- HTML для начинающих от А до Я – скачать видеокурс бесплатно
- Создаем ссылки
Каркас сайта — База знаний uCoz
Инструмент «Каркас сайта» позволяет сгенерировать однородную структуру для всех разделов сайта.
Данная инструкция состоит из следующих частей:
- Описание строения каркаса
- Обзор редактора каркаса
- Действия с каркасом
- Установка каркаса
Описание строения каркаса
Чтобы изучить строение каркаса, в панели управления откройте раздел «Дизайн», в меню слева выберите пункт «Каркас сайта» и на открывшейся странице нажмите на ссылку «Описание строения каркаса»:
В левой части вы увидите «Помощь по каркасу сайта», а в правой — пример каркаса:
В каркас могут быть добавлены следующие элементы:
- Теги — позволяют разбить каркас сайта на составные части, такие как шапка, сайдбар, подвал.
- Коды — меняют свои значения в зависимости от содержимого материала или категории.
- Надписи — зарезервированные слова и словосочетания, которые будут переведены на язык сайта при генерации шаблонов.
Для удобства скопируйте пример каркаса и измените его HTML-код по своему усмотрению.
Обзор редактора каркаса
Редактирование каркаса выполняется в специальном поле:
Помимо тегов, кодов и надписей, в каркасе могут использоваться операторы. Чтобы их посмотреть, нажмите на соответствующий значок и посмотрите список:
Чтобы добавить на сайт файл, удобно использовать файловый менеджер. Он вызывается нажатием на иконку:
Для добавления в каркас изображений, форм и инструментов, нажмите на значок:
Чтобы изменить положение панели редактора, воспользуйтесь кнопкой переключения вида:
Панель может находиться под редактором или в новом окне:
Также в редакторе есть инструменты, которые позволяют (включить подсветку синтаксиса, выровнять код, сменить цвет фона, сделать откат последних изменений, выполнить поиск и замену кода):
Вы можете выбрать каркас стандартного шаблона и отредактировать его, чтобы потом использовать для шаблона. Для этого нажмите на значок «Выбор готового каркаса» и выберите «Из шаблона»:
Появится список шаблонов:
После того как вы выберите один из них, каркас шаблона будет доступен для редактирования:
Действия с каркасом
С каркасом можно производить следующие действия:
- Добавить в стандартные. Новый дизайн будет добавлен к стандартным шаблонам. Позже, нажав «Восстановить шаблон» в редакторе шаблонов, вы восстановите его к такому виду.
- Сохранить. После сохранения каркаса на сервере вы сможете снова использовать его позже. Сохраненный каркас будет доступен после нажатия на «Выбор готового каркаса».
Установка каркаса
Когда работа с каркасом завершена, можно приступить к его установке. Нажмите на кнопку «Сохранить» и подтвердите действие:
Дождитесь окончания выполнения операции:
В случае успешного выполнения появится сообщение:
Если появляется сообщение об ошибке, проверьте, добавлена ли в каркас разметка <!— <popup> —>, которая отвечает за страницы, открывающиеся в новом окне.