На этом уроке мы сделаем простой веб-сайт в среде Macromedia Dreamweaver. На предыдущих уроках вы ознакомились с тем как можно форматировать текст и обрабатывать изображения, а также вы познакомились с понятием и HTML-кодом и основами разметки текста и из чего состоит вебсайт. Теперь все те знания которые были получены вами на прошлых урока нужно применить для создания простого сайта. С чего стоит начать? Для начала необходимо настроить свойства документа. Свойства документа находятся в меню modify > page properties. В начале в строке title необходимо написать имя будующего сайта. Следующая строка отвечает за изображение на заднем плане.
Следующая строка отвечает за цвет на заднем плане. Следующая строка отвечает за цвет текста. Нажмём кнопочку ОК и увидим результат изменений. Теперь необходимо вставить текст, если текст скопирован и находится в буфере обмена то его можно вставить с помощью кнопки paste, которая находится в меню edit.
Текст появился в нашем документе. Теперь его необходимо отформатировать. Вызовем меню форматирования текста меню window > properties. Теперь необходимо определиться что мы хотим получить от текста, то есть где он должен располагаться. Расположение текста зададим по центру, а цвет и начертание текста оставим без изменений. Изменим всего лишь заголовок, для начала отделим его от основного текста. В случае если этого не сделать то даже если мы выделим нужный нам текст, то изменится всё равно весь текст. Предадим нашему заголовку необходимые начертания.
Теперь когда текст у нас отформатирован, неплохо бы добавить в наш сайт картинки. Для того чтобы вставить картинки в наш документ необходимо войти в меню window > objects и в появившемся меню с помощью кнопки insert imadge вставить в документ выбранную картинку. Лучше всего если эта картинка будет подготовлена в каком-нибудь другом редакторе например Adobe Photoshop, а не Macromedia Dreamweaver, потому как Dreamweaver очень плохо редактирует изображения. Здесь давайте остановимся ещё на одном вопросе касающимся веб-сайтов - это веб-безопасная палитра. Все изображения для веб-сайтов должны быть сделаны с применением веб-безопасной палитры. Обозреватели microsoft Internet explorer и netscape novigator изменяют цветовую палитру любых изображений и выводят её на экран. Эти программы подстраивают палитру изображений под системную палитру. По этому дизайнеры используют набор 216 цветов.
Это означает, что если ваша картинка составлена из набора безопасных цветов, то в любом обозревателе она отобразится, так как видите её сами. Во всех современных редакторах есть пункт экспортирования изображения в веб. Но с развитием Интернета система веб безопасной палитры потихоньку отходит на задний план и всё меньше применяется.
Так вот мои картинки уже обработаны с использованием веб-безопасной палитры и их остаётся только вставить после чего необходимо произвести их позиционирование. Само изображение можно перетаскивать мышкой в любое удобное место. Но более профессионально перемещать изображение с помощью специального инструмента.
Как обычно на веб-страничке присутствует несколько изображений, остальные изображения можно так же подгрузить и расположить их как нужно.
Как уже говорилось масштабирование изображения в Macromedia Dreamweaver проходит так же плохо как и редактирование и поэтому к этим операциям нужно прибегать крайне редко. Запомните, изображение нужно готовить в графическом редакторе. Ну вот наш сайт готов, есть текст, есть изображение, осталось только сохранить документ.
Сохраняется документ в Macromedia Dreamweaver стандартным образом меню file > Save as в появля^э^цемся окне вводится имя и расширение файла. Нажимаем кнопку сохранить и документ сохраняется как документ Internet explorer. Можно посмотреть что у нас в результате получилось. На этом пожалуй стоит остановиться.
⇐Вставка изображения и редактирование его свойств | TeachPro WEB-дизайн | Раздел 4. технологии web-дизайна - html - то такое html⇒