Home sims — библиотека игр The Sims - Инструкция по созданию персонального сайта - Web-дизайн - Для Web-мастера

Страница 1 из 1

Модератор форума: WOLF, MiHPro

Инструкция по созданию персонального сайта

WOLF

Дата: Понедельник, 06.07.09, 11:40:23 | Сообщение # 1

Мэр города

Группа: Админы

Сообщений: 10035

Пол: Мужчина

Симолеоны

« »

Ваше желание:

Разбираемся..

MiHPro

Дата: Понедельник, 06.07.09, 11:40:33 | Сообщение # 2

Группа: Модераторы

Сообщений: 65

Пол: Мужчина

Симолеоны

« »

Ваше желание:

В этой инструкции не будет специальных терминов, сокращений, пропущенных пунктов и т.д. Наша задача - объяснить основные принципы создания сайта тем, кто ещё не занимался этим интересным и потенциально полезным делом.

Итак, давайте начинать...
Сразу зададим ряд условий для разработки сайта:
1) У нас нет денег (или мы не хотим их тратить) - будем использовать бесплатный хостинг (место для размещения сайта);
2) У нас нет специальных навыков дизайна (Работы в Photoshop) - не будем использовать графику для создания шаблона;
3) У нас нет серьёзных навыков программирования, верстки и работы со стилями - напишем код в чудесной программе "Блокнот". Как и какой? - читайте ниже.

Начнём с того, что возьмём карандаш, листок бумаги и нарисуем макет будущего сайта. Тут никаких навыков кроме фантазии не надо. У меня получился такой желаемый макет:

Простенько, зато аккуратно. Главное, что мы следуем начальным условиям разработки нашей персональной странички.

Теперь, приступим к самому интересному - написанию исходного кода нашего сайта (пишем на языке HTML).
Начнем с того, что откроем программу "Блокнот". Видим перед собой такое окно:

Теперь запишем туда такой начальный код:
Доступно только для пользователей

Code

<!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">
<head>
<title>Российская школа CSS. Персональный сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="body">

Он призван обеспечить валидность (правильность) нашего сайта, задать его заголовок (title) и начать общий блок сайта.

Далее - нам необходимо задать верхний блок сайта. Конкретно - этот:

Для этого - запишем в наш блокнот такой код:

Code

<div id="header"><h1>Мой личный дневник</h1>
<a href="http://www.css-school.ru/">Российсая школа CSS</a></div>

Замечательно! первый блок задан. Теперь зададим блок с меню (навигацией по сайту). Вставим в блокнот такой код:

Code

<div id="navigation"><a href="/">Домой</a> <a href="/about.html">Обо мне</a> <a href="/gall.html">
          Галерея</a> <a href="/links.html">Полезные сайты</a> </div>

Готово. Теперь у нас есть навигация.
В своём шаблоне, мы не будем использовать страниц, а значит левая и правая колонки будут заданы блоками (div).
Запишем код для левой колонки:

Code

<div id="leftcolumn">
          <h3>Мои друзья</h3>
          <div id="rcs"><a href="http://www.css-school.ru/">Российсая школа CSS</a></div>
          <div id="gzweb"><a href="http://www.gzweb.ru/">GZweb.ru</a></div>
          <div id="wallday"><a href="http://www.wallpapersday.ru/">Wallpapers Day</a></div>
              <hr />
                 <h3>Интересные события</h3>
           <ul>
           <li><a href="/">Российская школа CSS оживилась</a></li>
           <li><a href="/">У GZweb.ru новый дизайн</a></li>
           <li><a href="/gall.html">Моя галерея</a></li>
           </ul>
           <br /><br />
          </div>

Теперь - для правой колонки (основного содержания сайта):

Code

<div id="rightcolumn">
            <h1>Мой дневник появился</h1>
            <img src="1.jpg"  alt="Мой дневник появился" /><br />
              Рад сообщить Вам, что сегодня начал работать мой собственный дневник!!!
;)
<div id="undernew">Я опубликовал этот материал <b>12 октября 2008 года</b>. Категория - <b>Новости дневника</b>.</div>
          </div>

Готово! Осталось сделать "подвал" сайта и закрыть наш код. Для этого - вставим в блокнот такой код:

Code

<div class="clear"> </div>
        
        <div id="footer">© 2008 Российская школа CSS. Материалы и шаблон сайта
          распространяются бесплатно.</div>
        
</div>

</body>
</html>

Вот и всё. Осталось - правильно сохранить нашу страничку. Для этого нажимаем: Файл -> Сохранить как -> index.html (Все файлы).

Теперь создадим остальные веб-страницы. Начнем с галереи.
Заменим в нашем коде правую колонку на такую:

Code

<div id="rightcolumn">
<div id="gall"><a href="/2.jpg"><img src="2s.jpg" alt="" /></a>
<a href="/2.jpg"><img src="2s.jpg" alt="" /></a>
<a href="/2.jpg"><img src="2s.jpg" alt="" /></a>
<a href="/2.jpg"><img src="2s.jpg" alt="" /></a>
<a href="/2.jpg"><img src="2s.jpg" alt="" /></a>
<a href="/2.jpg"><img src="2s.jpg" alt="" /></a></div>
</div>

Сохраним этот файл как gall.html (в одной папке с index.html и необходимыми картинками).

Сделаем раздел "Обо мне". Для этого заменим правую колонку на такой код:

Code

<div id="rightcolumn">
<div id="linfo" align="center"><img src="av.png" alt="Ya"></div>
<div id="myinfo">Информация обо мне...
</div>
</div>

Сохраним его как about.html

Далее - сделаем страницу со ссылками на интересные ресурсы. Для этого заменим правую колонку на такое:

Code

<div id="rightcolumn">
           <h1>Полезные ссылки</h1>
<a href="http://www.gzweb.ru/">Всё для Photoshop и веб-мастеров</a>
<div id="undernew">Ежедневно обновляемый, действительно полезный ресурс</div><br /><br />
<a href="http://www.css-school.ru/">Российская школа CSS</a>
<div id="undernew">Наше всё...</div>
         </div>

Сохраним файл как links.html

Итак... Самое простое - позади. Теперь - пришло время поработать со стилями. Для этого - создадим в папке с сайтом файл style.css (создаём тоже с помощью блокнота).
В первую очередь - задаём стили для всего шаблона:

Code

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Персональный сайт
style.css - Набор стилей для урока
=============================================================
*/

/* Задание стилей всего шаблона */
* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding:10px;
}

#body {
margin: 0 auto;
width: 960px;
}

Очень хорошо. Начало положено. Теперь зададим стили для блока заголовка:

Code

#header {
color:#fff;
width:946px;
padding:15px;
height:100px;
margin:5px 0;
background:#0d3143;
font:18px Verdana;
border:2px solid #466677;
}

#header a {
        text-decoration:none;
        color:#b7b7b7;
        font-size:13px;
        font-weight:bold;
}

#header a:hover {
        color:#ffa800;
}

Теперь надо оформить навигацию и добавить её кнопкам эффект при наведении на них мыши. Сделаем это:

Code

#navigation {
color: #fff;
padding: 10px;
background: #466677;
width:956px;
border:2px solid #0d3143;
margin-bottom:10px;
}

#navigation a {
        margin:2px 10px;
        padding:5px 7px;
        color:#fff;
        text-decoration:none;
        font-size:13px;
        font-weight:bold;
        border:1px solid #466677;
}

#navigation a:hover {
        background: #ffa800;
        color:#333;
        border:1px solid #ffd89b;
}

Теперь зададим все стили для левой колонки. Особое внимание стоит уделить атрибуту float:left (он задаёт обтекание блока по левому краю).

Code

#leftcolumn {
background:#e7e7e7;
display: inline;
color: #333;
margin-right:10px;
padding:10px;
width: 246px;
height:auto;
float: left;
border:2px solid #ddd;
}

#leftcolumn hr {
         margin:20px 0;
         border:0;
         width:95%;
         background-color:#0d3143;
         color:#0d3143;
         height:1px;
         text-align:center;
}

#leftcolumn ul {
        margin-left:10px;
        margin-top:10px;
}

#leftcolumn li {
        padding:5px 0;
}

#leftcolumn li a {
        text-decoration:none;
        font-weight:bold;
        color:#066dab;
}

#leftcolumn li a:hover {
        color:#ffa800;
}

#rcs a {
        display:block;
        padding:15px 20px;
        color:#fff;
        font:16px Verdana;
        text-align:center;
        text-decoration:none;
        font-weight:bold;
        background:#00a8ff;
        border:3px solid #a4e0ff;
        margin-top:10px;
}

#rcs a:hover {
        background: #a4e0ff;
        border:3px solid #00a8ff;
        color:#333;
}

#gzweb a {
        display:block;
        padding:15px 20px;
        color:#fff;
        font:16px Verdana;
        text-align:center;
        text-decoration:none;
        font-weight:bold;
        background:#22cb19;
        border:3px solid #a8f2a4;
        margin-top:10px;
}

#gzweb a:hover {
        background: #a8f2a4;
        border:3px solid #22cb19;
        color:#333;
}

#wallday a {
        display:block;
        padding:15px 20px;
        color:#fff;
        font:16px Verdana;
        text-align:center;
        text-decoration:none;
        font-weight:bold;
        background:#ff9c00;
        border:3px solid #ffd89b;
        margin-top:10px;
}

#wallday a:hover {
        background: #ffd89b;
        border:3px solid #ff9c00;
        color:#333;
}

Теперь зададим начальные стили правой колонки, её ссылок и картинок:

Code

#rightcolumn {
float: right;
color: #333;
padding:0;
width: 680px;
display: inline;
position: relative;
text-align:center;
}

#rightcolumn a {
        text-decoration:none;
        color:#115375;
        margin:5px;
        display:block;
        font-weight:bold;
}

#rightcolumn a:hover {
        color:#ff7200;
}

#rightcolumn img {
border:2px solid #2a6a8b;
padding:5px;
margin:10px;
background:#e7e7e7;
}

Отлично. Теперь - стили для оформления новостей -

Code

#rightcolumn h1{
color: #555;
display:block;
height:35px;
border-bottom:4px solid #ff9c00;
padding-left:30px;
font-size:28px;
margin-bottom:15px;
text-align:left;
}

#undernew,
#undernew1 {
color: #555;
padding: 10px;
background: #466677;
border:2px solid #2a6a8b;
margin:10px 0;
background:#e7e7e7;
}

Пришло время оформить и "подвал". Здесь обратим внимание на стиль .clear. Он позволяет избежать наезда подвала на основное содержание сайта.

Code

.clear { clear: both; background: none; }

#footer {
clear: both;
color: #fff;
padding: 10px;
background: #466677;
width:956px;
border:2px solid #0d3143;
margin:10px 0;
}

Вот и всё. Оформление главной страницы закончено.
Для страницы "Обо мне" зададим такие стили:

Code

#linfo {
       float:left;
       width:250px;
}

#myinfo {
        border-left:1px dotted #666;
        margin-left:250px;
        text-align:left;
        padding-left:10px;
        height:380px;
}

Для галереи зададим специальные атрибуты прозрачности. Скажу сразу, что они не являются валидными, но адекватно работают во всех распространённых браузерах.

Code

#gall a {
float:left;
width:210px;
height:135px;
padding:0;
margin:3px;
display:block;
filter:alpha(opacity:50);
opacity:0.5;
}

#gall a:hover {
filter:alpha(opacity:100);
opacity:1.0;
}

#gall img {
padding:0;
margin:0;
border:none;
}

Вот и всё. На этом пока остановимся. Спасибо за внимание!

DEMO
Скачать

Взято с Российская школа CSS

Безплатный дизайн успешным проектам.

MiHPro

Дата: Четверг, 09.07.09, 20:04:25 | Сообщение # 3

Группа: Модераторы

Сообщений: 65

Пол: Мужчина

Симолеоны

« »

Ваше желание:

Думаю тему стоит назвать иначе! Например:"Инструкция по созданию персонального сайта".

Безплатный дизайн успешным проектам.

WOLF

Дата: Четверг, 09.07.09, 20:18:02 | Сообщение # 4

Мэр города

Группа: Админы

Сообщений: 10035

Пол: Мужчина

Симолеоны

« »

Ваше желание:

MiHPro, да будет так..

MiHPro

Дата: Четверг, 09.07.09, 22:26:19 | Сообщение # 5

Группа: Модераторы

Сообщений: 65

Пол: Мужчина

Симолеоны

« »

Ваше желание:

2WOLF,

Безплатный дизайн успешным проектам.

Home sims Форум » Для Web-мастера » Web-дизайн » Инструкция по созданию персонального сайта

Страница 1 из 1

Статистика Форума
Кто был сегодня:
виолетта, Zaltis, ket00787, Lelik_05, Abella, Unica, lili_rara, 160299aaa, maksimwol, toha5271, nastya1712, Kisik, catty92, Wolfa, Romab1999, Bringing__happiness, катанаяна, Sanhira, lithium, Victoshka, XENIA19999, kimoto7, ritka564876eryu, Misery, Bailif, katya-joy, PearPad, Mariska-kiska, Same_man, Tatta, kazzma1988, 55i, Irik-love-sama, Soer, Rofael, Anastaisha, alic20, Animicka, Adesik, Shama, polinamandarin, Разбойница, Liza92Sati, АннаМихална85, arinnada, _Anabelle_, lilie112, varusik, Swolochuga, ANNA-1986, PadmeNaberrieAmidala, [Полный список]

Избранное

Переводчик

Профиль

Пожертвование

Самые активные

Подписка на RSS

Наша кнопка

Статистика сайта

Необходимый софт

Sims soft

Новое на форуме