Создание индивидуального сайта
Краткое сожержание материала:
ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ
ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ
КЕМЕРОВСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
Математический факультет
Кафедра ЮНЕСКО по новым информационным технологиям
Реферат
«Создание индивидуального сайта»
студента 5 курса, группы М-064
Ткаченко Ивана Сергеевича
Специальность - 010501
«Прикладная математика и информатика»
Кемерово 2010
Содержание
- Цель работы
- Введение
- 1 Программные средства, используемые при выполнении работы
- 2 Структура сайта
- 3 Основные средства, используемые для создания сайта
- 4 Язык HTML
- 5 Структура HTML-документа
- 6 Таблица стилей
- 7 JavaScript
- Заключение
- Список литературы
Цель работы
Целью работы является создание индивидуального сайта с использованием языка гипертекстовой разметки HTML и языка скриптов JavaScript, а также размещение его на сервере математического факультета КемГУ.
Требования:
1. Наличие форматированного текста, таблиц и других основных элементов языка HTML;
2. Наличие резюме о студенте;
3. Отражение отношения автора к какой-нибудь интересной ему тематике (хобби);
4. Размер сайта должен составлять не менее 3-5 HTML-страниц;
5. Наличие понятной системы навигации.
Введение
Цель лабораторной работы заключалась в самостоятельном создании информационного ресурса и его размещении на сервере математического факультета КемГУ. Для дизайна сайта была выбран фон осенней тематики. Сайт содержит информацию об авторе, его резюме и немного информации об электрогитарах (общие сведения, приёмы игры и необходимое оборудование).
1 Программные средства, используемые при выполнении работы
ь Adobe Dreamweaver CS3
ь Adobe Photoshop CS3
ь Windows Notepad 6.1
ь Internet Explorer 9 beta
ь Internet Explorer 7.0 (portable)
ь Mozilla Firefox 3.6.10
ь Google Chrome 6.0.472.63
ь Opera 10.63
ь Denwer
2 Структура сайта
Сайт создан с помощью языка разметки гипертекста HTML. Также были использованы каскадная таблица стилей CSS и язык скриптов JavaScript. Сайт состоит из 6 HTML-страниц. Каждая страница представляет собой объединение четырех логических блоков: «шапка» сайта (содержит название каждого из разделов), левая часть (содержит меню навигации и часы), контентная часть (содержит основной контент) и «подвал» (содержит информацию о разработчике сайта). Навигация на сайте выполнена в виде списка гиперссылок, расположенных в левом блоке страницы.
рисунок 1 - Структура сайта
На страницах сайта содержится информация об авторе, его резюме, а также информация, отражающая увлечения автора. Реализованы два сценария на языке JavaScript: цифровые часы и отключение правой кнопки мыши на некоторых страницах. Для дизайна использованы изображения осенней тематики.
3 Основные средства, используемые для создания сайта
Язык HTML
HTML -- это теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками -- тегами. Все теги начинаются с открывающей скобки “ < ”, за которой следует текст, определяющий содержание тега. Оканчивается тег закрывающейся скобкой “ > ”. Теги бывают начальными (открывающими) и конечными (закрывающими). Конечные теги начинаются со знака “ / ”.
Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге. Если какие-либо из тегов непонятны браузеру, то при анализе документа они игнорируются.
4 Структура HTML-документа
Между тегами <html></html> находится текст, определяющий содержимое HTML-страницы. Все, что между этими двумя тегами интерпретируется браузером в соответствии с правилами языка HTML. Исходный текст страницы делится на заголовок (Head) и тело (Body). Заголовок описывается двумя тегами <head></head>, но впрочем, если в нем нет необходимости, его можно не описывать, тогда исходный текст будет состоять только из тела. Некоторые теги могут располагаться только в заголовке, например <meta>, <title>. Наиболее часто используемый в заголовке тег - <title></title>. Этот тег определяет название страницы. Оно пишется в верхней части окна браузера. Также в заголовке подключается таблица стилей.
Тело страницы описывается тегами <body></body>. В теле страницы располагается содержательная и видимая часть документа. Здесь могут присутствовать следующие элементы:
· Форматированный текст;
· Графические изображения;
· Таблицы;
· Гиперссылки;
· Тег блока <div>;
· Скрипты.
В подключаемой таблице стилей «style.css» для всех элементов тела страницы определены свойства, такие как цвет текста, фон блоков и другие.
Для форматирования текста используются следующие теги:
· <p> - параграф;
· <h1> - заголовок первого уровня;
· <ul> - неупорядоченный (маркированный) список;
· <li> - элемент списка;
· <strong> - жирный текст.
Для добавления изображений используется тег <img>.
Некоторые атрибуты тега:
· src - URL-адрес файла с изображением;
· align - выравнивание изображение относительно текста или других элементов страницы;
· vspace - размер отступа от изображения по вертикали;
· hspace - размер отступа от изображения по горизонтали;
· width - ширина изображения;
· height - высота изображения;
· border - толщину рамки вокруг изображения.
Таблицы формируются при помощи тега <table>. Тегом <tr> определяется строка таблицы, тег <td> определяет отдельную ячейку в таблице. Строки, столбцы таблицы должны быть вложенными в неё. Допускается вложение одной таблицы в другую, соединение нескольких строк или столбцов.
Используемые атрибуты, применимые к таблицам:
· align - выравнивание таблицы относительно документа;
· width - ширина таблицы;
· cellspacing - расстояние между ячейками таблицы;
· cellpadding - расстояние между содержимым ячейки и ее рамкой;
· border - ширина рамки в пикселах;
· border-color - цвет рамки таблицы;
· valign - выравнивание текста в ячейке по вертикали;
· colspan - соединение нескольких ячеек.
В проекте таблица используется для размещения изображений должным образом.
Гиперссылка -- фрагмент HTML-документа и его базовый элемент, указывающий на другой файл, который может быть расположен в Интернет и содержащая полный путь (URL) к этому файлу. Гиперссылка -- для пользователя -- графическое изображение или текст на сайте, в письме электронной почты или в каком-либо электронном документе, устанавливающие связь и позволяющие переходить к другим объектам Интернет.
Для определения ссылки используется тег <a…></a>. Ссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указателем ссылки может быть слово, группа слов или изображение. Адресной частью ссылки является адрес Web-страницы, которая будет загружена при щелчке кнопкой мыши на указателе.
Тег <div> является элементом уровня блока, служащим для выделения фрагмента документа. Целью этого выделения является управление параметрами данного фрагмента, которое выполняется с помощью стилей.
5 Таблица стилей
Для сайта разработан CSS-файл, так называема...
Создание сайта "Кафедра физического воспитания"
Выбор инструментальных и программных средств для создания сайта. Структура программного продукта. Создание сайта при помощи программы WordPress. Тести...
Создание сайта учителя в системе uCoz
Проектирование сайта учителя в системе Ucoz с учетом особенностей педагогической деятельности. Обновление и пополнение содержимого сайта. Регистрация...
Разработка брифа на создание сайта и создание примеров элементов сайта Отель "Веллнесс"
Изучение роли информационно-коммуникационных технологий в гостиничного индустрии. Виртуальные представительства реальных отелей в сети Интернет. Основ...
Создание web-сайта по автосалону "Лада-Премьер"
Создание web-форума по автомобильной тематике: модель web-сайта, методы решения, web-интерфейс и его взаимодействие с форумом. Описание архитектуры we...
Создание и внедрение сайта в фирму ИП Бережков
Создание современного конкурентоспособного сайта компании. Выбор базовой системы программного обеспечения. Описание работы сайта и пользовательского и...
