Глава 4. Реализация домашней страницы БЛОГА Doking
Теперь, когда все готово, мы должны начать с дизайна страницы БЛОГА Doking и реализации интерфейса базы данных.
Здесь мы не собираемся говорить о знаниях создания веб-арта, а объясняем идеи и методы создания внутренних страниц веб-сайта в Dreamweaver MX2004.
4.1.1 Идеи дизайна веб-сайта
Перед запуском каждой веб-страницы обычно следует разработать базовый дизайн страницы в Firworks или в программном обеспечении для дизайна изображений, таком как Photoshop. На рис. 4-1-1 показан базовый дизайн страницы, разработанный в Photoshop.
Рисунок 4-1-1 Базовый дизайн страницы БЛОГА Doking
пронумерован на рисунке 4-1-1. ① Часть, отмеченная красным квадратным кружком, представляет собой левый столбец веб-страницы. В настоящее время его столбцы будут обсуждаться. одно за другим в следующих главах. Добавленная часть, отмеченная красным квадратным кружком под серийным номером ②, представляет собой панель навигации веб-сайта, которая динамически генерируется из таблицы LM в базе данных dkblog.mdb, созданной в главе. 3. После того, как основные идеи понятны, приступайте к созданию шаблона веб-сайта.
4.1.2 Идеи дизайна для создания шаблонов веб-сайтов
: создавайте шаблоны веб-сайтов и унифицируйте веб-дизайн веб-сайтов. Содержимое меню столбцов веб-сайта генерируется динамическим LM таблицы данных, что также облегчает изменение содержимого меню столбцов веб-сайта.
(1) Откройте [Файл] → [Новый], откройте диалоговое окно [Новый документ], выберите «Категория:» в качестве «Страница шаблона», выберите «Страница шаблона:» в качестве «Шаблон ASP.NET VB», результат как показано на рисунке. Как показано в 4-1-2.
Рисунок 4-1-2 Диалоговое окно «Новый шаблон
» (2) Нажмите кнопку «Создать», вставьте слой, в окне его свойств установите идентификатор «main», измените «Left (L)» и «Top (T)» )» на 0 пикселей, установите «Ширину (W)» на 100% и установите выравнивание по центру. Это необходимо для центрирования веб-страницы.
(3) Вставьте таблицу, установите идентификатор «bodyT», установите ширину 780 пикселей (она рассчитана на основе ширины вашего базового дизайна страницы), установите поля и интервал единичной ячейки на 0 и установите толщина границы установлена на 0.
(4) Установите вертикальное выравнивание второй строки таблицы «bodyT» по верху, а затем разделите ее на 2 столбца. Установите ширину первого столбца на 220 пикселей, а ширину первого столбца на 560 пикселей (ширина). Количество выделенных столбцов также основано на (назначенном базовым дизайном страницы), установите цвет фона столбца 1 на RGB (236, 236, 236).
(5) Вставьте соответствующие фоновые изображения в первую и третью строки таблицы «bodyT», установите вертикальное выравнивание первой строки вниз и горизонтальное выравнивание вправо.
(6) Вы также можете создать заголовок, размер шрифта, цвет шрифта подключения или цветовую схему по мере необходимости.
(7) Установите панель навигации веб-сайта.
① Запустите Access2003, откройте базу данных dkblog.mdb и введите четыре записи по порядку, включая графический дизайн, 3D-дизайн, веб-дизайн и сетевое программирование, в поле LM таблицы LM, как показано на рисунке 4-1-3. .
Рисунок 4-1-3 Ввод данных таблицы LM
② Вернитесь в Dreamweaver, переключитесь на панель [Поведение сервера], нажмите кнопку «+» и выберите «Набор данных» в раскрывающемся меню, как показано на рисунке 4-. 1-4.
Рисунок 4-1-4 Добавление набора данных
③ Во всплывающем диалоговом окне [Набор данных] введите имя набора данных как «menuda», выберите «dkconn» в раскрывающемся меню соединения, выберите таблицу LM в в раскрывающемся меню таблицы и выберите «Столбец» для параметра «Все», выберите поле «LMID» в раскрывающемся меню сортировки и установите сортировку по возрастанию. Результат показан на рисунке 4-1-5. :
Рисунок 4-1-5 Диалоговое окно набора данных
④ Нажмите кнопку «Тест», и появится диалоговое окно, показанное на рисунке 4-1-6, указывающее, что набор данных создан успешно. Нажмите кнопку «ОК» для завершения. .
Рисунок 4-1-6 Диалоговое окно проверки набора данных
⑤ Перейдите на вкладку [Привязка] и разверните поля набора данных (меню), как показано на рисунке 4-1-7:
Рисунок 4-1-7 Вкладка «Привязка»
⑥ Перетащите поле LM в первую строку таблицы bodyT, как показано на рисунке 4-1-8:
Рисунок 4-1-8 Перетащите поле LM
⑦ Отпустите кнопку мыши, и к первой строке будет добавлен заштрихованный символ: {menuda.LM}, введите перед ним «Домашняя страница |», а затем введите символ « | Свяжитесь с нами», результат показан на рисунке 4-1-9:
Рисунок 4-1-9 Привязка данных к таблице bodyT
⑧ Выберите заштрихованный символ {menuda.LM} и следующий за ним символ «|», выберите меню [Вставка] → [Объект приложения] → [Повторить область] во всплывающем окне. вверх В диалоговом окне [Повторить область] выберите набор данных как «меню» и выберите отображаемые записи как «Все записи», как показано на рисунке 4-1-10. Нажмите кнопку «ОК», чтобы завершить навигацию по веб-сайту. меню.
Рисунок 4-1-10 Диалоговое окно «Повторяющаяся область»
(7) Наведите указатель мыши на вторую строку и второй столбец таблицы bodyT, выберите меню [Вставка] → [Объект шаблона] → [Редактируемая область] и нажмите [Новая редактируемая область]. В диалоговом окне введите имя «mainbody» и нажмите клавишу «ОК», как показано на рисунке 4-1-11:
Рисунок 4-1-11 Создайте новую редактируемую область.
На этом первоначальная работа над шаблоном веб-сайта завершена. Сохраните шаблон как bkblog.dwt.aspx.
4.1.3 Идеи дизайна для дизайна домашней страницы
: После завершения работы над созданием шаблона веб-сайта используйте его для создания и обновления веб-сайта.
(1) Создайте новую динамическую страницу «ASP.NET VB», откройте меню [Изменить] → [Шаблон] → [Применить шаблон к странице], во всплывающем диалоговом окне [Выбрать шаблон] выберите шаблон «dkblog». ", и нажмите кнопку "Выбрать", как показано на рисунке 4-1-12:
Рисунок 4-1-12. Выбор шаблона
(2) Переместите указатель мыши в редактируемую область «основной части», вставьте таблицу и установите ее идентификатор «ztre». Фактически, он спроектирован, как показано на рисунке 4-1-13. . Это то, что будет показано в каждой учебной заметке.
Рисунок 4-1-13 Содержимое, которое будет отображаться в каждой учебной записке
Вставка набора данных, описанная в этом разделе, не так проста, как описано в предыдущем разделе. Сначала посмотрите на рисунок 4-1-13. В каждой учебной заметке отображается тема, время публикации, категория заметки (т. е. подстолбец, к которому она принадлежит), автор (имя) и ответы (номер). посмотрите на схему построения таблицы ZT (рис. 3-2-2 в разделе 3.2), там есть только LMID (идентификатор столбца классификации) и нет имени столбца, которое можно получить, подключившись к таблице LM; является только YHID (идентификатор издателя), но не имя автора, которое необходимо подключить. Его можно получить только из таблицы YH, остальные данные можно получить из таблицы ZT; «Это так сложно!» На самом деле, не волнуйтесь, все трудности можно решить в Access.
4.2.1 Создайте запрос на соединение с таблицей данных
(1) Запустите Access2003, выберите [Запрос] → дважды щелкните [Создать запрос в представлении «Дизайн»), и появится всплывающее окно [Показать таблицу], как показано на рисунке 4-2-1. :
Рисунок 4-2-1 Добавление таблицы соединений запроса
(2) Добавьте таблицу LM, таблицу ZT и таблицу YH по порядку. Результаты показаны на рисунке 4-2-2:
Рисунок 4-2-2. Вид соединения с таблицей данных
(3) Создайте поле запроса, как показано на рисунке 4-2-3:
Рисунок 4-2-3 Схема структуры поля запроса
(4) Сохраните этот запрос как ZTRE и выполните запрос на подключение к таблице данных в Access.
4.2.2 Вставка набора данных
(1) Вернитесь в Dreamweaver, переключитесь на панель [Поведение сервера], нажмите кнопку «+», добавьте набор данных Ztre, выберите таблицу в качестве запроса ZTRE, только что созданного в Access, и другие соответствующие настройки, как показано на рисунке 4-2-4:
Рисунок 4-2-4 Настройки набора данных Ztre
(2) Перейдите на вкладку [Привязка], разверните набор данных (Ztre), перетащите поле ZTNAME, чтобы заменить «Тему учебной заметки» в таблице ztre, и перетащите поле ZTTIME для замены «Время публикации», перетащите поле LM для замены «Категория», перетащите поле ZYTEXT на пустое место второй строки таблицы ztre, другие конструкции показаны на рисунке 4-2-5:
Рисунок 4-2-5 Привязка данных к таблице ztre
(3) Перейдите на панель [Поведение сервера]. Вы можете видеть, что было добавлено много динамического текста. Дважды щелкните динамический текст (Ztre.ZYTEXT) и выберите. формат как «Кодирование — формат кодирования HTML», как показано на рисунке 4-2-6:
Рисунок 4-2-6 Настройка формата динамического текста
(4) Выберите первую, вторую и третью строки таблицы ztre и определите их как повторяющиеся области. Настройки показаны на рисунке 4-2-7.
Рисунок 4-2-7. Определите повторяющуюся область.
На этом работа по вставке набора данных и привязке данных на домашней странице завершена.
(1) Выберите «Домой», на панели [Поведение сервера], нажмите кнопку «+», выберите [Пейджинг набора данных] → [Перейти на первую страницу], как показано на рисунке 4-3-1:
Рисунок 4-3-1 Постраничное меню набора данных
(2) Во всплывающем диалоговом окне выберите набор данных как Ztre и нажмите клавишу «ОК», как показано на рисунке 4-3-2:
Рисунок 4-3-2 Диалоговое окно «Переход на первую страницу
» (3) Выберите «Предыдущая страница» и определите ее как «Перейти на предыдущую страницу» постраничного набора данных. Выберите «Следующая страница» и определите ее как набор данных; Перейти на следующую страницу» для разбивки на страницы; выберите «Последний», чтобы определить «Перейти на последнюю страницу» для разбивки на страницы набора данных.
(4) Измените «Номер страницы» на «Номер текущей страницы»: На панели [Поведение сервера] нажмите кнопку «+» и выберите [Показать количество записей] → [Показать номер текущей страницы].
(5) Сохраните index.aspx, завершив таким образом дизайн домашней страницы. Введите несколько записей в соответствующую таблицу ZT и таблицу YH в Access и просмотрите их в браузере IE (если в следующих главах нет специальных инструкций). Все примечания относятся к столбцу «Сетевое программирование»), как показано на рисунке 4-3-3:
Рисунок 4-3-3 Изображение просмотра домашней страницы