Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

Разработка WEB / Лабораторная работа 1 Dreamweaver / Создаем простейшую веб-страницу

.pdf
Скачиваний:
11
Добавлен:
30.05.2015
Размер:
537.2 Кб
Скачать

веб-студия

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