|
Создаём сайт на основе шаблона при помощи Macromedia DreamWaver 8.0
Создание сайта на основе уже готового сайта задача с которой может справиться каждый,
но не все знают как быстро и эффективно это сделать. В этом уроке я постараюсь как можно
проще и понятнее объяснить весь процесс…
Для работы нам понадобиться специальный html редактор в с помощью которого можно
легко и быстро осуществить все задачи. Этим редактором будет Macromedia DreamWaver 8.0,
он очень удобный поддерживает всё, что только нужно и достаточно прост в обращении.
Многие профессионал в веб программировании пользуются именно этим редактором.
Скачать вы его можете по этой ссылке: DreamWaver 8.0 , установка несложная
и углубляться в подробности в этом уроке я не буду.
Перейдём от слова к делу. У вас есть какой-то шаблон сайта, если он в архиве то распакуйте его в ту папку, в которой в последствии вы будете создавать ваш сайт. В этом уроке будет использоваться следующий шаблон:
Этот шаблон написан с применением стандартных языков программирования html и CSS.
И так запускаем программу, и в появившемся диалоговом окне выбираем открыть файл
Находите папку с вашим шаблоном и выбираете index.html и перед вами откроется данный шаблон. Затем для удобства редактирования находим закладку Вид->Код и дизайн.
Теперь у нас перед глазами наглядно виден и дизайн данного шаблона и html
код который можно без проблем редактировать. Для тех кто хотя бы немного знает
html этот вариант будет идеальным, ну а кто таковыми знаниями не обладает просто будет
полезно и наглядно видно как и где менять код. И так для того чтобы изменить текст в
каком либо из блоков нам достаточно кликнуть по нему мышью выделить и написать свой текст.
Но здесь есть небольшая тонкость, если вы просто тыкните на текст и замените его на свой
то в html коде редактор будет прописывать не те буквы которые вы вводите а спецсимволы:
Поэтому для корректного написания при выборе блока, текстового редактор сам переносит в нужный фрагмент кода, и вам остается только вписать текст не в режиме дизайна,
а в режиме кода, тогда ваш текст будет нормально вписан в код и отображаться в дизайне.
Хотелось бы отметить ещё одну особенность работы с шаблонами связанную с корректным отображением текста, поскольку многие шаблоны которые присутствуют на данный момент в интернете написаны зарубежными авторами то и кодировка символов написана соответственно на англиский язык… Но это легко решаемая задача вам просто необходимо добавить две строчки
в html код вашего шаблон между тегами <head>…</head> следующего содержания:
<meta http-equiv="content-language" content="ru">
<meta http-equiv=content-type content="text/html; charset=windows-1251">
Первая строчка говорит браузерам, что сайт написан русским текстом, а вторая устанавливает стандартную кодировку.
Теперь давайте научимся править текст под свои нужды, а точнее менять цвет, размеры, наклон…и т.д. Здесь все просто выделяем необходимый вам текст и смотрим на панель снизу:
На этой панели есть практически все настройки шрифта, размер, цвет, стиль из таблицы CSS, выравнивание и т.д. Почти как в обычно редакторе Word поэтому я думаю проблем с формированием текста не возникнет.
Идём дальше нам необходимо разобраться с изображениями на сайте, здесь так же нет ни чего сложного… Находим изображение которое вам необходимо изменить или заменить и кликаем по нему. В низу экрана так же как и
в предыдущем случае появляется панель с настройками только теперь изображения.
Хотелось бы отметить один важный момент, я не рекомендую пользоваться кнопками корректировки изображения,
поскольку изображение вставляемое на сайт да и вообще вся графика на сайте должна создаваться и
корректироваться в профессиональных графических редакторах типа Photoshop и т.д. поскольку она
будет лучше оптимизирована, качественнее и занимать меньший вес что значительно может ускорить загрузку сайта.
Теперь я думаю можно перейти к вопросу гиперссылок на сайте это очень важный момент, поскольку как вы понимаете весь Интернет основан на гиперссылках.
Но здесь так же как и раньше особых сложностей тоже нет. Как при выделении текста так и при выделении
изображения как вы могли заметить присутствует поле ссылка, здесь можно пойти двумя путями, можно в поле
вписать конкретный адрес по домену, Например http://mysite.ru /about.htm, или нажать на изображение папки
возле поля ссылки и найти нужный вам файл на который будет ссылаться эта ссылка. Первый способ используется
в основном при ссылке на другие сайты ну, а второй соответственно при построении внутренней структуры сайта.
Теперь я думаю вам осталось сделать ещё несколько страниц и для вашего будущего сайта и
правильно настроить ссылки. Чтобы быстро и просто это сделать уберите весь лишний текст и
изображения которые вы не будете использовать на других страницах вашего сайта.
А теперь просто сохраните несколько раз поучившуюся страницу под разными именами
(Хотелось бы отметить что имена страниц сайта должны быть написаны только Английским текстом ни каких русских букв, иначе ни чего не получится…).
Автор: Алексей Мезенцев
|
Выравнивайте текстовые и графические объекты только одним способом, например, по центру.
