thiết kế giao diện wordpress phần 2 doc

Chapter 1 [ 15 ] Your best bet will be to design for Firefox rst, and then if you notice things don't look so great in IE6 or IE7, there are plenty of standardized xes and work arounds for those two browsers because their 'wonks' are just that—'wonks' and well-documented. If you design only looking at one version of IE rst, getting your design to look the way you want, then nd it a mess in Firefox, Opera, or Safari; you're going to have a much harder time xing the CSS you made for IE in a more standards compliant browser. Firefox doesn't have to become your only browser. You can keep using IE or any other browser you prefer. I myself prefer Opera for light and speedy web-surng, but Firefox is one of my key web development tools. Summary To get going on your WordPress theme design, you'll want to understand how the WordPress blog system works, and have your head wrapped around the basics of the WordPress project you're ready to embark on. If you'll be working with a more technical WordPress administrator and/or PHP developer, make sure your development installation or sandbox will have the same WordPress plug-ins that the nal site needs to have. You'll want to have all the tools that are recommended installed and ready to use as well as brush up on those web skills, especially XHTML and CSS. Get ready to embark on designing a great theme for one of the most popular, open-source, blog systems available for the web today! [...]... design comp by starting with the XHTML structure Open up your HTML or text editor and create a new, fresh index.html page [ 26 ] Chapter 2 The DOCTYPE XHTML has two common DOCTYPEs: Strict and Transitional There's also the newer 1.1 DOCTYPE for 'modularized' XHTML The Strict and 1.1 DOCTYPE is for the truly semantic It's requirements suggest you have absolutely no presentational markup in your XHTML (though... For our OpenSource Magazine theme, I'll go ahead and use the 1.0 Transitional DOCTYPE: You should note, while being integral to a valid template, the DOCTYPE declaration itself is not a part of the XHTML document or an XHTML element It does not use a closing tag, even though it does...Chapter 2 Therefore, the graphical element scheme of my site, which will make up the majority of the design experience, will focus on 'paper edges', curling up at the corners, like a well-read, glossy, thin magazine paper tends to do My layout is going to take advantage of the main WordPress blog, using the pre-snips of the story as the intro text to peak interest I'll use WordPress' s categorizing... recommendation for how to remain 'Strict') You can use what you like, especially if it's your WordPress site However, if the WordPress site will not remain completely under your control, you can't control everything that other authors will add to the posts and pages It's safest to use the Transitional 1.0 DOCTYPE which will keep your theme valid and have more flexibility for different kinds of users... (sometimes called a 'wire frame') This may help other developers on your team more clearly understand your WordPress theme idea [ 25 ] Theme Design and Approach Start with the Structure The preceding usability scenarios deal with someone who will be looking at your content through your fully CSS stylized WordPress theme What if someone views this content in a mobile browser? A text-only browser? Or a text-to-speech... editors automatically place a DOCTYPE and the required html, header, title, and body tags into your document when you open up your blank file That's great, but please go into your editor's preferences and make sure your Markup and DTD preferences are set to XHTML and Transitional (or Strict, if you prefer) Some editors that offer a 'design' or WYSIWYG view will overwrite the DOCTYPE to whatever the preferences... this problem, but you should set your DOCTYPE preferences there too, just to be safe The Main Body After our DOCTYPE, we can add in the other essential requirements of an XHTML file, which are as follows: My New Theme Title body parts go here [ 27 ] Theme Design and Approach Attach... @import url(“style.css"); 2 Create a style.css file and include this basic shell: /* Enter WP Design & Creation Comments Here */ /*////////// GENERAL //////////*/ body {} #container {} #container2 {} #container3 {} /*////////// TYPEOGRAPHY //////////*/ h1 {} h2 {} h3 {} h4 {} p {} a {} a:hover {} a:visited {} /*////////// HEADERS //////////*/... a:hover {} a:visited {} /*////////// HEADERS //////////*/ #header { /*background: #666666;url(“images/css_cs_header.jpg") no-repeat left top;*/ } #header p, #header h1, #header h2/**/ { /*display: none;*/ [ 28 ] Chapter 2 } /*////////// CONTENT //////////*/ #content {} /*////////// SIDEBARS //////////*/ #sidebarLT {} #sidebarRT {} /*////////// NAV //////////*/ #top_navlist {} /*////////// BLOG... Header: background image and text elements for header will go inside this div [ 29 ] . page. Chapter 2 [ 27 ] The DOCTYPE XHTML has two common DOCTYPEs: Strict and Transitional. There's also the newer 1.1 DOCTYPE for 'modularized' XHTML. The Strict and 1.1 DOCTYPE is. ideas or changes accordingly. Theme Design and Approach [ 22 ] 2. Start with the Structure: I create an ideal, un-styled semantic XHTML document structure and attach a bare bones CSS sheet to. to add extra functions and features to your WordPress site. Widgets are now built into WordPress2 and are basically things you can put into your WordPress site's sidebar, regardless of