- •Часть 1. Компьютерная графика и web-дизайн. Теоретические основы.
- •Цветовая модель rgb
- •Цветовая модель cmyk
- •Цветовая модель lab
- •Структура гиперссылки
- •Категории гиперссылок
- •Формы гиперссылок
- •Дизайн гиперссылок
- •Принципы юзабилити
- •Назначение навигации
- •Глобальная навигация
- •Нарушения навигации
- •Организация навигации при помощи закладок
- •О блако тегов
- •1. Сбор страниц
- •2. Индексирование страниц
- •Проблемы поисковых систем
- •Создание системы поиска
- •Интерфейс поиска
- •Дизайн страницы результатов
- •Отрицательный результат поиска
- •Принципы разработки отдельных страниц Главная страница
- •Splash-страница
- •Специальные навигационные страницы
- •Страницы для обратной связи
- •Выходные страницы
- •Страницы с фиксированными размерами
- •Масштабирование по горизонтали
- •Введение в web-типографику
- •Правила составления текстов для web
- •Главные правила текстового дизайна
- •Создание логотипа
- •Выбор цветовой гаммы сайта
- •2. Эксплуатационный опрос
- •3. Определение технических подробностей
- •4.Изучение аудитории
- •5.Анализ отрасли
- •6. Составление первичной документации
- •1. Структурирование сайта с точки зрения контента
- •Основные ошибки клиента
- •2. Создание карты сайта
- •3. Установка соглашений об именовании
- •1. Разработка концепции дизайна
- •2. Выверка
- •3. Создание графических шаблонов и руководства по стилю оформления
- •1. Подготовка к производству
- •2. Заключение договора о хостинге
- •3. Формирование файловой структуры
- •4. Компоновка страниц
- •5. Контроль качества
- •1. Передача сайта
- •2. Запуск
- •3. Сопровождение
- •Баннер с позиции рекламодателя
- •Баннер с позиции дизайнера
- •Часть 2. Разработка web-узлов. Практическое задание.
- •1. Запись данных: insert
- •2. Чтение данных: select
- •3. Обновление данных: update
- •4. Удаление данных: delete
- •Описание
- •Синтаксис
- •Описание
- •Синтаксис
- •Синтаксис
- •Аргументы
- •Описание, примеры
- •Связь между окнами
- •Строка параметров
- •Основные кроссбраузерные параметры
- •Заметки
- •Конструкция включений require
- •Конструкция включений include
- •Часть 3. Верстка и допечатный процесс.
- •1. Каждая статья должна иметь прямоугольную форму и состоять из прямоугольных блоков
- •2. Обтекаемая текстом фотография должна занимать по ширине целое число колонок
- •3. Колонку текста нельзя прерывать элементами графического дизайна
- •4. При вертикальной верстке элементы статьи должны располагаться в строгом порядке: 1) фотография, 2) подпись к фотографии, 3) заголовок, 4) текст
- •5. Из нескольких иллюстраций к статье следует выбирать одну ведущую
- •1. Материалы должны быть явно отделены друг от друга.
- •2. Материалы должны выстраиваться в иерархию.
- •3. Заголовки соседних материалов не должны слипаться.
- •4. Следует соблюдать иерархию фотоматериалов.
- •5. Полоса должна быть визуально сбалансирована.
- •6. Больше трёх-четырёх гарнитур на полосе использовать нельзя.
- •Часть 4. Операционные системы и компьютерные сети. Вопрос №1. Диапазоны ip-адресов локальных сетей, их назначение
- •Вопрос №2. Прямые и обратные dns-запросы, структура домена .In-addr.Apra
- •Вопрос №3. Напишите консольные команды и их параметры, позволяющие запускать, останавливать и перезапускать сервис Apache, а также просматривать прослушиваемые сервисами порты локального хоста
- •Вопрос №5. Напишите инструкции файла настроек Apache, запрещающие в текущем каталоге доступ ко всем файлам с расширением log отовсюду, кроме локального хоста
- •Вопрос №6. Напишите инструкции файла настроек Apache, разрешающие доступ в текущий каталог только прошедшим аутентификацию пользователям
- •Вопрос №7. Напишите инструкции файла глобальных настроек Apache, организующие виртуальный хост Вопрос №8. Опишите назначение поставляемых в пакете веб-сервера Apache утилит htpasswd, ab
3. Обновление данных: update
В этом случае следует не забывать указывать, какие именно данные мы хотим обновить, чтобы не обновились все данные.
Допустим, мы получили новый электронный адрес ($new_email = @$_POST['new_email'];) для пользователя с идентификатором 32, и можем обновить его данные:
mysql_query("UPDATE `$table` SET `email` = '$new_email' WHERE `id` = 32");
Если же требуется обновить не только адрес, но и имя (допустим, $new_name = @$_POST['new_name'];), то запрос примет форму
mysql_query("UPDATE `$table` SET `email` = '$new_email', `name` = '$new_name' WHERE `id` = 32");
Т.е. мы обновляем существующие поля новыми значениями.
4. Удаление данных: delete
В этом случае следует не забывать указывать, какие именно данные мы хотим удалить, чтобы не удалились все данные.
Допустим, нам передали в переменную $id_to_delete идентификатор пользователя, которого нужно удалить. Теперь мы можем удалить этого пользователя:
$totaldelete = mysql_query("DELETE FROM `$table` WHERE `id` = '$id_to_delete'");
Переменные, значением которых является результат запроса, нужны только для последующего возврата успеха или неуспеха, чтобы можно было сообщить пользователю, что операция выполнена.
Один файл можно включить в другой при помощи 4 разных операторов, например: <?php include_once "db_connect.php";
Написать HTML-код для создания масштабируемой структуры страницы (с помощью таблиц). Количество и размер секций выбрать по своему усмотрению.
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы:<caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.
<html>
<head>
<meta charset="utf-8">
<title>Таблица размеров обуви</title>
</head>
<body>
<table border="1">
<caption>Таблица размеров обуви</caption>
<tr>
<th>Россия</th>
<th>Великобритания</th>
<th>Европа</th>
<th>Длина ступни, см</th>
</tr>
<tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>
<tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr>
<tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr>
<tr><td>36,5</td><td>5</td><td>38</td><td>24</td></tr>
<tr><td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td></tr>
<tr><td>38</td><td>6</td><td>39⅓</td><td>25</td></tr>
<tr><td>38,5</td><td>6,5</td><td>40</td><td>25,5</td></tr>
<tr><td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td></tr>
<tr><td>40</td><td>7,5</td><td>41⅓</td><td>26</td></tr>
<tr><td>40,5</td><td>8</td><td>42</td><td>26,5</td></tr>
<tr><td>41</td><td>8,5</td><td>42⅔</td><td>27</td></tr>
<tr><td>42</td><td>9</td><td>43⅓</td><td>27,5</td></tr>
<tr><td>43</td><td>9,5</td><td>44</td><td>28</td></tr>
<tr><td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td></tr>
<tr><td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td></tr>
<tr><td>44,5</td><td>11</td><td>46</td><td>29</td></tr>
<tr><td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td></tr>
<tr><td>46</td><td>12</td><td>47⅓</td><td>30</td></tr>
<tr><td>46,5</td><td>12,5</td><td>48</td><td>30,5</td></tr>
<tr><td>47</td><td>13</td><td>48⅔</td><td>31</td></tr>
<tr><td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td></tr>
</table>
</body>
</html>
Написать HTML-форму, предназначенную для выбора товара из выпадающего списка. Результат выбора должен быть обработан PHP-страницей (название страницы, количество и наименования товаров выбрать по собственному усмотрению).
<form action="process_order.php" method="post"> <select name="goods"> <option="1">Первый товар</option> <option="2">Второй товар</option> <option="3">Третий товар</option> </select> </form> Примеры придумай поизобретательнее! Дальше, создаём текстовый файл process_order.php и пишем в нём: <php if( isset( $_POST['goods'] ) ) { $getGood = $_POST['goods']; file_put_contents('test.php', $getGood); } else exit; этот пример записывает принятый товар в файл text.php, который нужно создать. пример примитивный, можно конкатенировать записываемую строку с чем-нибудь ещё
Написать XML-документ для предметной области «библиотека».
например, файл library.xml <?xml version="1.0" encoding="UTF-8" ?> <books> <book id="1"> <title>Название книги 1</title> <author>Автор книги 1</author> <year>1975</year> </book> <book id="2"> <title>Название книги 2</title> <author>Автор книги 2</author> <year>2013</year> </book> </books> Количество примеров увеличь, примеры тоже с фантазией напиши, я тебе просто структуру показываю. Вложенные узлы в файле можно отбивать табами или любыми другими отступами, чтобы нагляднее показать структуру. Всё, что непонятно, спрашивай. Потом, думаю, созвонимся и некоторые вещи голосом объясню.
Написать XML-документ для предметной области «автосалон».
По аналогии: <?xml version="1.0" encoding="UTF-8" ?> <autosalon> <car id="1"> <name>Toyota Vitara</name> <year>1999</year> <price>$20,000</price> </car> <car id="2"> <name>Toyota Karina</name> <year>1998</year> <price>$10,000</price> </car> </autosalon> Примеры тоже сделай получше, теги любые, главное, чтобы парные были.
Написать код на языке PHP, который распечатывает элементы ассоциативного массива $ar в виде таблицы из двух столбцов (в первом ключ, во втором — значение).
<table> <?php foreach($ar as $key=>$value) { echo '<tr>'; echo '<td>' . $key . '</td>'; echo '<td>' . $value . '</td>'; echo '</tr>'; } ?> </table>
Написать PHP-код, запрашивающий из некоторой MySQL-таблицы все строки, в которых значение целочисленного поля «abcd» равно числу 5 (название, структуру таблицы выбрать по собственному усмотрению).
$select = mysql_query("SELECT * FROM `table_name` WHERE `abcd` = 5"); дальше в цикле $select можно перебирать при помощи mysql_fetch_assoc() или других функций например: while( ($result = mysql_fetch_assoc($select))!=false ) { echo $result['id'] . ': ' . $result['test'] . '<br>'; } для этого в таблице table_name должны быть поля id и test как минимум
Укажите известные вам способы использования CSS-стилей в HTML-документе. Проиллюстрируйте на примерах.
а) прямое включение стилей: <style type="text/css">/* тут стили */</style> б) инлайновые стили: <p style="color:orange;">абзац</p> в) нормальное подключение стилевого файла: <link href="test.css" type="text/css" rel="stylesheet" media="all"> г) подключение одной таблицы стилей внутри другой, например, в файле test.css подключается test2.css: @import url("test2.css"); или @import "test2.css";
Укажите принципиальное различие между блочными и строковыми элементами CSS. Проиллюстрируйте на примерах.
В HTML большинство элементов можно разделить на две группы: блочные (blok) и строчные(inline).
Начинающему разработчику не всегда сразу удается разобраться - в чем разница между ними, а также запомнить принадлежность какого-либо элемента к конкретной группе. Но со временем, с опытом работы у Вас не возникнет и намека на подобные затруднения.
Строчные элементы. К строчным элементам относятся теги: <a>, <br>, <code>, <em>, <img>, <span>,<strong>, <sub>, <sup>....
Строчные элементы в общем потоке располагаются последовательно на одной строке один за другим.
На другую строку строчный элемент или часть его содержимого переходит только в конце строки или когда что-то принудительно заставляет их перейти на новую строку.
Строчные элементы, естественно, могут располагаться внутри блочных.
Блочные элементы. К блочным элементам относятся теги: <div>, <dl>, <h1>...<h6>, <hr>, <ol>, <p>,<table>, <ul>....
Блок представляет собой как бы отдельную структурную единицу, выделенную абзацем. Блочные элементы в общем потоке располагаются последовательно один под другим. По умолчанию два блочных элемента не могут располагаться на одной строке.
Один или несколько блоков также могут располагаться внутри другого (родительского) блочного элемента.
В CSS блоки создаются на основе элементов HTML и имеют следующую структуру.
Любой блок имеет форму прямоугольника.
Блочный элемент имеет границу и содержимое: это может быть текстовая информация, фотографии, логотип фирмы и т.п., называемое контентом (англ. content — содержание).
Границе блока при помощи свойства border можно придать необходимое оформление: задать толщину, цвет и стиль линий. По умолчанию граница невидима.
Между содержимым и границей существуют внутренние расстояния - поля (свойство padding). Ими необязательно пользоваться. То есть если их явно не установить при помощи свойстваpadding, то граница будет вплотную примыкать к содержимому блока, либо отстоять от него на каком-то минимальном расстоянии. С другой стороны, поля могут иметь совершенно конкретные размеры, которые указывает разработчик.
Вокруг блока - за его границей существуют пустые, ничем не занятые области, называемыеотступами (свойство margin). Отступы - это расстояния от границы блока, до ближайших элементов, или, если их нет, то до краев окна браузера. Отступы также, как и поля по умолчанию отсутствуют, либо имеют минимальную ширину, автоматически определяемую браузером.
Также для блока можно задать фиксированную ширину (свойство width) и высоту (свойствоheight), но лишь для его содержимого. Отступы, граница и поля туда не входят. По умолчанию как высота, так и ширина блока подстраиваются под размеры пространства, занимаемого контентом.
Пример
<p> <img src="img/peng_64.gif"> <code> Строчные элементы </code> <span style="color: red;"> расположены на одной строке. </span> <strong> Они заключены в блочный элемент - абзац!</strong> Перенос текста происходит автоматически - в конце строки. </p> <p> Следующий блок - абзац, начинается с новой строки. </p> <div style="border: #00CC66 solid 1px;"> <p> Два абзаца расположены. </p> <p> Внутри блока - тега <span style="color:#CC0000; font-size:18px;">div</span>!</p> </div> <p> Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление!</p>
Напишите HTML-код для вставки на web-страницу карты изображений. В качестве изображения можно использовать человеческое лицо, различные части которого должны по-разному реагировать на нажатие (размеры выберите произвольно).
находишь картинку лица вставляешь её на веб-страницу при помощи <img src="face.jpg" usemap="facemap"> потом создаёшь "карту" с названием "facemap"
