Школа Web-дизайна

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

План:
    1.Создание макета страницы.

определить место для текста и изображений - (таблицы)

подготовить и вставить заглавный блок - (шапка)

организовать навигацию - (создать ссылoк)

написать завершающий элемент страницы "Copyright ©"

    2.Создать копии макета по количеству страниц сайта.

переименовать страницы соответствующим образом*

    3.Наполнить страницы контентом.
вставить отредактированный и корректированный текст

разместить изображения

звучание фоновой музыки

Уважаемый Web-мастер!
Следуя известному принципу, предлагаю не идти в гору, а обойти её. Нет надобности тратить время на создание исходных кодов макета страниц. Воспользуемся готовым HTML-документом который есть в каталоге. Ведь наша цель - построить сайт, а учиться будем в процессе постройки. Это тоже отличная школа.
Прежде чем вы сделаете первый шаг я вам должен сказать, что всё описание иллюстрировано. Но в целях экономии визуального пространства, все скриншоты будут демонстрироваться по средствам ссылки.

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

Шаг №1.

1.Создание макета страницы.

Давайте поставим вопрос: "Что такое макет, который мы сооружаем, и зачем он нужен?"
Скажу просто и однозначно: - макет, при постройке сайта, панацея от всевозможных трудностей, блужданий в структурных лабиринтах, постоянных возвратов к пройденным этапам. Макет панацея от огромного количества гадких мелочей, которые делают нам подножку.
Откройте любой сайт в сети и пройдитесь по его страницам. Если не вникать в смысл информации его страниц, то бросается в глаза то, что все страницы очень похожи друг на дружку. В чём же сходство? А сходство заключается в том, что каждая страница содержит "Заглавный блок", "Блок меню" и информацию о сайте и его создателях - "Copyright". Все эти блоки подготовлены и внедрены на каждую страницу. Возможно есть ещё какая-то мелочь, но эти три блока являются узлами связывающими весь сайт.
Проще говоря вам нужно построить страничку сайта без информации (контента). Однако в ней должны присутствовать три основные блока и, разумеется, должно быть размечено место для того самого контента. Когда макет готов, вы его клонируете (создаёте идентичные копии), которые в последствии станут страницами вашего сайта.

Выберите в хранилище папку с вариантом сайта Site-1. Откройте эту папку. Скопируйте её содержимое и вставьте в вашу рабочую папку -"Корневой каталог". Выглядит это так:

Теперь, важно! Из папки "Корневой каталог" удалите HTML-документы под именем 02 и 03. Из трёх документов должен остаться только - Index. Следующее, что нужно сделать, этот файл под именем - Index переименовать. Назовите его "maket".
Запустите редактор "Cats-Html". Откройте в редакторе файл b>maket из папки "Корневой каталог". Сейчас вы видите код HTML - это каркас страницы. От этого кода зависит: как, что и в какой последовательности вы увидите на вашей странице. Этот файл нужно преобразить, сделав из него макет страницы, который устроит вас по всем показателям. Важно знать! Макет, который вы сейчас создаёте, должен содержать все элементы постоянно присутствующие во всех страницах сайта. Это элементы заглавного блока, блока меню и Copyright ©. Всё остальное наполнение страниц сайта, (информационный текст, фото и пр. детали), разумеется, будет отличаться на разных страницах друг от друга, и понятно, что в макет вставлять их не следует. Поэтому, удаляем стихи из блока таблиц озаглавленных ,

всё то, что в красных рамках.
Хочу вас предупредить, что все изменения в кодах нужно зафиксировать! После того, как вы произвели какие-то изменения, нужно обязательно просмотреть результат в браузере, или кликнуть кнопку - сохранить - (панель инструментов редактора HTML). В обоих случаях изменения будут сохранены.

Таблицы. Их назначение и место.

Должен напомнить, что внешняя структура страницы, всецело зависит от таблиц. Иначе говоря, при создании макета страницы, прежде всего, определяем места и пишем коды для установки таблиц. После того как таблицы заняли свои места, необходимо вставить в них соответствующее содержимое.
Красным цветом в скриншоте очерчены заголовки блоков, (блок для размещения текста, блок меню и др.). Эти заголовки выполнены в виде комментариев, для Web - мастера. Они указывают начало кода определённого объекта. Можно легко отыскать место, к которому вы хотите обратиться, скажем, для исправления текста или установки другой картинки.
Синим цветом очерчены таблицы в пределы которых помещают текст, фото, фоновые рисунки и другие элементы наполнения. Вы поняли, что при создании макета заполняются только те таблицы, содержание которых неизменно во всех страницах сайта. В таблицу предназначенную для шапки, вставляем все компоненты заглавного блока. В таблице для меню создаём навигацию по сайту (ссылки).
Зелёным очерчены объекты которые изменяют по необходимости. Эту процедуру выполняйте с особой аккуратностью. Удалите не соответствующее слово или фразу из макета, (не затронув тегов разметки), и вместо удалённого вставьте нужный текст.
Следует вспомнить, что существует такой важный аспект как меню. Вполне вероятно, что названия ссылок меню вас не устроят. Так-как имена страниц будут другими. Следовательно, кое-что нужно изменить и в кодах меню.

Изменить элементы в таблице заглавного блока с учётом тематики.

Совершенно очевидно, что вам многое нужно изменить в создаваемом макете страницы, а изменить возможно практически всё: - текст бегущей строки, скорость её движения, название страницы, цвет фона, цвет текста, содержание меню и многое другое. Находим в кодинге соответствующую таблицу, содержащую объект который не соответствует смыслу и теме вашего сайта и смело его меняем на подходящий и правильный.
Если вас не устраивает фоновый рисунок заглавного блока, изготовьте подходящий вам фон и вставьте его в папку "Корневой каталог". Присвойте ему цифровое имя - "008", предварительно удалив старый фоновый рисунок с тем же именем. Теперь браузер будет демонстрировать новую фоновую картинку.
Вернитесь на страницу "Инструменты". Там в описании графического редактора "Paint" есть достаточно подробное описание того, как изготовить заставку для заглавного блока.
Ваш фоновый рисунок изготовлен без надписи являющейся заголовком, названием сайта?, не беда. Удалите из кодинга макета начальный и закрывающий теги: - (<! -- ... -->), очерченные в скриншоте зелёными кружками. У вас появился заголовок сайта "Путешественник". Хотите изменить заголовок? Вместо "Путешественник", в кодинге, напишите приемлемое название. Напоминаю: слово или фраза заключённая между тегами (), является комментарием, и не видна в браузере.
Текст бегущей строки не соответствует теме?. Удалить его и заменить на соответствующий (скриншот: - очерчен синим). В той же строке, жёлтая пометка, задающий тег бегущей строки и его атрибут, <marquee scrollamount="2">, имеет цифровое значение -2-. Измените это значение на любое другое от 1 до 10, что определит скорость движения бегущей строки. Цвет бегущей строки при желании меняем с #FFFF00 (жёлтого), на любой подходящий. Аналогично измените имя владельца персонального сайта. Некоторые тонкости этого изменения, надеюсь, вам будут ясны.

Изменить элементы блока меню с учётом количества страниц.

Я очень надеюсь, что вы точно знаете сколько страниц будет содержать ваш сайт. Уверен, что уже существуют имена страниц вашего сайта. Дело в том, что количество страниц и их имена очень важный показатель для создания навигации по сайту. Если вопрос с количеством страниц
и их именами решён, то проблем нет.
Предположим, что на вашем сайте три страницы. Наш HTML-документ, который вы преобразуете в макет, изначально содержит три ссылки для сайта из трёх страниц. Стало быть добавлять пункты меню нет необходимости. Оставляем всё как есть. Обратите внимание, в блоке меню четыре пункта. Оказывается, что последний пункт меню "Напишите нам", не является пунктом навигации, а просто, ссылка на вызов почтовой программы.
В вашем сайте больше трёх страниц?? Значит делаем так: В вашем кодинге макета найдите блок меню. Ещё раз внимательно посмотрите скриншот. В №1 слева, есть вертикальная красная риска. В это место, в коде макета, установите курсор мыши. Нажмите на клавиатуре кнопку - Enter -. Строка, перед которой стоял курсор переместится вниз, освободив при этом строку сверху. Скопируйте строку подчёркнутую штрихпунктирной линией и вставьте в свободную строку. Должно получиться как в №2. В новоиспеченной строке замените, (как указано в скриншоте), имя файла с - 03 - на - 04 -. Оказалось, что вам нужен ещё один пункт меню? Повторите процедуру ещё один раз. Только не забудьте изменить имя файла на следующий порядковый номер.
В скриншоте №2, зелёным очерчены объекты которые следует изменить. В вашем макете эти названия смените на реально существующие имена страниц.
[Не путать имя файла с именем страницы.]

Пример:
1-ый пункт меню, 1-ая страница; имя файла "Index.html", имя ссылки "Главная".
2-ой пункт меню, 2-ая страница; имя файла "02.html", имя ссылки "(реальное имя страницы)"
3-ий пункт меню, 3-ая страница; имя файла "03.html", имя ссылки "(реальное имя страницы)"
4-ый пункт меню, 4-ая страница; имя файла "04.html", имя ссылки "(реальное имя страницы)"

В меню имеется ссылка для вызова почтовой программы. В кодинге можно изменить название ссылки "Напишите нам", однако на мой взгляд, название соответствует и менять его нет смысла.
Когда посетитель со своего компьютера, находясь на вашем сайте, вызывает почтовую программу, ему остаётся только написать сообщение и нажать кнопку - "Отправить сообщение". Адрес и тема в форме уже готовы. Замените запись - ваша@почта.ru - (подчёркнута синим пунктиром), на ваш реально существующий адрес электронной почты . В жёлтой рамке указана тема сообщения. Можно изменить её по вашему желанию.

Измените текст в соответствии с вашим желанием. Только то, что находится в зелёной рамке. Поставьте другое графическое изображение или просто удалите его. Укажите кто работал над ресурсом, где и когда он был создан. В соответствующих инстанциях можно оформить документ об "Авторских правах", и тогда вы с гордостью сможете написать: "Все права защищены международными соглашениями ..... и т.д. и т.п."

Шаг №2.

2.Создать копии макета по количеству страниц сайта.

Вы выполнили очень важную и ответственную работу. Вы создали МАКЕТ, который теперь должен стать основой страниц вашего сайта.
Проясним ситуацию: - что делать с макетом дальше?, а вот что! Нужно клонировать макет в папке "Корневой каталог" столько раз, сколько страниц должно быть на сайте. Как это сделать:
Откройте папку "Корневой каталог", правой кнопкой мыши кликните файл под именем "maket". В контекстном меню выберите - копировать -. Снова, кликните правой кнопкой мыши на пустом месте в папке "Корневой каталог". В появившемся контексте выберите - вставить -. Появится копия, (клон), вашего макета. Эту процедуру повторите столько раз, сколько страниц вам необходимо, (сам макет не учитывать). Вот так это должно выглядеть:

Теперь очень важно не забыть, переименовать файлы выделенные красным.
В скриншоте, как пример, четыре страницы.

Переименовать страницы соответствующим образом.

1). Переименуйте файл - "Копия maket", присвоив ему имя "Index"

2). Переименуйте файл - "Копия (2) maket", присвоив ему имя "02"

3). Переименуйте файл - "Копия (3) maket", присвоив ему имя "03"

4). Переименуйте файл - "Копия (4) maket", присвоив ему имя "04"

Переименование на этом не закончилось.
У вас сейчас есть файлы "Index", "02", "03" и т.д.
Это ваши будущие страницы сайта. Пока они идентичны и содержат общие для всех страниц элементы. Давайте присвоим страницам их имена. Используя редактор "Cats- HTML" откройте файл под именем "Index". Страницу которую он откроет в браузере обычно называют - Главная -, это будет стартовая страница сайта. Отыщите в кодинге этого файла место, куда записывают имя страницы.

В файле "Index", имя страницы оставим - Главная -. Файлу "02", задаём имя - ( согласно вашей задумке). Файлу "03", - (своё имя) и т.д. После каждого переименования не забывайте зафиксировать изменения.

Шаг №3.

3.Наполнить страницы контентом.

Сейчас в вашей папке "Корневой каталог", есть Html-документы которые после наполнения их контентом, приобретут вид готовых, полноценных страниц сайта. Практически это последний этап строительства сайта.
Наполнение страниц текстом, кропотливый и ответственный процесс. Текст не должен быть слишком длинным, т.к. это не очень нравится посетителям сайта. Но если нет выбора, и ваша информация оказалась объёмной, постарайтесь найти способ смягчить процесс чтения. Придумайте, как расположить читателя к информации: - Разделите ваш текст на части, создайте закладки, проиллюстрируйте его (желательно не слишком крупными изображениями). Заинтригуйте посетителя вашего сайта. Вызовите у него интерес к чтению предложенной статьи. Вы должны написать текст так, чтобы читатель сказал себе: - "да! это главное чтиво моей жизни, и я должен его прочесть до конца".

вставить отредактированный и корректированный текст
Если ваши навыки ввода текста с клавиатуры достаточно высоки, и вы в состоянии без труда контролировать теги разметки текста, не заглядывая поминутно в браузер: - это показатель высококлассного копирайтера. В этом случае можно писать текст прямо в редакторе Html.
Но самый простой и лучший, на мой взгляд, способ поместить текст на странице: - это заготовить его в документе формата RTF и затем скопировать его в нужное место кода Html страницы.
Теперь по порядку.
На рабочем столе, в пустом месте, кликните правой кнопкой мыши. В контекстном меню выберите - \создать\ и далее \документ в формате RTF\. Появится текстовый документ. (Это не блокнот, т.к. блокнот в данном случае, по ряду причин не годится). Откройте этот документ в формате RTF. Напишите в нём текст для вашего сайта. Создайте абзацы и нужные отступления. Используйте необходимые знаки препинания. Отредактируйте вашу статью. Ещё раз прочитайте её (исправьте возможные ошибки).
Теперь читайте внимательно.
Скопируйте вашу статью в буфер обмена. Откройте нужную страницу вашего сайта в редакторе Html, и отыщите место куда следует вставить текст.

Для того, чтобы в браузере всё выглядело пристойно, текст следует заключить между тегами <Pre>и </Pre>. Сделать это просто, нужно кликнуть кнопку "PRE" на панеле инструментов редактора Html.

В кодинге появятся начальный и конечный тег <Pre></Pre> Установите курсор между этими тегами и в это место вставьте ваш текст. Это то, что касательно первого текста. Повторите всё со вторым и третьим текстами.
Должен предупредить, что разметка текста, без этих замечательных тегов, мягко говоря, вас не обрадует. Тег "Pre", сохраняет все пробелы и переносы, а без тега ... - кошмар. Если у вас появится желание изменить шрифт вашего текста, то между начальным тегом <Pre> и первой буквой текста нужно вставить запись вида: <font face="Tahoma"> которая даст указание браузеру отражать текст шрифтом "Tahoma". Можно вписать любое другое имя шрифта, к примеру, "Comic Sans MS" или "Arial".
Теперь, что касается размера шрифта. Изменить его легко и просто. Добавьте к имеющейся записи ещё один атрибут, цифровое значение которого укажет браузеру размер шрифта: <font face="Tahoma" size="3">. Нужен отличный от других цвет текста? Нет проблем. Ещё дополнительный атрибут с указанием кода цвета, даст понять браузеру, какой цвет применить к тексту. <font face="Tahoma" size="3" color="#00FF00">
Эта запись определяет стиль следуемого за ней текста. В данном случае текст написан шрифтом "Tahoma", размер - "3", зелёного цвета. Для остановки данного стиля, в конце текста ставят завершающий тег </font>. В противном случае этот стиль будет продолжаться.
Запись кода подобного вида, относится к CSS, - "Каскадные таблицы стилей".

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

Чтобы вставить изображение в HTML-код страницы, вы должны написать следующее:
<img src="065.jpg" alt="Мельница" width="140" height="80" border="0">
Но, чтобы это сработало, вы должны в ту же директорию, где находится файл с HTML-кодом, ( папка "Корневой каталог") вставить графический файл под названием 065.jpg. Конечно, вы можете назвать его по-другому, как захотите, надо только указать в строчке кода правильное название файла нужной картинки. Что именно говорит нам эта строчка кода? А то, что мы хотим вставить рисунок (img) под именем 065.jpg, а рабочее название (alt=) этого рисунка будет "Мельница" (если по каким-то причинам, например, из-за плохой связи, у пользователя не откроется рисунок, то он увидит на его месте в своем браузере в качестве "альтернативы" это самое рабочее название и поймет, что здесь должно быть изображение "Мельница"). Цифровые значения атрибутов width и height - это, как вы уже поняли, ширина и высота рисунка. Атрибут border="0" - означает, что граница рисунка нулевая, или просто говоря - рисунок без рамки.
А где вы разместите ваш рисунок в коде HTML?? Верно! Там, где вы хотите его увидеть. Это очень важно, так-как сейчас изображение занимает совсем не то место, перебивает текст, образует огромные пробелы и не выглядит эффектно.

Обычно фотографии размещают на странице сайта так, чтобы текст обтекал изображение справа или слева. Сделать это просто. Следует в строку кода добавить ещё один атрибут align="left". А саму строку кода поместить перед той строчкой текста, которая будет располагаться по верхнему срезу фото. Значение ="left", говорит о том, что фото окажется слева, а текст обтекает картинку справа. Значение ="right", установит картинку справа. Для того, чтобы фотка и текст смотрелись приятно, строка кода должна выглядеть так:
<img src="065.jpg" alt="Мельница" width="140" height="80" border="0" align="left">
И всё таки осталась маленькая закавыка. Посмотрите, как текст плотно прижат к фотографии. Давайте, доведём дело до конца, исправим эту ситуацию.

Ну вот, совсем другое дело. И читать стало удобнее. Сделайте этот эксперимент самостоятельно. У вас всё должно получиться.
В строку кода внесите ещё два атрибута: hspace= "7" и vspace="2".Эти атрибуты "оторвут" изображение от текста (по горизонтали и вертикали соответственно).
Окончательная версия строчки кода для установки картинки такая:
<img src="065.jpg" alt="Мельница" width="140" height="80" border="0" align="left" hspace= "14" vspace="7">

звучание фоновой музыки
Любую страницу сайта можно снабдить музыкальным фоновым звучанием.
Для этого, в папку "Корневой каталог", загрузите звуковой файл с любым расширением. Главное, чтобы запись отражающая расширение файла в коде, соответствовала формату самого файла. HTML- код вида:
<bgsound src="1.mid" loop=-1> осуществляет фоновое воспроизведение звука.
Его размещают в голове документа, т.е. между тегами <head> и </head>.
Тег: - bgsound имеет атрибут - src="1.mid", значение атрибута, (взятого в кавычки), является именем звукового файла, и после точки, обязательно, записывают его расширение: "mid", "wav" или "mp3". Определить расширение, или как это ещё называют, формат звукового файла, можно, открыв его свойства. Следующий атрибут: - loop=-1 . Цифровое значение этого атрибута, определяет количество повторов звучания файла. Возможны значения: 0 или 1 (звучит 1 раз); 2, 3, ... 55, 56, ... (реальное число повторов); -1 (бесконечное повторение).
Файл для фонового звучания, не обязательно должен быть музыкальным. Он может быть голосовым или даже шумовым. При правильном подборе звукового материала, с учётом темы сайта и целесообразности, можно получить интересный результат.

Уважаемый посетитель!
Вам не всё понятно? Не откладывая на потом,
отправьте ваш вопрос на мой e-mail
Я с радостью объясню, более доступным языком,
трудную для вас ситуацию.