Общи бележки за работа с Adobe DreamWeaver
КАТЕДРА ПО ВИСША МАТЕМАТИКА И ИНФОРМАТИКА
_____________ А. Я. Казаков
____________ И. А. Колосова
СЪЗДАВАНЕ НА УЕБСАЙТ
Колекция от лабораторни описания
За студенти, обучаващи се в направление
Съдържание
Лабораторна работа 1. Основи на HTML и CSS. 2
Задача 1. Форматиране на текст. 2
Задача 2. Работа с шаблони. 2
Инструкции за работа.. 2
Общи бележки за работа с Adobe DreamWeaver 2
Указания за изпълнение на задачите (според задачите) 2
Лаборатория 2: Joomla! 2
Изисквания към дизайна.. 2
Пример за главната страница на сайта. 2
Пример за начална страница на сайт (CloudBase 2.0 шаблон) 2
Ръководство стъпка по стъпка към задача 1. 2
ЧЗВ за задача 2. 2
Лабораторна работа 3. Основи на Wordpress. 2
Пример за главната страница на сайта. 2
Ред на работа.. 2
Софтуер за лабораторни упражнения.. 2
Лабораторна работа 1. Основи на HTML и CSS. 2
Шаблон за обява.htm.. 2
Списък на файла t-style.css. 2
Лаборатория 2: Joomla! 2
Лабораторна работа 3. Основи на WordPress. 2
Лабораторна работа 1. Основен HTML и CSS.
Задача 1. Форматиране на текст
Намерете всеки структуриран текст в Интернет (например статия от Wikipedia). Оставете го на 4 раздела от по 5 параграфа всеки (премахнете или комбинирайте допълнителни параграфи, можете също да разделите съществуващите на няколко). Текстът трябва да бъде форматиран като html файл с прикачен css файл в съответствие със следните изисквания:
1) Заглавието на страницата трябва да съответства на заглавието на текста.
3) Структурата на раздела трябва да бъде запазена (т.е. заглавията трябва да бъдат отделени като заглавия).
4) Първият абзац (от наличните 20) трябва да бъде подравнен вдясно и набран с удебелен курсив.
5) В началото на страницата трябва да има съдържание под формата на номериран списък от секции, всеки ред от който трябва да бъде връзка към съответното място на страницата.
7) Текстът да се показва в два варианта, в зависимост от това за кой от стиловите файлове (style1.css, style2.css) се отнася заглавието. Разликите между опциите са:
а) Първата версия е написана в Arial, абзаците са подравнени вляво, текстът на последния абзац на всеки раздел е червен, размерът на заглавията е 120% от основния текст.
б) Втората версия е набрана на Times New Roman, абзаците са подравнени, текстът на последния абзац на всеки раздел е зелен, размерът на заглавията е 150% от основния текст, те са центрирани.
Задача 2. Работа с шаблони
Създайте сайт от четири html страници с лента за навигация (базирана на файла template.html и css таблицата t-style.css), всяка от които съдържа заглавието на текста от задача 1 в горната част, съдържанието вляво и един от разделите вдясно. При което
1) Текстът трябва да бъде подравнен и набран в Arial, премахнете другите неща от задача 1.
2) Елементите от съдържанието трябва да бъдат проектирани като хипервръзки към съответните страници на сайта.
3) Заглавията на страниците в браузъра трябва да съвпадат със заглавията на секциите.
4) Цветовете на фона на частите на страницата трябва да бъдат сменени от зададените от мен на адекватни. В този случай цветовата схема на всички страници на сайта трябва да бъде еднаква.
5) Менюто за навигация трябва да е достатъчно широко, за да го побереимена на секции без пренасяне.
Инструкции за работа
Общи бележки за работа с Adobe DreamWeaver
В началото на лабораторната работа създайте папка на вашия работен плот под вашето фамилно име. След това стартирайте Adobe DreamWeaver (меню "Старт" на Windows - Всички програми - Adobe CSS Collection (превъртете, докато се появи тази папка) - Adobe DreamWeaver CSS).
Преместете превключвателя „Code-Split-Design“ над работния прозорец на DreamWeaver в позиция „Split“ и включете опцията „Live view“ там. Сега можете да работите с html кода от лявата страна на вашия работен прозорец (вляво от него трябва да има синя лента с номера на редове) и едновременно с това да видите от дясната страна на прозореца как ще се показва в браузъра DreamWeaver (за да направите това, просто щракнете с мишката от дясната страна на екрана, след като промените кода).
Инструкции за изпълнение на задачите (по задачи)
Задача 1
Създайте папка на вашия работен плот под вашето фамилно име. След това създайте нов html файл в Adobe DreamWeeaver - за да направите това, щракнете върху "Нов" в менюто "Файл" и изберете Тип: HTML, Оформление: няма. Незабавно запазете файла, който сте създали, във вашата папка под нормално име (например article.html). За да направите това, щракнете върху "Запиши като" в менюто "Файл", изберете папка и въведете име на файл (не е необходимо да пишете разширението .html, то ще бъде заменено автоматично).
Текстът на статията трябва да бъде вмъкнат в създадения от вас html файл между таговете и