LAB4 Степная Е. В. (Лабораторная работа 4)

МОСКОВСКИЙ ЭНЕРГЕТИЧЕСКИЙ ИНСТИТУТ

Лабораторная работа №4

По дисциплине: «Вычислительные машины, системы и сети»

На тему: «Применение каскадных таблиц стилей (CSS)»

Выполнила:

Степная Е. В.

А-13-08

Проверил:

Куриленко И. Е.

2012 г.

Технология CSS

CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами.

HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет бóльшие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра).

HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.

Фундаментальная модель CSS:

Применение CSS к HTML-документу

Есть три способа применить правила CSS к HTML-документу.

Метод 1: Инлайн/In-line (атрибут style)

Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:

Example

This is a red page

Метод 2: Внутренний (тэг style)

Второй способ вставки CSS-кодов - HTML-тэг . Например:

Example

body {background-color: #FF0000;}

This is a red page

Метод 3: Внешний (ссылка на таблицу стилей)

Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей.

Внешняя таблица стилей это просто текстовый файл с расширением .css. Можно поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.

Практическая часть:

Главная страница

Исходный код:

Лабораторная работа №3

Обо мне

Дисциплина: Вычислительные машины, системы и сети

Тема: Разработка простой WEB-страницы

Выполнила: Степная Екатерина

Проверил: Куриленко И.Е.

Бакалаврская работа

Формула

Обо мне

Исходный код

Обо мне

Лабораторная работа №3

Обо мне

Меня зовут Катя. Мне 21 год. Живу в Москве. В 2008 году я закончила школу с углубленным изучением иностранных языков. Несмотря на то, что основным предметом был английский, больше всего я любила информатику. В итоге после 10 замечательных школьных лет решила поступить в МЭИ на специальность «Прикладная математика». Я долго думала, какой вуз мне выбрать, но тот факт, что МЭИ является институтом, в котором учились мои родители оказал на меня некоторое влияние.

В прошлом году я поняла, что мне хочется научиться применять свои знания на практике и решила устроиться на работу. С тех пор я работаю программистом 1С. Не могу сказать, что эта работа дается мне с легкостью, но я люблю ее и верю, что упорство и труд помогут мне вырасти профессионально. К тому же мне нравится здешний коллектив: всегда помогут и подскажут, если что.

Бакалаврская работа

Формула

На главную

Бакалаврская работа

Исходный код

Бакалаврская работа

Лабораторная работа №3

Обо мне

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

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

Немного о самом приложении:

Первое что видит перед собой пользователь, запуская приложение – форма с входными параметрами, в которой ему необходимо указать:

• текущее время (подставляется автоматически);
• время, в которое он хочет быть в точке окончания маршрута;
• его текущее местоположение;
• точку окончания маршрута;
• сумму, которую он хочет потратить;
• время, которое он собирается потратить;
• тип досуга.

При выборе улицы, пользователю предоставляется возможность выбрать ее из списка улиц, имеющихся в базе:

Допустим, мы хотим пойти на выставку, выбираем тип досуга «Выставка», указываем сумму, которую собираемся потратить, определяем время, нажимаем на кнопку «ок». Появляется форма, в которой предлагают выбрать какой вид выставки, вы хотите посетить, нажимаем «ок».

На основе входных данных программа делается запрос и в новой форме составляется результат:

Бакалаврская работа

Формула

На главную

Формула

Исходный код

Формула

Лабораторная работа №3

Обо мне

r = ½at²+v₀t+r₀

Бакалаврская работа

Формула

На главную

Файл CSS(код):

body {

background-image: url('cream14.jpg');

}

/*Стиль таблицы*/

table

{

font-family: "Times New Roman" , Times, serif;

font-size: large;

text-align: justify;

width: 100%;

}

/*стиль коричневых ячеек*/

.bg

{

background-color:#663300;

}

/*стиль ячеек с белыми надписями*/

.td_brown

{

color: #FFFFCC;

text-align: center;

font-size: x-large;

}

/*Стиль ячеек с процентами*/

.bg_brown

{

background-color:#663300;

width:15%;

}

/*стиль строк*/

tr

{

height: 15px;

}

/*стиль оформления обычной ссылки*/

a:link

{

color:#FFFFCC;

}

/*стиль оформления ссылки в момент нажатия*/

a:active

{

color:#000;

}

/*Стиль оформления посещенной ссылки*/

a:visited

{

color: #FFFFCC;

}

/*Стиль ссылки при наведении*/

a:hover

{

color:#8EBFE5;

}

/*Просто ссылка*/

a

{

text-decoration: none;

}

/*Стиль контента*/

.td_content

{

padding-right: 4px;

padding-left: 4px;

}

/*Стиль для формулы*/

#p_formula

{

font-family: 'Minion Pro';

font-weight: bold;

font-size: x-large;

padding-left: 4px;

}

/*Стиль отдельных кусков текста*/

span

{

font-style: italic;

}