Implementering

Nu skal dit design på papir realiseres i HTML og CSS.

Eksempel:
Implementering af to søjle layout: test.html, og test.css

Opgaver:
Implementer dit design i HTML og CSS

Træt af at lave en masse ens sider? Template til generering af sider

Hjælp! Det virker ikke - HTML og CSS begynderfejl

Opgaver:

  • Overvej hvilke dele af jeres design der er fælles for alle sider på bloggen, og hvilke dele der er specifikt for et blog post. Bloggen har 3 skabeloner: base.html, post.html, og posts.html. base.html er den generelle skabelon - den indeholder elementer der går igen på samtlige sider i bloggen. post.html og posts.html benytter den generelle skabelon (se slides for mere information om dette). post.html er en skabelon for individuelle blog indlæg - den indeholder elementer der vises på sider med et enkelt blog indlæg. posts.html er en skabelon for sider med en liste af blog indlæg fx forsiden.
  • Overvej hvilke dele af dit design, der skal placeres i base.html, post.html, og posts.html
  • Start LAMP serveren og verificer at bloggen virker lokalt ved at gå til http://localhost/blog
  • Start Aptana. Tag en kopi af views/base.html kald den fx views/base.original.html.
  • Indsæt herefter små stykker HTML kode fra dit design ind i base.html. Tjek at det virker ved at tilgå http://localhost/blog. Gentag gentag gentag.
  • Indsæt herefter små stykker HTML kode fra dit design ind i posts.html, Tjek at det virker ved at tilgå http://localhost/blog. Gentag gentag gentag.
  • Indsæt herefter små stykker HTML kode fra dit design ind i post.html. Tjek at det virker ved at tilgå et af dine blog indlæg. Hvis du ikke har nogen indlæg endnu, så opret et. Dette gøres ved at logge ind og herefter klikke på opret nyt indlæg.
  • Upload til skyen - se evt. Upload af blog

Links

Medmindre andet er angivet, er indholdet af denne side licenseret under Creative Commons Attribution-NonCommercial 3.0 License