Comment ajouter à la visionneuse iWeb sans avoir à mettre à jour chaque fois

June 6

iWeb est un programme de publication Web développé par Apple qui vous permet de créer des mises en page en utilisant la méthode du glisser-déposer. Vous ne devez pas être à l'aise dans la programmation pour faire un site de base, car iWeb génère le code HTML automatiquement. Cependant, vous devez apporter des modifications au code si vous voulez ajouter des détails à votre site Web, comme une lightbox, d'une manière créative pour afficher une seule image ou une galerie d'images en utilisant le programme iWeb.

Instructions

1 Mettez les images que vous souhaitez ajouter à votre site Web sur votre bureau pour le rendre plus facile de les trouver.

2 Ouvrez iWeb. Ouvrez une nouvelle page vierge. Name it "Gallery".

3 Changer la taille des images en vignettes. Disposer les images sur la page.

4 Ouvrir "Inspecteur." Cliquez sur l'onglet "Hyperlink". Placez une coche dans la case "Activer comme lien». Choisissez "Un fichier" dans le menu déroulant à côté de "Link To." Cliquez sur "Choisir" et sélectionnez l'emplacement du dossier deskop avec les images. Ajouter un lien hypertexte à chaque image.

5 Publier le site iWeb dans le dossier "Sites" dans le répertoire "Home" sur votre ordinateur pour enregistrer les modifications.

6 Télécharger le fichier "lightbox.zip" (voir la Ressource) et extraire les fichiers dans votre site web - pas la page "Gallery" - dossier.

7 Faites un clic droit sur la "Galerie" page et sélectionnez un éditeur texte / HTML, comme TextWrangler, pour l'ouvrir.

8 Faites défiler jusqu'à </ head> et insérez le code suivant sur la ligne au-dessus:

<Link rel = "stylesheet" href = "/ lightbox.css lightbox" type = media "screen" "text / css" = />
<Script type = "text / javascript" src = "lightbox / lightbox.js"> </ script>

9 Faites défiler jusqu'à onload = "OnPageLoad ();" et entrez initLightbox () juste après la virgule pour la faire ressembler à ceci:

onload = "OnPageLoad (); initLightbox ()"

dix Faites défiler vers le bas pour des liens d'image, séparés par <Div> et suivi par <a href = "foldername / image_name.png", où "foldername" et "image_name" afficher l'emplacement et le nom de vos images. Ajouter rel = "lightbox" qui suit le code de l'image pour la faire ressembler à ceci:

a href = "foldername / image_name.png" rel = "lightbox"

Continuer en ajoutant le code à chaque lien d'image.

11 Ajouter un titre à chaque image par chaque lien d'image où il est dit title = "...... pour le faire ressembler à ceci:

title = "Titre de l'image"

12 Enregistrer la page dans l'éditeur HTML. Ouvrez le dossier du site Web. Double-cliquez sur la page "Gallery" pour l'ouvrir dans votre navigateur et voir les changements.


          

Post a comment: