• Авторизация


Создание сайта за пятнадцать минут 09-04-2013 08:52 к комментариям - к полной версии - понравилось!

Это цитата сообщения BraveDefender Оригинальное сообщение

Создание сайта за пятнадцать минут



«Для чего это мне нужно?» — спросите вы. Не знаю, может быть, есть желание сделать без привлечения специалистов простой сайт-визитку своего маленького бизнеса или разместить в Интернете свои работы, фотографии, стихи.


Обещал рассказать, как сделать простой, но функциональный и уникальный сайт на Яндексе — рассказываю. Нам понадобится отличная программка для новичков Web Page Maker (скачать, 4.39 Мб), с ее помощью вы сможете создать свои веб-странички безо всяких знаний HTML или CSS. Сразу замечу, что кроме этой программы, есть множество других.


[221x240]


Если кто-то не знает, как процитировать пост, не стесняетесь - жмите на эту ссылку. Если оно вам не надо - тоже не стесняйтесь, напишите: "Саша, ты уже достал всех со своими уроками!" Будем совершенствоваться дальше :)



Регистрация аккаунта на Яндекс.Ру


Для начала, регистрируем аккаунт в системе «Яндекс» — ссылка для регистрации (можно, конечно, выбрать любой хостинг, но в данном примере используется именно этот).


Подберите нормальный логин, т.к. он будет не только именем почтового ящика, но и адресом сайта — ИМЯ_САЙТА.NAROD.RU (если marishechka1985 подходит для e-mail, то для сайта — вопрос спорный).


[361x351]


Заполняем регистрационную информацию. Если вы укажите другой e-mail или мобильный телефон, то для дальнейшей работы сайта необходимо будет их подтвердить (это не больно).


[361x383]


Проверяем информацию, которую указали, и рассказываем «о себе еще немного» (по желанию).


[361x273]


В верхнем меню выбираем «еще» — подменю «Народ» для перехода в Мастерскую нового сайта.


[361x159]


На следующей странице переходим по ссылке «Создать» в меню «Мой сайт». Яндекс предлагает свой визуальный Конструктор для создания сайтов. Можете попробовать и сравнить — уверен, описанный ниже способ вам понравится больше.


[361x247]


Страничка Мастерской выглядит примерно так, если кто-нибудь не видел. Познакомились? Пока «отставляем» браузер в сторону и запускаем программу Web Page Maker.


[361x253]


Создание html-страниц и файлов сайта в программе Web Page Maker


Подробную инструкцию-справку по использованию программы (на русском языке) можно прочитать, нажав на кнопку «Справка» в меню или клавишу F1. Но в этом посте я опишу свои действия по созданию простенького сайта — естественно, если постараться, можно всё сделать в тысячу раз красивее.


[361x263]


В меню «Файл» есть пункт «Новый сайт из шаблона». Т.е средствами программы можно, вообще, просто выбрать подготовленный шаблон сайта.


[361x213]


Предложенные шаблоны разделены на три раздела по несколько штук в каждом.


[361x279]


Вот, например, образец одного из них, имеющий три-четыре разные страницы (главную, информацию об авторе, фотоальбом и т.п.).


[361x263]


Но мы собрались делать уникальный сайт, поэтому будем его создавать сами постепенно. Хочу еще раз обратить внимание, что в этом посте приведен пример простого сайта, созданного на скорую руку — он не будет отличаться ни красотой, ни какими-то дизайнерскими решениями. Вы всего лишь прочитаете об этапах работы с программой. А потом сможете выбрать всё сами: цвета, картинки, размещение элементов и многое другое.


Возможно, намного удобнее размещать элементы сайта, если включить в меню «Правка» показ сетки и указателей границ страничек.


[361x336]


Основные пункты меню, которые будем использовать, это «Вставка» (текст, изображения, фигура, панели, линии, таблицы, формы, объекты, флэшки и так далее)...


[361x235]


...и «Формат». С него и начнем: в этом меню, первым делом, выбираем «Свойства страницы».


[361x98]


Тут несколько понятных рисунков без комментариев — переключаясь на разные вкладки окна «Свойства страницы», указываем (или не указываем) разную информацию.


Мета Тэги


[361x279]


Свойства фона


[361x279]


Вид страницы


[361x279]


И так далее.


[361x279]


[361x279]


Далее вставляем шапку сайта в виде, например, WordArt («Вставка» — «Изображение» — «WordArt»). Можно в шапку поставить и горизонтальную панель-картинку.


[361x128]


В галереи выбираем формат надписи.


[361x264]


Нажимаем OK и вводим наш текст. Его стиль и форма всегда можно поменять.


[361x257]


Теперь наш будущий сайт «украсила» такая вот надпись.


[361x167]


Примечание: ВСЕ элементы сайта в программе Web Page Maker можно редактировать, если дважды кликнуть на них. Для перемещения — один клик (появление четырехконечной стрелки).


Далее выбираем в меню «Панель навигации» и один из предложенных шаблонов.


[361x279]


Панели также можно редактировать, устанавливая различные параметры.


[361x242]


Теперь продублируем Панель навигации под шапкой сайта. Правой кнопкой на элементе и скопировать.


[307x193]


Затем вставить копию.


[361x236]


Редактируем новую панель и указываем «Формат» - «Горизонтальное расположение».


[361x239]


Теперь на нашем страшненьком сайте две панели: вертикальная и горизонтальная.


[361x149]


Добавим картинку: кнопка «Изображение» - «Из файла».


[361x207]


Тянем за уголок вставленной картинки и делаем ее нужного размера. Перемещение картинки (как и других элементов) — активировать ее кликом и тащить.


[361x259]


Добавим еще какие-нибудь элементы в наш пример. В данном случае, добавлена разделительная линия.


[361x265]


Теперь добавляем текст (кнопка «Текст»).


[361x315]


Двойной клик на текстовом блоке позволит нам его отредактировать: вставить буковки, указать их формат и так далее.


[361x238]


Вот такая страничка получилась в итоге.


[361x288]


Примечание: чтобы сделать слово ссылкой, нужно его выделить, нажать на кнопку «Ссылка» и указать данные ссылки.


[361x242]


Одной странички на сайте нам недостаточно, поэтому создадим еще две (пока что такие же, как и главная index.html).


Двойной клик на панели навигации и переименовываем ссылки.


[361x307]


Теперь правый клик на страничке «index» в панели «Содержание Сайта» — выбрать «Клонировать страницы». Можно просто нажать соответствующую кнопочку.


[352x259]


Снова переходим к редактированию панели навигации и для каждой ссылки в двух панелях на КАЖДОЙ странице (index, second и third) указываем, куда приведет посетителя нажатие на кнопку.


[361x305]


Теперь наш тренировочный сайт выглядим в окне программы примерно так.


[361x287]


После создания сайта, проект через меню «Файл» нужно экспортировать в HTML (выберите или создайте для этого новую папку).


[361x249]


Загрузка html-страниц и файлов сайта на сервер Яндекса


В выбранной для экспорта папке появятся html-файлы ваших страничек и папка с файлами (изображения и т.п.).


[361x131]


Всё это богатство теперь нужно загрузить на сервер, чтобы его увидели не только вы, но любой пользователь Интернета. Поэтому возвращаемся в браузер на страничку Мастерской Яндекса. Загрузить файлы на Яндекс.Народ можно по FTP или через панель Менеджера загрузок.


Страница справки по FTP на Яндексе - http://narod.yandex.ru/help/09.yhtml. Загрузить можно как через элементарный Total Commander, так и через специальные FTP-клиенты (мне, например, нравится пользоваться CuteFTP 8 Professional — подробнее о нем).


[361x221]


Загрузим файлы через браузер: ссылка «Загрузка файлов на сайт» — «Загрузить файлы».


[361x124]


Пока у нас только одна, корневая папка. В нее загрузим только HTML-файлы (index, second и third).


[361x278]


[361x37]


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


[361x150]


Новая папка должна называться так же, как и созданная программой Web Page Maker — «images».


[361x129]


Все картинки-файлы из папки images на компьютере загружаем в такую же созданную папку на сервере.


[361x274]


Вот, в принципе, и всё. Как вы могли заметить, в примере сайт создавался по адресу http://valezsite.narod.ru. Попробуйте перейти по этой ссылке.


[361x221]


Примечание: если вас раздражает «яндексовсвая» реклама, не нравится название сайта с narod.ru или есть еще какие-нибудь причины, можете почитать на сайте http://blogmann.co.cc, как я зарегистрировал БЕСПЛАТНЫЕ домен и хостинг, настроил и запустил БЕСПЛАТНЫЙ блог в Интернете.


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


P.S. Владельцам сайтов на Яндексе может быть интересен пост "Как сделать простую RSS-ленту для простого сайта".


Спасибо за внимание! Пошел разминать затекшие части тела.

Интернет. В порядке бреда (с)

вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Создание сайта за пятнадцать минут | ЛИДИЯ_ИВЛЕВА - Дневник ЛИДИЯ_ИВЛЕВА | Лента друзей ЛИДИЯ_ИВЛЕВА / Полная версия Добавить в друзья Страницы: раньше»