Étant donné que de nombreux amis ont demandé comment découper des images et que ce problème peut être grand ou petit, il est absolument impossible de l'expliquer clairement en une ou deux phrases. Je vais donc donner un exemple simple pour illustrer ce problème lorsque j'aurai du temps libre. temps à la maison aujourd'hui ! OK, commençons :
étape 1 : ouvrez le brouillon de conception dans PhotoShop, comme indiqué ci-dessous.
Sélectionnez l'outil de tranche sur le tableau d'outils et effectuez d'abord une coupe audacieuse. Conseils : coupez une grande zone de bloc de couleur en un seul morceau séparément et conservez-la aussi nette que possible sur la ligne horizontale (vous en apprendrez plus à ce sujet) problème dans la page de production ultérieure) Sentiment) L'image coupée est la suivante :
étape 2 : Sélectionnez l'enregistrement du fichier pour le Web... dans PhotoShop pour la sortie. Faites attention à la sélection de certains paramètres ici :
Jetons un coup d'œil aux parties 1, 2 et 3 marquées par la ligne rouge. Sélectionnez l'outil de découpage indiqué en 1, puis cliquez sur l'image affichée en 2 et sélectionnez la valeur de couleur à l'endroit indiqué en 3. Si le la couleur est unique, vous pouvez choisir la valeur la plus petite possible. (Pourquoi ??) Réponse : Cela réduira considérablement la taille du fichier et en même temps conservera mieux la couleur de l'image après le réglage ; dessus, cliquez sur OK pour sortir le fichier. Le fichier comprend ici un dossier htm et images, comme indiqué dans la figure :
Votre page n'est qu'à moitié complétée à ce stade. Ensuite, créez le site dans Dreamweaver :
étape 3 : Définissez le site :
Donnez un nom au site dans le nom du site sur le côté gauche de l'image, comme exemple
Sélectionnez ensuite tous les dossiers du site que nous venons d'exporter dans le dossier racine local ci-dessous ; une fois le site construit, nous verrons dans le plan du site :
(Pourquoi créer un site Web ?) Construire un site Web nous permet de développer une bonne habitude, qui consiste à rassembler les fichiers et dossiers contenus dans un site Web de manière ordonnée. En même temps, nous pouvons facilement déplacer le site vers d'autres endroits. . place sans aucune réécriture du chemin du fichier ! (Bien sûr, si vous ne voulez vraiment pas créer de site, personne ne vous forcera. J'ai rencontré de tels collègues dans mon travail. Ils ne sont pas habitués à créer des sites pour des pages. )
Étape 4 : Recréez le tableau des pages (pourquoi ?) Généralement, le fichier htm exporté directement dans Photoshop ne peut pas être utilisé directement, car certains endroits doivent être ajustés lors de l'utilisation réelle, tels que les endroits avec du texte dynamique, nous devons les ajouter à la page. Si la page d'entrée n'utilise pas d'images, alors les images doivent être supprimées. Si vous supprimez les images indésirables et ajoutez les éléments souhaités dans le htm directement généré. , vous constaterez que la page deviendra terrible, et la page entière risque d'être un chaos total !
Bon, analysons d'abord le fichier htm exporté :
D'après le tableau de cette page, nous créons un tableau avec trois lignes et une colonne dans la nouvelle page :
Notez qu'il est très important de définir les valeurs de cellpadding, cellpacing et border sur 0 car nous ne voulons pas voir d'espaces et de désalignements dans l'image, puis d'insérer un tableau avec trois lignes et deux colonnes dans la première ligne ; et fusionnez le tableau à trois colonnes A de gauche, comme indiqué dans la figure :
Lorsque vous insérez un tableau, vous devez faire attention à comparer le contenu du fichier htm d'origine et réfléchir à la raison pour laquelle vous faites cela ;
Ensuite, insérez un tableau avec deux lignes et deux colonnes dans la deuxième ligne, fusionnez la grille de gauche comme ci-dessus et insérez un tableau à une ligne et cinq colonnes dans la première ligne de la grille de droite, comme indiqué :
Enfin, insérez un tableau avec trois lignes et deux colonnes dans la ligne inférieure, et fusionnez les éléments 1 et 2 dans l'image :
D'accord, maintenant notre tâche est d'ajouter des images et du contenu au tableau ! Je n'entrerai pas dans les détails ici (en fait, cela a déjà été assez dit !)
Je tiens également à rappeler à tout le monde que lors de l'ajout d'images et de contenu, le tableau ! unit Les deux attributs align et valign sont très importants. Vous ne devez ménager aucun effort pour les utiliser pour vous aider à faire les choses. OK, pratiquez-le vous-même !