«Практика без теории слепа. Теория без практики мертва.»

Чтобы не потеряться в потемках хостинга и не заснуть при изучении языка html, мы выберем наиболее динамичный способ погружения в океан веб-дизайна.

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

Как ни странно, но программа для создания сайтов у вас тоже есть и вы тоже умеете ею пользоваться: это Microsoft Word.

Создание главной страницы сайта.

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

Теперь выберите в меню Word: «Файл» — «Сохранить как».
В открывшемся окне выберите «Тип файла» — «Веб-страница (*.htm; *.html)»
Файл главной страницы сайта обязательно должен называться index.html. Возможное альтернативное название default.html. Если название файла главной страницы будет другим, его можно будет увидеть в Интернете, только указав фактическое имя файла, например, http://worddesigner.narod.ru/myfile.html А файл с именем index.html или default.html откроется, если в поле ввода браузера введен только адрес домена, например: http://мой сайт.ru

Сохраненный файл index.html (он теперь называется html-страница) с расширением .html откройте с помощью вашего браузера. Можете увидеть, как будет выглядеть ваша страница в Интернете.

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

Попробуйте открыть ту же страницу с помощью другого браузера, например, если у вас Windows, то по умолчанию уже стоит Internet Explorer, Яндекс предлагает бесплатно загрузить Firefox, а Google — Chrom. Opera тоже не будет лишней. Профессиональные сайты должны одинаково хорошо выглядеть во всех популярных браузерах, по крайней мере, популярных в тех странах, для которых предназначен сайт.

Поэкспериментируйте также с разрешением экрана: вы увидите, что форматирование текста в браузере в зависимости от разрешения работает совсем не так, как в привычных текстовых редакторах. Кроме этого, попробуйте изменять размер окна браузера и посмотрите, как будет меняться расположение строк текста в браузере.

Итак, файл главной страницы сайта у вас уже есть, осталось выложить его в Интернет. Чтобы сделать это, тоже не потребуется никаких программ, кроме вашего браузера.

Регистрация домена, получение хостинга

Зайдите на сайт http://www.hotbox.ru и зарегистрируйтесь там. ВНИМАНИЕ: имя пользователя и зона домена, которые вы выберите, будет в дальнейшем полным именем вашего домена. Так, если вы выберите имя почтового ящика мой сайт@land.ru, то ваш сайт будет располагаться по адресу: http://мой сайт.land.ru

Войдите в почту сайта и выберите вкладку «Сайт». Внимательно читайте все, что там написано. Необходимо найти кнопку «Загрузить файл», нажать ее, выбрать файл для загрузки — это должен быть тот самый файл index.html на вашем компьютере, который вы создали. Загрузите файл. Если у вас модемное соединение Dial-Up (старого типа), необходимо подождать несколько минут.

Теперь откройте другое окно браузера, и в поле ввода наберите адрес вашего сайта: http://мой сай.land.ru Откроется главная страница вашего первого сайта.

Размещение фотографии на главной странице сайта.

Если вы хотите разместить на сайте свою фотографию, нужно подготовить соответствующий файл. Чтобы разместить фотографию на главной странице своего сайта, с помощью редактора Word откройте на своем компьютере созданный ранее файл index.html Поставьте курсор на то место на странице, куда вы хотели бы поместить фотографию, выберите в меню Вставка — Рисунок — Из файла. В открывшемся окне выберите графический файл, который нужно вставить, и вставьте его.

Если размер изображения на странице вас не устраивает, можете изменить его. Для этого щелкните левой кнопкой мыши на графическом изображении — вокруг изображения появится рамка с маленькими квадратиками по периметру рамки. Поставьте курсор мышки на квадратик в правом нижнем углу — в этом месте появится двунаправленная стрелка. Теперь нажмите на левую кнопку мыши — стрелка превратится в крест. Не отпуская кнопки мыши, потяните вправо-вниз для увеличения размера изображения или влево-вверх для уменьшения размера изображения.

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

Теперь сохраните файл. В паке, где вы храните ваш файл index.html, появится папка index.files Посмотрите, что лежит в этой в этой папке: несколько графических файлов расширением .jpg, .png, или .gif в зависимости от типа файла, который вы вставляли в документ, а также файл filelist.xml Можете открыть в браузере измененный файл index.html и посмотреть, что получилось.

Вы разместили изображение на главной странице локальной копии сайта, расположенной на вашем компьютере. Чтобы изображение стало доступным в Интернете, необходимо сделать следующее.

Войдите в почту hotbox.ru со своим именем пользователя и паролем, если ранее вы из нее вышли. Зайдите на сайт. Выберите вкладку создать папку и задайте имя папки «index.html». В общем случае имя папки должно быть таки же, как на локальной копии сайта на вашем компьютере. После того, как вы создали папку на сервере, обязательно войдите внутрь этой папки. В противном случае файлы изображений будут загружаться в корень сайта, а главная страница будет пытаться их загружать из папки «index.html».

Если вы вошли в папку «index.html», выберите вкладку «Загрузить файл». Поочередно загрузите в папку, расположенную на сервере, все файлы, расположенные в одноименной папке на вашем компьютере.

Все. Можете открывать браузер и набирать в нем адрес своего сайта.

Создание массива Интернет-страниц на вашем сайте

В редакторе Word создайте еще один файл, например, list.doc, в котором будет приведен список чего бы то ни было (услуг, товаров, цен, список источников информации или ссылок на интересные Интернет-ресурсы) и сохраните его в формате html — list.html как вы это уже делали при сохранении файла index.html

Теперь откройте в Word файл index.html В нужном для вас месте наберите заголовок «Список…», выделите левой кнопки мыши слово «Список» или целую фразу с этим словом, на черном прямоугольнике выделения щелкните правой кнопкой мыши. В открывшемся контекстном меню выберите «Гиперссылка». В открывшемся окне проводника выберите файл list.html и нажмите ОК. Слово «Список…» приобрело светло синий цвет и стало подчеркнутым. Сохраните файл

Можете сделать обратную ссылку. Для этого откройте файл list.html, в верхнем левом углу наберите «На главную страницу», аналогично выделите всю фразу, в контекстном меню выберите «Гиперссылка», а в открывшемся окне проводника файл index.html Сохраните файл.

Для того, чтобы сделать внешнюю гиперссылку (ссылку, указывающую на ресурс в Интернете), так же наберите в редактируемом файле, например, «Википедия», выделите это слово, выберите в контекстном меню гиперссылка, а в открывшемся окне проводника в поле «Адрес:» наберите: http://ru.wikipedia.org и нажмите ОК. Сохраните файл.

Теперь для того, чтобы все то же, что вы можете видеть, загружая файлы на вашем компьютере, можно было видеть в Интернете, необходимо загрузить на ваш сайт файл list.html И не забыть заново загрузить измененный файл index.html Если с графическими изображениями на странице никакие манипуляции не делались, то файлы из папки «index.files» заново отправлять на сервер не нужно.

Пояснения.

1. На сайте hotbox.ru вам предоставляется бесплатный хостинг — место для размещения файлов сайта, и сервис управления сайтом, с помощью которого вы можете загружать файлы, создавать папки, удалять, перемещать файлы из одних папок в другие.
2. Вам предоставлен бесплатный домен третьего уровня. Что это такое ? ru — это первый уровень, land.ru -домен второго уровня, а ваше имя worddesigner стоит третьим в полном имени домена worddesigner.land.ru

Предупреждения.

1. Очень скоро вы увидите недостатки бесплатного хостинга. На страницах вашего сайта появится реклама, причем не всегда корректная.
2. Вместо hotbox.ru вы можете найти другие сайты, предоставляющие бесплатный хостинг. Не следует размещать на таких доменах серьезные долгосрочные проекты. Этот домен принадлежит не вам, а компании, предоставившей сервис бесплатного хостинга. Через какое-то время компания может просто отменить сервис, и «ваше» доменное имя пропадет — необходимо будет размещать файлы сайта на другом домене, но, самое главное, вам придется заново размещать информацию о новом адресе сайта.

Заключение.

Показанный экспресс-метод позволяет вам в течение одного вечера создать сайт, зарегистрировать домен, получить хостинг, разместить сайт в Интернете и почувствовать себя веб-мастером.

Для улучшения качества сайта необходимо сменить уровень домена с 3-го до 2-го, поменять бесплатный хостинг на платный, сменить Word на HTML-редактор, установить ftp-клиент (если он не встроен в html-редактор), установить графический редактор.

В бесплатном варианте можно использовать:
визуальный HTML-редактор Microsoft SharePoint Designer под Windows или Quanta Plus под Linux;
кроссплатформенный графический редактор GIMP под Windows и Linux.

В затратном варианте предпочтительно использовать:
визуальный HTML-редактор Adobe Dreamweaver;
графический редактор Adobe Fireworks, удобный для большинства графических задач при Web-дизайне, для профессионального графического дизайна целесообразен Adobe PhotoShop.

В любом варианте необходимо постепенно изучать язык разметки HTML и каскадных таблиц стилей CSS. Возможности сайта ограничиваются не интерфейсными возможностями HTML-редакторов, а возможностями самого HTML и CSS, JavaScript, PHP, Perl, Python и других языков программирования, а также искусством их применения для разработки сайта. Кроме того, исправления ошибок, которые неизбежно возникают, невозможно делать в визуальном режиме, для этого необходимо понимать разметку.

Рекомендуем по теме:

Продвигаем свой сайт.Сео
Раскрутка сайтов. Вся правда В последнее время обсуждений по поводу продвижения сайтов ведется немало. Тематика на самом деле не слишком изучена для большинства владельцев сайта, ...
Как заработать на продаже фотографий
Как заработать на продаже фотографий Фотосъёмка — дорогое занятие, которое может приносить солидные суммы профессиональному фотографу. Появление на рынке различных графических программ и всевозможных гаджетов, ...
Бизнес-идея — изготовление и продажа визиток
Бизнес-идея — изготовление и продажа визиток Нет необходимости описывать важность такого атрибута делового человека, как визитки. Сейчас их могут предложить множество источников, среди которых ...
Выбираем лучший кредит для бизнеса
  Кредитными денежными средствами пользуются не только физические, но и юридические лиц. Причем, прибегают они к займам ничуть не реже, чем частники. Кредит для бизнеса ...
Как правильно оценить бизнес-идею? Советы для начинающих предпринимателей
Как правильно оценить бизнес-идею? Советы для начинающих предпринимателей Каждый владелец крупной корпорации когда-то был начинающим предпринимателем, которому постоянно не хватало либо денег на реализацию новых ...