Совет 1: Как встроить html страницу

При работе в интернете иногда возникает необходимость добавить на уже существующий сайт одну или несколько страниц. Если владелец сайта не искушен в вопросах веб-дизайна, то может столкнуться с определенными трудностями.
Инструкция
1
В том случае, если ваш ресурс создан на бесплатном сервисе, позволяющем за считанные минуты создать свой сайт, то добавление новых страниц следует производить через панель управления сайта. О том, как это сделать, подробно написано на форумах технической поддержки соответствующих сервисов.
2
Достаточно распространена ситуация, когда веб-мастер создает для кого-то сайт, но позже у владельца ресурса возникает необходимость его обновления – добавления или удаления страниц, наполнения актуальным контентом. Это не слишком сложная задача, ее вполне можно выполнить самостоятельно, не привлекая мастера.
3
Скорее всего, ваш сайт является независимым проектом и расположен на платном хотинге. Как владелец ресурса, вы должны располагать логином и паролем для входа в панель управления. Войдите в нее, откройте папку со страницами сайта. Вероятнее всего, страницы сайта находятся в директории public_html.
4
Для создания новой странички вам потребуется html-редактор. Часто такой редактор уже присутствует в панели управления сайтом, но его возможности обычно достаточно малы. Лучше воспользоваться другим редактором – например, CuteHtml. Он небольшой и очень удобный, с подсветкой синтаксиса.
5
Если в панели управления сайтом уже есть html-редактор, откройте в нем страницу сайта, наиболее близкую по оформлению к той, которую вам необходимо создать. Если страницы сайта имеют последовательную нумерацию, то это может быть последняя страница. Скопируйте код во встроенном редакторе, затем откройте CuteHtml. Вы увидите заготовку кода – полностью удалите ее и вставьте ваш скопированный код.
6
Сохраните вставленный код под нужным вам именем. Например, если скопированная страница имела адрес вида http://мой¬_сайт.ru/page5.html, сохраните ее в редакторе как page6.html. Теперь у вас есть заготовка новой страницы, и вы можете начать изменять ее нужным образом.
7
Измените пункты навигации в меню – найдите соответствующие строчки кода и поменяйте адреса ссылок. Например, если кнопка или строка меню «Назад» раньше вела на четвертую страницу, то теперь она должна вести на пятую – так как новая страница стала шестой. Поправьте подобным образом все строки и кнопки навигации. Сохраните измененную страницу как page6.1.html. Создание таких временных копий очень полезно, так как позволяет вернуться к предыдущему варианту в случае неправильных или неудачных изменений – у вас всегда есть в запасе резервная копия.
8
Теперь займитесь содержанием страницы. Обратите внимание на теги, которыми обрамлены строчки текста. Не трогая тегов, удалите старый текст и вставьте на его место новый. Если нужно добавить абзац, скопируйте предыдущий вместе с тегами и вставьте чуть ниже, затем замените текст. Постепенно вы разберетесь в том, зачем нужны те или иные теги.
9
Если надо вставить картинку, оформите ее правильным образом. Сам файл картинки закачайте на сайт – например, в папку image, а в коде оформите ссылку на него. Ссылка на картинку будет выглядеть примерно так: <Img src="http://мой_сайт.ru/image/picture1.jpg" Width="200" Height="150"> Параметры width и height задают размеры изображения в ширину и высоту.
10
После оформления ссылок, текста и картинок сохраните страницу под нужным именем, в данном примере это page6.html. Закачайте ее на сайт к другим страницам через панель управления сайтом. После этого вам останется отредактировать предыдущую страницу сайта, вставив в нее ссылку на новую. Так как правки будут небольшими, сделать их можно прямо на сайте, во встроенном редакторе.

Совет 2: Как вставить файл на html страницу

Достаточно часто владельцы сайтов сталкиваются с необходимостью выложить те или иные файлы – программы, фотографии, медиафайлы и др. Если на интернет-ресурсе нет специальной опции добавления файлов, в коде страницы придется прописать на них прямые ссылки.
Инструкция
1
Через панель управления вашим аккаунтом на хостинге закачайте файлы, ссылки на которые вы хотите разместить. Для удобства можете создать отдельную папку – например, files или download. Залить файлы можно и через FTP, последний способ удобен в том случае, если файлы имеют большой размер.
2
Теперь оформите необходимые ссылки, для этого существует специальный html-код: <a href="http://адрес_файла"> описание файла </a> Например, у вас есть сайт http://мой_сайт.ru и вам надо вставить ссылку на программу calculator.exe. Сам файл размещен по адресу: http://мой_сайт.ru/downloads/calculator.exe. Тогда ссылка, которую надо разместить в коде сайта, будет иметь вид: <a href="http://мой_сайт.ru/downloads/calculator.exe">Простой калькулятор</a> Фраза «Простой калькулятор» описывает файл, она и будет являться строкой ссылки.
3
Учтите, что ссылки могут иметь абсолютные и относительные пути. Например, ссылка на файл calculator.exe может быть оформлена так: <a href="/download/calculator.exe">Простой калькулятор</a> Если файл программы разместить в одной папке с главной страницей, то строка ссылки может выглядеть еще проще: <a href="/calculator.exe"> Простой калькулятор</a>
4
Если файл находится в одной папке со страницей, на которой дана ссылка на него, то адрес примет вид: <a href="calculator.exe"> Простой калькулятор</a> По сравнению с предыдущим вариантом, исчез слэш. Точно так же вы можете вставлять ссылки на любые другие файлы, меняя в строке ссылки имя файла и его описание.
5
Если вы выкладываете фотографии, для посетителей сайта может быть удобен такой вариант: вы размещаете на странице эскизы фотографий небольшого размера, а пользователь, при желании, может открыть оригинал фотографии, кликнув мышкой эскиз. При использовании относительных путей ссылка может выглядеть следующим образом: <a href="foto1_big.jpg"> <img src="foto1_small.jpg"> </a>
6
Внимательно проверяйте указываемые пути к файлам, в них не должно быть ошибок. Выложив страницу сайта со ссылками, обязательно проверьте их на работоспособность.
Видео по теме
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500