Making website homepage with Photoshop (6): Controlling the layout and inserting Spry objects – web page template

Making website homepage with Photoshop (6): Controlling the layout and inserting Spry objects Source: xuexin.com Xue Xin
Now that we have reached the final stage of web design, we need to actually layout the page. CSS and other common techniques are used. The integration of Photoshop and Dreamweaver is also closer in the CS3 version. As a new concept of Dreamweaver CS3, Spry components bring a refreshing visual experience to users. In this part, we cover these aspects of knowledge.

1. Open Photoshop and directly copy a part of the picture, such as selecting the “Shiqiao Tea House” area and copying it. Of course, because it is multi-layered, you need to use the merge copy function, as shown in Figure 1-6-1.

Figure 1-6-1
2. Switch to Dreamweaver, we only need to simply Ctrl V to paste, you will see the image preview dialog box appears, you can directly set the compression value and format of the image here etc., as shown in Figure 1-6-2.

Figure 1- 6-2

3. Use the same method to copy both the “Shiqiao Tea House” and “Shiqiao Chess Square” pictures directly to Dreamweaver. Of course, Dreamweaver will prompt you. Store these image files. After completion, we copy the text to Dreamweaver, but now the text will look messy. This is because it is not styled with CSS, as shown in Figure 1-6-3.

Figure 1- 6-3

4. Open the CSS style panel, create a new CSS rule for the tag “body,td,th”, select “Only for this document”, this CSS is for the current page Global, as shown in Figure 1-6-4.

Figure 1- 6-4

5. In the type, set the font to “Songti”, the size to “9pt”, the line height to “16px”, the color to green, and the modification to “none”, as shown in Figure 1 -6-5 shown.

Figure 1- 6-5

6. Next, set the text wrapping effect of the picture so that the text surrounds the right side of the picture, that is, the text is left aligned. Select the picture of “Shiqiao Tea House” and add a CSS rule to it, as shown in Figure 1-6-6.

Figure 1- 6-6

7. Select the box tab and set the floating to “left-aligned”, that is, the text wraps around the picture, as shown in Figure 1-6-7 . The CSS setting method for other page elements is similar. For example, the introductory text about “Stone Bridge Garden”. Because the thickness of the text is different, two class rules can be set in CSS for styling. I will not go into details here.

Figure 1-6-7
8. Spry components are new user interface objects in Dreamweaver CS3, including XML-driven lists and tables, folding components, tabbed panels and other elements. Select to insert the Spry tabbed panel in the Spry tool group. For each tab, you can directly enter the name of the label and the content of the tab. Here we enter “Chrysanthemum”, as shown in Figure 1-6-8.

Figure 1-6-8

9. Select the Spry tabbed panel in the editing environment. You can add more tab labels in the properties panel below. Here we have added ” “Rose”, “Rose”, “Canna”, “Peony”, etc., as shown in Figure 1-6-9.

Figure 1-6-9

10. There is a small eye next to the tab label name. After clicking, you can edit the content contained in the label. For example, here we have added the content of chrysanthemum and canna, including tables, pictures and text. Put it inside, of course we still need to use CSS to perform basic layout, as shown in Figure 1-6-10

Figure 1-6-10

11. So far our “stone bridge The home page of “Garden” has been designed. Through multiple processes of Dreamweaver and Flash, we can still authentically reflect the original design intention of the original draft. It can be seen that the collaboration and compatibility between Adobe CS3 software is so perfect. About the web page There are many design topics, such as Gif animation, pop-up menus, more CSS controls and link controls. We will explain them in detail when we have the opportunity. Writing this, I seem to have some insights. In fact, I found a place like “Stone Bridge Garden”. It is not difficult to be in this position, but the leisure and peaceful state of mind are difficult. In addition, we cannot forget the hero behind the editing of this article, who is also a full participant in this Adobe CS3 collaborative work manuscript – Adobe InDesign CS3

Search for more posts on related topics:Photoshop Spry Dreamweaver Homepage Web Design

<!–Collectio