Домашний офис на 1 квадратном метре (коллекция творческих идей)
Идея №1 - домашний офис в бывшей кладовке
Главное преимущество - наличие дверей, за которыми можно спрятать все напоминания о работе. Его можно создать в гостиной и спальне, в холле и кухне. В любом случае двери послужат отличным прикрытием. А вот внутри все будет организовано так, как вам нравится.
Нам потребуются атласные ленты шириной 5 см., клей момент гель, ножницы, свеча или зажигалка, нитки и иголка, паяльник, кусок пластиковой бутылки размером 3см на 8см, заколка "крокодил" длиной 13см.
Зачастую делать подарки намного приятнее, чем получать их. Весь секрет – в радости, которую мы дарим вместе с милой вещицей. Предлагаем вам пару интересных идей для оформления новогодних подарков, на воплощение которых понадобится не более получаса.
Чтобы еще больше заинтриговать близких сувенирами, спрячем их в непривычную новогоднюю упаковку. Представляете, как все удивятся, узнав, что внутри симпатичного шарика или колючей коробочки из еловых веток их ждет сюрприз?! Заранее купленные подарки сложим сначала в обычные картонные коробки, а затем украсим их толстым шпагатом, веточками, шариками, лентами. Для отделки новогодней упаковки подойдет и прочая новогодняя мишура – яркая бумага, дождик, сизаль. Такое оформление новогодних подарков само по себе создает хорошее настроение.
Брелок Котёнок с хвостиком
вяжется снизу вверх крючок 1,5 пряжа акриловая «Малышок» впрочем можно любую, хоть мохер.
4 возд.петли замкнуть в круг и обвязать 7-ю столбиками без накида.
Провязать 9 рядов- хвост готов
10-ый ряд- 3 ст.бн. 4 прибавки
11-ый ряд- 3 ст.бн. ( прибавка, 1 ст.бн.) до конца ряда 16 ст.
12-15 ряды по кругу
16-ый ряд - 6 ст.бн , (убавка,1 ст.бн.) до конца ряда 13 ст. -набить это получился животик
17-ый ряд ( убавка,1 ст.бн.) до конца ряда 9 ст.
18-19 по кругу
Тело закончилось, набить, переходим к голове
20-ый ряд 9 прибавок 18ст
21-ый ряд ( прибавка, 1 ст.бн.) до конца ряда 27ст
22-ой ряд ( прибавка, 2 ст.бн.) до конца ряда 36ст
23-ий ряд ( прибавка, 3 ст.бн.) до конца ряда 45ст
24-27 ряд по кругу
28-ой ряд ( убавка, 3 ст бн.) до конца ряда 36ст
29,30 ряд 36 ст.бн
31-ый ряд ( убавка, 2 ст бн.) до конца ряда 27ст
32,33 ряд 25 ст
34-ый ряд ( убавка, 1 ст бн.) до конца ряда 18ст
35ряд 18 ст.бн
Набить, оставшиеся столбики сложить вдвое так ,чтобы живот был впереди ,сшить и зашить уголками ушки.
Можно сделать иначе- провязать оставшиеся столбики по 2 ,стянуть отверстие, закрепить остаток нити заправить внутрь. Ушки связать отдельно и пришить
Ухо- набрать 6 воздушных петель провязать 5 ст.бн. начиная со 2-го столбика от крючка,
2-ой ряд 4 ст.бн
3-ий ряд 3 ст.бн.
4-ый ряд 2 ст.бн.
5-ый ряд 1 ст.бн.
получившийся треугольник сложить вдвое, сшить по короткой стороне, ухо готово. Сделать 2 таких, и пришить на макушку.
Лапка-4 возд.петли замкнуть в круг и обвязать 7-ю столбиками без накида.
Провязать 5 рядов, стянуть не набивая, лапка готова .
Связать 4 штуки, пришить так, чтобы живот был между лапками
оформить мордочку, прикрепить петельку-брелок готов!
У меня немного не по схеме. Первые три ряда провязаны так: цепочка из 115 в.п., ряд столбиков б/н, следующий ряд - *1 ст.с.н., 2 в.п., 1 ст. с.н.*, получается сетка, что бы удобнее было вставлять ленточку. Завершающий ряд (по схеме) из воздушных петель я не провязывала вообще.
Очень часто пользователи задаются вопросом о том, как быстро перевести PDF в Word. Да это и понято, каждый пользователь интернета ежедневно обрабатывает множество текстовой информации (что уж говорить о нас, блоггерах) и задачи перевода текстовой информации из одного формата в другой чуть ли не каждый день.
Давайте все – таки разберемся в том, как выполнить перевод pdf в word быстро и без особых усилий.
Способ первый:
1) Устанавливаем программу ABBY Fine Reader – одну из лучших (если не самую лучшую) программу для распознавания текста. Именно с помощью данной программы мы будем искать ответ на то, как быстро перевести pdf в ворд файл.
2) Программу мы установили, тем следует приступать к настройке. В меню программы нажимаем на вкладку Файл -> Открыть PDF/Изображение
3) В окне выбора файлов указываем pdf и выбираем наш файл. Выбираем нужные страницы (или весь файл сразу) и нажимаем на клавишу распознать.
4) В правой части выделяем нужные страницы и переходим к верхнему меню, там мы нажимаем галочку сохранить и тыкаем в мастер сохранения резултатов. Осталось немного мы почти выполнили нашу задачу – распознать pdf в word.
5) Выбираем Microsoft Word 9или любой другой текстовый файл и нажимаем на кнопочку OK. Все, задача выполнена. Кстати сказать, когда текст переведен можно и немного отдохнуть послушав музыку, благо скачать winamp последнюю версию сейчас не проблема
Способ второй:
Выше мы рассмотрели прекрасный способ, позволяющий выполнить перевод pdf в word файл достаточно быстро и легко. Но что делать, если мы находимся в офисе или в любом другом месте, где нет установленной программы ABBy Fine Reader, но есть интернет. И в данном случае есть решение.
Итак, теперь перед нами стоит иная задача: как перевести PDF в Word имея под рукой лишь интернет.
1) Заходим на сайт программы Abby Fine Reader, проходим регистрацию и переходим по вкладочке с книжечкой, именно здесь мы будем выполнять перевод pdf в word формат.
2) Прочитываем предлагаемые рекомендации и переходим к следующему пункту – распознать документ для того, чтобы выполнить перевод pdf в word/
3) Здесь загружаем требуемый файл, выбираем язык документа и выбираем нужный формат.
4) Нам высвечивается название нашего документа, ставим около него галочку, подтверждая, что именно к этому документу мы хотим применить перевод pdf в word файл.
5) Нажимаем на кнопку распознать и ждем свой файл уже в новом формате. Неприятная особенность данного способа состоит в том, что если вы будете выполнять распознавание более трех страниц текста, то вам придется оплатить перевод вашего pdf файла в word. Но тем не менее, если под рукой нет программы, а документ нужно подготовить срочно данный интернет сервис хорошее подспорье в работе.
Надеюсь, данная статья была полезна для Вас, мои уважаемые читатели и вы без проблем смогли выполнить перевод pdf в word.
Кроме вот этой фото и схемы ничего нет. Но я думаю идея понятна – делаются черные и белые пятиугольники и сшиваются потом по подобию футбольного мяча http://panninastja.wordpress.com/page/6/
Плюшки - это величайшее изобретение русской кухни, наряду с хлебом, блинами и пирогами.
Они представляют собой небольшие фигурки из дрожжевого теста, имеющие слоистую структуру.
Я приведу несколько самых популярных способов формирования плюшек.
Как-то раз Карлсон, объевшись у Малыша плюшек, застрял в форточке. Так появился первый кондиционер.
СОСТАВ
Сдобное дрожжевое тесто готовится по той-же технологии, что и обычное дрожжевое, но в него дополнительно кладется больше яиц, масла и сахара. Т.к. при этом тесто получается тяжелее, то дрожжей нужно брать примерно в 1,5 раза больше.
Готовое тесто разделить на небольшие кусочки. Размер кусочков зависит от того, какого размера нужно получить плюшки. Для плюшки средней величины вес одного кусочка равен 80~100 граммов.
Из кусочков сформировать шарики. Шарики формируются не простым катанием между ладонями. Нужно взять кусочек теста двумя руками (два больших пальца рядышком). И всеми пальцами собирать тесто к месту, где находятся большие пальцы. А большие пальцы в это время вталкивают тесто внутрь кусочка.
Получившиеся шарики раскатать в лепешку толщиной 4~6мм.
Для того, чтобы плюшки были пышнее, шарикам нужно дать расстояться, а потом их нужно не раскатывать, а разминать и растягивать в лепешку руками.
Если делается сразу большое количество плюшек, то раскатывать нужно столько лепешек, сколько плюшек уместится на один противень. Следующая порция лепешек готовится уже во второй заход, когда первый противень находится в духовке.
Лепешки смазать маслом и равномерно посыпать сахаром. Чем больше сахара, тем "карамельнее" будет плюшка. Обычно на лепешку диаметром 15см берется 1~1,5 ч ложки сахара и 1 ч ложка масла.
Для посыпки кроме сахара используются:
- мак;
- корица;
- мелкий изюм;
- дробленые орехи;
- семена кунжута или подсолнечника.
Подготовленные лепешки свернуть рулетами.
Это основная заготовка плюшки. Далее формирование плюшек может идти разными способами.
ПЛЮШКА "СЕРДЕЧКО"
1. Рулет сложить пополам.
2. Концы рулета должны быть соединены вместе.
3. Ножом сделать сквозной разрез вдоль фигуры, не доходя до конца (места соединения двух концов рулета) 2~3см.
4-5. Развернуть по линии разреза слоями вверх.
ПЛЮШКА "СЕРДЕЧКО", вариант 2
Эта плюшка формируется точно так же, как и первая, но разрез делается не до конца, оставляя неразрезанными 1 или 2 слоя.
В этом случае плюшка разворачивается не так широко и разрез образует что-то вроде колодца или углубления, в которое дополнительно можно что-нибудь положить, например, кусочек масла, или подсыпать сахар.
ПЛЮШКА "ТЮЛЬПАН" или "ТРИЛИСТНИК"
1. Делаются два разреза вдоль заготовки.
2. Заготовка раскрывается по разрезам - крайние лепестки разводятся в стороны и разворачиваются слоями вверх. Средний лепесток либо не трогается, либо поворачивается.
ПЛЮШКА "РОЗОЧКА" или "ЗАВИТУШКА"
Эти плюшки можно делать либо маленькими, либо большими.
Для маленьких плюшек делаются небольшие лепешки и, соответственно, небольшие рулетики, для больших тесто раскатывается в один большой пласт, который потом скатывается в большой рулет.
1. Рулет нарезать на кусочки.
2. Один конец кусочка защипать.
3. Слои со второго конца раскрыть как лепестки.
ПЛЮШКА "БАНТИК"
1. Рулет (не сгибая) надрезать с двух сторон так, чтобы посередине осталась неразрезанная часть. Разрезы производить вдоль рулета.
2. Плюшку развернуть по разрезам.
Плюшки уложить на смазанный маслом или застеленный бумагой для выпечки противень и оставить на 15~30 минут для расстойки.
Выпекать в нагретой до t=180~200°C духовке 15~20 минут.
- Однажды Фpекен Бок yзнала, кто таскал ее плюшки - и отомстила...
- Уши обоpвала?
- Hет, сахаp в каpбюpатоp насыпала.
1. Рулет сложить пополам.
Сделать разрез вдоль фигуры, не доходя до конца (места соединения двух концов рулета) ~2см.
2. Повернуть разрезанную заготовку на бок. Отогнуть верхнюю часть так, чтобы она легла на стол.
3. При этом скрепленные концы рулета оказываются ПОД развернутыми лепестками.
ПЛЮШКА "ВЫКРУТКА"
1. В рулетике проделать сквозную прорезь (вдоль изделия) от одного края до другого, не доходя до концов ~2см.
2. Получившееся отверстие раздвинуть.
3. Протянуть в него один конец рулета.
ПЛЮШКА "ВЕРЕВОЧКА"
Эту фигуру лучше делать из большого рулета. Если делать маленькие "веревочки", то получается всего 1-2 переплетения и готовое изделие имеет более бедный вид.
1. Отступив от одного конца рулета на 2~4см (в зависимости от величины рулета), сделать продольный разрез до второго конца. Развернуть изделие по разрезу слоями вверх.
2. Перекрутить две получившиеся полоски между собой. Концы соединить вместе и тщательно защипать.
ПЛЮШКА "ВОСЬМЕРКА"
1. У рулета сделать два сквозных продольных разреза так, чтобы посередине осталась неразрезанная часть длиной 1~2 см.
2. Получившиеся полоски отвести вбок и соединить попарно (чтобы получилась цифра 8).
3. Концы тщательно закрепить.
ПЛЮШКА "БАБОЧКА"
1. У рулета подогнуть оба конца так, чтобы они соединились посередине рулета.
2. Там, где получились сгибы, сделать разрезы.
3. Изделие по разрезам раскрыть слоями вверх.
ПЛЮШКА "СОЛНЫШКО"
1. Рулет надсечь поперек. Расстояние между разрезами 1~1,5см.
2. Завернуть рулет в кольцо, разрезами наружу (при этом разрезы раскроются).
ПЛЮШКА "ГРЕБЕШОК"
1.У рулета сделать такие же надрезы, как и в варианте "Солнышко".
Повернуть рулет так, чтобы неразрезанная сторона была внизу, а разрезы смотрели вверх.
2. Поочередно отгибать зубчики то влево, то вправо.
Авторы сайта выложили немало кулинарных книг, в том числе и Книгу о вкусной и здоровой пище 1952 года, и Кулинарную книгу лентяйки Донцовой. И много других, сейчас на сайте 30 книг.
Для того, чтобы ваш сайт "увидел весь мир" его необходимо разместить на хостинге, т.е. на сервере который предоставляет услуги по размещению и хранению ваших файлов. Хостинги бывают платные и бесплатные.
Платный хостинг
Как правило, хостеры за некоторую ежемесячную плату (от 3$/мес) предоставляют вам часть своего дискового пространства (например, 500Mb), куда вы и складываете свои файлы. Они поддерживают разные технологии, которыми вы можете пользоваться (PHP, MySql и прочее) и обеспечивают присутствие вашего сайта в интернете 24 часа в сутки.
Перед тем, как заключить договор о хостинге необходимо купить доменное имя (название вашего сайта, в нашем примере - это mysite). Доменное имя можно приобрести и у хостера (его стоимость порядка 600 руб за год).
Единственный недостаток платного хостинга - его платность.
Бесплатный хостинг
Существует много сервисов по бесплатному размещению сайтов, Делают они это за счет средств, получаемых от рекламодателей, разместивших рекламу на ваших страницах (отсюда и первый минус - прибыль от размещения рекламы вы не получите и выбирать, какую рекламу размещать не сможете).
Кроме того, в основном вы не сможете пользоваться PHP, java и другими серверными технологиями. Зато, не надо покупать доменное имя и платить за хостинг.
Выбор остается за вами. Я предпочитаю платные хостинги, например, www.gudzonhost.ru. Но для начала, пока вы только обживаетесь в мире сайтостроения, подойдет и бесплатный.
Для примера, поместим наш сайт mysite на бесплатном сервисе www.newmail.ru.
Шаг 1.
Для начала нужно зарегистрироваться:
Жмем на "регистрация", появится вот такая форма:
Заполняем форму:
- ФИО заполните свои,
- в поле выбор адреса укажите желаемый адрес сайта (он будет отображаться в адресной строке) и нажмите "Проверить сейчас". Если такой адрес занят, вам предложат альтернативный. Например, хотелось иметь адрес mysite.nm.ru, но он оказался занят и пришлось выбрать mysite1@pochta.ru
- установите пароль и введите контрольные буквы.
- жмем "Зарегистрировать".
Следующая форма попросит ввести контрольный вопрос, альтернативный e-mail и т.д. Заполняем и снова жмем "Зарегистрировать".
Перед нами обыкновенный почтовый ящик, но есть строчка "Адрес вашего сайта", а наверху (на синем фоне) пункт - Мой сайт.
Шаг 2.
Щелкаем по "Мой сайт" и попадаем в окно загрузки файлов.
Загружать будем следующим образом:
- через поле Файл загрузим по одной наши страницы,
- а папку с картинками сначала заархивируем (правой кнопкой мыши щелкните по папке images, в раскрывающемся меню выберите "Add to images.rar"). Теперь в поле архив выберем наш архив images.rar
По завершению загрузки в разделе список файлов у нас появится следующее:
Обратите внимание, у нас есть страница index.html - она создана сервисом и страница 0_index.html - это наша страница. Нам нужно удалить страницу, созданную сервисом, а нашу переименовать, как index.html. Поэтому напротив страницы index.html щелкаем по красному крестику (удалить), затем щелкаем по ab (переименовать) напротив страницы 0_index.html и стираем 0_.
Шаг 3.
Осталось посмотреть на наш сайт в интернете. Для этого придется подождать около 4 часов, а затем набрать в адресной строке браузера адрес вашего сайта (в моем случае - это http://mysite1.pochta.ru).
Следует иметь в виду, что бесплатные службы не гарантируют бесперебойной работы, поэтому иногда доступ к вашему сайту может отсутствовать.
Также, по необъяснимым причинами, иногда случаются различные "глюки".
Например, если вместо картинок вы увидите крестики (что означает невозможность найти картинку), то придется схитрить. Удалите все, что мы загрузили. Затем загрузите все картинки так же, как страницы (т.е по одной), а на всех страницах (в тех местах где прописаны пути к ним) поменяйте "images/имя.jpg" на "имя.jpg" и загрузите их заново. Кстати, на платных хостингах таких глюков не встречается.
Вот серия наших уроков и подошла к концу. Теперь вы знаете, как сделать простой сайт и разместить его в интернете. Согласитесь, что это совсем не сложно. Пробуйте, продолжайте учиться и развивайте свои проекты. Удачи Вам!
* дата публикации этой статьи 05.05.2009. На момент, когда вы будете размещать свой сайт, формы регистрации могут измениться, но суть останется той же.
Итак, у нас есть три html-страницы, которые нужно связать между собой. В HTML для этого используются теги <a> </a>. Все, что вы поместите внутрь этих тегов (текст или картинку) станет ссылкой. Это значит, что после нажатия на то, что вы указали в тегах <a> </a> произойдет переход. Куда? На страницу, которая указана в атрибуте href.
Нам необходимо, чтобы при нажатии на слово "главная" открывалась страница index.html, при клике по "шаблоны" - html-страница pattern.html, а при клике по "контакты" - html-страница contact.html. Внесем соответствующие изменения в эту часть кода:
Обратите внимание, наши ссылки стали синего цвета - это цвет ссылок по умолчанию. Но мы же помещали их в теги<font> </font>? Это тот самый случай, когда порядок вложенности тегов играет большую роль. Чтобы ссылки снова стали белыми, следует теги <font> </font> поместить в теги <a> </a>, и сделать это придется у всех трех ссылок.
Поменяйте код на вышеприведенный во всех трех html-страницах. Посмотрите на них в браузере, пощелкайте по ссылкам и убедитесь, что они стали белыми и в адресной строке с каждым переходом меняется адрес html-страницы.
Здесь следует подробнее остановиться на способах задания адреса html-страницы в атрибуте href. Все наши страницы находятся в одной папке, т.е. имеют один уровень. Поэтому мы просто указали имя html-страницы.
Если же html-страница будет находиться в другой папке, то необходимо будет указать путь к ней от данной html-страницы. Например, если в нашей папке site лежат страницы index.html и pattern.html, а страницу kontact.html мы поместили бы в папку kon, то указывая путь со страницы index.html на страницу kontact.html, мы написали бы следующее: <a href="kon/kontact.html"> (все папки указываются через / ).
Если вы захотите сделать ссылку на html-страницу, которая не лежит на вашем сайте, то придется указать ее абсолютный адрес, например, <a href="http://www.mysite.ru/kon/kontact.html">
Шаг 2.
Нам осталось на разных html-страницах разместить разный контент.
Пусть на нашей главной странице будут размещены фотографии шаблонов с их краткими характеристиками, на странице pattern. html - будут просто фотографии шаблонов, а на странице kontact.html - адрес нашей электронной почты.
Начнем со страницы index.html. Откройте ее в блокноте.
Найдите в коде страницы ту часть кода, которая отвечает за контент. Сейчас там написано следующее:
Так как у нас здесь будут фотографии шаблонов и их описания, то удобнее всего поместить фотографии в одном столбце, а описания в другом. Для примера, возьмем два шаблона, а значит, наша таблица будет состоять из 2 строк и 2 столбцов (вы можете сделать сколько угодно). Итак, изменим эту часть следующим образом:
Теперь в первый столбец вставим фото шаблонов, а во второй - их описания. Для вставки фотографий в HTML существует тег <img>, он одиночный, т.е. его не нужно закрывать. Для того, чтобы указать какую именно картинку вставить у этого тега есть параметр src, в качестве значения которого указывается путь к картинке.
<td width="580" height="320" bgcolor="#FFFFFF" valign="top"> <table border="0" cellpadding="15" cellspacing="0"> <tr> <td><img src="images/sp1.gif"></td> <td>Перед вами уникальный трёх-колоночный шаблон на бизнес тематику выполненный в строгом и продуманном стиле в слиянии белого и серого цветов. В правой части страницы располагается удобное двух-колоночное главное меню. В данной теме имеется возможность размещения видео роликов и рекламы 120х600pix. </td> </tr> <tr> <td><img src="images/sp2.gif"></td> <td>Для вас представлена трёх-колоночная тема, выполненная в слиянии чёрной и жёлтой гаммы цветов, дизайн шаблона, выполненный в спокойных и неярких цветах не раздражает глаз. В правой части блога вы увидите двух-колоночное главное меню, в теме также присутствует календарь. </td> </tr> </table> </td>
Страница index.html готова. Займемся страницей pattern.html. На ней мы решили просто разместить фотографии шаблонов.
Откройте ее в блокноте и вместо слов "Здесь - контент" вставьте заголовок, картинки и какой-нибудь текст, а чтобы все расположилось по центру в тег <td> добавьте атрибут align="center"
Теги <p></p> обозначают абзац (т.е. текст отделенный от остальных элементов отступами сверху и снизу).
Наконец, на странице kontact.html укажем наш e-mail. Сделаем это двумя равноправными способами:
<td width="580" height="320" bgcolor="#FFFFFF" valign="top"> <table border="0" cellpadding="15" cellspacing="0"> <tr><td align="center"> <h1>Наши контакты</h1> <p>Пишите нам по адресу: <a href="mailto:admin@mysite.ru">admin@mysite.ru</a></p> <p>Пишите нам по адресу: <address>admin@mysite.ru</address> </p> </td></tr> </table> </td>
Оставьте тот, который больше понравится (с тегами <address> </address>или без них).
Вот собственно и все. Пощелкайте по ссылкам и убедитесь, что все работает. Аналогичным образом вы можете сделать сколько угодно html-страниц и наполнить их разнообразным контентом. Рабочий пример можно посмотреть здесь.
Шаг 3.
Наверно, у вас возникло два вопроса:
1. Откуда брать картинки для сайта (все эти шапки и меню)?
Поэкспериментируйте с тегами и их атрибутами, которые вы узнали из этих уроков. Конечно, это лишь основы HTML, но для начала этого достаточно.
Далее, включайте на свои страницы и другие теги (их полный перечень с описанием и примерами приведен в разделеУроки html). Экспериментируйте, пока не освоитесь в мире HTML. Затем подключайте другие технологии - CSS, Java script, PHP и т.д.
На этом четвертый урок закончен. В следующем уроке вы научитесь размещать свой сайт в интернете.
В начале этого урока мы снова поговорим о структуре сайта. Связано это с тем, что сегодня мы будем вставлять картинки на нашу страницу и необходимо понять, где мы будем их хранить. Скоро вы убедитесь, что это важно.
Наш сайт сейчас состоит из одной html-страницы, сегодня к ней добавятся картинки, в следующем уроке - еще пару страниц. В принципе все это можно хранить в одной папке, но представьте, что этих страниц у вас стало много, и к каждой прилагается картинка, а то и не одна. Кроме того, развиваясь и обучаясь, вы можете захотеть использовать и другие web-технологии, например, css, javascript, php. Если все это складывать в одну папку, то вскоре вы и сами не разберетесь, что здесь к чему. Поэтому организуем сразу правильную структуру хранения для нашего сайта.
Шаг 1.
На любом диске вашего компьютера заведите папку и назовите ее, например site.
В этой папке создайте папку под названием images (здесь мы будем хранить картинки) и страницу index.html.
У вас должна получиться следующая структура:
Для начала нам этого достаточно. Имейте в виду, что все последующие примеры будут правильно работать именно для такой структуры папок. Если у вас они расположены по-другому, то вам придется кое-что менять в коде.
Шаг 2.
С помощью HTML можно осуществить верстку сайта двумя способами - табличным и блочным. В основе первого лежит таблица (теги <table> </table>), в основе второго - блоки (теги <div> </div>). Сегодня мы рассмотрим первый способ.
А делать мы будем вот такую страницу.
Давайте посмотрим из чего она состоит:
Вот мы и разделили нашу страницу на структурные элементы. Как известно, таблица состоит из строк и столбцов, образуя ячейки. Наша страничка, как видно из рисунка, состоит из 5 строк и 2 столбцов. Каждый элемент нашей страницы будет располагаться в своей ячейке таблицы.
Для продолжения вам понадобятся картинки, скачайте их здесь и положите в папку images, которую создали ранее (только картинки, а не папку с ними).
Теперь можно перенести все это в HTML.
Шаг 3.
Откройте в блокноте, созданную сегодня страничку index.html и наберите в ней (или скопируйте) основу html-страницы, т.е.
Здесь теги <table> </table> означают начало и конец таблицы, а теги <tr> </tr> - строки в ней. У нас 5 строк, а потому и 5 пары тегов строк.
Далее. У нас 2 столбца, за обозначение столбцов отвечают теги <td> </td> , но посмотрите на картинку, где их действительно два? Только в четвертой строке (где блок новостей и контент), в эту строку мы и поместим две пары тегов столбцов. А в остальных строках столбец один, как бы включающий в себя два. На такой случай у тега <td> есть атрибутcolspan, объединяющий столько столбцов, сколько необходимо. В нашем случае их 2, так и напишем colspan="2".
Теперь ваша страница должна выглядеть так.
<html> <head> <title> Моя первая страница </title> </head> <body> <table> <tr><td colspan="2"> Здесь будет шапка сайта</td></tr> <tr><td colspan="2"> Здесь будет меню сайта</td></tr> <tr><td colspan="2"> Здесь будет шапка блока новостей</td></tr> <tr><td>Здесь - блок новостей </td> <td>Здесь - контент</td> </tr> <tr><td colspan="2">Здесь - низ сайта</td></tr> </table> </body> </html>
Если сейчас вы посмотрите на нашу страничку в браузере, то увидите, что она очень маленькая. Это связано с тем, что у нашей таблицы нет размера, она меняется в зависимости от содержимого. Не очень удобно. Давайте зададим размеры. За это отвечают два атрибута: width - за ширину, height - за высоту.
Наша картинка шапки имеет размеры 780 Х 165, их мы и зададим для соответствующей ячейки. Строка меню должна иметь такую же ширину, а высоту - как у соответствующей картинки, т.е. 38. Ширина шапки блока новостей равна также 780, а высота - 33 (как у соответствующей картинки). Ширина блока новостей и контента должны в сумме давать те же 780 (отведем 200 на новости, а 580 - на контент), а высоту зададим 320 (просто для удобства). Строка низа сайта аналогична строке с меню, т.е. 780 Х 38.
<html> <head> <title> Моя первая страница </title> </head> <body> <table> <tr> <td colspan="2" width="780" height="165"> Здесь будет шапка сайта </td> </tr> <tr> <td colspan="2" width="780" height="38"> Здесь будет меню </td> </tr> <tr> <td colspan="2" width="780" height="33"> Здесь будет шапка блока новостей </td> </tr> <tr> <td width="200" height="320"> Здесь - блок новостей </td> <td width="580" height="320"> Здесь - контент </td> </tr> <tr> <td colspan="2" width="780" height="38"> Здесь - низ сайта </td> </tr> </table> </body> </html>
Теперь самое время вставить вместо слов "Здесь будет шапка" саму картинку шапки и сделать так для всех осталных ячеек, но есть один нюанс. В остальных блоках мы собираемся что-то писать поверх картинок, т.е. наши картинки должны быть в них фоном. Для этого у столбцов существует атрибут background, в качестве значения которого мы и укажем соответствующие картинки.
Наши картинки лежит в папке images. Поэтому путь к ним будет выглядеть так: background="images/имя картинки". Если у вас другая структура хранения страниц и картинок, то вам следует указать ваш путь к картинке.
Наконец, у блока новостей и контента нет фоновых картинок, поэтому в них используем уже знакомый тег bgcolor, где укажем номер цвета.
<html> <head> <title> Моя первая страница </title> </head> <body> <table> <tr> <td colspan="2" width="780" height="165" background="images/header.jpg"> </td> </tr> <tr> <td colspan="2" width="780" height="38" background="images/menu.jpg"> Здесь будет меню </td> </tr> <tr> <td colspan="2" width="780" height="33" background="images/news.jpg"> Здесь будет шапка блока новостей </td> </tr> <tr> <td width="200" height="320" bgcolor="#CCCCCC"> Здесь - блок новостей </td> <td width="580" height="320" bgcolor="#FFFFFF"> Здесь - контент </td> </tr> <tr> <td colspan="2" width="780" height="38" background="images/footer.jpg" > Здесь - низ сайта </td> </tr> </table> </body> </html>
Откройте страницу в браузере и посмотрите, что получилось.
Уже лучше, но есть недочеты, разберем их:
Между структурными частями видны белые полосочки. Чтобы убрать их добавим в тег <table> следующие атрибуты: border="0" - уберет рамку в таблице, cellpadding="0" - уберет пустое расстояние между внутренних границ ячеек и их содержимым, cellspacing="0" - уберет расстояния между ячейками.
Страница прижата к левому краю, выровняем ее по центру, для этого в тег <table> добавим атрибутalign="center", отвечающий за горизонтальное выравнивание (еще может принимать значения left и right).
Аналогично в тег <td> блока низа сайта добавим атрибут align="right". Это выровняет текст в этой ячейке соответствующим образом.
Текст в наших блоках находится посередине, а нужно, чтобы начинался сверху. Для этого в теги <td>блоков с текстом добавим атрибут valign="top", отвечающий за вертикальное выравнивание (top - прижимает текст к верху, bottom - прижимает текст к низу).
Текст в блоке меню должен быть белого цвета. Поэтому внутрь тега <td></td> поместим уже известные нам теги <font></font> c соответствующим атрибутом color и size.
Зададим тегу <body> параметр bgcolor="#aad5f7", чтобы оттенял нашу страницу.
Наконец, добавим текст в блоки меню, новости и низ сайта.
Посмотрите на вашу страницу в браузере (кстати, делайте это после любых изменений в коде, это позволяет видеть результат и упрощает обнаружение ошибок). Уже все хорошо, вот только текст прижимается к левому краю, что не красиво.
Для того, чтобы это исправить, нам придется в каждой ячейке с текстом поместить еще по одной таблице. Да, в любой столбец можно вставлять другие таблицы и задавать им свои атрибуты. Это совсем не сложно, ведь все эти таблицы будут иметь одну строку и один столбец и одинаковые параметры отступов.
Параметру cellpadding можно присвоить разные значения для разных таблиц. Так для таблицы меню присвоимcellpadding="5", для таблицы блока меню - cellpadding="10", а для контента - cellpadding="15".
Окончательный код вашей страницы должен выглядеть так:
Снова посмотрите на свою страницу в браузере. То, что у нас получилось - это шаблон сайта. Ведь из страницы в страницу будет меняться только контент.
Шаг 4.
В нашем меню указанны названия трех страниц: главная, шаблоны и контакты. Главная - это наша index.html, с нее начинается загрузка вашего сайта. По умолчанию при наборе в адресной строке названия сайта среди всех страниц этого сайта ищется страница с названием index и загружается.
Создайте еще две страницы pattern.html и kontact.html, скопируйте в них код из index.html и сохраните в нашей папке site. В тегах <title></title> этих страниц напишите соответственно "шаблоны" и "контакты".
На этом третий урок закончен. В следующем уроке вы научитесь соединять наши страницы между собой и оформлять контент.
Сначала пару слов о текстовом редакторе, которым вы пользуетесь. Конечно, вы можете это делать в блокноте, но гораздоо удобнее пользоваться Notepad++ (скачать можно, например, на http://www.softportal.com/get-5406-notepad.html . В нем весь html подсвечивается другим цветом, что облегчает восприятие и поиск ошибок.
А теперь вернемся к основной теме. Откройте созданную на прошлом уроке html-страницу в блокноте или в Notepad.
Сейчас в ней написана фраза "Привет всем!", она черного цвета, располагается слева на белом фоне. А если мы хотим, чтобы она была посередине, крупным желтым шрифтом и на синем фоне? Для этого у тегов предусмотрены специальные атрибуты. Проще это объяснить на практике.
Шаг 1. Меняем фон html-страницы и цвет текста
Для этого добавим в наш код, в тег <body> следующие атрибуты - bgcolor="blue" text="yellow". Здесь bgcolor - атрибут, отвечающий за цвет фона страницы, а blue - его значение (в нашем случае - голубой, но можете сделать и красный - red, и зеленый - green, и любой другой). Атрибут text задает цвет текста документа, его значение yellow - желтый.
<html> <head> <title> Моя первая страница </title> </head> <body bgcolor="blue" text="yellow"> Всем привет! </body> </html>
Запустите браузер (как в шаге 3 первого урока), теперь ваша страница выглядит так:
Согласитесь, что синий фон слишком яркий, хорошо бы сделать его побледнее. Для этого давайте немного поговорим о способах задания цвета.
В HTML существуют два способа задания цвета: по имени (им воспользовались мы) и указанием шестнадцатеричного кода цвета.
С именными цветами (их 156) все просто, смотрим в соответствующую таблицу html цветов , выбираем понравившийся и пишем его имя в значение атрибута (например, bgcolor="blue").
Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа "#". Не будем вдаваться в подробности как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop. О том, как это делать читайте на странице Цвета для web. А пока пользуйтесь теми, которые указаны в примерах.
Итак, поменяем цвет в атрибуте bgcolor на нежно-голубой, а цвет текста - на менее яркий.
<html> <head> <title> Моя первая страница </title> </head> <body bgcolor="#CCCCFF" text="#666699"> Всем привет! </body> </html>
Обновите html-страницу (Ctrl+F5) и посмотрите на результат.
Шаг 2. Форматируем текст
Обратите внимание, что атрибуты, указанные в теге <body> распространяют свое действие на весь документ, т.е. весь введенный вами текст будет теперь сиреневого цвета, что не очень удобно. Поэтому лучше убрать атрибут text из тега<body>, тогда цвет текста будет установлен по умолчанию, т.е. черный. А задавать цвет различных частей текста лучше в самом тексте.
Для этого добавим несколько предложений, заключим их в нужные теги, а затем разберемся, что они делают.
<html> <head> <title> Моя первая страница </title> </head> <body bgcolor="#CCCCFF"> <h1> <font color="red"> Это заголовок первого уровня </font> </h1> Это простой текст. <b>Этот выделен полужирным начертанием.</b> <br> <i>А этот курсивом.</i> <h2> <font color="red"> Это заголовок второго уровня </font> </h2> <font color="#996666" size="5" face="Arial"> Это текст Arial, размер шрифта - 5 </font> <h3> <font color="red"> Это заголовок третьего уровня </font> </h3> <font color="green" size="2" face="Verdana"> Этот текст Verdana, размер шрифта - 2 </font> </body> </html>
Обновите html-страницу (Ctrl+F5) и посмотрите на результат.
Разберем код подробнее:
Теги <h1> </h1>, <h2> </h2> и т.д. называются заголовками. HTML поддерживает 6 уровней заголовков от h1 до h6. h1 - самый главный и крупный, далее по убыванию значения и шрифта до h6 - самого маленького и по значению, и по размеру шрифта.
Теги <font> </font> управляют шрифтом. Для этого используются атрибуты:
- color - задает цвет текста,
- size - задает размер шрифта (по умолчанию равен 3),
- face - задает гарнитуру шрифта. В принципе, вы можете указывать здесь любой понравившийся вам шрифт, но учтите, что на компьютере пользователя такого шрифта может и не оказаться. Поэтому рекомендуется использовать стандартные: Times New Roman, Arial, Verdana и Tahoma.
Теги <b> </b> делают текст жирным.
Теги <i> </i> отображают текст курсивом.
Тег <br> начинает текст с новой строки. Обратите внимание, этот тег одиночный, т.е. не имеет закрывающего тега.
Использовать эти теги с их атрибутами вы можете в любом месте текста, выделяя, как предложения, так и отдельные слова, и даже буквы. Главное помнить два правила:
1. Если есть открывающий тег, то должен быть и закрывающий.
2. Соблюдайте порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним. Например,
На этом второй урок закончен. Вы научились работать с текстом. На следующем уроке вы научитесь украшать html-страничку картинками и располагать элементы на странице.
Прежде чем создавать сайт, надо понять из чего собственно он состоит.
Когда вы набираете в адресной строке браузера, например www.yandex.ru, вы знаете, что попадете на сайт с именем yandex. Далее, щелкая по ссылкам и кнопочкам, вы переходите со страницы на страницу этого ресурса. Отсюда нетрудно догадаться, что сайт - это набор страниц, связанных между собой. Сделать сайт - значит научиться делать и связывать эти странички.
Теперь посмотрим на саму страничку сайта, например ту, которую вы видите сейчас. Из чего она состоит? Из картинок и текста. Значит, чтобы сделать страницу надо подобрать картинки, набрать текст и указать браузеру, как все это отобразить.
Да, именно браузер (Internet Explorer, Firefox или любой другой) отображает все страницы в интернете. Как он узнает, что именно эта страница предназначена для интернета? По ее расширению - html (например, страница index.txt - это просто страница с текстом, а index.html - это web-страница). Как браузер узнает, как именно отобразить ваши картинки и текст? Для этого служит язык разметки - HTML. Именно с его помощью вы и указываете браузеру, где отразить на странице картинку, а где текст.
Если вы далеки от мира программирования и вас пугает слово язык - успокойтесь, отнести HTML к языкам программирования можно лишь с большой натяжкой. Он прост и легок в понимании. Впрочем, вы сами сейчас в этом убедитесь, сделав свою первую страничку буквально за несколько минут.
Итак, от слов к делу.
Шаг 1.
Откройте блокнот (Notepad) и введите в новый документ следующий код:
<html> <head> <title> Моя первая страница </title> </head> <body> Всем привет! </body> </html>
Шаг 2.
Сохраните этот документ (Файл -> Сохранить как)
Укажите место хранения вашего файла (у меня - это диск D).
Имя файла - index.html
Тип файла - все файлы.
Шаг 3.
- Запустите браузер (Пуск -> Internet Explorer), в адресной строке укажите полный путь к созданному файлу index.html.
У меня он хранится на диске D, значит его полный путь D:\index.html, если бы он хранился в папке web на диске D, то его путь был бы - D:\web\index.html, иными словами вы должны указать через \ все папки на пути от диска к файлу.
- Щелкните по клавише Enter.
Ну вот - ваша первая страница готова. Если ее разместить на хостинге (компьютер, предоставляющий услуги по размещению и отображению вашего сайта, впрочем, об этом будет отдельный разговор), то весь мир увидит вашу страничку.
Правда, она пока умеет только отображать текст, делать ее яркой и интересной мы научимся в следующих уроках. А в конце этого давайте разберемся, что же мы написали такого, что наша страничка стала web-страничкой.
Посмотрите на код, который мы вводили в блокноте. Это и есть структура любого html-документа. Все, что находится между < и > называется тег.
Между < и > находится имя тега и его параметры (если они есть).
В основном все теги парные, т.е. один открывающий <>, а другой - закрывающий </>. Такая пара тегов называется контейнером. А все, что находится между ними - содержимым контейнера. Действия тегов распространяются только на их содержимое.
Бывают также теги одиночные, т.е. не требующие закрытия. Такие теги просто совершают определенное действие, например, перевод строки или вставку рисунка.
Разберем структуру документа подробнее:
в теги <html> </html> помещается весь документ
в теги <head> </head> помещается разная информация для браузера (об этом позже)
в теги <title> </title> помещается заголовок страницы (он виден на самом верху страницы)
в теги <body> </body> помещается все, что вы хотите разместить (картинки и текст)
Как уже говорилось, этот набор тегов является основой любой html-страницы, причем именно в таком порядке. Поэтому можете копировать набранный в блокноте html и вставлять в каждую новую страницу.
На этом первый урок закончен. Вы научились создавать web-страничку. В следующем уроке вы научитесь оформлять текст.
Автор описания Per4ik
ОПИСАНИЕ
Очень часто пользователи задаются вопросом о том, как быстро перевести PDF в Word. Да это и понято, каждый пользователь интернета ежедневно обрабатывает множество текстовой информации (что уж говорить о нас, блоггерах) и задачи перевода текстовой информации из одного формата в другой чуть ли не каждый день.
