РАБОТАЮ ВО ВСЕХ ГОРОДАХ РОССИИ
ВРЕМЯ РАБОТЫ С 9:00 ДО 20:00
Инструментальные средства для создания сайта - 1.
Категория: веб-программирование.
Это статья расскажет в общих чертах о том, как создаются сайты. Для меня когда-то слово сайт было туманным и не понятным. Постараюсь как можно короче объяснить. Итак, читайте.
1.Понятие веб сайта
2. Классификация веб-сайтов
3. Обзор инструментальных средств
4. Этапы разработки веб-сайтов
5. Основные элементы
6. Структура документа
7. Добавление комментариев
8. Создание базовой Web-страницы
9. Сохранение созданной Web-страницы
10. Открытие и просмотр созданной Web-страницы
11. Добавление различных элементов на Web-страницу
12. Описание страниц с помощью дескриптора <мета>
13. Автоматическое обновление Web-страниц
14. Переадресация Web-страниц
15. Каскадные таблицы стилей
16. Интерактивные Web-страницы
17. Продвижение сайта в сети интернет
18. Заключение
ВВЕДЕНИЕ
Влияние глобальной компьютерной сети Internet на современный мир не имеет исторических аналогов. Это основа новой философии и новой деловой стратегии. Internet и WWW прочно вошли в нашу жизнь, и нам уже трудно представить свою деятельность без них. WWW – это огромный набор гипертекстовых документов, которые благодаря Internet доступны в любой точке мира. Создание Web-сайтов является одной из важнейших технологий разработки ресурсов Internet. Хороший сайт предоставляет полезную информацию пользователям, является визитной карточкой коммерческой фирмы и образовательного учреждения. Сайт работает в любое время суток. В настоящее время во всемирной паутине размещено несколько миллионов Web-сайтов и их число постоянно растет. Каждый пользователь может не только просмотреть любой из них и извлечь полезную для себя информацию, но и принимать самое активное участие в их создании. Существует множество средств для создания Web-сайтов, но лишь некоторые из них способны предоставить разработчикам инструменты для решения подавляющего большинства стоящих перед ним задач.
ПОНЯТИЕ WEB-САЙТА
Информация, доступная пользователям Internet, располагается на компьютерах (Web-серверах), на которых установлено специальное программное обеспечение. Значительная часть этой информации организована в виде Web-сайтов.
Web-сайт – это информация, представленная в определенном виде, которая располагается на Web-сервере и имеет свое имя (адрес).
Для просмотра Web-сайтов на компьютере пользователя используются специальные программы, которые называются браузерами. Наиболее распространенные браузеры: Opera, Mozilla Firefox, Flock, Internet Explorer, Maxthon.
В зависимости от того, какое имя (адрес) сайта мы зададим в строке "Адрес", браузер будет загружать в свое окно соответствующую информацию.
Web-сайт состоит из связанных между собой Web-страниц. Web-страница представляет собой текстовый файл с расширением *.htm, который содержит текстовую информацию и специальные команды – HTML-коды, определяющие в каком виде эта информация будет отображаться в окне браузера.
Вся графическая, аудио- и видео-информация непосредственно в Web-страницу не входит и представляет собой отдельные файлы с расширениями *.gif, *.jpg (графика), *.mid, *.mp3 (звук), *.avi (видео). В HTML-коде страницы содержатся только указания на такие файлы.
Каждая страница Web-сайта также имеет свой Internet адрес, который состоит из адреса сайта и имени файла, соответствующего данной странице. Таким образом, Web-сайт – это информационный ресурс, состоящий из связанных между собой гипертекстовых документов (Web-страниц), размещенный на Web-сервере и имеющий индивидуальный адрес.
Вопрос: Что нужно для того, чтобы посмотреть какой-либо Web-сайт?
Ответ: Посмотреть Web-сайт может любой человек, имеющий компьютер, подключенный к Internet, Web-браузер и адрес сайта.
КЛАССИФИКАЦИЯ WEB-САЙТОВ
В настоящее время во всемирной паутине размещено несколько миллионов Web-сайтов и их число постоянно растет.
ОБЗОР ИНСТРУМЕНТАЛЬНЫХ СРЕДСТВ
Кроме Web-браузеров, необходимо иметь программы для редактирования HTML-документов.
Сейчас на рынке программного обеспечения представлено большое количество продуктов для создания Web-страниц или HTML-документов: от мощнейших профессиональных пакетов типа FrontPage и Dreamweaver до таких популярных программ семейства текстовых процессоров, как Microsoft Word Pad, Microsoft Word и Corel WordPerfect.
Достаточно востребованным для создания Web-сайтов является ряд визуальных приложений, называемых WYSIWYG-редакторами (What You See Is What You Get — что видишь, то и получишь). Эти программы ускоряют создание Web-документов и избавляют от необходимости вручную набирать основной программный HTML-код. Все необходимые операции выполняются автоматически.
Так же Web-страницы можно создавать вручную с помощью языка HTML (HyperText Mark-up Language – язык разметки гипертекста), при этом ввод HTML-кода выполняется в любом текстовом редакторе или с помощью HTML-редакторов.
Для создания элементов страниц используются следующие инструментальные средства: графические редакторы (Adobe Photoshop, Fireworks, Paint Shop Pro, Painter и др.) для создания графических файлов, текстовые редакторы для создания текстов, звуковые редакторы для создания звуковых файлов.
Обычно новичок думает следующим образом: «Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - тексты я создаю в MS Word, презентации - в MS PowerPoint, так возьму-ка я и для создания web-странички подобную программу - MS FrontPage...» Приняв такое решение, вы дважды обкрадываете себя.
Первый раз - в смысле рационального использования web-пространства. Дело в том, что все визуальные редакторы web-страниц, к которым относится и упомянутый MS FrontPage, вставляют в создаваемые страницы отсебятину - множество лишних ненужных тегов. Исключением, пожалуй, является Macromedia Dreamweaver (за что он снискал себе заслуженную популярность как среди новичков, так и среди профессионалов). Но даже он в этом плане не идеален - любит засорять исходный текст кавычками (в большинстве случаев совершенно ненужными), а также вставлять символы неразрывного пробела в самых неподходящих для этого местах.
Справедливости ради стоит отметить, что все визуальные редакторы предоставляют пользователю возможность работать с исходным кодом создаваемой страницы, но столь любимый многими FrontPage вновь переделает все по-своему, стоит вам только переключиться снова в визуальный режим.
Этапы разработки Web-сайта
Выделяют следующие этапы разработки Web-сайта:
планирование, реализация, публикация, продвижение, поддержка.
На стадии планирования определяется следующее:
• цели создания Web-сайта (Зачем? Какие задачи он должен выполнять и на какую аудиторию он рассчитан?);
• характер содержимого;
• структура (Юзабилити – удобство пользования);
• особенности оформления (определяется структура каждой страницы и разрабатывается графика).
Любую страницу можно оценить по трем параметрам: контенту, внешнему виду и навигации.
Если сайт рассчитан на долгое вдумчивое чтение, то он должен иметь хорошую читабельностб, меньше отвлекающих динамических эффектов, не утомляющее цветовое сочетание фона и текста.
И наоборот: сократите текстовые блоки до минимума, если Вы создаете сайт, дающий посетителю, прежде всего визуальную и другую мультимедийную информацию.
При создании достаточно больших документов надо помнить о том, что не все из посетителей имеют высокоскоростной доступ в Internet.
Вторая часть реферата о том, что такое сайт и как он создается.
Этапы разработки веб-сайтов (продолжение)
Реализация
Это и есть работа по созданию сайта. На этом этапе проводится подготовка текстового и графического материала (печать, сканирование). Материал разбивается по файлам в соответствии со структурой. Организуются ссылки между файлами сайта.
Рекомендуется создать шаблон-заготовку страницы с основными структурными областями и стилевым оформлением и использовать ее для создания всех страниц узла. Меняйте в каждой новой странице только содержимое и адресацию ссылок, такая организация работы сократит время, потраченное на каждую из них.
Тестирование
Завершив работу по размещению страниц на Web-сайте, необходимо выполнить тестирование. Оно состоит из двух этапов: тестирование на работоспособность и тестирование на удобство пользования интерфейсом.
На этапе тестирования на работоспособность проверяют, как функционирует Web-сайт, используя те же условия, при которых с ним будет работать пользователь. Поработайте с Web-сайтом в различных браузерах и посмотрите, как выглядит Ваш сайт в каждом из них. Постарайтесь оценить время загрузки страниц, что очень важно.
Публикация
Готовый Web-сайт необходимо опубликовать на Web-сервере, чтобы он был доступен через Internet. Если ваш сайт создан посредством редактора FrontPage, то на сервере должны быть инсталлированы серверные расширения FrontPage, что обеспечит полную поддержку доступных в FrontPage компонентов, которые были помещены на странице в процессе создания сайта.
Если у вас нет собственного сервера, то в Сети можно найти огромное количество ссылок на free web pages, где некоторые провайдеры предоставляют своим клиентам бесплатное место под страницу.
Например, https://narod.ru
Однако для того чтобы окончательно выбрать сервер для размещения своего сайта необходимо обратить внимание на следующее:
• отсутствие дискриминации по контенту. Некоторые сервера ставят условия, касающиеся содержимого Вашего сайта;
• надежность Web-сервера. Посетите их Web-узел в пиковые часы и убедитесь, что проблем с доступом не возникает;
• отсутствие скрытых завуалированных видов оплаты места в виде всевозможных доплат за различные услуги и рекламы;
• техническая поддержка. Предоставят ли Вам возможность общения с администратором сервера, есть ли возможность доступа по протоколу FTP (File Transfer Protocol ) и т.д.;
• объем выделяемого Вам пространства. Обычно это 5 – 10 мегабайт;
• дополнительные возможности. Не будет лишним, если сервер предложит Вам: бесплатную почту,
счетчик посещений, гостевую книгу, чат, различные CGI-скрипты и т.д.;
• какое программное обеспечение установлено на сервере. Например, UNIX-сервера чувствительны к регистру букв в названиях файлов, т.е. если у Вас в исходном коде будет стоять ссылка на файл background.gif, а файл будет назван background.Gif или Background.gif, то он не будет визуализирован. Однако у таких серверов более высокая степень защищенности от взломов;
• есть ли на сервере автоматическая перекодировка содержимого страниц, в соответствии с пользовательскими настройками браузера. Если таковой нет, то у Вас могут возникнуть проблемы с отображением русских кодировок.
Рекламирование сайта
Существует множество приемов рекламирования сайта: размещение информации о нем на поисковом Web-сайте, организация взаимных ссылок с другими сайтами и т.д.
Как привлечь пользователя? Красиво оформленные страницы Web-сайта – это только половина дела. В первую очередь страницы должны быть содержательными. Основное требование к содержимому Web-сайта – полнота и достоверность. Информация должна быть представлена таким образом, чтобы пользователь, однажды посетивший Web-сайт, еще ни раз обратился к нему.
Сопровождение сайта
Содержимое Web-сайта может подвергаться неоднократным изменениям. Важно, чтобы предоставляемая на Web-сайте информация всегда была актуальной, поэтому как можно чаще обновляйте информацию на своем Web-сайте, по возможности расширяйте материал, улучшайте дизайн.
Обязательное правило. Web-сайт должен обновляться не реже одного раза в месяц. В противном случае вы потеряете не только потенциальных, но и уже состоявшихся посетителей. Рекомендуется создать на своем компьютере копию Web-сайта, вносить в нее изменения и новую версию передавать для размещения на сервере в завершенном виде.
Основные элементы HTML
HTML-страница является документом, созданным на основе языка HTML. Это по сути и есть Internet-страничка при условии, что ее файл будет размещен в Internet
Значки “<” и “>”. Эти элементы в угловых скобках называются HTML-дескрипторами или HTML-тегами.
Именно дескрипторы сообщают Web-браузеру информацию о структуре и особенностях форматирования Web-страницы. Большинство дескрипторов являются парными, т.е. состоят из открывающей и закрывающей частей и воздействуют на текст, помещенный между ними. Обратите внимание, что признак закрывающего дескриптора — обратная косая черта ” / “.
Следующий важный термин, относящийся к основным понятиям языка HTML,— элемент. Элемент— конструкция языка HTML. Он состоит из открывающего дескриптора, содержания и закрывающего дескриптора. Содержанием называется все, что находится между открывающим и закрывающим дескрипторами.
Атрибуты — дополнительные к дескрипторам параметры или свойства элементов (например, цвет или размер шрифта для одного абзаца, где абзац является элементом).
Структура документа HTML
Согласно спецификациям HTML 4.01, разработанным W3C, для всех документов HTML обязательны следующие условия.
В документе должна присутствовать директива (или пролог, как его иногда называют) DOCTYPE (Document Type Declaration). Пролог содержит объявление, информирующее отом, какая именно версия HTML использовалась при составлении Web-cтраницы, и указывает Web-браузеру, каким образом обрабатывать данный документ. Пролог представляет собой одиночный дескриптор специального вида. Данный дескриптор всегда вставляется в самом начале HTML-документа перед открывающим дескриптором <html>. (На рис. 2.6 —<I DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>.)
Запомните, что <! doctype — единственный дескриптор, который пишется прописными буквами Все остальные дескрипторы нужно набирать только строчными буквами!
HTML-документ всегда должен начинаться открывающим дескриптором <html> и заканчиваться закрывающим дескриптором </html>
Далее следуют два дескриптора заголовка <head> и </head>. Между этими дескрипторами обычно находится пара дескрипторов <title> и </title>, определяющих название страницы. Обратите внимание: именно это название отображается в заголовке окна Web-браузера.
Далее следует пара дескрипторов содержимого документа <body> и </body>. Между этими дескрипторами и размещают всю информацию, которая планируется быть представленной на Web-странице.
Добавление комментариев
Комментарии — это определенное текстовое сообщение, которое автор вставляет в Web-страницу, чтобы отметить для себя нужные детали. Например, как частный случай — сделать для себя пометку о необходимости добавления рисунков в данный раздел либо глобально — добавить информацию, помогающую впоследствии разобраться в отдельных вехах создания сайта или управлять им.
Комментарии не отображаются Web-браузерами на экране, но нужно помнить, что любой пользователь может прочесть данные комментарии.
Для добавления комментариев используют специальные парные дескрипторы — открывающий <!— и закрывающий —>.
Чтобы внести в HTML-код Web-страницы текстовую конструкцию комментариев, выполните такие действия.
1. Введите дескриптор <!— в месте начала текста комментария. Наберите собственно требуемый текст комментария. Завершите блок комментария закрывающим дескриптором —>, например
<!— А в это место Web-страницы нужно вставить красивые картинки или фотографии. Не забыть!—>
2. Как обычно, сохраните текст, вернитесь в окно Web-браузера и обновите изображение открытой Web-страницы. Обратите внимание, что на Web-странице текст комментариев не отображается.
Текст комментариев можно отделять дополнительными пробелами от разделительных дескрипторов, чтобы HTML-код было проще читать.