Архив рубрики «Самоучитель по веб-дизайну. Книга 1»

Самоучитель по креативному веб-дизайну. Книга 1, стр.1

Эффективный самоучитель по креативному Web-дизайну.



HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX.

Текст, графика, звук и анимация





Введение



В настоящее время, в соответствии с оценками аналитиков, в Internet исполь —

зуется более 100 миллионов доменных имен (статистику по Internet можно найти по адресу http://www. nua. com/surveys). При всеобщей доступности быстрых подключений через цифровые абонентские линии и физические модемы и недо- рогом Web-хостинге, предлагаемом многими компаниями, десятки миллионов пользователей создают свои персональные Web-сайты. К тому же сейчас, когда число онлайновых пользователей оценивается более чем в 500 миллионов чело — век (причем это число растет со скоростью приблизительно 7% в месяц), Web — разработчикам приходится искать пути использования новых технологий, кото — рые могли бы оказать содействие в привлечении и удержании внимания

пользователей, путешествующих по безбрежным просторам Web.

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

рассмотрите скрытые настройки и технологии, с помощью которых появится возможность раскрыть весь потенциал Web-сайта.

Если ваша цель — создание быстрого, современного, запоминающегося Web — сайта, то эта книга поможет вам достичь ее.

Для кого предназначена эта книга

Миллионы пользователей и профессиональных Web-разработчиков во Всемир- ной Паутине каждый день имеют дело с Web-страницами. Чтобы упростить свою работу, многие Web-разработчики полагаются на помощь многочисленных про — граммных средств Web-разработки. К сожалению, для того, чтобы использовать новые Web-технологии в полном объеме и поддерживать на должном уровне про — изводительность Web-сайта, на определенном этапе разработчикам приходится закатывать рукава и углубляться в HTML-дескрипторы, атрибуты, правила кас — кадных таблиц стилей, язык JavaScript, активные серверные страницы, РНР и многое другое.

Самоучитель по креативному веб-дизайну. Книга 1, стр.2

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

сти таковыми являются. Вне зависимости от содержимого, которое вы размести —

те на Web-сайте, пользователи ожидают качества, скорости и безопасности.

Введение





В этой книге рассматриваются сотни способов, с помощью которых Web-раз —

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

Основы языка HTML, которые вам необходимо знать, чтобы создать свой первый Web-сайт, и действия, которые вам необходимо будет предпринять, чтобы разместить этот сайт в Web.

• Как с помощью HTML-таблиц организовывать информацию, представлен — ную на Web-странице, и упорядочивать текст и графику.

Как использовать каскадные таблицы стилей (Cascading Style Sheets), чтобы

в полной мере управлять форматированием текста внутри Web-страницы и упростить ее обновления в будущем.

• Основные отличия XHTML от HTML, новые возможности XHTML, кото- рые можно использовать в коде своих Web-страниц, а также способы «пере —

вода» своих HTML-страниц на XHTML.

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

Как создавать динамическое содержимое Web-страницы с помощью РНР и активных серверных страниц (Active Server Pages).

«Закулисные» операции, путем выполнения которых вы сможете с помо —

щью параметров HTTP и CGI автоматизировать решения, используя тип браузера пользователя, скорость подключения и не только.

Методика защиты своего компьютера от хакеров и способы идентифика — ции потенциальных слабых мест в защите компьютера, которыми могут воспользоваться злоумышленники.

Технологии индескрипторрации решений электронной коммерции и обра- ботки кредитных карточек в собственном Web-сайте.

• Многое другое.



Что необходимо, чтобы пользоваться описываемыми приемами

В этой книге описывается множество способов, с помощью которых вы може —

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

те действия, которые сможете сразу же предпринять на своем Web-сайте.

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

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

14 Введение





на выполнение пошаговых инструкций практикума. Практикумы помогут вам

выгрузить из Web (причем совершенно бесплатно) все инструменты, которые вам

понадобятся. .

Для профессиональных Web-разработчиков и программистов в этой книге рас — смотрены методы использования сценариев для доступа ко многим низкоуровне —

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

Web. Если вам не приходилось программировать на этих языках, не беспокой — тесь: во вводной части каждой из глав изложены азы, необходимые для исполь — зования языка.



Что охватывает эта книга

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.3

вать свои Web-страницы, равно как и улучшить дизайн и повысить производи — тельность Web-сайта в целом.

Глава 1. Основы языка HTML. Для начала, эта глава закладывает фундамент,

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

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

шие изображения им хотелось бы выгрузить.

Глава 3. HTML-формы. Миллионы Web-сайтов взаимодействуют с посетителя — ми с помощью форм. Формы могут запрашивать у посетителя разнообразнейшую информацию, например, адрес доставки, личные данные или номера кредитных

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

и где угодно в Web. Формы разработчики создают с помощью HTML-дескрипто — ров. После отправки пользователем введенной им информации, Web-сервер вы —

полняет специальную программу (разработчики называют ее сценарием (script)),

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.4

Введение 15



Глава 4. Каскадные списки стилей. Внутри Web-страниц разработчики исполь — зуют множество HTML-дескрипторов для форматирования текста, графики и

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

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

Глава 5. XHTML и новые тенденции. Чтобы быть уверенными в том, что ваши Web-страницы будут работать и выглядеть именно так, как вы того хотите, в Web-браузерах следующего поколения, вы должны следовать рекомендациям кон —

сорциума W3C (World Wide Web Consortium). При тщательном соблюдении,

«правила» стандарта XHTML не позволят вам создать страницы с неправильным синтаксисом, недостающими или «фирменными» дескрипторами и недействи- тельными атрибутами. Избегая такого «плохого кода», вы обеспечите своим Web — страницам корректное представление и работоспособность во всех стандартных Web-браузерах. Более того, обеспечив корректность описания Web-страницы (то есть соответствие ее стандарту XHTML), вы дадите производителям Web-браузе — ров возможность обойтись без кода, разработанного, чтобы «угадывать» замыслы, стоящие за неправильно сформированным HTML-кодом. Браузеры, разработан- ные для мобильных устройств (сотовых телефонов, карманных органайзеров, бор — товых компьютеров для автомобилей и т. д.) должны быть небольшими, посколь —

Самоучитель по креативному веб-дизайну. Книга 1, стр.5

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

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

Глава 6. Графика. На Web-страницах широко используется графика. К сожале —

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.6

16 Введение





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

Глава 7. Анимация, звук и видео. При доступности высокоскоростных подклю- чений через модемы для физических линий либо цифровые абонентские линии,

на многих Web-сайтах для привлечения внимания пользователей используется

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

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

вести радиовещание (точно так же, как это делают Web-радиостанции) со своего

Web-сайта.

Глава 8. JavaScript. JavaScript — это язык программирования, с помощью кото — рого Web-дизайнеры могут автоматизировать задачи внутри Web-страницы. Web —

разработчики помещают операторы JavaScript в HTML-дескрипторы, определяю — щие страницу. Операторы JavaScript могут, например, проверять информацию,

введенную пользователем в форму. (Программа или сценарий могут обеспечивать проверку наличия в каждом поле значения, равно как и корректность и содержа —

тельность значений.) Или же операторы JavaScript могут обеспечивать определен — ную обработку в процессе выполнения пользователем операций на странице. На — пример, с помощью JavaScript можно выводить на экран окно сообщения, содержащее текст помощи, когда посетитель щелкает на гиперссылке «Справка». Подобно тому, как браузер отображает содержимое HTML-страницы, он выпол — няет и операторы JavaScript. В этой главе вы сначала узнаете, как создавать про- стые JavaScript-приложения. Затем вы рассмотрите ряд решений, написанных на JavaScript, которые сможете скопировать и вставить в свои Web-страницы.

Самоучитель по креативному веб-дизайну. Книга 1, стр.7

Глава 9. Java-аплеты и ActiveX-объекты. На протяжении нескольких лет про — граммисты использовали язык программирования Java для создания аплетов, ко- торые могут выполняться на разнообразных платформах; это значит, что один и тот же Java-аплет может работать на компьютерах под управлением операцион — ных систем Windows, Linux и Macintosh. Java-аплеты дают программистам воз- можность автоматизировать решение тех или иных задач без риска инфицирова — ния вирусами компьютеров пользователей, загружающих аплеты. В Web можно

найти бесчисленное количество «типовых» Java-аплетов, которые можно исполь — зовать в коде своих страниц. Из этой главы вы узнаете, как встраивать Java-апле — ты в HTML-содержимое. Далее в главе рассматривается обеспечение поддержки ActiveX-объектов для сайтов, функционирующих на Windows-платформах. В от —

личие от Java-аплетов, которые не создают угроз безопасности для загружающих ИХ пользователей, ActiveX-объекты не накладывают ограничений на операции, Которые может выполнять код. Следовательно, вы должны отдавать предпочте —

Введение 17





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

Глава 10. РНР4. РНР — это язык программирования, с помощью которого разработчики создают динамическое (изменяющееся) содержимое Web-страниц. Используя РНР, например, вы можете персонализировать содержимое своей Web — страницы, основываясь на информации, введенной пользователем в форму, или, возможно, на информации, полученной из cookie-набора, ранее сохраненного вашим сайтом на диске пользователя. Более 1 000 000 сайтов в Web используют РНР для достижения целей динамизма. Прежде чем вы сможете пользоваться РНР, вам необходимо установить на своем компьютере PHP-процессор. В этой главе описываются этапы процедуры установки. Затем вы научитесь создавать простые приложения на основе РНР Как уже упоминалось, РНР — это язык программирования, и вводная часть главы закладывает фундамент, необходимый для создания, тестирования и отладки PHP-программ. Далее в практикумах бу — дет представлено несколько основанных на РНР решений, которыми вы сразу же сможете воспользоваться в коде своих Web-страниц.

Самоучитель по креативному веб-дизайну. Книга 1, стр.8

Глава 11. Активные серверные страницы. Подобно РНР, активные серверные

страницы (Active Server Pages — ASP) дают Web-разработчикам возможность со —

здавать содержимое «на лету». Для создания активной серверной страницы (ди — намической Web-страницы) вы можете использовать множество языков програм — мирования, в том числе VBScript, JScript (версия JavaScript компании Microsoft), PerlScript, Python, Rexx и многие другие. Эта глава закладывает фундамент, осно — вываясь на котором, вы сможете разрабатывать свои собственные решения, бази —

рующиеся на активных серверных страницах. Кроме того, в этой главе содержат —

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

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.9

кулисами» с использованием шифрования), и рассказывает, как выполнять тран —

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

1 8 . Введение



Как читать эту книгу



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

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





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

Коды примеров

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

сайте издательства ПО адресу http://www. diasoft. kiev. ua.



нагрузка и установка персонального web-сервера

Управление персональным Web-сервером и публикация Web-страниц

Описание содержимого Web-страницы при помощи заголовка Идентификация документов с помощью определения типа документа (Document Type Definition)

Вставка комментариев в Web-документы

Определение гарнитуры шрифта для текста Web-страницы

Управление структурой текста с помощью дескрипторов абзаца

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

Изменение размера текста с помощью дескрипторов уровней заголовков

и атрибута size дескриптора шрифта

Изменение цвета текста в HTML-документе

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



Изменение выравнивания текста и графики

Добавление гипертекстовых ссылок

Выделение отдельных букв и слов с помощью дескрипторов форматирования символов

Использование специальных символов в HTML-документах

Использование горизонтальных линий для структурирования

Web-содержимого

Использование дескрипторов блоков цитирования для управления левым и правым отступами текста

Создание упорядоченных и неупорядоченных списков

Создание вложенных списков

Создание списков определений

Использование дескрипторов предварительно форматированного текста для управления отображением Web-содержимого

Отображение навигационного меню во фрейме Web-страницы

Одновременный вывод на экран нескольких Web-страниц

20 Глава 1. Основы языка HTML

*

V h зык разметки гипертекста (Hypertext Markup Language), или, как его чаще

ж Л называют, HTML, — это компьютерный язык, лежащий в основе World Wide Web (Всемирной Паутины). Создавая Web-сайт, вы используете HTML для разме — щения текста, рисунков, анимации и, возможно, видео — и аудиоклипов на отдель — ных Web-страницах, из которых, собственно, и состоит сайт. Помимо этого, язык HTML позволяет помещать на страницы гипертекстовые ссылки и интерактивные кнопки, которые соединяют ваши Web-страницы с другими страницами того же Web-сайта, равно как и с другими Web-сайтами по всему миру. Web-дизайн — это исключительно творческий процесс, a HTML — всего лишь один из инструментов (точнее, язык описания страниц), используемый при создании Web-страниц.

Самоучитель по креативному веб-дизайну. Книга 1, стр.10

HTML — это язык разметки текста, а не язык программирования. Теоретичес — ки Web-страницу, созданную с использованием HTML, может просмотреть лю —

бой, у кого есть компьютер, какой-нибудь Web-браузер и доступ к Internet. На самом же деле, способность пользователя видеть все содержимое Web-страницы зависит от возможностей его Web-браузера. Web-браузеры (Web browsers) — это программы, которые интерпретируют HTML-код Web-страниц и отображают текст, рисунки и анимацию на экране компьютера посетителя сайта. Самостоя — тельно либо же с помощью других установленных программ, браузеры также вос — производят звуковые или видео-файлы, вставленные в страницу с помощью HTML-кода. Последние версии двух наиболее популярных Web-браузеров, Microsoft Internet Explorer и Netscape Navigator, могут отображать практически все из того, что можно поместить на Web-страницу с помощью HTML-дескрип — торов.

Чтобы посетители могли обратиться к Web-страницам вашего Web-сайта, им нужно сперва получить доступ в Internet и запустить Web-браузер. После того, как Web-сервер отправит Web-страницу компьютеру посетителя, Web-браузер ин — терпретирует HTML-код из файла Web-страницы и отображает содержимое фай —

ла в форме текста и графических изображений в окне браузера.

Web-серверы и Web-браузеры используют для обмена данными протокол пере — дачи гипертекста (HyperText Transport Protocol — HTTP). Помимо всего прочего, HTTP-протокол определяет как способ отправки сообщений Web-браузерами и серверами, так и структуру самих сообщений; Подробное рассмотрение типов и структур HTTP-сообщений выходит за рамки этой книги. Однако для дизайна и создания даже самых сложных Web-сайтов вам понадобится только принципи —



Полезные ссылки
Случайные записи
  • 02.03.2011">Руководство по actionscript. часть 5, стр. 087
  • 12.01.2010">Удобная твиттер лента в блоге на jQuery
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.93
  • 21.03.2011">Руководство по actionscript. часть 2, стр. 046
  • 22.01.2011">Руководство по actionscript. часть 1, стр. 127
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.54
  • 24.02.2011">Руководство по actionscript. часть 7, стр. 013
  • 17.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.126
  • 13.03.2011">Руководство по actionscript. часть 3, стр. 113
  • 11.03.2011">Руководство по actionscript. часть 4, стр. 016
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.120
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.63
  • 07.03.2011">Руководство по actionscript. часть 4, стр. 111
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 087
  • 25.05.2012">Facebook тестирует обновленный интерфейс Timeline
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...