WEB мастерская

Бесплатное создание сайтов

Видео уроки по созданию сайтов

Или мы предлагаем бесплатный хостинг в пределах 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> &nbsp; <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">&nbsp; ссылка 1</td>
</tr>
<tr>
<td bgcolor="#0000FF">&nbsp; ссылка 2</td>
</tr>
<tr>
<td>&nbsp; ссылка 3</td>
</tr>
<tr>
<td>&nbsp; ссылка 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-мя строками и одним
столбцом - типа размещены ссылки... и цветастые ячейки, сами поиграйте
цветами и поймите какой атрибут описывает цвет фона ячейки, а так же цвет
фона страницы...
Тег &nbsp; - это невидимый «принудительный пробел», можно сделать длинный пробел так: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; и т.д.
Поиграйтесь другими тегами и атрибутами в документе(в коде хтмл),
сохраняйте, обновляйте в браузере и увидите предназначение тегов и атрибутов
в результатах отображения.
Сегодня (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г.

Видео уроки по созданию сайтов

WEB мастерская

Обзор популярных модулей Drupal для создания сайтов

Модуль представляет собой набор PHP, CSS и JavaScript файлов, которые используются для расширения функционала сайта. Базовая установка CMS Drupal включает 10-20 компонентов. Установка дополнительных расширений проводится, исходя из особенностей проекта. …

Разработка строительного сайта — кейс веб-студии TOTONIS

Ваш бизнес связан со строительной тематикой? Хотите заказать строительный сайт, но не знаете, каким именно он должен быть? Доверьтесь профессионалам! Для того чтобы понять, каким именно должен быть ваш сайт …

Зачем собирать семантическое ядро для сайта

Это поможет вам разработать собственные идеи продвижения и расширения бизнеса в сети, опираясь на их опыт.

Как с нами связаться:

Украина:
г.Александрия
тел./факс +38 05235  77193 Бухгалтерия
+38 050 512 11 94 — гл. инженер-менеджер (продажи всего оборудования)

+38 050 457 13 30 — Рашид - продажи новинок
e-mail: msd@msd.com.ua
Схема проезда к производственному офису:
Схема проезда к МСД

Оперативная связь

Укажите свой телефон или адрес эл. почты — наш менеджер перезвонит Вам в удобное для Вас время.