Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Создание электронной таблицы

Содержание

По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался пред форматиро-ванный
Лекция №5 на тему:Таблицы и слои5informatika.net По мере развития WWW стало ясно, что средств, которые заложены в НТМL, Создание таблиц в HTMLДля описания таблиц используется тег . Тег , как ТаблицаЕсли в таблице два тега TR, то в ней две строки.Если в Вот что получилось. Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка Тег позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо Если ячейка не содержит данных, она не будет иметь границ. Если требуется, Атрибут СЕLLРАDDING Данный атрибут определяет ширину пустого пространства между содержимым ячейки и Теги , и можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное В теге часто определяют, как будут выглядеть рамки, то есть линии, окружающие Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселях. Если этот Таблицы хороши тем, что при желании можно сделать их границы Интернет-Университет Информационных Технологий Добро пожаловать! Учебный курс Создание разноцветных таблиц  Вы не только можете окружить таблицу красивой рамкой, Вы создали двойной фон - GIF и заданный цвет. В результате фоновый Слои  Основное отличие слоя от других прямоугольных контейнерных HTML-элементов состоит в Отметим, что в этом теге размеры изображения задаются атрибутами HTML-элемента IMG. При Использование слоев для позиционирования элементов страницы существенно проще, универсальнее и удобнее использования В этом и состоит смысл свой­ства z-index:n, где n — целое число. Изображение из файла class.gif, помещенное в первом из слоев, располагается над изображением Отметим, что технология слоев по-разному разрабатывалась для браузеров Microsoft Internet Explorer
Слайды презентации

Слайд 2 По мере развития WWW стало ясно, что средств,

По мере развития WWW стало ясно, что средств, которые заложены в

которые заложены в НТМL, недостаточно для качественного отображения различного

типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался пред форматиро-ванный текст (тег
), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.

Слайд 3 Создание таблиц в HTML
Для описания таблиц используется тег

Создание таблиц в HTMLДля описания таблиц используется тег . Тег ,

. Тег , как и многие другие, автоматически переводит

строку до и после таблицы.

Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR>.

Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>. Число тегов <ТD> в строке определяет число ячеек

Слайд 4

Таблица



Если в таблице два
тега

ТаблицаЕсли в таблице два тега TR, то в ней две строки.Если

TR, то в ней две строки.


Если в строке три

тега TD,
то в ней
три столбца.






Слайд 5

Вот что получилось.

Вот что получилось.


Слайд 6 Заголовки для столбцов и строк таблицы задаются

Заголовки для столбцов и строк таблицы задаются с помощью тега

с помощью тега заголовка (Таblе Неаder, заголовок таблицы).

Эти теги подобны <ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН>, автоматически записы-вается жирным шрифтом и по умолчанию распола-гается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.

Слайд 7 Тег позволяет создавать заголовки таблицы. По умолчанию

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

заголовки центрируются и размещаются либо над (), либо

под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.

Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.

Слайд 8
Если ячейка не содержит данных, она не будет

Если ячейка не содержит данных, она не будет иметь границ. Если

иметь границ. Если требуется, чтобы у ячейки были границы,

но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселях или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.

Слайд 9

Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства

Атрибут СЕLLРАDDING Данный атрибут определяет ширину пустого пространства между содержимым ячейки

между содержимым ячейки и ее границами, то есть задает

поля внутри ячейки.

Слайд 10 Теги , и можно модифицировать с

Теги , и можно модифицировать с помощью атрибутов ALIGN и VALIGN.

помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание

текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:

ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.

ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

АLIGN=сеnter располагает содержимое ячейки по центру.

АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

Слайд 11
Атрибут VALIGN осуществляет выравнивание текста и графики внутри

Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали.

ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими

способами:

VALIGN=top выравнивает содержимое ячейки по ее верхней границе.

VALIGN=middle центрирует содержимое ячейки по вертикали.

VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.

Слайд 12
В теге часто определяют, как будут выглядеть

В теге часто определяют, как будут выглядеть рамки, то есть линии,

рамки, то есть линии, окружающие ячейки таблицы и саму

таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.

Слайд 13 Атрибут СЕLLSPACING определяет ширину промежутков между ячейками

Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселях. Если

в пикселях. Если этот атрибут не указан, по умолчанию

задается величина, равная двум пикселям. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.
Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.

Слайд 14 Таблицы хороши тем, что при желании

Таблицы хороши тем, что при желании можно сделать их границы

можно сделать их границы невидимыми. Это позволяет с помощью

тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использо-вания "пустого пространства", что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.

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

Слайд 15





Интернет-Университет

Интернет-Университет Информационных Технологий Добро пожаловать! Учебный курс


Информационных Технологий
Добро пожаловать!


ALIGN="center">Учебный курс
"Основы Web-технологий"










Слайд 17 Создание разноцветных таблиц
Вы не только можете

Создание разноцветных таблиц Вы не только можете окружить таблицу красивой рамкой,

окружить таблицу красивой рамкой, но еще и задать для

нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:



Слайд 18

Вы создали двойной фон - GIF и заданный

Вы создали двойной фон - GIF и заданный цвет. В результате

цвет. В результате фоновый цвет будет виден на всех

границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.

Слайд 19 Слои
Основное отличие слоя от других прямоугольных

Слои Основное отличие слоя от других прямоугольных контейнерных HTML-элементов состоит в

контейнерных HTML-элементов состоит в том, что слои можно перемещать

по странице, накладывать друг на друга и делать их видимыми и невидимыми, когда страница уже отображена в рабочем поле браузера. Слой в нашем примере начинается тегом
. Его атрибут style определяет стилевые свойства слоя. Среди них свойство position:absolute (position — имя свойства, abso­lute — его значение) означает абсолютное позиционирование слоя. В этом случае положение левого верхнего угла слоя имеет жесткие координаты относительно левого верхнего угла страницы, обозначаемые свойствами: left:159px; top:61px (рх — обозначение единицы измерения «пиксел»). Далее указаны размеры слоя: width:180px — горизонтальный и height:135px — вертикальный. Смысл свойства z-index мы рассмотрим чуть позже. А дальше следует тег вставки изображения:



Слайд 20
Отметим, что в этом теге размеры изображения задаются

Отметим, что в этом теге размеры изображения задаются атрибутами HTML-элемента IMG.

атрибутами HTML-элемента IMG. При задании значений в пикселах не

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

Слайд 21
Использование слоев для позиционирования элементов страницы существенно проще,

Использование слоев для позиционирования элементов страницы существенно проще, универсальнее и удобнее

универсальнее и удобнее использования таблиц. Кроме того, слои дают

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

Слайд 22
В этом и состоит смысл свой­ства z-index:n, где

В этом и состоит смысл свой­ства z-index:n, где n — целое

n — целое число. Чем больше значение z-index, тем

выше в иерархии слоев (ближе к зрителю) располагается данный слой. Приведем пример, в котором те же изображения из файлов bild.jpg и class.gif частично наложены друг на друга за счет изменения значений соответствующих свойств left, top, width, height:

Слайд 23


height="148">





Слайд 24
Изображение из файла class.gif, помещенное в первом из

Изображение из файла class.gif, помещенное в первом из слоев, располагается над

слоев, располагается над изображением (ближе к зрителю) из файла

bild.gif потому, что первый слой имеет z-index:2, а следующий — z-index:l.

В следующем примере продемонстрируем наложение слоя с текстом на слой, включающий изображение:

  • Имя файла: sozdanie-elektronnoy-tablitsy.pptx
  • Количество просмотров: 172
  • Количество скачиваний: 0
- Предыдущая Phrasal Verbs
Следующая - Нерозумне кошеня