Бесплатное создание сайтов
Видео уроки по созданию сайтов
Или мы предлагаем бесплатный хостинг в пределах 20Мб и создание сайта – Вы платите только за имя, т.е. домен регистрируется на Ваши данные, но одно условие – ссылка на наш сайт внизу на каждой странице Вашего сайта. Содержание сайта тоже за Вами (в ворде, екселе или теле сообщений по эл. почте rashid@bigmir.net – как Вам удобнее).
Видео уроки по созданию сайтов
Бесплатные занятия по созданию и раскрутке сайтов
(Версия 2003-2004гг., дополнено 2010г.)
Привет Всем!
Уроки будут бесплатны, консультации то же... - это не значит, что бесплатно - это сильно дорого
(заходит красивая девушка в магазин - там молодой человек вылупленными глазами...
девушка - сколько это стоит?
молодой чел. с игривыми глазками - для Вас бесплатно
она - нет, бесплатно для меня это сильно дорого...)
Бесплатно - это за символическую плату в виде ссылок на мои сайты, на тот случай, если Вы станете крутым веб-меном или крутой веб-вуменой и будете штамповать и раскручивать сайты так же легко, как пишите презентации и любовные письма...
Начнем:
1. Запасаемся программным обеспечением для создания сайтов, я пользуюсь блокнотом, Dreamweaver.CS4 и Total Commander XP – последние программы можно легко найти в интернете, бесплатно можно скачать на торрентах.
2. Пока скачиваются программки мы сделаем одну страницу и вывесим её без всяких программ подручными средствами:
Придумали содержание страницы, если ничего в голову не лезет - делаем белый квадрат или пишем название своего города(вот так, если в голову ничего не лезет сочиняются шедевры-конкуренты черному квадрату...)
Например:
Александрия
Я хочу чтобы "в интернете" это слово отображалось в браузере, ровно посередине и большими буквами и название сверху тоже!
Запускаем обычный виндовский блокнот и пишем:
<html>
<title> Александрия </title>
<body>
<br />
<br />
<br />
<br />
<br />
<h1 align=center>Александрия</h1>
</body></html>
Вы наверно уже поняли, что блокнот то вы запустите, но корявые символы писать...? зачем...? правильно - скопировать и заменить Александрию на Ваш город или на пустоту, чтобы Малевич знал наших - белый квадрат тоже рисовать можем...
Проделайте по дороге еще одну операцию в винде - при открытии любой папки в меню вид-свойства папки-вид- убрать птичку не показывать расширения для зарегистрированных типов файлов - применить... Это нужно, чтобы легче менять расширение созданных текстовых документов.
Далее сохраняем блокнотовский документик где Вам угодно под любым именем, пусть на c:/www/1.тхт например...
Потом меняем его название на index.html (в винде тыкнули на название 1.тхт и заменили на index.html при этом не пугайтесь, что винда при этом что-то скажет - жмите окей и если у Вас стандартные настройки, то вид иконки файла поменяется на интернет-екплоеровский - так и должно быть...)
Теперь можем давить левым батоном мыши на файл два раза (или один - у кого как...) и открывать и наслаждаться конкурентом Малевича... Если название города не посередине - в интернет-эксплоере в меню вид-просмотр html-кода открывается тот же блокнот и добавляем несколько раз тег
<br />там где он уже стоит, сохраняем и обновляем в ИЕ.5 (или другом браузере) - название должно переместиться ниже, а до нас дойдет, что тег
<br /> обозначает на "языке хтмл" переход на новую строку, а особо умные зададутся вопросом - почему мы сразу не можем задать каким-нибудь тегом выравнивание по центру по вертикали? Я такого тега не знаю, возможно одним тегом выравнивание по вертикали не обеспечится, поэтому приходится пользоваться тем что есть... и то не точное позиционирование - зависит от разрешения (величины) открытого окна...
Теперь залазим в инет, на narod.ru и там слева вверху - регистрация, регистрируем аккаунт(похоже на регистрацию почты), получаем логин и пароль (т.е. их сами придумываем, логин такой - чтобы ни у кого небыло...). В итоге получаем название сайта типа www.rd132.narod.ru - только что зарегистрировал и вывесил страничку... У Вас должно быть свое... Для отправки файла "в инет на сервак" входим в свой аккаунт, нажимаем ссылку загрузка файлов, на народе увидите справа под управлением файлов, затем жмем обзор (любой "обзор" на выбор, логичнее первый... но девушкам можно и другой - разницы нет...) и выбираем на своем компе сделанный index.html и жмем загрузить файлы... Далее для проверки набираем адрес зарегистрированного сайта в адресной строке - www.xxx.narod.ru (где ххх - это не порнуха, а Ваш логин...) и проверяем что видим в обозревателе - должны увидеть то что хотели... Ссылку пришлите мне полюбоваться - кто пришлет, того и будем считать подписанным на индивидуальные курсы "виртуальной кройки и шитья"...
С уважением
Рашид
msd.com.ua
Теперь вставим в страничку картинку.
Для этого сначала подготовим её в фотошопе или другом редакторе фото... Я умею в фотошопе, поэтому последовательно по фотошопу:
открываем фото или картинку в фотошопе 7.0 на русском языке, будем считать что картинка в *.jpg - открываем, выбираем при открытии файлы jpg(я уже расчитываю, что вы имеете картинку на диске в жпг...) выбираем инструмент выделения, выделяем на фото область, которую хотим видеть "на фото в интернет" и подрезаем картинку - меню изображение-кадрировать или обрезать(можно и без этой операции - это просто для навыков работы с фотошопом... и если картинка уже такая, какой Вы хотите её видеть то так же эта операция не нужна)
В меню изображение выбираем размер изображения и ставим там разрешение 72 пиксель на дюйм, записываем пока на бумажку сколько точек или пикселей он получается в высоту(у меня 384, у Вас свой размер) и ширину (у меня 247), потом ок.- автоматом и картинка уменьшится по всем параметрам(если до этого было разрешение больше...)
Далее выбираем меню файл-сохранить как- "имя на англ." формат jpg, выбираем качество где-то 5 (на Ваше усмотрение... нужно подобрать качество так, чтобы вес файла был меньше и что-то еще видно было и понятно...) и сохраняем например в той же папке где index.html и пусть под названием 001.jpg
Далее открываем index.html
- открываем его в коде и добавляем после тега теги
<div align=center><img SRC="001.jpg" ALT="Описание картинки" WIDTH="247" HEIGHT="384" BORDER="0"/></div>:
<html>
<title> Александрия </title>
<body>
<br />
<br />
<br />
<br />
<br />
<h1 align=center>Александрия</h1>
<div align=center><img SRC="001.jpg" ALT="Наш сотрудник делает шлакоблоки" WIDTH="247" HEIGHT="384" BORDER="0"/></div>
</body>
</html>
Исправляем цифры ширины и высот WIDTH="247" HEIGHT="384" на свои размеры картинки и сохраняем... Обновляем в браузере. Если в том же каталоге где index.html сейчас лежит 001.jpg то Вы увидите результат - картинка под надписью... Сегодня (2010г.) во многих современных браузерах обозначать размеры WIDTH="ххх" HEIGHT="ххх" при вставлении картинки в хтмл не обязательно, поэтому с записью этих размеров можно не заморачиватья.
Теперь отправляем "файло в инет":
На народ, в свой аккаунт, загрузка файлов- обзор первый выбираете index.html, второй обзор - выбираете 001.jpg - далее загрузить файлы(перезаписать существующий...) и опять проверка ссылки - моя вот http://rd132.narod.ru/
Жду Вашей!
С уважением
Рашид
msd.com.ua
Веб-мастеринг - одно из дел, где болтовня легко проверяется результатами "в инете"
Едем дальше:
Открыли индех, открыли код, затем файл сохранить как 1.нтмл, потом так же 2.нтмл - т.е. создали два (три вместе с индексом) файла хтмл в той же папке... Пока они одинаковы по содержанию и разные по названию...
Открываем код индекса и добавляем как у меня:
<html>
<title> Александрия </title>
<body>
<br />
<br />
<br />
<br />
<br />
<h1 align=center>Александрия</h1>
<div align=center><img SRC="001.jpg" ALT="Наш сотрудник делает шлакоблоки" WIDTH="247" HEIGHT="384"
BORDER="0"/></div>
<br />
<br />
<a HREF="1.html">1.</a> <a HREF="2.html">2.</a>
</body>
</html>
Далее- сохранить-обновить в броузере и посмотреть на результаты:
Я добавил два перехода на новую строку и 1. и 2. поместил в ссылки
теперь, если нажать на любую из них - перейдем на такие же страницы, но под другим названием...
Подготовим еще две картинки разные и аналогично предыдущему уроку, где мы вставляли картинку в документ вставим эти новые картинки в 1.html и 2.html
Если сейчас мы будем гулять по "своему сайту" -
то увидим еще и смену картинок... В "титлах" меняем "названия страничек на синем фоне" - например на описание новых картинок, так же и в теле надпись...
Добавляем в теле новых документов ссылку "на главную":
Это мой 1.html:
<html>
<title> Рашид </title>
<body>
<br />
<br />
<a HREF="index.html">На главную</a><br />
<br />
<br />
<h1 align=center>Рашид</h1>
<div align=center><img SRC="fotorashid.jpg" alt="Фото" WIDTH="160"
HEIGHT="386" BORDER="0"/></div>
</body>
</html>
Это мой 2-й:
<html>
<title> Женя с папой </title>
<body>
<br />
<br />
<a HREF="index.html">На главную</a>
<br />
<br />
<br />
<h1 align=center>Женя с папой</h1>
<div align=center><img SRC="evgeni.jpg" ALT="Семейное фото" WIDTH="500"
HEIGHT="1403" BORDER="0"/></div>
</body>
</html>
Итого у меня в папке накопилось уже 6 файлов - 3 хтмл и три картинки, можно сказать уже целый сайт!
Забрасываем все файлы на сервак (народ-аккаунт-загрузка файлов-обзоры....загрузить... Вы в курсе...)
Любуемся и даем ссылку мне полюбоваться
Моя ссылка там же - www.rd132.narod.ru
С уважением
Рашид
Далее нам нужны программы:
ДискоКомандир, Тотал Коммандер, Фар-менеджер или др. подобная, т.е. менеджер файлов нужен чтобы отправлять оптом файлы на сервак (по «ФТП клиенту»)
ДримВивер - чтобы не набирать теги вручную...
Работа фтп клиента по фару:
В Фаре:
нажимаем алт+ф2 переходим на фтп создаем учетную запись нажимая шифт+ф4 для народа выглядит так:
ftp://xxx:пароль@ftp.narod.ru - портов директорий заполнять не надо, вместо ххх - Ваш логин на народе, вместо пароля - Ваш пароль...
пароль тот же набили
описание сделали любое
далее save - запись создана, при подключенном инете на неё ентер - подключится к народу и Вы в панели увидите свои фалы, лежащие на народе...
справа переходите в каталог с сайтом (до этого вы уже изменили файлы сайта, поменяли содержание и т.д.) и далее сравнили директории, когда курсор в левой панели и заменили файлы в инете копированием и заменой... не разберетесь - спрашивайте.
В любом менеджере файлов обычно есть стандартная команда - сравнить директории, где-то в фаре она тоже есть. После сравнения директорий, допустим справа файлы в инете, в левой панели - локальные(новые и измененные), копируем измененные и новые файлы на сервак, при копировании измененных "менеджер файлов" спросит о замене - подтвердить... и т.д.
по моему в фаре это делается так - Ф9- сомандс-compsre folders...
Большой недостаток этой настройки Фара - пароль виден для других пользователей или там можно как-то по-другому заполнить первую строку???
С уважением
Рашид
Привет процветающим Веб-Мастерам!
Еще одно полезное занятие по "веб-дизайну":
Часто для форматирования хтмл документа дизайнер использует таблицы как с
видимыми границами ячеек, так и с невидимыми(последнее чаще).
С помощью таблиц можно решить многие проблемы "красивого" размещения
информации в веб.
Например (скопируйте нижнее в код хтмл и смотрите в браузере):
<table width="95%" border="0">
<tr>
<td width="20%"><table width="95%" border="0">
<tr>
<td bgcolor="#FFFFCC"> ссылка 1</td>
</tr>
<tr>
<td bgcolor="#0000FF"> ссылка 2</td>
</tr>
<tr>
<td> ссылка 3</td>
</tr>
<tr>
<td> ссылка 4</td>
</tr>
</table>
</td>
<td></td>
<td></td>
</tr>
</table>
Поясняю:
Для размещения информации была использована таблица с тремя столбцами, она
описана тегами: <table> <tr> <tb></tb> <tb></tb> <tb></tb> </tr> </table>,
где
<tr></tr> - строка таблицы, <tb></tb> - ячейка(в данном случае и столбец
таблицы), информация внутри ячейки отображается в броузере как в столбце
определенной ширины, её можно задать атрибутом WIDTH="20%" - так и задана
ширина первого столбца(20% от ширины всей таблицы)
Далее в одной ячейке вставлена еще таблица с 4-мя строками и одним
столбцом - типа размещены ссылки... и цветастые ячейки, сами поиграйте
цветами и поймите какой атрибут описывает цвет фона ячейки, а так же цвет
фона страницы...
Тег - это невидимый «принудительный пробел», можно сделать длинный пробел так: и т.д.
Поиграйтесь другими тегами и атрибутами в документе(в коде хтмл),
сохраняйте, обновляйте в браузере и увидите предназначение тегов и атрибутов
в результатах отображения.
Сегодня (2010г.) я пользуюсь программой ДримВивер и для создания примера файла хтмл с таблицей легко написал (точнее повставлял) все теги и атрибуты с помощью этой программы – даже Т9 в телефоне отдыхает в сравнении с подсказкой и вставкой в программе Dreamweaver.CS4! Кстати, все девушки вокруг, и даже блондинки, легко пользуются Т9, все парни – мозгов не хватает, в том числе и у меня – и после этого блондинки не могут быть веб-мастерами?! Вернемся к ДримВиверу:
Открыли программу, создали файл хтмл, поставили курсор в нужное место (должен быть открыт код в меню программы), верхнее меню-вставка–таблица – выбрали количество строк-столбцов и ОК! Далее, каждому тегу(таблицы, столбца и т.д.) ссответствуют свои атрибуты, в данном случае например в теге
<td bgcolor="#0000FF"></td> задан атрибут цвета фона ячейки, в ДримВивере просто вставляем курсор в тег, нажимаем пробел и выскакивает подсказка, какие теги-атрибуты вставить – выбираем нужный и вставляем! Просто фантастика! Раньше такого не было, и возможно в простых редакторах хтмл такого нет! Как всё упростили – вообщем если поиграться в ДримВивере, то можно легко и просто делать десятки сайтов в день! Если конечно есть контент и материалы подготовлены – особенно картинки сайта требуют подготовки…
Успехов!
С уважением
Рашид
2003-04г(исправлено 2010г.)
msd.com.ua
Видео уроки по созданию сайтов
2010 год, Веб-Мастеринг по сравнению с началом 2000-ных немного изменился. Всё больше различных эффектов хтмл «работает на стороне сервера». Быстро распространяется PHP – язык программирования, почитайте в Википедии… Самое простое что нам дает ПШП – это не заморачиваться с обновлением протянутой по всему многостраничному сайту одинаковой информации (типа контактов, меню и т.д.). Теперь, если хотим поменять что-то в меню страницах – например добавить новый раздел, то достаточно изменить информацию в одном файле. В принципе и раньше в динамических страницах такое можно было делать скриптами на ява или других языках, но ПШП распространен сегодня намного больше! При созданном сайте, сегодня я пользуюсь программой на стороне сервера ВордПресс – каким-то чудом (точнее Человеком!) под названием «администратор сайта» она была установлена на моих «серверах с ПШП» и мне теперь, чтобы редактировать сайт, достаточно без всяких программ входить на него браузером, как «на свою почту в вебе, т.е. без почтового клиента» и там добавлять, менять страницы, каталоги и т.д.
Если в начале 2000-ных что такое SEO не знали не то что заказчики сайтов, но и многие веб-мастера, то теперь это направление набирает обороты! Как легко было раньше пробиться в десятку первых сайтов по нужному поисковому запросу! И намного труднее это стало сейчас! Новые сайты поисковики «практически не допускают» в первую десятку по популярным запросам – поэтому приходиться наполнять сайт полезным, нужным людям уникальным материалом – так хоть шансы на попадание в десятку по непопулярным запросам и добавление в закладки(в зависимости от нужной уникальности для пользователя).
Отдельно еще хочу уделить внимание доменам – если раньше я утверждал, что делайте сайты на бесплатных серверах – заказчику Ваших услуг от этого не холодно, не жарко, то сейчас думаю что всё таки лучше не пожалеть 10 баксов в год на достойнные имена своих детищ (т.е. сайтов). Хотя, как в фильме 99 франков, платный домен, как и любая реклама с понтами – это счет заказчиков на товары или услуги, т.е. при бесплатной рекламе можно получить нужный товар дешевле. Но дело не только в этом – бесплатные сервера «закрываются и падают», без причин у меня закрыли сайт idei.by.ru на неплохом вроде бесплатном хостинге by.ru. А с платными доменами есть гарантия, что вы не потеряете раскрученные проекты! Что касается хостинга – то такой же подход, место под сайты сегодня стоит копейки и лучше их не пожалеть. Или мы предлагаем бесплатный хостинг в пределах 20Мб и создание сайта – Вы платите только за имя, т.е. домен регистрируется на Ваши данные, но одно условие – ссылка на наш сайт внизу на каждой странице Вашего сайта. Содержание сайта тоже за Вами (в ворде, екселе или теле сообщений по эл. почте rashid@bigmir.net – как Вам удобнее).
С уважением
Рашид
7.02.10г.
Видео уроки по созданию сайтов
Несколько применений разных программ для облегчения жизни Веб-Мастера:
ДримВивер - очень легко открыть один или несколько документов и наделить определенные слова в тексте гиперссылками (как в Википедии). Для этого открыли документ(или кучу документов), в меню правка - найти и заменить, далее слово которое хотим превратить в ссылку меняем на такое же уже в тегах гиперссылки и уточняем что надо это проделать во всех открытых документах в исходном коде, не забудьте поставить пробелы до слова и после - а то и слова с таким корнем будут "полуссылочные"...
Если Вы не делаете сайты в ПШП - допустим мало страниц или не можете, а меню сайта из более чем 10-ка страниц надо изменить (добавить) - так же открываем всё в ДримВивере, правка-найти и заменить и выбираем уникальный код того места, куда надо например добавить новую ссылку - возможно только там определенная картинка вставлена или еще что и добавляем к этому коду на что хотим менять, т.е. тот же код плюс код новой ссылки... И так же в исходном коде всех документов меняем "легким движением батона мыши" - так и без ПШП и других "динамических языков программирования" тоже можно менять многостраничные сайты быстро и эффективно!
Как уже писал выше в уроках, в ДримВивере легко и просто поставить нужный атрибут в любой тег - даже если Вы его не знаете и не знаете может ли этот атрибут принадлежать этому тегу - так в большинстве случаев происходит у меня - я и понятия не имею какие атрибуты каким тегам могут принадлежать - просто ставлю курсор в тег, пробел и "играюсь" - сохраняю - пересматриваю - получаю нужный результат...
Когда мне встречается таблица в вордовском документе и лень переделывать её руками в код хтмл я пользуюсь распозновалкой CuneiForm v12, открываю этой распозновалкой например любой жпг, распознаю, удаляю всё содержимое в распознанном, вставляю туда таблицу из ворда и сохраняю как хтмл - код получается практически без мусора! Если просто таблицу или документ вордовский сохраните как хтмл - будет мусора больше чем на свалке и вес документа в несколько раз больше! Так же распозновалка текста из картинок CuneiForm v12 (типа ФайнРидера, только бесплатная!) пригодится при распозновании файлов так называемого дежавю формата, только надо еще запастись DjvuOCR - программа превращает дежавю в картинки тифы или жпги, которые потом с помощью CuneiForm v12 или ФайнРидера распознаем и превращаем в хтмл, ну потом раскручиваем всё это в технических или подобных библиотеках своих сайтов...
Рашид
8.02.10г.
