X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

4 страниц V   1 2 3 4 >
Открыть тему
Тема закрыта
> Основы сайтостроения. Практический подход
Licoric
Licoric
Topic Starter сообщение 19.11.2009, 0:03; Ответить: Licoric
Сообщение #1


Тему создаю во флейме, ибо в дальнейшем будет флуд (ожидается). Если все пойдет ровно и гладко, то перенесу куда надо.
Итак - если есть желающие изучить хтмл, то для начала можете тут отметиться. Буду примерно знать, с кем имею дело. Для господ опытных в этом деле - помогайте с заданиями, с "работой над ошибками" и просто советами.
Учебного плана не составлял и взять его руки еще не дошли. Попозже гляну.
В общем начнем с изучения основ хтмл. Изучать его будем народным методом - проб и ошибок. Или проще говоря - от практики к теории. Ибо только так это будет лучше усвоено и интересней преподнесено.
Собственно попробуем.

Первое задание будет о табличной верстке.
Задание на вложенном скриншоте.
1 - некая шапка.
2 - левые блоки (меню, допустим)
3 - основная часть страницы
4 - правые блоки
5 - футер.

Для тех, кто хочет сделать задание можете завести хостинг хоть на народе. Благо пока только на хтмл писать будем. Динамика дальше.
ps для удобства визуальной ориентировки используйте свойство таблицы border="1"
Теги, которые понадобятся для выполнения задания:
<table> </table>
<tr> </tr>
<td> </td>

Для тех, кто сваяет данный каркас идем дальше:
в блоке 1 разместите произвольный рисунок. Ориентировочно пикселей 600 в ширину и 50 в высоту (что-то типа логотипа). Сверху рисунка текст "Hello world" )))
В блоке 2 оформите красиво меню (зоголовок блока меню и пункты меню).
В блоке 3 красиво оформите страничку "обо мне" (фотка + текст биографии). В 4-м поле - поле для ввода логина и пароля.
Для начала сделайте так, что б хоть что-то было. Потом отточим мелочи.
ps для особо продвинутых - в 3-м блоке сделайте дополнительно так:
Текст в 2 столба (просто текст).
в 5-м блоке (футер) - копирайты или счетчики. Или что-то в таком духе. Ссылки на страницу или код - выкладывайте сюда.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
wrcr
wrcr
сообщение 19.11.2009, 1:12; Ответить: wrcr
Сообщение #2


ну и сразу же, я наверно затруднюсь это всё так сразу делать... надо литературу смотреть(
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
wrcr
wrcr
сообщение 19.11.2009, 2:18; Ответить: wrcr
Сообщение #3


Не знаю, как выровнять таблицы( ( на скриншоте показал как именно)
[IMG]http://s54.radikal.ru/i146/0911/72/056f4cacd1fdt.jpg[/IMG]


<html>
<head>
<title>Первые шаги</title>
</head>
<body>
<table width="100%" height="20%" border="0" >
<tr align="center" bgcolor="#999999">
<td style="font-size: 160%; font-family: Arial">Шапка</td>
</table>
</td>
</tr>
<table width="15%" height="10%" border="1" >
<tr align="left" bgcolor="yellow">
<td style="font-size: 100%; font-family: Verdana">левый блок</td>
</table>
</td>
</tr>
<table width="15%" height="10%" border="1" align="right">
<tr align="right" bgcolor="red">
<td style="font-size: 100%; font-family: Verdana">Правый блок</td>
</table>
</td>
</tr>
<table width="50%" height="50%" border="1" align="center">
<tr align="center" bgcolor="white">
<td style="font-size: 100%; font-family: Verdana">основная часть</td>
</table>
</td>
</tr>
<table width="100%" border="0" >
<tr align="center" bgcolor="orange">
<td style="font-size: 160%; font-family: Arial">нижняя часть</td>
</table>
</td>
</tr>
</table>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 19.11.2009, 2:19; Ответить: Letmetouchyou
Сообщение #4


так вы делайте, что неполучаетсяь спрашывайте , советуйтесь :) Никто не будет против )
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 19.11.2009, 2:24; Ответить: Letmetouchyou
Сообщение #5


<html>
<head>
<title>Первые шаги</title>
</head>
<body>

<table width="100%" height="20%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td align="center" bgcolor="#999999" style="font-size: 160%; font-family: Arial">
Шапка
</td>
</tr>
</table>

<table width="15%" height="10%" border="1" cellspacing="0" cellpadding="0">
<tr align="left" bgcolor="yellow">
<td style="font-size: 100%; font-family: Verdana">
левый блок
</td>
</tr>
</table>

<table width="15%" height="10%" border="1" align="right">
<tr align="right" bgcolor="red">
<td style="font-size: 100%; font-family: Verdana">
Правый блок
</td>
</tr>
</table>

<table width="50%" height="50%" border="1" align="center">
<tr align="center" bgcolor="white">
<td style="font-size: 100%; font-family: Verdana">
основная часть
</td>
</tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr align="center" bgcolor="orange">
<td style="font-size: 160%; font-family: Arial">
нижняя часть
</td>
</tr>
</table>
</body>
</html>


скорее так ваш код буте правильнее выглядеть.
Нона мой взгял правильно будет сдлать вот так. Шас выложу ))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 19.11.2009, 2:32; Ответить: Letmetouchyou
Сообщение #6


<html>
<head>
<title>Первые шаги</title>
</head>
<body>
<!--1-->
<table cellspacing="0" cellpadding="0" border="1" style="width:100%; height:60px;">
<tr>
<td>
Шапка
</td>
</tr>
</table>

<table cellspacing="0" cellpadding="0" border="1" style="width:100%; height:600px;"> <!--Высота здесь для наглядности.. Если ее не писать то будет таблица резиновая по высоте. В зависимости от размера контента-->
<tr>
<!--2-->
<td>
Левая часть
</td>
<!--3-->
<td>
Основания часть
</td>
<!--4-->
<td>
Правая часть
</td>
</tr>
</table>
<!--5-->
<table cellspacing="0" cellpadding="0" border="1" style="width:100%; height:60px;">
<tr >
<td >
нижняя часть
</td>
</tr>
</table>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 19.11.2009, 2:40; Ответить: Letmetouchyou
Сообщение #7


wrcr, у вас есть лишние тэги <tr> и <td> после всех таблиц. Таблицу правильно фофрмлаять так:
<table>
<tr>
<td>
</td>
</tr>
</table>

и тд.
В ваше случее collspan Вапше не нужен.
И длля выравнивая лутше 2 , 3 и 4блоки поместить в одну таблцу , в разные ячейки ( <td> ) как по мне ето самый удобный способ, или использовать CSS свойства. Так как если разместите две таблицы подряд , то в браузере они будут отображаться как одна под одной и не одна а с боку другая.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
wrcr
wrcr
сообщение 19.11.2009, 4:41; Ответить: wrcr
Сообщение #8


спасибо, буду мотать на ус... много не понимаю ещё, но буду запоминать и пытаться разобраться...
а по поводу css - мне кажется рановато немного)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 19.11.2009, 16:47; Ответить: Letmetouchyou
Сообщение #9


wrcr, ну я же и не писал как реить с помошью css ))))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 19.11.2009, 16:51; Ответить: Letmetouchyou
Сообщение #10


Хотя раз используете
style="font-size: 160%; font-family: Arial"
, то уже лутше сразу пистаь все в таблицу стилей, потому что инлайновые стили это зло. Идея семантического HTML и CSS заключается в разделении структуры и стилей. Всегда лутше храните стили в таблицы стилей.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Оффтопик · Следующая тема »
 
4 страниц V   1 2 3 4 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) edu-masters.com - Конвертим студ трафик. Индивидуальный подход к каждому.
 38 edu_masters 17763 12.12.2023, 14:51
автор: edu_masters
Открытая тема (нет новых ответов) In-to.cc - Простота использования, быстрая скорость обмена, индивидуальный подход к каждому пользователю, самые популярные направления обмена.
 2 in_to 2300 13.3.2023, 14:15
автор: in_to
Открытая тема (нет новых ответов) Вечные ссылки (СТАТЬИ). Траст. Бурж. Ручное размещение. Индивидуальный подход.
Уникальное авторское предложение от опытного SEOшника :)
 7 Matis 1765 29.10.2021, 21:57
автор: Matis
Горячая тема (нет новых ответов) Ссылки (PBN) под Украину, Морды, статейные, индивидуальный подход
то что дает жирный рост, конкурентное преимущество
 30 mvchansas 24293 14.9.2021, 11:26
автор: mvchansas
Открытая тема (нет новых ответов) Партнерская сеть Vortex Advertising - эксклюзивные офферы, индивидуальный подход
 26 VortexAds 9381 26.2.2020, 12:05
автор: VortexAds


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 16.4.2024, 7:30

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet