Отправляет email-рассылки с помощью сервиса Sendsay

Основы создания сайта своими руками

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Февраль 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Автор
Александр Левитас

Статистика

1.213 подписчиков
-2 за неделю
←   Все выпуски   →

Основы создания сайта своими руками


Основы создания сайта своими руками

25.02.2007

Здравствуйте!

Приветствую Вас, дорогой друг, на страницах рассылки "Основы создания сайта своими руками"!

Продолжаем знакомиться с технологиями сайтостроения. И сегодня в выпуске статья - посвященная SSI. Что это такое, для чего может пригодится и какие возможности предоставляет SSI, читайте в материале выпуска.

Так же приглашаю посетить сайт http://site.myneo.info/ , если Вы еще до сих пор не сделали этого. Помните, что процесс создания сайта упорядочен и почти всегда строится по одной схеме. Описание создания сайта шаг за шагом и перечень необходимых инструментов Вы найдете на странице http://site.myneo.info/ . Заходите!

Содержание выпуска:

Сайт с использованием SSI

Автор: Alexey Godovnik

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

Введение

Если вам эта статья попалась на глаза случайно, я расскажу сначала о предмете разговора. Не вдаваясь в заумные технические подробности, можно сказать следующее: SSI придумали лентяи и для лентяев (имхо, само собой). Причем одни оказались настолько ленивые, что им лень было рассказать всем простым человеческим языком, что же такое они создали, а вторым предложенные возможности настолько понравились, что большинству достаточно для использования всего одной директивы и им лень самостоятельно разбираться, что же там есть еще. Так что, если вы любите обновлять свой сайт, но вас ломает это делать, без SSI вам никак. Я тоже лентяй J. Поэтому, восхитившись возможностями SSI, предоставляемыми всего одной директивой, решил копнуть чуть поглубже и узнать, как еще более облегчить себе работу по реконструкции сайта.

Введение(2)

Идея SSI заключается в следующем: на каждом сайте есть элементы оформления, повторяющиеся на всех страничках этого сайта. Например, описание основных параметров (body), CSS, оглавление, скрипты и т.д. Нет смысла, подумали умные люди, писать одинаковые фрагменты кода в каждой странице. Можно написать их один раз, сохранить в отдельном файле и вставлять в другие по мере необходимости. Вставка содержимого одного файла в другой производится директивой include.

<!--#include file="file.html" --> или

<!--#include virtual="URL" -->

Первый случай используется при подключении файла, находящегося в том же самом каталоге, второй – для подключения файла, находящегося в любом месте, даже на другом сервере. (Но не все бесплатные сервера разрешат вам подключить файл, находящийся на другом сервере). Все говорят, что предпочтительнее использовать virtual, и я не буду спорить. В этом случае можно использовать как относительные, так и абсолютные адреса. Само собой разумеется, что подключаемый файл тоже, в свою очередь, может содержать директивы SSI. Обратите внимание: пробелы есть только после слова include и перед -->. Желательно, чтобы файл, в котором есть директивы SSI, имел вид name.shtml, где name – любая комбинация латинских букв, цифр и знаков подчеркивания. На некоторых серверах разрешают вставлять директивы SSI и в файлы с расширением *.htm, *.html.

Данные

Для хранения данных существуют переменные. Они объявляются так:

<!--#set var="имя" value="значение" -->

Передача данных

Передавать данные можно двумя способами. Даже тремя.

  1. Используя метод get формы.

  2. Через URL вызываемого файла в виде
    file.html?param=value[&param=value].

  3. Используя возможности SSI.

В принципе, первые два различаются лишь тем, самостоятельно будете вы кодировать строку запроса (2-й способ) или предоставите это делать пользователю (1-й способ), который будет заполнять форму и жать на ОК или SUBMIT. Этот способ рассмотрен мною подробно в статье "Передача и обработка данных средствами HTML". Для передачи данных средствами SSI достаточно объявить переменную и присвоить ей значение. Теперь она доступна из любого файла, подключающего данный.

Получение данных

Получить и затем использовать данные можно двумя способами.

  1. Стандартными средствами DHTML (HTML+JavaScript)

  2. Средствами SSI.

Первый способ рассмотрен все в той же статье "Передача данных…", да и не интересует он нас сейчас. А вот средствами SSI получить данные можно опять-таки двумя способами.

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

Если вы самостоятельно сформировали строку запроса так, как описано выше, или передавали данные из формы, это равносильно объявлению переменных. То есть строка file.shtml?param=value эквивалентна объявлению переменной param, равной value.

<!--#set var="param" value="value" -->

Чтобы проверить, передались ли вам какие-либо данные или нет, есть директива

<!--#printenv -->

Она выводит на экран список всех переменных и их значения.

Обработка данных

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

<!--#echo var="$name" --> - просто вставит значение переменной в текст документа. Допустим, в переменной url содержится адрес какого-то файла, на который надо организовать ссылку, тогда это выглядит так

<a href="<!--#echo var="$url" -->">Ссылка</a>.

Или, например, посетитель сказал нам, как его зовут, нажал на кнопочку, и на следующей странице к нему будем обращаться по имени. Строка запроса у нас получилась
file.shtml?name=Alexey и используем мы эти бесценные сведения

Привет, <!--#echo var="$name" -->.

В результате на экране отобразится Привет, Alexey.

Если передавались данные, требующие аналитической обработки, на это есть директива if.

<!--#if expr=(условие) -->

<!--#elif expr=(условие) -->

…

<!--#else -->

<!--#endif -->

endif является обязательным элементом. elif может повторяться сколько угодно раз. else между if и endif может быть лишь единожды, причем после else уже не может использоваться elif. После каждого условия можете вставлять неограниченное количество строчек кода HTML. Например, предыдущий пример (с именем) можно модернизировать

<!--#if expr=($name="Alexey") -->

<h1>Привет, <!--#echo var="$name" --></h1>

<!--#else -->

<h2>Привет, <!--#echo var="$name" --></h2>

<!--#endif -->

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

Организация сайта

Наконец-то я добрался до того, ради чего и затеял-то писать эту статью. Мы же хотим организовать свой сайт так, чтобы в случае чего модернизация заняла бы минимум усилий. Возможны два пути для достижения этой цели. Видите, какой я нынче демократичный – всегда предоставляю вам право выбора. Цените это J . Следует учесть, что HTML – очень терпимый к ошибкам язык. Если вы что-то неправильно написали, к фатальным последствиям это не приведет. Так, например, не смотря на то, что во всех руководствах заголовок документа (head) рекомендуют писать в начале файла, броузеры правильно понимают его в любой части документа, даже если вы забудете заключить его в контейнер <head>. Единственное (имхо) неудобство заключается в том, что, располагая заголовок, содержащий title, в конце файла, страница броузера остается безымянной до тех пор, пока не прочитает этот заголовок.

Способ первый

Пишем статью в формате HTML, как обычно, но не указывая никакие стили, избегая изменения цветов (потому что мало ли какой цвет фона нам потом приспичит сделать – вдруг видно не будет) и даже опуская тег body. Остаются только font size, b, big, img, a, i, table и некоторые другие. Сохраняем как filename.html. Имя, естественно, у каждой статьи разное. Самое главное – запомнить, в каком файле какая статья лежит, а лучше записывать это. Адрес этой статьи никому не говорим – он для сугубо внутреннего использования.

Далее создаем публичный файл статьи. В начале документа пишем <html> и затем объявляем переменные, в которых будем передавать информацию о статье

<html>

<!--#set var="description" value="описание" -->

<!--#set var="title" value="Заголовок" -->

<!--#set var="keywords" value="ключевые слова" -->

<!--#set var="file" value="url статьи" -->

<!--#include virtual="файл интерфейса.shtml" -->

Сохраняем это все и запоминаем адрес – это и будет адрес статьи, который вы будете регистрировать в каталогах и рекомендовать посетить друзьям. Можно еще написать то, что вы там еще обычно пишете в заголовке. Я чаще всего ограничиваюсь одним title. Как-то спокойно отношусь к тому, что релевантность маленькая окажется J .

Теперь создаем файл интерфейса (*,shtml). Начало его выглядит так:

<html><head>

<title><!--#echo var="$title" --></title>

<meta name="description" content="<!--#echo var="$description" -->">

<meta name="keywords" content="<!--#echo var="$keywords" -->">

</head>

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

<!--#include virtual="$file" -->

Все. Теперь, как и обещалось, для радикального изменения дизайна достаточно изменить лишь наш файл интерфейса.

Способ второй

Честно говоря, он мне не очень нравится, и поэтому я его приводить не буду. Идея его заключается в том, чтобы вызывать все статьи как, например, index.shtml?sub=filename. Выигрыш можно получить в том, что одна и та же статья теперь имеет два адреса. Кому интересно, можете сами организовать такую структуру.

Заключение

Некоторые тонкости. Обращение к переменным я делал как "$name". На сервере, где мой хоумпейдж, работает именно так. На других может быть "${name}" (скорее всего) или как-нибудь по-другому (маловероятно).

При тестировании дома могут возникнуть сложности. Для получения данных нужен сервер. Если у вас не стоит Apache или какой-нибудь другой и вы не хотите его ставить, и не надо. Есть хорошая программка Small HTTP Server (около 60кб). Последний раз я видел ее по адресу http://wwwkoi.wplus.net/pp/mrdoors/srv/rdesc.htm. После установки вы сможете тестировать дома CGI, SSI, PHP и т.д.

------------------
Источник: сайт http://mysite.hut.ru - Школа начинающего Юзера

Наверх

Бесплатные видеоуроки по Photoshop, Dreamweaver

На днях мне в почтовый ящик пришло письмо от Максима Басманова с февральским выпуском Авторской Обучающей Рассылки Об Web-Дизайне.

В рассылке - несколько обучающих видеоуроков, в которых показаны возможности таких необходимых программ, как Photoshop и Dreamweaver. Уроки я скачала себе совершенно бесплатно, изучила, и скажу Вам совершенно определенно - это вещь!

Данными программами я пользуюсь достаточно давно. Конечно, профессионалом себя не считаю, но основные возможности использую. Но из скачанных уроков я узнала совершенно неожиданные для себя вещи. Что уж говорить о тех, кто с программами абсолютно не знаком!

Поэтому, если Вы относитесь именно к категории начинающих, то обязательно подпишитесь на рассылку Максима на странице http://myneo.info/master.php, и тогда каждый месяц Вас ждет новая порция обучающих видеоматериалов.

Ну а если Вы захотите не только раз в месяц получать видеоуроки, но и пройти полный видеокурс по созданию сайта, то там же сможете получить диск, содержащий более 12 часов подробных пошаговых инструкций по Web-дизайну. Все просто и доходчиво. Проработав курс, Вы без труда создадите свой сайт любой сложности! Плюс, на диске Вы получите все необходимые для создания сайта программы.

Узнать подробнее о видеокурсе по созданию web-сайтов от MasterDiz Вы можете по адресу  http://myneo.info/master.php

Наверх

А на сегодня все.

Хотите задать мне вопрос? Пишите! mail@myneo.info

Автор рассылки Наталия Багаева

В избранное