Практика вэб-дизайна.Часть восьмая.

"А не замахнутся ли нам на Вильяма нашего Шекспира?" - для тех, кто вырос на фильмах о Терминаторе, поясню, это крылатая фраза из старой комедии "Берегись автомобиля". Это я к тому, что пора перейти от создания отдельных страниц, к созданию более великого - созданию сайтов. Хоть сайты и представляют из себя совокупности страниц, есть несколько отличий в их создании, чем просто создавать страницы и складывать их в отдельную папку на диске (пояснения давать не буду, они станут понятны по ходу чтения).

Первым делом нужно обустроить рабочее пространство на вашем локальном жестком диске. После того, как давным-давно у меня "полетела винда" и пришлось форматировать весь жесткий диск (поэтому не могу показать вам свой первый сайт), вняв советам бывалых, я делю жесткие диски на два логических (C и D). На "С" у меня все программы (которые можно спокойно восстановить, если что), а на "D" все документы, картинки и сайты.

В первой статье прочитанной мной по РНР, было описано, как обустроить себе локальный сервер, полностью эмулирующий работу сервера на реальном хостинге. Ссылку на статью уже не вспомню, но весь процесс описан мною на моем сайте.

Даже если вы не собираетесь изучать языки вэб-программирования, я очень рекомендую установить себе серверное ПО - Apache, IIS, либо какой-нибудь другой, так вы сможете проверить правильность указания путей к файлам или картинкам. А если в будущем все же решите изучить любой из "клиент-серверных" языков программирования (и будете кусать себя за одно место - "…почему я не сделал этого раньше"), то у вас уже будет настроенный сервер. Для совсем ленивых, ссылка на безпроблемную установку всего необходимого с подробными инструкциями - http://dklab.ru

Итак у меня на диске "D" есть директория "usr" (users) , это корень локального сервера, внутри которой папки с сайтами, которыми я занимаюсь. Также папка "local", внутри нее расположено все серверное ПО - Apache, MySQL, Perl,PHP.

Внутри каждой папки с названием сайта есть внутренняя структура, повторяющая структуру каталогов на большинстве реальных хостинг-серверов на Unix-системах:

• директория "cgi-bin" - предназначена для расположения скриптов написанных на языке "С" или "Perl".
• директория "logs" - в ней содержатся два файла "access" и "error", которые служат для сообщений сервер о доступе к сайту и ошибках возникающих при этом.
• директория "www" - на других хостингах она может называться несколько по иному -"html","data","public_www", но суть остается та же - хранение файлов вашего сайта. Все странички ,стили, скрипты, графика, архивы и прочее, хранится там, и как организовать все это более удобно, мы и обсудим далее.
• там есть директория "work" - это моя личная отсебятина, там находится вся информация о сайте - вордовские документы с наполнением, накачанные картинки, эскизы и т.д.

Как организовать внутренности папки "www", это ваше личное дело, далее я просто раскажу, как и почему, это организовано у меня. В свое время я сам прочитал несколько статей на эту тему, кое-что взял из них, кое-что отверг, вы можете поступить аналогичным способом, ибо каждый выбирает себе одежку по своему размеру.

Начну сверху вниз, в алфавитном порядке.

• Папка "buttons" - там могут хранится различные кнопочки, ваших друзей или сайтов ваших партнеров по обмену ссылками, кнопки партнеров компании. По возможности их лучше размещать у себя, т.к. это ускорит их отображение и 100% гарантирует их показ.
• Папка "css" - там у меня лежат стили, их может быть как один, для всех страниц, так и несколько. Очень рекомендую выделить стили в отдельный файл и соответственно, положить его в папку.
• Папка "includes" включает в себя, различные элементы страниц, которые прямо не относятся ни к дизайну, ни к контенту.
• Папка "pages" - здесь лежит контент сайта, разложенный по папкам-разделам. Графику, которая будет сопутствовать тексту, хранится тут же. Это обычные текстовые файлы с произвольным расширением, содержащими элементы гипертекстовой разметки.
• Папка "scripts" - тут лежат вспомогательные скрипты на РНР. Естественно эта папка защищена от постороннего вмешательства.
• Папку "temp" я организовываю, когда сайт еще только создан и многие разделы еще ждут своего воплощения, там хранится информация о страницах, которые еще в разработке.
• Папка "templates" - в ней я держу одежду для сайта, его шаблоны. Это могут быть шаблоны страниц, его отдельных частей (шаблон для главной страницы, меню, новостей и т.д.), шаблоны вспомогательных модулей (опросы, гостевые).

Сам же сайт собирается в единое целое, скриптами (движок сайта), написанными на РНР, которые находятся в корне папки "www". Для того, чтобы изменить, что либо в дизайне или полностью поменять весь внешний вид сайта, достаточно заменить один или несколько файлов в папке "templates". В этом основная прелесть клиент-серверных технологий, о которых пойдет речь далее, но уже в другом цикле статей.

Героям статического дизайна посвящается.

Раз мы завели разговор о шаблонах, то я расскажу как использовать их для создания целого сайта, основанного только на HTML. Все, кто сделал сайт более, чем из одной страницы, пользовались собственноручно сделанными шаблонами. Для этого версталась страница, а затем в нужные места вставлялась другая информация, и страница сохранялась под другим именем, поэтому, что такое шаблоны, думаю всем известно. Другое дело, когда в дизе обнаруживался огрех или хотелось его полностью поменять, но учитывая большое количество страниц, сверстанных по этому шаблону, редизайн сайта превращался в гемморой. Многие решили "облегчить" себе жизнь и воспользовались фреймовой структурой сайта, когда весь дизайн загружен в одни фреймы, а контент грузится в другой. В принципе это выход, но для дизайнера, а не для сайта.

Основные недостатки сайтов, созданных на фреймовой структуре:

• странички сайта не индексируются поисковиками, только "index.html", в котором только описание структуры фреймов. В них нет ссылок <a href="">...</a> и роботы, естественно, не могут попасть на внутренние странички.
  В следствии этого такой сайт останется вечно "нераскрученым".
• невозможно попасть или поставить закладку на внутреннюю страничку сайта, все идет только через главную страницу со структурой.
  Но если вы все же попали на нее, попасть на главную опять невозможно.

Вообще надо бы потребовать от Macromedia немножко бабла, за такую обширную рекламу их продукта, ну а пока откройте вкладочку "Files" и выберите "Site -> New Site".

Появится мастер "Site Definition", в котором нужно будет заполнить некоторые поля (вольный перевод с аглицкого):

1. Задать имя своему сайту.
2. Ответь на вопрос "Будете ли вы использовать серверные технологии для создания сайта?".
   В данном случает отвечаем - "No,…".
3. Поставить переключатель в положение "Редактировать файлы на локальной машине, а потом залить их на сервер".
   Указать место на своем жестком диске, где ваш сайт будет располагаться (хорошо если такое место будет организованно вами заранее, и все необходимые файлы туда скопированы).
4. Коннектится к серверу нам не нужно, поэтому выбираем "Local/Network".
   Следующее поле и чекбокс оставляем нетронутыми.
5. Проверка на использование файлов вашего сайта другими разработчиками, думаю тоже не понадобится, ведь мы же в одиночку трудимся L, выбираем "No….".
6. После вывода совокупности настроек, жмем "Done".

В окошке "Site" должен появится стройный ряд папочек и всего прочего, чего вы туда насували. Если у вас уже есть страница то откройте ее (двойной клик в этом окне), если нет, то сверстайте, как было описано в предыдущих статьях.

Итак, страница с произвольным именем у нас готова и ее внешний вид нас полностью удовлетворяет, пришло время превратить ее в шаблон. Для этого удалите все ее динамические (изменяемые) части, оставьте только те элементы, которые будут присутствовать на каждой странице, я для примера удалил из страницы текст и заголовок.

Вставляем на место удаленных блоков, так - называемые "редактируемые области", ставим курсор в нужное место и идем по пути - "Insert -> Template Object -> Editable Region" и в появившемся окне введем имя для этого региона (для заголовка - "page_title", для текстовой области - "page_text").
После этого в окне дизайна появятся специальные Дримвиверовские пометки, содержащие название области и текст внутри нее (по умолчанию дублирующий название). Боятся их внешнего вида не нужно, ибо так они выглядят только внутри оболочки программы, а в браузерах отражаться естественно не будут. На их месте в коде возникает лишь два комментария -
"<!-- TemplateBeginEditable name="page_text" -->page_text<!-- TemplateEndEditable -->".

Теперь нужно сохранить данную работу как шаблон - "Save as Template ", и указать к какому сайту он у нас относится. Все, шаблон готов, об этом будет свидетельствовать папка "Templates" и в ней ваш шаблон с расширением "dwt" ("DreamWeaver Template"), которую можно лицезреть в окне "Site".

Настало время воспользоваться этим шаблоном. Жмем "Ctrl+N" (создать новый файл) и в появившемся окне переходим на вкладку "Templates". Так как, скорее всего это у вас единственный сайт и шаблон к нему, то они и появятся в двух полях диалогового окна, а в поле "Preview" должен показаться внешний вид шаблона. Не забудьте поставить галочку напротив надписи "Update Page When Template Changes" (сама соль, ради чего и затевались собственно).

После нажатия кнопки "Create", мы получим уже полностью сформированную по нашему шаблону страницу, и что примечательно, программа позволит нам внести изменения только в ее титул, и внутри редактируемых областей, все остальные элементы дизайна, а также код страницы не поддаются редактированию. Это сделано специально, чтоб исключить случайного изменения первоначального дизайна.

Вместо текста "page_title" внутри редактируемой области, я поставил нужный заголовок, также изменил текст страницы, сохранил ее под нужным именем, и таким же образом сделал еще три страницы. Только потом я вспомнил, в на странице не хватает еще иконок выбора языка сайта, пришлось снова открыть шаблон (файл с расширением dwt) и подредактировать его. При последующем сохранении шаблона, выйдет окно, которое спросит вас - "Вы изменили шаблон. Обновить все страницы сделанные на его основе ?", естественно жмем "Yes", и наблюдаем процесс обновления всех файлов входящих в ваш сайт.

Теперь на нашем форуме отмазки типа - "Лень переделывать весь сайт……", не принимаются! Как видите, процесс редизайна, не потребует от вас особых усилий, единственный минус, что придется "заливать" на сервер все файлы страничек заново. Вот чтобы этого не делать, нужно изучать языки вэб-программирования, чем мы собственно и займемся в ближайшем будущем.

Данный цикл не закрыт, он может продолжится, но что будет в нем описано, зависит только от вас, пишите письма, и я постараюсь удовлетворить все ваши запросы.

Интересные программы

DjVu Solo v.3.1 Версия: 3.1
Программа сжимает изображения практически любого формата в формат DjVu (.djv, .djvu) при этом отношение степень сжатия-качество просто отличное. DjVu Browser Plugin - плагин для просмотра файлов DjVu в браузере (IE). Краткое описание формата DJVU: графический формат DJVU разработан фирмой AT&T в первую очередь для размещения в Интернет отсканированных изображений. Это могут быть принципиальные схемы различной бытовой электроники, книги, рукописи, географические карты, художественно оформленные меню ресторанов и многое многое другое. Его уникальной особенностью является черезвычайная компактность при хранении изображений в высоком разрешении (300 DPI и выше). На одной дискете можно разместить до двадцати страниц пригодных для распечатывания на лазерном принтере. Кроме того, этот формат оптимизирован для передачи по сети таким образом, что страницу можно просматривать еще до завершения скачивания. Таким образом DJVU является уникальным инструментом для открытия Интернет-доступа к фондам обычных, бумажных библиотек.
3.20 MB Win 9*/ME/NT/2K/XP, Free, EN/RU
Скачать: http://webstudent.net.ru/modules/mydownloads/visit.php?cid=42&lid=608

XnView v.1.70.4
Отличный бесплатный просмоторщик графических файлов. Если сравнивать XnView со знаменитым ACDSee, последний явно проигрывает, почти по всем параметрам. Программа понимает более 300 форматов графических файлов, легка в использовании, позволяет редактировать изображение, конверовать картинки в нужный формат. Есть поддержка плагинов.
5.20 MB Win 9*/ME/NT/2K/XP, Free, EN/RU
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=39&lid=607

Selteco Flash Designer v.1.55.1
Программа для создания Flash-анимации. Содержит более 130 встроенных эффектов. Поддерживает конвертацию из Gif в SWF
570.00 KB Win 9*/ME/NT/2K/XP, Free, EN/RU
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=42&lid=606

Crystal Player Pro v.1.8
Видео проигрыватель. Программа работает с ресурсами компьютера на низком уровне DirectX, потому превосходит по скорости многие известные плееры. Crystal работает с плейлистами, поддерживает внешние субтитры, имеет широкий набор видео фильтров, позволяет сдвигать звуковую дорожку, читает обрезанные avi-файлы. Программа имеет массу низкоуровневых настроек видео и аудио вывода (настройки оверлея, цветовых конверторов, билинейное масштабирование и др). Crystal реализует видео и аудио буферизацию, имеет несколько режимов борьбы с недостатком скорости на маломощных компьютерах. В от ичие от огромного количества аналогичных программ, Crystal Player принципиально сам разбирает файлы и их рендерит. Пока это самый быстрый способ проигрывать видео и одновременно получать визуальные эффекты. Crystal Player - не просто оболочка. Crystal может и будет и частично уже имеет кучу наворотов и эффектов, но работает очень быстро. Crystal оптимизирован на скорость. Если у вас проблемы со скоростью, попробуйте Crystal, вероятно, тормоза вызваны не столько декодированием, сколько неоптимальной установкой оверлея и отсутствием буферизации. В итоге все плейеры, являющиеся простыми оболочками ActiveMovie - компонента наследуют данный глюк. Если у вас все дико тормозит, а в режиме 256 цветов перестает - именно этот случай. Кроме того, Crystal имеет встроенный AVI-Parser, благодаря чему умеет гибко пропускать кадры и проигрывать недокаченные AVI-шки.
2.70 MB Win 9*/ME/NT/2K/XP, Free, EN/RU
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=48&lid=605

AI Roboform v.6.0.6
Программа предназначена для хранения паролей, автозаполнения форм, нажимания различных кнопок за вас (т.е. например автозаполнение формы на форуме для аутентификации, а затем нажатия кнопки ВХОД), хранения ваших заметок и различной информации, генерации паролей, шифрования различных данных, резервного копирования ваших паролей и важной информации на сьёмные носители, синхронизации паролей вашего PDA с вашим же РС, интегрируется в браузер.
1.20 MB Win 9*/ME/NT/2K/XP, Free, EN/RU
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=54&lid=603

FlashGet v.1.65 + FlashGet Skin Designer v.1.0
FlashGet разработан, чтобы решить две самые большие проблемы при загрузке файлов: скорость и управление загруженными файлами. Если Вы когда-либо ждали загрузки файлов при использовании медленного подключения или загрузка файла обрывалась посередине, тогда FlashGet для Вас. FlashGet может разбить загружаемые файлы на части, загружая каждую часть одновременно. Это дает увеличение скорости загрузки от 100 % до 500 %. Это, вместе с мощными и удобными в работе средствами управления загружаемыми файлами, поможет Вам получить полный контроль над вашими загрузками. FlashGet Skin Designer v1.0 - создание скинов для FlashGet.
1.10 MB Win 9*/ME/NT/2K/XP, Free, EN/RU
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=15&lid=602

SAMInside v.2.2.5.0
Программа позволят подобрать пароль для входа в Windows NT/2000/XP. Программа SAMInside выполняет следующие функции: - получение информации о пользователях из SAM-файлов Windows NT/2000/XP - подбор паролей пользователей из SAM-файлов операционной системы Windows NT - подбор паролей пользователей из SAM-файлов операционных систем Windows 2000/XP, зашифрованных системным ключом Syskey! SAMInside является первой в мире программой, которая ломает защиту ключом Syskey!
260.00 KB Win 9*/ME/NT/2K/XP, Free, RU
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=78&lid=601

Kleptomania v.2.5 Commercial
Программа позволяет захватывать текст и графику отовсюду, в том числе и текст системных сообщений.
360.00 KB Win 9*/ME/NT/2K/XP, Free, RU
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=63&lid=600

Super Utilities Pro v.2.6
Это сборник полезных утилит, при помощи которых вы сможете наладить, очистить и ускорить работу своей операционной системы. В состав сборника входят следующие компоненты: Disk Cleaner (очистка диска), Registry Cleaner (очистка реестра), Uninstall Plus (безопасное и полное удаление программ), StartUp Manager (управление автозагрузкой), Folder Guard (защита каталогов), Tracks Washer (удаление следов путешествия по сети), Driver Backup (сохранения драйверов), Auto Shutdown (автовыключение), Windows Manager (настройка ОС) и Process Manager (управление запущенными процессами). Интерфейс достаточно простой и приятный.
3.46 MB Win 9*/ME/NT/2K/XP, Shareware, EN
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=72&lid=59

Date X Pro 1.7
Программа позволяет определить продолжительность жизни человека и даже... точную дату и предположительную причину его смерти. ...
1.08 MB Win 9*/ME/NT/2K/XP, Free, RU
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=67&lid=598

Maxthon (MyIE2) 1.0.0250
Известный и популярный интернет-браузер. Осмелюсь сказать - ЛУЧШИЙ
4.40 MB Win 9*/ME/NT/2K/XP, Free, EN
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=23&lid=596

А.Экслер The Bat! Энциклопедия
Предлагаемая вашему вниманию книга посвящена подробному описанию работы с самой распространенной программой для работы с электронной почтой, которая называется The Bat!. Это программа создана молдавской фирмой RitLabs и активно используется в десятках стран. В России на The Bat! работает почти треть всех интернетовских пользователей - порядка миллиона человек. С помощью этой книги, написанной в легкой и увлекательной манере, а также снабженной многочисленными демонстрациями и примерами, вы сможете очень быстро освоить все тонкости работы с этой почтовой программой.
6.10 MB Win 9*/ME/NT/2K/XP, Free, RU
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=33&lid=590

Вопрос в рассылку

Уважаемые Гуру! Нам, новичкам, нужна Ваша помощь! Помогите нам, ведь это выгодно обоим сторонам: мы получаем желанные знания, а вы имеете уникальную возможность продемонстрировать свои знания и опыт. Ссылка на ваш сайт гарантирована!

Присылайте свои вопросы на адрес crystall@webstudent.net.ru

Вопрос №27

"С сайтами вроде narod.ru, прекрасно научился обращатся. Удачно раскручивать (последний проект 2700 посетителей)Но вырос (наверное) нужно ДОМИНА своя (домен). Для хорошего проекта зарегистрировать нужно свой домен (имя.ru). Простите за чайнечиство, но я до сих пор не знаю как етот ДОМЕН зарегистрировать. Заходил на Хостер компанию (посмотрел хостинг) там есть форма для проверки домена. Так вот при проверки домена он оказался свободным, заполнил все формы на сайте хостера и что ДАЛЬШЕ (говорит что домен как вроде уже твой). Ведь домен нужно регить по паспортным данным, далее договора должны быть, вроде так. Как мне разобраться в этом новом деле? Да еще какие-то настройки где-то там у Большого Нема сделать надо. Объясните пожалуйста пошагово (попонятней), что и как? (читал статьи, и ни чего толком не понял, только округленно). Про зону .ru, домен второго уровня.Благодарен Вам за Ваш содержательный ответ заблаговременно!"

Ответ от Данил : Заходи на www.falshstart.com там домен легчевсего купить. Просто форму заполни, кинь им мани, и жди письма. Все!

Ответ от Красотка : Договоры вроде заключаются только для юр. лиц. Все настройки сообщит тебе твой хостер. Просто заполняй все формы, плати мани и домен твой.

Новый вопрос: Вопрос №28

"Год назад зарегистрировал через своего хостера доменное имя вида .com.ru, а теперь прошел год, что мне с ним делать? Тот хостер у которого регистрировал прекратил существование, где мне его продлить?"

Ответить!

Хочу задать вопрос!

Доска объявлений по обмену ссылкми

Объявление от: Алексей Голубев
"Хочу обмениваться ссылками с сайтами, посвященными web-дизайну и web-программированию. Мой сайт - http://www.frnet.narod.ru/"

Объявление от: Ростра
"Беспокоит Вас минская группа РОСТРА. Люди, имеющие отношение к музыке (группы, исполнители или просто любители), давайте меняться ссылками. Подробнее на http://rostra.exe.by Желательный формат - текстовая ссылка или кнопка 88x31"

Прислать свое объявление!

Последние темы форума: