Главная Инструменты TopStyle


CSS верстка на TopStyle Pro. Часть 1

 Печать E-mail
Автор Administrator   
11.09.2009 г.

Рейтинг 1.8/5 (5 голосов)

TopStyle Pro - одна из лучших программ для CSS верстки сайтов. Поэтому я предлагаю рассмотреть практические примеры верстки веб-страниц с помощью этой программы:
  • С горизонтальным, верхним меню навигации,
  • Резиновую верстку
  • Фиксированные способы верстки не порождающие ни каких проблем с браузерами.

Если вы в точности повторите все эти трюки CSS, вы сможете спокойно рассматривать свою кандидатуру на вакансию веб-дизайнера, верстальщика в ближайшую веб-студию. Если не хотите ждать, пока вы наберётесь опыта.
 
Запустите программу TopStyle Pro. Создайте папку для вашего нового тренировочного шаблона сайта. - Начнем с классической «резиновой» верстки. Мы обойдемся простейшей, статической схемой позиционировании элементов, даже не прибегая к использованию такого свойства как position. Так же, мы не будем работать с такими свойствами как width и height – потому, что ширина блочных элементов будет определяться шириной своего родителя. (родительского элемента, а высота напрямую зависит от объёма контента – авто…) Полный, наглядный пример резиновой верстки без проблем. И так, мы создаём полноценную основу веб-страницы с четырьмя рабочими областями.

Основа для страницы

Регистрируем в программе новый сайт.

Регистрация нового сайта

1. Даём осмысленное название своему сайту.
2. Указываем путь к корневой папке, жмем Ок.

Создадим саму основу, Html – разметку.

Html – разметка

Самое первое правило!  Вставим основные строчки . Всегда и во всех веб-документах указывайте эти значения!!

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

Вставляем DOCTYPE

Это надо помнить как «Отче Наш…»

Создадим главные блоки – области нашей веб-страницы.

 

Создание главных блоков

 


Вот наш подробный код:

<head>
<title>Правильный сайт</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1 id="header">Правильный сайт</h1>
<div id="menunav">
<div id="menu">
<p>Здесь</p>
<p>Вставим</p>
<p>Ссылки</p>
<p>Навигации</p>
</div>
</div>
<div id="textblock">
<div id="text">
<h2>услуги веб-дизайнера</h2>
<p>Всякое новое неминуемо попадает под самое пристальное внимание сторонников старого – ибо в этом новом устоявшиеся традиции видят своего низвергателя. Немало было сломано копий по поводу фриланса – удаленной работы. Но в данном случае новая традиция, а правильнее новые трудовые отношения не отменяли старых – просто родился их новый вид.
</p>
<p>Сторонники традиционной формы отношений принялись вовсю критиковать удаленную работу: каких только страшных примеров не приводится в доказательство правоты убеждений в том, что фриланс – это многократный риск. Риск получить некачественную работу, риск потерять время и деньги, риск разувериться во всем человечестве сразу.
Полноте. Приводить пример – неблагородное занятие. Равно с таким же успехом можно приводить пример риска традиционных договорных форм трудовых отношений.</p>
</div>
</div>
<div id="footer">
<p>© Правильная веб-студия, 2009.<br /><span style="white-space: nowrap">Тел.: (4222) 875-23-60.</span></p>
</div>
</body>
</html>

Наша разметка готова!

Первая страница

Нажмем на кнопочку «полного обзора» во весь экран и полюбуемся нашим созданным шедевром.

Пример страницы
Вот так выглядит наш шаблон без дизайна оформления. Читайте дальше Как создать CSS дизайн или CSS верстка на TopStyle Pro. Часть 2
 

 

Похожие темы

 

Добавить комментарий

Вы можете добавлять комментарии, относящиеся к данной теме. Регистрироваться при этом необязательно.


Защитный код
Обновить

Rambler's Top100