Capítulo 4 Implementação da página inicial do BLOG da Doking
Agora que tudo está pronto, devemos começar com o design da página do BLOG da Doking e a implementação do front-end do banco de dados.
Aqui não vamos falar sobre o conhecimento da criação de web art, mas sim explicar as ideias e métodos de construção de páginas internas do site no Dreamweaver MX2004.
4.1.1 Idéias de design de site
Antes de iniciar cada página da Web, o design básico da página geralmente deve ser projetado no Firworks ou em um software de design de imagem como o Photoshop. A Figura 4-1-1 é o design básico da página projetado no Photoshop.
Figura 4-1-1 O design básico da página do BLOG de Doking está
numerado na Figura 4-1-1 ①A parte marcada com um círculo quadrado vermelho é a coluna esquerda da página da web. Atualmente, suas colunas serão discutidas. um por um nos capítulos seguintes. O que é adicionado, e a parte marcada com um círculo quadrado vermelho no número de série ②, é a barra de navegação do site, que é gerada dinamicamente a partir da tabela LM no banco de dados dkblog.mdb estabelecido no capítulo. 3. Depois que as ideias básicas estiverem claras, comece a construir o modelo do site.
4.1.2 Idéias de design para a construção de modelos de sites
: Crie modelos de sites e unifique o design da web do site. O conteúdo do menu de colunas do site é gerado pelo LM dinâmico da tabela de dados, o que também facilita a modificação do conteúdo do menu de colunas do site.
(1) Abra [Arquivo] → [Novo], abra a caixa de diálogo de [Novo Documento], selecione "Categoria:" como "Página Modelo", selecione "Página Modelo:" como "Modelo ASP.NET VB", o resultado é como mostrado na figura Como mostrado em 4-1-2.
Figura 4-1-2 Caixa de diálogo Novo modelo
(2) Clique no botão "Criar", insira a camada, em sua janela de propriedades, defina o ID como "principal", altere "Esquerda (L)" e "Topo (T) )" para 0px, defina a "Largura (W)" para 100% e defina o alinhamento como centralizado. Isso é para centralizar a página da web.
(3) Insira uma tabela, defina o ID como "bodyT", defina a largura para 780 pixels (isso foi projetado com base na largura do design básico da sua página), defina as margens e o espaçamento da célula unitária como 0 e defina a espessura da borda definida como 0.
(4) Defina o alinhamento vertical da segunda linha da tabela "bodyT" para o topo e, em seguida, divida-a em 2 colunas. Defina a largura da primeira coluna para 220px e a largura da primeira coluna para 560px (a largura. das colunas alocadas também é baseada (atribuída pelo design básico da página), defina a cor de fundo da coluna 1 como RGB (236, 236, 236).
(5) Insira as imagens de fundo correspondentes na primeira e terceira linhas da tabela "bodyT", defina o alinhamento vertical da primeira linha para baixo e o alinhamento horizontal para a direita.
(6) Você também pode criar o título, o tamanho da fonte, a cor da fonte de conexão ou o esquema de cores conforme necessário.
(7) Estabeleça a barra de navegação do site.
① Inicie o Access2003, abra o banco de dados dkblog.mdb e insira quatro registros em ordem, incluindo design gráfico, design 3D, web design e programação de rede, no campo LM da tabela LM, conforme mostrado na Figura 4-1-3 .
Figura 4-1-3 Entrada de dados da tabela LM
② Retorne ao Dreamweaver, mude para o painel [Server Behavior], clique no botão "+" e selecione "Data Set" no menu suspenso, conforme mostrado na Figura 4- 1-4.
Figura 4-1-4 Adicionando um conjunto de dados
③ Na caixa de diálogo pop-up [Data Set], insira o nome do conjunto de dados como "menuda", selecione "dkconn" no menu suspenso de conexão, selecione a tabela LM em no menu suspenso da tabela e selecione Coluna é a opção "Todos", selecione o campo "LMID" no menu suspenso de classificação e defina a classificação em ordem crescente. O resultado é mostrado na Figura 4-1-5. :
Figura 4-1-5 Caixa de diálogo do conjunto de dados
④ Clique no botão "Testar" e a caixa de diálogo mostrada na Figura 4-1-6 aparecerá, indicando que o conjunto de dados foi criado com sucesso. Clique no botão "OK" para concluir. .
Figura 4-1-6 Caixa de diálogo de teste do conjunto de dados
⑤ Mude para a aba [Binding] e expanda os campos do conjunto de dados (menuda), conforme mostrado na Figura 4-1-7:
Figura 4-1-7 Guia Binding
⑥ Arraste o campo LM para a primeira linha da tabela bodyT, conforme mostrado na Figura 4-1-8:
Figura 4-1-8 Arraste o campo LM
⑦ Solte o mouse e um caractere sombreado será adicionado à primeira linha: {menuda.LM}, digite "Home Page | " na frente dele e depois insira o símbolo " | Fale Conosco”, o resultado é mostrado na Figura 4-1-9:
Figura 4-1-9 Vincular dados à tabela bodyT
⑧ Selecione o caractere sombreado {menuda.LM} e o seguinte caractere "|", selecione o menu [Inserir] → [Objeto de aplicativo] → [Repetir área], na janela pop-up. up Na caixa de diálogo [Repeat Area], selecione o conjunto de dados como "menuda" e selecione os registros exibidos como "All Records", conforme mostrado na Figura 4-1-10 Clique no botão "OK" para concluir a navegação no site. menu.
Figura 4-1-10 Caixa de diálogo Área de repetição
(7) Mova o mouse para a segunda linha e segunda coluna do corpo da tabela, selecione o menu [Inserir] → [Objeto modelo] → [Área editável] e clique em [Nova área editável] Na caixa de diálogo, digite o nome “mainbody” e pressione a tecla “OK”, conforme mostrado na Figura 4-1-11:
Figura 4-1-11 Crie uma nova área editável
Isso conclui o trabalho inicial do modelo de site. Salve o modelo como bkblog.dwt.aspx.
4.1.3 Ideias de design para o design da página inicial
: Depois de concluir o trabalho de construção do modelo do site, use-o para construir e atualizar o site.
(1) Crie uma nova página dinâmica "ASP.NET VB", abra o menu [Modificar] → [Modelo] → [Aplicar modelo à página], na caixa de diálogo pop-up [Selecionar modelo], selecione o modelo "dkblog ", e clique no botão "Selecionar", conforme mostrado na Figura 4-1-12:
Figura 4-1-12 Selecione o modelo
(2) Mova o mouse para a área editável "mainbody", insira uma tabela e defina seu ID como "ztre". . Isto é o que cada nota de estudo mostrará.
Figura 4-1-13 O conteúdo que será exibido em cada nota de estudo
A inserção do conjunto de dados explicada nesta seção não é tão simples como explicado na seção anterior. Primeiro, observe a Figura 4-1-13. Cada nota de estudo exibirá o tópico, horário de publicação, categoria da nota (ou seja, a subcoluna à qual pertence), autor (nome) e respostas (número). observe o diagrama de design da tabela ZT (Figura 3-2-2 na Seção 3.2), há apenas LMID (o ID da coluna de classificação) e nenhum nome de coluna, que pode ser obtido conectando-se à tabela LM; é apenas YHID (ID do editor), mas nenhum nome do autor, que precisa ser conectado. Só pode ser obtido na tabela YH; outros dados podem ser obtidos na tabela ZT; “É tão complicado!” Na verdade, não se preocupe, todas as dificuldades podem ser resolvidas no Access.
4.2.1 Estabelecer consulta de conexão de tabela de dados
(1) Inicie o Access2003, selecione [Consulta] → clique duas vezes em [Criar consulta no modo Design] e a janela [Mostrar tabela] aparecerá, conforme mostrado na Figura 4-2-1 :
Figura 4-2-1 Adicionar tabela de conexão de consulta
(2) Adicione a tabela LM, a tabela ZT e a tabela YH em ordem.
Figura 4-2-2 Visualização da conexão da tabela de dados
(3) Projete o campo de consulta conforme mostrado na Figura 4-2-3:
Figura 4-2-3 Diagrama de design do campo de consulta
(4) Salve esta consulta como ZTRE e conclua a consulta de conexão da tabela de dados no Access.
4.2.2 Inserir conjunto de dados
(1) Retorne ao Dreamweaver, mude para o painel [Comportamento do servidor], clique no botão "+", adicione o conjunto de dados Ztre, selecione a tabela como a consulta ZTRE recém criada no Access, e outras informações relevantes configurações, conforme mostrado na Figura 4-2-4:
Figura 4-2-4 Configurações do conjunto de dados Ztre
(2) Mude para a guia [Binding], expanda o conjunto de dados (Ztre), arraste o campo ZTNAME para substituir o "Tópico da Nota de Estudo" na tabela ztre e arraste o campo ZTTIME para substituir "Publish" Time", arraste o campo LM para substituir "Category", arraste o campo ZYTEXT para o espaço em branco da segunda linha da tabela ztre, outros desenhos são mostrados na Figura 4-2-5:
Figura 4-2-5 Vincular dados à tabela ztre
(3) Mude para o painel [Comportamento do servidor] Você pode ver que muito texto dinâmico foi adicionado. Clique duas vezes no texto dinâmico (Ztre.ZYTEXT) e selecione. o formato como "Encoding—HTML Encoding" Format", conforme mostrado na Figura 4-2-6:
Figura 4-2-6 Configure o formato de texto dinâmico
(4) Selecione a primeira, segunda e terceira linhas da tabela ztre e defina-as como áreas repetidas. As configurações são mostradas na Figura 4-2-7.
Figura 4-2-7 Defina a área de repetição
Isso conclui o trabalho de inserção do conjunto de dados e vinculação de dados na página inicial.
(1) Selecione "Home", no painel [Server Behavior], clique no botão "+", selecione [Dataset Paging] → [Move to the first page], conforme mostrado na Figura 4-3-1:
Figura 4-3-1 Menu de paginação do conjunto de dados
(2) Na caixa de diálogo pop-up, selecione o conjunto de dados como Ztre e pressione a tecla "OK", conforme mostrado na Figura 4-3-2:
Figura 4-3-2 Caixa de diálogo Mover para a primeira página
(3) Selecione "Página Anterior" e defina-a como "Mover para a página anterior" da paginação do conjunto de dados, selecione "Próxima página" e defina-a como um conjunto de dados "; Mover para a próxima página" para paginação; Selecione "Última" para definir "Mover para a última página" para paginação do conjunto de dados.
(4) Altere "Número da página" para "Número da página atual:" No painel [Comportamento do servidor], clique no botão "+" e selecione [Mostrar contagem de registros] → [Mostrar número da página atual].
(5) Salve index.aspx, completando assim o design da página inicial. Insira alguns registros na tabela ZT e na tabela YH correspondentes no Access e navegue por eles no navegador IE (se não houver instruções especiais nos capítulos seguintes, Todas as notas pertencem à coluna "Programação de Rede"), conforme mostrado na Figura 4-3-3:
Figura 4-3-3 Imagem de navegação na página inicial