Мэтью макдональд веб разработка исчерпывающее руководство скачать pdf

Книга «Веб-разработка. Исчерпывающее руководство»

По сути эта книга персональный тренер по созданию сайтов. Вы начнете с того, что узнаете, как создавать традиционные веб-страницы, используя стандарты, на которых основана каждая страница во Всемирной паутине (это HTML и CSS). Затем вы познакомитесь с сервисами от таких компаний, как Google, и они научат вас подсчитывать количество посетителей, помогут популяризировать сайт и даже получить немного денег. Вы вкратце познакомитесь с языком программирования JavaScript, который используется почти на каждой интерактивной странице во Всемирной паутине.
Говоря коротко, эта книга будет прекрасным руководством для людей, желающих самостоятельно создать с нуля сайт, который будет обладать всеми фишками, присущими современным сайтам. Это издание также станет отправной точкой для тех, кто хочет углубиться в область веб-дизайна. Если вы относитесь к какой-либо из вышеперечисленных категорий, добро пожаловать на борт!

Структура книги

Книга разделена на пять частей, каждая из которых в свою очередь состоит из нескольких глав.

Часть I. Создание простых веб-страниц. В этой части вы получите основную информацию о HTML, языке создания сайтов (главы 1 и 2); затем познакомитесь с языком CSS, который позволяет добавлять цвета, шрифты и границы (глава 3), а также изображения на страницы (глава 4); и наконец, вы поймете, насколько можно упростить себе жизнь, используя HTML-редакторы (глава 5).

Часть II. От веб-страниц к сайтам. В этой части объясняется, как объединить веб-страницы в сайт. Вы узнаете, как связать страницы вместе (глава 6), создадите стиль всего сайта за несколько шагов (глава 7) и познакомитесь с приемами верстки стильных макетов (глава 8). Наконец, вы научитесь размещать свои страницы во Всемирной паутине, воспользовавшись услугами хостинговой компании (глава 9).

Часть III. Связь с аудиторией. Из данной части вы узнаете, как сделать так, чтобы ваш сайт стал доступным для таких поисковых систем, как Google (глава 10), и научитесь привлекать посетителей (глава 11). Кроме того, вы узнаете, что такое блоги, и познакомитесь с бесплатными программами для их создания (глава 12). И наконец, вы узнаете, как заработать деньги на своем сайте, отображая рекламу или продавая какие-либо товары (глава 13).

Часть IV. Интерактивный и мультимедийный контент. Теперь, когда вы узнали, как создать профессиональный работающий сайт, почему бы не добавить в него оригинальные элементы, например яркие кнопки и всплывающие меню? Вам не придется осваивать сложные приемы программирования на языке JavaScript, но вы узнаете, как найти и использовать бесплатные сценарии на своем сайте (главы 14 и 15). Вы также сможете немного развлечься, добавив на сайт видеоклипы и МР3-проигрыватель (глава 16).

Часть V. Приложения. В конце книги находятся два приложения. В первом приводятся полезные веб-ссылки для амбициозных веб-дизайнеров, которые хотят улучшить свои навыки. Во втором приложении представлен краткий справочник по языку HTML. В нем объясняются основные элементы HTML и даются ссылки на более подробное описание в различных главах этой книги.

Отрывок
Сокращение кода с помощью элемента div

Благодаря наследованию стилей (см. подраздел «Механизм наследования» раздела «Наложение стилей» главы 3) элементы внутри контейнера div наследуют от родительского элемента div многие свойства, например размер шрифта и ширину полей. Если настроить свойство font-size в элементе div, который содержит абзацы текста публикаций, все они будут отформатированы.

После добавления рамок к публикациям вы можете использовать наследование в собственных целях. Например, вместо того, чтобы назначать размер шрифта 16 пикселов классам p.review и p.reviewEnd, можете установить размер шрифта сразу для класса div.review, который, в свою очередь, заместит соответствующее свойство класса p.byline.

Вы можете сократить разметку еще больше, добавив класс div.intro и объединив два вводных абзаца в начале страницы. Таким образом можно установить цвет текста

/* Вводный раздел. */
div.intro {
color: #9C9C9C;
margin-bottom: 40px;
}

Теперь вам вообще не нужен класс p.intro. Вы можете удалить его из таблицы стилей и удалить атрибут класса из двух вводных абзацев.

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

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

Сокращение кода с помощью контекстных селекторов

Добавив класс к каждому элементу, можно форматировать объекты очень быстро. Однако в приведенном ранее примере к каждому абзацу после имени автора необходимо добавить атрибут class=«review». К счастью, элемент div и новый тип селектора, который называется контекстным селектором, позволяют значительно сэкономить время.

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

b {
color: red;
}

Этот селектор форматирует весь полужирный текст красным цветом. Но что, если вы хотите работать только с полужирным текстом, который появляется внутри маркированного списка? Можете сделать это, используя следующий селектор контекстного типа, который находит элементы маркированного списка (ul), а затем охотится за полужирными элементами внутри них. В приведенном далее примере полужирный текст окрашивается в красный цвет:

ul b {
color: red;
}

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

h2.review {

и измените селектор на следующий:

div.review h2 {

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

Вы можете удалить атрибут class из элемента h2, оставив следующую простую разметку:

<div class="review">
<h2>...</h2>

Это действие можно повторить, чтобы отформатировать элементы img или a в публикациях, не прибегая к помощи имен классов. Вы даже можете отформатировать обычные абзацы внутри элементов div, но в этом случае необходимо быть осторожными. Это обусловлено тем, что CSS считает контекстные селекторы более специфичными, чем селекторы типа или классы.

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

div.review p {

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

<div class="review">
<h2>...</h2>
<p class="byline">...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p class="reviewEnd">...</p>
</div>

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

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

div.review p.byline {

Это исправит проблему. Прежде всего это решение позволяет упростить разметку. Теперь вам необходимо применить классы к каждой публикации всего в трех местах: в контейнере div самого текста публикации, в имени автора и в ссылке в конце. Больше нет необходимости добавлять класс к обычным абзацам или заголовкам.

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

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

/* Удаляем отступы и настраиваем шрифт всей страницы */
body { ... }
/* Выравниваем строки всего абзаца */
p { ... }
/* Делаем все изображения обтекаемыми и форматируем их */
img { ... }
/* Затемняем заголовок сайта */
h1 { ... }
/* Содержимое страницы без учета заголовка */
div.main { ... }
/* Область введения */
div.intro { ... }
/* Область полной публикации */
div.review { ... }
/* Заголовок публикации */
.review h2 { ... }
/* Фрагмент публикации */
.review p { ... }
/* Имя автора */
.review .byline { ... }
/* Ссылка в конце фрагмента публикации */
.review .reviewEnd { ... }

Об авторе

Мэтью Макдональд (Matthew MacDonald) — научный и технический автор нескольких десятков книг. С помощью таких книг, как WordPress: The Missing Manual и HTML5: The Missing Manual1, он познакомил множество читателей с технологиями Всемирной паутины. Кроме того, в изданиях Your Brain: The Missing Manual и Your Body: The Missing Manual он продемонстрировал людям всю силу и возможности их мозга и тела.

О творческой команде

Питер Макки (Peter McKie) (редактор). Имел удовольствие работать над предыдущими версиями этой книги. Живет в Нью-Йорке, где изучает историю заброшенных строений и иногда наводит в них порядок. Адрес электронной почты: pmckie@gmail.com.

Кара Эбрахим (Kara Ebrahim) (редактор по производству). Живет и работает в Кембридже. Обожает заниматься графическим дизайном и проводить время на свежем воздухе. Адрес электронной почты: kebrahim@oreilly.com.

Шелли Пауэрс (Shelley Powers) (технический рецензент). Разработчик сайтов и автор технических книг, живет в Сент-Луисе, штат Миссури. В круг ее интересов входят языки программирования HTML5, JavaScript, а также другие веб-технологии.

Джули ван Кеурен (Julie Van Keuren) (корректор). Уволилась из редакции одной газеты в 2006 году, чтобы переехать в Монтану и воплотить в жизнь свою мечту — стать фрилансером. Она и ее муж (который пишет романы) растят двух сыновей — Декстера и Майкла. Адрес электронной почты: little_media@yahoo.com.

Рон Штраусс (Ron Strauss) (составитель оригинального предметного указателя). Специализируется на составлении предметных указателей в литературе, посвященной информационным технологиям. В свободное от работы время играет на альте. Живет в Северной Калифорнии со своей женой и в то же время коллегой Энни, а также с карликовым пинчером Кенгой. Адрес электронной почты: rstrauss@mchsi.com.

» Более подробно с книгой можно ознакомиться на сайте издательства
» Оглавление
» Отрывок

Для Хаброжителей скидка 25% по купону — Creating a Website

У нашего партнера «Нетология» есть курсы по направлениям: HTML и CSS, JavaScript, Node, Python, PHP и др. По купону piter_prog скидка 5 000 руб до 20 ноября.

Укажите регион, чтобы мы точнее рассчитали условия доставки

Начните вводить название города, страны, индекс, а мы подскажем

Например: 
Москва,
Санкт-Петербург,
Новосибирск,
Екатеринбург,
Нижний Новгород,
Краснодар,
Челябинск,
Кемерово,
Тюмень,
Красноярск,
Казань,
Пермь,
Ростов-на-Дону,
Самара,
Омск