Постройка Сайта


Максимально быстро

Простенькие странички создаются языком HTML.
Потом, для новичков, будет полезен ОнЛайн HTML Редактор


Рекомендуется не тратить силы на сайтостроение, и делать работу с удовольствием, используя самые легкие методы, для вашего знания. Делать все просто, и быстро, концентрироваться на подаче материала. Без боли и нервов. Важен ПУТЬ. Комфортный, легкий, быстрый. Поверте опыту. Чем проще.

Не стремиться к наворотам. Это лишнее.
Также не искушайтесь на навороченные сервисы или программы, где вам предлагают все делать автоматом. Делайте все сами. Свободы больше.
Страничка должна содержать текст, в самом простом виде,и фоновую картинку, или вставить где надо. Не устраивайте шоу мигающих анимаций. Лучше сделать ИЗЯЩНО, по простому. Пусть одна картинка, но в тему, и может быть хоть на весь экран как фоновая. (но с малым весом по килобайтам)

Автор статьи Славик, Nostradamys.ru
7.8.06. Обновлено 30 8 10

Открываем (регистрируем аккаунт) сайт на narod.ru (читаем немного инструкции к сервису, как закачивать файлы)

Если вам нужен сайт просто для обьявлений, достаточно открыть форум (на бесплатных сервисах типа borda.ru) или дневник (блог) и подключить к сайту

1. Любой сайт (обычно) состоит из 3 кусков, верх (постоянный на всех страницах), содержимое (меняется), и низ (постоянный)
2. Главная страница всегда имеет название index.html
3. Оформление текста делается Тегами, которые Обозреватель Интернета (то в чем просматриваете) не отображает, а использует как команду для действия. ТЕГ указывает как (под наклоном, жирно, увеличено, и многие другие) отображать информацию. <тег>текст</ тег>
Начальный тег стоит спереди, а прерывающий действие, после, и с черточкой. Оба в "<" и ">"
4. Редактором может выступать обычный Блокнот виндовса. Или профессиональный, программа Macromedia Dreamweaver

Качаем этот архив, готовый сайт (28 кб) и читаем ниже обьяснения

1. Распакуйте архив Rаr. Найдите файл index.html, откройте, понажимайте на открывшемся сайте все что можно.
2. Далее наведите(на компьютере) на index.html (который открывали) мышку и Правой кнопкой мыши нажмите, чтоб выскочило меню, там выбрать Открыть С Помощью (Open with) выбираем Блокнот
Поиск по блокноту (если нужен) CTRL + F одновременно на клавиатуре 2 кнопки
3. Найдите в блокноте русские слова, или фразы, которые были оформлены на страничке, и посмотрите КАК они редактируются тегами.
"<br />" такой тег, это переход на новую строку. Так-же, во многих местах между тегами "<!--" и "-->" даны комментарии. Их не читает обозреватель. Это для вас.
Теги могут идти друг за другом в той-же строке и без пробелов.

Фоновая картинка на всех страничках сайта подгрузится, она указывается в файле upravleniye.css
В котором настройки для всех страничек (шрифты, цвета, фон)

Другие теги можно поискать в учебниках в интернете на ya.ru

Сохранить файл блокнота.
Далее открываем index.html и смотрим как все выглядит
Закачиваем все на сайт (хостинг), смотрим, редактируем (по своему), еще раз закачиваем.
Чтоб создать новую страничку, скопируйте любую, не index, и переименуйте ее название. Сделайте ссылку на нее с индекс. Отредактируйте ее по своем, после тега <body>

Изменить картинку фона
Теперь открываем ustanovki.css (формат у него css) так-же в блокноте как index.html мы открывали
Вы можете исправить там что Вам надо и сохранить блокнотик. Копировать это туда ненужно. Там русский текст убран. Здесь читайте копию и пояснения.
Внимание, если картинку ФОНА нужно изменить только в нужной странице, клонируйте файл css с другим названием, и замените в нем ссылку на фото. На странице где нужно установить этот фон, замените ссылку на css файл, в теге "<link" (допустим <link rel="stylesheet" href="2.css" type="text/css" />)

body{
font-family: Arial, sans-serif;
color: #3300CC; <!-- Номер цвета текста на всех страничках сайта Можно изменить на другой-->
line-height: 1.66em;
margin: 0px;
padding: 0px;
vertical-align: 12%;
background-position: right top;
width: auto;
right: auto;
word-spacing: normal;
text-align: left;
font-size: 12px;
background-color: #FFFFFF; <!-- Цвет фона-->
font-style: normal;
font-weight: normal;
}

a:link, a:visited, a:hover { <!-- Настройки уже посещенной ссылки-->
color: #3300CC;
text-decoration: underline; <!-- Подчеркнуто-->
}

a:hover { <!-- Настройки ссылки до наджатия-->
text-decoration: underline;
}

label{
font: bold 100% Arial,sans-serif;
color: #334d55;
}

#content{
float:left;
width: 99%;
margin: 0;
background-color: #
FFFFFF; <!-- Цвет фона белый-->
background-image: url
(logo.jpg);<!-- Адрес картинки которая отображается как фоновая Старайтесь чтоб ее Вес небыл большим (до 30 кб). Можете загрузить свою картинку с тем-же названием-->
background-repeat:
no-repeat; <!--Не размножается. Есть еще repeat / repeat-y / repeat-x повтор, по вертикали, по горизонтали -->
background-position: left top;
clear: left;
padding: 0;
}




Если что-то не работает и Вы не смогли разобраться, спрашивайте специалистов, не угадывайте

НАУЧИТЬСЯ ВЫИСКИВАТЬ ОТВЕТ
Если вы не знаете как создать ссылку на е-маил, откройте любую страницу в интернете где имеется такая ссылка. Нажмите правой кнопкой мыши и выбирайте ПОКАЗАТЬ ИСХОДНИК (Show Source)), или КОД (Code), или скачайте к себе на компьютер страничку, и откройте блокнотом. В поиске по коду введите нужное слово (е-маил допустим который видели) и посмотрите как он обведен ТЕГАМИ. Однако не следует изучать как делать выпадающие менюшки, анкеты, супер навороты. Это требует знаний JavaScript (язык программирования). И лишняя трата времени.

Важно, картинки иногда могут незагружаться, поскольку на сервере они имеют разрешение написанное заглавными "JPG" вместо "jpg" Ссылаться нужно будет kartinka.JPG, тоже и с gif форматом.

На своих страничках обязательно обращяйте внимание на теги "<meta name="Description" " и "<meta name="Keywords" " и их содержимое. Это для поисковиков,и заголовков в обозревтеле.

По поводу Флэш, (роликов, анимации). Не рекомендуется тратить время. Нарисуйте фоновую картинку jpg, не размножая, и не губите время. Флэш нужен для программ, но графика если ее не так много, не требует флэш технологий.




NostradamYs.ru