18:25 Самостоятельное создание сайта |
Немного разобрав тему тегов,давайте попробуем создать страницу более продвинутого характера. Что нам понадобится: 1. Можете делать как в программе Dreamweaver так и в обычном текстовом редакторе (блокноте) которые можно скачать в разделе программы для веб дизайна. 2.Пожалуй время,усидчивость и прямые руки. Внешний вид сайта (дизайн). Внешний вид подразумевает под собой структурное расположение блоков и объектов на странице, так же цвет,размер шрифта и так далее. Для начала пожалуй возьмите листок бумаги и нарисуйте макет своего будущего сайта для визуального представления. А мы пока разберем готовый пример, так сказать будем разбирать поэтапно что к чему относится. Конечно это не супер проект но для начального обучения пожалуй подойдет и вам будет легче понять как верстать страницу HTML. Итак, подготовка к работе. Создаем папку(для удобства можете на рабочем столе, чтобы не искать долго) и назовите ее например Site. Сохраняем в созданную папку любую фотографию (например вашего кота). Можете вашу фотографию: Банер: После переноса графических файлов с которыми мы будем в последствие работать создадим 2 текстовых файла index.html и style.css Открываем в ранее скачанных программах(блокнот) файл index.html (Будем создавать заголовок страницы, введем начало и конец документа, с указанием места положения нашего файлы style.css) В файле index пишем: <HTML><!-- Начало HTML документа --> <HEAD> <TITLE>Мой сайт</TITLE> <LINK href="style.css" rel="stylesheet" type="text/css" /> </HEAD> <BODY> </BODY> </HTML><!-- Конец HTML документа --> Для того чтобы страница была фиксированной ширины и не менялась при увеличение или уменьшении вписываем 1000 пикселей между тегами Body: <BODY> ВОТ СЮДА! </BODY> Вставляем таблицу размером 1000 пикселей, внутри которой будет распологатся видимая часть нашей страницы: <!-- начало содержимого --> <table align="center" width="1000px" bgcolor="#FFFFFF" cellpadding="10px"> <tr> <td> Здесь будет видимая часть нашей страницы. Всё что находится выше, а так-же ниже этих слов - трогать больше ненужно! </td> </tr> </table> <!-- конец содержимого --> В файле style.css прописываем следующие параметры настройки: body{ /* общие настройки */ font-family:Arial, Helvetica, sans-serif; /* тип шрифта */ background-color:#999999; /* цвет фона */ } По завершению написания или скопировав выше написанное сохраняем оба файла и открываем в браузере. Фон страницы должен был изменится, если этого не произошло значит вы сделали что то не правильно. Устанавливаем верхний блок на наш сайт(шапка). Для того чтобы верхняя часть блока(шапки) была обведена пунктирной линией мы используем тег div. Разделим верхнюю часть на 2 половинки, одну половинку мы используем для Названия сайта, а во второй половинке добавим банер. Пожалуй тут мы поработаем со вставкой таблиц. В файле index удалите слова "Здесь будет видимая часть нашей страницы", а все что ниже и выше не трогайте! И вместо них вставляем: <!-- начало шапки --> <div class="header"> <table width="100%" height="100px"> <tr> <!-- начало левой части шапки --> <td align="left" valign="top" width="400px" id="header"> <h1>Тут будет название сайта</h1> <br /><!-- это перенос строки --> Здесь будет небольшое описание вашего сайта, содержащее парочку основных ключевых слов (это для поисковых систем). <b>Внимание!</b> Ключевых слов здесь не должно быть много, не больше трёх, а то ваш сайт сочтется за мусор и быстро уйдет в бан! </td> <!-- конец левой части шапки --> <!-- начало правой части шапки --> <td align="center" valign="middle"> <a href="http://css-standart.ru" target="_blank"><img src="banner.jpg" /></a> </td> <!-- конец правой части шапки --> </tr> </table> </div> <!-- конец шапки --> Добавляет в наш файл style.css настройки шапки, после всех строк, со следующей строки: .header{ /* шапка */ height:100px; /* высота блока */ background-color:#99FFFF; /* цвет фона */ border-width:1px; /* толщина рамки */ border-style:dashed; /* стиль рамки (в нашем случае пунктирный) */ border-color:#333333; /* цвет рамки */ margin-bottom:10px; /* внешний отступ снизу */ padding:10px; /* внутренний отступ */ } #header{ /* шапка */ color:#333333; /* цвет текста */ font-size:12px; /* размер шрифта */ line-height:16px; /* высота строки */ } h1{ /* стиль для тега h1 */ color:#996600; /* цвет текста */ font-size:30px; /* размер шрифта */ font-weight:normal; /* вид шрифта */ margin-bottom:0px; /* внешний отступ снизу */ } Сохраняем изменения в обоих файлах и обновляем страницу в Вашем браузере. На странице должна появится шапка нашего сайта, если же нет то вы делаете что то не правильно. |
|
|
| Всего комментариев: 0 | |
