|
Пример создания Интернет сайтаНу вот и пришло время создать нечто более сложное, используя полученные знания в предыдущих уроках. В этом заключительном уроке мы сделаем 2х страничный сайт...например о работе в интернете. Сначала надо определится как это будет приблизительно выглядеть. Вверху сайта мы сделаем "шапку сайта". Слева будет меню сайта с ссылками на другие страницы сайта, остальное место будет занимать контент (содержимое) сайта. Надеюсь идея понятна. Тогда приступим. Запускаем Блокнот и пишем наш минимальный набор для создания страницы. <html> <head> </head>
<body> </body> </html> Теперь напишем между тегами <title> </title> название нашей страницы, например вот так <html> <head> </head>
<body> </body> </html> Далее разместим теги <center> и </center>. Это делается для того, чтобы все содержимое нашего сайта было размещено по центру страницы. <html> <head> </head>
<body> <center>
</center> </body> </html> Для создания каркаса страницы мы будем использовать таблицу, но чуть более хитрую чем мы проходили вHTML-уроке о таблицах. Нам нужна таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2 ячейки, т.е. вот такая нам нужна таблица:
В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке 3 будет содержимое страницы. Для того чтобы сделать такую таблицу напишите вот такой код <table>
При этом код нашей страницы будет вот такой: <html> <head> </head>
<body> <center> <table>
</center> </body> </html> Как видите, в такой вот "хитрой" таблице используется лишь 1 пара тегов <td> в первой строке таблицы, а не два, как при построении таблицы 2х2. Зато появился параметр colspan="2". Этот параметр как бы говорит, какого размера должна быть ячейка. В данном случае ячейка должна быть шириной в 2 ячейки. Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 700 пикселей. Из рассчета что кто-то из посетителей сайта может использовать монитор 800х600 точек, и просматривать более широкий сайт ему будет не комфортно. Высоту таблицы сделаем 600 пикселей Код нашей страницы теперь будет вот такой. <html> <head> </head>
<body> <center> <table width="700" height="600">
</center>
</body> </html> Чтобы стало видно границы частей сайта - "зальем" область меню и область шапки цветом. Например вот так
<html> <head> </head>
<body> <center> <table width="700" height="600">
</center>
</body> </html> Далее сохраняем файл под именем index.html, для того чтобы его можно было просмотреть как он будет выглядеть в браузере. Страница должна выглядеть ТАК. Если у вас не так - значит ищите ошибку. При написании интернет страниц есть правило. Главная страница сайта должна называться index.html, или index.htm.! Или же index.php если страница написана на языке PHP. Пожалуйста запомните это. Тогда при обращении к сайту, т.е. когда набираешь адрес сайта в браузере, можно не набирать index.html или index.htm, достаточно набрать адрес вашего сайта. Теперь вставим шапку нашего Интернет сайта. Сохраните картинку шапки у себя на компьютере в той-же директории где находиться файл страницы под ее "родным" именем sitelogo.jpg Для этого наведите курсор мышки на картинку, нажмите правую кнопку мышки и выберите "Сохранить рисунок как..."
Теперь вставляем картинку шапки в наш сайт. О том как вставить картинку на сайте мы разбирали здесь.
Код нашей страницы будет такой: <html> <head> </head>
<body> <center> <table width="700" height="600">
</center>
</body> </html> Теперь установим точные размеры ячейки таблицы, предназначенной для шапки. Т.к. картинка шапки у нас имеет размер 719х79, то и размер ячейки таблицы сделаем 719 х 79.
<html> <head> </head>
<body> <center> <table width="700" height="600">
</center>
</body> </html>
Теперь наша страница будет выглядеть ТАК. Установим ширину меню равной 150 пикселей, для этого добавим width="150" в соответствующий тег <html> <head> </head>
<body> <center> <table width="700" height="600">
</center>
</body> </html> Задний план меню "зальем" вот таким фоном, для этого сохраните этот фон с его "родным" именем sv11.jpg в туже директорию где находиться файл страницы. Прописываем нужный код:
<html> <head> </head>
<body> <center> <table width="700" height="600">
</center>
</body> </html> Теперь наша страница будет выглядеть ТАК. Возможно возник вопрос, почему браузер не "отрабатывает" ширину меню 150 пикселей? Меню ведь выглядит шире чем 150 пикселей. Да. Есть такой глюк браузера, но все встанет на свои места если начать писать текст в основном разделе страницы. Для того, чтобы подтвердить это, добавим текста на наш сайт. <html> <head> </head>
<body> <center> <table width="700" height="600">
</center>
</body> </html> Сайт будет выглядеть вот ТАК. Теперь все почти хорошо. Но, однако, есть небольшие проблемки. Текст на нашей Интернет странице отображается ровно посередине (по вертикали), а следовало бы чтобы текст был расположен вверху ячеек. Для этого нам надо прописать еще один параметр в теги <td> меню и основного содержимого страницы. Этот параметр мы не проходили в уроке о таблицах, - это параметр выравнивания по вертикали valign="top". Значение top означает что содержимое будет располагаться вверху. <html> <head> </head>
<body> <center> <table width="700" height="600">
</center>
</body> </html> Теперь наша страница будет выглядеть ТАК.
Далее делаем меню. Пуская, для начала, наш сайт будет состоять из 2-х страниц. Главная страница и страница ссылок. Пусть пункты меню пусть называются Главная и Ссылки. Для того чтобы "сдвинуть" текст используем тег <br> <html> <head> </head>
<body> <center> <table width="700" height="600">
Главная <br><br> Ссылки </td>
</center>
</body> </html>
Теперь надо сделать текст меню в виде ссылок. Слово "Главная" будет ссылаться на страницу index.html, а слово "Ссылки" на страницу ssilki.html, которую мы создадим чуть позже. Как сделать текст в виде ссылки мы проходили здесь.
<html> <head> </head>
<body> <center> <table width="700" height="600">
<a href="index.html">Главная</a><br><br> <a href="ssilki.html">Ссылки</a> </td>
</center>
</body> </html>
Теперь наш сайт будет выглядеть ТАК.
Нам осталось сделать вторую страницу сайта. Для того чтобы упростить работу сделаем так: сохраним нашу страницу index.html под другим именем ssilki.html, а затем просто подредактируем файл. Выбираем в блокноте команду Файл->Сохранить как..., выбираем ту-же папку, где находиться файл index.html, пишем имя страницы под которой мы хотим сохранить файл ssilki.html. Жмем ОК. Получается, что на нашем компьютере у вас должно быть 2 пока что одинаковых страницы - index.html и ssilki.html. Далее изменим название страницы (между тегами <title> и </title>), и изменим текст страницы. <html> <head> </head>
<body> <center> <table width="700" height="600">
<a href="index.html">Главная</a><br><br> <a href="ssilki.html">Ссылки</a> </td> <a href="http://russia-job.ru">Сайт о работе в интернете russia-job.ru</a> </td>
</center>
</body> </html> И сохраним... (Файл -> Сохранить) Вторая страница сайта будет выглядеть ТАК. Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить в интернете. Что бы уменьшить количество пустых строк можно уплотнить код, однако я сделал пропуски чтобы было наглядней видно структуру страницы. А так можно разместить весь код вообще в одну строчку. Если есть какие либо вопросы по этому примеру - пишите!
ЧТО ДАЛЬШЕ. Конечно сделанный для примера сайт не так крут. И даже в этом сайте пришлось использовать готовые картинки, которые вы возможно создавать не умеете, однако это та основа, которую должен знать каждый. Дальше Вы можете зайти в раздел "Электронные книги" и почитать более подробно о том, как сделать сайт лучше и насыщеннее. Главное не останавливаться, пробовать, и все получится.
Что делает отдел по эксплуатации и сопровождению ИС? Отвечает за сохранность данных (расписания копирования, копирование и пр.)... ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала... Конфликты в семейной жизни. Как это изменить? Редкий брак и взаимоотношения существуют без конфликтов и напряженности. Через это проходят все... Что будет с Землей, если ось ее сместится на 6666 км? Что будет с Землей? - задался я вопросом... Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:
|