Делаем персональную веб-страничку самостоятельно!, ...или "Если руки не из ж..." |
| ||||||
Делаем персональную веб-страничку самостоятельно!, ...или "Если руки не из ж..." |
16.11.2007, 14:23
|
|
Старший научный сотрудник Форумчанин 200 28-August 07 Чугуев 7775 |
В обществе укоренилось такое мнение, что собственный сайт - это что-то супер-мега-сложно и дорого. Именно поэтому некоторые из форумчан пытаются убедить меня в неоценимом достоинстве сервиса таких ресурсов как Юкоз.
Что ж, тому, для кого от слова Справочник кидает в панику, кому влом сидеть долго и разбираться в превратностях азов сайтостроения, кто ценит свой творческий потенциал и не позволит грязному юкозу испаганить вашу индивидуальность, посвящаеться! Все когда-нибудь что-нить готовили... Кто яишницу, а кто и посерьёзней. Но в первый раз всё казалось сложнее, страшнее и невыполнимее. Так вот я вам докажу, что сделать собственную страничку в интернете не сложнее, чем сделать омлет))). Так что остаються те, кто уважает собственную стряпню))) - остальные любители фастфуда могут пока погулять.))) *** Начнем! Вам понадобится: голова...........1шт руки..............2шт(можно обойтись и 1) терпение........(побольше) фантазия........безграничное Определяем цель и общую идею нашего сайта. Как я уже говорил, что готовить мы будем небольшую страничку. А посвятим её... например, готике. Именно тема готических картинок вызвала на форуме немалый ажиотаж. Поэтому, да простят меня о сенсеи готической культуры, в моей некомпетентности... Как вы понимаете, цель страницы чисто наглядная. Дизайн не претендует на ваше хоть маломальски пристрастное внимание. Страница не обладает комплексным дизайном, а лишь совокупностью графики, основная функция которой показать, что где можно разместить. Всё делалось за время обеденного перерыва в офисе))))) Итак, запасаемся графикой, выложенной форумчанами на готическую тему. А лучше - малюем сами! Но так как время не позволяет, тырим картинки для этой странички. Для своей собственной, конечно же, добываем графику путем фотика, редактирования и мулевания - вложите частичку своей души в ваше творчество, а не пользуйтесь дешевой фотобанковской графикой)))) Для мулевания и нарезки было бы неплохо обзавестись фотошопом. Кому надо - в сети куча ссылок, если нет лишних трёх сотен баксов))) Для верстки я использовал Блокнот))) Можно ФронтПейджем, если есть. Начинать с Дримвивера не рекомендую - дохрена заморочек, кнопочек, иконок, которыми вы будете пользоваться с частотой один раз за всю жизнь... Ну, вроде всё готово, пора приступать... Ах да, вот что в конце должны получить: что-то не прикрепляется изображение. Если вот так: вот ссылка http://www.meshkoff.com/export/4.jpg |
|
|
16.11.2007, 14:47
|
|
Старый и очень хитрый Модератор 2834 8-October 05 Чугуев 363 |
И картинки не видны... На всякий случай - соединение с инетом есть.
-------------------- |
|
|
16.11.2007, 15:36
|
|
Старший научный сотрудник Форумчанин 200 28-August 07 Чугуев 7775 |
И картинки не видны... На всякий случай - соединение с инетом есть. Странно, у меня всё отображается... Решаем проблему квадратно-гнездовым методом:вызываем картинку вручную через контексное меню клацая правой кнопкой по слову "изображение" или что там выводит. Если всё равно ничего, тогда пробуем зайти сюда www.meshkoff.com/export/index.html Здесь картинки выложены в хронологии. Вот ссылки на файлы: www.meshkoff.com/export/1.jpg www.meshkoff.com/export/1.gif www.meshkoff.com/export/2.jpg www.meshkoff.com/export/2.gif www.meshkoff.com/export/3.jpg www.meshkoff.com/export/4.gif www.meshkoff.com/export/4.jpg аналогично не вижу картинку. моя - не ЧКС! пс. Решил проблемы - выбрал сохранить как Так картинки все таки видны? |
|
|
16.11.2007, 15:42
|
|
Заcлуженный постер ЧKС 1812 29-July 05 Україна, Харків 305 |
-------------------- Клявіятурте розум,почуття і волю клявіятурте! Не хватайте озлоблених у тюрми: вони самі собі тюрма. |
|
|
16.11.2007, 15:50
|
|
Старший научный сотрудник Форумчанин 200 28-August 07 Чугуев 7775 |
Так, ладно, едем дальше...
<center> </center> Вот это вот выравнивает всё по центру(нетрудно догадаться). А теперь самое "сложное". Надо создать таблицу по типу той что на картинке ранее и вложить в её ячейки необходимую графику, как в пазлах. <table width="100%" height="100%" cellpadding="0" cellspacing="0"> - прописываем начало таблицы и указываем её высоту и ширину.<tr> <td width="100%" height="150"> </td> </tr> <tr> <td width="100%" height="500" background="images/fon.jpg"> <img src="images/fon.jpg" width="1" height="500"> </td> </tr> <tr> <td width="100%" height="100%"> </td> </tr> </table> Запоминаем, что tr - это строки, td - колонки в этих строках. Тоже самое указываем высоту/ширину. Делаепм картинку фоном с помощью свойства background. Картинку вставляем с помощью тега img! Пишем где она находиться и ей размер. Вот собственно фон и готов! Если все правильно сделать получится что-то вроде такого: http://www.kirill.meshkoff.com/gothic/ http://www.meshkoff.com/gothic/ У кого что не получилось? |
|
|
16.11.2007, 16:26
|
|
Старший научный сотрудник Форумчанин 200 28-August 07 Чугуев 7775 |
Ну теперь осталось совсем немного))))
Вообще html не хлещет разнообразием. Главное уловить принцип построения таблиц и слоев и считайте, что вы уже не профан. Теперь на наш фон надо наложить слой с основным сожержанием. вот, что получиться: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta http-equiv="Content-Language" content="ru"> <META NAME="Classification" CONTENT="готика, готическая субкультура, готы, Чугуев"> <meta name="description" content="Чугуевское сообщество готов"> <meta name="Publisher" Content="Meshkoff Design"> <meta name="author" content="Meshkoff Design"> <meta name="owner" content="kirill@meshkoff.com"> <meta name="Identifier-URL" content="http://www.meshkoff.ru"> <meta name="copyright" content="Meshkoff Design"> <title>Готика - In Goth We Trust.</title> <LINK href="style.css" type="text/css" rel="stylesheet"> </head> <body> <table width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr> <td width="100%" height="150"> </td> </tr> <tr> <td width="100%" height="500" background="images/fon.jpg"> <img src="images/fon.jpg" width="1" height="500"> </td> </tr> <tr> <td width="100%" height="100%"> </td> </tr> </table> <div id="main"> <center> <table width="772" cellpadding="0" cellspacing="0"> <tr> <td width="300" height="152"> <img src="images/logo.gif" width="300" height="152" alt="Готика - In Goth We Trust"> </td> <td width="472"> <img src="images/face.jpg" width="472" height="152" alt="Чей-то фейс"> </td> </tr> <tr> <td width="100%" colspan="2"><font size="1px"> </font></td> </tr> <tr> <td width="100%" height="400" class="border" colspan="2"> </td> </tr> <tr> <td width="100%" colspan="2"><font size="1px"> </font></td> </tr> <tr> <td width="100%" height="60" colspan="2" background="images/fon2.jpg"> </td> </tr> </table> </center> </div> </body> </html> Как видно, был добавлен кусок: <div id="main"> <center> <table width="772" cellpadding="0" cellspacing="0"> <tr> <td width="300" height="152"> <img src="images/logo.gif" width="300" height="152" alt="Готика - In Goth We Trust"> </td> <td width="472"> <img src="images/face.jpg" width="472" height="152" alt="Чей-то фейс"> </td> </tr> <tr> <td width="100%" colspan="2"><font size="1px"> </font></td> </tr> <tr> <td width="100%" height="400" class="border" colspan="2"> </td> </tr> <tr> <td width="100%" colspan="2"><font size="1px"> </font></td> </tr> <tr> <td width="100%" height="60" colspan="2" background="images/fon2.jpg"> </td> </tr> </table> </center> </div> Тег div - это тот самый слой, на который мы так молились))) Все его качества хорошие и не очень расписаны в css-файле, о котором позже. Этим кодом мы обозначили вот такую вот табличку: или вот http://www.meshkoff.com/export/2.gif Вот как это выглядит в браузере: или http://www.meshkoff.com/export/2.jpg Как видите ничего сложного, просто различные комбинации одних и тех же тегов. Мужайтесь, осталось совсем немного!)))) Если всё правильно сделали, получиться вот так: www.kirill.meshkoff.com/gothic/index2.html www.kirill.meshkoff.com/gothic/index2.html Ах да, чуть не забыл, пора добавить какую-нить модную штучку... Ммм, например, "мокрые полы". Это очень просто рисуется: или http://www.meshkoff.com/export/3.jpg В коде это реализовано путем добавление еще одной строки с фоновым изображением fon2.jpg |
|
|
16.11.2007, 16:57
|
|
Старший научный сотрудник Форумчанин 200 28-August 07 Чугуев 7775 |
Ну и, наконец, последний(полный) вариант кода:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <!--meta теги остаются прежними--> <title>Готика - In Goth We Trust.</title> <LINK href="style.css" type="text/css" rel="stylesheet"> </head> <body> <table width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr> <td width="100%" height="150"> </td> </tr> <tr> <td width="100%" height="500" background="images/fon.jpg"> <img src="images/fon.jpg" width="1" height="500"> </td> </tr> <tr> <td width="100%" height="100%"> </td> </tr> </table> <div id="main"> <center> <table width="772" cellpadding="0" cellspacing="0"> <tr> <td width="300" height="152"> <img src="images/logo.gif" width="300" height="152" alt="Готика - In Goth We Trust"> </td> <td width="472"> <img src="images/face.jpg" width="472" height="152" alt="Чей-то фейс"> </td> </tr> <tr> <td width="100%" colspan="2"><font size="1px"> </font></td> </tr> <tr> <td width="100%" height="400" class="border" colspan="2"> <table width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr> <td width="100%" height="20" align="left" colspan="2"> <p class="menu"> главная <a class="menu" href="">новости</a> <a class="menu" href="">галерея</a> <a class="menu" href="">контакты</a> </p> </td> </tr> <tr> <td width="100%" height="20" align="right" colspan="2"> <p class="zagolovok">Welcome to the Goth's Portal</p> <p class="zagolovok2">Chuguev version</p> </td> </tr> <tr> <td width="300" align="left" valign="bottom"> <img src="images/tree.gif" width="250" height="375" alt="Дерево"> </td> <td width="472" height="100%" align="left" valign="top" style="padding-top: 10px; padding-left: 10px; padding-right: 20px; padding-bottom: 10px"> <h1> Теодиция в религии Заратуштры </h1> <br> <p> Теодицея - теологическая доктрина, посвященная пониманию проблемы зла, а именно: почему зло существует в мире, управляемом добрым, мудрым и могущественным богом. На протяжении веков, персидская мысль исследовала этот вопрос более основательно, чем любая другая религиозная традиция. Некоторые аспекты понимания, достигнутые в пределах великой зороастрийской традиции, будут подвергнуты обсуждению и сравнению с мыслями других религиозных традиций. Я впервые заинтересовался зороастризмом, когда прочитал о зороастрийской концепции Бога, Ахура Мазды, чья цель - искоренение зла из мира, и который взывает к человеческой помощи в достижении этой цели. Я всегда был обеспокоен проблемой зла, то есть почему всемогущее и всеблагое божество позволяет существовать злу. Типичные ответы, которые я встречал в христианстве, я находил неудовлетворительными: они звучали неправдоподобно для меня. Большинство христианских теологов всеми силами старались более уклониться от этого спорного вопроса, чем по-настоящему разрешить дилемму. Как только я глубже изучил персидскую мысль, не только ортодоксальный зороастризм, но такие варианты, как зерванизм и маздакизм, я обнаружил, что древние персы атаковали эту проблему с большей тщательностью и интеллектуальным бесстрашием, чем религии Авраама. </p> <br> <p> <i>Автор: Альберт Бэйли</i> </p> <p> <i>Перевод с английского: Дина Витчинкина</i> </p> </td> </tr> </table> </td> </tr> <tr> <td width="100%" colspan="2"><font size="1px"> </font></td> </tr> <tr> <td width="100%" height="60" colspan="2" background="images/fon2.jpg" align="right"> </td> </tr> </table> </center> </div> </body> </html> Здесь мы просто добавляем таблицу, где разместиться текст и меню: или http://www.meshkoff.com/export/4.gif Как вы наверное уже заметили)))), в коде часто идет обращение к стилям(class, id) Эти стили прописываються в css-файле. Сохраняем файл и обзываем его style.css Вот он: /*CSS*/ body { margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #330000 } img { border: 0px } #main { position: absolute; top: 0px; left: 0px; width: 100%; border: 0px; padding-top: 20px } .border { background-color: #FFFFFF; border: 1px solid #000000 } /* стили для контента */ .menu {color: #990000; font-family: 'Arial',Arial, sans-serif; font-size: 12px; font-weight: bold; margin-top: 0px; margin-bottom: 0px } a.menu { color: #000000; text-decoration: none } a.menu:hover {text-decoration: underline} .zagolovok { color: #000000; font-family: 'Arial',Arial, sans-serif; font-size: 18px; margin-top: 0px; margin-right: 20px; margin-bottom: 0px } .zagolovok2 { color: #999999; font-family: 'Arial',Arial, sans-serif; font-size: 12px; margin-top: 0px; margin-right: 20px; margin-bottom: 0px } h1 { color: #666666; font-family: 'Arial',Arial, sans-serif; font-size: 12px; font-weight: bold; margin-top: 0px; margin-bottom: 0px } p { color: #666666; font-family: 'Arial',Arial, sans-serif; font-size: 12px; margin-top: 0px; margin-bottom: 0px } .copy {color: #666666; font-family: 'Arial',Arial, sans-serif; font-size: 12px; margin-top: 0px; margin-right: 20px; margin-bottom: 0px} В нем прописываються данные об отступах, о том, как должен выглядеть шрифт, ссылки и т.д. Вы можите поимпровизировать и попробовать вставлять свои данные и смотреть, что при этом измениться. Как видите, одни и те же параметры в разных интерпретациях. Это я к тому, что достаточно вдуплить это ограниченное количество тегов и свойств, чтобы самостоятельно сделать сайт. Результат: www.meshkoff.com/gothic/index3.html или www.kirill.meshkoff.com/gothic/index3.html Перед вами примитив! Теперь, я надеюсь, что, вооружившись своей фантазией и запасом терпения, вы сможите сделать свою собственную, уникальную страничку. Я отвечу на все вопросы касательно сайтостроения. Так что дерзайте и удачи! Если вы сделаете свою страничку(или наоборот, наткнетесь на трудности) пишите, хотелось бы взглянуть. С чистосердечным . |
|
|
14.01.2011, 19:52
|
|
Мы не местные Форумчанин 8 13-August 10 286519 |
На Юкозе домен платный??
|
|
|
: 26th September 2024 - 11:37 |