Создание структуры Web-сайта (стр. 3 из 4)

Использовать быстро загружаемые элементы. Причина номер один, почему люди быстро уходят с сайта (или не посещают его вовсе) — слишком долгая загрузка информации. Большой объем графических файлов вызывает желание как-то повлиять на ход событий, и самое простое — это нажать на кнопкуStop, остановив загрузку.

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

Не пытаться разместить все на одной странице. Не нужно перегружать страницы слишком большим количеством информации. Все мы знаем, что писатели любят писать, а дизайнеры-графики — рисовать эффектные картинки. Моя задача как разработчика сайта — создать тонкую гармонию между этими двумя очень различными группами людей, установить равновесие между текстовой и изобразительной информацией.

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

Воспользоваться картой сайта. Карта сайта может оказаться особенно полезной, когда возникнут трудности с представлением информации. Начните работу с главной страницы и идите вглубь. Это визуальное представление поможет "увидеть" содержимое вашего сайта, более ясно организовать его и избежать глобальных изменений при модификации сайта. Чем более четко я смогу представить себе структуру сайта, тем больше у меня появятся новых идеи по его улучшению.

3. Разработка Web-сайта посвященного компании "Марс"

3.1 Создание новой web-страницы (шаблона)

Для создания новой страницы в Dreamweaver я выбрала в меню Файл пункт Новый… или. На экране появится диалоговое окно Новый документ

Выбираем категорию Стартовые страницы и загружаем один из шаблонов.

Шаблон — это особым образом подготовленная и сохраненная Web-страница, где уже имеются некоторые элементы, которые могут понадобиться (заголовок, сведения об авторских правах, элементы оформления и т. п.).

После того, как в главном окне программы появится наш шаблон, необходимо сохранить наш файл. На жестком диске необходимо создать отдельную папку (далее корневая папка), в которой будут находиться все файлы, необходимые для создания файла. Назовем эту папку Мой сайт. Для сохранения файла выбираем в меню Файл пункт Сохранить и в появившемся окне указываем путь сохранения Корневая папка.

Задаем имя первой страницы glavnaya.html. Теперь мы можем найти созданную страничку в правом окне экрана. По тому же принципу необходимо создать и сохранить еще 6 страничек. Имена новых страниц задаются в соответствии с содержанием страниц сайта (это необходимо для создания гиперссылок). Имена задаются английскими буквами.

3.2 Ввод и форматирование текста

Начнем мы с того, что введем в нашу только что созданную Web-страницу текст и отформатируем его — расставим заголовки, выделим части текста полужирным шрифтом и пр. В этом смысле Dreamweaver мало чем отличается от текстовых редакторов.

Текст набирается с помощью клавиатуры при этом Dreamweaver самостоятельно разобьет текст на строки. Чтобы создать новый абзац, нужно нажать клавишу <Enter>. Если же надо просто перенести текст на другую строку (вставить так называемый разрыв строк), то достаточно нажать комбинацию клавиш <Shift>+<Enter>.

Текстовый курсор, т. е. мигающая вертикальная черточка, показывающая место, где будет появляться набираемый нами текст, может перемещаться во всех направлениях с помощью клавиш-стрелок. Также мы можем "листать" текст нажимая клавиши <PeUn> и <PeDown> мгновенно перемещаться к началу и концу строки клавишами <Ноте> и <End>. Чтобы быстро переместиться в начало или конец документа, нужно нажать, соответственно, комбинацию клавиш <Ctrl>+<Home> или <Ctrl>+<End>. Мы также можем устанавливать текстовый курсор в произвольное место, просто щелкнув там мышью.

В случае ошибки мы всегда можем удалить неправильно введенный текст, воспользовавшись клавишами <Backspace> и <Del>. Первая при нажатии удаляет символ, находящийся слева от текстового курсора, и идеально подходит для удаления только что введенного неправильного символа. Вторая удаляет символ, находящийся справа от текстового курсора.

Кроме того, в окне документа Dreamweaver доступны такие операции, как перемещение ("вырезание"), копирование текста в буфер обмена Windows и последующая его вставка в место, где находится текстовый курсор. Это может быть очень полезно, если нам нужно переместить фрагмент текста с места на место или поместить похожие фрагменты текста в разные места документа.

Быстро выполнить все необходимые операции с текстом поможет специальная панель, расположенная снизу главного окна в программе Dreamweaver:

После того, как необходимый текст набран и отформатирован, необходимо поработать с цветом. Цветовые параметры страницы тоже можно отредактировать при помощи этой панели.

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

Селектор цвета состоит из двух частей. Справа находится поле ввода, где вводится код нужного цвета в формате RGB. Выглядит это так — #RRGGBB, где RR — это шестнадцатеричное число от 0 до FF, задающее долю в окончательном цвете красной составляющей, GG — зеленой, а BB — синей. Пример задания цвета в формате RGB — #336699 (это тускло-голубой цвет).Но вряд кто запомнит наизусть шестнадцатеричные коды цветов. Поэтому в левой части селектора цвета находится кнопка вызова окна выбора цвета, которое в раскрытом виде показано на след рисунке:

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

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

Зададим фон всей страничке. Я выбрала цвет #14285F. Соответственно теперь нужно изменить цвет шрифта, чтобы текст был удобнее читать. Я сделаю шрифт черным, а заголовки фиолетовым.

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

3.3 Работа с графикой

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

Графические изображения и некоторые другие элементы страниц, также хранящиеся в отдельных файлах, называются внедренными элементами Web-страниц.

Форматов графических изображений на свете существует очень много. Но в Web-графике популярны только три из них: GIF, JPEG и PNG. При разработке своего сайта я используя только формат JPEG.

Формат JPEG (Joint Pictures Encoding Group, группа кодирования неподвижных изображений), напротив, замечательно подходит для хранения полутоновых изображений. Поэтому картины и сканированные фотографии хранят только в этом формате. Для начала, все графические изображения, которые я буду использовать при разработке web-сайта, необходимо скопировать в корневую папку. Если этого не сделать, при просмотре сайта в Web обозревателе вы не увидите желаемых изображений. Чтобы вставить изображение на страницу сайта, нужно в меню Вставить выбрать пункт Изображение, и в сплывающем окне найти тот файл, который я хочу разместить.

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

Теперь давайте щелкнем мышью по только что вставленному изображению, чтобы его выделить. (Собственно, Dreamweaver автоматически выделит изображение сразу после его вставки.) После этого вокруг изображения появится тонкая черная рамка, на правой и нижней границе которой появятся небольшие черные квадратики. Это так называемые маркеры изменения размера. Можено "захватить" мышью любой маркер и перетащить его на новое место, изменив тем самым горизонтальный или вертикальный размер изображения соответственно. А для того, чтобы оба размера изменялись пропорционально, перетащим мышью маркер, находящийся в правом нижнем углу изображения, при нажатой клавише <Shift>. Теперь сохраним получившуюся страницу, выделим изображение, если оно не выделено, и посмотрим на редактор свойств. Вот, что мы там увидим