Уважаемый посетитель!
Здесь Вы можете
узнать как научиться
делать свои
сайты.

Сайт

Уроки сайтостроения
Сайт Строим сайт Скрипты Книги

Создаем свой сайт.

Как создать и разместить картинку на сайте?



     Для того, чтоб создать картинку для сайта надо сначала найти желаемую картинку либо в Интернете, либо выбрать из своих фотографий или имеющихся у Вас картинок на компьютере, то есть файлов с расширением gif, png или jpg. Создайте для них отдельную папочку, например, foto, перекачайте их в эту папку. После этого всю папку со всем ее содержимым перекачайте в папку "проба", где у Вас находится учебная HTML-страничка с именем sait1.htm.

      После этого открываем программу Paint.net (надеюсь, что Вы ее уже скачали себе на компьютер) и видим вот такое окно программы:

      Теперь нажимаем на желтый значок (второй слева во втором ряду главного меню). Программа предлагает нам перечень рисунков (входим в папочку "проба", затем открываем папочку "foto"), из которых выбираем желаемый, например, foto01.jpg. Перед Вами открытая в Paint.net картинка:

     Нам известно, что ширина нашей левой колонки 200 пикселей, плюс по 10 пикселей отступы от границы ячейки с каждой стороны. Значит, для того чтоб наша картинка поместилась в левой колонке надо изменить ее ширину до 180 пикселей. Что и мы и будем делать.

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

      Далее нажимаем "Файл" (первый пункт в первом ряду главного меню", выбираем пункт "Сохранить как..." и называем нашу картинку foto01_300 (300 через нижнее подчеркивание будет у нас означать ширину картинки в пикселях). Программа автоматически сохранит новой картинки тоже расширение файла (.jpg). Нажимаем "ОК". Новая картинка под новым именем сохранена.

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

       Устанавливаем курсор после слов "3.Третья страница" и нажимаем "Enter (Ввод)". Курсор перескакивает на новую строку. Далее в верхней строке главного меню выбираем "Вставка" (четвертый пункт). Далее "Рисунок", затем "Из файла". Программа предлагает выбор рисунков, выбираем папочку "foto", а в папочке находим нужный нам рисунок и щелкаем по нему дважды. Наш рисунок загрузился в левую колонку, в нужное для нас место (после меню). И наша страничка приобретает теперь такой вид:

      А весь код нашей странички будет таковым (если зайдете в режим "Кода"):

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новая страница 1</title>
</head>

<body bgcolor="#FFFF66">
<div align="center">
<table cellpadding="10" cellspacing="10" border="1" width="750" id="table1" bgcolor="#FFFFFF">
<tr>
<td colspan="3" bgcolor="#33CCFF">
<h1 align="center">
<font color="#CC0000">Самый лучший сайт</font></h1>
</td>
</tr>
<tr>
<td width="25%" bgcolor="#99FFCC">
<p>&nbsp;&nbsp;&nbsp;&nbsp; <b>Меню сайта</b><br>
1. Главная страница <br>
2. Вторая страница <br>
3. Третья страница </p>
<p><img border="0" src="Сайт/foto/foto01_300.jpg" width="180" height="159"></p>
<p>&nbsp;</p>
</td>
<td width="50%" bgcolor="#CCFF99">
<font color="#003300">
<p>&nbsp;&nbsp;&nbsp;&nbsp; Зима. По календарю она длится три месяца: декабрь январь и февраль,
но чаще всего в центральной и более северной России зима тянется с ноября
по март месяц. Погода зимой бывает разная, изменчивая, как цены на нефть,
как курс рубля к главным валютам мира. Но, россияне не боятся ни зимы,
ни ни колебаний цен на нефть, ни изменчивость рублевого курса.
Курс у нас у всех один - поиск своего места в жизни и
обретение семейного уюта и счастья...</p>
</font>
</td>
<td bgcolor="#99FFCC">
<p><b>&nbsp;&nbsp;&nbsp;&nbsp; Сегодня в мире:</b><br>
Цена на нефть - 35 дол. за баррель <br>
1 доллар - 75 рублей <br>
1 евро - 82 рубля </p>
</td>
</tr>
<tr>
<td colspan="3" bgcolor="#33CC33">
<h3 align="center"><font color="#FFFFFF">Автор сайта - Петров Сидор Иванович</font></h3>
</td>
</tr>
</table>
</div>
</body>

</html>
 

      Обратите внимание на код нашей вставленной картинки в левой колонке (левой боковой ячейки):

<p><img border="0" src="Сайт/foto/foto01_300.jpg" width="180" height="159"></p>

(после слов "3. Третья страница").

       На этом данный урок закончен. На следующем уроке продолжим совершенствовать наш сайт.

      Удачи Вам в обучении!

Динамичный сайт

Птицы мира

Звери мира Антилопа, волк, заяц, еж, лиса, медведь, тигр и другие...

Рыбы мира Белуга, Вьюн, Вобла, Горбуша, Голавль, Кета, Карась, Окунь, Пескарь и другие...

Новый эконом

Космос, вселенная Земля, Солнце, Луна, звезды, планеты, спутники и другое...

Растения мира, флора Акация, Астра, Аир, Анчар, Береза, Белена, Багульник и другие...

Легкая атлетика

Наша природа Объекты природы, явления природы, понятия природы и другое...

Здоровая пища
Анонсы, Абрикосы, Бананы, Виноград, Капуста, Картофель, Лук, Морковь и другие ...

Газета А589

Физкультура
Ходьба, бег, гинатика и другое для поддержания здоровья...

Здорово!
Состояние здоровья, поддержание и улучшение здоровья, лечение...

Работа, дело

Свой сайт
Изучение языков HTML, CSS, JavaScript, создание и размещение своего сайта...

Кафе "Одесса" Ярославль Завтраки, обеды, свадьбы, юбилеи, встречи друзей, поминки и другое...

Ярославские свадьбы Свадьбы в Ярославле, традиции, места проведения и другое...


Отряды птиц
Воробьиные, Веслоногие, Буревестники, Куриные...

Макроэкономика
Экономика государства, бюджет, налоги, пенсии, инфляция...

Школа спринта
Учись быстро бегать, тренировки...

Птицы на А и Б
Аист, Альбатрос, Авдотка, Бекас, Баклан, Буревестник...

Мегаэкономика
Международная экономика, разделение труда, сырья, капиталов...

Школа метателя
Техника, физиология, этапы и периоды подготовки, структура и примеры тренировок...

Основы экономики
Понятия, Законы, Аксиомы, Производство, Разделение труда, Обмен, Прибыль...

Школа прыгуна
Прыжок в длину, тройной, прыжок в высоту...

Работа
Выбор профессии, обучение, поиск, собеседование, карьерный рост...

Птицы на В и Г
Варакушка, Воробей, Ворона, Грач, Гриф, Гусь...

Школа многоборца
Виды легкой атлетики, этапы и периоды подготовки, структура и примеры тренировок...

Своё дело
Теория, практика, учет, финансы...


Эмблема сайта Сайт Строим сайт Скрипты Книги
счетчик посещений Рейтинг@Mail.ru Почта: nashocag@yandex.ru sait.a589.ru © 2017 "Сайт"