| |
Дорабатываем шаблон
Анализируем шаблон
Итак, Вы установили Nvu, скачали из Интернета natural_view или другой шаблон. Начинаем:
- Распаковываем скачанный шаблон в какую-нибудь папку, например, C:/moi_pervij_sait
- Скопируем содержание папки natural_view в папку moi_pervij_sait
- Папку natural_view можете оставить или удалить - на Ваше усмотрение!
- Вывод первый - файлы и папки скомпонованы правильно - файл главной страницы index.html и файл таблицы стилей style.css в корне, а файлы изображений - в отдельной папке img. К сожалению, встречаются шаблоны, в которых все файлы набросаны в корне будующего сайта. Это не смертельно, но придется самостоятельно распределить их по папкам. Когда количество страниц на сайте превысит десяток, а количество файлов с изображениями - сотню, Вы все поймете!
- ПРИМЕЧАНИЕ: В файле index.html определяется основная разметка страницы, а в файле style.css - оформление страницы. Другие страницы сайта будут иметь названия типа imja_stranitsi.html. Файл стилей style.css - для всех страниц общий.
- Запускаем Nvu. В меню Файл -> Открыть файл... находим наш файл index.html и наблюдаем главную стрницу нашего будующего сайта. Внешний вид ее такой же, какой будет наблюдаться в браузерах Mozilla, Mozilla Firefox
- Почти наверняка у Вас по умолчанию установлен Internet Explorer. Опять зайдите в меню Файл -> Просмотр страницы. Вы увидите свою страницу в Internet Explorer. Если у Вас есть Opera, запустите страницу и в ней. Все три варианта должны выглядеть одинаково (или почти одинаково). Если это не так - выбросте этот шаблон!!! ПОЗДРАВЛЯЮ - Вы провели проверку на кроссбраузерность. Это три основных браузера, популярных в России.
- Опять вернитесь в меню Файл -> Сохранить как и сохраните файл под именем shablon.html - именно с ним мы будем работать.
Прежде чем что-нибудь менять проанализируем структуру страницы. Для этого перейдем в режим HTML-теги:
Вид нашего документа резко изменился. И самое главное - на нем появились какие-то желтые прямоугольники.
Придется немного коснуться теории. Веб-страница это совокупность контейнеров, ограниченных тегами. Тег это конструкция вида:
<p список атрибутов > - это открывающий тег абзаца. Каждому открывающему тегу в общем случае соответствует закрывающий. (Хотя нет правил без исключений.) Для абзаца закрывающий тег:
</p> (закрывающий тег атрибутов не имеет.)
Между тегами располагается текст или другие теги. Сам тег и его атрибуты определяют, как текст или вложенные контейнеры будут отображаться в браузере.
Между вложенными тегами существуют определенные правила подчинения (не любой тег может быть вложен в какой-то конкретный тег), правила наследования свойств (вложенный или дочерний тег наследует некоторые свойства родительского.) Но пусть Вас эти проблемы не волнуют - мы работаем с готовым шаблоном и проблемы уже решены верстальщиком.
Но и не забывайте о ней - нельзя вырвать кусок кода и вставить его куда угодно!
ПРИМЕЧАНИЕ: Хотя интернет-технологии существуют давно, но терминалогия до сих пор не устаялась. Я привел выше опеределения тега и контейнера. И сразу же стал применять слово тег там, где нужно применять слово контейнер. Так уж сложилось! И не только у меня. Поэтому я и дальше буду писать в том же духе. А Вы по контексту догадывайтесь!
Ниже информация для любознательных. Ее можно пропустить, если потребуется, вернетесь позже. Для того, чтобы работать в Nvu знать это желательно, но не обязательно.
Теги нашего шаблона
Привожу их в том порядке, в котором они встречаются в нашем шаблоне:
Открывающий тег |
Закрывающий тег |
Краткая информация |
| <html> |
</html> |
Определяет, что это веб-страница. В документе встречается только один раз. |
| <head> |
</head> |
Заголовок. Служебная часть веб-страницы. В документе встречается только один раз. Содержит информацию для поисковиков и браузеров. |
| <title> |
</title> |
Название страницы. В документе встречается только один раз. Высвечивается в верхней строке браузера. |
| <body> |
</body> |
Тело страницы. В документе встречается только один раз. Все, что Вы видите на экране, заключено между этими тегами. |
| <div> |
</div> |
Блок. Применяется, когда какую-часть содержания необходимо оформить как единое целое. Основной элемент верстки в слоях (в Дивах, в блоках) |
| <span> |
</span> |
Строчный элемент. |
| <h1> <h2> |
</h1> </h2> |
Заголовки. Выделяются браузером даже если Вы их никак не описываете. |
| <ul> |
</ul> |
Ненумерованный список. Внутри обязательно содержит теги:<li> и </li> |
| <li> |
</li> |
Строки нумерованного или ненумерованного списка. |
| <a href="#"> |
</a> |
Гиперссылка. Знак # заменяет реальный адрес - ведет на туже страницу. |
| <p> |
</p> |
Абзац |
| <img src="./имя файла" /> |
нет |
Изображение. В кавычках указывается адрес, где находится файл изображения. Пробел и дробь ( /) перед > - требование спецификации XHTML 1.0 Transitional для контейнеров, не имеющих закрывающих тегов. |
| <strong> |
</strong> |
Выделяет текст жирным шрифтом. |
Обратите внимание на самую нижнию строчку в окне редактора Nvu. Это порядок вложенности тегов. Пощелкайте мышью в разных местах рабочего окна и последите за этой строкой.
Переключим редактор в режим Код. И обратим внимание на атрибуты тегов. Их всего два: id="xxxx" и class="yyyy". Атрибутов у тегов, конечно, значительно больше, но, как я уже упоминал, эта страница написана в строгом соответствии с рекомендациями: разметка (расположение элементов страницы) в файле html, а оформление (цвет, поля, размеры и другое) в файле css (таблице стилей). Если есть желание, откройте его при помощи Блокнота. Он чуть посложней, но не пугайтесь - вряд ли мы его будем трогать, ведь мы подобрали шаблон по своему вкусу. Кроме этого, данная рекомендация не является строгой. Когда Вы будете вставлять другие теги в свою страницу, редактор Nvu, сам пропишет необходимые атрибуты в теге. Просто учтите следующую информацию:
Синтаксис
(способ написания) |
Описание |
Вид в CSS |
| id="imja" |
Идентификатор. Имя imja должно быть уникальнаым на странице. |
#imja{ описание } |
| class="drugoe_imja" |
Класс с именем drugoe_imja
Разные теги могут принадлежать к одному классу. |
.drugoe_imja { описание } |
Если у Вас возникнет необходимость повторно на той же странице использовать элемент, имеющий идентификатор, то можно воспользоваться одним из способов:
- Замените идентификатор классом, а в таблице стилей поменяйте диез на точку
- Присвойте идентификатору другое имя, а в таблице стилей дайте новому элементу такое же описание, как и оригинальному
Заменяем текст
Если Вы хотя чуть-чуть знакомы с HTML, то укажите к каким тегам относится тот, или другой элемент шаблона. Именно это я и сделал. В остальном просто ввел отдельные предложения по несколько раз, чтобы увидеть, как поведет себя шаблон. Сохранил файл под именем shablon1.html
В этом файле приведены несколько советов. Увидеть Вы его можете здесь.Надеюсь, работа в Nvu не составит для Вас проблем. Он русифицирован, достаточно понятен. Естественно, не обязательно работать с чужим шаблоном - можете начать с пустой страници, и создать собственный дизайн.
Наполняем шаблон конкретным содержанием.
Предполагается,что это будет главная страница сайта. Поэтому открываем шаблон shablon1.html. и сразу же сохраняем его под именем index.html. Естественно, не все, что есть в шаблоне нам понадобится. Лишнее - удаляем!
- Текст копирую из первоисточника и вставляю на место одного из параграфов. Остальное делает редактор.
- Ой!... Курсив плохо смотрится на длинном тексте!
- Вы правы! И курсив, и жирный текст служит для выделения чего-либо. Так будьте внимательны - у Вас на шаблоне есть все необходимые заготовки. Придется вставить текст в абзац с нужным шрифтом, а этот удалить!
- Повторяю предыдущие действия с учетом ошибок. Неплохо. Но хотелось бы некоторые части текста представить списками. Вношу необходимые изменения.
- Не даю советов, как именно это сделать, не из вредности! Это Вы впервые делаете сайт, а не я. Вам просто необходимо изучить поведение редактора Nvu и шаблона, который Вы взяли за основу своей страницы. Экспериментируйте, набивайте шишки - они запоминаются лучше, чем "добрые советы"! Можно создать просто пустую страницу (Файл ---> Создать) и потренироваться!
- Если текстовый материал подготовлен в Word-е, возникает естественное желание взять большой участок текста и перекинуть его в Nvu. При этом Nvu, пытается перевести Word-овское форматирование в свое. Если результат Вас устраивает, можно пользоваться! (Проблемы размера кода мы принципиально не касаемся). Но очень рекомендую - проверьте свою страницу в разных браузерах.
Я предпочитаю сначала перенести текст в Блокнот, а из него в Nvu. Это удалит лишнее форматирование. Попробуйте оба варианта и принимайте решение!
- Забудьте о том наборе шрифтов, которые Вам может предложить Nvu. Это шрифты, которые установлены на Вашем компьютере. Вы потратите время "разукрашивая" свой текст шрифтом Still Time Cyr, которого наверняка нет у француза и скорее всего нет и у Вас. (Я специально устанавливал его на свой компьютер.) И еще неизвестно, какой шрифт подставит вместо отсутствующего конкретный браузер посетителя Вашей страницы - дай бог, чтобы текст вообще читался!
- Подготовленные избражения копируем в папку img. Аватар вставляем в боковое меню, предварительно удалив все лишнее, а фотографию с шишкой заменяем видом Ставрополя 18 века.
- На этом пока остановимся. Сохраняем изменения. (Чтобы Вы могли видеть на каком этапе приостановлена работа над страницей, я сохранил ее под именем shablon_1_etap_2.html.)
О планах
Когда мы что-то начинаем, у нас всегда есть "ПЛАН", но, к несчастью, - в голове! У меня он был там же. Когда я собрался написать: "Заменяем боковое меню на ...", пришлось все бросить и начать подраздел "О планах"
Путь, по которому я Вас вел, должен был состоять из таких этапов
- Русифицируем исходный шаблон
- Определяемся, какие его элементы нужны на нашем сайте. Лишние - удаляем, нужные - обзываем так, как они будут называться на сайте. Добавлем графику, которая будет присутствовать на всех страницах сайта.
- Файл, созданный на втором этапе, используем как заготовку любой страницы сайта. (Открываем его в Nvu, и сразу же сохраняем его под нужным именем.)
- Русифицированный шаблон используем, как страховку, - вдруг удалили что-то, что "вдруг" потребовалось. (Можно заглянуть, скопировать и вставить в нужном месте.)
Такой вариант, несколько экономит время при создании сайта. Те, кто просто тренируется, могут пойти следом за мной, но создать только одну вторую страницу. Тем, кто решил сразу создать свой сайт, я очень рекомендую приостановиться и продумать структуру сайта, зафиксировать ее на бумаге и только потом решить, по какому пути идти. Если Вы планируете больше трех страниц, то доведенная до ума заготовка, может сильно съэкономить Вам время.
(Продолжение следует)
|
|
