Раздел "Веб-дизайн". Содержание:
Статьи:
Как подстроить гостевую книгу на narod.ru под свой дизайн?
Меню навигации, которое меняется одним движением мыши
Учимся делать сайты
Small HTTP Server - маленький локальный сервер каждому!
Раздел "Веб-дизайн". Рассылка "всё для вебмастера":
Раздел "Веб-дизайн". Статьи:
Как подстроить гостевую книгу на narod.ru под свой дизайн?
Наверное, у многих начинающих дизайнеров первые сайты находились (или находятся) на бесплатном хостинге. Очень популярным бесплатным хостингом является, конечно, Народ.ru, о котором и пойдет речь. Здесь вам дают не только неограниченное дисковое пространство и почтовый ящик, но и бесплатную гостевую книгу. Это хорошо для тех, кто не знает php или perl, то есть для меня :-).
На первых порах данная гостевая меня устраивала. Правда, пришло несколько гневных писем о том, что "из гостевой не выбраться". Имелось в виду, что в "народной" гостевой отсутствует меню навигации по сайту, имеется только ссылка на главную страницу.
Первой идеей, пришедшей мне в голову, был переход на фреймовую структуру сайта, что, как известно, не очень модно, да и дизайн менять не хотелось.
Тут-то мне и помогла справка по "Народу" (единственный раз за все время!). Там написано, что если вы считаете себя "крутым html-щиком", то переделайте гостевую по такому-то образцу. Н-да… Я сразу же перестал себя чувствовать компьютерщиком :-).
Я думаю, что вам уже надоело читать вступление, так что перехожу к описанию создания гостевой.
<table border="1" width="100%">
<tr>
Пошла первая колонка - без комментариев :-)
<td bgcolor="red"> Меню… </td>
<td bgcolor="Yellow">
А вот и наша гостевая:
{MESSAGES}
<HR>
{PAGEBAR}
</td>
Сразу поясню: {MESSAGES} - все ваши сообщения. О том, как их форматировать я расскажу позже. <HR> - линия, которая отделяет сообщения от {PAGEBAR} - ссылок на другие страницы с сообщениями гостевой (сообщения печатаются по 10 на страницу). Внимание: Все, что находится в фигурных скобках пишется только большими буквами!
<td bgcolor="green">
Добавить сообщение:
Не рекомендую изменять этот код - он отвечает за добавление сообщений в гостевую книгу.
<FORM ACTION=leave_message.xhtml method=post>
<INPUT TYPE=HIDDEN NAME=owner VALUE={OWNERID}>
<INPUT TYPE=HIDDEN NAME=newlocation VALUE=http://www.narod.ru/guestbook/?owner={OWNERID}&mainhtml=short.txt&messageshtml=sm.txt>
<table><tr><td>Имя:</td><td><INPUT TYPE=TEXT SIZE=30 NAME=your_name></td></tr>
<tr><td>e-mail:</td><td><INPUT TYPE=TEXT SIZE=30 NAME=your_email></td></tr>
<tr><td>Cайт:</td><td><INPUT TYPE=TEXT SIZE=30 NAME=your_url></td></tr>
<tr><td colspan="2">Сообщение:<br><TEXTAREA ROWS=5 COLS=55 NAME=your_message></TEXTAREA></td></tr>
<tr><td colspan="2"><INPUT TYPE=SUBMIT VALUE="Добавить сообщение" class="but"></td></tr></FORM></table>
</td></tr></table>
Вам остается доделать страницу, добавив баннеры, меню и т.п. Теперь сохраните страницу как файл short.txt (назвать файл нужно именно так). Все, главную работу мы сделали! Конечно, многие уже пробовали смотреть на результат и готовой гостевой не увидели. Советую вам не торопиться.
Теперь перейдем к созданию файла, отвечающего за сами сообщения и их оформление. Он будет называться sm.txt (только так!).
<HR>
<SCRIPT LANGUAGE=javascript>
<!--
document.write(C2UT({JSDATE}));
//-->
</SCRIPT>
<NOSCRIPT>{DATE}</NOSCRIPT>
<br>
<a href="mailto:{AUTHOREMAIL}">{AUTHORNAME}</a>
<br>
<a href={URL}>{URL}</A>
<BR>
{MESSAGE}<BR>
{OWNERREPLY}
Комментарий: Горизонтальная линия в начале файла отвечает за разделение сообщений. Далее следует скрипт, который выдает дату {DATE}. На новой строке следует имя автора {AUTHORNAME}, которое является ссылкой на мыло {AUTHOREMAIL}, указанное в форме заполнения гостевой, затем - сайт {URL}, сообщение {MESSAGE} и ваш ответ на сообщение {OWNERREPLY}. Строки можно менять местами, главное не удалить фигурные скобки, текст в них или скрипт для даты. Внимание! В файле нельзя писать HTML-теги, не отвечающие за форматирование текста, например, <head>, <html>, <title>, <body> и т.п.
Поместим наши файлы short.txt (обычный html-код страницы) и sm.txt (форматирование текста сообщения) в корневую (обязательно!) папку сайта. И последнее: разместим ссылку на нашу гостевую на страницах сайта:
http://www.narod.ru/guestbook/?owner=6507161&mainhtml=short.txt&messageshtml=sm.txt
Внимание: на забудьте заметить цифры 6507161 на число, о котором говорилось в начале статьи!
Меню навигации, которое меняется одним движением мыши
Одной из проблем многих "сайтостроителей" является добавление на сайт новых разделов. Например, вы решили добавить на ваш развлекательный сайт новый раздел "фотоприколы". Для этого вам придется на всех страницах сайта (которых может быть более ста) изменить меню. Легко ли это сделать? Я думаю, нет.
Тут на помощь приходит технология SSI (Server Side Include), работающая на сервере. С помощью SSI вместо меню на страницах сайта вы вставляете следущий код:
<!--#include virtual="ssi/menu.html"-->
Перед тем, как отправить документ в браузер пользователя, сервер заменит эту строку содержанием файла menu.html из папки ssi. Естественно, названия файлов и папок можно менять. Теперь вы изменяете только файл menu.html.
Теперь о грустном: все файлы, использующие SSI, должны использовать расширение .shtml, которое не поддерживается многими бесплатными хостингами. На домашнем компьютере при разработке сайта с использованием SSI необходимо наличие веб-сервера, например Apache.
А что же делать владельцам сайтов, расположенных на хостингах, которые SSI не переваривают? Я рекомендую использовать старый добрый JavaScript. По статистике Hotlog, JavaScript поддерживается у 98% "жителей Рунета". Вместо меню вы вставляете такую строчку:
<script language='javascript' src='js/menu.js'></script>
Уже не сервер, а браузер клиента, увидев данную строчку, открывает скрипт menu.js из папки js. В файле menu.js вы пишите document.write ('...'); и заменяете троеточие в кавычках на код вашего меню. Внимание: весь код должен "вытягиваться" в одну строчку (проверить это можно, открыв файл в "Блокноте" и отключив "перенос по словам"). В коде запрещается использование одинарных кавычек. Вот и все... Чтобы изменить меню нужно будет редактировать файл menu.js.
Также двумя предложенными способами можно втавлять новости, счетчики, баннеры и т.п.
Учимся делать сайты
Вы обращали когда-нибудь внимание на то, сколько страничек насоздавали любители серфинга по Сети на общедоступных бесплатных площадках - например, таких, как Boom.ru? А почему? Все очень просто - пользователям не приходилось задумываться над тем, как надо описать в кодах HTML то, что они хотели бы показать. За них это делали владельцы площадки, используя заранее подготовленные шаблоны, в которые пользователи вписывали лишь свою текстовую часть, вставляли картинки, подписи. Ничего оригинального большинство из них не придумывало, зато могло похвастаться адресом собственной страницы.
А действительно, сложно ли сделать свою страницу самостоятельно - так, чтобы она была и привлекательной, а код не содержал ошибок? Нет, если воспользоваться специальными программами для создания таких страниц. К примеру, это может быть визуальный редактор веб-страниц FrontPage. Правда, хотя ее использование особых сложностей не вызывает, без подготовки можно упустить многие возможности, предоставляемые ею. И здесь прекрасным помощником для вас может стать мультимедийный учебник TeachPro MS FrontPage 2002, подготовленный компанией "Мультимедиа Технологии" и выпущенный "1С". Он является одним из целой серии подобных учебников, посвященных продуктам фирмы Microsoft.
Учебное пособие с полным правом называется "мультимедийным" - вы не найдете в нем ни одной страницы с текстом, который вам надо было бы прочитать. Впрочем, текст есть - тот самый, который читает диктор. Но окно с ним можно включить, а можно и выключить - все зависит от того, что лучше воспринимается конкретным человеком. Главное же действо происходит на вашем мониторе, где на конкретных примерах последовательно рассказывается обо всех возможностях изучаемой программы. В общей сложности курс состоит из 33 часов видеолекций (если их смотреть и слушать, не отвлекаясь на выполнение заданий).
Да, курс обучения построен таким образом, чтобы уже во время лекций вы могли проверить, насколько хорошо вам удалось усвоить начитанный материал. При этом сам FrontPage может еще не быть установлен на вашем компьютере - все контрольные задания заложены в обучающей программе.
Весь курс поделен на несколько основных частей (глав), каждая из которых, в свою очередь, состоит из ряда уроков. Перед началом работы с учебником нужно зарегистрироваться - в этом случае программа будет отслеживать, какие уроки вами пройдены, какие выполнены упражнения, сколько еще осталось изучить. Но процесс обучения не требует жесткого следования программе - вы всегда можете выбрать ту тему, которая вас в данный момент интересует и которую вы хотели бы изучить раньше других. К примеру, немногим может потребоваться изучение интерфейса, состава меню и панелей инструментов.
Зато последующие главы вполне могут оказаться полезными. Вот о чем в них рассказывается:
- создание веб-страниц;
- создание веб-узлов;
- динамический HTML;
- FrontPage 2002 и Office XP;
- совместная работа над проектом;
- FrontPage 2002 и серверы;
- графика в Сети.
Как уже говорилось, это основные разделы, в каждыом из которых дотошно разъясняются все возможности FrontPage. Настолько дотошно, что иногда хочется включить "ускоренную перемотку". Увы, такого режима нет, но можно с помощью панели управления передвигаться внутри урока точно так же, как вы "перематываете" записи в ваших мультимедийных проигрывателях (панель управления в обычном состоянии спрятана, а вытащить ее можно, сместив мышку к нижнему краю экрана).
Поскольку речь зашла об экране программы TeachPro, стоит сказать о нем несколько слов. Этот экран запускается только в полноразмерном режиме, перекрывая все остальные программы. Наверно, это хорошо - ничто не отвлекает пользователя от освоения материала. Но точно такой же экран запускается и при установке. Поэтому не удивляйтесь, если покажется, что программа при установке "зависла". Ее молчание может означать, что во время этого процесса в вашей системе обнаружены модули, которые имеются и в программе; и для принятия решения - оставить прежний модуль или заменить его на новый - вам нужно сделать выбор, а окно с возможными вариантами ответа спрятано. Придется воспользоваться комбинацией клавиш Alt+Tab, чтобы посмотреть - а что же спрятано под экраном.
Даже если вы умеете работать с FrontPage, будет полезно посмотреть, как построены уроки, попробовать пройти тесты и задания. Выбрав раздел, который меня интересовал, я включил урок и стал смотреть и слушать. Все шло нормально, текст диктора слушался без напряжения, картинки менялись одна за другой, но что-то постоянно мешало. Мышка! Нет, не та, что лежит передо мной на столе, а та, которой управлял неведомый мне лектор. Ее указатель постоянно перемещался, даже тогда, когда делать этого совершенно и не следовало бы. Возможно, это сделано для тех, кто засыпает под приятный голос лектора, но меня это отвлекало.
Изучать материал можно по-разному. Для этого предусмотрено несколько режимов. Во-первых, это непрерывная демонстрация приемов работы с пояснениями. Такой режим называется "Фильм". Каждый урок можно разбить на несколько частей (шагов). Каждый из них соответствует некоторому фрагменту материала, о котором говорит лектор. После завершения шага можно перейти на следующий либо вернуться к предыдущему и прослушать повторно. Для успешного закрепления материала имеет смысл использовать режим "Контроль". В этом случае по завершении каждого шага лекции предлагается выполнить некоторые действия самостоятельно. Если остались неясности, можно использовать подсказки. И, наконец, режим "Тест", в котором пользователь может оценить, насколько глубоко он освоил прослушанный материал. Вопросов, по которым пользователь может проверить свои знания, невероятно много - свыше 4600. Этого более чем достаточно, чтобы отлично усвоить материал.
Чтобы не заблудиться в материале, не вспоминать, на чем же закончилось последнее общение с программой, можно воспользоваться системой закладок. Впрочем, и навигация по меню особых сложностей не вызывает; к тому же, система поиска, которая включает более тысячи терминов, покажет все главы, в которых можно найти информацию на нужную тему.
По каждому из пользователей ведется статистика пройденного материала, фиксируется дата изучения урока, процент прослушанной части урока, число правильных ответов и ошибок, запоминается количество использованных подсказок. Статистика выводится в виде протокола поурочно. В целом учебный курс оставляет неплохое впечатление, и затраты на его приобретение вполне себя оправдывают.
Ссылки по теме:
Small HTTP Server - маленький локальный сервер каждому!
Многие вэб-мастера делают свои сайты на таких современных технологиях как SSI, делают свои сайты динамичными и тут встаёт вопрос: как протестировать сайт не выгружая на сервер? Конечно, не каждый вэб-мастер сможет настроить Apache и приходится искать такой локальный сервер, который бы неплохо выполнял свои функции и был лёгким в настройке. И такой локальный сервер действительно есть! Встречайте - Small HTTP Server! Название говорит само за себя "маленький HTTP сервер". Он действительно небольшой, лёгкий в настройке и понятный, так как сделан нашим соотечесвенником. В добавок ко всему он ещё и бесплатен, но только для нас, а буржуям всё же придётся платить за его пользование.
Сервер можно скачать с этого сайта. Качайте русскую версию, её намного проще понять.
Перейдём к настройке.
Скаченный файл открываем и устанавливаем сервер в нужное место. По умолчанию стоит диск "С" папка "shttps". Заходим в папку, где установлен наш сервер, открываем файл "http.exe". Появится окно (рис. 1), выбираем "Server" > "Настройки...".
рис. 1
Появилось окно настроек. Самое главное, что нужно будет там указать - это папку, в которой хранится наш сайт и дать серверу знать, что нужно использовать SSI. (рис. 2)
рис. 2
Теперь укажем, что хотим использовать SSI. (рис. 3)
рис. 3
Нажимаем внизу "ОК". Всё. Сервер настроен на простой сайт. Если вам нужны дополнительные функции - укажите их в настройках.
Теперь набираем в браузере http://127.0.0.1 или http://localhost. Вашему взору откроется ваш сайт, причём он будет с работающим SSI! Если ничего не получилось - проверьте правильность настроек.
|