дизайн |
||||||
8:29:38 AM 2. Для начинающих.—>> 4. Как сделать стильный WEB-сайт.
|
Веб-дизайн для начинающих. Создание страничек в Интернет становится все актуальнее. Пытаются их ваять уже кому не лень. Но кроме желания ваять треба еще и каких-то основ и опыта. Кто-то ставит супер-пупер крутую прогу FrontpPage, но потом сам не знает, че она там генерит ему. Кто-то сдирает чужие ваяния, иной раз не сумев толком переделать под себя. Кто-то генерит что-то смежное между первыми и вторыми, одним словом, прикол да и только. Вот и решил я помочь тебе разобраться в этой фене - html.Что касается программ типа Frontpage - оставь их ламерам! Их делали для тех, кто не может все сделать сам. Если же ты будешь знать html, подобные программы несомненно тебе помогут облегчить жизнь при, например, конвертации прайс-листов в хтмл или быстром подборе нужных цветов и т.п. Для начала тебе понадобится выучить базовые теги html и принцип построения любой html-страницы. Любой html документ сроится по принципу Начало-Заголовок-Тело-Конец. Начало показывает тег <html>, а конец тег </html>. Кстати, феня тег это то, что заключено между < и >. Заголовок ограничивают теги <head> и </head>, а тело <body> и </body>. Заголовок обычно несет информацию для поисковых систем, некоторую официальную информацию, заголовок самой страницы и скрипты, которые выполняются до загрузки тела страницы. Тело - это все то, что отображается потом в браузере. А теги начала и конца позволяют однозначно определить страницу как html-страницу. Плюс ко всему файл должен иметь расширение htm или html. Первое пошло от систем, не поддерживающих длинных расширений, а второе от поддерживающих; в результате сейчас можно и с таким, и с таким. Используются еще расширения, к примеру, shtml и asp, но тебе это вряд ли понадобится вообще. Язык html это язык разметки, а не какой-нибудь язык программирования, поэтому он в принципе элементарен и не требует особых навыков, скорее требуется опыт создания страниц и дизайна, нежели опыт в написании кода. Код можно писать в чем угодно, лично я всегда пишу в Notepad. Итак, какие теги используются в html (я перечислю наиболее часто используемые и поддерживаемые всеми браузерами), некоторые даже сделал с картинками - когда не очень ломало, а для всех остальных в самом конце будет пример.<title></title> - заголовок хтмл-документа <center></center> - центровка <а атрибуты></а> - гиперссылка (атрибут ) или якорь (атрибут name) <br> - перенос каретки, по-нашенски переход на новую строку J <nobr></nobr> - по возможности разрывы не допускаются <b></b> - заключенный текст между тегами будет жирным <form атрибуты></form> - форма <frame атрибуты></frame>- задается кадр <frameset атрибуты></frameset> - задается набор кадров <noframes></noframes> - то, что будет отображаться в браузерах, не поддерживающих кадры <pre атрибуты></pre> - текст между тегами будет отображаться как есть (с соблюдением строк, переносов и интервалов) <img атрибуты> - изображение детской неожиданностиJ <map атрибуты></map> - определяет чувствительную область изображения к перемещению крысы <sub></sub>- нижний индекс (текст будет смещен вниз) <sup></sup> - верхний индекс (текст будет смещен вверх) <basefont атрибуты> - указывает размер шрифта для последующего текста <font атрибуты></font> - установка размера, цвета или гарнитуры заключенного в теги текстаПример: <font face="Arial" size="2" color="#FF0000"> <hr атрибуты> - горизонтальная линейка Пример: <HR ALIGN="LEFT" SIZE="3" WIDTH="100" NOSHADE>
<HR ALIGN="CENTER" SIZE="1" WIDTH="50%">
<HR ALIGN="CENTER" SIZE="5" WIDTH="90%">
<hn атрибуты></hn> - заголовок (n от 1 до 6) Пример: Заголовок h1 (align=left)Заголовок h3 (align=center)Заголовок h6 (align=right)<li атрибуты></li> - элемент списка <ul атрибуты></ul> - неупорядоченный список элементов <li> Пример:
<ol атрибуты></ol> - упорядоченный список элементов <li> Пример:
<р атрибуты></р> - абзац Пример: <p> с align=center <p> с недокументированной функцией align=justify, выравнивает абзац по обоим краям, в вебе очень удобно, типа используй и все такое <tr атрибуты></tr> - строка в таблице <td атрибуты></td> - столбец в таблице <table атрибуты></table> - таблица Пример:
В принципе, как ни странно, этого набора тебе вполне хватит, чтобы наваять что-то стоящее. Хотя это далеко и не полный список тегов, я перечислил все самые основные и часто используемые. А многие фичи делаются графикой и потом просто тегами собираются и форматируются. Для примера можно что-нибудь наваять. Так как я не приверженец фреймов, то все сделаю с помощью таблицы, да и тебе советую делать таблицами, а не в фреймах. Осталось придумать, что бы наваять. Вот что вышло: Замечания: - картинки мне было лениво ваять, и я просто сослался абсолютными ссылками на картинки с сайта www.xaker.ru - чтобы твоя картинка грузилась быстрее, всегда пиши width и height в <img…> Ну и вот, в принципе, сам код: <html> Вот, что у тебя скорее всего получилось: Писать этот код, как ни странно, минуты 2 от силы. На этом примере я всего лишь показал тебе элементарный хтмл. Со временем это для тебя будет так же элементарно, как выключить компьютер. Другое дело, что потом ты можешь юзать всякие другие фичи, применительные к вебу: скрипты, апплеты, динамический хтмл (DHTML) и т.п. Хотя все по мере надобности. С виду простыми тегами можно будь здоров что наваять, если еще хорошо владеть графикой. Одним словом, ваяй, фигарь и угорай! Отдельно еще рассмотрю формы и фреймы (кадры). Начнем с фреймов. Если уж прибило использовать тебя фреймы, то эта фича юзается следующим макаром. Сначала грузится файл с фреймовой структурой, в котором ты определяешь параметры каждого фрейма, и то, что изначально в каждый фрейм загружается. А то, что грузится в каждый отдельный фрейм, ни что иное, как обычный хтмл-документ. Для примера создадим 3 фрейма: один вверху и два внизу. В верхний загрузим какую-нить картинку с Хакера, а в двух нижних подпишемся. Главный хтмл-файл будет выглядеть вот так: <html> Ну и плюс коды для хтмл-ек для всех 3-х фреймов: <HTML> <HTML> <HTML> Вот, что у тебя скорее всего получилось: Ну и теперь децел о формах. Удобные такие хрени, которые позволяют создавать формочки со списками чего-либо, текстовыми полями, радиокнопками и т.п. Причем потом все введенные данные можно при нажатии кнопки Submit обработать скриптом или же переслать на мыло. Остановимся на втором варианте и наваяем для примера простенькую форму, но содержащую разные элементы: Код формы: <head> Ну что, вник? А это тока самые основы, дальше как в анекдоте - чем дальше в лес, тем жирнее партизанки. Короче, распечатай, повесь на стенку и проверяй зрение. Еще можно другу загнать за четвертной. То есть статья очень ценная, вырежи и не выбрасывай.
|
дизайн |
||||||