Donc, vous venez d'acheter un nouveau compte d'hébergement et vous quelques bonnes idées pour votre prochain projet. Au lieu d'avoir juste la page d'accueil par défaut pour votre nom de domaine pourquoi ne pas créer une page à venir qui est simple et efficace.
Il ya plusieurs raisons pour créer ces pages à venir bientôt. La première raison est de rendre votre produit ou service plus professionnel au lieu d'avoir l'«C'est un site" que votre société d'hébergement vous offre. Deuxièmement, il peut aider à promouvoir votre site avant même qu'il soit lancé. N'oubliez pas d'inclure votre compte twitter ou un abonnement par courriel que les gens puissent suivre l'évolution du site. Il leur permet d'obtenir plus excité à propos de quelque chose qu'ils n'ont même pas encore vu.
Capture d'écran par exemple
Conception de la page
Lorsque vous démarrez la conception garder à l'arrière de votre tête que cela ne doit pas être une page complexe, au contraire, en fait. Cette page doit être simple et efficace. Il doit également transmettre un message de ce que le site proposera d'intéresser les gens. Ne passez pas trop de temps sur cette page que vous avez besoin de ce temps pour compléter vos autres idées. Allons de l'avant une ouverture vers le haut photoshop et c'est parti.
1. Ouvrez un document de 900px 700px par photoshop avec un fond transparent et les réglages ci-dessous.
2. Maintenant passons à remplir le fond en allant jusqu'à Edition> Remplir ..sélecteur de couleur dans le menu déroulant et mettre dans le code hexadécimal # 333333 et appuyez sur OK.
3. Maintenant, sélectionnez l'outil de sélection rectangulaire et dans le menu déroulant en haut choisir la taille fixe. Entrez 900px de largeur et 300px de hauteur.
4. Avant de cliquer n'importe où monter à Calque> Nouveau> Calque ... et nommez-Haut. Maintenant, vous pouvez cliquer n'importe où dans le document et assurez-vous que vous faites glisser la sélection vers le haut.
5. Assurez-vous que vous êtes sélectionné sur le calque nouvellement créé pas la couche sombre et aller jusqu'à Edition> Remplir ... choisir la couleur dans le menu déroulant et entrez # ececec pour le code hexadécimal.
6. Maintenant, nous avons notre section supérieure rassembler tout ce que nous avons à faire est de mettre dans le logo. Ouvrez votre logo et faites-la glisser dans votre document. C'est une question importante parce que vous voulez la marque à vraiment se démarquer alors assurez-vous que votre logo est très répandue.
7. Ensuite, nous devons ajouter dans la partie BIENTÔT afin qu'ils sachent que le site n'est pas seulement un site non fonctionnel. Vous ne devez pas nécessairement utiliser COMING SOON, juste quelque chose qui permet au client de savoir que ce n'est pas encore disponible. D'abord, créez un autre nouveau calque en allant dans Calque> Nouveau> ... nommez-ombre. Prenez votre outil de sélection rectangulaire et définir une taille fixe à 400px de large et 30px. Cliquez et faites le choix directement sous le logo.
8. Prenez votre outil dégradé et dans le sélecteur de dégradé (ce qui est en haut à gauche) choisissez votre deuxième option qui devrait être au premier plan vers transparent. Également définir votre couleur de premier plan au noir en appuyant sur D sur votre clavier. Cliquez env. 5px-dessus de la sélection que vous avez et tout en faisant glisser vers le bas maintenez la touche Maj et de laisser aller quand vous obtenez à peu près au milieu de votre sélection. Une fois cela fait tomber votre opacité de ce calque dans votre palette des calques à 10%.
9. Ensuite, nous allons utiliser un masque de calque pour estomper les coins en diagonale. Aller à un masque de calque Calque>> Tout faire apparaître. Cela nous permet de voir la couche complète, puis fondu à l'aide de la couleur noire.Vous devriez toujours avoir votre outil de dégradé sélectionné et originaux aux Transparent sélectionné et le noir comme couleur de premier plan sinon assurez-vous que vous faites. Suivant faites glisser les gradients ci-dessous chacun des coins en diagonale vers le haut, comme la capture d'écran ci-dessous.
10. Une fois que c'est terminé, allez-y et ajoutez le texte à venir po
Codage la page avec CSS3
J'ai récemment fait un post sur les bases de HTML5 , mais aujourd'hui nous allons coller avec XHTML et utiliser le XHTML Strict DOCTYPE.
Les bases
11. C'est le squelette de ce qu'est une page HTML doit contenir afin d'afficher correctement. Ajoutez le code ci-dessous dans un fichier HTML vide et enregistrez-le sous index.html.
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"< tête > < meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" /> < title > Vêtements Alive Again </ title ></ tête >< corps ></ body ></ html > |
12. Ensuite, créez un fichier CSS et nommez-le style.css. Maintenant passons à lier notre fichier CSS à notre fichier index.html afin de ne pas oublier. Ajouter le bout de code ci-dessous directement au-dessus de la balise head de clôture. Oh, et pour vous faire économiser quelques difficultés assurez-vous que le fichier d'index et le fichier CSS sont dans le même répertoire.
1
| <Link href = "style.css" rel = "stylesheet" type = "text / css" /> |
La structure HTML
13. Maintenant, nous allons choisir exactement comment la page va être aménagé. Nous allons utiliser une mise en page largeur de 100% dans ce tutoriel nous aurons besoin de deux divs pour la partie supérieure. Un remplissage à 100% de la couleur de l'autre côté et de l'autre pour centrer le contenu. Dans l'exemple ci-dessous j'ai pris toutes les autres balises, sauf les balises du corps et ce qui est entre eux, mais ce n'était que pour le rendre plus fa
Aucun commentaire:
Enregistrer un commentaire