Псевдо-элемент

1	nth-child()

полезен и удобен в применении.

Единственный момент, который мне всегда давался с трудом (а потом быстро забывался) - это запомнить тот алгоритм, по которому данный псевдо-элемент производил свои вычисления.

С ключевыми словами все более или менее ясно и просто - их всего два, одно отвечает за счет четных чисел, другое - за счет нечетных чисел. Нумерация в списках начинается с 1, а не с нуля. Поэтому при выборке с помощью ключевого слова

1

odd

1

1, 2, 3, 5, 7, ...

1

even

1

2, 4, 6, 8, ...

Например, так:

li:nth-child(odd) a{
  color: #778899;
  text-decoration: none;
}

или так:

li:nth-child(even) a{
  color: #778899;
  text-decoration: none;
}

А вот с общей формулой примерного вида

1

2n+2

Все просто на самом деле. Допустим, у нас есть такое выражение:

li:nth-child(2n+3){
  color: #778899;
  text-decoration: none;
}

… здесь мы говорим браузеру - применить цвет

1

#778899

1

text-decoration: none;

1

2n

1

li

1

3

Еще примеры:

• 1	.third li:nth-child(3n+2)

  - выбрать каждый третий элемент, начиная со второго по порядку;

• 1	.fifth li:nth-child(5n+3)

  - выбрать каждый пятый элемент, начиная с третьего элемента;

• 1	.forth li:nth-child(4n+2)

  - выбрать каждый четвертый элемент, начиная со второго.

То есть, видя выражение типа

1

3n+4

1

n

Как уже можно было догадаться, это всего лишь счетчик. Это объяснение выражения было “подсмотрено” мною на CSS-Tricks (How nth-child Works).

Буква

1

n

1

0

1

.third li:nth-child(3n+2)

3 * 0 + 2 = 2
3 * 1 + 2 = 5
3 * 2 + 2 = 8
3 * 3 + 2 = 11
3 * 4 + 2 = 14
3 * 5 + 2 = 17
3 * 6 + 2 = 20
...

То есть, как и говорилось выше - каждый третий элемент, начиная со второго. Совершенно ничего сложного, как видим. Простая математика и запоминать ничего не нужно. Главное - понять алгоритм вычисления в этом выражении.

Тогда ключевое слово

1

odd

1

3n

1

even

1

2n

1

2n

1

3n

На этом все.

Выжимка из замечательной книги “Большая книга CSS3 3-е издание” Дэвида Макфарланда о веб-шрифтах и способе их подключения с помощью директивы

1	@font-face

.

Узнал об этой теме массу нового для себя. В частности, два способа подключения шрифтов, особенность работы с сервисом Google Fonts и числовая шкала плотности шрифтов, ресурсы для поиска бесплатных шрифтов, тонкости работы с генератором FontSquirrel, ресурсы по шрифтовым иконкам. Для меня информация оказалась чрезвычайно полезной и интересной.

Ниже привожу краткий конспект всех вопросов, показавшихся мне интересными и новыми в моей практике, пересказанный своими собственными словами. Надеюсь, данный материал окажется полезным не только для меня одного.

Подключение веб-шрифтов с помощью @font-face:

• подключение нестандартного шрифта с помощью директивы

  1	@font-face

• назначение подключенного шрифта с помощью свойства

  1	font-family

Директива

1

@font-face

• создать указываемое имя шрифта
• загрузить глифы для шрифта из указанного ею места

Свойство

1

font-family

Существует несколько форматов веб-шрифтов. Наиболее распространенные из них: EOT, WOFF, OTF или TTF,

Формат EOT, который понимают браузеры IE вплоть до версии 8. Собственно, этот формат шрифта создан и существует только ради этого браузера и таких его версий. Чтобы получить шрифт формата EOT, необходимо специальное программное обеспечение для преобразования формата TTF в OET.

Формат WOFF (Web Open Font Format) является наилучшим на сегодняшний день для использования в Веб: самый маленький и легкий, поддерживается всеми современными браузерами (в том числе IE9 и выше); этот формат был создан специально для Веб. Фактически - это облегченная версия формата TTF или OTF.

Форматы OTF (Open Type Font) и TTF (True Type Font) - это самые обычные компьютерные шрифты, которые используются в большинстве операционных систем (Windows, Macintosh, Linux) и в приложениях под эти системы. Но, помимо этого, такие шрифты можно легко использовать и в Интернете.

Формат SVG - это даже не формат шрифта, а формат графики, графического изображения. Особенностью этого формата является то, что графика в этом формате создается исключительно с помощью векторов, то есть - математических формул.

Благодаря этому изображения в таком формате масштабируются без потери качества - при увеличении размера картинки компьютеру достаточно пересчитать векторные точки. Особенность этого формата графики позволила применить его для создания “шрифтов”. То есть, обычный шрифт преобразуется в формат SVG, где каждый шрифт - это фактически картинка в масштабируемом формате SVG.

Зачем потребовались такие трудности? Все дело в том, что браузеры под ОС Android (очень распространенная ОС под мобильные устройства) могут отображать веб-шрифты только в этом формате. Браузеры под iPhone (Safari 4.1 и ниже) также не умеют распознавать веб-шрифт. Вот этим “неумехам” и подсовывают картинки в виде шрифтов - “не умеешь кушать обычную пищу, так кушай хотя бы это!”.

Правовой вопрос использования шрифтов

Вопрос можно кратко cформулировать в следующих двух предложениях. Все шрифты делятся на платные или бесплатные.

Платные шрифты делятся на те, которые:

• можно использовать в Веб
• нельзя использовать в Веб

Чтобы не заморачиваться решением запутанного вопроса лицензии на шрифты, можно воспользоваться веб-службами Google Fonts или TypeKit, на которых собраны все шрифты, которые можно использовать в Веб. Шрифты на этих серверах либо бесплатные (Google Fonts), либо платные (TypeKit).

Краткий список источников бесплатных шрифтов, которые можно использовать в Веб:

• The League of Movable Type (https://www.theleagueofmoveabletype.com/)
• FontSquirrel (http://www.fontsquirrel.com/)
• Google Fonts (https://www.google.com/fonts)
• The Open Font Library (http://openfontlibrary.org/ru)
• Fontex.org (http://fontex.org/)
• Exljbris Font Foundry (http://www.exljbris.com/)

Большинство веб-сервисов, которое предоставляет шрифты для Веб, “отдают” их в формате OTF или TTF. Поэтому нужно конвертировать этот шрифт в четыре формата, описанных выше, для того, чтобы максимальное число посетителей сайта смогло увидеть на своих устройствах содержимое данного сайта. Для конвертирования не нужно искать специальное программное обеспечение. Можно воспользоваться бесплатным генератором @font-face Generator, находящемся на сервере FontSquirrel (http://www.fontsquirrel.com/).

Единственное ограничение этого сервиса - он имеет свой собственный blacklist, в который помещены шрифты, запрещенные по лицензии для использования в Веб. Другими словам, если “подсунуть” этому генератору лицензионный шрифт, приобретенный пиратским способом, то он откажется от генерации последнего.

Генератор

1

@font-face

Порядок указания форматов шрифтов в директиве

1

@font-face

@font-face{
  font-family: 'PTSans';
  src:  url('PTSansRegular.eot');
  src:  url('PTSansRegular.eot#iefix') format('embedded-opentype'),
    url('PTSansRegular.woff') format('woff'),
    url('PTSansRegular.ttf') format('truetype'),
    url('PTSansRegular.svg') format('svg');
}

• EOT - формат только для Internet Explorer 8 и ниже
• WOFF - самый современный и маленький по размеру шрифт, который понимают большинство современных браузеров
• TTF - сравнительно большой по размеру шрифт и достаточно устаревший
• SVG - самый большой по размеру и объему шрифт, поэтому его необходимо размещать в самой последней строке. К тому же, этот формат шрифта используется только в браузерах ОС Android или в браузере Safari 4 (то есть, iPhone)

Браузер читает тело директивы

1

@font-face

1

@font-face

h1{
  font-family: 'League Gothic', Arial, sans-serif;
  font-weight: normal;
}

Правильное применение подключенного web-шрифта League Gothic. Здесь указывается на первом месте имя подключенного шрифта, а затем - резервные шрифты, которые заведомо установлены в системе пользователя (имя шрифта, гарантировано имеющегося в системе и семейство шрифтов).

Внимательный читатель обратит внимание на вторую строку и скажет: это здесь лишнее, бред какой-то. На самом деле не совсем так. Браузеры всегда пытаются отрисовать заголовки полужирным начертанием, по умолчанию. Поэтому, здесь мы говорим, чтобы браузер просто этого не делал, и все.

Помимо букв, шрифты могут состоять из иконок или изображений. Ресурсы, посвященные теме шрифтовых иконок и значков:

• The Big List of Flat Icons & Icon Fonts
• HTML for Icon Font Usage
• Icon Fonts are Awesome
• Шрифтовые иконки и сервис IcoMoon

Виды шрифтов

При подключении шрифтов, установленных на компьютере, обычно не возникает вопросов и мы не задумываемся о том, как так получается, что при указании браузеру отрисовать текст полужирным с помощью тега

1

strong

1

em

1

strong em

На самом деле это не так. Или не совсем так. Браузер действительно отрисовывает шрифт указанным ему способом, но вот с самим шрифтом он ничего сделать не может. Он просто берет указанное тегом начертание шрифта и выводит его на экран. Дело в том, что дизайнеры или компании, занимающиеся разработкой шрифтов, создают шрифты таким образом: художник рисует четыре набора одного и того же шрифта. То есть, рисуется набор символов в обычном начертании (regular), затем рисуется набор символов в курсивном начертании (italic), потом набор символов в полужирном начертании (bold), и наконец набор символов в полужирном курсивном начертании (bold italic). Все эти четыре набора символов фактически являются отдельными шрифтами, хотя и носят одно общее название (Georgia, Tahoma, Helvetica и так далее).

Когда браузеру указывается, какое начертание применить, он просто берет шрифт с указанным начертанием и отображает его. К примеру, шрифт Arial имеет четыре вида начертания. Если указывается, что нужно полужирное начертание, то браузер берет полужирное начертание Arial. Сам браузер преобразовать одно начертание в другое не может ни в коей мере. Он может выполнить только одну вещь - попытаться сделать и обычного начертания “курсивное”. Команда, говорящая браузеру выполнить такую задачу, имеет название

1

oblique

В случае с веб-шрифтами веб-дизайнеру нужно самому побеспокоиться от том, чтобы подключить все четыре вида начертания выбранного шрифта по отдельности. Из-за браузера IE8 подключение веб-шрифтов с помощью директивы

1

@font-face

Простой способ подключения веб-шрифта

Простой способ заключает в добавлении к директиве

1

@font-face

1

font-weight

1

font-style

1

@font-face

@font-face{
  font-family: 'PTSans';
  src:  url('PTSansRegular.eot');
  src:  url('PTSansRegular.eot#iefix') format('embedded-opentype'),
  url('PTSansRegular.woff') format('woff'),
  url('PTSansRegular.ttf') format('truetype'),
  url('PTSansRegular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face{
  font-family: 'PTSans';
  src:  url('PTSansItalic.eot');
  src:  url('PTSansItalic.eot#iefix') format('embedded-opentype'),
  url('PTSansItalic.woff') format('woff'),
  url('PTSansItalic.ttf') format('truetype'),
  url('PTSansItalic.svg') format('svg');
  font-weight: normal;
  font-style: italic;
}

@font-face{
  font-family: 'PTSans';
  src:  url('PTSansBold.eot');
  src:  url('PTSansBold.eot#iefix') format('embedded-opentype'),
  url('PTSansBold.woff') format('woff'),
  url('PTSansBold.ttf') format('truetype'),
  url('PTSansBold.svg') format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face{
  font-family: 'PTSans';
  src:  url('PTSansBoldItalic.eot');
  src:  url('PTSansBoldItalic.eot#iefix') format('embedded-opentype'),
  url('PTSansBoldItalic.woof') format('woff'),
  url('PTSansBoldItalic.ttf') format('truetype'),
  url('PTSansBoldItalic.svg') format('svg');
  font-weight: bold;
  font-style: italic;
}

Расскажу, как я понимаю данные CSS-правила. Директива

1

@font-face

1

font-family: 'PTSans'

• 1	src: url('PTSansBoldItalic.eot')

  - местоположение шрифта;

• 1	font-weight: normal

  - загрузить шрифт указанной жирности;

• 1	font-style: normal

  - загрузить шрифт указанного стиля.

CSS-правила требуют, чтобы при четырех вариантах отображения шрифта заполнение массива

1

PTSans

1

@font-face

1

PTSans

p {
 font-family: PTSans;
}

И затем HTML-тегами

1

strong

1

em

dolor ets <strong>lorem ipsum dolor ets</strong> lorem ipsum ipsum dolor ets lorem ipsum <em>dolor ets lorem ipsum dolor</em> ets lorem ipsum dolor ets

Браузер “вытащит” из массива PTSans шрифт нужного начертания (bold или italic или bold italic) и применит его к указанным элементам страницы.

Преимуществом данного способа подключения веб-шрифта является его универсальность. Достаточно один раз объявить шрифт с помощью директивы

1

@font-face

какой-то элемент {
 font-family: PTSans;
}

… чтобы потом управлять отображением этого шрифта посредством семантически верных тегов

1

strong

1

em

Сложный способ подключения веб-шрифта

К сожалению, IE8 не понимает способа подключения веб-шрифта, описанного выше. Точнее, этот браузер не понимает способа подключения различных начертаний шрифта к одному и тому же имени этого шрифта. Если создать правила, описанные выше и попробовать загрузить полученную HTML-страницу в IE8, то весь текст будет отображен как:

1

font-family: PTSans; font-weight: normal; font-style: normal

В тех местах, где применены теги

1

strong

1

em

1

bold

1

italic

Выходом из положения будет применение различных имен шрифта в директиве

1

@font-face

@font-face{
  font-family: 'PTSansRegular';
  src:  url('PTSansRegular.eot');
  src:  url('PTSansRegular.eot#iefix') format('embedded-opentype'),
  url('PTSansRegular.woff') format('woff'),
  url('PTSansRegular.ttf') format('truetype'),
  url('PTSansRegular.svg') format('svg');
}

@font-face{
  font-family: 'PTSansItalic';
  src:  url('PTSansItalic.eot');
  src:  url('PTSansItalic.eot#iefix') format('embedded-opentype'),
  url('PTSansItalic.woff') format('woff'),
  url('PTSansItalic.ttf') format('truetype'),
  url('PTSansItalic.svg') format('svg');
}

@font-face{
  font-family: 'PTSansBold';
  src:  url('PTSansBold.eot');
  src:  url('PTSansBold.eot#iefix') format('embedded-opentype'),
  url('PTSansBold.woff') format('woff'),
  url('PTSansBold.ttf') format('truetype'),
  url('PTSansBold.svg') format('svg');
}

@font-face{
  font-family: 'PTSansBoldItalic';
  src:  url('PTSansBoldItalic.eot');
  src:  url('PTSansBoldItalic.eot#iefix') format('embedded-opentype'),
  url('PTSansBoldItalic.woof') format('woff'),
  url('PTSansBoldItalic.ttf') format('truetype'),
  url('PTSansBoldItalic.svg') format('svg');
}

Обратите внимание на отсутствие правил

1

font-weight

1

font-style

1

@font-face

1

strong

1

em

Оцените этого CSS -“крокодила” ниже. Какой он громоздкий и неуклюжий! А если учесть, что на HTML-странице нужно будет применить шрифт PTSans не только к элементу p, а еще к заголовкам

1

h1

1

h2

1

a

p{
 font-family: PTSansRegular;
 font-weight: normal;
 font-italic: normal;
 font-size: 36px;
}

p strong{
 font-family: PTSansBold;
 font-weight: bold;
 font-italic: normal;
}

p em{
 font-family: PTSansItalic;
 font-weight: normal;
 font-italic: italic;
}

p strong em{
 font-family: PTSansBoldItalic;
 font-weight: bold;
 font-italic: italic;
}

Применять или не применять второй способ подключения веб-шрифтов - это вопрос того, насколько необходима поддержка IE8 для конкретного сайта. Следует учесть, что доля IE8 падает и будет продолжать падать.

Шрифты Google Fonts

Чтобы не заморачиваться с поиском шрифта, скачиванием его в формате TTF или OTF, конвертации на генераторе типа FontSquirrel Generator, подключения полученных CSS-стилей в проект с помощью многочисленных директив

1

font-face

Примечательный момент использования шрифтов Google - это способ подключения полученных шрифтов. Первый способ - с помощью тега

1

link

1

@import

Первый способ прост, но имеет один недостаток - тег

1

link

В тоже время, второй способ с помощью директивы

1

@import

Третий способ с помощью JavaScript кроме сложности, никаких других преимуществ перед двумя другими не имеет.

В Google плотность шрифта обозначается не с помощью ключевых слов

1

normal

1

bold

1

bolder

1

normal

1

bold

К примеру, код может выглядеть следующим образом. Зададим для элемента

1

em

em{
 font-family: 'Gentium Book Basic', serif;
 font-weight: 400;
 font-style: italic;
}

На этом выжимка по веб-шрифтам заканчивается.

Свойство

1

margin

очень хорошо для решения задачи установления дистанции между элементами, но знаете ли вы, что отрицательные

1

margin

могут не увеличивать, а сокращать расстояние между элементами, вплоть до того, что эти элементы будут перекрывать друг друга.

Создадим простой пример и для этого предположим, что у нас есть страница, на которой элемент после заголовка

1

h2

Решения такого вопроса два.

Первый способ - это воспользоваться смежными селекторами.

Второй способ, представленный на рисунке ниже, это применить отрицательный

1

margin-bottom

1

h2

Можно подумать, что у параграфа, который следует сразу за заголовком, отсутствует

1

margin-top

1

Margin-top

Он просто оказался перекрытым заголовком

1

h2

1

margin-bottom

1

margin

Такой прием полезен на практике в случае, когда необходимо расположить часть контента “на одной линии”. Почему слово на одной линии заключено в кавычки - потому-что контент только визуально располагается на одной линии.

Предположим, у нас есть список (HTML-разметка):

<ul class="jump">
  <li class="prev">
    <a class="ch03.html" href="#">Salaries</a>
  </li>
  <li class="next">
    <a class="ch05.html" href="#">Punching the Clock</a>
  </li>
</ul>

В этом списке нам необходимо расположить оба пункта так, чтобы они находились на горизонтальной линии. Визуально это можно увидеть так, как изображено на рисунке ниже.

Такую задачу можно выполнить обычным способом - через

1

float

1

li

1

ul

1

float: left

1

float: right

Но можно решить такую задачу другим способом:

.jump{
  list-style-type: none;
  line-height: 1;
  width: 25em;
  margin: 0 auto;
  padding: .25em 1em;
  border: 1px solid;
}
  .jump .next{
    text-align: right;
    margin-top: -1em;
  }

В этом примере отрицательный

1

margin-top

1

-1em

1

li.next

1

line-height: 1

Прим. переводчика: очень понравилось, о таком способе решения даже не подозревал!

Другим полезным приемом является частичное выдвижение элемента изнутри наружу своего контейнера-родителя. Предположим, у нас стоит задача расположить блок заголовка точно по центру разделительной линии так, как это показано на рисунке ниже:

HTML-разметка такого заголовка будет следующей:

<div class="entry">
  <h2>
    The Web Stack
  </h2>
    ...
</div>

.entry{
    border-top: 1px solid gray;
  }
  .entry h2{
    width: 80%;
    background-color: #fff;
    border: 1px solid gray;
    margin: -0.67em auto 0;
    text-align: center;
  }

C другой стороны, может потребоваться задача, когда блок заголовка не имеет фиксированной ширины, а ширина задается только его содержимым. В этом случае необходимо добавить всего несколько строк кода в HTML-разметку и CSS-правила, соответственно:

HTML-разметка, в которой добавлен еще один элемент -

1

span

<div class="entry">
  <h2>
    <span>The Web Stack</span>
  </h2>
    ...
</div>

.entry h2{
    margin-top: -0.67em;
    text-align: center;
    border-top: 1px solid gray;
  }
  .entry h2 span{
    background-color: #fff;
    border: 1px solid gray;
    padding: .25em 1em;
  }

В этом примере все хорошо работает до тех пор, пока длина текста внутри блока меньше, чем длина разделительной линии. Заголовок разбивается на две линии, сам блок заголовка вмещается вниз от разделительной линии и перестает быть расположенным по центру.

Для этого случая решение с помощью отрицательного

1

margin-top

1

border-top

Автор статьи: Eric Meyer - “Smashing CSS Professional Techniques for Modern Layout”

На этом все.

Для начала я бы хотел поговорить об использовании свойство

1

outline

, которое на первый взгляд кажется подобным свойству

1

border

.

Однако у свойства

1

outline

1

outline

Во время создания разметки можно визуально обозначить местоположение всех ее частей.

Например, таким образом:

div {outline: 1px solid #ff0000}

Вы можете решить, что точно так можно сделать и с помощью свойства

1

border

1

border

1

outline

Вот что я имею ввиду: предположим, у вас есть три колонки

1

div

1

div

1

em

Для всех трех

1

div

1

float: left; width: 33.33%

Если ко всем трем блокам вы добавите свойство

1

border: 1px solid #ff0000;

Это произошло потому, что каждый из трех блоков

1

div

1

1px

1

322px

Умножте это значение ширины на 3 (количество блоков-колонок) и в результате получиться общая ширина 966px, что явно больше ширины блока-родителя 960px. Результат для браузера - сместить последний блок вниз!

Именно по этой причине свойство

1

border

1

outline

1

div

1

outline: 1px solid #ff0000;

Не имеет значения, какой толщины вы сделаете

1

outline

1

div

1

div

Сразу становится ясно преимущество использования

1

outline

Другое отличие

1

outline

1

border

1

outline

Другими словами, вы не можете просто создать левый

1

outline

1

outline

1

border

1

outline

По этой же причине невозможно изменять цвет, ширину или стиль какой-либо одной из сторон элемента. Если необходимо создать границу

1

outline: 2px dashed yellow

Заметьте, что элемент может одновременно иметь оба свойства

1

border

1

outline

1

outline

1

border

1

outline

1

border

Если элемент также имеет

1

margin

1

outline

1

outline

1

margin

Автор статьи: Eric Meyer - “Smashing CSS Professional Techniques for Modern Layout”

Два дня назад на смену моему старенькому ноутбуку Acer Extensa 5620 пришел новый, молодой и современный - ноутбук ASUS K56CM. Компьютер понравился всем - алюминиевый корпус, матовый экран, технические возможности на уровне бюджетного ноутбука с хорошей производительностью. В тому же очень тихий в работе - его почти не слышно.

Но, как всегда, не обошлось без ложки дегтя. На ASUS K56CM стояла предустановленная Windows 8. Сказать, что я имею какое-либо предубеждение против этой ОС я не могу. В принципе, она совсем неплохая и работать в ней можно абсолютно свободно. Что я попытался сделать в течение первых суток с момента появления нового ноутбука на моем рабочем столе.

Однако чувствовал я себя в этой системе неуютно. С моей личной точки зрения совершенно лишние для Desktop плитки. Зачем-то нужно было попадать курсором в правый нижний угол, чтобы добраться до кнопки выключения и всего лишь остановить машину. В общем и целом можно было сказать - не мое это!

После раздумий и взвешиваний за\против я решил для себя все-же “заморочиться”, но поставить на ASUS K56CM систему Windows 7 вместо Windows 8. Хотя и предвидел некоторые трудности на этом пути, две главные из которых - это BIOS и драйвера под Windows 7. Проблема с BIOS заключается в снятии блокировки на переустановку ОС на этом ноутбуке. Проблема с драйверами - почти не проблема, но также возникли некоторые сложности.

Вход в BIOS ноутбука ASUS K56CM

Неожиданно для себя не смог сразу же войти в BIOS ноутбука, пришлось немного “поволноваться”. Но все оказалось просто.

Вход в BIOS ноутбука ASUS K56CM можно выполнить через клавиши (на выбор):

• Tab+F2
• Delete (который на NumPad)

Это два варианта, которые лично у меня сработали. Тут главное, чтобы нажать и держать нажатой клавишу с самого момента запуска ноутбука. Иначе момент “проскочит” и в BIOS не попадем.

Снятие блокировки в BIOS ASUS K56CM

После того, как попали в BIOS, нужно выполнить два действия.

Первым шагом заходим во вкладку Boot и включаем (Enabled) опцию Launch CSM:

Boot - Launch CSM - Enabled

Вторым шагом переходим на вкладку Security и отключаем (Disabled) опцию Secure Boot Control:

Security - Secure Boot Control - Disabled

Сохраняем изменения в BIOS и выходим из него, нажав клавишу F10.

Меню выбора загрузки ASUS K56CM

Когда нужные изменения внесены в BIOS, можно приступать к обычной процедуре установки Windows 7 с диска (я делал инсталляцию с него). Чтобы загрузиться с установочного диска, нужно открыть меню выбора загрузки. Для этого нужно нажать и держать нажатой клавишу Esc. Затем выбираем оптический дисковод и процесс запущен.

Но не стоит забывать одну вещь. Чтобы Windows 7 правильно встала и от Windows 8 не осталось и следа на ноутбуке ASUS K56CM, перед инсталляций необходимо полностью удалить все существующие разделы на жестком диске и создать новые, с соответствующим форматированием.

Делается это с помощью специальных программ для редактирования разделов жесткого диска. Такими программами являются Acronis Disk Director, Gparted и многие другие. Достаточно в поисковой строке Google ввести запрос: “программы редактирования разделов жесткого диска”. Есть платные и бесплатные - все дело вкуса и умения.

Драйвера под Windows 7 на ASUS K56CM

После успешной инсталляции ОС Windows 7 на ноутбук ASUS K56CM насущной задачей стала установка драйверов. Для этого поступил привычным для себя способом - с помощью диска DriverPack Solution 13 r399 Full Final.

Автоматически поставились все драйвера, кроме чипсета под Intel. Перед этим система сделала предупреждение, что драйвера ненадежны! Однако я понадеялся на авось - и ноутбук вылетел с синим экраном смерти при попытке инсталляции этих драйверов.

Правда, я отделался легким испугом и все обошлось. Пришлось скачивать по отдельности все пять пакетов драйверов для чипсета с официального сайта ASUS.

Список этих пакетов (которые не захотели ставиться из-под DriverPack Solution) таков:

• Chipset_Intel_Win7_64_Z9301020.zip
• DPTF_Intel_Win7_64_Z6011067.zip
• IRST_Intel_Win7_64_Z11101006.zip
• MEI_Intel_Win7_64_Z8101252.zip
• Rapid_Start_Technology_NonUI_Win7_64_Z1001024.zip

ASUS-ские утилиты-приблуды скачивать и устанавливать не стал. Только систему загромождают. Windows 7 на моем ноутбуке ASUS K56CM до сих пор работает нормально, проблем нет.

На этом все.