Сегодня поработаем с шаблонами. Наша цель — создать страницу сайта и все необходимые ссылки. Обсудим методу. Для начала справочная информация. Фреймворк — это программный каркас, позволяющий существенно упростить процесс разработки сайта посредством встроенных инструментов и шаблонов системы. Создание сайта на фреймворке позволяет реализовывать динамичные сайты, веб сервисы и приложения в минимально возможные сроки. Если не хотите вникать в детали и ломать голову над решением задачи, обратитесь лучше к профессионалам, и качественный результат вам будет гарантирован. Профильная компания SoftMG предлагает создание сайтов любой сложности и профиля, детали на softmg.ru. А мы вернемся к нашей теме. На прошлом занятии мы приготовили файл index. html, из которого сейчас создадим все страницы сайта. Как это сделать? Очень просто.
Алгоритм решения задачи
- Открываем index. html в Adobe Dreamweaver CS3. Кликаем по вкладке с названием файла, правой клавишей открываем контекстное меню и из него выбираем: «сохранить как». В открывшемся окне, в строке «Имя файла» заменяем «index. html» на «p2. html» (пусть так будет именоваться наша вторая страница). Нажимаем «Сохранить». Все мы создали вторую страницу.
- По этой же технологии создаем страницы: «p3. html»; «p4. html»; «p5. html»; «p6. html»; «p7. html» и «p8. html». В результате получаем:
- И так, мы имеем восемь html-страничек. Осталось создать ссылки с навигации на соответствующие страницы. Давайте этим и займемся. Для начала подпишем наши страницы — сейчас они совершенно одинаковые. Поскольку для нас важен сам процесс, не мудрствуя лукаво просто в начале текста откровенно напишем: главная, первая, вторая и т. д.
- Это мы сделали исключительно для себя, чтобы не путаться. Теперь займемся ссылками. Открываем «index. html» в Adobe Dreamweaver CS3. В навигации выделяем «Первая». В нижнем окне программы находим форму «Ссылка». Справа от этой формы находим значок цели. Цепляем этот значок мышкой и тащим к названию файла в правом блоке программы. В данном случае это файл «index. html».
- Как только мы отпустим мышку, то в окне формы «Ссылка» появится имя файла на который мы сослались, а выделенное название в навигации превратиться в ссылку. Все очень просто. Теперь проделываем тоже самое со всеми названиями в навигации. Выделяем «Вторая» тащим цель к файлу «p2. html»; выделяем «Третья» и тащим цель к файлу «p3. html» и далее по списку. Закончили с главной страницей? Сохраняем ее. Теперь открывайте в Adobe Dreamweaver CS3 файл «p2. html» и проделывайте все тоже самое. И так со всеми страницами. Как закончите со всеми то увидите, что перед Вами восемь html-страниц связанных общей тематикой и ссылками — то есть перед Вами сайт.
- Конечно же можно было сделать все проще и быстрее — сразу проставить ссылки в исходном файле «index. html», а за тем уже его размножать. Это мой злой умысел для Вашей пользы. Теперь Вы навсегда запомните как в Adobe Dreamweaver CS3 создаются ссылки.
- И так, подводим итог первых шести уроков. Мы создали хост на локальном компьютере; закачали туда нужные нам файлы; один из них сделали индексным; на основе «index. html» создали восемь страниц; соединили их ссылками и получили готовый сайт.
- У такого сайта есть очень существенный недостаток — для внесения каких-либо изменений эти изменения придется вносить на каждую страницу. Захотели поменять шрифт, цвет или навигацию — будьте любезны, открывайте каждую страницу в Adobe Dreamweaver и меняйте. Это время и нервы. На следующих занятиях этого раздела мы будем учиться их беречь.