Счётчики





Рейтинг@Mail.ru

Яндекс.Метрика




Навигация



Блоки DIV


DIV-Вёрстка


design

Общий успех веб проекта зачастую зависит от долгих, кому-то покажется даже просто нудных, разбирательств и различных исправлений и переделок, может и не совсем лёгких, но зато очень даже интересных и увлекательных. Поэтому пожелаю вам преодолеть этот непростой барьер, во всём разобраться и подумать ещё раз. Кажется совсем запугал, ну, решились, тогда ВПЕРЁД...


Примерный план работы:


1. Тема сайта у вас есть - то что не давало покоя голове.

2. Доменное имя придумано, а может даже и зарегистрировано (где лучше и дешевле расположить свой сайт, т.е. хостинг).

3. HTML редактор - Дримвьювер или Фронтпейдж, а так же Notepad++ (я использую его - очень удобный редактор). Без них невозможно создание веб страниц.

4. Adobe Photoshop скачан и готов к работе. Ведь без этого графического редактора тоже не обойтись, если вы захотите иметь на своём сайте картинки и фотографии - для правки и коррекции изображений.

5. Тексты статей для сайта составлены и сохранены в Office, или хотя бы в простом блокноте.

6. Картинки разные, по теме сайта, тоже скачали откуда только можно.

7. Все папки и файлы, на компьютере созданы, (ну, например, "мой_сайт"), в которую поместили тексты, картинки и другие элементы сайта. В системном разделе - (С:) всё это держать не советую, т.к. иногда приходится этот раздел форматировать, поэтому лучше поместить это в другой раздел, к примеру (D: или F: и т.д.).




Шаблон сайта


Итак, приступаем к вёрстке собственного шаблона. Для начала создаём и называем папку для хранения файлов нашего будущего веб проекта (обычно имя сайта), а затем создаём внутри неё текстовый файл с расширением «.html» и названием «index» (первая страница), а когда сюда же сохраните файл «index» сделанный в HTML редакторе, текстовый файл можно удалить. Ещё создаём внутри этой же папки и размещаем текстовый Файл с именем «style» и расширением «.css» (в нём будут лежать наши внешние файлы стилей). Сюда же можно добавить и ещё одну папку «img», куда будем кидать картинки и фото используемые при вёрстке сайта. Всё это хорошо видно на изображении рядом. Ещё раз повторюсь, для правильной и надёжной работы, файлы «index», «style» и «img» должны лежать в одной папке.

Ну, а теперь скопируйте приведённые чуть ниже «HTML ТЕГИ» в свой HTML редактор и сохраняем как «index.html». Для работы с кодом довольно удобно использовать универсальный редактор Notepad ++ с подсветкой, хотя, при дальнейшем обладании навыком работы, более функциональным решением может оказаться Дримвьювер.






<! Это ваш первый DIV шаблон --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <! Мета-теги --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="краткое описание страницы" /> <meta name="Keywords"ключевые слова"> <! Название страницы --> <title>Шаблон-1 (3 колонки)</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <! Начало DIV вёрстки --> <div id="container"> <! Шапка сайта --> <div id="header"> <! Между h1-/h1 вписываете своё название сайта --> <h1>Название Сайта</h1> <p>ваш девиз или лозунг</p> </div> <! Меню сайта --> <ul id="menu"> <li><a href="http://ваш_сайт/имя_страницы-1.html">Раздел-1</a></li> <li><a href="http://ваш_сайт/имя_страницы-2.html">Раздел-2</a></li> <li><a href="http://ваш_сайт/имя_страницы-3.html">Раздел-3</a></li> <li><a href="http://ваш_сайт/имя_страницы-4.html">Раздел-4</a></li> <li><a href="http://ваш_сайт/имя_страницы-5.html">Раздел-5</a></li> </ul> <div id="left"> <br /> <h1>Левая колонка</h1> <br /> <p>Ваш основной КОНТЕНТ - Здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста. Здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста.</p></div> <div id="right"> <br /> <h1>Правая колонка</h1> <br /> <p>Здесь пишите текст для ПРАВОЙ колонки - здесь пишите просто много текста, здесь пишите просто много текста.</p> </div> <div id="content"> <br /> <h1>Основной контент</h1> <br /> <p>Здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста. Здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста.</p> <p>Здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста. здесь пишите просто много текста. здесь пишите просто много текста, здесь пишите просто много текста. здесь пишите просто много текста. здесь пишите просто много текста. Здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста.</p> <p>Здесь пишите просто много текста, здесь пишите просто много текста, здесь пишите просто много текста.</p> </div> <div id="clear"></div> <! Подвал сайта --> <div id="footer"> <p>Copyright © Все права защищены.</p></div> </div></body></html>




Ваш первый шаблон готов. Если всё сделано верно у вас должно получиться что-то вроде этого. shablon-1

Да примерно так будет выглядеть ваш первый шаблон, а далее может и весь сайт, если вы освоите ДИВ-ную вёрстку, что как видите не очень и трудно, просто надо захотеть и попробовать и всего лишь. Не нравится в три колонки можете выбрать в две колонки: такой или такой. Выбирайте любой шаблон - какой понравится, в общем надо начинать и не тянуть кота за хвост, не останавливайтесь, желаю всем УСПЕХОВ и огромной УДАЧИ!!!