Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Сборник практических и лабораторных работСтр 1 из 6Следующая ⇒
Д.В. Валько СБОРНИК ПРАКТИЧЕСКИХ И ЛАБОРАТОРНЫХ РАБОТ ПО дисциплине «программное обеспечение компьютерных сетей»
ЧОУ СПО «Колледж права и экономики»
Д.В. Валько СБОРНИК ПРАКТИЧЕСКИХ И ЛАБОРАТОРНЫХ РАБОТ ПО ДИСЦИПЛИНЕ «ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ КОМПЬЮТЕРНЫХ СЕТЕЙ»
Челябинск, 2014
УДК 001.891 ББК 72
Автор: Д.В. Валько – преподаватель специальных дисциплин ЧОУ СПО «Колледж права и экономики».
Рецензенты: В.М. Чухарев – преподаватель специальных дисциплин ГБОУ СПО (ССУЗ) «Южно-Уральский многопрофильный колледж».
Ю.Р. Мухина – кандидат педагогических наук, преподаватель кафедры «Информационных технологий и систем» ЧОУ ВПО «Южно-Уральский институт управления и экономики».
Одобрено: Цикловой методической комиссией «ИТ-дисциплин» Протокол заседания № от «» 2014 г.
____________ Д.В, Валько, председатель ЦМК
Валько, Д.В. Сборник практических и лабораторных работ по дисциплине «Программное обеспечение компьютерных сетей» / Д.В. Валько. – КПиЭ, 2014. – 46 с.
В сборнике представлены практические и лабораторные работы по основным современным сетевым технологиям. Работы охватывают широкий круг дисциплин среднего профессионального образования в сфере информационных технологий и систем, компьютерных сетей и коммуникационных технологий.
© Издательство ЧОУ ВПО «Южно- Уральский институт управления и экономики», 2014. © Валько Д.В., 2014. Содержание
Раздел 1. HTML (HyperText Markup Language) Лабораторная работа №1 «Структура HTML-документа». 5 Лабораторная работа №2 «Работа с отступами и шрифтами». 8 Лабораторная работа №3 «Работа со списками». 11 Лабораторная работа №4 «Работа со ссылками». 13 Лабораторная работа №5 «Графика и мультимедиа». 15
Раздел 2. CSS (Cascading Style Sheets) Практическая работа №1 «Работа с каскадными таблицами стилей». 17 Практическая работа №2 «Экспорт стилей и валидация». 22
Раздел 3. JS (JavaScript, ECMAScript) Лабораторная работа №1 «Знакомство с синтаксисом языка». 23 Лабораторная работа №2 «Знакомство с основными операторами». 25
Лабораторная работа №3 «Условный оператор». 27 Лабораторная работа №4 «Разработка калькулятора». 28
Раздел 4. PHP (PHP: Hypertext Preprocessor) Практическая работа №1 «Обработка данных формы». 33 Практическая работа №2 «Создание счетчика посещений». 34 Практическая работа №3 «Вычисление значения функции». 36 Практическая работа №4 «Использование массивов». 37 Практическая работа №5 «Разработка базы данных». 43
Лабораторная работа №1 «Структура HTML-документа» Цели: 1. ознакомиться с основными понятиями: элемент, атрибут; 2. ознакомиться со структурой HTML-документа; 3. создать простейшую HTML-страничку; 4. научиться использовать комментарии.
HTML содержит типы элементов, представляющих параграфы, гипертекстовые ссылки, списки, таблицы, изображения и т.д. Каждое объявление типа элемента обычно описывает три части: начальный тег, содержимое и конечный тег. Название элемента появляется в начальном теге (<название-элемента>) и в конечном теге (</название-элемента>). Некоторые элементы HTML допускают отсутствие конечного тега. Некоторые типы элементов HTML не имеют содержимого. Такие пустые элементы никогда не имеют конечного тега. Названия элементов всегда нечувствительны к регистру. Элементы могут иметь ассоциированные свойства, называемые атрибутами, которые могут иметь значения (по умолчанию или устанавливаемые автором). Пары атрибут/значение появляются перед конечным символом ">" начального тега элемента. Любое количество (допустимое) пар значений атрибута, разделённых пробелами, может появляться в начальном теге элемента. Они могут появляться в любом порядке. По умолчанию требуется, чтобы все значения атрибутов были ограничены с использованием двойных или одинарных кавычек, однако в некоторых случаях можно устанавливать значение атрибута без использования кавычек, но рекомендуется использовать знак кавычек даже тогда, когда можно обойтись без него. Названия атрибутов всегда нечувствительны к регистру. Комментарии HTML имеют следующий синтаксис: <!-- это комментарий --><!-- и это тоже комментарий, занимающий более одной строки -->Основные теги.
Элемент HTML Описание: определяет начало и конец HTML-документ. Начальный тег: не обязателен Конечный тег: не обязателен Пример: <HTML> ...элементы head, body и т.п. идут здесь... </HTML>Элемент HEAD Описание: содержит информацию о текущем документе, такую как название, ключевые слова и другие данные, не являющиеся содержимым документа. Начальный тег: не обязателен Конечный тег: не обязателен Элемент TITLE Описание: определяет заголовок страницы или название окна. Каждый документ HTML обязан содержатьэлемент TITLE в разделе HEAD. Авторы должны использовать элемент TITLE для идентификации содержимого документа. Поскольку пользователи часто обращаются к документам вне контекста, авторы должны предоставлять осмысленные заголовки. Заголовок не может содержать разметку (в том числе и комментарии).
Начальный тег: необходим Конечный тег: необходим Пример:
Метаданные. HTML позволяет авторам специфицировать метаданные - информацию о самом документе, а не о его содержимом - различными способами. Элемент META Описание: Элемент МЕТА можно использовать для идентификации свойств документа (напр., автора, конечной даты использования, списка ключевых слов и т.д.) и установки значений этих свойств. Каждый элемент МЕТА определяется в разделе HEAD и определяет пару свойство-значение. Атрибут name идентифицирует свойство, а атрибут content определяет значение свойства. Например, следующее объявление устанавливает значение для свойства Author(автор): <META name="Author" content="Студент группы …">. Обычно META специфицирует ключевые слова, которые используются поисковыми машинами для повышения качества и скорости поиска. Например, следующее объявление устанавливает значения для свойства keywords (ключевые слова): <META name="keywords" content="Chelaybinsk, КПиЭ"> Начальный тег: требуется Конечный тег: запрещён Определения атрибутов: name = строка – устанавливает имя свойства content = строка – определяет значение свойства Пример:
Элемент BODY Описание: тело документа. В теле документа находится содержимое документа. Начальный тег: не обязателен Конечный тег: не обязателен Определения атрибутов: background = "url" (url – это строка, задающая путь в структуре каталогов до файла) – установка фоновой картинки text = color (значение цвета может быть или 16-ричным числом (предваряемым знаком # в следующем формате #RRGGBB, где RR – градация красного цвета, GG – зеленого, BB – синего), или одним из следующих 16 названий цвета) - устанавливает цвет текста (для визуальных браузеров).
bgcolor = color – установка цвета фона документа
Пример:
Задания: 1. На жестком диске создать папку с именем HTML. 2. Открыть текстовый редактор "Блокнот". 3. В окне блокнота создать документ, печатающий в качестве заголовка документа название Вашей специальности. 4. Сохранить документ под именем index. html, обязательно с расширением html (или htm) в папке HTML. 5. Запустить любой из браузеров, установленный в системе, например, Internet Explorer (Пуск – Программы - Internet Explorer). 6. Используя меню Файл – Открыть, открыть в окне браузера свой файл и убедиться, что в строке заголовка напечатано название Вашей специальности. 7. Перейти в окно редактора Блокнот и добавить вывод в окне браузера «Колледж права и экономики». 8. Сохраните изменения. 9. Перейти в окно браузера. Сейчас, что бы просмотреть внесенные изменения, необходимо нажать кнопку "Обновить". 10. Используя метаданные, определить автора документа и ключевые слова: название Вашей специальности и название Вашего колледжа. 11. Установить цвет фона документа на свой вкус. 12. Установить фоновую картинку, для этого: 12.1. на жестком диске найти файл с расширением jpg или gif; 12.2. скопировать найденный файл в свою папку; 12.3. установить фоновую картинку; 13. Изменить цвет текста документа на свой вкус. 14. Сохранить результаты, так как следующие задания опираются на результаты предыдущих. Лабораторная работа №2 «Работа с отступами и шрифтами» Цели:
Параграфы: элемент P Описание: представляет параграф Начальный тег: необходим Конечный тег: не обязателен Определения атрибутов: align = left|center|right|justify – выравнивание текста Примеры:
Лабораторная работа №3 «Работа со списками» Цели:
Организация текста внутри документа. HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле. Разберем все по порядку. Ненумерованные списки: <UL>... </UL>. Описание: описывают ненумерованный список. Начальный тег: необходим Конечный тег: необходим Определения атрибутов: type = disc|circle|square – задает стиль меток для данного списка: circle (кружок), disc (закрашенный кружок, по умолчанию) или square (квадрат). Нумерованные списки: < O L>... </ O L>. Описание: описывают нумерованный список. Начальный тег: необходим Конечный тег: необходим Определения атрибутов: type = 1 | a| A| i| I – задает стиль меток для данного списка: 1(арабские цифры, по умолчанию), a (латинский алфавит, нижний регистр) или A (латинский алфавит, верхний регистр), i (римский алфавит, нижний регистр), I (римский алфавит, верхний регистр). start = number – устанавливает номер первого элемента упорядоченного списка. По умолчанию это "1". Заметьте, что, хотя значением этого атрибута является целое число, соответствующие метки могут быть нечисловыми.
Каждый элемент обоих списков должен быть определен тэгом <LI>. Элемент нумерованного и ненумерованного списков: <L I >. Описание: описывают элемент списка. Начальный тег: необходим Конечный тег: не обязателен Определения атрибутов: value = число – устанавливает номер текущего элемента списка. Заметьте, что, хотя значением этого атрибута является целое число, соответствующие метки могут быть нечисловыми (см. атрибут start).
Примеры:
Задания.
Кратко о себе: 1. Фамилия 2. Имя 3. Отчество 4. Дата рождения. 5. Место рождения. 6. Факультет. 7. Группа. 8. Хобби: · Первый интерес · Второй интерес · Третий интерес 9. Знание компьютера:
o первая программа o вторая программа o третья программа
Лабораторная работа №4 «Работа со ссылками» Цели:
1. Основные сведения. Существует три типа ссылок: внутристраничные – они задают переходы в пределах одной страницы; внутрисистемные – ссылки между страницами в пределах одного и того же сервера; и межсистемные – ссылки на страницы, расположенные на удаленных узлах Web. Для определения ссылок предназначен специальный тег, который называется Anchor (якорь). Элемент А. Описание: определяет ссылку или якорь. Начальный тег: необходим Конечный тег: необходим Определения атрибутов: name = “строка” – именует текущий якорь, который может стать якорем назначения для другой гиперссылки. Значением этого атрибута должно быть уникальное имя якоря. Областью видимости этого имени является текущий документ. href = “строка” – определяет размещение ресурса Web, определяя таким образом ссылку с текущего элемента на якорь назначения, определённый этим атрибутом. Примеры:
Цвет ссылки можно задать при помощи атрибутов тэга BODY: link = “color” – устанавливает цвет непосещённых гиперссылок. vlink = “color” – устанавливает цвет посещённых гиперссылок. alink = “color” – устанавливает цвет гиперссылок при выборе пользователем. Пример:
Для указания ссылки на электронный ящик в значение атрибута href должно быть “mailto:имя_электронного_ящика”. Пример:
1.1. Внутристраничные ссылки: 1.1.1. Создать имя (метку) для точки назначения, в которую должен осуществляться переход. Метка создается с помощью тега якоря, используя его атрибут NAME (например, <A NAME=”info”> Дополнительная информация </A>). Фраза "Дополнительная информация" при этом никак не будут выделены в тексте документа. 1.1.2. Для создания гиперссылки на эту точку документа используется тег <A> с атрибутом HREF=, при этом к имени якоря присоединяется знак #: <A HREF=”#info”> Просмотр дополнительной информации </A>. Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента (в нашем случае фразы Просмотр дополнительной информации), при нажатии на который произойдет переход к строчке Дополнительна информация. 1.2. Внутрисистемные ссылки: 1.2.1. В файле, в который мы хотим перейти необходимо создать метку аналогично п. 1.1.1. 1.2.2. Создать гиперссылку аналогично п. 1.1.2, только имя якоря присоединяется к имени файла через знак # (Кратко о моих увлечениях и хобби можно посмотреть <A HREF=”obomne.html#info”> здесь </A>). При нажатии на выделенный фрагмент произойдет переход строчке #info в файле с именем obomne.html. 1.2.3. Задание: В файл index. html добавить абзац «Кратко о моих увлечениях и хобби можно посмотреть здесь» после абзаца со словами «Еще мы изучаем математику …». 1.2.4. В начале файла obomne. html фразу «Кратко о себе» заключить в теги < A NAME=” info”> и < A>. 1.2.5. В документе main. html слово «здесь» оформить гиперссылкой на документ obomne. html на якорь «info» 1.2.6. Изменить цвет непосещенных гиперссылок на красный, а посещенных на черный. 1.2.7. Опробовать действие гиперссылки. 1.2.8. В файл obomne. html внизу страницы поместить абзац, состоящий из одного слова «Назад», выровненного по центру. 1.2.9. Организовать обратный переход. 1.3. Межсистемные ссылки. Используя эти ссылки можно установить связь с любой страницей на любом узле Web. 1.3.1. В этом случае необходимо создать только гиперссылку, например, ссылка на сервер фирмы Microsoft выглядит следующем образом: <A HREF="http://www. microsoft. com"> Переход на сервер компании Microsoft </ A>. При нажатии на выделенный фрагмент произойдет переход на сервер фирмы Microsoft. 1.3.2. Задание: в документ main. html добавить абзац «Здесь вы можете посмотреть сервер Челябинского государственного педагогического университета». 1.3.3. Оформить абзац по своему усмотрению. 1.3.4. Оформить абзац как гиперссылку на адрес http:// www. preco. ru. 1.3.5. Адрес e - mail внизу страницы сделать ссылкой. Теперь пользователь сможет отправлять электронные письма по этому адресу. 1.3.6. В документе obomne. html добавить гиперссылку на сервер Челябинского государственного педагогического университета и отправку электронной почты. Лабораторная работа №5 «Графика и мультимедиа»
Цели:
1. Изображения в HTML-документе. Вставка изображения в HTML-страницу осуществляется с помощью тэга <IMG>. Тэг < IMG>. Описание: внедряет изображение в текущий документ в месте определения элемента. Начальный тег: необходим. Конечный тег: запрещен. Определения атрибутов: src = “строка” – задающая путь в структуре каталогов до файла с изображением (наиболее распространённые форматы изображений: GIF, JPEG и PNG); alt = “строка” – определяет альтернативный текст (который появляется при наведении курсора мыши на изображение); width = “число” – определяет ширину объекта (изображения); height = “число” – определяет высоту объекта. Для уменьшения времени загрузки страницы с графикой полезно указывать размер изображения. Если он известен еще до загрузки страницы, то браузер может отвести рамку для картинки, а затем загружать текст на страницу. Пока загружается графика, посетитель страницы может начать читать текст. border = “число” – определяет ширину рамки вокруг объекта; align = “bottom|middle|top|left|right” – определяет позицию объекта по отношению к окружающему тексту (bottom – низ объекта должен быть выровнен вертикально по текущей базовой линии (по умолчанию), middle – центр объекта должен быть выровнен вертикально по текущей базовой линии, top - верх объекта должен быть выровнен вертикально по верхней границе текущей строки, left – прижимает объект к левому краю, right – прижимает объект к правому краю). Примеры:
1.1. Задание: 1.1.1. В графическом редакторе нарисовать эмблему Вашей специальности или колледжа и сохранить его под именем emblem. jpg в Вашей папке. 1.1.2. В файл index. html вверху страницы по середине вставить картинку emblem. jpg и ее подписать «Эмблема колледжа (или специальности) …», ширина рамки – 5 пикселов. 1.1.3. Внизу страницы расположить фотографию Колледжа (файл College.jpg). Установить соответствующую высоту, ширину и толщину рамки, выравнивание по левому краю и рядом по середине фотографию, сделать подпись «Колледж Права и экономики». 1.1.4. В броузере отключить отображение графики (используя систему помощи броузера) и заново просмотреть созданный документ. 1.1.5. Нарисовать в графическом редакторе рисунок, в котором красиво написать «Назад». 1.1.6. Создать новый документ, назвав который photos. html, где разместите свою фотографию и сделать подпись к ней. Внизу страницы по середине сделать надпись «Назад», которую оформить в виде гиперссылки на документ index. html. 1.1.7. В документе index. html сделать гиперссылку на файл photos. html, добавив абзац «Здесь вы можете посмотреть мою фотографию». 1.1.8. В документе photos. html внизу страницы рядом с надписью «Назад» расположить картинку, которую оформить в виде гиперссылки на главную страницу. 2. Создание анимированных gif -файлов на примере Corel Photo - Paint. 2.1. Создать ролик, в котором буква за буквой появляется надпись «Группа …» (название Вашей группы), для этого: 2.1.1. Запустите графический редактор Corel Photo- Paint. 2.1.2. Выберите пункт меню Файл|Новый. 2.1.3. Установите размеры изображения 400 x50 пикселов, режим – 8-ми битная палитра, цвет фона установите по своему усмотрению, поставьте флажок «Создать фильм», количество кадров оставьте равным 1. 2.1.4. Выбрать инструмент текст и в левом нижнем углу написать заглавную букву «Ф». Установить цвет и размер буквы. 2.1.5. Выделить букву и выполнить команду меню Объект|Комбинировать->Склеить объекты с фоном. 2.1.6. Выполнить команду меню Фильм|Вставить кадр. Отметить опцию «Копировать текущий кадр» и нажать ОК. Таким образом появится второй кадр точно такой же как первый. 2.1.7. На новый кадр добавить следующую букву другого цвета (можно ее расположить по дуге, относительно других букв). Перейти к п. 2.1.5. 2.1.8. Аналогично выполнить действия для каждой буквы. 2.1.9. После создания последнего кадра. Сохранить документ как GIF. 2.2. Добавьте изображение на все страницы вверху. 3. Звук и видео. Вы можете добавить на свою страничку звуки или видеоклипы. Они могут запускаться автоматически при загрузке странички. Для этого используется тег <EMBED>, который предназначен для встраивания объектов в документ. Описание: внедряет объект текущий документ в месте определения элемента. Начальный тег: необходим. Конечный тег: необходим. Определения атрибутов: src = “строка” – задающая путь в структуре каталогов до файла с изображением (наиболее распространённые форматы изображений: GIF, JPEG и PNG); autostart = “true|false” – определяет автозапуск звука или видеоклипа; repeat = “true|false” – определяет после проигрывания записи начинать ли заново; width = “число” – определяет ширину объекта (изображения); height = “число” – определяет высоту объекта. border = “число” – определяет ширину рамки вокруг объекта; align = “center|left|right” – расположение пульта управления. Примеры:
3.1.1. Задание: 3.1.1.1. На жестком диске найти файлы с разрешением avi и скопировать один из них в свою папку. 3.1.1.2. Поместить на страничку выбранное видео. Практическая работа №1 «Работа с каскадными таблицами стилей»
Цели:
Задание Оформить подготовленный структурированный гипертекст, представленный в файле index.html в соответствии со стилем представленным на рисунке index.bmp
При выполнении работы допускается использовать «песочницу» http://cssdesk.com/ и справочник http://htmlbook.ru/css
Для подробного освоения темы по «margin» и «padding» рекомендуется прочитать: http://habrahabr.ru/blogs/css/121810/ http://habrahabr.ru/blogs/css/123250/
Исходный HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Template</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="all"> @import "style.css"; </style> </head> <body> <div class="content"> <div class="toph"></div> <div class="right"> <div class="title">GREY</div> <div class="nav"> <ul> <li><a href=#>HOME</a></li> <li><a href=#>ARTICLES</a></li> <li><a href=#>GALLERY</a></li> <li><a href=#>AFFILIATES</a></li> <li><a href=#>SUPPORT</a></li> <li><a href=#>CONTACT</a></li> </ul> </div> <h2>Top Articles:</h2> <ul> <li><a href=#>NoHeader Template</a></li> <li><a href=#>Consectetuer adipiscing elit</a></li> <li><a href=#>Lorem ipsum dolor sit amet</a></li> <li><a href=#>dolor sit amet consectet</a></li> </ul> <hr /> <h2>Links</h2> <ul> <li><a href=#>any.com</a></li> <li><a href="htmlbook.ru/samcss">htmlbook.ru/samcss</a></li> </ul> <hr /> </div> <div class="center"> <h2><a href=#>Try sNews 1.4!</a></h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer euismod ante non diam. Sed eleifend odio sed quam. Sed vulputate, <a href=#>turpis at tincidunt</a> porttitor, est elit consequat metus, non dignissim augue mauris quis arcu. Phasellus faucibus blandit eros. Curabitur porttitor ante non est. Maecenas dolor. Aenean egestas sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed suscipit, nisi sit amet pharetra malesuada, sem velit laoreet sem, vitae iaculis diam neque consequat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt eros non quam. Mauris a magna sit amet libero accumsan auctor. Aenean nec urna non dui lobortis viverra... <p class="date">Posted by Avenir <img src="more.gif" alt="" /> <a href=#>Read more</a> <img src="comment.gif" alt="" /> <a href=#>Comments (2)</a> <img src="timeicon.gif" alt="" /> 21.02.</p> <br /> <h2><a href=#>Heading Item</a></h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer euismod ante non diam. Sed eleifend odio sed quam. Sed vulputate, <a href=#>turpis at tincidunt</a> porttitor, est elit consequat metus, non dignissim augue mauris quis arcu. Phasellus faucibus blandit eros. <p class="date">Posted by James <img src="more.gif" alt="" /> <a href=#>Read more</a> <img src="comment.gif" alt="" /> <a href=#>Comments (7)</a> <img src="timeicon.gif" alt="" /> 18.01.</p> <br /> <div class="boxad"> Your Ads here...sNews is a completly free PHP and MySQL driven tool for publishing and maintaining news articles on a website.</div> </div> <div class="footer"></div> </div> </body> </html>
Требуемый стиль:
Ход работы 1. Для селектора «body»: - установить цвет фона тела страницы #7D8085 используя свойство «background» селектора «body»; - установить шрифт тела страницы 74% Arial, Sans-Serif используя свойство «font»; 2. Для селектора (класса) «.toph»: - установить неповторяющийся фоновый рисунок «top.jpg», без полей, высотой 39px, с выравниванием по центру используя свойства «background», «height», «margin», «padding»; 3. Для селектора (класса) «.content»: - установить повторяющийся фоновый рисунок «bg.jpg», без полей, шириной 800px, с выравниванием по центру используя свойства «background», «width», «margin», «padding»; 4. Для селектора (класса) «.title»: - установить неповторяющийся фоновый рисунок «logo.jpg» c выравниванием по левой стороне используя свойство «background»; - с полями от верхнего края 10px, от левого 40px, высотой 28px используя свойства «height», «padding»; - установить размер шрифта 140%, полужирный, цвет #F29900 используя свойство «font»; 5. Для селектора (класса) «.right»: - установить обтекание слева используя свойство «float»; - с отступом от правого края 15px, и полем от правого края 1em используя свойства «margin», «padding»; - установить размер шрифта 95%, полужирный, используя свойство «font»; - установить ширину слоя 170px, используя свойство «width»; 6. Для селектора (класса) «.footer»: - установить запрет на обтекание одновременно с правого и левого края используя свойство «clear»; - установить неповторяющийся фоновый рисунок «bot.jpg» c выравниванием по центру стороне используя свойство «background»; - установить выравнивание текста по центру используя свойство «text-align»; - установить высоту слоя в 37px, используя свойство «height»; - установить автоматическую ширину слоя «auto», используя свойство «width»; 7. Для селектора (класса) «.center»: - установить обтекание справа, используя свойство «float»; - установить ширину слоя 530px, используя свойство «width»; - установить размер шрифта 95%, полужирный, используя свойство «font»; - установить цвет текста #FFF; - установить поля и отступы соответственно «margin: 0px 0 5px 35px; padding: 0;»; 8. Установить цвет ссылок для центрального блока: - цвет основной ссылки #F29900 используя селекторы «.center a»; - цвет ссылки под курсором #FFF используя селекторы «.center a:hover»; 9. Установить для блока «date»: - цвет основного текста #ccc - выравнивание текста по правому краю, используя свойство «text» - поля и отступы соответственно «margin: 4px 0 5px 0; padding: 0.4em 0 0 0;» - верхнюю границу блока толщиной в 1px цветом #555, используя свойство «border»; 10. Установить цвет ссылки в #ccc, используя свойство «color» селектора «.date a»; 11. Установить цвет ссылки в #7D8085, используя свойство «color» селектора «.right a»; 12. Установить цвет тегов параграфа и ссылок в #888, используя свойство «color» селекторов «p» и «а»; 13. Для селектора «а»: - установить наследование фона, используя свойство «background» с параметром «inherit»; - выключить стили текста, используя свойство «text-decoration»; 14. Для селектора «p» установить отступы и поля соответственно «margin: 0 0 5px 0; padding: 0;» 15. Для селектора «hr»: - установить высоту 1px; - установить основной и фоновый цвет в #eee; - убрать «border»; 16. Для селектора заголовка «h1»: - убрать отступы и поля; - установить цвет в #FFF; - установить жирный шрифт размера 1.8em, гарнитур Arial, Sans-Serif; - установить наследование фона, используя свойство «background» с параметром «inherit»; -установить свойство letter-spacing равным «-1px»; 17. Установить цвет для ссылок «а» находящихся в заголовке «h1» в #FFF, и установить для них наследование фона. 18. Для селектора заголовка «h2»: - установить наследование цвета фона, используя свойство «background» с параметром «inherit»; - установить отступы и поля согласно «margin: 10px 0 10px 0; padding:0;» - установить основной цвет в #F29900; - установить размер шрифта 140%, жирный; 19. Установить цвет для ссылок «а» находящихся в заголовке «h2» в #F29955. Для ссылок под курсором установить тот же цвет и убрать подчёркивание. 20. Применить стили элементов списка согласно инструкциям и вставить комментарии действия свойств: ul { margin: 5px 0 20px 15px; padding: 0; list-style: none; } li { list-style-type: square; color: #F29900; margin: 0 0 0px 0; padding: 0 0 0 0px; } li a { color: #7D8085; } li a:hover { color: #F29900; }
21. Выполнить применение указанных стилей тремя методами: связанным, глобальным и внутренним
22. Дополнительно: - рассмотреть работу базовых макетов построения сайта представленных в http://htmlbook.ru/layout - ознакомиться с материалами статьи http://habrahabr.ru/blogs/css/126207/ Практическая работа №2 «Экспорт стилей и валидация» Цели:
Ход работы Используя материал предыдущей работы выполнить следующее задание: 1. Сменить заголовок с «GRAY» на «CSS», подобрать логотип. 2. Перенести из учебника материал, по числу пунктов меню начиная с введения. 3. Выполнить хотя бы одно абсолютное и относительное позиционирование (http://ru.html.net/tutorials/css/lesson14.php). 4. Сделать хотя бы один плавающий блок – картинку (см. http://ru.html.net/tutorials/css/lesson13.php) 5. Сделать наслоение (http://ru.html.net/tutorials/css/lesson15.php) 6. Указать у всех используемых шрифтов родовые имена и объяснить зачем это нужно. (http://ru.html.net/tutorials/css/lesson4.php) 7. Выполнить экспорт стилей в файл и осуществить его подключение 8. Выполнить валидацию файла стиля (см. http://ru.html.net/tutorials/css/lesson16.php) Лабораторная работа №1 «Знакомство с синтаксисом языка» Цели:
Специальные
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Последнее изменение этой страницы: 2021-05-12; просмотров: 218; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.145.8.222 (0.345 с.) |