You separated content (the HTML div tags) from presentation (the CSS that controls the layout) by creating new CSS rules, placing them in an external style sheet, and then applying them to the div tags on your page.
In Part 2, Creating the page layout, you learned how to insert div tags and then position those tags on the page to create the layout. Paste the text.Your three columns are now filled with text (see Figure 12).On the index.html page, click inside the right_column div below the helmet image, placing the Insertion point in the same place where you created space earlier.(You won’t need the remaining text until later.) Close the text.txt file by clicking the X in the upper-right corner of its tab.In the text.txt Document window, select the third block of text (beginning with “Today’s Self Improvement” up to and including “read more…”).And one last time, return to the text.txt file by clicking its tab.Click inside the center_column div below the data image, placing the Insertion point in the same place where you created space earlier.Leaving the text.txt file open, click the tab of index.html.In the text.txt Document window, select the second block of text (beginning with “Facts and Figures” up to and including “read more…”).Return to the text.txt file by clicking its tab.You’ll format it with CSS so that it looks more like the text in our design comp. It’s easy to mistakenly drop the image in the lower half of the div when dragging.ĭon’t worry about the look of the text. Important: Make sure you drag the data_addict.jpg to the Insertion point at the top of the center_column div. In the Files panel (Window > Files), locate the data_addict.jpg file (it’s inside the images folder) and drag it to the insertion point in the center_column div (see Figure 6).
Press the up arrow on your keyboard to move the Insertion point back up to the top of the div.Press Enter (Windows) or Return (Mac OS X) once to create more space in the div.
Make sure the Insertion point remains inside the div.
0 kommentar(er)
