Expression Web: cоздание сайта из шаблона

Итак, из предыдущих моих постов можно было узнать общие вводные моменты, касающиеся работы с Expression Web. А теперь пришло время сделать что-то своими руками :) и в своем посте я покажу, как это просто: даже для совсем новичков в web-разработке ;) Так как я девочка и просто обожаю (как и многие девочки) мишек Тедди, то я хочу создать сайт, посвященный им! :)))

Для начала нужно выбрать наиболее подходящий шаблон, который встроен в Expression Web, в меню: File->New->Web Site->Templates

Мне кажется, для мой темы больше всего подойдет такой розоватый блондинистый интерфейс))

Сейчас у нас активен (это можно увидеть слева в Folder List) файл dafault.html и прямо здесь и сейчас мы можем отредактировать нашу главную страницу. Заменить ее заголовок (в моем случае это будет “Мишки Teddy приносят радость”) и исправить приветсвенный текст :) так сказать, написать гимн мишкам))) Скриншот выше показывает нам нашу главную страницу в виде Design, т.е. в виде визуального редактирования – внесенные изменения мы сразу видим так, как они будут отображаться в браузере. Если вы уже более или менее опытный в программировании, то можно редактировать непосредственно код, в отображении Code:

Еще один очень удобный, на мой взгляд, режим Split или режим “и нашим, и вашим” :) чем он удобен? тем что можно редактировать код и сразу же видеть изменения на странице. Что помогает учиться (по крайней мере, мне :)) Еще мне нравится, что в этом представлении можно кликнуть, например, на картинку и тег с описанием этой картинки подсветится серым. 

Про эти три представления странички я также упоминала в одном из первых постов по Expression Web.

Итак, продолжим работать над нашим сайтом :) Заголовок и текст главной страницы я уже заменила, пришло время заменить симпатичных девушек на картинку мишек!

Кликнем на картинку и слева, в Tag Properties, в строке src выберем путь к новой картинке:

Эм…. Размеры, которые стояли для предыдущей картинки, не подходят для моей и она растянулась:

Нужно все в тех же Tag Properties или прямо в коде, в нужном теге убрать параметры height (высота) и width (ширина). Вуаля! Картинка теперь имеет свои значения высоты и ширины по умолчанию (если она слишком большая или слишком маленькая, то можно задать свои значения height и width).

Вот смотрю я на свой сайт и не нравится мне цветовая гамма (не сочетается она с мишками): фон и background заголока… Чтобы их заменить нужно:

1. найти подходящий общий фон страницы и цвет фона заголовка сайта.

2. на своем компьютере найти папку, куда сайт сохранился (в моем случае это: C:\Users\natamish\Documents\My Web Sites\mysite3\). И в папке images заменить файлы background.gif и masthead.gif на файлы с нашими рисунками (только с такими же именами!!! потому что везде в коде прописано именно это имя)

Теперь пришло время изменить надписи в меню навигации слева, дублирующее его меню внизу страницы и шапку сайта! Для этого в Folder List нам нужно двойным кликом открыть файл master.dwt (Шаблон web-страницы - Dreamweaver Template). Изменив этот файл, мы обновим все страницы сайта, что очень удобно (не очень приятно изменять каждую страничку отдельно, тем более, можно что-то пропустить…).

Я хочу, чтобы на моем сайте были следующие пункты меню: Главная, История,  Галерея (с фотками мишек) и  Контакты (если кто-то захочет разделить со мной счастье любви к Teddy) :)

Для этого нужно сделать следующее:

1. Шапку сайта проще всего исправить в визуальном режиме (Design)

2. В коде сменить название “кнопок навигации”

И в панели задач CSS Properties можно изменить цвет фона кнопок (я сделаю его сереньким, чтобы сочетался с новым background и цветом самих мишек :))) Сделать это надо 1 раз (спасибо CSS !!!) и фон всех кнопок сменится.

2. Меняем также дублирующее меню (или на сленге профессионалов: подвал) внизу странице

3. У нас остались лишние пункты меню – их нужно удалить из кода (как для навигации в левой части страницы, так и для подвала внизу страницы), а еще удалим лишние папки (с соответствующими названиями) в Folder List.

Теперь, чтобы посмотреть, что у нас получается в текущем варианте, пойдем File->Preview in Browser (и я выбираю IE 8, потому что именно он стоит у меня).

Нам предлагают сохранить изменения, мы нажимаем Ok.

Вот, что имеем на данный момент :)

Теперь мне хочется, чтобы все посетители моего сайта узнали историю-сказку про моих мишек. На нашем сайте это пункт меню – История (а в Folder List – папка About). Открываем About.htm и меняем!

Еще один способ заменить картинку:

Insert->Picture->From file

И выбирайте нужную картинку :)

Теперь можно добавить нужный текст!

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

Сайт готов? Что еще можно сделать в Expression Web:

1. Дать сайту полноценную жизнь и опубликовать его в web :)

Идем Site->Remote Web Site. Настраиваем свойства (Remote Web Site Properties)

Здесь нужно указать адрес вашего ftp сервера.

2. Посмотреть статистику по сайту: Site-> Reports

Ого! на моем сайте о мишках 80 ссылок)) А еще нет ошибок! Ура!

3. Посмотреть “матрицу ссылок” для любого файла. Я, например, хочу проверить, со всеми ли остальными страницами нормально залинковалась моя главная default.html

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

Вот так вот легко и непринужденно, минут за 30 (при наличии идеи и всего содержимого) можно создать свой собственный сайт :)

Пробуйте! Творите!

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

P.S. Студентам Expression Web можно скачать бесплатно по программе DreamSpark + бесплатный хостинг от .masterhost

Comments

• Anonymous
  April 17, 2010
  Спасибо, Вам за информацию))) Очень актуальна и полезна, а главное не заставляет долго изучать разные тематики, что бы прийти к нужному результату. Я не только про этот пост, но в общем это мои ощущения от посещения блога. Нашёл я вас случайно, на течдейз. И был очень обрадован такой простой возможностью создания сайта)) Я и раньше сталкивался с этой возможностью, визуального построения сайта, но тогда не дотягивали технологии до нужного уровня. И я о них забыл. Если я вам темы докладов буду подкидывать сделаете?))) Просто интересно некоторые моменты, я знаю что могу в другом месте найти, но то как Вы делаете думаю будет лучше)) Меня интересует как добавить на страничку видео... А вообще у меня есть такой вопрос: Где в программе Expression Web 3 есть шаблоны? По тому пути что в докладе их нету. С чем это связано? Почему так? Очень буду рад за любой ответ.