|
| |
Бесплатные занятия по созданию и раскрутке сайтов
Копирую переписку по электронной почте:
Привет Всем!
Попробую первый урок веб-дизайна в общую рассылку, на следующие Вы можете
подписаться на моем сайте.
Уроки будут бесплатны, консультации то же... - это не значит, что
бесплатно - это сильно дорого
(заходит красивая девушка в магазин - там молодой человек вылупленными
глазами...
девушка - сколько это стоит?
молодой чел. с игривыми глазками - для Вас бесплатно
она - нет, бесплатно для меня это сильно дорого...)
Бесплатно - это за символическую плату в виде ссылок на мои сайты, на тот
случай, если Вы станете крутым веб-меном или крутой веб-вуменой и будете
штамповать и раскручивать сайты так же легко, как пишите презентации и
любовные письма...
Начнем:
1. Запасаемся програмным:
Находим менеджер файлов - ДискоКомандир, Виндовс-Командер, Фар и т.д.
Менеджер файлов необходим для удобной закачки файлов на сервак "в инете"
http://snkey.net/download/webstudio/wssetup_ru.exe - набор программ для
создания сайтов и изучения тегов от российского производителя!
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
- открываем его в коде и добавляем после тега </H1> теги <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 то Вы увидите результат - картинка под
надписью...
Теперь отправляем "файло в инет":
На народ, в свой аккаунт, загрузка файлов- обзор первый выбираете
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 - запись создана, при подключенном инете на неё ентер -
подключится к народу и Вы в панели увидите свои фалы, лежащие на народе...
справа преходите в каталог с сайтом (до этого вы уже изменили файлы сайта,
поменяли содержание и т.д.) и далее сравнили директории, когда
курсор в левой панели и заменили файлы в инете копированием и заменой... не
разберетесь - спрашивайте.
Работа фтп-клиента в Виндовс-Командер:
В меню подключение-соединиться с фтп-сервером выбрали добавить и создали учетную запись:
- заголовок любой, чтобы Вам понятнее на какой сайт руку поднимаете - если учетных записей много...
- адрес:порт - адрес сервака, например by.ru порт не обязательно
- учетная запись - логин(например idei.by.ru)
- пароль - наверно понятно что писать...
все остальное как есть по умолчанию...
потом если тыкнуть кнопку соединиться, да еще если Вы в сети, а до этого курсором был выделен какой-нибудь файл на левой (или правой) панели - то соответственно в левой или правой панели(где до этого был курсор) появятся каталоги Вашего аккаунта на серваке. Что с ним делать - наверно разберетесь. Преимущества Windows-Comander перед некоторыми остальными файл-менеджерами - это то, что перед копированием на сервак ставим птичку "перевести все имена в нижний регистр" и больше нас не волнует проблемы больших и малых букв в интернете, т.к. многие серваки отличают большие буквы в названиях файлов и малые и у Вас(нас) могут быть проблемы с отображением например картинок в документе или в работе ссылок... (html-лить надо тоже привыкнуть малыми буквами)
В любом менеджере файлов обычно есть стандартная команда - сравинить директории. После сравнения директорий, допустим справа файлы в инете, в левой панели - локальные(новые и измененные), копируем измененные и новые файлы на сервак, при копировании измененных "менеджер файлов" спросит о замене - подтвердить... и т.д.
по моему в фаре эьто делается так - Ф9- сомандс-compsre folders...
в Виндовс-Командере: выделение-сравнить каталоги...
С уважением
Рашид
Привет процветающим Веб-Мастерам! Еще одно полезное занятие по
"веб-дизайну": Часто для форматирования хтмл документа дизайнер использует
таблицы как с видимыми границами ячеек, так и с невидимыми(последнее
чаще). С помощью таблиц можно решить многие проблемы "красивого"
размещения информации в веб... Пример скачайте здесь, скопируйте файлы в одну
папку и откройте хтмл документ... Поясняю: Для размещения информации
была использована таблица с тремя столбцами, она описана тегами:
<table> <tr> <tb></tb> <tb></tb>
<tb></tb> </tr> </table>, где <tr></tr> -
строка таблицы, <tb></tb> - ячейка(в данном случае и
столбец таблицы), информация внутри ячейки отображается в броузере как в
столбце определенной ширины, её можно задать атрибутом WIDTH="20%" - так и
задана ширина первого столбца(20% от ширины всей таблицы) Далее в
одной ячейке вставлена еще таблица с 4-мя строками и одним столбцом - типа
размещены ссылки... и цветастые ячейки, сами поиграйте цветами и поймите
какой атрибут описывает цвет фона ячейки, а так же цвет фона
страницы... Поиграйтесь другими тегами и атрибутами в документе(в коде
хтмл), сохраняйте, обновляйте в броузере и увидите предназначение тегов и
атрибутов в результатах отображения Успехов! С
уважением Рашид msd.com.ua
Как интернет помогает в развитии бизнеса
Трехмерная и двухмерная анимация
Для чего нам сайт?
Возможности интернет
20$ за сайт. Почему так дешево?
Особенности национальной интернет торговли.
|
|