thiết kế giao diện wordpress phần 4

Tham khảo tài liệu thiết kế giao diện wordpress phần 4, công nghệ thông tin, đồ họa - thiết kế - flash phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Nội dung trích xuất từ tài liệu:
thiết kế giao diện wordpress phần 4Theme Design and ApproachYou can see our final result once we erase the lines and text that will be set todisplay:none or text-aliged out of the way:Slice and ExportWhen getting ready to slice your images for export, keep in mind that via thebackground properties in CSS you can control the top, bottom, left, or rightplacement, x and y repetition, as well as make the image non-repeating. You can alsoset the background image to fixed, and it will not move with the rest of your page ifit scrolls. [ 54 ] Chapter 2Youll need to look at your design and start thinking in terms of what will beexported as a complete image, and what will be used as a repeating backgroundimage. Youll probably find that your header image is the only thing that will besliced as a whole. Many of your background images should be sliced so that theirsize is optimized for use as a repeated image.If you notice that an image can repeat horizontally to get the same effect, then youllonly need to slice a small vertical area of the image. Same goes for noticing imagesthat can repeat vertically. Youll only need to slice a small horizontal area of the imageand set the CSS repeat rule to repeat-x or repeat-y to load in the image. [ 55 ]Theme Design and Approach If youd like more information on how to slice and work with background images, repeating and non-repeating for use with CSS, check out this article from Adobes site: http://www.adobe.com/devnet/dreamweaver/articles/ css_bgimages.htmlNow that youve placed the slices for each of your theme image elements, exportthem using the smallest compression options available. Once you have eachimage, you can import them using the background-image, background-repeat,background-attachment, and background-position CSS properties.Using CSS shorthand you can handle all of that, including the background-colorproperty via the plain background property, like so: background: #fff url(img.gif) no-repeat fixed 10px 50%;After including our header image, I need to remove the text-header information.Rather than just deleting it from the XHTML page, I set the display for h1, h2, andp to none. That way, people who view the content un-styled will still see appropriateheader information. Ive also added a #date id so that I can have the current monthand year displayed under my magazine text, just like a print magazine.Here are our #header id rules: #header { width: 930px; height: 250px; background: url(“images/oo_mag_header.jpg) no-repeat left top; } #header p, #header h1, #header h2/**/ { display: none; } #header #date{ position:absolute; font-family: Georgia, Times, serif; font-size: 16px; margin-top: 160px; margin-left: 25px; color:#253A59; } [ 56 ] Chapter 2And here are our #top_navlist id rules, that use a single image rollover technique: #top_navlist { position: absolute; top: 260px; width: 897px; text-align:right; } #top_navlist h2{ display: none; } #navlist{ padding: 10px 10px; margin-left: 0; border-bottom: 1px solid #ccc; font-family: Georgia, Times, serif; font-weight: bold; } #navlist li{ list-style: none; margin: 0; display: inline; } #navlist li a{ padding: 11px 30px; margin-left: 3px; border: none; border-left: 1px solid #ccc; background: #8BA8BA url(images/oo_mag_main_nav.jpg) no-repeat top right; text-decoration: none; color: #253A59; } #navlist li a:hover{ background-color: #9E9C76; background-position: right -37px; border-color: #C5BBA0; color: #784B2C; text-decoration: underline; } #navlist li.current_page_item a{ border-bottom: 1px solid white; background-color: #fff; background-position: right -74px; } #navlist li a:visited { color: #253A59; } [ 57 ]Theme Design and Approach Wellstyled.com has an excellent tutorial on how to use a single image technique to handle image background rollovers with CSS (http://wellstyled.com/CSS-nopreload-rollovers.html).To see the full and final CSS mockup style.css and index.html page, please referto the code download section in the Preface.The final theme mockup looks like the following in our Firefox browser: [ 58 ] ...