Перейти к содержанию

Добро пожаловать в сообщество творческих людей - ARTTalk.ru!

Уважаемые пользователи, если вы были зарегистрированы ранее, вам необходимо пройти процедуру восстановления пароля с помощью адреса электронной почты.

Для новых пользователей доступна регистрация.

Тема для обсуждения новой версии сообщества.

Если возникают какие либо проблемы с восстановлением старого аккаунта, вы можете воспользоваться формой обратной связи.

RIDDICK

Создание сайта с помощью Dreamweaver (основы)

Рекомендуемые сообщения

1. В меню Dreamweaver Sites -> Manage Site. В окне Site dialog, нажмите New а потом Site.

 

001_195.gif

 

2. Мы назовем наш сайт coollines а файлы сайта будут расположены на жестком диске c:\coollines. Итак в New Site окне, переключитесь на вкладку Advanced и в категории Local Info впишите название сайта и его расположение...

 

002_604.gif

 

Остальные настройки можно не трогать и оставить как есть.

 

3. Создайте новый XHTML документ следуя инструкциям...

 

003_576.gif

 

Если панель Files собрана - кликните по ней что бы развернуть.

 

4. Нажмите кнопку Create в диалоге выше, и вы получите Untitled HTML страницу, как показано. Теперь File -> Save As что бы сохранить этот документ как coollines.htm. Заметьте я сделал расширение файла htm вместо того как Dreamweaver 8 называет документы с расширением html по умолчанию. Оба они работоспособны.

 

004_172.gif

 

5. На этом этапе вы должны видеть новый файл отображаемый в панели Files, как показано ниже. Теперь нам нужно создать CSS файл в новой css подвкладке нашего сайта. Итак что бы создать новую вкладку в нашем сайте, жмите правой кнопкой на сайт в панели Files и выберите New Folder как показано ниже.

 

005_141.gif

 

006_186.gif

 

6. Создайте новый CSS файл через File -> New и выберите CSS как показано...

 

007_909.gif

 

Жмите Create.

 

7. Теперь у вас есть untitled CSS документ как показано. Выполните File -> Save As и назовите его coollines.css в css подвкладке нашего сайта следуя указаниям ниже.

 

008_182.gif

 

8. Теперь у вас есть как htm так и css на сайте, как показано ниже. Теперь нужно привязать css файл к htm файлу. Выберите coollines.htm нажатием на его вкладке.

 

009_129.gif

 

9. С выделенным файлом coollines.htm, разверните панель CSS и нажмите на Attach Style Sheet иконку как показано ниже.

 

010_197.gif

 

10. Появится диалог Attach External Style Sheet. Выделите файл coollines.css как показано ниже.

 

011_512.gif

 

11. С выбранным Link, жмите OK в окне Attach External Style Sheet.

 

012_174.gif

 

12. Если вы посмотрите на код htm файла, вы увидите как он связан с css файлом...

 

013_991.gif

 

13. Теперь мы можем вписать css правила в файле coollines.css который применится на coollines.htm. Давайте переключимся на coollines.css и впишем CSS правило.

 

014_528.gif

 

Это правило указывает на то что элемент body не должен иметь отступов и пробелов. В связи с тем что разные браузеры по разному читают верстку я всегда использую это правило что бы HTML документ выглядел одинаково во всех браузерах.

 

Сохраните файл CSS.

 

14. Переключитесь на файл HTM и выберите design view. Возьмите любой текст и скопируйте его в design view нашего HTM файла.

 

015_135.gif

 

Сохраните файл HTM.

 

15. Посмотрите ваш сайт в Internet Explorer и Firefox.

 

016_579.gif

 

16. Теперь у вас есть страница coollines.htm которая использует таблицы стилей .css.

 

017_118.gif

 

Источник: http://www.learnwebdesignonline.com/

Перевод: RIDDICK

017.gif.836418a5c3318c0590a265eb33ad25a4.gif

016.gif.555eb2ef56b9ca9e030e0df336140f8b.gif

015.gif.7e021182b33639c10caaceb15edb0071.gif

014.gif.fb1d0c8b752959f5cda4db7d8df663f1.gif

013.gif.c9aac7f383caf23e0f9a946b568ec117.gif

012.gif.cd057a0a48d482027dc326aceb192d42.gif

011.gif.df2e63187f1eda5b976b2f2e735a4657.gif

010.gif.b5a7f595edf78ec540fb3614bb34a51a.gif

009.gif.536a552d1d59fd0f1e5a22242c7e8464.gif

008.gif.281747282449d30281ca1e7f26bef1de.gif

007.gif.8a1807968d1cb34fc22d74a47acc789d.gif

006.gif.97e95c08bb3675c0086726205e7e313e.gif

005.gif.191f193d1b472e2430d62ee9104c085b.gif

004.gif.842684a31e45e538c95b0af66b33a763.gif

003.gif.568dce286b83ce46b52f1f9b90481df7.gif

002.gif.d042d139df9c979e57f933a63bae4e6a.gif

001.gif.22f7b2a7993902b4267c522f55bee730.gif

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


×

Важная информация

Мы разместили cookie-файлы на ваше устройство, чтобы помочь сделать этот сайт лучше. Вы можете изменить свои настройки cookie-файлов, или продолжить без изменения настроек. Условия использования