HTML5 Header Horizontal Navigation Menu PART 1 XO PIXEL
In this two part tutorial, I'll be showing you how to make this basic header and horizontal navigation bar using HTML5 and CSS. The first thing were going to do is download a code editor. For this tutorial, we'll be using brackets. to download visit Google and search forbrackets brackets is a great free code editordeveloped by Adobe Its great for beginners because of its live preview function
and many other features So now that you've installed brackets, you'll notice how minimalistic the interface is. This is why it's great to use, especially when your just starting out. Just to briefly acquaint you with the text editor, the left hand side panel is where you'll store all your folders and files for the website. the right hand side panel has two icons the first icon is what enables the live preview function.
The icon below is an extension manager. extensions help improve thefunctionality of the application it's a great way to increaseproductivity and to simply make your job a little easier for this tutorial we'll be keeping it simple so you won't be installing any extensions. Lastly, the middle section is where we'll be writing all of our code. Now that your more familiar with the interface, we can start coding!
First, let's create the folder so we can store all of our files. Right click on the left hand side panel to create a new folder and name it my portfolio. right click on the folder and create you index file. Right click on the folder again to make the main.css file now that we have our files ready we can begin writing the html for the header and navigation
On line 1, always start off you html documents with the doctype declaration. Hit enter to go to line 2. On line 2, we'll write a lt;htmlgt; tag We'll make line 3 a gap. On line 4, we'll make the lt;headgt; tag. This is not the header area. Line 5 sets the character encoding and line 6 allows you to state what version web browser your website should be rendered in. your website should be rendered in.
The lt;tittlegt; tag can be seen on the tabs in your browser or the text that appears when you favouriting a web page. Lastly, line 8 is the tag that links the main.css file to the index file. Alright, thats all for the lt;headgt; tag. Now for the lt;bodygt; tag! Simply write the body tag below the head tag. What you write within the body tag will be seen in your web browser. like a chocolate bar our header and navigation area will be contained within a wrapper.
How to Design WordPress Themes with Vertical Menu in sidebar with Artisteer 3
Let's take a quick look at how to create a vertical expanding menu system in Artisteer for Wordpress theme there are number of different suggestions that you can take a look at as you thumbed through the possibilities for a menu system as we see here on the left once we have an approximate system in mind we can determine where it's going to be located vertical menu systems can be located in either of the sidebars in the left or on the right or you can put into a sidebar system on the top of the content section of Wordpress site or even on the bottom
when you start to look at how to customize the vertical menu system there are a number of presets that might help you to determine just how you want to setup your system these will color code the buttons which will expand when you open the subcategory, or sub pages that is. The vertical menu system can be powered by pages or by categories in WordPress 3. You can determine just what sort of margin you want with this menu of course just like with all Artisteer design you can specify color, fonts,
and the suggestions that we see here are the colors that come with this particular theme's color pallette. If we had a different theme in place, it would show us all the colors inherent in that pallette. We can determine if our text will be left or right justified and how much padding we might have between those menu buttons on the left or if we need a border color around the entire menu system if the button should be round or square,
how much space we might want between them we can apply textures many textures are stocked within the library system of Artisteer or you can upload your own as well many of the many buttons will have different color presets given what we choose such as the active menu button, the hovered over menu button or something that's been clicked on already same thing goes for the many bugs that will appear once we expand a section of this menu system
We can see here where we are editing the sub items and again a number of different color schemes that we can determine here or we can customize these to suit our own needs here's a look at that same menu exported out to Firefox. So we get a general idea of what it would look like in a web site. This isn't the live WP theme. It's just a quick preview giving us a feel for how this will look on the web.