Книга Вёрстка веб-страниц


Содержание

Скачать книгу Влад Мержевич — Вёрстка веб-страниц

Web-дизайн, Созд. и продв. сайта >> Скачать книгу Автор: Влад Мержевич
Издательство: htmlbook
Год: 2011
Формат: PDF
Размер: 8 Мб
Страниц: 378
Качество: Отличное
Язык: Русский

О вёрстке веб-страниц вообще мало книг на русском языке, а уж последовательных, где подробно с самого начала рассказаны все основы, можно считать что нет. Так что эту нишу восполняет моя новая электронная книга «Вёрстка веб-страниц», которая будет полезна и новичкам и опытным пользователям. Для новичков в ней рассказано, как использовать на своей странице стили, как их применять для оформления элементов — ссылок, рисунков, таблиц, форм и списков. Подробные примеры, описание всех действий и комментарии позволяют легко воспроизвести приведенные технологии на практике и модернизировать код под свои нужды. Опытные пользователи получат более подробные сведения об особенностях популярных браузеров и о том, как они работают с тегами и стилями. Это позволит учитывать различия между браузерами и создавать универсальные документы, которые будут корректно в них отображаться. Наконец, искушенные специалисты по созданию сайтов смогут использовать книгу как справочное руководство, заглядывая в нее для получения информации об ошибках браузеров и нестандартном применении некоторых стилевых свойств.
Наряду с самой книгой отдельно прилагаются примеры из нее со всеми требуемыми изображениями, стилями и скриптами. Также включен макет рассматриваемого на примерах сайта в форматах PSD, AI и сам сайт целиком.

Ссылки для ознакомления:

Другие новости, похожие на книгу Влад Мержевич — Вёрстка веб-страниц:

автор: hanter10 Комментарии (0)

Вы можете разместить ссылку на книгу Влад Мержевич — Вёрстка веб-страниц на своем сайте, блоге, любимом форуме или просто поделиться ей с друзьями:

HTML ссылка на книгу Влад Мержевич — Вёрстка веб-страниц:

Ссылка для форума книга Влад Мержевич — Вёрстка веб-страниц:

Ссылка на книгу Влад Мержевич — Вёрстка веб-страниц:

Помощь по использованию электронной библиотеки книг:

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

ДОКУМЕНТАЛЬНОЕ ВИДЕО
( BBC. Discovery
National Geographic
Познавательные телепередачи )

Ускоренная верстка веб-страниц с помощью фреймворка Bulma.

Нет доступа?

Получите доступ ко всему, что можно найти на этом сайте на:

1 мес. 6 мес. 1 год
490 руб. 1900 руб. 3900 руб.

Оплатить можно картой (Master Card, Visa, МИР), Яндекс Деньги, Сбербанк Онлайн, Qiwi и др.

Ссылки для оплаты доступны после регистрации.

Если вы из Украины, для оплаты нужно соединение с VPN. Оплата проходит через сервис Яндекс.Касса.

Верстка, HTML и CSS.

Веб-сервер. Backend разработка.

Техническая сторона веб-аналитики сайтов.

SEO и продвижение сайтов.

Здравствуйте. Меня зовут Дмитрий Ченгаев.

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

[+] HTML
[+] CSS
[+] PHP
[+] Верстка сайтов
[+] Javascript
[+] других инструментах, которые помогают решать задачи веб-разработки проще и быстрее.

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

Если у вас возникают какие-то вопросы или непонятные моменты, пишите в «личку» или в комментариях на этом сайте. Постараюсь помочь.

Вёрстка веб-страниц

Wikipedia open wikipedia design.

HTML
  • HTML и HTML5
  • Динамический HTML
  • XHTML
  • XHTML Mobile Profile и CHTML
  • Document Object Model
  • Семейство шрифтов
  • Кодировки символов
  • Мнемоники в HTML
  • Редактор HTML
  • Элементы HTML
  • Семантическая вёрстка
  • Карта изображений
  • Цвета HTML
  • Формы HTML
  • Фреймы HTML
  • HTML5 audio и HTML5 video
  • Canvas
  • Скрипты в HTML
  • Unicode и HTML
  • Браузерный движок
  • Quirks mode
  • Каскадные таблицы стилей
  • W3C и WHATWG
  • Web Storage
  • WebGL
  • Сравнение
    • языков разметки документов
    • браузеров
    • браузерных движков

Вёрстка веб-страниц — создание структуры гипертекстового документа на основе HTML разметки, как правило, при использовании таблиц стилей и клиентских сценариев, таким образом, чтобы элементы дизайна выглядели аналогично макету [1] .

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

Процесс сложен и имеет творческую основу, ни один из способов не является каноничным и принятым как основа [2] . Все подходы к вёрстке имеют как преимущества, так и недостатки.

Работы по верстке сайта могут быть включены в этап сборки сайта.

Содержание

История развития верстки веб-страниц [ править | править код ]

Тим Бернерс-Ли, работая в Европейском институте физики частиц придумал язык, который концентрировался не на средствах оформления, а на логике разметки текста. Некоторое время страницы оформлялись в так называемом «академическом дизайне», например, lib.ru [3] .

С появлением браузера Netscape ситуация изменилась. Разработчики браузера внедряли нестандартные для html теги, призванные улучшить внешний вид документа [3] . Браузер был настолько распространённым, что нестандартные теги не вызывали беспокойств: нет смысла беспокоиться о том, что другие браузеры не поддерживают эти теги, когда только 10 % посетителей пользуется другими браузерами [3] . Сайты перестали разрабатываться в «академическом» стиле [3] . Над дизайном стали задумываться, а значит, потребовалась более сложная верстка [3] .

С середины 1990-х MS Internet Explorer захватывал всё большую часть потребителей [3] . Подходы разработчиков браузеров различались, отличался и набор поддерживаемых технологий [3] . Всё это лишь добавляло неудобств для разработчиков сайтов — увеличивая время разработки сайта [3] .

Во время борьбы за рынок на смену устаревающим и плохо поддерживающим стандарты Netscape 4 и Internet Explorer 4 (IE 4) пришли пятые версии браузеров [4] . IE 5 должна была не просто исправить ошибки предшественника, а улучшить поддержку стандартов CSS [4] . На этот шаг Майкрософт была обречена хотя бы потому, что вошла в группу W3C [4] . В процессе разработки разница в отображении сайтов стала настолько значительной (а часть сайтов вовсе не работали), что разработчикам пришлось создать специальный «режим совместимости» [4] . В таком режиме браузер работал «по старинке» [4] . Для того, чтобы использовать режим поддержки стандартов необходимо было в html-код добавить элемент [4] . Идея с режимом совместимости позднее перешла в остальные браузеры (например, Mozilla, Safari, Opera и т. д.) [4] . С развитием технологий разновидностей doctype оказалось слишком много, только к пятой версии html W3C предложили использовать короткую запись унифицировав стандарт [4] .

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

В 1998 году появляется спецификация Cascading Style Sheets Level 2 (CSS2), а потом и CSS2.1, что позволило выносить код оформления блоков в отдельные файлы и использовать на всех страницах сайта и даже кэшировать этот файл, а значит ускорять загрузку страниц [3] . Развитие этой технологии и поддержка со стороны браузеров привела к использованию блочной вёрстки, вместо таблиц [3] .

Этапы вёрстки [ править | править код ]

Прямоугольник получил исключительное значение благодаря способности делиться на любое число прямоугольников любых пропорций [5] .

Как правило верстальщик получает от дизайнера утверждённый дизайн-макет страницы [2] . Далее, верстальщик анализирует полученный макет [2] . Разбивает его на горизонтальные линии (полосы) — «этажи». Далее, каждый «этаж» анализируется отдельно и разбивается на прямоугольные блоки — колонки.

Далее происходит рекурсивный процесс вёрстки этих отдельных строк, а в них столбцов [2] .

После вёрстки страница проверяется на кросс-платформенность. В общем случае можно отвечать на следующие вопросы [2] :

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

Критические исправления вносятся в документ, и проверка повторяется с самого начала [2] .

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

Ограничения [ править | править код ]

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

Многообразие форматов [ править | править код ]

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

Верстка отличается различными подходами к этому вопросу [6] :

  • Фиксированная ширина — сайт отображается с одинаковой шириной вне зависимости от ширины окна браузера. Соответственно, на широкоформатных браузерах такие сайты имеют большие поля по краям, а на мелких экранах смартфонов показывают горизонтальную прокрутку.
  • «Резиновая» ширина — полосы сайта растягиваются на весь экран, занимая место пропорционально настройкам верстальщика.

Исторически сложилось, что сайт — вертикальный формат, который занимает не более чем ширину экрана, чтобы избежать горизонтальной прокрутки [6] . Все возможности по управлению положения сайта (клавиатурные комбинации и полоса прокрутки и колесо мыши) настроены непосредственно на вертикальное передвижение [6] .

Модульность и виды подходов к вёрстке [ править | править код ]

Типовые веб-макеты
Одноколоночный Двухколоночный Трёхколоночный

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

Модульная сетка структурно разбивает материал на отдельные блоки, для упрощения добавления новых элементов на страницу [7] . Некоторые верстальщики могут уйти от правил верстки, ради определённого проекта, но необходимость простого добавления вновь появляющихся элементов на странице обострит необходимость возврата к этим правилам [7] .

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

Основными инструментами для вёрстки являются фреймы, таблицы и div. В стандарте HTML5 фреймы больше не поддерживаются [8] , а для работы стали доступны «семантические» блоки: header, main, nav, section, article, aside, footer. Однако блоки не дают определённых преимуществ, а являются лишь «синтаксическим сахаром».

Табличный подход [ править | править код ]

Таблицы являются удобным инструментом для выравнивания блоков. В html таблица делится на строки, которые в свою очередь делятся на ячейки, таким образом можно создавать неограниченное количество строк с неограниченным числом ячеек в каждой. Ячейки таблицы имеют особые настройки выравнивания, которые не встречаются более в других элементах. Это значит, что некоторые элементы дизайна крайне сложно сверстать без использования таблиц [9] .

В деловом мире таблицы используется для сравнения данных, а также для наглядности [9] .

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

На момент 2011 года табличная верстка считается устаревшей [9] .

Вёрстка слоями [ править | править код ]

Слой (от имени тега ) — разработка компании Netscape, использованная в браузере Netscape Navigator [10] . Тег позволял показывать или скрывать его содержимое, устанавливать положение относительно окна браузера, накладывать слои друг на друга и включать содержимое блока из файла [10] . В спецификацию HTML не был включён [10] .

Блочная вёрстка [ править | править код ]

Блочная вёрстка — верстка с помощью тега

Вёрстка фреймами [ править | править код ]

Вёрстка фреймами — верстка с помощью одноимённого тега , который имеет иной способ позиционирования, а внутри себя включает отдельные html-страницы [11] .

Фреймы просты в применении, поскольку необходимо заботиться только об отображении и перерисовке части окна браузера — одного фрейма, — остальные части находятся в другом фрейме и не перерисовываются без взаимодействия с ними [11] . Также возможно открытие ссылки в другом фрейме, что удобно при использовании главного меню в отдельном фрейме [11] . Страницы поделённые на фреймы имеют меньше кода, вследствие отсутствия повторяемых частей, которые не перезагружаются [11] . Они размещаются точно в нужном месте окна браузера [11] .

Фреймы плохо индексируются поисковыми системами, поскольку на страницах с содержимым нет ссылок на другие страницы сайта и наоборот, в навигационной странице нет никакого содержимого [11] . Переход из поисковой страницы происходит на одну страницу, без загрузки других фреймов — навигации и логотипа [11] . Внутренние страницы нельзя добавить в закладки, потому что браузер не показывает изменения в адресной строке, отображая всегда только адрес сайта [11] . Совместимость между браузерами противоречива [11] . Одни и те же параметры интерпретируются браузерами всегда по-своему [11] .

Разметка страницы [ править | править код ]

По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую).

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

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


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

Преимуществом второго подхода является независимость вёрстки от используемого типа устройств и дизайна веб-страниц.

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

Типы макетов [ править | править код ]

Все сайты по макету вёрстки можно разделить на 5 групп [12] :

  • фиксированные (статические, имеющие фиксированную ширину),
  • резиновые (проценты),
  • эластичные (em),
  • адаптивные,
  • комбинированные.

Адаптивный [ править | править код ]

Адаптивная вёрстка/тип макета — дизайн, который подстраивается (адаптируется) под размер экрана, в том числе может происходить перестройка блоков с одного места на другое, или их замена блоками отображаемыми только при определённом разрешении. Адаптивная вёрстка пришла на смену идеи создания специальных мобильных версий сайта, «живущих» на отдельных поддоменах (например, m.wikipedia.org).

  • Сайт будет отображаться при разных размерах экрана так, как это наиболее удобно пользователю;
  • Требует тщательной проработки нескольких макетов, для различных размеров экранов.

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

Табличная вёрстка [ править | править код ]

Преимущества и недостатки [ править | править код ]

Браузеры преднамеренно расценивают таблицу как один объект, из-за чего содержимое таблицы не отображается до тех пор, пока оно целиком не будет загружено на локальный компьютер. [13]

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

Проблема возникает при множественной вложенности таблиц, что характерно для достижения определённых эффектов на веб-странице. Рост количества таблиц повышает шанс возникновения ошибок при вёрстке, увеличивает размер документов и снижает скорость загрузки файлов. Применение визуальных редакторов, вроде Adobe Dreamweaver или Microsoft FrontPage, для создания и правки документов облегчает работу с таблицами, но из-за обилия их параметров и в этом случае разработчики не застрахованы от появления ошибок и лишней работы, связанной с индивидуальным редактированием каждой таблицы.

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

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

Распорки [ править | править код ]

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

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

Рецензии на книгу « Вёрстка веб-страниц »

Влад Мержевич

Год издания: 2011
Издательство: htmlbook.ru
Язык: Русский

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

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

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

Лучшая подборка с книгой

Мне попалось интересное выражение чтобы стать специалистом в любой области, достаточно прочесть 15-20 книг на данную тему . Так ли это? Проверим! Итак, буду складывать сюда все книги, которые были бы полезны человеку, увлекающемуся или трудящемуся в области компьютерной графики. Пока что.

ForCoder

Навазние: Вёрстка веб-страниц
Автор: Влад Мержевич
Издательство:
Год: 2011
Страниц: 378
Язык: Русский
Размер: 8
Формат: pdf

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

Для новичков в ней рассказано, как использовать на своей странице стили, как их применять для оформления элементов — ссылок, рисунков, таблиц, форм и списков. Подробные примеры, описание всех действий и комментарии позволяют легко воспроизвести приведенные технологии на практике и модернизировать код под свои нужды. Опытные пользователи получат более подробные сведения об особенностях популярных браузеров и о том, как они работают с тегами и стилями. Это позволит учитывать различия между браузерами и создавать универсальные документы, которые будут корректно в них отображаться. Наконец, искушенные специалисты по созданию сайтов смогут использовать книгу как справочное руководство, заглядывая в нее для получения информации об ошибках браузеров и нестандартном применении некоторых стилевых свойств. Наряду с самой книгой отдельно прилагаются примеры из нее со всеми требуемыми изображениями, стилями и скриптами. Также включен макет рассматриваемого на примерах сайта в форматах PSD, AI и сам сайт целиком.

30,497 просмотров всего, 1 просмотров сегодня

Интеллектуальные развлечения. Интересные иллюзии, логические игры и загадки.

Добро пожаловать В МИР ЗАГАДОК, ОПТИЧЕСКИХ
ИЛЛЮЗИЙ И ИНТЕЛЛЕКТУАЛЬНЫХ РАЗВЛЕЧЕНИЙ
Стоит ли доверять всему, что вы видите? Можно ли увидеть то, что никто не видел? Правда ли, что неподвижные предметы могут двигаться? Почему взрослые и дети видят один и тот же предмет по разному? На этом сайте вы найдете ответы на эти и многие другие вопросы.

Log-in.ru© - мир необычных и интеллектуальных развлечений. Интересные оптические иллюзии, обманы зрения, логические флеш-игры.

Привет! Хочешь стать одним из нас? Определись
Если ты уже один из нас, то вход тут.

Интересно

Самым молодым родителям в мире было 8 лет и 9 и жили в Китае в 1910

Приемы верстки веб-страниц (Влад Мержевич)

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

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

Книги автора на сайте
HTML и CSS в примерах
Использование кривых в Photoshop

LiveInternetLiveInternet

-Метки

-Рубрики

  • Заработок на сайте, блоге (320)
  • Вебмастерам (256)
  • Полезные программы и сервисы (253)
  • Реклама (234)
  • Партнерские программы (226)
  • Объявления, информация (201)
  • Обзоры (184)
  • Теория (103)
  • Смешанные проекты (80)
  • Фриланс (56)
  • Системы активной раскрутки сайтов (САР) (55)
  • Автосёрфинг и сёрфинг (53)
  • Платные опросы, регистрации и прочие задания (37)
  • Электронные платежные системы (36)
  • Инвестиционные проекты (32)
  • Скрины выплат (28)
  • Почтовые спонсоры (25)
  • Заработок на файлообменниках (23)
  • Спонсоры БУКС (19)
  • Форекс (16)
  • Форумы с оплатой (15)
  • Внимание- лохотрон. (13)
  • Заработок на фотохостингах (8)
  • Инвестиционный автосёрфинг (4)

-Музыка

-Поиск по дневнику

-Подписка по e-mail

-Статистика

Влад Мержевич - Вёрстка веб-страниц [2011, PDF, RUS]

Среда, 20 Июля 2011 г. 18:55 + в цитатник

Год : 2011
Автор : Влад Мержевич
Язык : Русский
Формат : PDF
Издательство : HTMLBOOKS
Качество : Изначально компьютерное (eBook)
Количество страниц : 378

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

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

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

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

Вёрстка веб-страниц + examples

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

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

Информация о книге
Автор: Влад Мержевич
Издательство: Вильямс
Год издания: 2011
Страниц: 378
Язык: русский
Формат: PDF + examples
Размер: 18.4 MB

Пожалуйста зарегистрируйтесь или введите в Панели пользователя логин и пароль.
Если не хотите регистрироваться, то введите логин: demo пароль:demo

Скачать книгу Вёрстка веб-страниц бесплатно

Категория: Учебные пособия

Илон Маск рекомендует:  Asp быстродействие доступа к данным
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL

Название: Вёрстка веб-страниц
Автор: Влад Мержевич
Год: 2011
Страниц: 378
Формат: PDF
Размер: 6 Mb
Качество: Изначально компьютерное (eBook)
Язык: Русский

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

Вёрстка веб-страниц

Верстка сайта

Основные правила грамотной и качественной верстки

и т.д;
14. Атрибуты всех тегов заключают в кавычки.

Этапы вёрстки
Верстка начинается после получения верстальщиком утвержденного дизайн-макета страницы.
Верстальщик анализирует его и разбивает на «этажи» - горизонтальные полосы, которые далее разбиваются на блоки или колонки или делит ее на прямоугольники.
Прямоугольник легко делится на разные прямоугольники любых пропорций.
Далее он делает рекурсивный процесс вёрстки этих отдельных строк, а уже в них столбцов
Страница после вёрстки проверяется на кросс-платформенность следующим образом:
• Отображение страницы в браузерах и на различных ОС,
• Если менять размер шрифта в настройках браузера в разные стороны, будет ли происходить критичное смещение блоков?
• Будет ли критичный сдвиг блоков, при отключении показа изображений в браузере?
• Какое влияние на целостность страницы оказывает разрешение монитора?
Если обнаружены критические исправления, то они вносятся в документ и проверку начинают с самого начала.

Верстка выполняется для шаблонов

Многообразие форматов

Модульность и виды подходов к вёрстке

Типовые веб-макеты

Вёрстка слоями

Блочная верстка реализует полностью концепцию семантической вёрстки.
Вёрстка фреймами
Вёрстка фреймами — верстка с помощью тега
Валидная верстка веб-сайта осуществляется при написании HTML и CSS кода, соответствующего стандартам W3C.
Грамотно и верно построенный код хорошо влияет на поведение поисковых роботов и валидный код показывает, что при программировании нет синтаксических и логических ошибок.
Самый чуткий валидатор – браузер. Как браузер воспримет сайт, так его будет воспринимать и посетитель.

Разметка страницы
Разметка бывает логическая и презентационная в зависимости от применения средств разметки HTML

Типы макетов
Их 5 основных групп:
• фиксированные (статические, имеющие фиксированную ширину),
• эластичные (em),
• резиновые (проценты),
• адаптивные,
• комбинированные.
Адаптивная вёрстка/тип макета — дизайн, способный адаптироваться под размер экрана
Ее преимущества: Сайт отображается при разных размерах экрана Недостатки: Требуется тщательная проработка нескольких макетов
Табличная вёрстка Преимущества и недостатки Табличная верстка приводит к задержке вывода информации в браузере, и она не соответствует концепции семантичной вёрстки.
Блочная вёрстка Слои - это структурные элементы, размещаемые на веб-странице путём наложения их с точностью до пикселя друг на друга.
В HTML 4 и XHTML под слоем подразумевают элемент веб-страницы, который создается с помощью тега

• Таблицы применяют только, чтобы представить табличные данные.
Изменять параметры слоя динамически позволяют Скрипты.
Это позволяет создавать на странице эффекты, например - выпадающие меню, разворачивающиеся баннеры, игры, плавающие окна и прочее.
Свойства слоя задают и настраивают через стили.
Возможности CSS существенно расширяют оформительские изыски.
А если использовать стилевые таблицы, то можно получить эффективный и компактный код.

Инструменты верстальщика
• текстовый редактор или редактор HTML
• графическая программа
иногда WYSIWYG редакторы

В процессе создания веб-страниц используется языки HTML, CSS, JavaScript.
HTML или HyperText Markup Language – это язык разметки гипертекста.
С его помощью формируется каркас сайта, его структура, и понятно, что без HTML верстка невозможна!
CSS или cascade style sheets – для красивого шаблона и оформления страницы,
JavaScript используют для написания сценариев или для указаний браузеру что и когда делать с веб-старницами.

Структура HTML- кода: • HTML и HTML5 • Динамический HTML • XHTML Mobile Profile и CHTML • XHTML • Кодировки символов • Document Object Model • Редактор HTML • Семейство шрифтов • Семантическая вёрстка • Мнемоники в HTML • Элементы HTML • Цвета HTML • Карта изображений • Формы HTML • HTML5 audio и HTML5 video • Фреймы HTML • Скрипты в HTML • Canvas • Quirks mode • Unicode и HTML • Браузерный движок • W3C и WHATWG • WebGL • Каскадные таблицы стилей • Web Storage • Сравнение • браузеров • языков разметки документов • браузерных движков для • HTML • HTML5 • HTML5 Canvas • HTML5 Media • XHTML (1.1).