Презентация HTML Язык описания Web-страниц онлайн

На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему HTML Язык описания Web-страниц абсолютно бесплатно. Урок-презентация на эту тему содержит всего 62 слайда. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.

Презентации » Интернет » HTML Язык описания Web-страниц

Просмотр ВСЕЙ презентации! ЖМИТЕ

Оцените презентацию от 1 до 5 баллов!

Смотреть онлайн
Скачать

Тип файла:

ppt / pptx (powerpoint)
Всего слайдов:

62 слайда
Для класса:

1,2,3,4,5,6,7,8,9,10,11
Размер файла:

5.57 MB
Просмотров:

123
Скачиваний:

0
Автор:

неизвестен

Слайды и текст к этой презентации:

№1 слайд

Содержание слайда:

№2 слайд

Содержание слайда: Лекция 3 HTML Язык описания Web-страниц Основы верстки

№3 слайд

Содержание слайда: Верстка Алгоритм верстки Виды макетов Изображения Табличная верстка Блочная верстка Задания для лабораторной

№4 слайд

№5 слайд

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

№6 слайд

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

№7 слайд

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

№8 слайд

Содержание слайда: Алгоритм верстки (продолжение) Далее предстоит продумать: цвет фона веб-страницы; тип разметки – табличная/блочная? гарнитуру основного шрифта, его размер и цвет; размер текста отдельных модулей (новостей, например); цвет, размер и гарнитуру шрифта заголовков; параметры горизонтальных линий и рамок; создать CSS файл.

№9 слайд

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

№10 слайд

№11 слайд

Содержание слайда: Виды макетов Существует два вида макетов - фиксированный и «резиновый»

№12 слайд

Содержание слайда: Виды макетов (продолжение) Этот вид макета основывается на том, что в качестве одной из единиц измерения выступают проценты. Общая рабочая ширина окна браузера — 100%, и колонки макета в сумме не должны ее превышать, поэтому для удобства, как правило, везде применяют процентную запись. При изменении размеров окна происходит переформатирование данных страницы, чтобы они вписались в новую ширину.

№13 слайд

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

№14 слайд

Содержание слайда: Виды макетов (продолжение) Любой макет имеет некоторую минимальную ширину, при достижении которой веб-страница «рассыпается» или появляется горизонтальная полоса прокрутки. Например, если в документ вставлен рисунок шириной 600 пикселов, то при уменьшении окна до этой величины браузер начнет отображать полосу прокрутки. «Резиновый» дизайн характеризуется активным использованием фоновых изображений, которые по горизонтали собираются без швов встык. Действительно, изменить без потери качества ширину рисунков не получится, а вот «подложить» под них фон — всегда пожалуйста.

№15 слайд

№16 слайд

Содержание слайда: Изображения Для выравнивания изображения по центру колонки текста, тег <img> помещается в контейнер <p>, для которого устанавливается атрибут align="center".

№17 слайд

Содержание слайда: Изображения (продолжение) 1. Растягивание рисунка до 100% (не самый эффективный способ, используется редко).

№18 слайд

Содержание слайда: Изображения (продолжение) Высота блока задается с помощью свойства height, она совпадает с высотой рисунка, а его ширина по умолчанию равна auto, иными словами, занимает всю доступную ширину. Повторение фона происходит только по горизонтали, это обеспечивает значение repeat-x свойства background.

№19 слайд

Содержание слайда: Изображения (продолжение)

№20 слайд

Содержание слайда: Верстка Алгоритм верстки Виды макетов Изображения Табличная верстка Блочная верстка Варианты дизайна персональной страницы Задания для лабораторной

№21 слайд

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

№22 слайд

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

№23 слайд

Содержание слайда: Скорость загрузки таблицы Скорость загрузки таблицы Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу. Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 кБ). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout, применение которого позволяет несколько повысить скорость отображения содержимого таблицы.

№24 слайд

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

№25 слайд

Содержание слайда: За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега <td>, допустимо устанавливать несколько видов положений элементов относительно друг друга. За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега <td>, допустимо устанавливать несколько видов положений элементов относительно друг друга.

№26 слайд

Содержание слайда: В данном примере характеристики ячеек управляются с помощью параметров тега <td>, но их удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами CSS vertical-align и text-align: В данном примере характеристики ячеек управляются с помощью параметров тега <td>, но их удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами CSS vertical-align и text-align:

№27 слайд

Содержание слайда: Разрезание и склейка изображений Разрезание и склейка изображений

№28 слайд

Содержание слайда:

№29 слайд

№30 слайд

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

№31 слайд

Содержание слайда: Блочная верстка Ориентируясь на новые стандарты HTML5, лучше сразу брать курс на правильную разметку, т.е. называть блоки именами, принятыми в стандартах HTML5:

№32 слайд