Содержание
Теоретическая часть
Глава 1
Введение...................................................................................................................2
1.1 Что такое интернет?..........................................................................................3
1.2 Операционная система (ОС).............................................................................6
1.3 Adobe Photoshop SC5.........................................................................................8
1.4 Основы HTML и CSS......................................................................................17
1.5 Основные понятия JavaScript.........................................................................23
1.6 Joomla 2.5.........................................................................................................26
1.7 Notepad++........................................................................................................30
1.8 Front Page.........................................................................................................34
1.9 Инструкция по техники безопасности при работе над ПК ........................38
Практическая часть
Глава 2
2.1 Шаблон сайта...................................................................................................41
2.2 Резка шаблона..................................................................................................42
2.3 Верстка шаблона..............................................................................................43
2.4 Вставка Модулей и заливка шаблона на CMS Joomla.................................44
2.5 Работа с CMS Joomla.......................................................................................46
Заключение.............................................................................................................47
Введение
Моя профессия web-дизайнер + программирование, я буду заниматься графическим дизайном сайтов.
Web-дизайн — это творчество, причем творчество ярко выраженное. Именно в сфере web-дизайна я могу полностью проявить все свои способности. Никто не ограничивает меня ни в объеме, ни в содержании, никто не загоняет меня в какие-либо жесткие рамки.
Выбрал я эту профессию, потому что давно заметил желание работать за компьютером, создавать что-то интересное.
Моя работа будет заключается во-первых, в поиске заказчиков, и во-вторых, в выполнении желаемого дизайна, иногда и в создании простых и красивых сайтов. Мой опыт работы небольшой, пока я делаю несложные сайты и в процессе работы все еще учусь. Моя ближайшая цель стать профессиональным web-мастером и создавать потрясающе красивые и удобные для пользователя сайты. Для этого мне еще предстоит много учиться, но самое главное – учиться мне очень хочется!
Суть такой работы заключается в оформлении страниц сайтов так, чтобы размещенную на них информацию было удобно и приятно читать. Кроме того, к этой же сфере относится создание баннеров, открыток, электронных презентаций и прочие услуги, связанные с графикой. Причем, эта деятельность не ограничивается просторами сети, профессиональные навыки я могу применять в таких областях, как дизайн интерьера, полиграфия, наружная реклама. Одним из преимуществ профессии web-дизайнера является ее перспективность. Она доказывается тем, что в нашей стране рынок дизайнеров все еще находится на этапе становления, что говорит о том, что у новичков есть время, чтобы проявить себя, несмотря на уже имеющуюся развитую конкуренцию. Еще один плюс, который я заметил заключается в возможности исправить допущенные ошибки практически в любой момент. При этом вовсе не обязательно постоянно находиться на рабочем месте в офисе, а можно спокойно работать из дома. Необходимо лишь установить несколько программ.
1.1 Что такое интернет?
С точки зрения обычного пользователя, Интернет - это средство обмена цифровой информацией. С технической точки зрения – это миллиарды компьютеров по всему миру связанных между собой кабелями в единую Сеть. Провода соединяют континенты, миллиарды пользователей в одно целое. Интернет - это колоссальное хранилище знаний, средство обмена личным опытом и свободное СМИ.
Каждое подключенное в сеть устройство управляется протоколами. Это как языки общения между компьютерами. Интернет в корне построен на протоколе IP. Он дает цифровой адрес каждому участнику сети.
Интернет имеет очень широкие возможности. Но его базовая задача — передача информации. Одну информацию можно просто воспринимать, а можно и участвовать в ее изменении, публиковать свою. Такая динамичность дает колоссальное количество применений Интернету.
Из основных можно выделить:
- Web-серфинг
- Удаленное управление компьютерами
- Загрузка разных файлов
- Общение
- Перевод денег
- Заработок
- Просмотр новостей
WWW или Всемирная паутина
Всемирная паутина (World Wide Web) или WEB — сервис Интернета, который состоит из связанных между собой страниц, расположенных на различных компьютерах, которые подключены к Интернету. Большинство ресурсов Всемирной паутины представляют собой Web-страницы. Несколько web-страниц объединенных общей темой и связанных между собой ссылками на одном Web-сервере называются Web-сайтами. Для просмотра web-страниц используются специальные программы — браузеры.
Web- это самый популярный сервис Интернета. Настолько популярный, что когда люди говорят об Интернете, они в первую очередь подразумевают его сервис — web. Именно он представляет собой сайты и все, что с ними связано. Ты сейчас читаешь этот сайт — значит пользуешься Всемирной паутиной.
Главное в адресе сайта — домен. Это смысловое слово или название этого сайта для легкого запоминания его адреса. Например домен этого сайта - novichkam.info. Если надо просмотреть главную страницу сайта, достаточно правильно домен ввести в адресную строку браузера. Откроется главная станица с которой ты сможешь перейти к внутренним по ссылкам.
Произнося сегодня слово «Интернет» большинство из нас не думает о технической стороне дела – намного более интересным представляется то, что может дать Интернет человеку. Что такое Интернет в человеческом сознании на сегодняшний день?
Анализируя мотивы, которые заставляют людей посвящать ощутимую часть своего времени пребыванию на просторах Сети, можно сделать вывод, что для большинства из нас Интернет - это:
- общение. Кто-то покорен социальными сетями, часами просиживая здесь в поисках единомышленников, одноклассников или просто интересных людей. Кому-то больше по душе общение на форумах, при помощи ICQ или Skype. Кто-то ищет свою половинку в сервисах знакомств. И самое главное – Интернет позволяет без проблем общаться с людьми, в каком бы месте земного шара они не находились;
- развлечение. Слушать музыку, смотреть фильмы, играть в игры, читать книги, проходить тесты можно не выходя из режима он-лайн – ведь этого добра в Интернете великое множество!
- самообразование. Интернет, безусловно, лучший источник информации. Многие люди используют его для пополнения своих знаний в тех или иных сферах: читают полезные статьи, записываются на дистанционные он-лайн курсы и тренинги, просматривают видеоуроки;
- творчество, саморазвитие, личностный рост. Интернет вдохновляет на творчество! Достаточно пройтись по рукодельным блогам или кулинарным сайтам, как тут же хочется сделать что-нибудь эдакое самому. Многие нашли свое любимое увлечение именно благодаря Сети;
- место совершения покупок, сделок. Специальная Интернет-валюта позволяет совершать покупки он-лайн, не выходя из дома. Деньги можно обменивать, покупать акции, совершать другие денежные операции;
- средство заработка. Всемирная Сеть предоставляет большие возможности в плане заработка. Заработать в Интернете можно, открыв собственный Интернет-магазин, заведя сайт или блог, создав уникальный информационный продукт. Новички могут начать с фриланса: наполнять сайты контентом, заниматься программированием и веб-дизайном, продавать фотографии, придумывать слоганы.
Понять, что такое Интернет во всем его многообразии, может только тот человек, который постарается максимально использовать в собственных нуждах все перечисленные возможности Всемирной Паутины.
1.2 Операционная система (ОС)
Операционная система (ОС) — программное обеспечение, которое управляет работой аппаратной части персональных компьютеров, ноутбуков, КПК, смартфонов, коммуникаторов, GPS-навигаторов и других устройств. Кроме того, ОС обеспечивает работу пользовательских и системных приложений.
В любой операционной системе можно выделить 4 основные части: ядро, файловую структуру, интерпретатор команд пользователя и утилиты.
1. Ядро - это основная, определяющая часть операционной системы, которая управляет аппаратными средствами и выполнением программ.
2. Файловая структура - это система хранения файлов на запоминающих устройствах.
3. Интерпретатор команд или оболочка - это программа, организующая взаимодействие пользователя с компьютером.
4. Утилиты - это просто отдельные программы, которые, вообще говоря, ничем принципиально не отличаются от других программ, запускаемых пользователем, разве только своим основным назначением - они выполняют служебные функции.
Основные функции операционых систем (простейшие):
- Загрузка приложений в оперативную память и их выполнение;
- Стандартизованный доступ к периферийным устройствам (устройства ввода-вывода);
- Управление оперативной памятью (распределение между процессами, виртуальная память);
- Управление доступом к данным на энергонезависимых носителях (таких как жёсткий диск, компакт-диск и т. д.), как правило с помощью файловой системы;
- Пользовательский интерфейс;
- Сетевые операции, поддержка стека протоколов
Существует несколько видов операционных систем. Рассмотрим самые распространенные.
На первом месте ОС семейства Windows компании Microsoft. Основатель компании Билл Гейтс. Это самая распространенная ОС.
Семейство Microsoft Windows включает в себя:
Windows 95
Windows 98
Windows Me
Windows 2000 (2000)
Windows XP (2001)
Windows Vista (2006)
Windows 7 (2009)
Компьютеры Macintosh(Макинтош) имеют ОС Mac OS, которая разрабатывается компанией Aplle. Работает она только на компьютерах этой же компании.
Операционные системы нужны, если:
- вычислительная система используется для различных задач, причём программы, решающие эти задачи, нуждаются в сохранении данных и обмене ими. Из этого следует необходимость универсального механизма сохранения данных; в подавляющем большинстве случаев операционная система отвечает на неё реализацией файловой системы. Современные системы, кроме того, предоставляют возможность непосредственно «связать» вывод одной программы со вводом другой, минуя относительно медленные дисковые операции;
- между программами и пользователями системы необходимо распределять полномочия, чтобы пользователи могли защищать свои данные от несанкционированного доступа, а возможная ошибка в программе не вызывала тотальных неприятностей;
Таким образом, современные универсальные операционные системы можно охарактеризовать, прежде всего, как:
использующие файловые системы.
1.3 Adobe Photoshop SC5.
Основной формат Photoshop, PSD, может быть экспортирован и импортирован всеми программными продуктами, перечисленными выше. Photoshop CS поддерживает создание меню для DVD. Совместно с Adobe Encore DVD, Photoshop позволяет создавать меню или кнопки DVD. Photoshop CS3 в версии Extended поддерживает также работу с трёхмерными слоями
Панель инструментов:
В панели инструментов расположены все инструменты программы Adobe Photoshop которые используются для работы с изображениями и изображениями 3D. Инструментов в программе очень много. В панели инструментов находится 21 инструмент, но имеются так же и скрытые инструменты которые обозначены стрелочками в правом нижнем углу.
Для того что бы открыть скрытые инструменты, необходимо навести курсор мыши на инструмент и щелкнуть по нему правой клавишей, либо удерживать левую клавишу мыши несколько секунд. Откроется дополнительное окно содержащее в себе скрытые инструменты. Так же отобразить панель можно в двух вариантах – в один столбец или в два. Что бы изменить вид панели инструментов, щёлкните по двойной стрелочке в верхней части панели инструментов.
Действия инструментов:
Инструмент «Перемещение»
Инструмент перемещения используется для смещения слоёв, выделений, контуров и направляющих, а также работает с текстовыми слоями.
Инструмент «Прямоугольная область»
Инструмент «Прямоугольная область» (M) выделяет прямоугольные области. Для создания выделений необходимо кликнуть левой кнопкой мыши по документу и, не отпуская её, растянуть выделение.
Скрытые инструменты группы:
«Овальная область» (M) – служит для создания овальных выделений.
«Область вертикальная строка» - служит для создания вертикального выделения в 1px. по высоте документа.
«Область горизонтальная строка» - служит для создания горизонтального выделения в 1px. по ширине документа.
Инструмент «Лассо»
Инструмент «Лассо» (L) создает выделение от руки. Для создания выделения нажмите левую клавишу мышки и, не отпуская её, обведите желаемый объект. Для завершения выделения отпустите клавишу мышки. Выделенный объект будет обведён бегающей пунктирной линией. Выделенный объект можно переместить или скопировать на новый слой.
Скрытые инструменты группы:
«Прямолинейное лассо» (L) – используется для выделения прямых участков.
«Магнитное лассо» (L) - автоматически определяет грани объекта и магнитится в местах сильного контраста. При помощи этого инструмента очень удобно выделять объекты на светлом фоне.
Инструмент «Волшебная палочка»
Инструмент «Волшебная палочка» (W) создаёт выделенные области на основе анализа цвета пикселей. Принцип действия инструмента таков: при нажатии на изображении по какому-либо пикселю, Photoshop анализирует цвета смежных пикселей и проверяет их на близость к исходному. Если цвета оказываются близкими, то смежные пиксели присоединяются к выделенной области, после чего образуется выделение.
Скрытые инструменты группы:
«Быстрое выделение» (W) - позволяет быстро «нарисовать» выделение при помощи круглой кисти.
Инструмент «Рамка»
Инструмент «Рамка» (C) кадрирует изображение. Кадрирование — это отсечение частей изображения с целью фокусирования или улучшения компоновки.
Скрытые инструменты группы:
Инструмент «Раскройка» (C) используется для разрезания изображения на части. Этот инструмент часто используют web-дизайнеры для нарезки графики для сайта.
Инструмент «Выделение фрагмента» (C) используется для выделения фрагментов с целью последующего их изменения, добавления в URL , переименования.
Инструмент «Пипетка»
Инструмент «Пипетка» (I) берет информацию о цвете и стиле с изображения, т.е. копирует цвет.
Скрытые инструменты группы:
Инструмент «Комментарий» (I) увеличивает или уменьшает изображение.
Примечание: Для удобства используйте горячие клавиши Alt+прокрутка колеса на мышки.
Цветовой эталон» (I) измеряет и отслеживает цвет в нескольких точках изображения.
«Линейка» (I) позволяет измерить расстояние между любыми двумя точками рабочей области. При измерении расстояния от одной точки до другой рисуется непечатаемая линия.
«Счётчик» (I) точно подсчитывает объекты или свойства в любых изображениях.
Инструмент «Восстанавливающая кисть»
Инструмент «Восстанавливающая кисть» (J) позволяет исправлять дефекты изображения на основе соседних областей. Инструмент сопоставляет текстуру, освещенность, прозрачность и затененность пикселов образца с аналогичными параметрами пикселов восстанавливаемого изображения. В результате этого восстановленные пикселы незаметно смешиваются с изображением.
Скрытые инструменты группы:
«Точечная восстанавливающая кисть» (J) позволяет быстро удалять с фотографий пятна и другие дефекты.
«Заплатка» (J) позволяет восстанавливать выделенную область с помощью пикселов другой области или узора.
«Красные глаза» (J) удаляет эффект красных глаз.
Инструмент «Кисть»
Инструмент «Кисть» (B) создает мягкие или четкие цветные штрихи. Так же можно загружать наборы кистей (формат ABR) в программу и создавать свои собственные.
Скрытые инструменты группы:
«Карандаш» (B) создает четкие произвольные линии.
«Замена цвета» (B) используется для замены одного цвета на другой.
«Микс-кисть» (B) позволяет моделировать реалистические приемы живописи, такие как смешение цветов на холсте, сочетание цветов на кисти, изменение влажности краски на протяжении штриха.
Инструмент «Штамп»
Инструмент «Штамп» (S) позволяет клонировать (копировать) пиксели из одной области изображения в другую, на другой слой или даже на другое изображение, что полезно при создании копий объектов, ретушировании изъянов или рисовании поверх объектов фотографии.
Скрытые инструменты группы:
«Узорный штамп» (S) накладывает на изображение заданную текстуру.
Инструмент «Архивная кисть»
Инструмент «Архивная кисть» (Y) позволяет не только рисовать, но и очищать изображение от ранее наложенных штрихов.
Скрытые инструменты группы:
«Архивная художественная кисть» (Y) позволяет рисовать стилизованными штрихами с использованием исходных данных указанного архивного состояния или снимка.
Инструмент «Ластик»
Инструмент «Ластик» (E) позволяет либо заменить цвет пикселей цветом заднего плана, либо сделать их прозрачными, т.е. стереть какую-либо часть изображения.
Скрытые инструменты группы:
Инструмент «Фоновый ластик» (E) стирает фон на изображении, сохраняя края объекта на переднем плане.
Инструмент «Волшебный ластик» (E) напоминает инструмент «Волшебная палочка». Этот инструмент действует так же, как если бы вы сначала произвели выделение области при помощи инструмента «Волшебная палочка», а затем клавишей Delete удалили выделенное.
Инструмент «Градиент»
Инструмент «Градиент» (G) создаёт заливку с плавным переходом между двумя или несколькими цветами.
Инструмент градиент имеет дополнительные свойства:
- Линейный градиент
- Радиальный градиент
- Конусовидный градиент
- Зеркальный градиент
- Ромбовидный градиент
Скрытые инструменты группы:
«Заливка» (G) выполняет заливку области, близкой по цвету к пикселам, на которых вы щелкаете. Область можно также залить фоновым цветом или узором.
Инструмент «Размытие»
Инструмент «Размытие» (R) применяется для "размывания" границ изображения путем сглаживания перепада оттенков цвета соседних пикселов растра. С его помощью можно отделить по тону мелкие детали изображения от крупных областей со сплошной заливкой.
Скрытые инструменты группы:
«Резкость» (R) позволяет избирательно повысить резкость изображения, увеличивая контраст между соседними пикселями.
«Палец» (R) используется для создания направленных «мазков».
Инструмент «Затемнитель»
Инструмент «Затемнитель» (O) предназначен для затемнения фрагмента изображения.
Скрытые инструменты группы:
«Осветлитель» (O) позволяет осветлить фрагмент изображения.
«Губка» (O) позволяет одновременно изменять насыщенность и контрастность изображения.
Инструмент «Перо»
Инструмент «Перо» (P) позволяет вычерчивать пути. Этим инструментом расставляются опорные точки, которые Adobe Photoshop автоматически соединяет сегментами.
Скрытые инструменты группы:
«Свободное перо» (P) позволяет рисовать так же, как это делается карандашом на бумаге. Узловые точки добавляются автоматически в процессе рисования.
«Добавить опорную точку» добавляет опорную точку.
«Удалить опорную точку» удаляет опорную точку.
«Угол» используется для изменения свойств закреплённых точек.
Инструмент «Горизонтальный текст»
Инструмент «Горизонтальный текст» (T) предназначен для написания текста, который располагается горизонтально.
Скрытые инструменты группы:
«Вертикальный Текст» (T) предназначен для написания текста, который располагается вертикально.
«Горизонтальный текст-маска» (T) создает текст-маску напечатанного текста в виде выделенной области по горизонтали.
«Вертикальный текст-маска» (T) создает текст-маску напечатанного текста в виде выделенной области по вертикали.
Инструмент «Выделение контура»
Инструмент «Выделение контура» (A) предназначен для работы с векторными контурами (путями) созданными соответствующими инструментами Перо (P). Задача инструмента состоит в том, что бы делать эти контуры активными и перемещать их.
Скрытые инструменты группы:
«Стрелка» (A) предназначен для работы с путями (или их еще называют контурами).
Инструмент «Прямоугольник»
Инструмент «Прямоугольник» (U) предназначен для рисования прямоугольников.
Скрытые инструменты группы:
«Прямоугольник со скруглёнными краями» (U) предназначен для рисования прямоугольников со скругленными углами.
«Эллипс» (U) предназначен для рисования эллипсов и окружностей.
«Многоугольник» (U) предназначен для рисования многоугольников.
«Линия» (U) предназначен для рисования прямых линий.
«Произвольная фигура» (U) предназначен для рисования фигур произвольной формы.
Инструмент «Рука»
Инструмент «Рука» (H) перетаскивает изображение в пределах окна.
Скрытые инструменты группы:
Инструмент «Поворот вида» (R) вращает изображение не трансформируя его. Использование этого инструмента необходимо для облегчения рисования или раскрашивания.
Инструмент «Масштаб»
Инструмент «Масштаб» (Z) увеличивает или уменьшает изображение.
Панель инструментов, как правило, самая активно используемая панель. Эта панель появляется в левой части экрана при запуске фотошопа. В любой момент работы с программой выделен какой-либо инструмент. Также каждый инструмент имеет горячие клавиши.Знание их поможет намного увеличить скорость вашей работы в Фотошопе.
1.4 Основы HTML и CSS.
HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров. Когда документ создан с использованием HTML, WEB-броузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.
Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя тэги HTML вы можете обозначать данные элементы, обеспечивая WEB-броузеры минимальной информацией для отображения данных элементов, сохраняя вцелом общую структуру и информационную полноту документов. Все что необходимо, чтобы прочитать HTML-документ - это WEB-броузер, который интерпретирует тэги HTML и воспроизводит на экране документ в виде, который ему придает автор.
В большинстве случаев автор документа строго определяет внешний вид документа. В случае HTML читатель (основываясь на возможностях WEB-броузера может, в определенной степени, управлять внешним видом документа (но не его содержимым). HTML позволяет отметить, где в документе должен быть заголовок или абзац при помощи тэга HTML, а затем предоставляет WEB-броузеру интерпретировать эти тэги. Например, один WEB-броузер может распознавать тэг начала абзаца и представлять документ в нужном виде, а другой не имеет такой возможности и представляет документ в одну строку. Пользователи некоторых WEB-броузеров имеют, также, возможность настраивать размер и вид шрифта, цвет и другие параметры, влияющие на отображение документа.
HTML-тэги могут быть условно разделены на две категории:
тэги, определяющие, как будет отображаться WEB-броузером тело документа вцелом
тэги, описывающие общие свойства документа, такие как заголовок или автор документа
Запомните, что основное преимущество HTML заключается в том, что ваш документ может быть просмотрен на WEB-броузерах различных типов и на различных платформах.
Как создаются HTML документы
HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров. Выбор редактора, который будет использоваться для создания HTML-документов, зависит исключительно от понятия удобства и личных пристрастий каждого автора.
Основные положения
Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:
<TITLE> Заголовок документа </TITLE>
Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слэшем перед текстом внутри угловых скобок. В данном примере тэг <TITLE> говорит WEB-броузеру об использовании формата заголовка, а тэг </TITLE> - о завершении текста заголовка.
Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.
HTML не реагирует на регистр символов, описывающих тэг, и приведенный ранее пример может выглядеть следующим образом:
<title> Заголовок документа </title>
Внимание! Дополнительные пробелы, символы табуляции и возврата каретки, добавленные в исходный текст HTML-документа для его лучшей читаемости, будут проигнорированы WEB-броузером при интерпретации документа. HTML-документ может включать вышеописанные элементы только если они помещены внутрь тэгов <PRE> и </PRE>. Более подробно о тэгах <PRE> будет написано ниже.
Структура документа
Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:
<HTML> ...тело документа... </HTML>
Заголовочная часть документа <HEAD>
Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет из себя общее описание документа. Избегайте размещать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа. Например:
<HTML>
<HEAD>
<TITLE> Список сотрудников </TITLE>
</HEAD>
…..
Внимание! Технически, стартовые и завершающие тэги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-броузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.
Заголовок документа <TITLE>
Большинство WEB-броузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-броузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.
CSS
CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами. Потерпите, и увидите!
HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет бóльшие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра).
HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.
Давным-давно парень по имени Tim Berners Lee изобрёл World Wide Web, язык HTML использовался только для вывода структурированного текста. Автор мог только размечать текст: "это - заголовок" или "это - параграф", используя HTML-тэги, такие как <h1> и <p>.
По мере развития Web дизайнеры начали искать возможности форматирования онлайновых документов. Чтобы удовлетворить возросшим требованиям потребителей, производители браузеров (тогда - Netscape и Microsoft) изобрели новые HTML-тэги, такие, например, как <font>, которые отличались от оригинальных HTML-тэгов тем, что они определяли внешний вид, а не структуру.
Это также привело к тому, что оригинальные тэги структурирования, такие как <table>, стали всё больше применяться для дизайна страниц вместо структурирования текста. Многие новые тэги дизайна, такие как <blink>, поддерживались только одним браузером. "Вам необходим браузер X для просмотра этой страницы" - такой отказ стал обычным явлением на web-сайтах.
CSS был создан для исправления этой ситуации путём предоставления web-дизайнерам возможностей точного дизайна, поддерживаемых всеми браузерами. Одновременно произошло разделение представления и содержимого документа, что значительно упростило работу.
Появление CSS стало революцией в мире web-дизайна. Конкретные преимущества CSS:
управление отображением множества документов с помощью одной таблицы стилей;
При использовании CSS, мы один раз создадим оформление для класса, а потом в коде HTML-страницы просто пропишем этот класс каждому из трех фрагментов. Теперь HTML код теперь выглядит менее объемно, не так ли? Изменив лишь один элемент CSS, мы можем поменять оформление сразу всех страниц сайта.
Для оформления таких текстов будет необходимо использовать код каждый раз, для каждого фрагмента в отдельности.
При использовании же CSS, мы один раз создадим оформление для класса, а потом в коде HTML-страницы просто пропишем этот класс каждому из трех фрагментов. Теперь HTML код теперь выглядит менее объемно, не так ли? Изменив лишь один элемент CSS, мы можем поменять оформление сразу всех страниц сайта.
Ниже приведу коротенький пример для образного представления css:
<html>
<head>
<style type="text/css">
h1 {color:green;}
p.1 {color:red);}
p.2 {color:purple);}
</style>
</head>
<body>
<h1>Это заголовок 1</h1>
<p class="1">>Это обычный параграф. Заметьте, что текст - красный.</p>
<p class="2">Это текст - фиолетовый.</p>
</body>
</html>
Вот что вышло:
Это заголовок 1
Это обычный параграф. Заметьте, что текст - красный.
Это текст – фиолетовый.
HTML страницы без использования CSS становятся сложными и запутанными, так как оформление для каждого элемента прописывается заново, что значительного увеличивает объем текста. Например, есть HTML страница, на которой размещено 3 части текста, которые необходимо оформить одинаково (размер, цвет), но использовать HTML теги для оформления всех трех сразу не получается, так как эти фрагменты находятся в разных местах HTML страницы.
Многие эффекты оформления доступны только в CSS, их нельзя добиться с помощью HTML. Среди таких эффектов, например, разрядка текста, надчеркивание и измененный междустрочный интервал, разнообразные рамки, а также наложение элементов друг на друга.
1.5 Основные понятия JavaScript.
Язык программирования JavaScript был разработан Бренданом Эйком в Netscape Communications. Это объектно-ориентированный язык программирования, предназначенный для написания сценариев, работающих на стороне клиента.
Язык JavaScript основан на объектах. Объект JavaScript - это неупорядоченный набор свойств, каждое из которых имеет (или не имеет) атрибуты, которые определяют, как это свойство может использоваться. JavaScript содержит несколько встроенных объектов, таких, как Global, Object, Error, Function, Array, String, Boolean, Number, Math, Date, RegExp. Кроме того, JavaScript содержит набор встроенных операций, которые, не обязательно являются функциями или методами, а также набор встроенных операторов, управляющих логикой выполнения программ.
Объекты могут создаваться. Делается это путем вызова конструктора в операции new; например new String("Это строка") создает новый объект String. Результат вызова конструктора без new зависит от конструктора. Так, String("Это строка") создает примитивную строку, а не объект.
Остановимся на основных понятиях языка JavaScript:
Тип
Набор значений данных.
Примитивное значение
Элемент одного из типов Undefined (не определен), Null (нулевой), Boolean (логический - true или false), Number (числовой) или String (строка). Примитивные значения - это данные, которые представляются непосредственно и на самом нижнем уровне реализации языка.
Объект
Элемент типа Object; является неупорядоченным набором свойств, каждое из которых может быть примитивным значением, объектом или функцией. Свойство, являющееся функцией, называется методом.
Конструктор
Функция, которая создает и инициализирует объекты. Каждый конструктор имеет соответствующий прототип, который используется для наследования и разделения свойств.
Прототип
Объект, который используется в JavaScript для реализации наследования структуры, состояния и поведения. Когда конструктор создает объект, последний содержит неявную ссылку на прототип конструктора, позволяющий разрешать ссылки на свойства данного объекта. Свойства прототипа разделяются всеми объектами, созданными на его основе.
Объект языка
Любой объект, который поддерживается реализацией языка JavaScript, а не средой исполнения сценариев. Часть объектов языка являются встроенными; другие создаются в процессе выполнения сценария.
Встроенный объект
Любой объект, который поддерживается реализацией языка JavaScript независимо от среды исполнения и существующий на момент начала исполнения сценария. Все встроенные объекты являются объектами языка.
Объект среды
Любой объект, который не является объектом языка, а поддерживается средой исполнения сценариев.
Неопределенное значение
Примитивное значение, которое означает, что переменной не присвоено никакого значения.
Тип Undefined
Этот тип состоит из единственного значения undefined, которое является неопределенным.
Нулевое значение
Примитивное значение, которое означает нулевую, пустую или несуществующую ссылку.
Тип Null
Этот тип состоит из единственного значения null, которое является нулевым.
Логическое значение
Примитивное значение типа Boolean, означающее истину или ложь.
Тип Boolean
Тип, состоящий ровно из двух значений: true (истина) и false (ложь).
Логический объект
Элемент типа Object, который является экземпляром встроенного логического объекта. Иными словами, логический объект создается выражением new Boolean(value), где value - логическое значение. Результирующий объект имеет неявное (безымянное) свойство типа Boolean.
Строковое значение
Элемент типа String. Предсталяет собой строку символов, т . е. упорядоченный массив из нуля или более символов Unicode (т. е. 16-битовых целых чисел без знака).
Тип String
Этот тип состоит из всех возможных строковых значений.
Строковый объект
Элемент типа Object, который является экземпляром встроенного строкового объекта. Иными словами, строковый объект создается выражением new String(value), где value - строковое значение. Результирующий объект имеет неявное (безымянное) свойство типа String.
Числовое значение
Элемент типа Number. Является непосредственным представлением числа.
Тип Number
Тип, состоящий из всех возможных числовых значений.
Числовой объект
Элемент типа Object, который является экземпляром встроенного числового объекта. Иными словами, числовой объект создается выражением new Number(value), где value - числовое значение. Результирующий объект имеет неявное (безымянное) свойство типа Number.
1.6 Joomla 2.5.
Уже давно прошли времена, когда чтобы создать сайт веб-мастеру приходилось рисовать макет, верстать страницы, писать скрипты, причем делать это часто с нуля. Сейчас большинство сайтов создаются на готовых движках, которым могут быть либо бесплатными и поставляться с открытым исходным кодом, либо платными – стоящими зачастую немалых денег.
Само понятие «движок» - это выражение из профессионального веб-мастерского сленга, означающее программное обеспечение для управления сайтом. Иная аббревиатура – CMS, что в переводе с английского означает «система управления контентом».
Когда вы посещаете какой-либо сайт, кликнув по ссылке поисковика ли, набрав ли его адрес непосредственно в строке своего веб-браузера, вам демонстрируется обычная веб-страница. Вы можете сохранить ее на свой жесткий диск и изучить – обычно она не содержит ничего сверхъестественного: HTML-код, CSS, да, может, пару файлов с JavaScript-кодом. Это и есть «движок»? Нет, эта страница – лишь результат работы движка. Перед тем, как попасть с сервера, где размещен сайт, в ваш браузер и предстать перед вашим взором, она была сгенерирована различными PHP-скриптами, входящими в состав движка.
Joomla! одна из наиболее мощных Систем Управления Содержимым с Открытым Кодом (Open Source CMS) на планете. Она используется по всему миру для всего, от простых сайтов до комплексных корпоративных приложений. Joomla! лёгко устанавливается, проста в управлении, надёжна.Joomla! - система управления содержимым (CMS), написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных СУБД MySQL .
Описание системы
Joomla включает в себя различные инструменты для изготовления Web-сайта и управления сайтом. Важной особенностью Joomla является минимальный набор инструментов при начальной установке, который обогащается по мере необходимости. Это снижает загромождение административной панели ненужными элементами, а также снижает нагрузку на сервер и экономит место на хостинге.
Также при создании сайта стоит обратить особое внимание на дизайн. Помните, если источником дохода вашего сайта является биржа ссылок, то чем интереснее и увлекательней содержимое вашего сайта, чем привлекательней его дизайн и чем больше его посещаемость, тем больше вы сможете заработать на размещении ссылок. Естественно, все это можно осуществить не без помощи хорошего «движка».
Joomla 2.5 имеет панель управления.
Здесь мы видим все главные инструменты для работы в системе. Рассмотрим подробнее из каких главных частей состоит стартовая страница панели управления:
- Шапка панели с названием и логотипом CMS Joomla
- Верхнее горизонтальное меню панели управления системы
- Информеры системы. ссылка на просмотр frontend части сайта и кнопка выхода из системы
- Иконки быстрого доступы к основным частям CMS
- Информативные модули "гармошки" системы управления
- Версия CMS Joomla и информация о системе
Далее рассмотрим основные органы управления более детально, а именно горизонтальное меню и информеры, иконки быстрого доступа и модули.
Горизонтальное меню
Пожалуй самой главной частью системы является горизонтальное меню, из этого меню можно попасть в любую часть сисемы независимо от того, в какой части вы находитесь в данный момент - горизонтальное меню всегда перед Вами.
Иконки быстрого доступа (quick icons)
Иконки быстрого доступа, подобно ярлыкам на рабочем столе операционной системы Windows, позволяют быстро выполнить популярные действия и попасть в главные части системы управления. Эта функция реализована для удобства т.к. ко всем этим частям можно попасть используя горизонтальное меню системы. Особое внимание хотелось бы остановить на двух иконках - Версия Joomla! и
Версии расширений, которые показывают актуальность версии системы и её расширений.
Менеджер материалов
Менеджер материалов предназначен для создания и дальнейшего управления материалами в Joomla. Каждый материал может быть присоединён к определённой категории, а так же может иметь ряд уникальных настроек. Для начала, давайте зайдём в менеджер материлов.
Что бы попасть в Менеджер материалов, в горизонтальном меню панели управления выберите пункт "Материалы" и подпункт "Менеджер материалов" (так же Вы можете воспользоваться иконками быстрого доступа).
Перед нами откроется страница Менеджера материалов, главная часть которой - список всех материалов сайта и отображение категории, к которой привязан материал. Здесь, как и в менеджере категорий, Мы сможем создавать, редактировать и удалять материалы, менять сортировку, а так же выполнять ряд других действий.
Менеджер меню
Joomla 2.5 позволяет создавать различные меню и привязывать пункты меню практически к любой части сайта, выводя, например, отдельный материал сайта или категорию с несколькими материалами организовывая новостной блог. А так же есть возможность вывода установленных компонентов, например фото галерею, и многое другое.
Кроме того, CMS Joomla 2.5 позволяет создавать неограниченное количество не только пунктов меню, но и сами меню, например, можно организовать горизонтальное и вертикальное меню.
Что бы посмотреть какие меню есть у Вас на сайте, достаточно навести стрелку на пункт в горизонтальном меню системы управления, который так и называется "Меню"Что бы посмотреть созданные в меню пункты - выберите желаемое меню.Перед Вами появится список пунктов меню с их вложенностью, если такая существует. Перед Вами появится окно с возможными вариантами типов пунктов меню.Что бы привязать к пункту меню определённый материал сайта - выберите тип "Материал".
Что бы выбрать материал для пункта меню, в правой колонке "Обязательные параметры" нажмите на кнопку "Выбрать / изменить" и в появившемся окне выберите тот материал, который хотите привязать к пункту меню. Не забудьте заполнить поле заголовка меню.Для сохранения пункта меню нажмите на кнопку "Сохранить и зыкрыть".Перед Вами появится страница с возможностью привязать к пункту меню определённый материал.
1.7 Notepad++.
Notepad++ — свободный текстовый редактор с открытым исходным кодом для Windows с подсветкой синтаксиса большого количества языков программирования и разметки. Он базируется на компоненте Scintilla, написан на C++ с использованием STL, а также Win32 API и распространяется под лицензией GPL. Базовая функциональность программы может быть расширена как за счёт плагинов, так и сторонних модулей, таких как компиляторы и препроцессоры.
Notepad++ - бесплатный редактор текстовых файлов (замена стандартного Блокнота). Данная бесплатная программа облегчит работу в первую очередь программистам при редактировании кода или всем тем, кому необходим удобный и бесплатный текстовый редактор.
Основные особенности программы – удобная подсветка синтаксиса, поддержка многих языков программирования (Java, C, C++, CSS, HTML, XML, Java Script, PHP, ASCII, VB/VBS, SQL, Pascal, Perl и Python), поддержка большого числа языков в том числе и русского, работа с несколькими документами, удобный поиск в тексте, большое количество бесплатных плагинов и пр.
Программа обладает русским интерфейсом, что поможет начинающему пользователю разобраться в настройках. Однако следует заметить, что сразу же после установки программа полностью работоспособна.
Возможно, кто-то из вас скажет, что Notepad++ не нуждается в представлении. О нем и так все давно знают, и все успешно им пользуются. Но, смею вас уверить, что это не так. Как оказалось, знают о нем далеко не все, а, даже те кто знают, не всегда в курсе, что Notepad++ — это немного больше, чем просто редактор с подсветкой синтаксиса. Итак, давайте подробнее взглянем, на те самые «плюс-плюсы» , которые предлагает нам эта программа.
+1 Подсветка синтаксиса
Пожалуй, это основная фича из-за которой люди начинают пользоваться Notepad++. Действительно, его возможности в плане подсветки синтаксиса поражают воображение. Во-первых, список поддерживаемых языков просто огромен. В последней версии этот список даже пришлось разбить на отдельные категории, т.к. он просто перестал помещаться на экране целиком. Во-вторых, присутствует возможность создавать пользовательские правила подсветки синтаксиса. Кроме непосредственной подсветки синтаксиса редактор предоставляет несколько дополнительных возможностей при работе с исходными кодами, таких как нумерация строк и возможность сворачивания блоков, согласно правилам языка.
+2 Закладки
При работе с текстом часто приходится скролить его из одно конца в другой, чтобы посмотреть на ту или иную его часть. Но необходимые строки имеют свойство теряться, и мало кому нравится выискивать одно и то же по десять раз на дню. С Notepad++ все становится намного проще. Достаточно дважды кликнуть рядом с номером необходимой строки, как тут же напротив нее появится закладка, которую впоследствии будет легко найти нажимая F2 на клавиатуре.
+3 Табы
Все уже давно привыкли к табам в браузерах. Notepad++ предлагает использовать их и при редактировании документов, благодаря чему десятки открытых документов теперь не расползаются по панели задач, а аккуратно расположены в окне редактора, где их, к тому же, можно перемещать так, как вам заблагорассудится.
+4 Поддержка большого количества кодировок
Конечно, по количеству кодировок редактор проигрывает тому же Штирлицу, но назвать список поддерживаемых кодировок маленьким было бы неправильно. Здесь как и привычные нам ANSI, ISO и UTF, так и более экзотические вроде TIS-620 и EUC-CR.
+5 Параллельное редактирование документов
Весьма необычная фича, которая позволяет редактировать один и тот же документ в разных местах, при этом обновление документа будет происходить в обоих табах сразу. Для того, чтобы воспользоваться этой функцией достаточно выбрать “Copy to other view” в опциях таба.
+6 Сравнение документов
Чертовски необходимая вещь при сравнении разных версий одного и того же документа. Реализовано это счастье при помощи предустановленного плагина с незамысловатым названием Compare. Плагин позволяет параллельно просматривать две версии документа, при этом подсвечивая изменения в них, что очень облегчает поиск различий между версиями.
+7 Поиск и автозамена по регулярным выражениям
Кроме обычного поиска и замены, Notepad++ позволяет также искать и заменять фразы по регулярным выражениям, что очень облегчает жизнь, в случае если вам нужно отредактировать одну-две похожих по структуре фразы во многих местах обеъмного документа.
+8 Текстовый поиск в группе файлов
Помимо того, что редактор позволяет искать и заменять текст в отдельных файлах, он также способен найти необходимое вам и в группе файлов, для этого нужно всего лишь указать папку в которой следует искать и ключевое слово или регулярное выражение. Также возможно производить поиск только в тех файлах, имя которых совпадает с заданной маской.
+9 Файловый менеджер
Полезнейшая штука, реализуемая с помощью плагина, позволяющего не только просматривать файлы на диске не сворачивая окна редактора, но и добавлять необходимые файлы, папки и даже сохраненные сессии в закладки, для последующего быстрого доступа к ним.
+10 Работа с файлами на FTP сервере
И еще один весьма приятный плагин под названием FTP_synchronize, который наверняка понравится тем, кому часто приходится просматривать или редактировать документы находящиеся на сервере. Плагин позволяет моментально открывать файлы находящиеся на FTP сразу же в окне редактора, а также загружать их обратно на сервер после сохранения.
Если сравнивать Notepad ++ с более сложными программами, предназначенными для облегчения написания и редактирования различных кодов, таких, например, как Dreamweaver, то и тут найдется не мало аргументов для использования именно Блокнота с двумя плюсами для работы с Html и PHP. Во-первых, он абсолютно бесплатный, а значит вы сможете существенно сэкономить, используя этот редактор вместо того же Dreamweaver, если не брать в расчет взломанных версий платных программ.
Во-вторых, Notepad++ намного более легкий и быстрый, нежели многие из платных редакторов. Кроме того, имеется возможность использовать вообще не устанавливая Нотепад++ в операционную систему Windows (так называемая портативная версия — портабл) и носить его, допустим, на флешке, поставив на нее пароль, тем самым всегда имея под рукой удобный, функциональный и хорошо понятный вам редактор для работы с Html и PHP кодом (а так же и целым рядом других языков).
1.8 FrontPage.
FrontPage — WYSIWYG-редактор HTML, входящий в состав пакета приложений Microsoft Office.
Прикладная программа FrontPage 2003 – это визуальный html-редактор для быстрого создания сайта. Язык HTML является основным языком программирования Web - среды. С помощью FrontPage, можно создавать структуру сайта, формировать страницы, добавлять интерактивные средства и загружать файлы на сервер в сети Интернет.
Web–страницы основаны на языке описания гипертекстовых документов HTML (Hypertext Markup Language). В HTML для определения содержания и формата гипертекстовых документов используются команды, которые называются тегами (tags). HTML – страницы представляет собой документы в обычном текстовом формате, содержащие специальные команды форматирования (теги HTML).
Для того чтобы создать сайт при помощи FrontPage, нет необходимости учить HTML. FrontPage позволяет довольно просто набрать текст, который можно поместить на Web - страницу, расположить в нужных местах рисунки. Используя FrontPage, можно создавать эффекты, для которых обычно требуются скрипты или программы DHTML.
Данное приложение при разработке страниц веб-узла пользуется html-движком Trident, который лежит в основе браузера Internet Explorer. В браузерах, использующих другие движки, например Gecko, страницы, созданные с помощью FrontPage, могут отображаться по-другому.
Программа обладает широким спектром возможностей, в частности, может автоматически отправлять изменения, внесённые разработчиком сайта в исходные тексты, в режиме реального времени.
Программа FrontPage обладает интегрированным интерфейсом, удобным для создания и редактирования веб-страниц, а также для управления веб-узлами из одного приложения. Панели инструментов и меню совместимы с другими программами Microsoft Office XP и являются полностью настраиваемыми. Удобные сочетания клавиш позволяют ускорить выполнение часто встречающихся задач, таких как открытие веб-узлов и веб-страниц, печать и многие другие команды.
В Microsoft FrontPage существует несколько способов просмотра содержимого веб-узла, облегчающих разработку, публикацию и управление им. Работать с веб-страницами можно, используя одно из следующих представлений. В зависимости от необходимого способа просмотра страниц и работы с ними можно использовать один из четырех режимов представления Страница.
Конструктор.
Web-страницы можно разрабатывать и редактировать по умолчанию в режиме Конструктор представления Страница. Этот режим предоставляет практически все возможности WYSIWIG (WYSIWYG (What You See Is What You Get — режим точного отображения) - этот режим позволяет пользователю просматривать вид документа в окончательной версии продукта и изменять текст, рисунки и другие элементы непосредственно в этом представлении) при создании web -страниц, такие же как при работе со средствами разработки.
Код. Позволяет самостоятельно просматривать, записывать и редактировать теги HTML. Используя средства оптимизации кода в Microsoft FrontPage, можно создать чистый код HTML, также упрощается процедура удаления ненужного кода.
С разделением. Проверять и редактировать содержимое web-страницы можно в формате с разделением экрана, предоставляющем одновременный доступ к режимам Код и Конструктор.
Просмотр. Позволяет просматривать внешний вид страницы в веб-обозревателе, не сохраняя ее. Этот режим используется для проверки страницы перед сохранением после внесения небольших вызывающих сомнения изменений.
Сайт или Web-узел – это набор связанных между собой близких по смыслу Web-страниц и файлов. В программе FrontPage существуют мастера, которые позволяют создавать сайт, и шаблоны или набор предварительно разработанных текстовых и графических форматов, на основе которых могут создаваться новые веб - страницы. Мастера и шаблоны FrontPage позволяют создавать сайты различных типов.
Окно прикладной программы FrontPage состоит: из строки заголовка, строки меню, панелей инструментов редактирования и форматирования, кнопок быстрого выбора тега (для редактирования и ввода тегов), ярлычков вкладок выбора страниц (для перехода между страницами), рабочего окна, в котором отображается новая страница, панели рисования, кнопок режимов просмотра, индикатора ожидаемого времени загрузки страниц при скорости 56 кбит/с, индикатора размера страниц, области задач.
Новое приложение Microsoft Office – редактор web-узлов программа Frontpage. Я научилась создавать и модифицировать структуру узла. Ниже перечислены некоторые компоненты и операции, рассматриваемые в упражнениях занятия:
- мастер web-узла;
- список задач;
- просмотр папок узла;
- навигация;
- проверка гиперссылок;
- отчеты;
- цветовая схема узла;
- общие поля страницы.
В программе FrontPage можно пользоваться одним из четырех режимов просмотра: "Конструктор", "Код", "С разделением" и "Просмотр". В режиме "Конструктора" как в любом текстовом редакторе можно в визуальном режиме создавать, редактировать и форматировать страницу, т.е. вводить текст, добавлять рисунки, таблицы. При этом теги языка HTML автоматически добавляются в фоновом режиме, но кодировка HTML на экране не отображается.
В режиме "Код" на экране будет отображаться вся кодировка и можно напрямую редактировать код HTML, а также вводить новые коды. На рисунке представлен HTML – код новой пустой страницы в редакторе FrontPage .
Создание Web-страниц в прикладной программе FrontPage
Создание новой пустой Web-страницы
Если при открытии окна программы FrontPage в нем отображается пустая страница, то разработку веб - страницы можно осуществлять на базе этой страницы. Если при открытии редактора FrontPage, отображается пустое главное окно, то для создания новой пустой страницы необходимо выполнить команду Файл/Создать и выбрать в области задач Пустая страница. В окне приложения появится пустая страница.
1.9 Инструкция по техники безопасности при работе над ПК.
Инструкция по технике безопасности при работе на компьютере
Общие требования безопасности
Настоящая инструкция предназначена для предотвращения неблагоприятного воздействия на человека вредных факторов, сопровождающих работы со средствами вычислительной техники и периферийным оборудованием.
Настоящая инструкция подлежит обязательному и безусловному выполнению. За нарушение инструкции виновные несут ответственность в административном и судебном порядке в зависимости от характера последствий нарушения.
Соблюдение правил безопасной работы является необходимым условием предупреждения произвоственного травматизма.
Требования безопасности перед началом работы
Перед началом работы следует убедиться в исправности электропроводки, выключателей, штепсельных розеток, при помощи которых оборудование включается в сеть, наличии заземления компьютера, его работоспособности,
Обеспечение безопасности рабочего места:
1. Правильный выбор рабочего места – дисплей (монитор) является ис-точником электромагнитного излучения. Рекомендуется устанавливать за-щитный экран для снижения воздействия электромагнитного излучения от задней части другого дисплея. Недопустимо устраивать рабочие места близко одно от другого. Размещать компьютер необходимо вдали от отопительных приборов и исключать попадания на него прямых солнечных лучей. Недопустимо работать напротив боковой или задней части другого дисплея, если расстояние до него - менее 2 м.
Во избежание повреждения изоляции проводов и возникновения коротких замыканий не разрешается: вешать что-либо на провода, закрашивать и белить шнуры и провода, закладывать провода и шнуры за газовые и водопроводные трубы, за батареи отопительной системы, выдергивать штепсельную вилку из розетки за шнур, усилие должно быть приложено к корпусу вилки.
Для исключения поражения электрическим током запрещается: часто включать и выключать компьютер без необходимости, прикасаться к экрану и к тыльной стороне блоков компьютера, работать на средствах вычислительной техники и периферийном оборудовании мокрыми руками, работать на средствах вычислительной техники и периферийном оборудовании, имеющих нарушения целостности корпуса, нарушения изоляции проводов, неисправную индикацию включения питания, с признаками электрического напряжения на корпусе, класть на средства вычислительной техники и периферийном оборудовании посторонние предметы.
Запрещается под напряжением очищать от пыли и загрязнения электроооборудование.
Запрещается проверять работоспособность электрооборудования в неприспособленных для эксплуатации помещениях с токопроводящими полами, сырых, не позволяющих заземлить доступные металлические части.
Недопустимо под напряжением проводить ремонт средств вычислительной техники и перифейного оборудования. Ремонт электроаппаратуры производится только специалистами-техниками с соблюдением необходимых технических требований.
Во избежание поражения электрическим током, при пользовании электроприборами нельзя касаться одновременно каких-либо трубопроводов, батарей отопления, металлических конструкций , соединенных с землей.
При пользовании элетроэнергией в сырых помещениях соблюдать особую осторожность.
Требования безопасности в аварийных ситуациях
При обнаружении неисправности немедленно обесточить электрооборудование, оповестить администрацию. Продолжение работы возможно только после устранения неисправности.
При обнаружении оборвавшегося провода необходимо немедленно сообщить об этом администрации, принять меры по исключению контакта с ним людей. Прикосновение к проводу опасно для жизни.
Во всех случаях поражения человека электрическим током немедленно вызывают врача. До прибытия врача нужно, не теряя времени, приступить к оказанию первой помощи пострадавшему.
Искусственное дыхание пораженному электрическим током производится вплоть до прибытия врача.
При возникновении пожароопасной ситуации или пожара персонал должен немедленно принять необходимые меры для его ликвидации, одновременно оповестить о пожаре администрацию.
Требования безопасности по окончании работы
После окончания работы необходимо обесточить все средства вычислительной техники и периферийное оборудование. В случае непрерывного производственного процесса необходимо оставить включенными только необходимое оборудование.
Глава 2. Практическая часть
2.1 Шаблон сайта
Первый шаг для создания сайта, это проектирование его макета или шаблона. Для начала необходимо определиться со структурой у меня она выглядит следующим образом:
- Шапка (header)
- Навигация (горизонтальная)
- Левый блок (краткие новости, информация)
- Центральный блок (контент)
- Правый блок (авторизация, языки, поиск, календарь)
- Подвал (footer)
После того как я определился со структурой, приступаю к созданию дизайна сайта, при помощи программы Adobe Photoshop CS5 создаем шаблон нашего будущего сайта.
2.2 Резка Шаблона
После того как наш дизайн нашего сайта (шаблон) готов необходимо его порезать для дальнейшей верстки, резку шаблона производим так же в программе Adobe Photoshop CS5.
2.3 Верстка шаблона
Теперь после того как мы его порезали можно приступать к самой верстке сайта для этого я воспользуюсь программой Dreamweaver 11. Верстку я буду делать при помощи так называемых div’ов плюс в некоторых местах где потребуется буду пользоваться таблицами.
При верстке я создаю один общий контейнер куда будут помещены все элементы сайт его назову #conteiner. Первым элементом в этом контейнере будет блок #header (Шапка), затем блок #menu (Горизонтальное меню).
После этого подходим к верстке центрального блока #content куда войдут еще три блока #left, #right, #text.
К блокам #left и #right я применю свойство float для левого LEFT для правого соответственно RIGHT для центрального же блока #text я задам отступы слева и справа размером левого и правого блока, таким образом текс т содержащийся в центральном блоке не будет залазить на крайние блоки.
После необходимо создать специальный блок разделитель со свойством clear для того чтобы наш Подвал(footer) не заезжал в центральный блок.
Теперь можно спокойно создать сам блок Подвала(footer) где в дальнейшем будут находится контактные данные.
2.4 Вставка Модулей и заливка шаблона на CMS Joomla.
Для того чтобы запустить наш шаблон на CMS Joomla необходимо закинуть его в соответственную папку template но это еще не все необходимо поменять разрешение файла index.hml на index.php.
Следующим шагом необходимо вставить необходимые для работы шаблона и вывода на сайт информации из базы данных модули.
Список необходимых вставок:
- <!--Защита от прямого доступа:--> <?php defined(‘_JEXEC’) or die( ‘Restricted access’ ); ?>
- <!--Подключение Doctype и html с языком:--> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language;?>”>
- <!--Подключение мета тегов:--> <jdoc:include type=”head”/>
- <!--Путь в корень домена:-->
<?php echo $this->baseurl ?>
- <!--Конструкция подключения модуля:--> <?php if($this->countModules(‘left’)) :?> <jdoc:include type=”modules” name=”left” style=”rounded”/> <?php endif; ?>
- <!--Подключение основного компонента:--> <jdoc:include type=”component”/>
Первый РНР блок который мы вставляем это Защита от прямого доступа чтобы обезопасить доступ к нашему файлу index.php из вне.
Следющий РНР блок Подключение Doctype и html с языком необходим для верификации данных и оптимизации сайта, а так же для смены кодировки и языка при необходимости.
Следующий РНР блок Подключение мета тегов: модуль для подключения тегов для оптимизации сайта , его заголовка и ключевых слов.
РНР блок Путь в корень домена используется для подключения CSS либо JavaScript или других вспомогательных элементов, так же для вывода картинок.
Этот РНР блок Конструкция подключения модуля используется для подключения модулей Joomla в любом месте где это потребуется.
И наконец самый главный РНР блок Подключение основного контента этот блок необходим для вывода всего контента используемого нами из базы данных.
2.5 Работа с CMS Joomla
После того как я вставил все необходимые РНР блоки, можно приступить к заливке информации на наш сайт, для этого в административной панели создаю Разделы затем необходимые к нему категории, а к ним соответственно нужный материал.
Для создания Календаря, поля авторизации, языковой панели сайта. Необходимо зайти в административной панели в раздел Расширения Модули и создать соответствующий модуль и указать ему позицию, в каком месте он будет выводиться.
Заключение
Уровень развития информационных технологий делают веб-сайта ключевым средством заявить о себе всему миру. Сейчас любая уважающая себя организация имеет свое представительство в сети Интернет. Но веб-сайт – это не только рекламная площадка, в первую очередь это информационный и коммуникационный центр.
Посещая веб-сайт, заинтересованные посетители смогут узнать контактную информацию и схему проезда , последние изменения в работе организации. Посетив форум, посетитель сможет поучаствовать в обсуждении актуальных вопросов и быстро найти интересующую его информацию (воспользовавшись системой поиска).
Процесс создания веб-сайта достаточна сложен и требует определенных знаний. При разработке веб-сайта следует следить руководствоваться, прежде всего, социальными и педагогическими аспектами: учитывать возраст, индивидуальные и личностные особенности пользователей.
Для этого нужно, прежде всего, определится с группой пользователей, на которых рассчитан сайт: будут ли это подростки, взрослые люди или дети. В зависимости от группы пользователей следует подбирать материал и оформление сайта. Немаловажным момент является и наличие контекстной справки, которая позволит человеку ясно понимать суть текста.
В современных рыночных условиях информация занимает огромное место. С каждым днем разрабатываются все новые и новые веб-сайты, которые облегчают получение новой информации и предоставляют уникальные возможности. Интернет является не только источником информации, но и средством, использование которого, значительно повышает эффективность коммуникации. Применение Интернета весьма обширно и разнообразно.
Использование уникальных возможностей Интернета, позволяет сделать поиск и выбор нужной информации более увлекательным, разнообразным, учитывающим интересы, потребности и компетенцию индивидуума, а руководству организации – более эффективное и оперативной управление.
Использование веб-сайта организацией предоставляет следующие возможности:
• Возможность представить всю нужную информацию, включая контактные телефоны и карту проезда, заинтересованным пользователям.
• Возможность обновлять новости в режиме реального времени.
• Возможность размещения тематических статей.
• Возможность публикации фотографий в виртуальном фотоальбоме.
• Возможность создания форума, где посетители будут обмениваться информацией и мнениями.
Таким образом, использование веб-сайта помогает сэкономить время, решает задачу предоставления информации, предоставляет новые возможности предоставления из любой точки Земли, если есть выход в Интернет.
Список используемой литературы:
- http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82
- http://1photoshop.net/
- http://soft.oszone.net/program/800/Notepad/
- http://joomla-master.org/soft/useful/
- http://www.metod-kopilka.ru/page-1-2-2.html
- http://habrahabr.ru/qa/24365/
- http://rusimages.ru/