Создание электронного пособия по web-дизайну

Автор работы: Пользователь скрыл имя, 23 Сентября 2011 в 15:09, курсовая работа

Описание работы

Задачи курсовой работы:

разработать дизайн пособия;
придумать и реализовать структуру для легкого освоения пособия;
рассмотреть JavaScript и HTML на практике;
апробировать Фреймовую структуру на web страницах.

Содержание работы

Введение 3
Глава 1. Создание интерфейса учебного пособия 4
1.1. Создание главной страницы 4
1.2. Создание меню 4
Глава 2. Возможности пособия 8
2.1. Создание фреймов 8
2.2. Работа с CSS 11
2.3. Создание слоев 12
2.4. Дата и время 13
2.5. Слайд шоу 14
2.6. If и Else 17
2.7. Массивы: функция внутри функции 19
Заключение 22
Список использованных источников и литературы 23

Скачать архив (46.00 Кб) Сколько стоит заказать работу?
Файлы: 1 файл

Курсовая.doc

— 184.00 Кб (Скачать файл)

Министерство  образования и  науки РФ

ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ 

ФГОУ  СПО «Кунгурский  сельскохозяйственный колледж» 
 
 
 
 
 
 
 
 
 
 
 
 

КУРСОВАЯ  РАБОТА

по дисциплине WEB - дизайн

Создание  электронного пособия по web-дизайну 

230103  «Автоматизированные  системы обработки информации и управления» 
 
 
 
 
 
 
 
 
 

ИСПОЛНИТЕЛЬ:

студент гр. А-492 Р.Ю.Сычёв

РУКОВОДИТЕЛЬ:

преподаватель

информационных дисциплин

А. Ю. Скорнякова 
 
 
 
 

Кунгур  2009

 

Содержание

 

Введение

 

    Не  задавались ли вы вопросом: как и с помощью чего созданы Web-страницы и мини-сайты?

    В перечне самых актуальных задач  стоит проблема недостаток информации и непонятность. Проблема огромного  количества пользователей Интернета  заключается в том, что они  мечтают о создании своих собственных сайтах, но не имеют для этого определённого образования и навыков. Цель: создать проект, помогающий преодолеть трудности начинающих создателей сайтов.

     В работе рассмотрены языки HTML и JavaScript, а так же принципы создания фреймов и их применение на практике.

     Использование данного пособия может существенно облегчить процесс изучения языков верстки сайтов. Оно позволяет самостоятельно изучить выше указанные языки.

     Задачи  курсовой работы:

  • разработать дизайн пособия;
  • придумать и реализовать структуру для легкого освоения пособия;
  • рассмотреть JavaScript и HTML на практике;
  • апробировать Фреймовую структуру на web страницах.

Глава 1. Создание интерфейса учебного пособия

1.1. Создание главной страницы

      Проект  состоит из фрейм:  меню, основной части и размещения рекламы.

      Главная страница представляет такую структуру:

    Меню  
    Основная  часть
    Место для рекламы

      Размеры фрейм заданы в пикселях, которые  закреплены для изменения, что позволяет  сохранять на 80%  вид на разных расширениях монитора.

      <frameset rows="*,57" frameborder="2" bordercolor=#000000>

      <frameset cols="240,*">

      <frame src="002.htm" name="fr1" scrolling="auto" noresize>

      <frameset rows="85,*">

      <frame src="001.htm" name="fr2" scrolling="no" noresize>

      <frame src="./gl/index.htm" name="fr3" scrolling="yes" noresize>

      </frameset>

      </frameset>

      <frame src="004.htm" name="fr4" scrolling="no" noresize>

      </frameset>

1.2. Создание меню

      Меню  разделено на две части это: ссылка главной страницы, то, что использовалось при создании пособия и непосредственно JavaScript. Так же расположена ссылка гостевой комнаты.

      <HEAD>

      <TITLE>ABC</TITLE> <META HTTP-EQUIV="fr2" CONTENT="001.html; charset=windows-1251"> 

      <link rel="stylesheet" href="style000.css" type="text/css">

      </HEAD>

      <body background="f6.gif">

      <center>

      <table width=100%  border=0 align=center>

      <tr>

                <td width=200><center><H1>.:Содержание:.<H1><hr></td>

      </tr><tr>

                <td width=200><center><a href="./gl/index.htm" target="fr3"><h3>Главная</h3></font></a><center><hr></td>

      </tr><tr>

                <td width=200><center><a href="./gl/1.htm" target="fr3"><h3>Создание фрейм</h3></a></center><hr></td>

      </tr> <tr>

                <td width=200><center><a href="./gl/2.htm" target="fr3"><h3>Работа с CSS</h3></a></center><hr></td>

      </tr><tr>

                <td width=200><center><a href="./gl/7.htm" target="fr3"><h3>Слои</h3></a></center><hr></td>

      </tr><tr>

                <td width=200><center><h2>JavaScript:<h2></center><hr></td>

      </tr><tr>

                <td width=200><center><a href="./gl/3.htm" target="fr3"><h3>Дата и время</h3></a></center><hr></td>

      </tr><tr>

                <td width=200><center><a href="./gl/4.htm" target="fr3"><h3>Слайд-шоу</h3></a></center><hr></td>

      </tr><tr>

                <td width=200><center><a href="./gl/5.htm" target="fr3"><h3>If и Elset</h3></a></center><hr></td>

      </tr><tr>

                <td width=200><center><a href="./gl/6.htm" target="fr3"><h3>массивы:

      функция внутри функции</h3></center></a>

      </td><tr>

      После списка меню расположена дата, сделанная  на JavaScript.

      <font size="4" color="Maroon"><h3><SCRIPT LANGUAGE="JavaScript">

      Now = new Date();

      var mpo = Now.getMonth();

      var mpo1 = mpo + 1

      document.write("Сегодня " + Now.getDate()+ "-"+  mpo1+ "-" + Now.getFullYear())

      </SCRIPT></h3>

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

a:link {font-family: "Times New Roman", Times, serif;

      font-style: normal;

      font-weight: bold;

      color: #000000;

      text-decoration: none;}

a:visited { font-family: "Times New Roman", Times, serif;

      font-style: normal;

      font-weight: bold;

      color: #000000;

      text-decoration: none;}

a:active { font-family: "Times New Roman", Times, serif;

      font-style:italic;

      font-weight: bold;

      color: #990000;

      text-decoration:none;}

a:hover { font-family: "Times New Roman", Times, serif;

 font-style:italic;

      font-weight: bold;

      color: #006600;

      text-decoration:none;}

h1 { font-family: "Comic Sans MS";

      font-size:30px;

      text-align: center;

      font-style: normal;

      font-weight:bold;

      color:#0C05F8;}

h2 { font-family: "Comic Sans MS";

      font-size:25px;

      text-align: center;

      font-style: normal;

      font-weight:bold;

      color:#0C05F8;} 
 
 
 
 
 
 

Глава 2. Возможности пособия

      При создании данного интерфейса учитывалось  простота в работе с пособием  и применение примеров на практике языка программирования JavaScript, создания фреймов и слоев.

2.1. Создание фреймов

       Один из способов выдать сразу несколько файлов HTML на экран пользователя – это открыть  несколько окон браузера. Другой путь состоит в том, чтобы разбить окно на несколько разделов. Эти разделы называются фреймами.

Контейнер <FRAMESET>

      Web-страница, которая разделена на фреймы, называется документом группы  фреймов. Документы группы фреймов  содержат стандартный заголовок, задаваемый тегом HEAD, но в отличии от стандартных HTML-документов, они не содержат тега BODY. Вместо него используется контейнер (т. е. парный тег) <FRAMESET>, который применяется для определения строк и столбцов отдельных фреймов, каждый из которых обозначается тегом <FRAME>.

      Внутри  контейнера <FRAMESET> ... </FRAMESET> могут располагаться только теги <FRAME> или другие контейнеры FRAMESET.

    Определение параметров кадров

      Тег <FRAMESET> имеет два главных атрибута: ROWS и COLS, задающих разбиение на строки и столбцы соответственно. Ниже приведен вид контейнера FRAMESET:

      <FRAMESET ROWS="список_значений" COLS="список_значений"> ...  </FRAMESET>

      Можно определить любое число рядов  и столбцов; необходимым условием является указание хотя бы одного из атрибутов ROWS или COLS.

      Кадр  не может быть единственным: если вы определили единственный ряд и единственный столбец, то программа просмотра проигнорирует контейнер FRAMESET, и экран останется пустым. Если определены по крайней мере два ряда или два столбца, другой атрибут может быть опущен (ему по умолчанию будет присвоено значение, равное 100%).

      Значение  атрибута ROWS или COLS представляет собой строку, содержащую список значений в пикселях, процентах или относительных единицах, разделенных запятыми. Количество рядов или столбцов кадров определяется числом этих значений.

Пример

      Для задания сетки кадров из трех рядов, высота которых 100, 240 и 140 пикселов соответственно, используйте тег

    <FRAMESET ROWS="100,240,140">

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

       
Пример

      Тег <FRAMESET ROWS="25%, 50%, 25%"> задаст три  кадра, размером по 25%, 50% и 25% от высоты окна браузера.

       Относительно точности указания размеров фреймов в процентах можно не беспокоиться: если сумма значений не равна 100%, то масштаб кадров будет пропорционально изменен.

      Задание параметров кадров в относительных  единицах выглядит примерно так:

   <FRAMESET COLS="*,2*,3*">

      Символ * обозначает пропорциональное деление окна программы просмотра. В данном примере окно будет разделено на три вертикальных кадра, первый из которых будет иметь ширину в 1/6, второй -- в 2/6 (или 1/3) и третий -- в 3/6 (или 1/2) от ширины окна браузера. Единица при указании относительных значений может быть опущена.

 

      Указание  значений атрибутов ROWS и COLS может быть и смешанным, включающим любое сочетание абсолютных размеров, процентных отношений и относительных значений, например,  <FRAMESET COLS="100,25%,*,2*">

      Здесь первому кадру присвоено абсолютное значение в 100 пикселов по ширине, второму – 25% от ширины окна. Оставшееся пространство делится между третьим и четвертым кадрами в пропорции 1 к 2.  

Информация о работе Создание электронного пособия по web-дизайну