Разработка WEB / Лабораторная работа 1 Dreamweaver / Создаем простейшую веб-страницу
.pdf
веб-студия
SEVIDI
разработка веб-сайтов и уроки по созданию сайтов
Урок 2
Создаем простейшую веб-страницу
Воспользуемся тем, что мы создали на первом цикле уроков "Мой первый сайт", только вместо Блокнота у нас будут все возможности новейшей технологии предоставленные Adobe Dreamweaver CS3.
Новая веб-страница
Для создания страницы выбираем пункт Создать в меню Файл. Появится диалоговое окно Создать документ:
|
|
|
|
|
яSevidi |
|
|
|
|
и |
|
|
|
|
д |
|
|
|
|
у |
|
|
|
|
|
т |
|
|
|
|
|
с |
|
|
|
|
|
- |
|
|
|
|
б |
|
|
|
|
е |
|
|
|
|
|
В |
|
|
|
|
|
В левой части окна Создать документ расположен список . Выбираем в нем пункт Пустая страница, а в правом HTML, после чего нажимаем кнопку Создать. На экране появится пустое окно документа.
1
|
|
|
|
|
|
яSevidi |
|
|
|
|
|
и |
|
|
|
|
|
д |
|
|
|
|
|
у |
|
|
|
|
|
|
т |
|
|
|
|
|
с |
|
|
|
|
|
|
- |
|
|
|
|
|
б |
Набираем текст |
||||
|
|
|
|
|
||
е |
|
|
|
|
|
|
Текст набирается с помощью клавиатуры. Dreamweaver самостоятельно разобьет текст на строки. Для создания нового |
||||||
В |
|
|
|
|
|
|
абзаца нажимаем клавишу <Enter>. водим текст и отформатируем его: расставим заголовки, выделим части текста полужирным шрифтом. Dreamweaver мало чем отличается от знакомых нам текстовых редакторов. Рассмотрим панель управления редактором.
Мы видим на панели много знакомых кнопок. Нажимаем кнопку Дизайн, в нижней части панели и вводим текст.
2
|
|
|
|
|
яSevidi |
|
|
|
|
и |
|
|
|
|
д |
|
|
|
|
у |
|
|
|
|
|
т |
|
|
|
|
|
с |
|
|
|
|
|
- |
|
|
|
|
б |
|
|
|
|
е |
|
|
|
|
|
И так, мы написали текст. Если хотите увидеть это творение в интернет браузере, откройте подпункт IExplore в пункте |
|||||
В |
|
|
|
|
|
Предварительный просмотр в брауз ре в меню Файл или нажмите клавишу F12 или кнопку на панеле управления (она представлена на рисунке ниже).
В окне веб-браузера это будет выглядеть ТАК.
3
|
|
|
|
|
яSevidi |
|
|
|
|
и |
|
|
|
|
д |
|
|
|
|
у |
|
|
|
|
|
т |
|
|
|
|
|
с |
|
|
|
|
|
- |
|
|
|
|
|
б |
|
|
|
При подготовке текста мы обошлись б з написания тегов HTML кода. Но любой грамотный веб-дизайнер должен знать язык |
|||||
HTML и уметь с ним работать. Как получить доступ к HTML коду напечатанной страницы? Не нужно забывать, что мы |
|||||
имеем дело с гибридным веб-редактороме. Внимательно посмотрев на панель, мы увидим три кнопки(обведены на верхнем |
|||||
рисунке красным цветом): Код, Разделение и Дизайн. Они переключают три доступных режима отображения, которые мы |
|||||
сейчас рассмотрим. |
В |
|
|
|
|
В данный момент нажата правая кнопка этого набора. Она включает режим отображения веб-страницы, предлагаемый
Dreamweaver по умолчанию.
Теперь нажмем среднюю кнопку Разделение, включающую режим отображения веб-страницы и HTML кода.
4
|
|
|
|
|
яSevidi |
|
|
|
|
и |
|
|
|
|
д |
|
|
|
|
у |
|
|
|
|
|
т |
|
|
|
|
|
с |
|
|
|
|
|
- |
|
|
|
|
б |
|
|
|
|
е |
|
|
|
|
|
Как видно, окно документа разделилось на две части. В нижней части отображается сама страница, в верхней ее HTML-код. |
|||||
В |
|
|
|
|
|
Такой режим полезен, когда надо откорр ктировать код, держа перед глазами саму веб-страницу. Перемещая мышью серую разделительную полосу, мы можем увеличить верхнюю или нижнею часть окна.
И наконец, левая кнопка Код, включает режим отображения HTML кода.
5
|
|
|
|
|
яSevidi |
|
|
|
|
и |
|
|
|
|
д |
|
|
|
|
у |
|
|
|
|
|
т |
|
|
|
|
|
с |
|
|
|
|
|
- |
|
|
|
|
б |
|
|
|
|
е |
|
|
|
|
|
На следующем уроке мы рассмотрим форматирование текста. |
|
||||
В |
|
|
|
|
|
6
Компания АВС Компания АВС — поставки электронной техники ведущих мировых производителей.
В компании АВС вы всегда найдете: |
|
|
|
||
телевизоры |
|
|
|
|
|
видиомагнотофоны |
|
|
|
|
|
видеоплейеры |
|
|
|
|
|
музыкальные центры |
|
|
|
|
|
компьютеры |
|
|
|
|
|
принтеры и сканеры |
|
|
|
|
яSevidi |
и другие товары. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
и |
|
|
|
|
д |
|
|
|
|
у |
|
|
|
|
|
т |
|
|
|
|
|
с |
|
|
|
|
|
- |
|
|
|
|
б |
|
|
|
|
е |
|
|
|
|
|
В |
|
|
|
|
|
7