HTML Язык описания Web-страниц - презентация, доклад, проект скачать

Нажмите для полного просмотра!

HTML Язык описания Web-страниц, слайд №1

HTML Язык описания Web-страниц, слайд №2

HTML Язык описания Web-страниц, слайд №3

HTML Язык описания Web-страниц, слайд №4

HTML Язык описания Web-страниц, слайд №5

HTML Язык описания Web-страниц, слайд №6

HTML Язык описания Web-страниц, слайд №7

HTML Язык описания Web-страниц, слайд №8

HTML Язык описания Web-страниц, слайд №9

HTML Язык описания Web-страниц, слайд №10

HTML Язык описания Web-страниц, слайд №11

HTML Язык описания Web-страниц, слайд №12

HTML Язык описания Web-страниц, слайд №13

HTML Язык описания Web-страниц, слайд №14

HTML Язык описания Web-страниц, слайд №15

HTML Язык описания Web-страниц, слайд №16

HTML Язык описания Web-страниц, слайд №17

HTML Язык описания Web-страниц, слайд №18

HTML Язык описания Web-страниц, слайд №19

HTML Язык описания Web-страниц, слайд №20

HTML Язык описания Web-страниц, слайд №21

HTML Язык описания Web-страниц, слайд №22

HTML Язык описания Web-страниц, слайд №23

HTML Язык описания Web-страниц, слайд №24

HTML Язык описания Web-страниц, слайд №25

HTML Язык описания Web-страниц, слайд №26

HTML Язык описания Web-страниц, слайд №27

HTML Язык описания Web-страниц, слайд №28

HTML Язык описания Web-страниц, слайд №29

HTML Язык описания Web-страниц, слайд №30

HTML Язык описания Web-страниц, слайд №31

HTML Язык описания Web-страниц, слайд №32

HTML Язык описания Web-страниц, слайд №33

HTML Язык описания Web-страниц, слайд №34

HTML Язык описания Web-страниц, слайд №35

HTML Язык описания Web-страниц, слайд №36

HTML Язык описания Web-страниц, слайд №37

HTML Язык описания Web-страниц, слайд №38

HTML Язык описания Web-страниц, слайд №39

HTML Язык описания Web-страниц, слайд №40

HTML Язык описания Web-страниц, слайд №41

HTML Язык описания Web-страниц, слайд №42

HTML Язык описания Web-страниц, слайд №43

HTML Язык описания Web-страниц, слайд №44

HTML Язык описания Web-страниц, слайд №45

HTML Язык описания Web-страниц, слайд №46

HTML Язык описания Web-страниц, слайд №47

HTML Язык описания Web-страниц, слайд №48

HTML Язык описания Web-страниц, слайд №49

HTML Язык описания Web-страниц, слайд №50

HTML Язык описания Web-страниц, слайд №51

HTML Язык описания Web-страниц, слайд №52

HTML Язык описания Web-страниц, слайд №53

HTML Язык описания Web-страниц, слайд №54

HTML Язык описания Web-страниц, слайд №55

HTML Язык описания Web-страниц, слайд №56

HTML Язык описания Web-страниц, слайд №57

HTML Язык описания Web-страниц, слайд №58

HTML Язык описания Web-страниц, слайд №59

HTML Язык описания Web-страниц, слайд №60

HTML Язык описания Web-страниц, слайд №61

HTML Язык описания Web-страниц, слайд №62

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему HTML Язык описания Web-страниц. Доклад-сообщение содержит 62 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1

Описание слайда:

Слайд 2

Описание слайда:

Лекция 3 HTML Язык описания Web-страниц Основы верстки

Слайд 3

Описание слайда:

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

Слайд 4

Описание слайда:

Слайд 5

Описание слайда:

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

Слайд 6

Описание слайда:

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

Слайд 7

Описание слайда:

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

Слайд 8

Описание слайда:

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

Слайд 9

Описание слайда:

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

Слайд 10

Описание слайда:

Слайд 11

Описание слайда:

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

Слайд 12

Описание слайда:

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

Слайд 13

Описание слайда:

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

Слайд 14

Описание слайда:

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

Слайд 15

Описание слайда:

Слайд 16

Описание слайда:

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

Слайд 17

Описание слайда:

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

Слайд 18

Описание слайда:

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

Слайд 19

Описание слайда:

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

Слайд 20

Описание слайда:

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

Слайд 21

Описание слайда:

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

Слайд 22

Описание слайда:

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

Слайд 23

Описание слайда:

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

Слайд 24

Описание слайда:

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

Слайд 25

Описание слайда:

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

Слайд 26

Описание слайда:

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

Слайд 27

Описание слайда:

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

Слайд 28

Описание слайда:

Слайд 29

Описание слайда:

Слайд 30

Описание слайда:

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

Слайд 31

Описание слайда:

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