Студопедия — Урок 2: Ячейка TOP
Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Урок 2: Ячейка TOP

1. У-2: § 2.

2. Сб-2:

рів1 № 1.5, 2.1, 2.3, 2.5, 2.7.

рів2 № 2.11, 2.15, 2.17, 2.19, 2.21.

рів3 № 2.30, 2.32, 2.34, 2.35, 2.39.

Джерела:

1. Усі уроки фізики. 8 клас./ Кирик Л. А.— Х.: Вид. група «Основа», 2008.— 352 с.

2. Сайти: ru.wikipedia.org

 

Урок 2: Ячейка TOP

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

При создании макета я применила маленькую хитрость: рисунок с травой и облаками склеен из одного и того же повторяющегося изображения. Это очень удобно, т.к. при растягивании ячейки Top он сможет повторяться столько раз, сколько потребует ширина вашего экрана. Итак, мы вырезали часть изображения и назвали его top_bg.jpg.

(Подсказка: если бы рисунок был не повторяющимся, нужно было бы заготовить фон для ячейки Top размером не менее 1280 пкс в ширину - такое разрешение экрана у пользователей с мониторами LCD 17-19 дюймов (можно сделать и 1600 пкс, но такое разрешение у очень малого количества пользователей, а всем остальным придется загружать большую картинку).

Отдельно мы вырежем домик и назовем его house.jpg.

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

  • временно отключим слой с облаками в графическом редакторе;
  • подложим под лого прямоугольник голубого цвета (такого же, как переход "небо-облака");
  • вырежем лого и сохраним его в формате.gif. Голубой цвет назначим прозрачным.

Создадим в Top вложенную таблицу, левая ячейка которой будет содержать house.jpg. По ширине и высоте она будет равна размерам рисунка. Правая ячейка будет растягиваться на всю оставшуюся часть экрана, причем ее содержимое - logo.gif - будет выравниваться по правому краю, отступая от верхнего и правого края экрана по 55 пкс.

Вот код ячейки Top. Для вложенной таблицы мы воспользовались уже имеющимся в style.css классом main, чтобы она занимала всю площадь ячейки.

index.html
<td class="top" colspan="2"> <table class="main"> <tr> <td><img src="house.jpg" width="285" height="165" border="0"></td> <td class="logo"><img src="logo.gif" width="206" height="27" border="0"></td> </tr> </table></td>
style.css
td.top { background-image: url(top_bg.jpg); height: 165px;}td.logo { width: 100%; text-align: right; padding-top: 55px; padding-right: 55px;}

Верх готов. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который мы добавили на этом уроке.

 




<== предыдущая лекция | следующая лекция ==>
САМЫЕ ВОСТРЕБОВАННЫЕ СПЕЦИАЛЬНОСТИ УРАЛА И СИБИРИ! ТОЛЬКО В УРАЛЬСКОМ РАДИОКОЛЛЕДЖЕ ИМ. А.С. ПОПОВА! | Т.И. Кутковец, Б.Г. Юдин

Дата добавления: 2015-08-30; просмотров: 354. Нарушение авторских прав; Мы поможем в написании вашей работы!



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

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

ТЕОРЕТИЧЕСКАЯ МЕХАНИКА Статика является частью теоретической механики, изучающей условия, при ко­торых тело находится под действием заданной системы сил...

Теория усилителей. Схема Основная масса современных аналоговых и аналого-цифровых электронных устройств выполняется на специализированных микросхемах...

Конституционно-правовые нормы, их особенности и виды Характеристика отрасли права немыслима без уяснения особенностей составляющих ее норм...

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

Значення творчості Г.Сковороди для розвитку української культури Важливий внесок в історію всієї духовної культури українського народу та її барокової літературно-філософської традиції зробив, зокрема, Григорій Савич Сковорода (1722—1794 pp...

ОЧАГОВЫЕ ТЕНИ В ЛЕГКОМ Очаговыми легочными инфильтратами проявляют себя различные по этиологии заболевания, в основе которых лежит бронхо-нодулярный процесс, который при рентгенологическом исследовании дает очагового характера тень, размерами не более 1 см в диаметре...

Примеры решения типовых задач. Пример 1.Степень диссоциации уксусной кислоты в 0,1 М растворе равна 1,32∙10-2   Пример 1.Степень диссоциации уксусной кислоты в 0,1 М растворе равна 1,32∙10-2. Найдите константу диссоциации кислоты и значение рК. Решение. Подставим данные задачи в уравнение закона разбавления К = a2См/(1 –a) =...

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

Studopedia.info - Студопедия - 2014-2024 год . (0.014 сек.) русская версия | украинская версия