Создаем свой сайт
Краткое руководство для начинающих
Создаем сайт с помощью редактора Extra Hide Studio 2009 и учебника по HTML.
Если кто то вам скажет, что сейчас есть интелектуальные движки для сайта (CMS), где не нужно знать html, не верьте. Я перебрал и опробовал их десятки на локальном хосте (Денвер), и везде нужны эти первоначальные знания.
Начнем с создания папки на рабочем столе, или в "Мои документы" и назовем ее, к примеру – Мой сайт. В эту папку вы в дальнейшем будете сохранять созданные вами документы (файлы).
Открываем редактор, и начнем знакомство с его основными функциями.
В верхней части вы видите панель управления со знакомыми надписями и значками, ниже расположена панель, на кнопках которой указаны их содержание (функции). При наведении на кнопку появляется пояснение, какую функцию она выполняет.
Кликните Файл / Создать, в главном окне откроется страница «без имени», это для того, чтобы знакомясь с содержанием всех функций программы, знаки форматирования текста (теги), отображались в центральном окне.
Что бы не нагромождать страницу, убирайте просмотренные параметры, кликнув на значок «отменить», или удалить.
С правой стороны, находится панель Быстрые теги, которые так же выводятся на страницу при кликаньи на них.
Обратите внимание на значок «Утилиты» в верхнем меню, здесь находятся 10 утилит - Подборка HEX цвета, мастер ссылок, мастер создания таблиц, мастер создания форм, мастер вставки текста, FTP клиент, отправка на e-mail, вставка картинки, адресная книга, и калькулятор. Эти утилиты дублируются на нижней панели, слева, в виде значков. Познакомьтесь с ними внимательнее, так как в дальнейшем будете ими пользоваться.
Сначала советую, для запоминания, потренироваться писать теги вручную, т.е. с помощью клавиатуры.
В левой части находится панель «Навигатор», с помощью которой, вы в дальнейшем сможете открыть последние, сохраненные, или просто открытые в редакторе файлы, отображенные в ней.
Теперь переходим снова к меню «Файл» и по порядку:
Создать по шаблону – открывается выбранный вами шаблон HTML, на основе которого можно создавать свою веб страницу. Что бы просмотреть, как выглядит эта страница в броузере (в Интернет) следует нажать на «просмотр» в верхней, левой части главного окна, а для редактирования текста (вернуться назад) кликнуть на «код»
Открыть – открывается страница, выбранная вами на своем компьютере(в виде кода), или ранее сохраненная вами, при создании сайта.
Создать веб страницу – в главном окне откроется страница, уже оформленная (размеченная) основными тегами (мета тегами). С этой страницы мы и начнем работать.
Открываем Учебник по HTML, кликнув на папку allsteps.zip, в открывшемся окне на index.html, дальше на надпись Приступить к учению, затем на Учебник или Оглавление, и начинаем учиться. Я только еще раз напомню, все, что вы хотите разместить на вашей странице, должно быть помещено между тегами .
Закончив занятие по учебнику, вам нужно сохранить страницу с внесенными вами данными. Для этого, или на верхней панели (значок Сохранить), или в меню Файл / Сохранить как, вы сохраняете ваш документ под названием index, ниже в форме выбираете формат HTML, находите папку «Мой сайт», а затем «сохранить».
Это будет ваша первая, главная страница сайта index.html, (или htm), в которой вы сделаете описание сайта, разместите ссылки на другие страницы… Все это в учебнике есть.
Не старайтесь заучивать наизусть всю информацию, вам для начала нужно осмыслить основные понятия и правила применения форматирования текста при помощи тегов.
Полное осмысление всей информации придет, когда начнете создавать структуру своих страниц (страницы) и размещать информацию, ссылки, картинки, в различных таблицах: строках, ячейках (блоках - хотя блоки это совсем другое понятие). Будете вы в дальнейшем использовать табличную верстку, или строить сайт блоками, знание табличной верстки всегда пригодится, уже не раз убедился.
Вы наверное обратили внимание на структуру страниц различных сайтов. На одних ячейки выделены разным цветом, и даже имеют обрамление, на других страница выглядит чистой. В книге эти "фокусы" подробно описаны. Для начала нам следует продумать размещение информации на странице. Что нам нужно, начнем с простейшего:
1) Верхний блок (header), - "шапка" с названием сайта и, к примеру: картинкой, поиском…
2) Блок - основное содержимое страницы - текст, картинки, новости…
3) Навигация (menu), т.е. где будут размещаться ваши ссылки на другие страницы, или ресурсы Интернет.
4) Нижняя, заключительная часть (footer), где можете можно разместить ссылки на связь с вами, указать свои данные, ссылки по регистрации в различных каталогах…
Читаем в учебнике, как это делать. Сначала создадим все это в одной таблице, разбив ее на строки и столбцы, не забывая про rowspan, и colspan, задав каждой ячейке размер желательно в %, что бы при просмотре в разных браузерах и т.д. таблица была как бы резиновой, не смещалась.
После разбиения страницы, тренируемся со вставкой текста, ссылок. Ссылки можно вставлять как при помощи новой вложенной таблицы в ячейку, поделенную на строки по количеству ссылок (при этом варианте можно каждой строке задать свой цвет, формат шрифта, и т.д.), так и просто с помощью ul li, или с помощью принудительного переноса строки br
После того, как у вас что то получилось, можно попробовать сделать все эти блоки отдельными таблицами, вы убедитесь, что это уже сложнее, т.к. их следует все согласовать между собой, иначе разьедутся в разные стороны.
Подсказка
Сконструировав первую страницу, и наполнив ее содержимым, вам нужно на ее основе сделать еще несколько страниц, но с другим заголовком и содержимым. Для упрощения работы, скопируйте код своей главной страницы Правка/Выбрать все после выделения страницы Правка/Копировать. Затем Файл/Создать, откроется новое окно без имени, в которое вы вставляете скопированный код. Удаляете информацию, оставив основные теги форматирования и сохраняете страницу как шаблон. Каждый раз, когда вам нужно создать новую страницу, открываете шаблон, копируете его таким же образом,и делайте с копией что хотите.
Затем открываем первую страницу и в ссылках указываем названия наших страниц, после чего проверяем, как страницы открываются при кликаньи на ссылки. Если какая то страница не открылась, ищите ошибку при введении пути к ней или в ссылках, или названии страницы.
P.S еще один нюанс, у меня несколько раз возникали проблемы при повторном открытии ранее сохраненного после редактирования документа, и первый раз я долго искал причину, не понимая в чем дело. Оказывается между index и htm, появилась еще одна точка вот так- index..htm, на которую я упорно не обращал внимание (бывает сделали где то лишний пробел между знаками), так что перед загрузкой сайта на сервер (хостинг) обязательно пройдитесь по ссылкам.
Свой первый сайт я создал именно таким методом, но количество страниц дошло до 30, и за это время я узнал про возможность верстки страниц сайта с помощью таблицы стилей CSS, когда в одном файле можно менять оформление страниц на всем сайте, создание страниц с помощью блоков, и т д.
Можно использовать коды PHP для размещения на всех страницах сайта, например рекламного баннера и т.д., или движок для сайта CMS на JS JavaScript для бесплатного хостинга, единственная CMS используемая на бесплатном хостинге, которую я встретил, когда интересовался другими CMS.
Одним словом - чем дальше в лес, тем больше дров: вопрос с регистрацией своего домена, размещение его на хостинге, подготовка к индексации… В общем обо всем по порядку, читайте далее.
Изучив данный материал, можете перейти ко второму этапу.
Использование таблицы стилей при создании сайта
И так, если вы перешли ко второму этапу, значит уже освоили основные теги HTML и табличную верстку.
В принципе уже на данном этапе можно наполнять страницы контентом и выбрасывать их на хостинг, и если кого устраивает это, то следует подготовить сайт к индексации поисковыми системами, читайте статью Мета теги и индексация сайта.
Теперь давайте попробуем основные стили форматирования текста вынесем в отдельный файл. Для этого создаем новый файл и назовем его style, или main… и сохраним его в формате CSS.
Пример оформления файла CSS найдете в Extra Hide Studio, в шаблонах.
Но, для начала, создадим его на своей же странице, чтобы удобнее было его редактировать, не прыгая со страницы на страницу. Для этого, после закрывающего тега пишем следующее
, будем задавать различные параметры форматирования текста (как это делается вы узнаете из прилагаемых статей), а сразу же за /style открываем тег , и размечаем страницу при помощи таблиц, где будем размещать свой текст, ссылки...
Я не буду подробно описывать эту процедуру, так как это очень обьемная и разнообразная информация, с большим количеством различных стилей простых и сложных.
С помощью CSS можно просто отформатировать текст, можно создать полностью страницу из блоков, без применения таблиц, (этот вариант капризный) можно, как сделал я, разбил страницу с помощью таблиц, а в таблицах использовал блоки, созданные с помощью CSS, и размещенные в отдельных файлах, из которых собираются страницы кодом PHP, но об этом чуть позже.
Использование отдельного файла CSS очень удобно, когда у вас большое количество страниц, с одинаковым оформлением текста, уменьшается "вес" сайта, можно в одном файле менять цвет всего фона, отдельных ячеек, текста, ссылок, и т. д.
В ссылках вы найдете статьи по CSS, которыми я пользовался, выбрав из множества других. Кроме этого я просмотрел десятки разных файлов, старался вникнуть в различные стили, скачивал множество бесплатных шаблонов с применением CSS.
Наберите в браузере "Бесплатные шаблоны для сайта", и увидите множество предлагаемых вариантов.
Я распечатал справочник по CSS, и он у меня всегда под рукой, но время от времени все равно приходится просматривать статьи в поисках того или иного решения.
Начать советую со статьи Влада Мержевича -Что такое CSS, на мой взгляд, это наиболее доступное для понимания новичка и более обьемное изложение темы.
В статьях других авторов много повторений, но и много других взглядов на эту тему.
Например, в статье "Пример верстки CSS" вы узнаете как создаются страницы из отдельных блоков, это то, о чем я намекал ранее.
После того, как вы создадите свои стили непосредственно на странице, описанным выше способом, с помощью редактора, его можно перенести в отдельный, созданный нами файл, а на нашей странице установить ссылку на этот файл
< link rel="stylesheet" type="text/css" href="main.css">,
где вместо main указываете свое название файла.
Конечно обьем информации большой, много дополнений и изменений в уже привычном использовании нами тегов HTML, но заметьте, в основе, почти везде те же, уже знакомые нам теги.
Так что дерзайте, это вам в дальнейшем очень и очень пригодится. Сейчас уже немного сайтов где еще не используется CSS.
И еще совет, не пытайтесь использовать полностью готовый файл стилей CSS, пока не создадите свой, с нуля, и не поймете основные принципы определения стилей и работы с ними, так как в дальнейшем вам будет очень сложно что то изменить или добавить, вы просто запутаетесь.
Теперь немного о возможности построить сайт, собирая его основу из отдельных блоков, т.е. разбив страницу на несколько блоков, сохраняем их в отдельной папке (у меня как текстовый файл) и вызываем на нужную страницу с основным текстом, в нужное место кодом PHP (созданные обычные HTML страницы сохранять как файлы php, иначе код не срабатывает).
Это дает нам возможность редактировать каждый из этих файлов отдельно, например менять/добавлять ссылки, рекламу, другую информацию, которая автоматически меняется на всех страницах сайта.
Я не буду описывать подробно этот вариант, а обращусь опять же к статье Нелли Федосенко, из которой я впервые и узнал про эту возможность. Правда, я лично использовал прочитанный в последствии на одном из форумов код
?php
include (' название папки/название файла.txt');
?
Для работы (редактирования на компьютере) PHP, как и JScript нужно установить виртуальный Хост, желательно Базовый пакет (denwer.ru) Денвер. В последующем, вы сможете с его помощью установить и редактировать на своем компьютере любую CMS (систему управления сайтом).
Сайт и PHP
Собираем страницы Сайта из блоков используя код PHP
Статья Нелли Федосенко
создателя одной из лучших рассылок на тему - работа в Интернет Домашний бизнес / http://www.homebusiness.ru
КАК БЫСТРО ПОМЕНЯТЬ РЕКЛАМНЫЙ ТЕКСТ
НА ВСЕХ СТРАНИЦАХ САЙТА?
Начинающие вебмастера, желающие зарабатывать на рекламе, постоянно меня спрашивают:
"А как менять рекламный текст (баннер) сразу на всех страницах сайта?".
Очень важный вопрос, если ваш сайт сделан не с помощью программистов-профессионалов и не на CMS (системе управления контентом), а собственными ручками. Не будете же вы менять рекламный баннер вручную на всех страницах сайта (тем более если их несколько сотен или тысяч)?!
Расскажу, как это делаю я (а я свой сайт делаю именно ручками).
Моя инструкция предназначена не для профессионалов (профессионалы могут дальше не читать). Но я делаю в точности так, как я это опишу ниже. И у меня все работает.
Кстати, это касается не только рекламы, но и прочих элементов страниц вашего сайта - меню, шапки сайта, подвала (нижней части). Так что пригодится в любом случае, даже если вы не найдете себе рекламодателя. Будете разом менять отдельные части вашего сайта (если в этом возникнет необходимость).
Страница состоит из блоков
Страница сайта обычно имеет индивидуальную часть (содержательную, обычно размещаемую в центре), и общую часть (присущую для всех страниц сайта и одинаковую для всех страниц). Вот эту общую часть желательно разбить на более мелкие блоки (по признакам месторасположения и функциональности). И завести для них отдельные файлы.
Например, шапку сайта оформим в виде файла header.htm, подвал - footer.htm, меню - main.htm, рекламный блок - reklama.htm.
Если рекламных блоков несколько, то и соответствующих файлов будет несколько, например: reklama-left.htm, reklama-right.htm, reklama-header.htm, reklama-footer.htm.
Все подобные файлы я собираю в одной папке на сайте с именем blocks (можете назвать ее как угодно).
Команда include
Каждый такой файл вызывается в html-коде страницы с помощью команды (оператора) языка PHP include. Я просто в нужном месте html-кода страницы размещаю команду следующего вида:
<?include("$DOCUMENT_ROOT/blocks/reklama-right.htm");?>
Когда веб-сервер встречает это выражение, он перенаправляет его интерпретатору PHP, который на место команды include вставляет текст из соответствующего файла. В нашем случае он вставляет содержимое файла reklama-right.htm.
Каждая страница моего сайта состоит из подобных блоков.
Теперь, чтобы поменять рекламу в правой части сайта (например), мне достаточно поменять содержание только одного файла - reklama-right.htm - и поменяется рекламный блок правой части сайта сразу на всех страницах.
Вложенные блоки
Кстати, сам файл reklama-right.htm может сам состоять из нескольких файлов (например, reklama-1.htm, reklama-2.htm, ..., reklama-google.htm, reklama-yandex.htm и так далее). Он может выглядеть так:
<?include("$DOCUMENT_ROOT/blocks/reklama-1.htm");?>
<br>
<?include("$DOCUMENT_ROOT/blocks/reklama-2.htm");?>
<br>
<?include("$DOCUMENT_ROOT/blocks/reklama-google.htm");?>
Уровень вложенности подобных файлов может быть большим до бесконечности (если в этом есть какой-то смысл).
Если блок пустой
Если в файле reklama-1.htm содержится реклама рекламодателя-1, а затем он вдруг решил не продлять размещение рекламы, вы можете просто удалить всю информацию из файла (не удаляя сам файл), сделать его пустым. И это совершенно не помешает отображению страниц вашего сайта в браузере.
Если команда include не будет работать
Если вы начнете использовать данную команду (include), но она работать не будет, обратитесь к хостеру. Он настроит ваш хостинг должным образом.
Экономия места на хостинге
Использование команды include полезно и с точки зрения экономии места на хостинге. Страница, состоящая из блоков, занимает в несколько раз меньше места, так как блок - это всего лишь один файл, хранящийся в отдельной папке.
Мои благодарности
Спасибо Владимиру Иванову, программисту из Новосибирска, который в свое время объяснил мне все вышесказанное. Надеюсь, я более-менее понятно передала эту информацию вам, дорогие читатели.
Страхование относится к категории наиболее сложных финансовых услуг, связанно это с большим количеством условий, оговорок, и исключений, разобраться в которых самостоятельно не так просто.
Большинство страховых компаний работают добросовестно. Проблемы возникают, когда встечаются недобросовестные представители страховщика на местах, которые затягивают выплату страхового возмещения, и используя нашу правовую неграмотность стараются найти повод для отказа.
Задумайтесь над цифрами - миллиарды рублей не возмещенных убытков, только по ОСАГО.
Любая компания, даже находясь на грани банкротства, застрахует вас с удовольствием, но далеко не все готовы расстаться с деньгами и добросовестно выплатить страховое возмещение.
Таковы особенности бизнеса во всём мире.
На страницах сайта вы узнаете как определить надежность страховой компании, получите практические советы на темы: ОСАГО - если вы стали участником ДТП, как и куда написать жалобу на неправомерные действия Страховщика, как надежно застраховать машину по КАСКО, что такое страхование жизни, что такое НПФ - негосударственные пенсионные фонды, узнаете кто такие Страховые брокеры...
А также найдете документацию по ОСАГО и ссылки на полезные ресурсы по этой теме.
Раздел Интернет для начинающих, я решил создать, когда накопилось огромное количество информации, при самостоятельном изучении материала, за время создания и работы с сайтом. В этом разделе, я пытаюсь в доступной форме дать необходимую для начинающих пользователей Интернет, информацию - с чего начать изучение Интернет, создание и раскрутка своего сайта, как зарегистрировать почтовый ящик, где скачать бесплатные, проверенные программы, учебную литературу для работы, различные варианты заработка в Интернет, и многое другое, о чем нужно знать начинающему.
Комментариев нет:
Отправить комментарий