JavaScript – язык создания сценариев
Назначение языка JavaScript - позволить сделать Web-страничку активной. Язык JavaScript не имеет никакого отношения к языку Java, несмотря на схожее название. Java имеет очень немного средств для связи аплитов с браузером, что так необходимо разработчикам в их приложениях, в то время как JavaScript разрабатывался именно для этого. В отличие от Java, JavaScript является интерпретируемым языком. Программа на языке JavaScript размещается прямо в HTML-документе в виде исходного текста и автоматически компилируется в байт-код при загрузке документа в браузер.
Для авторов HTML-документов JavaScript представляет важный шаг вперед на пути к созданию HTML-приложений, которые взаимодействуют с пользователем. Таким образом, главной целью языка JavaScript является обеспечение активного взаимодействия HTML-документов с пользователем. Этот язык не претендует на то, чтобы быть полномасштабным языком программирования, такими как Java и Си. Скорее, он является расширением языка HTML, облегчающим работу пользователя с конкретным браузером. Важен тот факт, что JavaScript-программы действительно являются выполнимым содержимым документов: они физически находятся внутри HTML-документов, в отличие от Java-аплетов, которые существуют вне документов, их активизирующих.
Еще одна важная особенность языка JavaScript - это его объектная ориентированность. И хотя объектно-ориентированные возможности JavaScript заметно беднее, чем в С++ или Java, они все же есть в этом языке.
|
|
|
Допускается создание собственных классов, а также группирование объектов и структур данных для расширения базовых классов. С помощью конструкций JavaScript, встроенных в документы HTML, можно обрабатывать события. Эти события возникают в результате выполнения пользователем различных операций над документом HTML, загруженным в окно браузера. Это позволяет получать различные визуальные эффекты, например, изменение внешнего вида органов управления, когда над ними находится курсор мыши. Можно предварительно проверять данные, введенных пользователем в полях формы перед их отправкой для обработки на сервер Web, а также выполнять произвольные действия перед загрузкой документа HTML в окно браузера и делать другую полезную работу.
Отметим также то, что JavaScript не предназначен для создания сложных программ. Подобные задачи лучше решать с использованием других языков программирования, например, с помощью Java. Однако с помощью JavaScript можно быстро создавать активные страницы с достаточно сложным поведением. Этот язык несложен в изучении, а программы, составленные с его использованием, легко поддаются отладке.
Графический редактор AdobePhotoshop
AdobePhotoshop — многофункциональный графический редактор,разра-ботанный и распространяемый фирмой AdobeSystems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты. Несмотря на то, что изначально программа была разработана как редактор изображений для полиграфии, в данное время она широко используется и в веб-дизайне.
|
|
|
2.ПРАКТИЧЕСКАЯ ЧАСТЬ
| Главная |
| Техобслуживание |
| Услуги |
| Адрес |
| Техническое обслуживание ( ТО ) |
| Ходовая часть |
| Шиномонтаж |
| Диагностика |
| Шиномонтаж |
| Ремонт ходовой части |
| Ремонт двигателя |
| Автозапчасти |
Рис.1 Карта сайта.
Спецификация гипертекстовой схемы
2.2.1. Описание используемых стилей СSS
На своем сайте я использовала внешние стилевые таблицы CSS.
CSS-стиль макета сайта:
| html {overflow-y: scroll; overflow-x: auto; } body{ background-image:url(../img/fon.PNG); } .header_img{ width:200px; } .img-fluid { width:100%; height:100%; } .header-logo{ padding-top:100px; color:#ffffff; padding-left:40px; font-size: 28pt; font-style:italic; } .header_text1{ font-size: 20pt; color:#ffd700; } .header_zvon { padding-top:200px; padding-left:30px; padding-bottom:3px; font-weight:bold; } .header_zvon_Text{ color:#000000; font-size: 15px; background-color:#ffd700; padding:10px; border-radius: 10px; font-weight: 900; } .menu{ background-color:#282828; text-align: center; font-size:18px; margin-bottom:10px; } .menu a{ color: #ffd700; display:block; text-decoration: none; width:100%; padding-left:20px; padding-right:20px; } .menu a:hover{ background-color: #000000; border-radius: 20px 50px; } .menu ul{ margin:0; padding:0; list-style-type:none; display: inline-block; } .menu ul li{ display:inline-block; } .left_menu{ margin-left:20px; } .left_menu li { border-bottom: 1px ; margin-bottom: 10px; padding-left: 40px; padding-top: 15px; padding-bottom: 10px; background-color: #2A2A2A; border-radius:5px; } .left_menu ul { list-style-type:none; margin: 0; padding: 0; } .left_menu a{ text-decoration: none; color:white; padding:2px; display:block; } .Dia{ background-color: #fff; border-radius:5px; } .Rem{ border-radius:5px; background-color: #fff; } .Tex{ border-radius:5px; background-color: #fff; margin-bottom:5px; } .zai{ width:80%; color:#ffffff; } .zai_header{ color: gold; margin-left:30px; font-size:40px; margin-top:5px; margin-bottom:5px; } .zai_text{ margin-left:30px } .zai_text1{ margin-left:30px } .zai_hr{ border: none; background-color:gold; height: 2px; width:970px; } .vrem_header{ background-color: #2a2a2a; border-radius: 5px; padding-right: 20px; padding-left:35px; padding-top:1px; margin-left:18px; margin-bottom: 4px; } .vrem_header1{ color:Gold; font-size:20pt; line-height: 0.1px } .vrem_text{ font-size: 15px; color: #b3b3b3; line-height: 0.1px } .vrem_text2{ line-height: 0.1px; } .img_map{ width:100%; height:200px; padding-bottom:10px; } .vrem_text1{ color: #ffd700; font-size: 28px; font-weight: 600; } .o_komp_header{ color: gold; font-size:30px; padding-left:50px; } .o_komp p{ text-align:justify; color:white; } .o_kom_text{ color:white; } .ysl_header{ color:gold; font-size:30px; padding-left:50px; padding-bottom:10px; } .ysl_text{ color:white; } .footer{ background-color:gold; color:#000000; width:100%; margin-top:2px; height:50px; } .footer p{ padding-top:20px; } <!-- Техобслуживание --> .header_tex{ background-color:#000000; color: #FFFFFF; } .text_header{ font-size:28px; color:gold; padding-left:9px; } .img_tex{ width:98%; height: 250px; border-radius:2px; background-color:#000000; border:1px solid gold; margin-left: 5px; } .tex_header{ padding-left:10px; color:white; } .tex_header_text{ font-size:23px ; color:gold; text-align:center; } .contener_text{ background-color:#000000; color:white; } .tex_text{ color:white; background-color:#000000; text-align:left; } .tex_text1{ padding-left:13px; color:white; } .xod_text{ padding-left:13px; color:white; } .chin_text{ color:white; padding-left:13px; } .zag{ display: inline-block; } .tex-1{ border-radius:2px; border:1px solid gold; margin:5px; font-size:18px; width: 100%; <!-- Услуги --> } .nomer{ display: inline-block; font-size:70px; height:0px; color:Gold; padding-left:4px; } .con{ width:80%; display: inline-block; padding-left:16px; color: white; } .ysl{ color:#ffffff; margin-left:10px; width:100%; } .ysl_p_header{ font-size:35px; color:gold; width:100%; } .zag{ font-size:30px; color:gold; } .zvon { opacity: 0.5 color:#fff; font-style:italic; width: 500px; border-style:dashed ; outline: 2px solid #958282c7; padding-left:5px; padding-bottom:5px; border-radius:5px; outline-style:none; margin-left:10px; } .map_text{ color:white; width:300px; } .map_img{ width:700px; height:350px; border-radius:4px; } .map{ text-align:center; margin-top: 20px; padding-bottom:20px; } .content_button{ font-size:14px; background-color:#d7d7d7; border:none; padding:13px 22px;} .overlay{ position:fixed; display:none; top:0; width:100%; height:100%; z-index:3; background-color:rgba(0,0,0,.40); } .popup{ position: fixed; left:50%; top: 100px; width:752px; transform:translateX(-50%); background-color:#fff; } .popup-close { position:absolute; font-size:35px; color:#fff; right:-20px; top: -30px; cursor:pointer; } .popup-title{ width:100%; display:block; max-height:71px; margin: 0; background-color:#282828 ; color:gold; text-transform:uppercase; font-size:20px; text-align:center; font-weight:500px; line-height:71px; } .popup-form{ background-color:gold; padding:35px 88px 50px 88px } .popup-form-header{ font-size:20px; text-align:center; } .popup-form_ladel{ display:block; font-size:19px; font-weight:300; line-height:30px; margin-top: 20px; } .popup-form_imput{ width:265px; height:56px; border-radius:10px; border:none; } .button{ font-size:14px; background-color:#d7d7d7; border:none; padding:13px 22px; border-radius:5px; } | Горизонтальная полоса прокрутки добавляется только при необходимости Картинка Размеры логотипа Отступы Цветы Размеры Размеры Цвет Отступы Жирность текста Цвет Размер Цвет фона Отступы Закругление границы Жирность текста Цвет фона Текст по центру Размер текста Цвет текста Ширина Цвет фона Отступы Отступы Отступы Размер закругления границы Отступы Цвет Отменяет маркеры для списка Отступы Отменяет подчеркивание у ссылок Цвет Отступы Цвет фона Закругление границы Цвет фона Отсупы Ширина в % Цвет текста Цвет текста Отступы Отступы Убираем границу Высота Ширина Цвет фона Закругление границы Отступы Цвет текста Размер текста Размер текста Цвет текста Ширина Высота Отступы Цвет текста Размер текста Жирность текста Цвет текста Размер текста Текст разместить по ширите Цвет текста Размер текста Отступы Цвет фона Цвет текста Ширина Отступы высота Отступ Цвет фона Размер текста Отступы Ширина Высота Цвет фона Отступ Отступ Цвет текста Размер текста Текст по центру Цвет фона Текст слева Отступ Отступ Цвет текста Цвет текста Отступ Элемент строчно-блочный Отступ Размер текста Ширина Элемент строчно-блочный Размер текста Высота Цвет Отступ Ширина Элемент строчно-блочный Отступы Цвет текста Отступ Ширина Размер текста Цвет текста Ширина Размер текста Цвет тектса Прозрачность текста Цвет текста Курсивный текст Ширина Рамка у текста (Тире ) Размер рамки Отступы Закругление рамки Уберат границу вокруг ссылок Отступы Цвет текста Ширина Ширина высота Размер закругление границы Текст по центру Отступы Размер текста Нет границы Отступ Временно удаляет элемент из документа Отступы Ширина Высота Размещение на 3 месте Цвет тона Отступы Ширина Сдвигает элемент по горизонтали на указанное значение Размер текста Цвет текста Отступы Активирует курсор Ширина Блочный элемент Отступы Цвет фона Цвет текста Размер текста Текст по центру межстрочный интервал цвет фона Отступы Отступы Текст по центру Блочные элемент Размер текста Жирность текста Отступ Ширина Высота Убрать элемент Размер текста Цвет текста отступ |
|
|
|
|
|
|
2.2.2. Описание используемых сценариев JavaScript
Скрипт кнопки «Вверх»
| $(document).ready(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); Скриппоявленияокна <script type="text/javascript"> $(document).ready(function(){ $('.content_button').on("click",function(){ $('.overlay').show(); }); $('.popup-close').on("click",function(){ $('.overlay').hide(); }); }) </script> |
Охрана труда
С развитием научно-технического прогресса немаловажную роль играет возможность безопасного исполнения людьми своих трудовых обязанностей. В связи с этим была создана и развивается наука о безопасности труда и жизнедеятельности человека.
В соответствии с Основами законодательства Российской Федерации об охране труда устанавливаются гарантии осуществления права трудящихся на охрану труда. Обеспечивается единый порядок регулирования отношений в области охраны труда между работниками и работодателями на предприятиях, в учреждениях и организациях. Основными направлениями государственной политики в области охраны труда являются признание и обеспечение приоритета жизни и здоровья работников по отношению к результатам производственной деятельности предприятия.
А. Характеристика условий труда на рабочем месте ведущего программиста
А.1. Характеристика помещения компьютерного центра по пожароопасности.
Пожарная безопасность предусматривает такое состояние объекта, при котором исключалось бы возникновение пожара, а в случае его возникновения предотвращалось бы воздействие на людей опасных факторов пожара и обеспечивалась защита материальных ценностей.
В помещении предусмотрены средства пожаротушения (углекислотный огнетушитель), а также средства автоматического оповещения о пожаре.
А.2. Характеристика помещений по опасности поражения электрическим током.
Работа на персональном компьютере относится к работе по обслуживанию электрооборудования не электротехническим персоналом и должна вестись с соблюдением правил техники безопасности и технической эксплуатации электроустановок потребителей.
Основными мероприятиями, обеспечивающими защиту пользователя от поражения электрическим током, являются обеспечение недоступности токоведущих частей, заземление, зануление. Металлические решетки, стеллажи и другие металлические предметы в помещении должны быть заземлены.
А.3. Параметры микроклимата, характеристика выполнения работ.
На рабочем месте должны обеспечиваться оптимальные микроклиматические условия в холодный и теплый периоды года согласноГОСТ 12.1.005 - 88:
- температура воздуха на рабочем месте в холодный период года должна быть от 22 до 24 °С, а в теплый период года - от 23 до 25 °С;
- разница температуры на уровне пола и уровне головы оператора в положении сидя не должна превышать 3 °С;
- относительная влажность должна составлять 40-60 %;
- скорость движения воздуха на рабочем месте должна быть 0,1 м/с.
А.4. Характеристика освещенности рабочего места.
Посредством зрения люди воспринимают до 90% необходимой для работы информации. Помещения с постоянным пребыванием людей должны иметь, как правило, естественное освещение. Оконные проемы должны быть оборудованы регулируемыми устройствами типа жалюзи, занавеси, внешние козырьки и др.
Искусственное освещение в помещениях эксплуатации ВДТ и ПК должно осуществляться системой общего равномерного или комбинированного освещения. При выполнении зрительных работ высокой точности общая освещенность должна составлять 300 лк, а комбинированная - 750 лк. Местное освещение не должно создавать бликов на поверхности экрана и увеличивать освещенность экрана более 300 лк.
А.5. Шум на рабочем месте.
| Рис.2. Расположение дисплея на столе. |
На рабочих местах в помещениях с размещением шумных агрегатов вычислительных машин (принтеры и т.п.) уровень шума не должен превышать 75 дБА.
А.6. Излучение на рабочем месте.
Видеотерминал компьютера представляет собой источник наиболее вредных излучений, неблагоприятно сказывающихся на здоровье.
Специальное покрытие экрана монитора позволяет значительно ослабить электромагнитные поля и излучения. Желательно использовать дополнительные экранные защитные фильтры.
Б. Требования к аппаратным средствам.
Дисплей на рабочем месте оператора должен располагаться так, чтобы изображение в любой его части было различимо без необходимости поднять или опускать голову. Дисплей на рабочем месте должен быть установлен ниже уровня глаз оператора. Угол наблюдения экрана оператором относительно горизонтальной линии взгляда не должен превышать 60 градусов,как показано на рисунке 1.
Клавиатура на рабочем месте оператора должна располагаться так, чтобы обеспечивалась оптимальная видимость экрана. Клавиатура должна иметь возможность свободного перемещения. Клавиатуру следует располагать на поверхности стола на расстоянии от 100 до 300 мм от переднего края, обращенного к оператору, или на специальной регулируемой по высоте рабочей поверхности, отделенной от основной столешницы.
Все виды системных блоков должны быть надежно заземлены. Особенно это требование должно строго соблюдаться при включении компьютеров в общую локальную сеть.
Принтеры при работе создают шум, особенно матричные. Для снижения шума принтер должен устанавливаться на звукопоглощающей подставке.
Манипулятор типа «мышь» должен располагаться на рабочем столе, на специальном коврике. Поверхность манипулятора должна подбираться таким образом, чтобы ладонь полностью и непринужденно на ней лежала и указательный палец легко мог осуществить нажатие левой и правой кнопки.
В. Требования к рабочему месту.
Конструкция рабочего стола должна обеспечивать возможность размещения на рабочей поверхности необходимого комплекта оборудования и документов с учетом характера выполняемой работы. Высота рабочей поверхности стола при нерегулируемой высоте должна составлять 725 мм. Оптимальные размеры рабочей поверхности стола:глубина 800 мм и ширина 1600 мм.
Рабочий стул (кресло) должен обеспечивать поддержание физиологически рациональной рабочей позы оператора в процессе трудовой деятельности, создавая условия для изменения позы с целью снижения статического напряжения мышц шейно-плечевой области и спины, а также для исключения нарушения циркуляции крови в нижних конечностях. Рабочий стул должен быть подъемно-поворотным и регулируемым по высоте и углам наклона сидения и спинки, а также расстоянию спинки от переднего края сидения.
Г. Режим труда и отдыха
Режимы труда и отдыха при работе с ПЭВМ должны организовываться в зависимости от вида и категории трудовой деятельности.
Виды трудовой деятельности разделяются на 3 группы. В нашем случае трудовая деятельность характеризуется как группа В - творческая работа в режиме диалога с ЭВМ.
Продолжительность обеденного перерыва определяется действующим законодательством о труде и Правилами внутреннего трудового распорядка предприятия (организации, учреждения).
При 8-ми часовой рабочей смене и работе на ПЭВМ регламентированные перерывы следует устанавливать через 2 часа от начала рабочей смены и через 2 часа после обеденного перерыва продолжительностью 15 минут каждый;
При работе на ПЭВМ запрещается:
- приступать к работе на неисправной ПЭВМ.
- производить протирание влажной или мокрой салфеткой электрооборудования, находящегося под напряжением;
- допускать к работе лиц, не имеющих допуска к работе на ПЭВМ и не прошедших инструктаж по охране труда.
Заключение
Интернет уверенно завоевывает себе права общепризнанного средства массовой коммуникации и оказывает постепенно возрастающее влияние на формирование мировоззрения общества. В сети сегодня уже так много информации, что практически можно получить ответ на любой вопрос. Сеть сама по себе так устроена, что в ней нет тех коммуникационных барьеров, с которыми мы часто сталкиваемся в реальности. Именно поэтому она приобрела роль всемирного хранилища информации и превратилась в средство массовой коммуникации. Пользователи сети не только берут информацию, но и постоянно наполняют ее различными информационными ресурсами. Люди считают нормальным отдать свои знания другим. Пришло время, когда уже нет смысла таить информацию, - намного полезней и эффективней свободно обмениваться ею. На этом новом стандарте человеческого взаимодействия и построены беспредельные информационные возможности Интернета. Человечество свободно отдает свое знание в сеть и становится от этого информационно богаче.
Главное предназначение моего сайта - это предоставление информации. И, несмотря на то, что в мире существует масса других способов передачи информации, огромное количество людей сегодня выбирает именно сайт как наиболее эффективный.
В проекте реализованы поставленные задачи:
- наиболее выгодно представлена информация о услугах автосервиса;
- создан положительный имидж сайта;
- создан удобный и доступный интерфейс с использованием стилевых каскадных таблиц и сценариев JavaScript.
Цель дипломного проекта достигнута. Создан сайт с использованием каскадных таблиц cssи языка сценариевJavaScript, в котором представлена интересующая информация о услугах автосервиса.
Автосервис - это вид человеческой деятельности, направленный на удовлетворение потребностей потребителя (автовладельца) посредством оказания индивидуальных услуг. Объектами деятельности являются человек и его потребности в индивидуальных услугах.
Отечественный автомобильный сервис стремительно прогрессирует, причем в различных секторах своей деятельности. Особенно заметен рост сектора, ориентированного на работу с продукцией зарубежного производства. Всего 10-15 лет назад главная задача немногочисленных автосервисов состояла в выполнении самых простых видов работ по обслуживанию незнакомой импортной техники, например операций по замене моторного масла или тормозных колодок.
Но постоянный рост автомобильного парка обусловил увеличение производственных мощностей, т.е. увеличение числа предприятий автосервиса, повышение уровня их технической оснащенности и профессионализма работников.
Одновременно меняются требования клиентов автосервисов: они становятся более разборчивыми. В такой ситуации преимущество получают те предприятия, которые не просто предлагают услуги, но и способны обеспечить их высокое качество, соответствующее мировым стандартам. Современная рыночная экономика предъявляет принципиально иные требования к качеству продукции, работ, услуг, от которого в современном мире зависят выживание любого предприятия, его устойчивое положение на рынке товаров и услуг, т.е. уровень конкурентоспособности.
Данная тема дипломной работы, по моему мнению актуальна, так как высокое качество обслуживания автомобилей полезно обществу в целом, поскольку способствует повышению надежности автотранспорта, безопасности на дорогах, улучшению экологической обстановки в крупных городах.
Дата добавления: 2018-08-06; просмотров: 334; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!