Показати повну версію : вебдиз (лікбез для нубів)...
пропоную маленький хелп для всіх бажаючих....
вебдиз.
це наука, і не варто до неї ставитися легковажно...
часи "чистого хтмл" "народ-ру" і "бум-ру" -- давно минули.....
сайтів -- мільйони, щоб "вижити" -- тре робити багато....
пс. сявич, друже, продовжиш?.... http://www.forum.levus.info/Smileys/comfort/smiley.gif
Samojlovu4
21.01.2008, 13:09
Окей, а слово "для" з назви теми що означає?!
пс. сявич, друже, продовжиш?....
Без питань :) От тільки з чого почати? :ninja:
Почнем з фільософії: дизайн і веб-дизайн речі абсолютно різні :). Те що гарне на малюнку (картині) може (і скоріше всього буде) сприйматись інакше на екрані. Чому? Причин багато:
1. Різна кольоропередача. Намальоване, сфотографоване, зображене на екрані, видруковане на плівці - у всіх випадках різні зображення (по деталі напевно до Левандівки :)).
2. Важкість читання з екрану. Книгу друковану читати набагато легше ніж на екрані - це факт. Тому підсвідомо людське око ігнорує значну частину "зайвої" інформації - концентрується на основному. Звідси - лаконічність тексту і мінімалізм графіки.
...
П.С. Передаю естафету...
дизайн і веб-дизайн речі абсолютно різніКатегорично не згоден. Закони форматування тексту для зручності читання однакові для поліграфії і для вебу. Заголовки, відступи, списки, зноски, ілюстрації - якщо все давно вирахувано, придумано і випробувано, то навіщо вигадувати велосипед? Просто слід ті самі пропорції перенести з поліграфії на веб і ми отримаємо зручну для сприйняття подачу інформації на моніторі.
levandivka
21.01.2008, 14:07
Ггг... :)
Пупере, Сявичу... :)
Це все добре, але є купа джерел для чайників. Поки не вичитають, не переварять - діла не вийде.
слід ті самі пропорції перенести з поліграфії на веб і ми отримаємо зручну для сприйняття подачу інформації на моніторі.
Згоден, але ж є різні завдання. Часто "стандартна зручність" конфліктує з ідеєю сайту.
І тоді доводиться шукати спеціяльну модифікацію велосипеда...
Нє?
Категорично не згоден. Закони форматування тексту для зручності читання однакові для поліграфії і для вебу. Заголовки, відступи, списки, зноски, ілюстрації - якщо все давно вирахувано, придумано і випробувано, то навіщо вигадувати велосипед? Просто слід ті самі пропорції перенести з поліграфії на веб і ми отримаємо зручну для сприйняття подачу інформації на моніторі.
Я не про поліграфію, бо це фактично той же веб-дизайн але на папері а не екрані. Йшлося про глобальніше значення дизайну як мистецтва
Додано через 4 хвилини
Це все добре, але є купа джерел для чайників. Поки не вичитають, не переварять - діла не вийде.
Так хотілисьмо лаконічно (пупер в тому спец :)) то всьо скинути докупи щоб чайники не читали тонни літератури (є багато зайвого і не потрібного). Та й літературу треба знати яку читати, нє? Список додасться :)
моя черга.... http://www.forum.levus.info/Smileys/comfort/smiley.gif
що тре для того, щоб зробити перший сайт?...
знання хтмл?..
і цього досить....
<html> -- пояснення браузеру, що це веб-сторінка
<head> -- початок "прихованого" блоку, який використовується у службових цілях
</head> -- закриваємо цей блок
<body> -- початок блоку, який буде показано у вікні
(тутка пишемо все, що заманеться)
</body> -- закриваємо цей блок
<html> -- кінець веб-сторінки
для другого сайту цього вже мало....
тре знати, як мінімум, css
levandivka
21.01.2008, 14:37
Нє, Пупере!
Ви забули найважливіший елемент першого сайту:
<title>Найцікавіший сайт у світі!!!</title>
тре знати, як мінімум, css
Не як мінімум. Його (+ хвільософія веб-дизу) цілком достатньо :). Приклад: http://csszengarden.com/ - "сад" дизайнів зроблених засобами css. Тож для другого сайту читаємо книгу Ши і Хольцшлаг "Философия CSS-дизайна" (по дорозі можна прочитати будь-яку іншу книгу Моллі Хольцшлаг - кубіта знає в тому толк), дивимося "сад" і вперед. В перерві між розділами можна розвіятись Ководством Лєбєдєва (http://www.artlebedev.ru/kovodstvo/paragraphs/) - весело і повчально.
А гілку можна закрити на пару місяців поки читається книга, жарт :)
Нє, Пупере!
Ви забули найважливіший елемент першого сайту:
<title>Найцікавіший сайт у світі!!!</title>
я забув додати, що всі ці теги необов'язкові, хоч і бажані... http://www.forum.levus.info/Smileys/comfort/smiley.gif
Не як мінімум......
<...>
А гілку можна закрити на пару місяців поки читається книга, жарт
http://www.forum.levus.info/Smileys/comfort/smiley.gif
на перший погляд різниці немає:
<table width="200" border="1" bgcolor="red">
<tr>
<td>текст таблиці</td>
</tr>
</table>
і
<table width="200" border="1" style="background-color:red">
<tr>
<td>текст таблиці</td>
</tr>
</table>
другий варіант є навіть більш громіздким.....
його можна зробити і так:
<style type="text/css">
.tab_bg_color { background-color: red;}
</style>
<table width="200" border="1" class="tab_bg_color">
<tr>
<td>текст таблиці</td>
</tr>
</table>
який висновок можна зробити?...
якщо один раз потрібно змінити властивості елементу (чи таке взагалі трапляється?!) -- можна і не використовувати стилі...
якщо тре характеризувати багато елементів -- стилі незамінні!
А чому не так?
<div width="200" style="background-color:red; border:1px">текст таблиці</div>Значно лаконічніше
Значно лаконічніше
на все свій час..... http://www.forum.levus.info/Smileys/comfort/smiley.gif
levandivka
22.01.2008, 10:46
Значно лаконічніше
Лінивий - два рази робить. (с)
Якщо влада (/настрій) поміняється, замінити комуняцький style="background-color:red у кожному файлі буде довше, ніж замінити стиль у файлі css
<html> -- хтмл документ
<head> -- службова інфа
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> -- бажаний тег, пояснює браузеру в якому кодуванні має бути сторінка; в даному випадку "віндовс-кирилиця"
<title>назва сторінки</title> -- зрозуміло що це таке :)
<style type="text/css"> -- вставка стилів
.blue
{
color: blue; -- колір об'єкту
margin: 100px; -- відступ з усіх боків
}
.red
{
color: red; -- колір об'єкту
font-size: 20px; -- розмір кеглю
text-decoration: underline; -- підкреслений тест
}
</style>
</head>
<body> -- інфа, яка буде відображатися
<p class="red">банжур!</p> -- використано тег "абзац" (<p> </p>)
<div class="red">ведмед!!!</div> -- використано контейнер
<span class="blue">велкам!</span> -- використано застарілий контейнер, не рекомендується, ліпше <div> </div>
</body> -- кінець інфи
</html> -- кінець документа
Може я старію і відстав від сучасного вебдизу, але:
div і span - тут ти не зовсім правий. Спан не застарілий, просто рідше використовується. Як правило потрібний для задання стилю окремих слів в абзаці, в той час як Дів - стиль цілого абзацу. Принаймні так було колись :)
Далі радше з досвіду а не теорії:
margin: 100px; - стикався частенько з проблемами в деяких бравзерах якщо писав відступи всіх сторін таким чином. Якщо потрібна повишена надійність на всіх платформах і якщо не шкода трохи більше коду, то раджу писати отак:
margin: 100px 100px 100px 100px;
Це явно вказує що всі відступи по 100. Плюс потім простіше змінити один з них. Ще можна окремо margin-left, margin-right і т.д., але то якщо треба якусь одну сторону. Хоча бувають збоченці що пишуть так для всіх сторін :)
Хлопці, а може Ви ще й з метою викорінення поганих дизайнів допоможете безкоштовно переробити найгірші з них :)
(акція для форумчан)
Хлопці, а може Ви ще й з метою викорінення поганих дизайнів допоможете безкоштовно переробити найгірші з них
Можем допомогти викорінити :) А якщо серйозно то в цій гілці акцентуємо більше на теорії вебдизу і як його оформити програмно, але ще треба намалювати, а для того потрібно щоб руки з потрібного місця росли, в мене не з того місця, не знаю як в пупера :). Можем хіба тикнути пальцем і сказати що є добрим а що треба переробити.
писати отак:
margin: 100px 100px 100px 100px;
ми ж не для "прадвінутих юзвєрів" зара пишемо.... http://www.forum.levus.info/Smileys/comfort/smiley.gif
є ще padding...
знаю: тре враховувати старі браузери, але ну їх в баню......
я думаю так: якщо юзер не може встановити нормальний браузер -- толку з нього мало.....
vBulletin версії 3.7.3, © 2000-2008, Jelsoft Enterprises Ltd.
Переклад: © Віталій Стопчанський, 2004-2008