How To Slice Up Graphics for XHTML and CSS
Creating an XHTML Page
6. For now, you can close Gimp, as we will be putting together an XHTML page and CSS stylesheet. We will also place dummy content to test some basic tags. We will not work with the unordered lists until we convert our static XHTML page into a WordPress theme, as this information is generated by WordPress
7. Open a text editor. Windows Notepad or Macintosh’s TextEdit will work just fine, but I prefer to use a real text editor with options. I recommend HTML Kit
- In HTML-Kit, I opened a New Blank HTML Page. The html generated is posted below. You can Copy and Paste this into a New file. Right now it is not an XHTML page, but we will handle that in WordPress later
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Page title</title> <&/head> <body>
- Save As “index.html” in the folder where the Gimp layout file is stored
- Now we are going to add the same dummy text we had in our layout
- Just under the <body> tag, type: <h1>My Blog</h1>
- By this point, we can open our file in a browser. I’m on Windows, so I’m choosing Firefox 3 and Internet Explorer 7, which I have installed. If your on another OS, it’s a good idea to open two browsers to see the inconsistencies. Internet Explorer on Windows usually needs special treatment, however, we will add the CSS hacks, if any, in this tutorial
- Next, just below the h1 tags, type or Copy and Paste the following:
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce metus magna, lobortis non vehicula vel, fringilla consectetur enim. Nulla pellentesque ligula consequat risus adipiscing condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus iaculis pretium nisl sit amet cursus. Sed est massa, dictum in euismod id, consequat ut diam. Phasellus accumsan, tortor in accumsan convallis, purus libero blandit mi, vel gravida eros mi eget lacus. Aenean ac mi tortor. Nulla facilisi. Suspendisse laoreet orci non velit varius elementum. Curabitur eu blandit mauris.</p>
- Below the paragraph, simply type <h2>Pages</h2>
- Finally, below there, type the footer information: <p>© My Blog</p>
Dividing Each Section
8. Now we are at the point when we divide our layout into Header, Footer, Content and Sidebar with a Wrapper placed around the whole layout. In this part of the tutorial, we will also set the background colors and basic tag colors
- Wrap div tags with id titles around the different sections as shown in the code below:
-
<!-- opens wrapper div --> <div id="wrapper"> <!-- opens header div --> <div id="header"> <h1>My Blog</h1> <p>Just Another WordPress Blog</p> </div> <!-- closes header div --> <!-- opens content div --> <div id="content"> <h2>Post 1</h2> <p>Lorem ipsum... </div> <!-- closes content div --> <!-- opens sidebar div --> <div id="sidebar"> <h2>Pages</h2> </div> <!-- closes sidebar div --> <!-- opens footer div --> <div id="footer"> <p>© 2010 My Blog</p> </div> <!-- closes footer div --> </div> <!-- closes wrapper div -->
- The items that begin with <!– and end with –> are HTML comments; use these liberally within your code, so others who view your code can understand it. Here, the page code is fairly short, but imagine source code with divs embedded in 1000 lines of code
9. In addition to this, we will add two divs within the header div. The first will house our blog title (or logo), and the second will house our second widget ready sidebar
- Create the two divs below with ids “left” and “sidebar-2”:
-
<!-- opens header div --> <div id="header"> <div id="left"> <h1>My Blog</h1> <p>Just Another WordPress Blog</p> </div> <div id="sidebar-2"> </div> </div> <!-- closes header div -->
1 Comment
Trackbacks and Pingbacks
Trackback URL for this post: https://www.jasong-designs.com/2013/05/31/how-to-slice-up-graphics-for-xhtml-and-css/trackback/
-
[…] Creating a Fancy Website Layout in Gimp 2.6, and How To Slice Up Graphics for XHTML and CSS. […]
-
[…] How To Slice Up Graphics for XHTML and CSS […]
-
[…] in a series. It follows three previous tutorials: Creating a Fancy Website Layout in Gimp 2.6, How To Slice Up Graphics for XHTML and CSS and Converting a Static HTML Site into a WordPress Theme- Part 1. In the last tutorial, we left off […]
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
hi I have to create a pilocy document which needs to exist in 2 different countries. So I want to have one common document (the bulk of the document) and insert various sections that can vary by country.Can you point me to a simple way to do this please?