Поиск - Участники - Календарь
Перейти к полной версии: Дизайн сайтов
ElderScrolls.Net Conference > Библиотека > Дизайн и Графика
Страницы: 1, 2
Eternal
Я тут недавно решил страничку создать. Создал и теперь задаюсь вопросом: практически на всех сайтах есть какой-либо уникальный дизайн. На ESN'е дизайн(если я о том) состоит из различных узоров, узорчатого шрифта и т.д.
Мне бы хотелось узнать как так сделать. Я не хочу повторяться и рисовать узорчики на своей странице, я просто хочу знать каким образом рисовать дизайн(где, как, чем). Попробую на основе советов создать что-нибудь свое.  smile.gif
Vladixxl
Я точно не знаю, но это дело наверняка делается в обычном графическом редакторе. Если хорошо знать язык html и владеть графическим редактором, то это не составит труда.
Marauder
>> Eternal:
Дизайн сайта зависит в основном от фоновых картинок (рисуются в любом графическом редакторе) и шрифтов (прописываются в html-коде). А вообще на основе советов создать что-нибудь серьезное достаточно сложно. Лучше почитать какой-нибудь мануал, в интернете их море.
Eternal
>> Marauder:
Да смотрел я в инете  мануалы всякие - ничего толком не объясняют - только про обычные страницы пишут и все.

добавлено Eternal - [mergetime]1195670137[/mergetime]
>> Marauder:
А шрифты как делать? Качать или в граф. редакторе писать?
Marauder
>> Eternal:
Цитата: 
Да смотрел я в инете  мануалы всякие - ничего толком не объясняют - только про обычные страницы пишут и все.

Да в принципе этого в большинстве случаев и хватает. Поставить свой фон вместо стандартного - страница уже красивше. Но если мало, посмотри материалы по DHTML и Java Script.

Цитата: 
А шрифты как делать? Качать или в граф. редакторе писать?

Это уже от твоих целей зависит. Если никакой не нравится - придется рисовать.
Dr. YankeeDoodle
Ндаааа, вопросец. smile.gif
Для начала рекомендовал бы Лебедевское (ага, кидайтись, кидайтесь в меня гнилыми овощами!! biggrin.gif ) "ру/Ководство" - для знакомства с основными нормами и традициями дизайна вообще, включая и веб- и граф-.
Воспитывать вкус.
А потом уже решать браться за это или нет.
Потому что надо выкладываться, действительно: идея без должной реализации - такое же ничто, как и реализация без идеи.
Думай, твори, снова думай... - вот что можно тут посоветовать.
NixRooT
Сначала необходимо выучить основы HTML и основы работы в граф. редакторе. Весь код рекомендую набирать самому (ничего лишнего не будет). Также можно использовать спец. веб-редакторы, но осуществить до конца свою дизайнерскую задумку скорее всего не получится. Некоторые "модные" сайты содержат различные flash и js-вставки, но этим не стоит сильно увлекаться (а лучше вообще не использовать).

добавлено NixRooT - [mergetime]1195713054[/mergetime]
Еще не стоит увлекаться вставкой многочисленных картинок (а изображение в качестве фона лучше вообще не использовать). Все должно быть в меру, "просто, но со вкусом". Иногда можно воспользоваться CSS, но, повторюсь, не злоупотреблять. И еще следует продумывать структуру и дизайн сайта так, чтобы он выглядел привлекательно и с картинками, и без них...
Grom Hellstrom
>> Eternal:
Сначала рисуется макет. В чем разницы особой нет. Обычно это либо фотошоп либо корел.
На нем рисуешь все так как это должно быть в финальном варианте. Далее решаешь, что из этого останется  картинками, а что будет реализовано средствами HTML. Потом делаешь примерную нарезку макета прикидывая как это все сверстать, что бы не уплыло при масштабировании окна. Ну и потом уже собственно режешь и верстаешь. Верстать можно блокноте или юзать всякие визивиги а-ля дримвивера. Вот в кратце так вот.

добавлено Grom Hellstrom - [mergetime]1195743408[/mergetime]
>> Eternal:
на шрифты забей. используй системные. если использовать нечто эдакое, то юзеру надо будет качать их отдельно для корректного просмотра. если уж совсем прет, то можно сделать отдельными картинками меню или нечто подобное, но сначала подумай надо ли оно тебе?

добавлено Grom Hellstrom - [mergetime]1195743644[/mergetime]
>> NixRooT:
без css сегодня хороший сайт не сверстать. А вот флэш и т.д. да с ними надо осторожно а лучше и забить на это.
Eternal
>> Grom Hellstrom:
Ну вообщем я так и сделал, только сначала написал код в html, а только потом подогнал фон, картинки, логотипы и т.п.
NixRooT
Написал на javascript TES-календарь. Установка: вставляем этот код в страницу. Календарь может пригодиться владельцам TES-сайтов, которые основаны на бесплатном хосте.
Eternal
>> NixRooT:
Спасибо! Везде искал этот скрипт, нашел, но не рабочий, а этот работает.
NixRooT
Site analyzer
Stox
Ну а из ресурсов непосредственно по html могу посоветовать Html book

По категориям, четко, ясно, понятно. Must read, так сказать.

И если действительно хочешь добиться успехов и избежать необходимости переучиваться потом (вдруг затянет), то сразу же отделяй содержание от дизайна - CSS и только он! А чтобы стимул был - CSS Zengarden. Сам полгода переучивался никакого дизайна в код не ставить - только в CSS, научился - волшебно!
venefica
Цитата: (Stox @ 18.02.08 - 23:20)
...сразу же отделяй содержание от дизайна - CSS и только он!

Заблуждаетесь, уважаемый. Не только.
Для того, чтобы качественно разделить контент от дизайна, вам придется освоить XML, XSLT и XPath, иначе ваша HTML-страница будет перегружена информацией о классах и id-шниках.
И потом, право, в наш век высоких технологий это дурной тон хранить текстовое содержание в HTML, не находите? )
Kuja
Цитата: 
Для того, чтобы качественно разделить контент от дизайна, вам придется освоить XML, XSLT и XPath, иначе ваша HTML-страница будет перегружена информацией о классах и id-шниках.

Господи. Зачем простому сайту XSLT, Xpath и т.д. Даже простую домашнюю страничку воротить в XML врядли кто будет. Геморроя выше крыши.

А большие и корпоративные сайты уже используют "движки". Кто будет руками верстать сотню страниц то? Да и то там XSLT, Xpath никто не использует. Ибо ни то ни другое до конца в браузерах толком не поддерживается.

Цитата: 
И потом, право, в наш век высоких технологий это дурной тон хранить текстовое содержание в HTML, не находите? )

В простой самописной странице ему больше негде быть. Только импортировать можно из стороннего файла. А так любая БД.
venefica
Цитата: (Kuja @ 26.02.08 - 15:04)
Зачем простому сайту XSLT, Xpath и т.д.
А большие и корпоративные сайты уже используют "движки". Да и то там XSLT, Xpath никто не использует. Ибо ни то ни другое до конца в браузерах толком не поддерживается.

Вы правы, для простейшей одинокой странички-визитки все это ни к чему.
Тем не менее, вопрос зашел о возможных технологиях разделения содержания и оформления страницы, и CSS был озвучен как единственно возможный способ, что вызвало, естественно, бурю эмоций у меня как у программиста. Ибо неверно.
А насчет неиспользования XSLT/Xpath на объемных корпоративных сайтах... могу сказать, что вы ошибаетесь. Работает. Еще как. )
Stox
Цитата: (venefica @ 26.02.08 - 14:38)
Вы правы, для простейшей одинокой странички-визитки все это ни к чему.
Тем не менее, вопрос зашел о возможных технологиях разделения содержания и оформления страницы, и CSS был озвучен как единственно возможный способ, что вызвало, естественно, бурю эмоций у меня как у программиста. Ибо ересь.


Уважаемый, видимо мой недостаточно детализированный пост ввёл вас в смущение. Извините.
Естественно, автору ветки связка HTML+CSS была предложена по потребностям, когда мы имеем статический (в основном текстовый) контент в единообразном оформлении. И здесь эта связка работает на 100%, т.к. для этого эти спецификации разработаны и были (и судя по деятельности W3C, они надолго в силе). К тому же можете ли вы назвать технологию для обработки стилевой структуры HTML (именно его), которая на данный момент стандарт де-факто, кроме CSS? Относительно средств просмотра, разумеется. Я слышу, из задних рядов кто-то крикнул "XSL"? Молодец, садись, пять! И всё же, несмотря на то, что с помощью XSL мы можем работать не только со стилями отображения, но и со структурой содержимого, вся его мощь раскроется только в связке XML+XSL (ну, не буду кривить душой, и XHTML+XSL). И в настоящее время W3C всячески нас к этому подталкивает, не отменяя (я подчеркиваю это), спецификаций HTML (грядет новая редакция) и CSS (уже на носу). Поэтому не будем плевать на столь мощную организацию и воспользуемся HTML+CSS для того, для чего они созданы.

А чтобы ваша страница не была перегружена информацией о:
Цитата: (venefica)
классах и id-шниках

неплохо было бы продумать её структуру, да не забывать о механизме вложенных идентификаторов.

И в наш век высоких технологий
Цитата: (venefica)
это дурной тон хранить текстовое содержание в HTML, не находите?


W3C не находит. Поскольку он (HTML) и разработан был для содержания подобного рода.

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

А теперь (с учетом того, что HTML+CSS был озвучен как оптимальный способ решения проблемы "содержание-оформление") будьте любезны смягчить свой пост со словом "ересь" чем-нибудь более адекватным. Понимаю ваши эмоции, но если вы работаете в IT-сфере, им там не место.

С уважением, ваш коллега.
venefica
Цитата: (Stox @ 26.02.08 - 17:20)
Естественно, автору ветки связка HTML+CSS была предложена по потребностям, когда мы имеем статический (в основном текстовый) контент в единообразном оформлении. И здесь эта связка работает на 100%, т.к. для этого эти спецификации разработаны и были.

Отлично! Полностью согласна с тезисом. Но мы ведь о другом говорим.
Меня в Вашем совете задело слово "только". Потому что это неверно (если уж Вам не по нраву "ересь" =). Не только такой метод существует.
И с этим Вы согласны, как я вижу.

Цитата: (Stox @ 26.02.08 - 17:20)
Поэтому давайте стараться давать адекватные случаю советы... если мы хотим чтобы автор данной ветки сам написал свою страничку, а не убежал в ужасе...

По-моему, автор, наоборот, заинтересуется. Кроме того, мое сообщение предназначалось в первую очередь Вам, Stox, так как [см. выше].

Кстати, о советах.
Автору темы предлагаю, если будет возможность и желание, обратить внимание на Javascript -- язык "оживления" статичных скучных страниц.
Я просто фанат... нет, маньяк Яваскрипта. Поэтому если возникнут вопросы с радостью постараюсь ответить.
Eternal
>> venefica:
Цитата: 
По-моему, автор, наоборот, заинтересуется

У меня сайт небольшой, пока, такие навороты мне не нужны на данный момент. Хватает CSS и HTML.
Цитата: 
обратить внимание на Javascript

На ява скрипты уже обратил внимание, очень полезная вещь, сам ее использую и изучаю))
Stox
Ну вот, разговор, я вижу, опять вливается в конструктивную тему.  smile.gif

Теперь, если уж мы вспомнили про Javascript (а я, признаться и позабыл вообще про него  blush2.gif ), то очень рекомендую автору ознакомиться с DOM, так как данный подход к манипулированию содержимым страницы уже становится очень популярным и главное - универсальным. Поэтому если сразу же при изучении Javascript-а параллельно изучать его методы манипулирования объектами страницы (ну, пока навык ещё не выработался), переход на XML будет легок, а методы пригодятся в будущем. Из ресурсов могу посоветовать вот этот цикл статей, в моём любимом стиле - доступно для новичков, но достоверно и четко. К тому же (ну вдруг?) автор (ветки, а не статьи) подчерпнёт здесь и ещё кое-что из области web-строительства.

P.S. Вообще меня чего-то корпорация IBM стала в последнее время радовать - вся такая правильная, в сферу IT-образования подалась. Частенько безвозмездно, т.е. даром.  smile.gif
NixRooT
Как сделать блок (например, черного цвета) с закругленными углами и рамкой (например, белого цвета) средствами CSS без использования изображений?
Eternal
>> NixRooT:
Может будет легче это сделать с изображениями и с CSS?
Morendil
>> NixRooT:
В спецификации CSS3 предусмотрено свойство border-radius -
http://www.w3.org/TR/2002/WD-css3-border-2.../#border-radius

На сегодняшний день CSS3 поддерживается основными браузерами чуть-менее чем наполовину, так что пользоваться стоит осторожно smile.gif
NixRooT
По поводу favicon... Товарищ FG! Как реализовывалась иконка для ЕСН? Надо обязательно конвертировать в формат Windows ICO или пойдет любой другой (gif, png)? А еще касательно Вин ИКО... Там битность 4bpp, 8bpp, 32bpp... А палитра? 16, 256 или полноцветная? Посоветуйте оптимальный вариант!
Handrew Readis
>> NixRooT:

Простите что вмешиваюсь, но похоже вам нужно http://favicon.ru/faq/ - вот это
Kuja
Палитра без разницы.
А формат считается любой. Можно и gif и png просто переименовать в ico. Есть даже анимированные "фавиконы". Но это изврат и не по стандарту.

Цитата: 
    * ICO: include multiple resolutions (the most commonly used being 16×16 and 32×32, with 64×64 and 128×128 sometimes used by Mac OS X) and bit-depths (most common being 4, 8, 24 bpp—i.e. 16, 256 and 16 million colors) in the file.
    * GIF: use 16×16 in 256 colors.
    * PNG: use 16×16 in either 256 colors or 24-bit.
NixRooT
OK. Спасибо. Про ФАК на фавикон забыл. Спасибо.
З.Ы.: сделал и на своем сайтике фавикон wink.gif
NixRooT
Цитата: (NixRooT @ 28.03.08 - 16:28)
Как сделать блок (например, черного цвета) с закругленными углами и рамкой (например, белого цвета) средствами CSS без использования изображений?


Сегодня разработал метод закругления уголков средствами CSS (http://nixroot.livejournal.com/1779.html).
Kuja
Цитата: 
Сегодня разработал метод закругления уголков средствами CSS

Лол. Этому методу уже как более трех лет.

http://www.cssplay.co.uk/boxes/krazy.html

Да и еще ошибок понаделал в коде, что в FF 3.0 не работает.
Dr. YankeeDoodle
>> NixRooT:
>> Kuja:
У меня FF 3 beta 5, работает... blink.gif
Часа три назад - пока стоял Лис нумер 2 - и в нем тоже работал.
Второй лис не прошел Acid2, третий - прошел.
NixRooT
smile.gif По поводу ошибок, если можно, поподробнее.

добавлено NixRooT - [mergetime]1211022951[/mergetime]
Администрация сайта упоминала о том, что ваша favicon возможно будет "слегка отрихтована". Дело в том, что я решил поставить на свой сайт похожую favicon и нарисовав, подумал, что вдруг сойдет за "отрихтованную"? Если не понадобится, то я поставлю ее на TESBox.
Morendil
>> NixRooT:
Не понадобится, но от плагиата рекомендую воздержаться.
NixRooT
Нет проблем.

добавлено NixRooT - [mergetime]1211036501[/mergetime]
CSS. Кто сможет популярно объяснить  в чем отличие class от id и в каких ситуациях что применять?
Morendil
>> NixRooT:
1. Атрибут id присваивается уникальному элементу на странице и не может повторяться, атрибут class может иметь одинаковое значение у нескольких элементов на странице.
2. Если у элемента заданы противоречащие описания id и class (например, черный и белый), то применяется свойство id (черный).
3. Элемент с определенным id можно вызвать с помощью JavaScript-функции document.getElementById()
AlexHog
Гм.. прошу простить, но более подходящей темы не нашел)
Вопрос такой: есть форма ввода (input.php), есть скрипт, обрабатывающий ее (handler,php), пишущий данные в БД и возвращающий их обратно в форму ввода.
Как бы мне не просто вернуться в input.php, но и автоматом вернуть ему данные?

методом get всё просто: header('location: input.php?param1=a&param2=b&param3=c');
а вот как бы через post?..
NixRooT
o_O А если встроить обработчик формы в саму форму и работать только с ней?
AlexHog
э-э-э...
/ошалело чешет репу/
ну у вас и фантазия, сэра))
попробую. Если удастся запихнуть пхп-скрипт в яваскриптовую функцию...
NixRooT
Скорее всего, вы не правильно поняли мой предыдущий пост (или я не понял вас вообще)... В топку js. Есть форма input.php. В нее же встраиваем код обработки данных (соответственно, для начала обработки будем обращаться к этой же форме и возвращать в нее же результат).
AlexHog
Thx, всё получилось.

надо же... скрипт "сам в себя"...
и в голову раньше не взбредало.
NixRooT
Какой единице измерения в CSS соответствует значение тега <font size="x">?
Kuja
px обычно.
NixRooT
Допустим, тег <font size="2">. Сколько тогда пикселей писать в font-size? А может что-то из pt, em или ex?
Kuja
Синтаксис

Код:
font-size: абсолютный размер | относительный размер | значение | проценты


Аргументы

Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Относительный размер шрифта задается аргументами larger и smaller.

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.


Цитата: 
<font size="2">

Вообще является неверным написанием и поэтому будет считаться ошибкой.
NixRooT
Лень иногда воспользоваться поиском и напрягаю людей smile.gif
Нашел соответствия (xx-small, x-smal, small, medium, large, x-large и xx-large). В пикселях: 1 = 10.8px, 2 = 13.5px, 3 = 16px.
Спецы рекомендуют пользоваться ex: 1 = 1.3ex, 2 = 1.6ex, 3 = 1.75ex.

добавлено NixRooT - [mergetime]1212084606[/mergetime]
Kuja, спасибо! smile.gif А почему <font size="2"> неверный? Это ж html.

добавлено NixRooT - [mergetime]1212084783[/mergetime]
Я же сравнивал тег <font size="2"> (html) и font-size (css).
Kuja
Цитата: 
А почему <font size="2"> неверный? Это ж html.

Потому что не указано 2 чего. 2 банана? 2 яблока? 2 гранаты?

Хотя почитал и вроде можно писать без всего. Но я уже давно описываю это все в CSS, чем по 10 раз в html. И лично считаю, что нужно указывать тип размерности.
Lord Arkey
Цитата: (NixRooT @ 29.05.08 - 21:13)
Это ж html.

На мой взгляд size лучше в css прописывать, чем по html.. В дальнейшем работать с сайтом удобнее будет (в любом случае.. начиная от движка и заканчивая статическими страницами)..
NixRooT
Понятно. Я как раз и спрашиваю, чтобы постепенно перебраться в CSS.

добавлено NixRooT - [mergetime]1212118706[/mergetime]
Плохо то, что текст в некоторых браузерах различается. Скорее всего буду указывать размер в пикс.
Arist
Такой вопросец... мне нужен код что бы при нажатии допустим на раздел выскальзывали подразделы. У меня что-то получалось, но с белым фоном и мулипусеньким текстом... какой правильный код-то?
Dr. YankeeDoodle
>> Kuja:
Цитата: 
Потому что не указано 2 чего. 2 банана? 2 яблока? 2 гранаты?

Так это ж, вроде, относительный размер? Не в кеглях и не в пикселях... А хэтэмээльная fuzzy logic biggrin.gif
NixRooT
@ Arist: как в меню ESN? Или горизонтально? Кстати подобных скриптов реализовано достаточно... Лучше воспользуйтесь поиском.
Упрощенная версия форума. Для перехода в полную нажмите на эту ссылку.
Invision Power Board © 2001-2024 Invision Power Services, Inc.