Робимо сайт разом з чого розпочати
#1
Відправлено 29 січень 2008 - 16:41
#2
Відправлено 29 січень 2008 - 16:50
По перше визначаємося з тематикою сайту. Думаємо де братимемо інформацію і вирішуємо чи потрібен такий сайт взагалі, бо плодити невідомо що з 100 разів передрукованною інформацією неварто. Та якщо ви всежтаки вирішили сворити власний сайт, визначаємося з тим який ми хочемо сайт, простенький для себе та обмеженого клола користувачів, чи ресурс для багатьох. У чому різниця? Перший сайт можна не реєструвати у різних рейтингах, а от другий потрібно буде просувати, щоб він був конкурентно здатний.
Отже пропоную для прикладу зупинитись на сайті який хоче створити Вікторія. Сайт для школи. Отже тематика відома, коло читачів також.
Далі визначаємося з адресою. Можна скористатись адресами що пропонують хостери на зразок хо.ком.юа, а можна зареєструвати свій домен серед безкоштовних -орг юа. Є варіант платних хостингів та доменів, але для ресурсу що не приносить коштів для початку вистачить і домену хостера.
Отже ідемо на сайт хостера
#3
Відправлено 29 січень 2008 - 17:12
ось тут для початку можна дещо скачати
пропоную усім хто вчиться скачати оцей шаблон, щоб ми розмовляли однією мовою.
розпаковуємо архів, там буде 2 папки (css та images), та один файл (index.html)
Власне це усе що нам потрібно.
У папці css міститься один файлик його ми поки не будемо чіпати, папка images це власне наш дизайн,
index.html- будемо редагувати під себе. Для початку раджу вам зробити ще одну копію цього файлу, щоб якщо "направите" його, можно було відновити.
Відкриваємо файл за допомогою ворд паду. Для цього клікаємо правою кнопкою миші та вибираємо відкрити за допомогою та вибираємо ворд пад.
у цих шаблонах як і у багатьох з цього сайту прописана реклама яка на хостінгу заборонена, тому шукаємо такий текст у файлі та видаляємо
<script type="text/javascript"><!--
google_ad_client = "pub-0500162490295296";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text";
//2006-11-21: Web templates - LAYOUTS
google_ad_channel = "0286771451";
google_color_border = "ffffff";
google_color_bg = "ffffff";
google_color_link = "1B7FA2";
google_color_text = "000000";
google_color_url = "B3B3B3";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
він починається і завершується словом script та містить багато слів google
нажимаємо зберегти файл.
Далі пропоную ознайомитись з основними тегами та синтаксисом. Не лякайтесь слова тег. Це щось на зразок мови для браузера, щоб він розумів що йому відображати на екрані. Кожен тег береться у такі кавички <> коли тег закривається то він пишеться у таких кавичках </>
Наприклад тег <title>Education website</title> (Зеленим буду виділяти те що потрібно змінити)
тут прописана назва вашого сайту <title> показує що зараз буде назва тег </title>- показує що назва скінчилась.пишемо замість Education website- Школа імені Васі Пупкіна, зберігаємо файл та дивимось що змінилось. Якщо тепер відкрити файл за допомогою есплорера, то побачимо що назва зверху, та на кнопці на панелі задач стала писатися як Школа імені Васі Пупкіна
далі по тегам
<head> початок заголовку </head> кінець заголовку (надалі не буду розписувати початок кінець, один тег відкриває, такий самий але з слешем закриває)
<body> основний текст сторінки
<tr><table><td>- це все теги табличок, потім з ними розберемося
<p>,<br> (не потребують закриваючого тегу)початок нової строки. текст в браузері не відображається так як у ворді, щоб був абзац його потрібно задати тегами, щоб був жирний текст також(тег <b>).
Що ми ще можемо поправити в цьому шаблоні
шукаємо строку <td class="c_name">Education website</td>
та пишемо замість Education website назву нашої школи, зберігаємо файл, оновлюємо йогго в браузері і дивимося що вийшло. Біля книжечки має з'явитися назва нашої школи.
ось цю частину можна виправити тут

<td class="menu"><a href="#" class="menu_lnk">Home Page</a></td>
<td width="1"><img src="images/menu-sep.gif" alt="" width="6" height="27"></td>
<td class="menu"><a href="#" class="menu_lnk">About Us</a></td>
<td width="1"><img src="images/menu-sep.gif" alt="" width="6" height="27"></td>
<td class="menu"><a href="#" class="menu_lnk">Education Programs</a></td>
<td width="1"><img src="images/menu-sep.gif" alt="" width="6" height="27"></td>
<td class="menu"><a href="#" class="menu_lnk">Education News</a></td>
<td width="1"><img src="images/menu-sep.gif" alt="" width="6" height="27"></td>
<td class="menu"><a href="#" class="menu_lnk">Contact Us</a></td>
<td width="100%" class="menu"> </td>
Home Page замынюэмо на домашня сторінка About Us - Про нас і т.д.
поясню що означає ця строка
<td class="menu"><a href="#" class="menu_lnk">Home Page</a></td>
<td width="1"><img src="images/menu-sep.gif" alt="" width="6" height="27"></td>
td -відкриває табличку у якій буде напис, class="menu"- задає стиль з яким буде відображатись текст <a href="#" class="menu_lnk">Home Page</a> ось ця частина- це посилання на сторінку, на яку буде переводити принатисканні на цей напдпис причому class="menu_lnk" ось це задає те що коли буде підводитись миша до тексту він змінюватиме стиль. href="#" тут замість # потрібно вставити посилання на необхідну сторінку. наприклад http://school.ho.com.ua/index.html. Цей тег </td> закриває табличку
оця строка <td width="1"><img src="images/menu-sep.gif" alt="" width="6" height="27"></td>
задає задній план таблички ширину висоту та малюнок ззаду.
в кінцевому результаті цей відрізок має виглядати так
<td class="menu"><a href="http://school.ho.com.ua/index.html" class="menu_lnk">Домашня сторінка</a></td>
<td width="1"><img src="images/menu-sep.gif" alt="" width="6" height="27"></td>
тепер виправимо ось цей кусок

шукаємо строку
<td height="10" valign="top" class="welcome">Welcome To Education Website</td>
Міняємо Welcome To Education Website на Вітаємо вас на сайті нашої школи
ось цю частину првавимо тут

<td><a href="#">News & Events</a> </td>
</tr>
<tr>
<td><a href="#">Students Corner</a> </td>
<tr>
<td><a href="#">Courses</a> </td>
<tr>
<td><a href="#">Testimonials</a> </td>
</tr>
<tr>
<td><a href="#">Student Life </a> </td>
Замість # пишемо адреси сторінок які ми потім створимо News & Events назву сторінок які будуть
Приклад
<td><a href="http://school.ho.com.ua/news.html">Новини</a> </td>
Щоб видалити оце

видаляемо ось цей шматок
<div style="border:#187d9f solid 1px;padding:4px 6px 2px 6px">Этот бесплатный шаблон был закачан с <a href="http://ru.anvisionwebtemplates.com">AnVisionWebTemplates.com</a>.<br>
Посетите нас по адресу <a href="http://ru.anvisionwebtemplates.com">ru.anvisionwebtemplates.com</a> для того, чтобы увидеть полную коллекцию наших шаблонов.
</div>
та за компанію видалимо ось цю рекламу в кінці
<div style="position:absolute;left:-3072px;top:0"><a href="http://anvision.ru">Создание сайтов Екатеринбург</a><a href="http://ru.anvisionwebtemplates.com">Шаблоны сайтов</a><a href="http://pricetag.ru">Поиск товаров - справочник цен, каталог магазинов, прайс-листы</a><a href="http://ru.anvisionwebtemplates.com/education-templates.html">Бесплатные шаблоны дизайна образовательных сайтов</a></div>
просто видаляєте ці рядки. головне лишнього не повидаляйте
тепер замінимо тект у табличці на свій
<p>Education is the process by which an individual is encouraged and enabled to fully develop his or her potential; it may also serve the purpose of equipping the individual with what is necessary to be a productive member of society. Through teaching and learning the individual acquires and develops knowledge and skills.</p>
<p>The term education is often used to refer to formal education (see below). However, the word's broader meaning covers a range of experiences, from formal learning to the building of understanding and knowledge through day to day experiences. Ultimately, all that we experience serves as a form of education.</p>
<p>It is widely accepted that the process of education is lifelong. Studies have shown that the child already in uetero is educated by the experiences it is exposed to.</p>
<p><em>From Wikipedia, the free encyclopedia</em></p>
Тут ми можемо написати про нашу школу що завгодно, не забувайте ставити тег <p> коли потрібно перевести на нову строку, бо текст буде погано виглядати
для прикладу напишемо ось так
<p>Школа імені Васі Пупкіна дасть кожному максимум знань</p>
<p><em>Завітайте до нас</em></p>
Тепер виправимо блок адреси внизу
<td width="280" class="bottom_addr">Company Name<br>
Phone: 0110 1234567, Fax: 0123 1234567<br>
E-mail: info@companyname.net<br></td>
Вийде отак
<td width="280" class="bottom_addr">Школа<br>
Телефон: 044 3234567, Факс: 044 4234567<br>
E-mail: info@school.net<br></td>
ну і виправимо останнє на цій сторінці

<td class="bottom_menu"><a href="#" class="bottom_lnk">Home Page</a> || <a href="#" class="bottom_lnk">About Us</a> || <a href="#" class="bottom_lnk">Education Programs</a> || <a href="#" class="bottom_lnk">Education News</a> || <a href="#" class="bottom_lnk">Contact Us</a></td>
вийде отак
<td class="bottom_menu"><a href="http://school.ho.com.ua/index.html" class="bottom_lnk">Головна</a> || <a href="http://school.ho.com.ua/about.html" class="bottom_lnk">Про нас</a> || <a href="http://school.ho.com.ua/programs.html" class="bottom_lnk">Навчальні програми</a> || <a href="http://school.ho.com.ua/news.html" class="bottom_lnk">Новини</a> || <a href="http://school.ho.com.ua/contacts.html" class="bottom_lnk">Контакти</a></td>
Мінімально ми підправили шаблон. Задавайте питання та будемо йти далі.
в мене вийшло так
#4
Відправлено 30 січень 2008 - 11:55
Вже вірю, що вийде :)
#5
#6
Відправлено 30 січень 2008 - 16:39
Замість # незрозумію що писати, куди саме посилання буде?
Зовні картинку підчистила, як змінити фото на своє і збільшити розмір шрифтів, щоб очі не стомлювались?
Ще чомусь почало писати "Сохранение документа в виде неформатированного текста приведет к потере форматирования. Подтверждаете выполнение этой операции?" це не страшно?
Як це з компа залити в нет?
Упс, пробач, якщо забігаю наперед :)
#7
Відправлено 30 січень 2008 - 17:30
Viktoriya (30.1.2008, 16:39) писав:
Замість # незрозумію що писати, куди саме посилання буде?
замість цього потрібно ставити посилання на ту сторінку на яку ти хочеш щоб потім виводило. поки що це буде посилання, а потім зробиш і сторінку
посилання має бути вигляду http://адреса твого сайту(school.ho.com.ua)/назвасторінки латиницею.html
приклад
Цитата
Фото на своє змінити просто, ідеш в папку імідж, там шукаєш картинку з фото, відкриваєш її в фотошопі і робиш з нею що хочеш. Головне не змінювати розміри. Потім зберігаєш її з назвою та розширенням таким самим як і було в ту саму папку імідж, тільки попередньо треба видалити звідти оригінал. тобто якщо там був 1.gif то 1.gif там і має лишитись.
Розмір шрифта теж можна змінити, але то докладніше потім розкажу. то в тій папсі сss, яку ми поки облишили
Цитата
та нічого страшного в вордпаді просто по іншому виглядатиме і все
Цитата
Упс, пробач, якщо забігаю наперед :)
можеш зайти в свій профіль у хостера на сайті, там у листі має бути посилання
Для управления хостингом используйте страницу:
https://ho.com.ua/cgi-bin/hosting.cgi
вводиш там свій пароль і йдеш в управление файлами, та заливаеш в папку htdocs папку імідж css та файл index.html
тоді на сайт буде вже в неті відображатись.
можна ще через windows commander працювати так набагато зручніше
заходиш там у меню Net --- ftp connect вилізе табличка
треба туди додати посилання на свій сайт
session будьяка зручна назва
host name school.ho.com.ua
user name school (своє пишеш з файлу)
password пароль теж з файлу що прийшов від хостера
тиснеш ок
і має зайти
так і ще одне, якщо вже заливаєш на хостінг, то у них є умова що на індексній має бути посилання на їх сайт
тому одне з посилань терба виправити на хостінг
наприклад оце
<td><a href="#">Student Life </a> </td>
правиш на <td><a href="http://ho.com.ua/">Хостінг в Україні безкоштовно</a> </td>
#8
Відправлено 31 січень 2008 - 13:19
windows commander, на цьому компі не стоїть і місця немає всунути його, а вказівкам, що прийшли в листі не виходить
#9
Відправлено 31 січень 2008 - 14:07
натискаєш да коли запитає про конфіденційність
вводиш логін пароль свої з листа хостера
Сайт ..... создан.
Администрирование сайта производится по FTP:
Login: .....
Password: ......
Заходиш шукаєш знизу кнопку Управление файлами- Изменение содержимого сайта
має викинути в окреме вікно, знову да на питання про конфіденційність тиснеш
має з'явитись така картинка

тобі потрібна папка виділена червоним
клацаєш по ній мишею 1 раз
зайде в саму папку
тепер запакуй усі свої файли в zip архів в себе на компі виділяєш папки та індекс штмл тиснеш правою кнопкою миші, додати в архів.
далі на хостингу тиснеш на кнопку

тиснеш обзор, вибираєш архів та загружаєш
іноді його глючить і з першого разу не грузиться
тоді треба перезайти в цю папку іноді допомагає, можеш з панелі управления перезайти тоді
коли файл загрузився його треба розпакувати
коло нього має бути така картинка

тиснеш на першу кнопочку
натискаєш ок і має розпакувати усе в цю папку
архів потім можна видалити
#12
Відправлено 10 лютий 2008 - 22:57
#13
Відправлено 11 лютий 2008 - 00:09
#14
Відправлено 11 лютий 2008 - 09:14
#15
Відправлено 21 лютий 2008 - 00:46
#16
Відправлено 21 лютий 2008 - 09:09
BANDERIVETS (21.2.2008, 0:46) писав:
я вона вообщето :D
Другий рік користуюсь цим хостингом то ще не просили. Хостінгів в інтернеті валом, гугл наш друг.
#18
Відправлено 21 лютий 2008 - 17:13
BANDERIVETS (21.2.2008, 14:52) писав:
а я можу потім поміняти хостінг,наприклад перейти на платний хостинг?
Якщо ви зареєструэте свій домен, то можете вільно пересуватись хостингами та тарифними планами. А перейти на платний завжди встигнете.
Раджу поки сайт на стадії розробки і ви ще тренуєтесь, то можна обійтись без домену, якщо ви плануєте найближчим часом виходити в широкий загал, то зареєструйте для початку безкоштовний домен site.org.ua і під нього робіть сайт, коли у вас буде свій домен, ви можете змінити хостера змінивши лише ай пі адрессу на яку посилається сайт, а в межах одного хостінгу, думаю хостер не образиться якщо ви йому захочете платити.
#19
Відправлено 21 лютий 2008 - 19:53
#20
Відправлено 21 лютий 2008 - 21:15
Шаблон я нашла.
Я так зрозуміла вам потрібно три вертикальні таблички. Один під одним, чи три поряд?

Допомога



















