Как мы все знаем, создание веб-сайтов включает в себя различные аспекты знаний, включая графический дизайн, создание HTML-страниц, определение стиля CSS, сценарии на стороне клиента (JavaScrfipt/VBScript), сценарии на стороне сервера (Asp/Asp.Net/PHP/JSP). , и т.п. содержание. В этом выпуске автор начинает с самого простого, концентрируясь на том, как создать простой HTML-сайт, и сначала получает удовольствие.
1. Инструмент создания веб-страниц, использованный автором, — Dreamweaver. Сначала запустите Dreamweaver, выберите меню «Файл» → «Новый», и появится окно, показанное на рисунке 1.
2. На вкладке «Основная страница» в этом окне есть семь опций. После того, как мы выберем элемент «HTML» и нажмем кнопку «Создать», рабочая область создания станет пустой, что означает, что страница HTML была успешно создана. Нажмите на представление кода, и появится содержимое, показанное на рисунке 2.
3. Не обращайте внимания на конкретное значение отображаемых кодов HTML-страниц. Сначала мы меняем «Документ без названия» на «Дебют веб-страницы», а затем выбираем режим дизайна. Нажмите «Меню» → «Вставка» → «HTML» → «Рамка» → «Выше», чтобы вставить рамку вверху веб-страницы. В это время веб-страница разделена на два фрейма, а именно верхний и нижний фрейм. После того, как мы выбрали фрейм, выбираем команду «Меню» → «Вставка» → «HTML» → «Рамка» → «Слева», которая вставляет фрейм в левую часть веб-страницы.
4. Нажмите «Ctrl+S», чтобы сохранить каждый кадр (top.htm, left.htm, right.htm). Затем выделите левый фрейм и нажмите команду «Меню» → «Вставка» → «Гиперссылка», после чего появится диалоговое окно, показанное на рисунке 3. Введите различные элементы в это диалоговое окно, где «текст» — это текст, отображаемый в ссылке, «ссылка» — это адрес страницы, на которую осуществляется переход после щелчка, а «цель» — это фрейм, в котором она отображается. Здесь мы выбираем «цель» в качестве основного кадра (т. е. левый фрейм) и следуем этому шагу, чтобы продолжить вставку гиперссылок. Затем введите представление кода правого фрейма (right.htm) и введите <marquee Direction=left align=middle>Добро пожаловать на мой сайт!!!</marquee> в <body></body>. Это текст. Специальные эффекты позволяют перемещать текст влево, вправо, вверх и вниз. Изменение направления на (ВВЕРХ, ВНИЗ, Влево, Вправо) может изменить направление движения текста.
5. Теперь, когда мы создали HTML-страницу с рамкой, добавим баннер в верхнюю рамку (top.htm). Баннер может выполнять некоторые динамические эффекты JavaScript. Конкретный код для эффектов динамического обмена можно посмотреть в исходном коде страницы Top.Htm. Здесь автор приводит только ключевой код:
баннерAD[0]=pic173.gif;
баннерADlink[0]=http://www.sina.com;
баннерAD[1]=pic1732.gif;
баннерADlink[1]=http://www.sohu.com;
Объяснение кода: приведенный выше массив JavaScript. BannerAD хранит изображения, а BannerADlink сохраняет ссылки после щелчка по изображению. Вы можете добавлять или удалять изображения в соответствии с вашими потребностями.
6. Продолжайте создавать страницы для гиперссылок в правом фрейме. Конкретный контент можно настроить самостоятельно. Выберите меню «Файл», нажмите «Создать», выберите HTML, чтобы создать серию страниц, причем имена страниц должны соответствовать именам, написанным при вставке ссылки. Автор привел в исходный документ два примера (последние новости и популярные знаменитости), и читатели могут попытаться добавить больше контента самостоятельно. Таким образом создается прототип веб-сайта HTML, как показано на рисунке 4, и это конечный результат страницы.
Динамический эффект не отражен на снимке экрана. Читатели могут напрямую открыть Index.htm в исходном файле в IE. После открытия появится приглашение. При щелчке правой кнопкой мыши появится меню подсказки «Разрешить заблокированное содержимое». вверх (рисунок 5).
Краткое описание: В этом выпуске мы рассказываем, как использовать Dreamweaver для создания простого HTML-сайта, в котором используются элементы JavaScript, HTML-фреймворк, гиперссылки и другие технологии. Кроме того, сообщение о блокировке контента, которое мы видели выше, связано с тем, что веб-страница не была опубликована на сайте. В следующем выпуске автор познакомит вас с еще более интересным контентом.