Архив рубрики «Самоучитель по веб-дизайну. Книга 1»
Самоучитель по креативному веб-дизайну. Книга 1, стр.1
Эффективный самоучитель по креативному Web-дизайну.
XHTML, CSS, JavaScript, PHP, ASP, ActiveX.
Текст, графика, звук и анимация
Введение
В настоящее время, в соответствии с оценками аналитиков, в Internet исполь —
зуется более миллионов доменных имен (статистику по Internet можно найти по http://www. nua. com/surveys). При всеобщей быстрых подключений через цифровые абонентские линии и физические модемы и рогом Web-хостинге, предлагаемом компаниями, десятки миллионов создают свои персональные Web-сайты. К тому же когда число онлайновых оценивается более чем в миллионов чело — век это число растет со скоростью приблизительно 7% в Web — разработчикам приходится пути использования новых кото — рые могли бы оказать содействие в привлечении и удержании внимания
пользователей, путешествующих по безбрежным просторам Web.
Читая главы этой книги, вы узнаете о Web-технологиях и о том, как сразу же применить их на своих Web-страницах. В главе описывается, как можно быстро индескрипторрировать ту иную технологию, такую динамическое содержимое, безопасность, доступ к базам данных, а также обработку на стороне клиента и на стороне сервера. Сначала вы познакомитесь с принципами техно — логии и как лучше всего применить ее разработке собственных Web — страниц. Затем вы воспользоваться готовыми решениями, которые мож — но просто копировать и вставлять в код своих Web-страниц. И, наконец, вы
рассмотрите скрытые настройки и технологии, с которых появится возможность весь потенциал Web-сайта.
Если ваша цель — быстрого, современного, запоминающегося Web — сайта, то книга поможет вам достичь ее.
Для кого предназначена эта книга
Миллионы пользователей и профессиональных Web-разработчиков во ной Паутине каждый день имеют дело с Чтобы упростить свою многие Web-разработчики полагаются на многочисленных про — граммных средств Web-разработки. К для того, чтобы использовать новые Web-технологии в полном объеме и поддерживать на уровне про — изводительность Web-сайта, на этапе разработчикам приходится закатывать рукава и углубляться в атрибуты, правила кас — таблиц стилей, язык активные серверные страницы, РНР и многое другое.
Самоучитель по креативному веб-дизайну. Книга 1, стр.2
Несмотря на огромное количество сайтов в очень сложно будет найти Web-разработчика, которому не бы, чтобы его был быстрее, безо — паснее и проще в Кроме того, пользователи, посещают сайты, желают не только развлечений и актуального содержимого, но хо — тят, чтобы содержимое быстро загружалось. пользователей предполагают, что преподносящие себя как безопасные, в действительно —
сти таковыми являются. Вне зависимости от содержимого, которое вы размести —
те на пользователи ожидают качества, скорости и безопасности.
Введение
В книге рассматриваются сотни способов, с помощью которых Web-раз —
работчики повысить производительность своих сайтов, их безопасность и качество содержимого, а также упростить их Для того чтобы полнять действия, описываемые в этой книге, вам не быть опытным про — или сетевым администратором. практикум содержит про — стые в выполнении пошаговые инструкции, а также решения, которые вы можете копировать и вставлять в свои Web-страницы. В главах этой книги вы найдете:
• языка HTML, которые необходимо знать, чтобы свой первый Web-сайт, и которые вам необходимо предпринять, чтобы разместить этот сайт в Web.
• Как с HTML-таблиц организовывать информацию, представлен — ную на Web-странице, и упорядочивать текст и графику.
• использовать каскадные таблицы (Cascading Style Sheets), чтобы
в мере управлять форматированием текста внутри Web-страницы и упростить ее обновления в будущем.
• Основные отличия XHTML от новые возможности XHTML, рые можно использовать в коде своих Web-страниц, а также способы «пере —
вода» своих HTML-страниц на XHTML.
• которые позволят вам эффективнее использовать графику в своих Web-страницах и в то же снизить длительность ожидания загрузки изображений.
• создавать динамическое содержимое Web-страницы с помощью РНР и серверных страниц (Active Server Pages).
• операции, путем выполнения которых вы сможете с помо —
щью параметров HTTP и автоматизировать решения, используя браузера пользователя, скорость подключения и не только.
• защиты своего компьютера от хакеров и идентифика — ции потенциальных слабых мест в компьютера, которыми могут воспользоваться злоумышленники.
• индескрипторрации решений электронной коммерции и ботки кредитных карточек в собственном Web-сайте.
• Многое другое.
необходимо, чтобы пользоваться описываемыми приемами
В книге описывается множество способов, с помощью которых вы може —
те производительность своего Web-сайта, сделать его безопаснее и про — ще в обслуживании, а его содержимое — качественнее. В каждой главе вы найде —
те которые сможете сразу же предпринять на своем Web-сайте.
Чтобы использовать нами приемы, вам не потребуется какое-то
сверхмощное программное или другие средства графики художественного качества. просто нужно будет потратить пять-десять минут
14 Введение
на пошаговых инструкций практикума. Практикумы помогут вам
выгрузить из (причем совершенно бесплатно) инструменты, которые вам
понадобятся. .
Для профессиональных Web-разработчиков и программистов в книге рас — смотрены использования сценариев для доступа ко многим низкоуровне —
вым операциям. язык программирования, рассмотренный в этой книге, встроен в серверы или может без особых сложностей выгружен из
Web. Если вам не приходилось программировать на этих языках, не беспокой — тесь: во вводной части каждой из изложены азы, необходимые исполь — зования языка.
охватывает эта книга
Эта книга включает в себя двенадцать глав. В главе описывается от — Web-технология, язык программирования или дизайнерский прием. В каждой главе вы всестороннее рассмотрение технологии языка; да — лее практикумы, выполнив которые, вы сможете быстро усовершенство —
Самоучитель по креативному веб-дизайну. Книга 1, стр.3
вать Web-страницы, равно как и улучшить дизайн и производи — тельность Web-сайта в целом.
Глава 1. языка HTML. Для эта глава закладывает фундамент,
необходимый дизайнерам-новичкам в для использования при — которым они будут учиться на всех остальных глав Ди — зайнеры узнают, создавать HTML-страницы, как отображать страницы из файлов, находящихся на их собственных компьютерах и как с Web-сер — вера сделать страницы доступными для посетителей в Web.
Глава 2. Внутри Web-страниц HTML-таблицы для ди — зайнеров средством организации больших объемов данных с целью их представления на Многие Web-дизайнеры также таблицы, чтобы лучше управлять выравниванием текста и графики на Дизайнер может, например, таблицы для обтекания текстом. Кроме того, на может присутствовать таблица пиктограмм, из торой пользователи смогут картинки, соответствующие которым боль —
шие изображения им хотелось бы выгрузить.
Глава 3. Миллионы Web-сайтов взаимодействуют с посетителя — ми с форм. Формы могут запрашивать у разнообразнейшую информацию, например, доставки, личные данные или номера кредитных
карт совершения покупок. Кроме формы дают пользователям ность поиска конкретных услуг или содержимого на сайте, а, возможно,
и где угодно в Формы разработчики создают с HTML-дескрипто — ров. После отправки пользователем введенной им информации, Web-сервер вы —
полняет программу (разработчики называют ее сценарием (script)),
которая обрабатывает и, правило, сохраняет данные. Из этой4 главы вы те, как создавать формы с HTML, как проверять пользова — телем информацию с помощью JavaScript и затем обрабатывать данные, от — правленные пользователем.
Самоучитель по креативному веб-дизайну. Книга 1, стр.4
Введение 15
Глава 4. списки стилей. Внутри разработчики исполь — зуют HTML-дескрипторов для форматирования текста, графики и
Используя одни лишь такие как выделения полужирным, для выделения курсивом и Web-разработчик может фор — матировать текст Web-страницы в соответствии со своими пожеланиями. К лению, если форматирование нужно будет изменить, придется изменять значительное дескрипторов. Каскадные списки (Cascading Style Sheets) облегчают обслуживание Web-сайтов. С каскадных списков стилей могут присваивать шрифт, цвет, вы —
равнивание и другие атрибуты тексту, отображаемому на Если впоследствии разработчику изменить внешний вид страницы, он просто изменить определение стиля, и немедленно отра — зятся в тексте, к применен данный стиль. того, Web-дизайне — рам, стремящимся к высококлассных сайтов, каскадные стилей дадут возможность реализовать точное позиционирование и наложение тек — ста и для создания многочисленных эффектов.
Глава 5. XHTML и тенденции. Чтобы быть уверенными в что ваши Web-страницы будут работать и именно так, как вы того хотите, в Web-браузерах следующего поколения, вы следовать рекомендациям кон —
W3C (World Wide Consortium). При тщательном соблюдении,
«правила» стандарта XHTML не вам создать страницы с синтаксисом, недостающими или «фирменными» дескрипторами и тельными атрибутами. Избегая такого «плохого кода», вы своим Web — страницам корректное представление и работоспособность во стандартных Web-браузерах. Более обеспечив корректность описания (то есть соответствие ее стандарту XHTML), вы производителям Web-браузе — ров обойтись без кода, чтобы «угадывать» замыслы, стоящие за сформированным HTML-кодом. Браузеры, ные для мобильных (сотовых телефонов, карманных бор — товых компьютеров для автомобилей и должны быть небольшими, посколь —
Самоучитель по креативному веб-дизайну. Книга 1, стр.5
ку памяти подобных устройств весьма ограничена. В главе показано, как приложение HTML Tidy, проверяет HTML-код вашей исправляет ошибки, если таковые имеются, и преобразо —
вывает HTML-код в XHTML-код. Далее в главе вы практикумы, которые покажут, расширить возможности языка путем добавления новых дескрипторов и атрибутов, а практикумы, которые научат определять тип браузера чтобы ваши страницы отображались быстро и пра — вильно в браузерах мобильных устройств.
Глава 6. Графика. На широко используется графика. К сожале —
нию, многие сайты, великолепные иллюстрации, теряют ливых посетителей, которые не желают сидеть и ждать в длительного времени, необходимого для загрузки изображений. В этой главе вы узнаете о таких как кэширование и загрузка, которые сможете использовать в своем коде, а также настройках, с помощью которых появляется
Самоучитель по креативному веб-дизайну. Книга 1, стр.6
16 Введение
существенно сократить время изображений. Кроме того, вы узнаете о различных форматах файлов, а также в случаях следует ис — тот или иной формат. Кроме того, в рассматриваются цветовые палитры и которые помогут вам свое содержимое «Web-друже — ственным». Наконец, профессионалы в графике узнают о которые уп — рощают перенос изображений в Web.
Глава 7. Анимация, звук и При доступности высокоскоростных чений через модемы физических линий либо цифровые абонентские линии,
на Web-сайтах для привлечения внимания пользователей используется
анимация, фоновая музыка и видео. В этой главе вы узнаете, как встраивать в страницы разнообразную анимацию — от простой анимированной графики
до Flash-анимаций. Кроме того, вы как проигрывать фоновую музыку во просмотра ваших страниц посетителями, и как предо — ставлять по потоковое видеосодержимое. Наконец, вы узнаете, как
вести радиовещание так же, как это делают Web-радиостанции) со своего
Web-сайта.
Глава 8. JavaScript. JavaScript — это язык программирования, с кото — рого Web-дизайнеры автоматизировать задачи внутри Web-страницы. Web —
разработчики помещают операторы JavaScript в определяю — щие страницу. JavaScript могут, например, проверять информацию,
введенную пользователем в (Программа или сценарий обеспечивать проверку наличия в поле значения, равно как и корректность и содержа —
тельность значений.) Или же JavaScript могут обеспечивать определен — ную обработку в выполнения пользователем операций на странице. На — пример, с JavaScript можно выводить на окно сообщения, содержащее помощи, когда посетитель щелкает на «Справка». Подобно тому, браузер отображает содержимое HTML-страницы, он выпол — няет и операторы JavaScript. В этой главе вы узнаете, как создавать стые JavaScript-приложения. Затем вы ряд решений, написанных на которые сможете скопировать и вставить в свои Web-страницы.
Самоучитель по креативному веб-дизайну. Книга 1, стр.7
Глава 9. Java-аплеты и ActiveX-объекты. На нескольких лет про — использовали язык программирования для создания аплетов, торые могут выполняться на платформах; это значит, что один и тот же Java-аплет может работать на под управлением операцион — систем Windows, Linux и Java-аплеты дают программистам можность автоматизировать решение или иных задач риска инфицирова — ния компьютеров пользователей, загружающих аплеты. В Web можно
найти бесчисленное «типовых» Java-аплетов, которые можно исполь — зовать в коде своих страниц. Из этой главы вы как встраивать Java-апле — ты в HTML-содержимое. Далее в рассматривается обеспечение поддержки для сайтов, функционирующих на Windows-платформах. В от —
личие от Java-аплетов, которые не угроз безопасности для загружающих ИХ пользователей, ActiveX-объекты не накладывают ограничений на Которые может выполнять код. Следовательно, вы должны отдавать предпочте —
Введение 17
тем ActiveX-объектам, которые получены с сайтов разработчиков с хорошей репутацией и содержат сертификаты подлинности. В главе 9 описаны предосторожности, которые следует соблюдать.
Глава 10. РНР4. РНР — это язык программирования, с которого разработчики создают (изменяющееся) содержимое Web-страниц. Используя РНР, например, вы персонализировать содержимое своей Web — страницы, основываясь на информации, введенной пользователем в форму, или, возможно, на информации, полученной из ранее сохраненного вашим сайтом на диске пользователя. Более 1 000 000 сайтов в используют РНР для целей динамизма. Прежде чем вы пользоваться РНР, вам необходимо установить на своем компьютере PHP-процессор. В главе описываются этапы процедуры установки. Затем вы создавать простые приложения на РНР Как уже упоминалось, РНР — это язык программирования, и часть главы закладывает необходимый для создания, тестирования и отладки PHP-программ. Далее в бу — дет представлено несколько основанных на РНР решений, которыми вы сразу же сможете воспользоваться в коде своих Web-страниц.
Самоучитель по креативному веб-дизайну. Книга 1, стр.8
Глава Активные серверные страницы. РНР, активные серверные
(Active Server Pages — дают 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-страниц
Описание содержимого при помощи заголовка Идентификация документов с определения типа документа (Document Type Definition)
Вставка комментариев в Web-документы
Определение гарнитуры шрифта для текста Web-страницы
Управление структурой текста с помощью дескрипторов абзаца
и перевода строки
Изменение размера текста с дескрипторов уровней заголовков
и size дескриптора шрифта
Изменение цвета текста в HTML-документе
Добавление графики на Web-страницу с помощью базового дескриптора
Изменение выравнивания текста и графики
Добавление гипертекстовых ссылок
Выделение отдельных букв и слов с дескрипторов форматирования символов
Использование специальных символов в HTML-документах
Использование горизонтальных линий для структурирования
Web-содержимого
Использование блоков цитирования для управления левым и правым отступами текста
Создание упорядоченных и неупорядоченных списков
Создание вложенных списков
Создание списков определений
дескрипторов предварительно форматированного для управления отображением Web-содержимого
Отображение навигационного меню во фрейме Web-страницы
Одновременный вывод на экран нескольких Web-страниц
20 Глава 1. Основы языка HTML
*
V h разметки гипертекста (Hypertext 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 и Navigator, могут отображать практически все из что можно поместить на Web-страницу с помощью HTML-дескрип — торов.
Чтобы посетители могли обратиться к Web-страницам вашего Web-сайта, им сперва получить доступ в Internet и Web-браузер. После того, Web-сервер отправит Web-страницу посетителя, Web-браузер ин — терпретирует HTML-код из файла Web-страницы и отображает содержимое фай —
ла в форме текста и графических изображений в окне браузера.
Web-серверы и используют для обмена протокол пере — дачи (HyperText Transport Protocol — Помимо всего прочего, определяет как способ отправки сообщений Web-браузерами и серверами, так и самих сообщений; Подробное рассмотрение типов и структур HTTP-сообщений выходит за этой книги. Однако для дизайна и даже самых сложных вам понадобится только принципи —
Loading ...
|