Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники ко 2 бонусному видеоуроку по CSS Размер: 529.06 kB, скачали: 395 раз.
Скачать браузер Opera 11.10 Размер: 6.69 MB, скачали: 570 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Проверка HTML на валидность
Проверим все наши html страницы на валидность. Я выбрал вторую вкладку — «Загрузить файл», жму кнопку «Обзор» и выбираю файл index.html. Этот документ валиден. Выбираем следующий — page.html. Жмем «revalidate». Найдено пять ошибок. Первая — отсутствие атрибута alt, вторая — тоже, третья и четвертая — также отсутствие атрибута alt в изображениях. Пятая ошибка связана с шестой: мы два раза использовали один и тот же идентификатор «home», а, как мы знаем, один идентификатор можно использовать только один раз. Давайте посмотрим строки, в которых у нас ошибка. Это строки 42-45. Переходим в код и добавляем атрибут alt. В качестве значения первого атрибута alt укажем «секретарь» (там у нас человек за компьютером сидит). Для второго укажем «француз». В третьем пропишем «Барак Обама». И для четвертого укажем «фото в рамке».
<h3>Что такое Lorem Ipsum?</h3><img alt="секретарь" src="img/man_grey.png">
<h3>Где его взять?</h3><img alt="француз" src="img/f_user.png">
<h3>Почему он используется?</h3><img alt="Барак Обама" src="img/barak_obama.png">
<h3>Откуда он появился?</h3><img alt="Фото в рамке" src="img/photo.png">
Теперь смотрим пятую и шестую ошибки. Они на 49-й и 25-й строках. Я думаю, нам проще будет изменить идентификатор заголовка, поэтому перейдем на 25-ю строку. Меняем «home» на «main».
<h1 id="main"><a style="color: black;" href="#">Познай мир сейчас!</a></h1>
Сохраняем и в таблицах стилей тоже меняем «home» на «main».
h1#main a { color: #7E6752; }/* Специфичность: 1+100+1=102 */
Сохраняем. Давайте проверим наш документ на валидность снова. Теперь он валиден. Закрываем это окно и переходим в новое.
Проверка CSS на валидность
В адресной строке находится ссылка на валидатор CSS. Мы жмем «Проверить загруженный файл», нажимаем «Обзор» и проверяем файл reset.css. Файл полностью валиден и соответствует стандарту CSS2.1. Возвращаемся назад и указываем новый файл — typography.css. Опять ошибок не обнаружено. Указываем третий файл — style.css. Поздравляю, ошибок снова нет. И, наконец, проверим самый большой файл стилей — st.css. Обнаружено четыре ошибки.
Рассмотрим первую. Дело в том, что свойство border-radius не существует в CSS2.1, но оно существует в CSS3. Поэтому, если бы мы проверяли этот файл на соответствие стандарту CSS3, то такая ошибка бы не появилась. Вторая и третья ошибки связаны с тем, что просто таких свойств не существует, но именно эти свойства помогают сделать закругленные рамки в некоторых браузерах, поэтому их нужно оставлять либо убирать radius вовсе. Четвертая ошибка — свойство zoom не существует. Оно находится у нас в идентификаторе «container». Мы его указывали обязательным, поэтому нам его удалять нельзя.
Получается, что, по сути, документ у нас не валиден, но это не имеет веского значения, поэтому мы закроем на это глаза. Как однажды сказал Артемий Лебедев: «Самый лучший валидатор — это браузер».
Расширения и виджеты для браузера Opera разработчику
Закрываем вкладку и переходим уже непосредственно к расширениям и виджетам браузера Opera. На сайте opera.com вы видите главное горизонтальное меню. Откройте «Расширения Opera» и «Виджеты Opera» в новых окнах, во вкладке «Разработка» откройте «Opera Dragonfly» в текущей вкладке.
Пока открываются другие страницы, посмотрим на страницу с Dragonfly, которая уже загрузилась. Что такое Dragonfly? Это полнофункциональный набор средств разработчика, предназначенный для упрощения вашей работы. Его установка не требуется. Пролистав чуть ниже, вы увидите, как запустить этот набор — Ctrl+Shift+I. На этой странице вы можете прочитать о Dragonfly подробнее, а я ее пока закрою и перейду на страницу своего сайта. Я вызываю этот набор с помощью горячих клавиш, и мы видим, как выскочило окно. Мы с ним уже работали.
Теперь я расскажу о том, что умеет данный набор. Я не буду углубляться, мы просто рассмотрим некоторые инструменты, которые могут помочь вам в вашей работе.
Начнем с первой вкладки — Документы. Развернуть дерево. Если мы нажмем эту клавишу, то все дерево кода будет развернуто. Экспортировать текущую панель. Откроется новая страница с исходным кодом. Следующая кнопка дает нам возможность выбрать элемент на странице для инспектирования. Давайте попробуем ее отключить. Нажмем на ссылку «Бонусный видеоурок по CSS». У нас открывается ссылка. Вернемся назад и включим кнопку. Нажмем, и у нас выделяется код, а также открываются стили, которые применяются. Следующая кнопка — подсвечивать выбранный элемент. Мы ее убрали, и выбранный элемент у нас не подсвечивается. Поставили — выбранный элемент стал подсвечиваться. Внизу можно удобно переходить по дереву кода. Мы передвигаемся от дочерних элементов к родительским. Как работать со стилями вы уже знаете: мы можем отключить какие-то стили, можем их изменить, после чего у нас показываются изменения.
Переходим к следующим вкладкам. Свойства мы затрагивать не будем, а разметку разберем. Здесь как раз находится та самая коробочная (боксовая) модель, о которой мы разговаривали. Мы видим, что блок у нас шириной 120 пикселей и высотой 39 пикселей. Также ему задан левый отступ 31 пиксель, правый — 10 и нижний — 110, верхнего отступа не задано. Одновременно мы видим, что то же самое указывается еще и на странице, которая находится в верхней половине окна. Рамки у нас нет, внешних отступов тоже нет, а позиционирование у нас автоматическое.
Поиск. Здесь все просто — у нас указывается множество искомых слов.
Перейдем к верхним вкладкам. Скрипты, сеть, источники, хранилище, ошибки мы рассматривать не будем. А вот инструменты рассмотрим. Давайте сделаем снимок. Итак, у нас сделан снимок экрана. Я жму на рубашку человечка, и справа у нас показывается цвет, а также его HEX-код. Мы можем увеличить в масштабе наш скрин, чтобы более точно указать цвет, и можем сохранить цвет. После нажатия «Сохранить», он появляется в цветовой палитре. Мы можем добавить цвет в цветовую палитру с помощью виджета Color Picker (здесь также указывается HEX-код), и в пипетке мы можем открыть ruler (линейка). На сделанном скрине мы хотим, например, отмерить кнопку «Подписаться». Она у нас примерно 110×29 пикселей. Закрываем ruler. Также, если зажимать клавишу мыши, то мы можем двигаться по области экрана, для которой мы сделали скрин. То есть, если мы сделаем скрин чуть выше, то мы не сможем двигаться ниже слова «сайте». Чтобы получить такую возможность, можно просто развернуть окно браузера на весь экран.
Возможно, вас еще заинтересуют настройки. Здесь вы можете настроить набор инструментов под себя, а также узнать горячие клавиши и изменить их при желании.
Я закрываю панель разработчика и предлагаю перейти к расширениям и виджетам. Итак, чтобы открыть расширения для разработчиков, мы выбираем вкладку «Веб-разработчику». Мы установим три расширения: The Developer Briefcase, RDS Bar и Omeasure!(линейка). Так как линейка у нас есть в панели разработчика, то последнее можно не устанавливать. Закрываем список расширений.
У нас остаются виджеты. Чтобы открыть виджеты для веб-разработчика, жмем категорию «веб-разработчику». Здесь большой выбор виджетов, но я не нашел здесь ни одного нужного, разве что Color Picker, но оно уже установлено в панели инструментов для разработчика, которая встроена в Oper'у. Поэтому поиск виджетов мы тоже закрываем.
Обновляем страницу и начинаем работать с расширениями, которые мы установили. Первое из них — Developer Briefcase. Оно позволяет спрятать, показать или выделить какие-то элементы нашего сайта. Например, View Image ALT Attributes – оно показывает все изображения и атрибуты alt рядом с этими изображениями (если они имеются). Итак, у каждой из звездочек имеется атрибут alt, поэтому он указывается рядом. Изображение системы Orphus тоже имеет атрибут alt. Попробуем выбрать Outline Divs. Outline – это свойство CSS. Оно подобно рамке, только не задает дополнительную ширину, а просто обводит. Получается, что элементы на странице у нас не сдвигаются, как это было при рамках. Outline Divs показал нам все элементы Div на нашей странице. Выберем Outline Headings, и у нас выделились все заголовки на странице. Outline All Images выделяет все изображения на странице. Shorten url сокращает url с помощью сайта tinyurl.com. Жмем «make TinyUrl» и получаем ссылку. Копируем ее и, переходя по ней, мы попадем на наш сайт. То есть, если у вас длинные ссылки, то вы можете воспользоваться этим инструментом. Есть еще множество других полезных инструментов, я думаю, вы разберетесь с ними сами методом «тыка».
Перейдем к расширению RDS Bar. Оно предназначено даже больше не для разработчиков, а для тех, кто занимается раскруткой сайта. Ну, или для разработчиков, которые хотят узнать показатели своего сайта. Расширение показывает индексы цитирования (ТИЦ — тематический индекс цитирования от Яндекса, PR – Google Page Rank страницы), сколько страниц проиндексировано Googl'ом, Bing'ом, Яндексом (правда здесь captcha появилась почему-то), рейтинг Яндекс-блогов (в скобках указаны подписчики, а без скобок — авторитетность блога), Solomono показывает количество входящих и исходящих ссылок сайта по базе Solomono, статистику (статистика рейтинга посещаемости Alexa), наличие в каталогах, и др. Это тоже полезное расширение.
Ну что ж, в этом видеоуроке мы настроили браузер Opera под себя. Спасибо за внимание. До встречи в следующем видеоуроке, в котором вы узнаете 7 полезных дополнений для браузера Mozilla Firefox!
Info-line.net