<
УЦ Контакт

Лидер IT образования

Как приятно знать, что ты что-то узнал (Мольер)

 
03056, Киев, пер. Ковальский 13, 1-й этаж, офис №2
 
Программы курсов

Акция! Студентам - Скидка 15%! Слушателям IT Academy бесплатное посещение English Club

Статья>>Создание сайта

Создание сайта

Великие и не очень мастера прошлого украшали свои творения фирменным рисунком – таким, который сразу говорил о принадлежности изделия руке конкретного автора. Один век сменял другой, и вот уже ни одна компания, претендующая на звание "респектабельной", не может обойтись без узнаваемой символики. Создание сайта невозможно себе представить без таких атрибутов web-мастера как язык гипертекста HTML и его потомка – расширяемого языка разметки гипертекста.

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

Хорошо, если организация имеет трудовые и финансовые ресурсы для обеспечения подобной работы. А если речь идет о маленьком, но очень амбициозном бизнесе, которому не дает покоя слава корпораций-гигантов?

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

Итак, с чего начать "чайнику"? Прежде всего, определиться с тем, что именно должен отражать логотип. Правила просты: картинка должна выделяться, быть простой для восприятия и иметь не более трех цветов. Вспомните бородатый анекдот про "круглую лошадь в вакууме": самое простое – нарисовать знак правильной круглой формы (по крайней мере, потренироваться можно именно на нем).

Итак, набросок будущего товарного знака готов: вот он, нарисованный на белом листе бумаги, лежит перед хозяином и обещает указать путь к Эльдорадо… Следующий шаг – открываем Photoshop (без его помощи разработка фирменного стиля застопорится) и, постигая азы, пытаемся придать пока еще плоской картинке глянцевый блеск и объем.

Для этого делаем в программе "заготовку" – создаем изображение размером 300*300 пикселей. С помощью команды Ctrl+Shift+N получаем новый слой. Далее требуется воспользоваться выделительным инструментарием – Marquee Tool. Чтобы круг сохранил правильную форму, не забудьте зажать клавишу Shift.

Заготовка получена. Цветовую гамму, глубину и тени на картинке помогут подобрать редакторы Bevel and Emboss, Inner/Drop Shadow, Satin. После экспериментов с цветом переходим к основной части рисунка: на сферическую заготовку помещаем объект с помощью операторов выделения Eleptical marquee tool и заливки Bucket Tool.

Картинка стала объемной: самое время поместить внутрь полученного "блина" имя компании с помощью одного из предложенных программой шрифтов. Теперь обратимся к "спецэффектам" – все те же редакторы выделения и заливки могут установить различный уровень прозрачности полученного рисунка.

И вот экран монитора, переливаясь всеми цветами радуги, демонстрирует красивый логотип, задача которого гордо нести в массы душу фирмы и приносить невероятный доход!

Сложно? Долго? Тогда оставьте изучение умного графического софта до лучших времен и отправляйтесь к профессионалам. Поверьте, на этом свете немало "самородков", готовых воплотить мечту в жизнь – быстро, качественно и недорого.

Интерактивная веб-анимация или технология Flash, разработанная при поддержке компании Macromedia, сегодня является неотъемлемой частью большинства современных веб-ресурсов.

Яндекс.Директ Все объявления. Есть свой бизнес, но нет сайта? Зарегистрируйтесь и получите сайт с каталогом товаров и услуг. Бесплатно! prom.ua

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

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

В отличие от обычной gif-анимации, проектирование флэш-элементов подразумевает тесную интеграцию мультимедийных технологий и скриптового языка ActionScript, входящего в комплект стандартной поставки программного приложения Macromedia Flash.

Чем сложнее элементы, тем больше технических проблем с ними возникает. Это непреложная истина. В случае с Flash, камнем преткновения между веб-браузерами и собственно самой технологией стали plug-in модули, используемые для создания мультимедийных объектов. Отсутствие у веб-браузеров поддержки этих модулей приводит к тому, что в автономном режиме некоторые флэш-элементы невозможно просмотреть. В случае с рекламными баннерами это еще можно пережить. Но как быть, если вам необходимо увидеть содержание сайта, полностью реализованного на платформе Flash? Кстати, о флэш-сайтах. На Западе ресурсы, выполненные на основе флэш-технологии не редкость, а посему там давно сформировалась культура создания и использования таких сайтов. В Рунете же пока подобных сайтов не так много, и для этого существует немало объективных причин.

Во-первых, российские поисковые системы не индексирует флэш-сайты, так как они построены без применения html. Таким образом, подобные ресурсы выпадают из гонки за положение в рейтинге, и тут никакая раскрутка не поможет.

Возможно, в будущем эта проблема будет устранена, но пока не стоит рисковать, делая ставку на флэш-сайты.

Во-вторых, не забывайте, что российский сегмент Интернета (так называемый Рунет) официально существует всего 10 лет. Слишком малый срок для действительно серьезного проникновения Всемирной паутины в профессиональные и приватные области жизни человека. Согласно проведенным исследованиям компьютерными классами до сих пор оснащены далеко не все учебные заведения, и речь идет не только о средних школах. Что уж тут говорить об Интернете!

В последнее время ситуация меняется к лучшему, хоть и довольно медленно. Развитие рынка мобильной связи открыло для российских потребителей возможности gprs доступа, а повсеместная замена на телефонных станциях устаревшего аналогового оборудования на цифровое, позволила подключаться к широкополосному Интернету. Однако, несмотря на все нововведения, пока что лидирующие позиции уверенно занимает dial-up доступ в Интернет с использованием обыкновенного модема, обладающего максимальной скорость 56 кб/c. При таком положении дел флэш-сайты не слишком актуальны, ведь их мультимедийные компоненты в разы превышают допустимый размер средней html-страницы, и многие пользователи просто не смогут загрузить для просмотра такой объем информации.

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

В-четвертых, реализовать с помощью флэш-технологии многие удобные для пользователя функции (например, увеличить размера шрифта, система поиска по сайту) не удастся. Флэш-сайт делается раз и навсегда, а посему он не восприимчив к всякого рода изменениям.

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

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

Размещение и обработка видео происходит с помощью метафайлов (вид файлов, отвечающие за содержание других файлов) формата ASX и RAM. Права на ASX принадлежат компании Microsoft и для просмотра видеофайлов подобного формата понадобится проигрыватель Windows Media. Формат RAM компании RealAudio предполагает использование приложения Real Player.

Для передачи видеофайлов в сети Интернет используются протоколы mms, pnm и rts. Если вы предполагаете воспроизводить на веб-странице файл из стороннего источника, html-код будет выглядеть примерно так: <a href ="mms://url-адрес">текст ссылки<a/>.

В Интернете чаще всего встречаются видеофайлы форматов WMV (Windows Media Video), AVI (Audio Video Interleave), MOV (воспроизводится плеером Quick Time компании Apple), MPEG-4 и FLV (Flash Video). Остановимся на последнем формате, то есть FLV.

Flash Video – это закрытый формат файлов, используемый для передачи видео через Интернет. FLV считается самым мощным конкурентом стандартных форматов видео, поскольку сочетает отличное качество видеоизображения и сравнительно небольшой объем транслируемого файла. На flash-технологии был основан популярный сервис Youtube и его многочисленные аналоги.

Чтобы разместить на веб-сайте, с целью проигрывания в режиме реального времени, видео в формате *.flv вам понадобится flash-плеер и конвертер видеофайлов из обычного формата в flash, например программа Total Converter. Далее на сайт копируются файл плеера, у нас он называется flplayer.swf, и видео (movie.flv). HTML-код должен выглядеть следующим образом:

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" scr="flplayer.swf" width="300" height="200" type="application/x-shockwave-flash" flashvars="file=/flv/movie.flv" bgcolor="#FFFFFF"/>, где:

1. <EMBED> - тег, используемый для размещения в Сети видеофайлов

2. Scr – url-адрес плеера

3. Flashvars - url-адрес видеофайла

4. Bgcolor – фоновый цвет клипа

С развитием Интернета разработчики веб-сайтов все чаще стали использовать анимацию. Несомненно, анимация на страницах сайта способна внести элемент движения, живости. Особенно это касается ресурсов, содержащих громоздкие тексты и публицистические материалы. Но когда анимация (GIF и Flash) бездумно и, самое главное, в огромных количествах размещается на сайте, невольно создается впечатление, что сделано это лишь затем, чтобы продемонстрировать уровень мастерства дизайнера или веб-студии. При этом об удобстве пользователей, по большому счету, никто и не задумывается. А ведь зачастую, из-за обилия флэш-роликов и gif-анимации на сайте, невозможно не то что запомнить информацию, ее и прочитать то трудно.

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

Анимацию НЕ следует применять:

а) На каждой веб-странице в виде бесполезного украшательства. Посетитель сайта будет отвлекаться, уровень его внимания понизится. И как результат - недовольные и раздраженные посетители уйдут к конкурентам с более спокойным дизайном.

b) При разработке логотипа. Логотип - это фирменный знак, часть бренда, и поэтому он не должен содержать сложных для зрительного восприятия объектов, тем более недопустимым считается включение в него анимационных изображений.

с) На веб-страницах, и без того перегруженных большим объемом информации. Любой вид анимации, особенно это касается флэш-роликов, способствует значительному увеличению размера страницы. Наивно надеяться, что пользователь будет добрых полчаса дожидаться загрузки необходимой ему страницы, только потому что вы разместили на ней красивую анимацию.

Использование анимации НЕОБХОДИМО, когда:

а) Требуется наглядно продемонстрировать возможности того или иного рекламируемого товара. При этом с помощью программы 3d max можно разработать объемные объекты или, применяя флэш-технологию, создать элемент "слайд-шоу", снабженный кнопкой управления. Флэш-анимация обладает несравнимо большими возможностями и богатым набором инструментов для их реализации по сравнению с gif-анимацией. Однако, не стоит увлекаться этой технологией, поскольку во-первых, основная часть пользователей до сих пор "сидит" на низкоскоростных модемах, и поэтому не сможет оценить привлекательный дизайн, выполненный с применением флэш-анимации. Во-вторых, несовершенство российских поисковых систем делает содержание флэш-сайтов недоступным для поиска, а значит и для оценки уровня релевантности. Другими словами, флэш-сайт не сможет рассчитывать на место в рейтинге поисковых систем, так как они его просто-напросто не обнаружат.

b) Проследить изменение какого-либо объекта.

с) Привлечь внимание пользователей к определенной области веб-страницы. В этом случае допустимо применение "всплывающих" названий и прочих эффектов.

Заключение.

Если вы сомневаетесь применять или не применять анимацию на сайте, задайте себе вопрос: а можно ли в данном случае обойтись без нее? При положительном ответе не теряйте время и приступайте к разработке анимации или же отдайте сайт в руки специалистов по веб-дизайну, договорившись о том, где вы желаете видеть анимационные объекты, а где нет.

HTML-документ – это файл с расширением *.html или *.htm, созданный с применением языка разметки гипертекста. Для форматирования документа (установки его параметров) служат теги – команды языка HTML. Общий вид записи тега выглядит так: <Тег>. . .текст</Тег>,где <Тег> является "открывающим" тегом (обозначает начало действия определенной команды в документе), а </Тег> - "закрывающий" тег (определяет место окончания действия). Пара тегов – закрывающий и открывающий – образуют элемент под названием "контейнер".

Главная информационная роль отводится атрибутам тегов. Атрибут является набором символов, значение которых соответствует значению определенного английского слова. У одного тега может быть несколько атрибутов. Разберем конкретный пример. Тег <font> применяется для форматирования текста. Однако он не способен указать подробные параметры форматирования (размер текста, шрифт и его начертание, цвет и другие). Зато это по силам атрибутам face (гарнитура шрифта), color (цвет), dir и lang (направление чтения текста и информация о языке), size (размер текста). HTML-код: <font face="Verbana, Arial, Helvetica, sans-serif">, причем font – тег, face – атрибут, Verdana, Arial . . . – значение атрибута.

Теперь, обладая знаниями, достаточными на первое время, создадим наш первый html-документ. Для этого откройте любой текстовый или визуальный html-редактор (в последнем случае придется перейти в режим отображения кода). Начинающим веб-мастерам довольно часто советуют создавать первые веб-страницы с помощью обыкновенного текстового редактора (например, Блокнота в Windows). Трудно сказать, чем обусловлены подобные рекомендации, но для написания кода разумнее воспользоваться специализированными программными продуктами (EmEditor, Dreamweaver, HomeSite). Конечно, в начале будет трудно. Однако вскоре вы привыкните к выбранной программе, разберетесь в ее особенностях. А такие полезные функции как подсветка синтаксиса, сообщения об ошибках, встроенный браузер для наглядной демонстрации результатов, окупят все мучения.

Но мы немного отвлеклись. Итак, запустив html-редактор, введите следующий код:

 

<html>
<head>
<title>Моя страничка</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Мой первый документ
</body>
</html>

 

Рассмотрим форму записи кода. Любой документ начинается и заканчивается парой <html> и </html>. Хотя в данном случае теги набирались маленькими буквами, никакой ошибки не будет, если ввести теги заглавными буквами. Каждый тег располагается в отдельной строке. Это не правило, просто так комфортнее читать текст. Пара тегов <head> и </head> обозначает начало и конец заголовка документа. Метка <title> содержит служебную информацию о названии документа. Начало и конец тела документа - <body> и </body>. Причем в теле документа находится его основное содержимое.

Подведем итоги:

Сегодня вы научились создавать простейшие html-документы и сделали первые шаги на пути к изучению профессиональной верстки веб-страниц.

Раньше фреймы и таблицы считались основными способами верстки. Но время не стоит на месте, и с выходом нового поколения веб-браузеров, поддерживающих современные технологии, ситуация изменилась. Использование слоев, наподобие тех, что можно встретить в программе Adobe Photoshop, для верстки документов предоставило веб-мастерам поистине неограниченные возможности. Но, если от фреймов и так собирались отказаться ввиду их громоздкости и слишком грубому вида, то между приверженцами табличной верстки и поклонниками слоев разгорелись нешуточные страсти. Дело в том, что у таблиц хоть и существуют недостатки, но из-за простоты освоения этот метод верстки пользуется неизменной популярностью у начинающих веб-мастеров, да и некоторые профессионалы нет-нет, да и применят табличную верстку на сайте. Поэтому таблицы и слои стали считаться конкурентами. Сейчас, когда ажиотаж вокруг слоев немного поутих, самое время узнать достойный ли у табличной верстки соперник.

Слои являются элементами HTML-кода, которые можно внедрять в веб-страницу путем размещения одного на другом с точностью до пикселя. Изменения в параметры слоя вносятся с использованием языка JavaScript или VBScipt, благодаря чему становится возможным применение на страницах сайта различных эффектов: плавающие окна, вращающиеся надписи, выпадающее меню и другие.

Слой задается контейнером <Layer>, а для определения позиции слоя требуются атрибуты top (отступ от верхнего края экрана), left (отступ от левого края экрана), z-index (место расположения отдельного слоя, заданного декартовыми координатами, причем слой с самым большим значением помещается сверху).

Достоинства слоев:

1. Метод позиционирования слоев относительно друг друга позволяет создавать интересные эффекты, способствующие "оживлению" веб-страницы

2. Быстрая обработка слоев веб-браузерами

3. Поддержка декартовых координат позволяет указать положение слоев на странице с точностью до пиксела

4. Настройка свойств слоя посредством CSS

К недостаткам слоев относятся:

1. Глубинное знание языков и технологий веб-программирования – JavaScript, VBScipt, CSS

2. Различия в отображении сайта, при верстке которого применялись слои, веб-браузерами.

3. Проблемы при редактировании страниц со слоями в графических html-редакторах

Верстка с помощью слоев технически напоминает позиционирование элементов, причем стандартный в таких случаях тег <Layer> лучше заменить на <Div>, тогда проблем с браузерами поубавится.

Как видите, слои практически не ограничивают фантазию дизайнера, но вместе с тем сложны в исполнении. К тому же единый стандарт восприятия веб-браузерами в них отсутствует. Поэтому никто не гарантирует, что сверстанный таким образом сайт, будет идентично выглядеть и в Internet Explorer, и в Opera. Вот почему до сих пор не отказываются от использования таблиц. Однако, стоит заметить, что в плане верстки у слоев большое будущее, если устранятся разночтения веб-браузеров.

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

Верстка сайта – процесс тяжелый и трудоемкий, особенно для начинающих веб-мастеров. Существует целые ряд наиболее часто встречающихся ошибок, устранением которых мы и займемся.

1. Некорректное использование JavaScript, апплетов, DHTML, сценариев CGI и SSI.

Если вы не слишком хорошо разбираетесь в технологиях CGI и SSI, поверхностно знаете языки JavaScript и DHTML, лучше на первых парах обойтись без них. Пусть ваш сайт не поражает использованием новейших технологий, зато у пользователей не возникнет проблем при просмотре страниц. А веб-браузеры не будут выдавать сообщения об ошибках. Следует также учитывать, что необоснованное использование апплетов приводит к увеличению размера страницы и времени ее загрузки. Поскольку в борьбе за постоянную аудиторию, скорость передачи данных играет решающую роль, старайтесь при проектировании страницы учитывать всевозможные способы доступа в Интернет (от стандартного Dial-Up до GPRS и широкополосного Интернета). Идеальным будет считаться вариант, если у пользователя Dial-Up доступа со скоростью, не превышающей 56 Кб/с страница вашего веб-ресурса загрузится в течение 30 секунд. Задача конечно не из легких, но кто сказал, что путь к успеху устлан розами?Прежде чем приступить к продвижению сайта в сети Интернет, необходимо позаботиться об отсутствии в нем ошибок, связанных с неправильной версткой. Иначе любая, самая продуманная рекламная компания в поддержку веб-ресурса, окажется бесполезной тратой времени и денег.

Верстка сайта – процесс тяжелый и трудоемкий, особенно для начинающих веб-мастеров. Существует целые ряд наиболее часто встречающихся ошибок, устранением которых мы и займемся.

Яндекс.Директ Все объявленияРаскрутка Сайта Выведение Вашего бизнеса в ТОП 10! Финансовые гарантии. Киев Адрес и телефон seo?studio.com.ua

2. Графика и анимация на страницах веб-сайта. Чрезмерное применение.

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

Некоторые пользователи, в целях экономии трафика, просто-напросто отключают показ графических изображений. Чтобы было понятно, что находится на странице, прописывайте комментарии (alt) к картинкам и баннерам. Тем более обязательны теги в том случае, если меню сайта целиком состоит из графических элементов.

3. Обилие рекламы.

В наше нелегкое время рыночной конкуренции сайты выживают за счет рекламы. Однако все же не стоит слишком явно демонстрировать свою заинтересованность в коммерческом успехе ресурса и размещать по два десятка баннеров на каждой странице. Это в прямом смысле отпугнет посетителей и понизит престиж сайта, особенно если вы рекламируете товары сомнительного качества, не вызывающие доверия (БАДЫ, сетевые пирамиды, способы разбогатеть ничего не делая и т.д). Запомните, на одной странице допускается размещение не более двух баннеров больших размеров (один – вверху страницы, другой – внизу) и 4 баннера размера 88х31. Следите, чтобы они вписывались в общий дизайн и соответствовали тематике веб-ресурса.

4. Всплывающие окна.

Никогда не применяйте всплывающие окна без крайней необходимости. Опытные пользователи Интернета автоматически закрывают подобные окна, даже не просматривая их содержание. А большинство антивирусов блокируют всплывающие окна, подозревая их в наличие вредоносного кода.

Некоторые пользователи, в целях экономии трафика, просто-напросто отключают показ графических изображений. Чтобы было понятно, что находится на странице, прописывайте комментарии (alt) к картинкам и баннерам. Тем более обязательны теги в том случае, если меню сайта целиком состоит из графических элементов.

Яндекс.Директ Все объявления. Программирование сайтов от 1000$ Команда профессиональных разработчиков. Опыт более 6 лет. Адрес и телефон artjoker.com.ua

5. Дизайн сайта – "встречают по одежке, провожают по уму".

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

Чтобы не оказаться в подобной ситуации, при работе над дизайном сайта, необходимо знать некоторые правила оформления:

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

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

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

6. Тестирование сайта на локальном сервере.

Это – не ошибка, более того, на заключительном этапе создания сайта тестирование на локальном сервере является обязательным. Это позволит увидеть, как будет выглядеть сайт в Интернете. Проведя тестирование, вы избежите многих ошибок, как крупных (см. пункт 1. "Некорректное использование JavaScript, апплетов, DHTML, сценариев CGI и SSI"), так и мелких ляпов, например, обнаружите, что забыли написать заголовок какой-либо страницы.

С тестированием веб-ресурса прекрасно справятся программы Macromedia Dreamweaver и так называемая "система Денвер". Dreamweaver можно скачать на сайте компании www.macromedia.com, а "Денвер"http://www.dklab.ru.

После установки обеих программ, скопируйте файлы сайта в папку программы "система Денвер". (по умолчанию это С:WebServershomeпапка сайтаwww.). Запустите программу. Откройте Dreamweaver и перейдите к менеджеру сайтов (Site - Manage Sites). Щелкните на кнопке New, во втором по счету диалоговом окне поставьте флажок напротив пункта "Yes, I want to use server technology". Нажмите Next и отметьте "Edit and test locally". Укажите адрес размещения сайта на компьютере, в данном случае, С:WebServershomeпапка сайтаwww., и URL-адрес сайта (http://locallhost/имя_папки_сайта). В последнем диалоговом окне установите переключатель No. Для просмотра веб-страниц на локальном сервере, в веб-браузере каждый раз придется набирать следующий адрес: http://имя_папки_сайта/имя_веб-страницы.

7. Отсутствие регулярного обновления и архива информации.

Что тут скажешь, если сайт регулярно не обновляется, очень скоро он потеряет постоянных посетителей. Если говорить о старых материалах (статьях, заметках, новостях), стоит отвести для них специальную страницу. Никогда не знаешь наверняка, что заинтересует пользователя, а вдруг ему понадобится какая-либо статья двухгодичной давности.

Заключение.

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

Теги: теория

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

Тег обозначается одним или несколькими английскими словами, которые объясняют его назначение. Записываются теги следующим образом:

<Тег>... текст </Тег> (упрощенный вариант), где <Тег> является "открывающим" тегом, а </Тег> - "закрывающим". Закрывающие и открывающие теги также называют контейнерами.

Или <Тег атрибут1="значение" атрибут2="значение".. атрибутN="значение">текст</Тег> (более сложный код с использованием атрибута – набор символов, соответствующий какому-либо английскому слову, дающему понять предназначение атрибута).

Яндекс.Директ Все объявленияПоисковая оптимизация Новый уровень Вашего Бизнеса! Будьте в ТОПе – оформите заявку. Адрес и телефон seo?studio.com.ua

Практическая часть.

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

1. Мета-теги

С помощью этого вида тегов в HTML-код вводится информация о содержании сайта, его владельце, авторе дизайна. Данные отображаются в разделе "description", являющегося объектом пристального внимания поисковых роботов. Да, не стоит удивляться, именно на данные мета-тегов в первую очередь ориентируются роботы и на основании полученной информации отображают сайт в результатах поиска. Поэтому так важно добавлять в исходный код не только описание ресурса, но и ключевые слова: <meta name="keywords" content="дизайн, веб-дизайн, программирование" />

Также возможны и более сложные манипуляции. Например, для обеспечения регулярного просмотра поисковыми роботами вашей веб-страницы необходимо ввести следующий текст: <meta name="document-state" content="dynamic" />

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

Тег Описание:

Owner владелец ресурса

Author автор и разработчик ресурса

Description краткое описание сайта

Copyright авторские права

Generator программное обеспечение, с помощью которого создавался сайт

Keywords ключевые слова

Чтобы ни говорили о таблицах: и пользоваться ими неудобно, и качественный сайт с их помощью не сделаешь и вообще, есть более современные технологии, а веб-мастера по-прежнему используют таблицы, и похоже в ближайшее время и не собираются отказываться от этого способа верстки веб-сайтов. Хотите узнать, какими преимуществами обладают таблицы и так ли уж существенны их недостатки? Тогда читайте дальше...

В языке HTML понятие "таблица" имеет два значения. Первое звучит так: таблица – это специальная форма, предназначенная для размещения информации. Второе значение представляет таблицу средством разметки веб-страниц. Нас интересует номер два.

Как и все элементы, таблицы помещается в веб-страницу посредством HTML-тегов и атрибутов. Причем важно знать, что теги создают каркас таблицы, а атрибуты указывают ее параметры (длину, ширину, толщину линий, цвет заливки). Мы не будем останавливаться на описании атрибутов, поскольку их значения вы найдете в любом учебнике, посвященном изучению языка HTML.

Начинающие веб-мастера предпочитают таблицы другим способам верстки главным образом из-за простых методов размещения элементов сайта на веб-странице. Ели использование слоев предполагает глубокие знания языков JavaScript или VBScript, то с , таблицами дело обстоит иначе: достаточно знать основы HTML и заранее составить примерную схему макета будущего сайта.

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

Выравнивание элементов относительно каркаса таблицы

Формирование "резинового" макета (ширина сайта автоматически изменяется в соответствии с разрешением экрана ПК пользователя и параметрами веб-браузера)

Уменьшение объема веб-страницы путем разрезания изображений на несколько частей. Затем кусочки изображения помещаются в таблицу, где происходит их "склеивание"

Создание сайта, обладающего свойствами и параметрами, понятными большинству веб-браузеров

Безусловно, в табличной верстке существуют недостатки (долгая загрузка сайта, слишком объемный код, плохая индексация). Но обойти их довольно легко, например размеры таблицы стоит указывать в процентах, а не в пикселях, использовать нулевую толщину бордюра и всевозможные распорки. А что касается индексации поисковых систем – придется уделить больше времени мета-тегам.

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

Навигация.

Для разработки комфортной и удобной системы навигации воспользуйтесь следующими советами:

Объединяйте ссылки похожей тематики в блоки

Баннеры и рекламные материалы размещайте в специально отведенном для этих целей месте на странице.

Если ссылок и страниц много, оптимальным вариантом будет создание, с помощью скриптов, выпадающего меню

Карта сайта.

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

Карта сайта помогает систематизировать разделы веб-ресурса, страницы и ссылки, содержащиеся в них. Как правило, карта сайта имеет древовидную структуру, напоминающую Проводник операционной системы Windows. То есть создается список разделов веб-ресурса, нажав на которые пользователь получает доступ ко всей информации, в данный момент, находящийся на сайте.

Затем на главную и промежуточные страницы ресурса помещается ссылка на карту сайта в виде текста или графического изображения.

Значение карты сайта трудно переоценить. Кроме комфортного пребывания пользователя на сайте, что немаловажно для роста популярности ресурса, карта сайта также помогает в продвижении ресурса в сети Интернет.

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

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

Оптимизировать карту сайта можно как вручную, так и с помощью специализированных сервисов. Например, Google Sitemap (http://www.sitemapspal.com).

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