
- •Реферат
- •Содержание
- •Раздел 1 теоретические основы разработки web-сайта 7
- •Раздел 2 разработка web-сайта 24
- •Раздел 3 проектирование web-сайта 33
- •Раздел 4 охрана труда 58
- •Введение
- •Раздел 1 теоретические основы разработки web-сайта
- •Обоснование необходимости создания web-сайта
- •Понятиеweb-сайта
- •Классификацияweb-сайтов
- •По содержанию
- •По виду
- •Основные языкиweb-программирования
- •JavaScript
- •Системы управления контентом (cms)
- •КлассификацияCms
- •1.5.3WordPress
- •1С-Битрикс
- •Основы дизайнаweb-сайта
- •1.6.3 Дизайн сайта
- •1.6.2 Дизайн логотипа
- •1.7 Вывод по разделу 1
- •Раздел 2 разработкаweb-сайта
- •2.1 Обоснование выбранных технологий при созданииweb-сайта
- •2.1.1 Анализ и выбор графики при создании логотипа
- •2.1.1.1 Преимущества использования векторной графики для создания логотипа
- •2.1.2 Анализ и выбор графики при создании дизайнаweb-сайта
- •2.1.3 Анализ и выбор графического редактора для логотипа
- •2.1.3.1 CorelDraw
- •2.1.3.2 AdobeIllustrator
- •2.1.3.3 Сравнение CorelDraWиAdobeIllustrator
- •2.1.4 Анализ и выбор графического редактора для дизайнаweb-сайта
- •2.1.5 Анализ и выборhtml-редактора
- •2.1.6 Анализ и выборCms
- •2.1.6.1 1С-Битрикс
- •2.1.6.2 Umi cms
- •2.2 Выводы по разделу 2
- •Раздел 3 проектированиеweb-сайта
- •3.1 Изучение бренда
- •3.2 Целевая аудитория
- •3.3 Исследование рынка
- •3.4 Прототипweb-сайта
- •3.4.1 Выбор типаweb-сайта
- •3.4.2 Выбор разметкиweb-сайта
- •3.4.3 Выбор цветовой схемыweb-сайта
- •3.4.4 Прототип логотипа web-сайта
- •3.4.4.1 Изучение логотипов фирм-конкурентов
- •3.4.4.2 Концепция и эскиз
- •3.5 Дизайн сайта
- •3.6 Дизайн логотипа
- •3.7 Интерактивный прототип
- •3.8 Верстка сайта
- •3.8.1 Структура xslt документа
- •3.8.2 Стили сайта
- •3.8.3Php
- •3.8.4 Java Script
- •3.9 Создание страниц сайта вUmi.Cms
- •3.10 Отладка работы сайта
- •3.5 Выводы по разделу 3
- •Раздел 4 охрана труда
- •4.1. Правовые и организационные вопросы охраны труда
- •4.1.1. Виды ответственности
- •4.1.2. Организация обучения безопасности труда
- •4.1.2.1. Обучение и проверка знаний руководителей и специалистов
- •4.2. Оценка условий труда
- •4.2.1 Требования к помещениям для работы с пэвм
- •4.2.2. Требования к уровням шума и вибрации на рабочих местах, оборудованных пэвм
- •4.2.3. Общие требования к организации рабочих мест пользователей пэвм
- •Заключение
- •Список использованных источников
3.8.2 Стили сайта
Весь внешний вид сайта описывается в файле setinstyle.css, который хранится на сервере в папкеcss/cms.
Первыми описываются глобальные селекторы, такие как htmlиbody. Их следует обнулить т.е. указать минимальные значения для отступов и других свойств. Делается это для того, чтобы браузеры, которые имеют собственныеcssнастройки, не изменили стиль сайта.
Далее указываются настройки для общих селекторов, которые не используют классы. Это такие селекторы как p– абзац,h1,h2,h3,h4 – заголовки разных уровней,a– ссылки,a:hover– ссылки при наведении мышкой, и др. Здесь указываются параметры для текста и отступов:
Margin – внешний отступ
Padding – внутренний отступ
Color– цвет текста
Font-size– размер текста и др.
В стилях используется селектор ul:not([class]), где :not([class]) обозначает, что стиль должен применяться ко всем тегам ul, которые не обозначены никакими классами.
Селекторы, перед которыми стоят точки обозначают классы, которые применялись к каким-либо html-тегам. Их создают, чтобы определить стиль для конкретного элемента.
В некоторых случаях необходимо к разным селекторам применить одинаковые стили. Для экономии места следует селекторы записывать через запятую.
input, textarea, select{
width: 220px; (ширина элемента)
}
Если необходимый селектор не имеет класса / идентификатора, но к нему необходимо применить свойство указываются все селекторы, начиная от родительского.
.main_menu .level-0 li:hover .level-1{
display:block; (определяет, как элемент показан)
position:absolute; (Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице)
top: 70px; (позиционирует элемент относительно верхнего края)
left: 0px; (позиционирует элемент относительно левого края)
z-index:100; (позиционирует элемент относительно осиz, т.е. наложение элементов друг на друга)
width:192px; (ширина элемента)
font-size:15px; (размер текста)
line-height:1.3em; (межстрочный интервал)
background-color:#533c29; (цвет фона)
border-top:0; (размер верхней границы)
}
3.8.3Php
На данном сайте используется форма заказа изделий, которая обрабатывается с помощью файла mail.php. Он хранится в папкеphp.
$_POST['title'] – содержит данные из поля «тема».
$_POST['mess'] – содержит данные из поля «изображение».
$_POST['name'] – содержит данные из поля «имя».
$_POST['tel'] – содержит данные из поля «телефон».
$_POST['email'] – содержит данные из поля «e-mail».
trim() - убирает все лишние пробелы и переносы строк.
htmlspecialchars() - преобразует специальные символы в HTML сущности.
substr($_POST['title'], 0, 1000) – максимальное количество допустимых знаков – 1000.
Проверка на ошибки. Если неправильно заполнены поля, то браузер отображает ошибку.
Подключение файла класса для отправки почты.
Подключение изображения, если было. Оно прикрепляется в виде картинки к телу письма.
После отправки письма браузер выводит сообщение об успешной отправке.
3.8.4 Java Script
С помощью JavaScriptна сайте реализована функция слайдера.