Создание сайта
Приветствую Вас, Гость · RSS Понедельник, 28.05.2018, 11:03



Главная » Статьи » Алгоритм

Шаг 5.1. Строим тело. Шаблон из Интернета
Это, пожалуй, самый тяжелый и трудоемкий процесс. И что бы облегчит жизнь, попробуем рассмотреть три глобальных варианта редактирования стандартных шаблонов:

Вариант первый: шаблон из интернета:
Начнем с самого клинического случая, когда Вы раскопали где-то в сети стандартный шаблон и пытаетесь подогнать его под свою идею. Пробовать самостоятельно разобраться в структуре чужого сайта, можно даже не пытаться. Однако, в тех шаблонах, которые все не так страшно. Даже просто! Но все-таки без простенького HTML редактора   вам не обойтись. Если хотите заработать опыт, воспользуйтесь «блокнотом» и «уроками Евгения Попова»  по HTML

Повторюсь: «Желательно воспользоваться бесплатной программой для создания и редактирования web-сайтов. Одна их них это NVU. Она достаточно проста в использовании, и самое главное, программа сама корректирует Ваши ошибки. Скачать программу со всеми необходимыми приложениями можно здесь (или потом в разделе бесплатные программы) или с сайта разработчика: http://www.nvu.com/ или с русской страницы http://nvu.mozilla-russia.org/»

  1. Ищем и открываем (в браузере и в «редакторе») главную страницу. Обычно она называется «index.html»
  2. Где-то между тегами BODY(может быть и такой вариант <!-- PAGE BODY GOES HERE -->) будем вставлять необходимый Вам текст.
  3. Пишем заголовки: с помощью тегов <h> расставляем заголовки будущего послания трудящимся:

 <h1> Образец ТЕКСТА</h1> 

H1 - Образец ТЕКСТА

 <h2> Образец ТЕКСТА</h2> 

H2 - Образец ТЕКСТА

 <h3> Образец ТЕКСТА</h3> 

H3 - Образец ТЕКСТА

 <h4> Образец ТЕКСТА</h4> 

H4 - Образец ТЕКСТА


  1. Можно заголовки выровнять по центру, тогда команда будет выглядеть так: <h1 align="center">заголовок1</h1>
  2. Вставляем нужный Вам текст
  3. Оформляем текст с помощью тегов:

     Исходный текст Результат в браузере
     <font color=09AB12 size=5 >Цветной текст</font> Цветной текст
     <b>Жирный текст</b> Жирный текст
     <i>Курсив</i> Курсив
     <u>Подчеркнутый</u> Подчеркнутый
     <s>Перечеркнутый</s> Перечеркнутый
     Ув<big>еличе</big>нный Увеличенный
     Ум<small>еньше</small>нный Уменьшенный
     Индекс<sup>вверху</sup> Индексвверху
     Индекс<sub>внизу</sub> Индексвнизу
     <tt>МоноШиринный WIWI</tt> МоноШиринный WIWI
     А здесь <!-- Это<b> комментарий</b> он не воспринимается броузером<br> -->пишите что хотите А здесь пишите что хотите

  1. Вставляем картинки командой <img src=путь к файлу>
  2. Вставлять можно рисунки двух типов: jpg или gif.
  3. Задаем «атрибуты» картинки:
  • width, height задают размеры рисунка. Если они не указаны, то общее форматирование HTML-документа поплывет, поэтому всегда указывайте эти параметры. Если вы укажете значения, не соответствующие действительности, то рисунок будет отмасштабирован.
  • border задает размер рамки, когда рисунок является гиперссылкой этот атрибут, как правило, приравнивают нулю, в противном случае будет видна рамка рисунка.
  • alt задает текст, который будет всплывать при наведении мышки на рисунок. Этот атрибут полезен также в случае, когда отключена загрузка рисунков.
  • hspace, vspace определяют расстояние до ближайших соседних объектов по горизонтали и по вертикали.
  • align - выравнивание применяется, когда рисунок обтекает текст. Возможные значения: left, rigth, top, middle, bottom.
  • Пример полной команды: <img src="images.jpg" width="97" height="130" align="left" hspace="20" vspace="10" alt="Картинка">
  1. Точно в таком же порядке создаем еще нужное Вам количество страниц.
  2. И каждую страницу не забываем сохранять под своим именем!
  3. Если нужен список:
  • Списки бывают трех видов: неупорядоченные, упорядоченные и списки определений (списки определений рассматривать не будем).
  • Неупорядоченные списки создаются командой <ul>. Обязательно наличие закрывающей команды </ul>
  • Элементы списка создаются командой <li>.
  • У команд <ul> и <li> можно указать атрибут type, который принимает одно из трех значений: disc, square, circle.

 <ul>
   <li> Первый
   <li> Второй
   <li> Третий
  </ul>
 
  • Первый
  • Второй
  • Третий
 <ul type=circle>
   <li> Первый
   <li type=square> Второй
   <li> Третий
  </ul>
  • Первый
  • Второй
  • Третий

  • Упорядоченные списки создаются командой <ol>.
  • У команды <ol> есть два атрибута type и start.
  • Атрибут type задает тип нумерации:

 type= Стиль нумерации
 1
 арабские числа 1, 2, 3, ...
 a
 прописные буквы a, b, c, ...
 A
 заглавные буквы A, B, C, ...
 i маленькие римские числа i, ii, iii, ...
 I
 большие римские числа I, II, III, ...
  • Атрибут start указывает с какого номера начинать список.
  1. Как послать на другую страницу или сайт. Конечно с помощью ссылок
  • Ссылки задаются командой <a>. Обязательно наличие закрывающей команды </a>
  • Все что помещено между тегами<a></a>, будет отображаться как ссылка
  • У команды <a> есть следующие атрибуты:
Href = Задает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке. Атрибут может указывать как на внешний документ, так и на элемент внутри данного документа.
Для создания гиперссылки вызова почтовой программы для написания письма используется <a href="mailto:your@email">
Title = Всплывающая подсказка
Target = определяет, как будет открываться ссылка: _blank – в новом окне; если ничего не ставить – в том же.
  • Ссылкой может быть и картинка. Тогда вместо текста вставляем «Картинку» Пример: <a href="stranica1.html"><img src="kartinka.gif"></a>
  1. Чтоб было аккуратненько можно вставить таблицу.
  • Таблица может выполнять несколько функций:  1- структурирование HTML-документа и 2 – собственно таблица данных (как Exel)
  • Начало таблицы объявляется командой <table>. Обязательно наличие закрывающей команды </table>
  • Новый ряд в таблице открывается командой <tr>.
  • Новая ячейка в таблице открывается командой <td>.
  • У команды <table> есть следующие атрибуты:
align = left, center, rigth
width = ширина в пикселях или процентах
height = высота
border = ширина границы(рамки) в пикселях
bordercolor = цвет границы(рамки)
cellspacing = расстояние между ячейками
cellpadding = расстояние от внутренней рамки ячейки до ее содержимого
background = фоновая картинка
title = устанавливает всплывающую подсказку
frame = определяет, какие стороны рамки будут видны, возможные значения: void - никаких сторон; above - только сверху; below - только снизу; hsides – только горизонтальные рамки; vsides - только вертикальные; lhs - только левые рамки; rhs - только правые; box - со всех сторон
  • Пример таблицы 2х2:
<table  align=center  width=300  height=200 border=5 bordercolor=0000FF cellspacing=10 cellpadding=30 background=images/1.jpg title="Всплывающая подсказка">
<tr><td> 1 <td> 2
<tr><td> 3 <td> 4
</table>
  1. Наверное все? Нет. Это только начало. Азы так сказать. Желаете знать больше? Тогда «Уроки Евгения Попова по HTML»
  2. Успехов! Жаль только что так вы можете создавать статические сайты. Динамические сайты создаются с помощью движков.
  3. О создании и редактировании динамических сайтов читайте в Шаг 5.2.Вариант второй: шаблон WordPress и Шаг 5.3.Вариант третий: шаблон uCoz

Продолжаем: Шаг 5.2. Строим тело. Шаблон WordPress

Категория: Алгоритм | Добавил: vsgroup321 (18.07.2009)
Просмотров: 688 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Имя *:
Email *:
Код *:
Сайт управляется системой uCoz
Copyright VS Group © 2018