Редагуємо профіль автора

В наших блогах з’явився новий блок — «Про автора». І звісно, він також потребує дизайнерської уваги 🙂 В залежності від шаблона цей блок може по різному розміщуватися у вузькій шпальті та мати різні шрифти і кольори. За цей блок відповідають такі селектори: 

BlogAuthorsBox — сам блок 
BlogAuthorsTitle — напис «Про автора»
BlogAuthorsBox li — лінк на профіль автора блога

Пропоную обрати один з трьох варіантів дизайну блока:

Мінімалістичний

Якщо ви не хочете привертати особливу увагу користувачів до цього блока, але вам хочеться його трохи «причесати», цей варіант для вас.

 

В цьому варіанті було б гарно вирівняти блок.

1. Заходимо в CSS блога, шукаємо вищенаведені селектори. Видаляємо їх всі з CSS’у та прописуємо таким чином:

#BlogAuthorsBox {}
#BlogAuthorsBox li {}
#BlogAuthorsTitle {}


2. Заповнюємо селектори потрібним вам кодом. Як приклад, надаю код з вищенаведеного малюнка:

#BlogAuthorsBox {
background-color:#EFEFEF; /*Прописуємо колір фону блока*/
border:1px solid #AAAAAA; /*Прописуємо рамки блока*/
padding-top:10px; /*Прописуємо розташування блока у вузькій шпальті; в моєму прикладі блок зміщено на 10 пікселів вниз від попереднього блока, що над ним (календар або архів)*/
}

#BlogAuthorsTitle {
text-align:center;
/*Розміщення напису «Про автора» всередині блока*/
}

#BlogAuthorsBox li {
padding-left:40px;
/*Розташування лінка; в даному випадку його зміщено на 40 пікселів вправо*/
list-style-type:none; /*Відключає стилі списку. Якщо цього не прописати, навпроти лінку буде розташовано крапочку, цифру або квадратик — в залежності від вашого браузера*/
}

Графічний

Якщо ви хочете, щоб на сторінку профіля вело графічне зображення (аватар, наприклад), вам підійде цей спосіб.

1. Нам знадобиться тільки один селектор: #BlogAuthorsBox {}, спочатку, як і в першому прикладі, видаляємо ці три селоектори #BlogAuthorsBox #BlogAuthorsBox li #BlogAuthorsTitle {} з CSS’у блога. 

2. Переходимо на сторінку власного профіля; копіюємо до Блокноту чи іншого текстового редактору посилання на нього.

3. Прописуємо до CSS’у такий рядок:

#BlogAuthorsBox {visibility: hidden;}

4. Йдемо за цим посиланням і дізнаємося, яким чином вставляти аватар до вузької шпальти блога 🙂

Креативний

А може, вас привабить такий вигляд блока, як на принтскріні вище?

1. Видаляємо елементи CSS’у, як і в минулих прикладах.

2. Прописуємо такі рядки:

#BlogAuthorsBox {
background-image:url(
адреса вашого малюнка);
background-position:left top;
/*Розташування малюнка*/
background-repeat:no-repeat;/*За допомогою даної опції малюнок не повторюється*/
padding-top:10px;
}

#BlogAuthorsTitle {
text-align:center;
}

#BlogAuthorsBox li {
padding-left:40px;
list-style-type:none;
}

Бажаю вдалих експериментів! Якщо у вас щось не виходить, ви завжди можете звернутися до мене і попросити розробити потрібний код для вашого блога.

З кожною новою заміткою орієнтуватися в цьому блозі стає все складніше. Вирішила винести найважливіші категорії в окрему замітку; що відтепер буде відкривати блог. Просто оберіть квіточку з тією темою, яка найбільше цікавить вас в даний момент.

Архітектура блога

Якщо ви вирішили змінювати CSS свого блога, але весь час плутаєтеся з назвами та місцезнаходженням потрібних селекторів, ці схеми вам стануть у пригоді. Кожен окремий блок блога обведено червоним, а під рискою, що йде з конкретного блока можна побачити назву селектора. який за нього відповідає. Деякі селектори в коді CSS вам можуть не зустрітися. Але якщо ви допишете їх власноруч, працювати будуть.

На першій схемі-скріншоті ви побачите основну сторінку блога; на другому — більшість селекторів будуть належати до відкоментованого змісту (коли на сторінці блога відкривається окрема замітка з коментарями). Змінюючи вказані на схемах селектори, ви будете змінювати зовнішній вигляд того блока, до якого вони належать.

Як користуватися схемами?

1. Наведіть на схему мишею.

2. Клацніть на ній правою кнопкою, та оберіть пункт спливаючого меню «Відкрити зображення». Ви можете просто передивитися схему та запам’ятати, які теги за що відповідатимуть; або скопіювати схеми собі на жорсткий диск.

Урок 9. Лінки -ІІ (практика)

На минулому уроці ми дізналися від Абетки, як правильно писати лінки та ставити якорі в замітках. Сьогодні пропоную трохи в цьому потренуватися 🙂 Спеціально для цього заняття Абеткою було створено два приклади:

1. Приклад застосування якорів в замітці
2. Приклад оформлення лінків за допомогою CSS:

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

За зовнішній вигляд як лінків, так і якорів в цих прикладах відповідає частина CSS’у, що описує їх батьківські елементи (блоки, в яких розташовані лінки). Зовнішній вигляд загальних лінків зазвичай прописується в CSS командами a {} (лінк загалом) та a:hover {} (вигляд лінка з наведеною на нього мишею). Для того, щоб надати унікальний вигляд лінкам якого-небудь окремого блока, додаємо до селектора даного блока часточку a або a:hover:

.BlogEntryContent + a
.BlogEntryContent + a:hover
— якщо хочемо змінити вигляд посилань всередині заміток, додаємо до селектора, що відповідає за контент замітки, a та a:hover і вписуємо до CSS коду блога окремими селекторами.
.CommentedEntryContent + a:hover
.CommentedEntryContent + a
— те саме робимо для селекторів, що відповідають за відкоментований зміст заміток.

Нові селектори мають виглядати так:

.BlogEntryContent a,
.CommentedEntryContent a {background:
фоновий колір посилання;
color: колір тексту посилання;
text-decoration: якщо хочете, щоб посилання не було підкресленим, впишіть none;
font-size: розмір шрифта у пікселях;
font-weight: товщина шрифта;
font-family: назва шрифта;
line-height: відстань між рядками у пікселях або процентах; } — якщо селекторам потрібно надати однаковий стиль, запишіть перед дужками з кодом через кому.

.BlogEntryContent a:hover,
.CommentedEntryContent a:hover {background:
фоновий колір посилання, що має змінитися при наведенні миші;
color: колір тексту, що має змінитися при наведенні миші;} — до селекторів з a:hover додаємо відомості тільки про ті елементи, що мають змінитися при наведенні миші.

Для зміни зовнішнього вигляду посилань для останніх заміток блога така формула:

#BlogTitlesLastEntries + a {}
#BlogTitlesLastEntries + a:hover {}

На прикладі блога CSS ми бачимо, що до #BlogTitlesLastEntries a:hover крім кольорової схеми була додана властивість border.

Абетку досить часто запитують, як змінити лінк, який поділяє замітку на основну частину та вступ. За цей лінк відповіда.ть ось ці селектори:

.InfoUnderEntryMore, .InfoUnderEntryMore а,
.InfoUnderEntryMore a:hover

Експериментуйте 🙂

Домашнє завдання: Пізніше всі ці навички вам стануть у пригоді при створенні власного сайту, а зараз ви маєте можливість добре поекспериментувати із зовнішнім виглядом ваших блогів 🙂 До речі, якщо ви вважаєте, що ми завершили з темою лінків, ви помиляєтесь — ми повернемося до них пізніше, під час вивчення графічних елементів в HTML та графічних мап HTML.

Від себе додам, що з наступного уроку ви дізнаєтеся  про всі основні правила додавання картинок в HTML, а також — яким чином робляться графічні мапи. За допомогою графічних мап можна робити справжні казкові речі. Зайдіть наприклад, на сайт Джоан Роулінг. Можливо, що за цим посиланням треба буде натиснути на «re-enter site». Ви побачите не звичайний проект з шапкою, текстовою частиною і меню; а побачите нанедбаний робочий стіл (я так розумію, самої Джоан). Клацаючи мишею по предметах ви будете переходити на інші сторінки сайту, або щось змінюватиметься на головній сторінці. Звичайно, в цьому випадку задіяно складне програмування, але зробити переходи на різні сторінки свого власного сайту з однієї картинки ви зможете 🙂

Нові шаблони

Шаблон

Шаблон

Шаблон

Д ва з нових шаблонів — конструктори. Що це значить, ви можете дізнатися клікнувши на зображенні шаблонів і прочитавши замітки всередині 🙂 На третій шаблон мене надихнуло розбирання старих листів. Чесно кажучи, листування звичайною поштою це одна з тих речей, яку я б не хотіла відпускати в минуле.

Якщо вам сподобався той чи інший шаблон, клацніть на малюнку, а потім знайдіть у вузькій шпальті шаблона, що відкриється, кнопочку «Копіюйте мій CSS»

Урок 9. Лінки — 1

Гіперлінки та Якорі

Гіперлінк — це «адреса» документу чи будь-якого ресурсу в мережі інтернет. Гіперлінком можна позначити будь-який веб-ресурс: сторінку HTML, зображення, медіа-файл і так далі.

Інтернетівський Якір не слід плутати з якорем рибалки, хоча заякорити він і може. Але не човник, а якусь конкретну документа. Якір — це гіперлінк, що використовується всередині документа, переводячи користувача з однієї його частини до іншої. Гарний приклад якоря — залінкований зміст книги, що була опублікована єдиним документом.

HTML-елемент Якір <a> використовуєтья для означення не тільки якорів, але й гіперлінків. Тому надалі я буду називати елемент <a> коли він переводитиме кліком на іншу частину одного й того ж самого документу якорем, а коли переводитиме на інший HTML-документ, лінком.

Правила написання лінка:

<a href=»інтернет-адреса»>Текст лінка</a>

Стартовий тег a містить в собі атрибут href, який робить зі звичайного якоря гіперлінк. 
Між відкриваючим та закриваючим тегами знаходиться текст, який будуть читати в браузері (і клікати по ньому) відвідувачі вашої сторінки. Майте на увазі, що зміст між тегами не обов’язково має бути текстом. Завжди можна залінкувати картинку 🙂

Пам’ятаєте, як додаються атрибути? До тега a після атрибута href можна додати атрибут target, який пояснює браузеру, в якому вікні відкривати лінк. За замовчуванням гіперлінк відкривається в тому ж самому вікні браузера. Додайте до тега target значення _blanktarget=»_blank»; і гіперлінк відкриється в новій вкладці:

<a href=»http://www.Blox.ua/» target=»_blank»>Створи блог!</a>

Якщо ми хочемо пролінкувати між собою частини однієї й тієї ж самої замітки, слід використовувати атрибут name.

Як зробити якір:

<a name=»comment»>Коментарі</a> (позначаємо заголовок тієї частини тексту, до якої хочемо перейти за допомогою лінка, в лапках a name знаходиться назва якоря)

Лінк до якоря з того ж самого документа:

<a href=»#comment»>Перейти до коментарів</a>

Позначка «#comment» вказує браузеру, що цей лінк веде до якоря з назвою comment.

Лінк до заякорених коментарів з іншої інтернет-сторінки:

<a href=»Інтернет-адреса сторінки#comment»>Перейти до коментарів</a>

Слід пам’ятати, що не можна різним якорям давати однакові назви. Якщо подтрібно зробити переходи на декілька фрагментів тексту з коментарями, відмічайте їх як comment1 і comment2.

Якщо браузер не зможе знайти якоря на який посилається лінк, він перешле користувача догори документа.

Прописуючи адреси лінків, не забувайте ставити слеші наприкінці: html/. Кожен лінк без кінцевого слеша генерує подвійний запит на сервері (в таких випадках сервер спочатку обробляє запит, самостійно ставить слеш і знов обробляє запит).

Сьогодні домашнього завдання не буде, а у вівторок ви знов зустрінетеся з Алісою, що пояснюватиме, як за допомогою CSS стилізувати всі ваші лінки 🙂