Создаем простейшую WEB страницу

Создаем простейшую WEB страницу

Урок первый и второй. Знакомство с Macromedia Dreamweaver. Работа с текстом.

 Воспользуемся тем, что мы создали на первом цикле занятий "Уроках для чайников", только вместо Блокнота у нас будут все возможности новейшей технологии предоставленные Мacromedia Dreamweaver 8.

Новая WEB страница

 Для создания страницы выбираем пункт New в меню File. Появится окно:

 В левой части окна New Document расположен список Category. Выбираем в нем пункт Dasic pege, а в правом HTML, после чего нажимаем кнопку Create. На экране появится пустое окно документа.

Набираем текст

 Текст набирается с помощью клавиатуры. Dreamweaver самостоятельно разобьет текст на строки. Для создания нового абзаца нажимаем клавишу <Enter>. Вводим текст и отформатируем его: расставим заголовки, выделим части текста полужирным шрифтом. Dreamweaver мало чем отличается от знакомых нам текстовых редакторов. Рассмотрим панель управления редактором.

 Мы видим на панели много знакомых кнопок. Нажимаем кнопку Desing, в нижней части панели и вводим текст.

 И так, мы написали текст. Если хотите увидеть это творение в интернет браузере, откройте подпункт IExplore 6.0 в пункте Preview in Browser в меню File или нажмите клавишу F12. При подготовке текста мы обошлись без написания тегов HTML кода. Но любой грамотный web дизайнер должен знать язык HTML и уметь с ним работать. Как получить доступ к HTML коду напечатанной страницы? Не нужно забывать, что мы имеем дело с гибридным web редактором. Внимательно посмотрев на панель, мы увидим три кнопки.

 Они переключают три доступных режима отображения, которые мы сейчас рассмотрим.

 В данный момент нажата правая кнопка этого набора. Она включает режим отображения web страницы, предлагаемый Dreamweaver по умолчанию.

 Теперь нажмем среднюю кнопку Split, включающую режим отображения web страницы и HTML кода.

 Как видно, окно документа разделилось на две части. В нижней части отображается сама страница, в верхней ее HTML-код. Такой режим полезен, когда надо откорректировать код, держа перед глазами саму web страницу. Перемещая мышью серую разделительную полосу, мы можем увеличить верхнюю или нижнею часть окна.

 И наконец, левая кнопка Code, включает режим отображения HTML кода.

 На следующем уроке мы рассмотрим форматирование текста.

Урок третий

Форматируем текст

 Текст, как правило, начинается с заголовка. Давайте создадим в нашем тексте красочный заголовок. Чтобы превратить обычный абзац в заголовок, нужно воспользоваться панелью Properties. Эта панель находится в нижнем доке и называется панелью свойств. Если ее не видно, включите пункт выключатель Properties в меню Window или нажмите комбинацию клавиш <Ctrl>+<F3>.

 В редакторе свойств нам понадобится раскрывающейся список Format. Пункт Paragraph форматирует текст как обычный абзац. А вот пункты Heading 1,..., Heading 6 позволяют превратить его в заголовок.

Поставим текстовой курсор на строку "Персональная страница" и выберем в меню форматов пункт Heading 1. Это будет выглядеть так:

Теперь выравним заголовок по центру. В этом нам помогут кнопки-переключатели выравнивания , расположенные в редакторе свойств. Это будет выглядеть так:

 

 Теперь посмотрим на кнопки , находящиеся в том же редакторе свойств. Они позволяют создать отступ слева, между краем окна и абзацем. Левая кнопка уменьшает отступ, правая увеличивает. Давайте поставим курсор мыши на последний абзац и нажмем кнопку увеличения отступа.

 Создадим маркированные списки, преобразовав выделенные строки в пункты списка, воспользовавшись кнопками переключателями редактора свойств.

 Левая кнопка превращает выделенные абзацы в пункты маркированного списка, а правая-в пункты нумерованного.
 

Форматируем фрагмент текста

 И так перейдем к тексту. Начнем с самого простого. Сделаем некоторые слова в тексте полужирными и курсивными. Воспользуемся двумя кнопками изменения начертания , расположенными в редакторе свойств. Левая кнопка В позволяет сделать шрифт полужирным, правая I - курсивным.

 Выделим текст "" и нажмем кнопку В. Текст станет полужирным. Теперь выделим полностью последний абзац и нажмем кнопку I. Абзац станет курсивным.

Теперь давайте зададим шрифт для фрагмента текста. Делается это с помощью двух комбинированных списков, расположенных в редакторе свойств. Для задания самого шрифта используется комбинированный список Font, а для смены размера шрифта список Size.

Откроем комбинированный список Font.

 Каждый пункт комбинированного списка соответствует определенному стандартному шрифтовому набору HTML. А пункт Default Font сбрасывает шрифтовые установки и возвращает их к установкам по умолчанию.  В комбинированном списке Size перечислены все доступные размеры шрифтов. Пункт None cбрасывает размер шрифта установки по умолчанию.

 Для полноты картины давайте сменим шрифт всего текста. Для этого выбираем пункт Select All в меню Edit или нажимаем комбинацию клавиш <Ctrl>+<A. Но проще щелкнуть мышью по кнопке <body> в секции тегов. Теперь поэкспериментируем с текстом задавая различные шрифты и размеры.

 Для задания цвета используем селектор цвета .

В левой части селектора находится кнопка, вызывающая окно выбора цвета

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

 На следующем уроке мы поговорим о специальных символах.

 Урок работа с графикой.

Создаем гиперссылки

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

 И так приступаем к созданию гиперссылок. Давайте вставим в текст нашей web страницы две гиперссылки. Одну из них на сайт Sevidi (внешняя гиперссылка) и другую на сайт, созданный в первом цикле уроков "Сайт о сайтах".

  Выделим название сайта Sevidi и обратим внимание на редактор свойств. Мы сразу заметим большой комбинированный список Ссылка(Link), где задается интернет-адрес гиперссылки.

  Введем в него интернет-адрес сайта Sevidi htth://sevidi. *****/ и нажмем клавишу <Enter>

 Теперь при просмотре страницы в web обозревателе посетитель может просто щелкнуть мышью по слову Sevidi, чтобы перейти на этот сайт. После создания ссылки слово Sevidi изменило цвет на синий и стало подчеркнутым.

 Приступим к созданию второй гиперссылке. Выделим текст "Сайт о сайтах" и опять обратимся к редактору свойств. Нажмем кнопку указанную на рисунке

 На экране появится диалоговое окно Выбрать файл(Select File)

 Выберем файл 28.html, в нашем случае в нем находится первая страница выше упомянутого сайта.

 Нажимаем ОК. Словосочетание "Сайт о сайтах" изменило цвет и стало подчеркнутым.

 Теперь зададим цель гиперссылки с помощью комбинированного списка Назначение(Target), находящимся в редакторе свойств.

 Он содержит четыре пункта, из которых полезными для нас в данный момент будут два пункта: blank и self. Первый из них позволяет вывести целевую страницу в новом окне web обозревателя, а второй - в том же окне.

 Мы можем легко исправить интернет адрес любой созданной гиперссылки. Для этого поставим текстовой курсор на текст гиперссылки, изменим интернет-адрес в комбинированном списке Ссылка(Link) редактора свойств и нажмем клавишу <Enter>.

 Есть еще один способ создания гиперссылки, позволяющий задать многие ее параметры, не доступные для задания в редакторе свойств. Для этого щелкнем кнопку Hyperlink вкладки Общий(Common) на панели Вставить(Insert). На экране появится диалоговое окно.

 В поле ввода Текст этого окна вводится текст гиперссылки. Интернет адрес задается в поле Ссылка(Link). Также можно щелкнуть расположенную правее кнопку с изображением папки и выбрать нужный файл в диалоговом окне Выбрать файл(Select File). Раскрывающейся список Целевой объект(Target) задает цель гиперссылки. В поле Название (Title) вводится пояснение к создаваемой гиперссылке. В поле ввода Ключ доступа(Access key)задается клавиша клавиатуры, после нажатия, которой произойдет переход по этой гиперссылке. Клавиша вводится в виде ее наименования: А, В, С и т. д.

 Поле ввода Индекс вкладки(Tab index) позволяет задать номер создаваемой гиперссылки в порядке, в котором web-обозреватель выполняет "обход" гиперссылок при последовательном нажатии клавиши <Tab>.

Почтовые гиперссылки

 Следующая гиперссылка, которую мы создадим, будет указывать почтовый адрес. Щелчок по ней запустит программу почтового клиента, установленную в системе по умолчанию. Интернет адрес такой гиперссылки записывается следующим образом. Возьмем почтовый адрес *****@***ru. Cогласно стандарту HTML, этот почтовый адрес должен быть записан так: mailtо:*****@***ru, причем между двоеточием после ввода mailtо и собственно адресом недолжно быть пробелов. Выделим имя автора и введем почтовый адрес в комбинированный список Ссылка(Link) редактора свойств. После нажатия клавиши <Enter> мы получим готовую гиперссылку, которая по внешнему виду ничем не отличается от обычной.

 Есть другой способ создать почтовую гиперссылку. Для этого надо переключиться на вкладку Вставить(Common) панели Общий(Insert) Emаil Link (Insert)

 На экране появится диалоговое окно

 В поле ввода Текст этого окна вводится текст гиперссылки. Если перед созданием гиперссылки выделить фрагмент текста, он уже будет подставлен в поле ввода и станет текстом гиперссылки. В поле Эл. почта(E-mail) нам нужно будет ввести почтовый адрес(можно без mailtо:). Нажимаем ОК.

Якоря

 Теперь рассмотрим еще одну разновидность гиперссылок, так называемые якоря. В отличие от других, они не указывают на другую web-страницу, а помечают некоторый фрагмент текущей страницы, чтобы другая гиперссылка могла на него сослаться.

 Для того чтобы научиться работать с якорями, создадим небольшую учебную страничку, наберем текст, достаточно большой, чтобы он не помещался на экране полностью. Для примера возьмем текст из FAQ по HTML. После этого напишем небольшое оглавление, и создадим первый якорь. Поместим текстовой курсор в начало первого абзаца текста и переключимся на вкладку Вставить(Common) панели Общий(Insert). Нажмем кнопку вставки якоря.

 На экране появится диалоговое окно Именованная привязка (Named Anchor). В поле ввода Имя привязки введем имя создаваемого якоря par1.

 Имена якорей должны состоять из латинских букв цифр, причем первым символом должна быть буква. Введя имя, нажмем ОК.

 Маркер якоря будет отображен в позиции, где тот был вставлен. Это делается для удобства web - дизайнера. якоря на страницах web-обозревателя не отражаются.

 Создадим гиперссылку, ссылающуюся на якорь. Выделим строку "Что такое HTML?" в оглавлении. Интернет-адрес, на который будет ссылаться гиперссылка, будет выглядеть так: #par1.

 Введем его в комбинированный список Ссылка(Link) редактора свойств и нажмем клавишу <Enter>. Значок решетки # обозначает имя якоря. Имя файла web-страницы не указано. Это значит, что мы ссылаемся на якорь, расположенный на той же странице. Если мы хотим сослаться на данный якорь из другой страницы, то должны сослаться на эту страницу. Например, 1.1.html#par1. Создаем якоря на оставшийся список оглавления. Как это делать, мы уже знаем.

 Следующий урок, на котором мы рассмотрим, как работать с параметрами страницы смотрите ниже.

Урок Работа с таблицами.

Создание таблицы

 Создадим новую web-страницу. Сохраним ее в файле под именем 1.3.html. Нажмем кнопку Таблица вкладки Общее панели Вставить.

 При нажатии на кнопку появится диалоговое окно Таблица

 В полях ввода Строки и Столбцы вводятся, соответственно количество строк и столбцов. Если мы ошибемся, то количество строк и столбцов можно добавить или удалить.  

 В поле ввода Ширина таблицы задается ширина таблицы в пикселях или процентах от ширины родительского элемента. Поле ввода Разбивка ячеек служит для задания отступа между границами отдельных ячеек. По умолчанию равен 2 пикселям.

 В поле ввода Размер границы задается толщина рамки таблицы и ее ячеек в пикселях. По умолчанию толщина рамки таблицы равна 1; если нужно убрать рамку, в поле ввода введем 0.

 В поле ввода Отступы ячеек задается отступ между границей ячейки таблицы и ее содержимым в пикселях.

 Набор переключателей Верхний колонтитул позволит нам создать "шапку" и выделенный первый столбец таблицы. В этом наборе доступны переключатели Нет (нет ни "шапки", ни выделенного первого столбца),Лево (выделенный первый столбец), Вверх ("шапка") и Оба (выделены "шапка" и левый столбец).

 В поле ввода Заголовок вводится название таблицы. Это название будет помещено web-обозревателем над таблицей. Раскрывающейся список Выравнивание позволит задать местоположение и выравнивание названия, если оно задано.

 В области редактирования Итого вводится примечание таблицы. Оно не выводится web-обозревателем на экран. 

 И так зададим таблице значения, представленные на рисунке и нажмем ОК.

  Вставим в ячейки таблицы какой-нибудь текст. В ячейку можно вставить другую таблицу. Добавлять строки в таблицу приходится очень часто. Ставим в самую правую ячейку последней строки таблицы текстовой курсор, нажимаем клавишу <Tab>- и в таблице появилась новая пустая строка. Если новую строку нужно вставить в середину таблицы, делаем следующее. Помещаем текстовой курсор в ячейку строки, над которой нужно вставить новую, и выбираем пункт Вставить выше строку подменю Объекты таблицы меню Вставить.

  Точно также можно вставить в таблицу новый столбец. Выбираем пункт Вставить столбец влево в подменю Объекты таблицы меню Вставить. И т. д. по пунктам.

 Если нужно будет вставить в таблицу сразу несколько строк и столбцов, удобней будет воспользоваться пунктом Вставить строки и столбцы подменю Таблица меню Изменить. После его выбора на экране появится диалоговое окно.

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

 Строки и столбцы будут вставлены после нажатия кнопки ОК.

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

 На экране появится диалоговое окно Разделить ячейку.

 Группа переключателей Разделить задает, как будет делиться строка (столбец).

 После нажатия кнопки ОК текущая строка (столбец) будут разделены.

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

 Если потребуется удалить строку, столбец или таблицу, выделяем нужный объект и нажимаем клавишу <Del> или выбрать пункт Удалить строку(Удалить столбец) подменю Таблица меню Изменить.

Форматирование таблиц

 Если мы выделим ячейку или просто поставим на нее курсор, редактор свойств позволит нам задать ее параметры.

 Раскрывающейся список Гориз. позволяет задать горизонтальное выравнивание содержимого ячейки. Аналогичный список Верт. задает вертикальное выравнивание содержимого ячейки. В полях Ш и В соответственно ширина и высота ячейки. Флажок Без переноса, будучи включенным, запрещает перенос строк внутри ячейки. Флажок Заголовок при включении превращает выделенную ячейку в ячейку заголовок. Поле ввода Фон служит для задания интернет-адреса фонового изображения ячейки, а селектор цвета Фон - цвета ее фона. Если не то ни другое не задано, будут использоваться параметры фона родительского элемента.

 Селектор цвета Рамка позволяет задать цвет рамки ячейки.

 Для строк предлагается такой же набор параметров, как и для ячеек. Естественно эти параметры применяются не к отдельной ячейке, а ко всей строке.

  Вид редактора свойств, после выделения всей таблицы имеет следующий вид.

 Поля Строки и Столбцы служат для быстрого изменения количества строк и столбцов таблицы. Поле ввода Ш служит для задания ширины таблицы В - высоты.. В раскрывающемся списке справа выбирается единица измерения: пиксели или проценты. Поле ввода Блок задает отступ между границей ячейки и ее содержимым. Поле Пробел задает отступ между границами находящихся рядом ячеек. В поле ввода Граница задается толщина рамки ячеек в пикселях. Раскрывающейся список Выровн. служит для горизонтального выравнивания таблицы. Поле ввода Избр. фона служит для задания интернет-адреса файла фонового изображения всей таблицы. Селектор цвета Цвет фона задает цвет фона таблицы, селектор цвета Цвет рамки задает цвет рамки таблицы.

  Кнопка Очистить ширину столбцов удаляет все заданные для ячеек таблицы и самой таблицы значения ширины, а кнопка Очистить высоты строк -все заданные значения высоты. Кнопка позволяет преобразовать относительные значения ширины ячеек в абсолютные. Кнопка выполняет обратное преобразование значений ширины ячеек-из абсолютных в относительные.

 Теперь займемся объединением ячеек таблиц. Прежде чем объединить ячейки таблиц их нужно выделить. После этого обратим внимание на редактор свойств. В его левом нижнем углу находится кнопка Объединить выбранные ячейки используя промежутки.

 С ее помощью производится объединение ячеек.  

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