lundi 26 octobre 2009

Modeling Core Rod Extensions using autocad

Author: volume-up | Posted at: 05:53 | Filed Under: |
This illustrated step by step tutorial provides instruction on creating the base part used in a Core Rod Extensions. Follow the steps as shown below:

1) Open Inventor 11 by double clicking the Icon on your desktop, and a dialogue box opens up, similar to the one shown below.


Figure 1.

2) Click "Projects" icon from the list as shown in Figure 2.


Figure 2.

3) Click "New" icon as shown in Figure 3.


Figure 3.

4) When "Inventor Project Wizard" dialog box appears select "New Single User Project" radio button and click next as shown in Figure 4.


Figure 4.

5) Now let us name the project as "Core Rod Extensions" and save the file in a location as per our convenience, as shown in Figure 5.


Figure 5.

6) Now select libraries and click finish button as shown in Figure 6.


Figure 6.

7) Now select "Core Rod Extensions" as default project, as shown Figure 7.


Figure 7.

8) Now click "New" icon and select "Standard.ipt" icon from "Default" tab in "New File - Choose a template to create a new file" dialogue box as shown in Figure 8.


Figure 8.

9) When the project opens select "Project Geometry" from panel bar and select drawing area as shown in Figure 9.


Figure 9.

10) Draw a sketch as shown in figure 10.


Figure 10.

11) Now create chamfer of 0.03X45 deg as shown in Figure 11.


Figure 11.

12) Now add constraint to the sketch with general dimension and then edit the dimensions as shown in Figure 12 and click "Return" button in the toolbar as shown in Figure 13.


Figure 12.


Figure 13.

13) Then select "Isometric view" by pressing F6 button in the keyboard, and the view would change and would appear as shown in Figure 14.


Figure 14.

14) Now select "Revovle" tool by clicking the icon from "Part Features" panel as shown in Figure 15.


Figure 15.

15) Now pick the axis and set the revolve to full and click ok as shown in Figure 16.


Figure 16.

16) The resultant part would be as shown in Figure 17.


Figure 17.

17) Now let us click on bottom side of the core rod extension as we are now going to create a sketch on it as shown in Figure 18.


Figure 18.

18) As shown in Figure 19 add a circle and centerline and set the diameter of the circle to 2.25 inch as shown in.


Figure 19.

19) Now create one more circle on the circumference of the circle with dimensions as shown in Figure 20.


Figure 20.

20) Now select "Extrude" tool from "Part Features" panel as shown in Figure 21.


Figure 21.

21) When "Extrude" dialog box appears enter the parameters as shown in Figure 22.


Figure 22.

22) After creating "Extrude" cut let us create thread in the hole. Let us select "Thread" tool from "Part Features" panel as shown in Figure 23.


Figure 23.

23) When "Thread" tool dialog box appears, under "Specifications" tab select "ANSI Unified Screw Threads" as "Thread Type" and set the parameters for "Size", "Designation" and "Class" as shown in Figure 24 and click ok.


Figure 24.

24) Now let us select "Circular Pattern" tool from "Part Features" panel as shown in Figure 25.


Figure 25.

25) When "Circular Pattern" dialog box appears select X axis as the direction of "Circular Pattern" and select "Extrusion Cut" and "Thread" as the feature which is to be patterned as shown in Figure 26. Now enter the parameters "Placement" as shown in Figure 27. Before clicking ok you see the preview which would be displayed on the model as shown in Figure 28. If you feel everything is fine then click OK.


Figure 26.


Figure 27.


Figure 28.

26) Now let us create threaded hole on other side of the core rod extension. Let us create a working plane on the other side of the rod by selecting "Offset Working Plane" icon as shown in Figure 29.


Figure 29.

27) When "Offset" dialog box appears enter "17" as the value for the distance of offset as shown in Figure 30.


Figure 30.

28) Now let us select "Hole" tool from "Part Features" panel as shown in Figure 31.


Figure 31.

29) When "Hole" dialog box appears enter the parameters as shown in Figure 32 and the preview of the hole would be as shown in Figure 33.


Figure 32.


Figure 33.

30) The resultant "Core Rod Extension" part would be as shown in Figure 34.


Figure 34.

How to create Multi Colored Line using autocad

Author: volume-up | Posted at: 05:52 | Filed Under: |
We all know that it is not possible to create a multi colored line in AutoCAD. I have found a way to create the same. This tutorial shows how it can be done in a detailed way with images. {This tutorials was by Ricky on 14 Nov 2006}

1) After opening AutoCAD click Format menu. As shown in Figure 1.


Figure 1.

2) Click Multiline Style in the Format menu. As shown in Figure 2.


Figure 2.

3) A dailogue box appears as shown in Figure 3. Enter a name in "New Style Name:" tab. I have named it as Ricky.


Figure 3.

4) After clicking continue "New Multiline Style" dailogue box opens as shown in Figure 4. Enter a description in the description tab.


Figure 4.

5) Select a layer from elements section and then make offset as zero for the element and set the color to yellow. Now load different linetype for the element for this case it would be DASHED. As shown in Figure 5.


Figure 5.

6) Repeat the same proceedure for other element as instructed above with few changes like, let us set the color to blue and load the linetype as HIDDEN. AS shown in Figure 6.


Figure 6.

7) Accept and set the multiline as current. Now you can draw a multi colored line by executing MLINE command. The line will be as shown in Figure 7.


Figure 7.

PSD to HTML Tutorial using dreamweaver

Author: volume-up | Posted at: 05:44 | Filed Under: |

Good evening welcome to another tutorial by the hv team, in todays tutorial il be showing you how to slice and dice the dark layout #2 PSD into a working template.

Right lets get started, the first thing you need to do is create a new folder on your desktop called dark layout, inside this folder you need three more folders “images”, “js” and “styles”. Inside the “styles” folder create two blank CSS files “style.css” and “ie.css”, then in the main folder create your blank HTML file “index.html”.

Step1

The “js” folder will remain empty untill we come to our jquery jflow slider towards the end of the tutorial. The next part we need to tackle are our image slices, the first slice your going to need to make is for our background. (all images are .png files on a transparent backgrounds).

Step2

You dont need to slice a big part of the bits that will be repeated, you can use as little as a 1 pixel wide slice. Save the first slice as “bg.png”. The next slice is for our metal looking navigation bar, again the slice doesnt have to be massive as it will be repeated when we code our css.

Step3

Also on our navigation bar we have our little seperators, your also going to need to slice one of these into a seperate image.

Step4

Hide all your header elements in your layers pallette than make a selection around the whole of your header pattern, save the file as header_bg.png.

Step5

We also have a pattern background in our featured area, hide all your featured elements and make a selection around your featured background, ideally the selection needs to end when the pattern disapears eles you will get unexpected lines in the background.

Step6

If i wanted the content boxes to be rounded across all browser types id slice up our content boxes, but this time im not going to bother, instead il be rounding them off using CSS, the only trouble is some browsers do no support the border-radius style yet. So people using firefox, mozilla and safari will benifit from the rounded corners but everybody eles who isnt using them browser types will get square boxes.

The next slices we need to make are for our footer, we need to make two slices, the actual footer and the repeated background. We’ll start with the background that needs to be repeated.

Step7

Then our actual footer box.

Step8

Thats all the background slices taken care off we now need to start slicing some of the additional elements like our search submit button, our icons and our featured arrows. We’ll start with our search submit button.

Step9

Our RSS button.

Step10

We also need to slice both left and right arrow buttons on our featured slider.

Step11

Our actual featured image for our featured slider. It might be a good idea to note the size of your background selection you made on the featured background mine was about 300px in height so really your featured images shouldnt exceed 300px in height.

Step12

Now for our individual icons, try and keep the selection as tight as you can get it, also to make life easier make sure there icons are all the same width which means you may need to resize some by a traction or two. All mine are 39px wide.

Step13

Also in ouor sidebar content box inbetween our list items we have a divider seperating each item, you will also need to slice that, dont slice it all you just need a fraction of it as it will be repeated horizontally via css when we code it.

Step14

You should now have 17 images in your image folder, here’s a screenshot of my images folder.

Step15

We can now start coding our layout, open up your html file and both css files into your code editor il be using dreamweaver. In the head of your html file link your stylesheet style.css, for the ie.css file we need to use some special code which looks like this.

01.
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>HV-Designs.co.uk - Dark Layout #2 PSD Sitebuildtitle>
06.<link href="styles/style.css" rel="stylesheet" type="text/css" />
07.
08.
11.
12.head>
13.
14.<body>
15.body>
16.html>

We can now begin to start mocking up our layout we’ll start with our header, logo, search and navigation.

Step16

The code looks like this.

01.<div id="container">
02.
03.<div id="header">
04.
05.<div id="logo">
06.div>
07.
08.<div id="search">
09.div>
10.
11.div>
12.
13.<div id="navigation">
14.div>
15.
16.div>

Our css looks like this, please refer to the commented code next to each style.

01./* ----------MAIN BODY STYLES---------- */
02.
03.* {
04. margin: 0px; /*SETS 0 MARGIN*/
05. padding: 0px; /*SETS 0 PADDING*/
06.}
07.
08.body {
09. color: #bababa; /*MAIN WEBSITE TEXT COLOR*/
10. font-family: Verdana, Arial, Helvetica, sans-serif; /*SIZE OF TEXT 0.69EM = 11PX*/
11. background-image: url(../images/bg.png); /*OUR BACKGROUND IMAGE*/
12. background-repeat: repeat-x; /*REPEATS BACKGROUND HORIZONTALLY*/
13. background-color: #000000; /*SETS THE COLOR OF OUR BACKGROUND WHEN THE BACKGROUND IMAGE COMES TO AN END*/
14.}
15.
16./* ----------CONTAINER STYLES---------- */
17.
18.#container {
19. width: 950px; /*MAXIMUM WIDTH OF OUR LAYOUT*/
20. margin-top: 13px; /*ADDS A TOP MARGIN TO THE TOP OF OUR CONTAINER*/
21. margin-right: auto; /*AUTO MARGIN*/
22. margin-left: auto; /*AUTO MARGIN*/
23.}
24.
25./* ----------HEADER STYLES---------- */
26.
27.#header {
28. float: left; /*FLOATS HEADER LEFT*/
29. height: 155px; /*ADDS A FIXED HEIGHT*/
30. width: 950px; /*ADDS A FIXED WIDTH, SHOULD BE SAME AS CONTAINER*/
31. background-image: url(../images/header_bg.png); /*OUR HEADER BACKGROUND IMAGE*/
32. background-repeat: no-repeat; /*STOPS HEADER BACKGROUND REPEATING */
33.}
34.
35.#logo {
36. float: left; /*FLOATS LOGO LEFT*/
37. margin-top: 45px; /*ADDS TOP MARGIN*/
38.}
39.
40./* ----------HEADER SEARCH STYLES---------- */
41.
42.#search {
43. float: right; /*FLOATS SEARCH RIGHT*/
44. margin-top: 55px; /*ADDS TOP MARGIN*/
45.}
46.
47./* ----------NAVIGATION STYLES---------- */
48.
49.#navigation {
50. float: left; /*FLOATS NAV LEFT*/
51. height: 45px; /*ADDS FIXED HEIGHT*/
52. width: 950px; /*ADDS FIXED WIDTH SAME AS OUR CONTAINER*/
53. background-image: url(../images/nav_bg.png); /*OUR NAV BACKGROUND IMAGE*/
54. background-repeat: repeat-x; /*REPEATS NAVIGATION BACKGROUND HORIZONTALLY*/
55.}

When tested in your browser you should have something like this.

Step17

Now lets begin to add some of the elements to our header. We’ll start with our website title and slogan. Inside your logo div add a simple h1 tag with your website title, because on our PSD file one of the words are in bold we need to add a span tag with a class of bold to the word we want in bold. Underneath our h1 tag add a simple p tag with a class of slogan then your slogan inbetween. The code looks like this.

1.<div id="logo">
2.<h1>your<span class="bold">websitespan>h1>
3.<p class="slogan">fancy slogan herep>
4.div>

We can now style these tags using our css. Add these styles to your stylesheet.

01.h1 {
02. font-size: 36px; /*H1 FONT SIZE*/
03. color: #FFFFFF; /*H1 FONT COLOR*/
04. font-weight: normal; /*SETS FONT WEIGHT TO NORMAL*/
05. letter-spacing: -3px; /*DECREASES LETTER SPACING (the space between each letter)*/
06.}
07.
08..slogan {
09. text-align: right; /*ALIGNS SLOGAN TEXT RIGHT*/
10. text-transform: capitalize; /*CAPITALIZES THE FIRST LETTER ON EACH WORD*/
11.}
12.
13..bold {
14. font-weight: bold; /*ADDS BOLD FONT WEIGHT*/
15.}

You should now have a your website title and slogan nicely presented on your template.

Step18

Lets start building our search form, please note the search has to actually be connected up for it work, im just demonstrating the styling side. Inside your search div add a simple form with just a text field and submit button. On your submit button you’ll need to change the input type to “image” then add an addition attribute called “src” with the url to the button. Once you’ve done that add a class of search-field to the search field and a class of “search-btn” to the submit button, the code looks like this.

1.<div id="search">
2.<form action="" method="get">
3.<input type="text" class="search-field" value="Search..." size="35" /><input type="image" class="search-btn" value="Go" src="images/search_btn.png" />
4.form>
5.div>

The css for our search field and button are.

01..search-field {
02. font-style: italic; /*SETS FONT TO ITALIC*/
03. color: #FFFFFF; /*SEARCH TEXT COLOR*/
04. border: 1px solid #2a2a2a; /*ADDS 1 PX BORDER IN COLOR SPECIFIED*/
05. background-color: #000000; /*CHANGES BACKGROUND COLOR IN SEARCH FIELD*/
06. padding: 7px; /*ADDS PADDING*/
07. margin-right: 10px; /*ADDS RIGHT MARGIN*/
08.}
09.
10..search-btn {
11. vertical-align: top; /*CHANGES VERTICAL ALIGNMENT ON SEARCH BUTTON*/
12.}

You should now have something like this.

Step19

Now for our navigation bar, we’ll start with a simple list creating each item in the list a block element. Each list item will also have our little seperator image after each link.

01.<div id="navigation">
02.<ul class="nav-links">
03.<li><a href="#">homea>li>
04.<li><a href="#">bloga>li>
05.<li><a href="#">worka>li>
06.<li><a href="#">foruma>li>
07.<li><a href="#">servicesa>li>
08.<li><a href="#">contacta>li>
09.ul>
10.div>

Here’s the css for our navigation.

01..nav-links li {
02. list-style-type: none; /*REMOVES BULLET POINTS FROM THE LIST*/
03. float: left; /*FLOATS LEFT*/
04. text-align: center; /*ALIGNS TEXT CENTER*/
05. letter-spacing: -1px; /*DECRESES LETTER SPACING*/
06. background-image: url(../images/seperator.png); /*SEPERATOR IMAGE*/
07. background-repeat: no-repeat; /*STOPS SEPERATOR REPEATING*/
08. background-position: right; /*ALIGNS THE SEPERATOR RIGHT OF EACH NAVIGATION LINK*/
09.}
10.
11..nav-links li a {
12. text-decoration: none; /*REMOVES UNDERSCORE FROM LINK ITEMS*/
13. color: #000000; /*COLOR OF OUR NAVIGATION LINKS*/
14. text-transform: uppercase; /*TRANSFORMS NAVIGATION LINKS TO ALL CAPITAL LETTERS*/
15. font-size: 12px; /*ADDS FONT SIZE*/
16. display: block; /*DISPLAYS THE NAV LINKS AS A BLOCK ELEMENT*/
17. height: 29px; /*ADDS A FIXED HEIGHT TO NAV LINKS*/
18. width: 100px; /*ADDS A FIXED WIDTH TO NAV LINKS*/
19. padding-top: 15px; /*ADDS TOP PADDING TO EACH LINK*/
20.}
21.
22..nav-links li a:hover {
23. color: #666666; /*COLOR OF LINK WHEN HOVERED*/
24.}

Also on our navigation in our PSD file we had a little rss icon on the right of the navigation, we can create that the same we did our navigation above.

1.<ul class="rss">
2.<li><a href="#"><img src="images/rss_icon.png" alt="Subscribe Via RSS" />a>li>
3.ul>
4.div>

The css for our rss icon is similar too.

01..rss li {
02. list-style-type: none; /*REMOVES BULLET POINTS FROM THE LIST*/
03. float: right; /*FLOATS RSS LINKS RIGHT*/
04. margin-right: 10px; /*ADDS RIGHT MARGIN*/
05. margin-top: 5px; /*ADDS TOP MARGIN*/
06.}
07.
08..rss li img {
09. border: none; /*REMOVES BORDER FROM IMAGE*/
10.}

You should now have something like this.

Step20

Thats the header part of our website done, lets move onto our featured area. We’ll mock the featured area up like this.

Step21

The code looks like this.

01.<div id="featured-area">
02.
03.<div class="featured-control-left">
04.div>
05.
06.<div class="featured-content">
07.
08.<div class="featured-text">
09.div>
10.
11.div>
12.
13.<div class="featured-control-right">
14.div>
15.
16.div>

The css for the code above looks like this.

01.#featured-area {
02. background-repeat: no-repeat; /*STOPS BACKGROUND REPEATING*/
03. background-image: url(../images/content_bg.png); /*ADDS OUR CONTENT BACKGROUND IMAGE*/
04. float: left; /*ADDS A FIXED HEIGHT*/
05. width: 950px; /*ADDS A FIXED WIDTH*/
06. margin-bottom: 20px; /*ADDS BOTTOM MARGIN*/
07.}
08.
09..featured-control-left {
10. float: left; /*FLOATS LEFT*/
11. height: 170px; /*ADDS A FIXED HEIGHT*/
12. width: 33px; /*ADDS A FIXED WIDTH*/
13. padding-top: 130px; /*ADDS TOP PADDING*/
14.}
15.
16..featured-text {
17. float: right; /*FLOATS RIGHT*/
18. width: 425px; /*ADDS A FIXED WIDTH*/
19. height: 260px; /*ADDS A FIXED HEIGHT*/
20. padding-top: 40px; /*ADDS TOP PADDING*/
21. padding-right: 20px; /*ADDS RIGHT PADDING*/
22.}
23.
24..featured-content {
25. float: left; /*FLOATS LEFT*/
26. height: 300px; /*ADDS A FIXED HEIGHT*/
27. width: 884px; /*ADDS A FIXED WIDTH*/
28.}
29.
30..featured-control-right {
31. float: right; /*FLOATS RIGHT*/
32. height: 170px; /*ADDS A FIXED HEIGHT*/
33. width: 33px; /*ADDS A FIXED WIDTH*/
34. padding-top: 130px; /*ADDS PADDING TOP*/
35.}

You should now have some solid foundations for your featured area, lets insert some of our graphic elements. Inside the div’s featured-control-right and featured-control-left insert your arrow icons.

01.<div id="featured-area">
02.
03.<div class="featured-control-left">
04.<img src="images/left_arrow.png" alt="Slide Left" />
05.div>
06.
07.<div class="featured-content">
08.
09.<div class="featured-text">
10.div>
11.
12.div>
13.
14.<div class="featured-control-right">
15.<img src="images/right_arrow.png" alt="Slide Right" />
16.div>
17.
18.div>

Underneath the class “featured-content” insert your featured image. Insde the class “featured-text” add a h2 tag with a header then add a paragraph wrapped in a p tag.

01.<div id="featured-area">
02.
03.<div class="featured-control-left">
04.<img src="images/left_arrow.png" alt="Slide Left" />
05.div>
06.
07.<div class="featured-content">
08.
09.<img src="images/featured_image01.png" alt="Featured Image 01" />
10.
11.<div class="featured-text">
12.
13.<h2>lorem ipsum dolorh2>
14.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim.p>
15.div>
16.
17.div>
18.
19.<div class="featured-control-right">
20.<img src="images/right_arrow.png" alt="Slide Right" />
21.div>
22.
23.div>

You now need to add some addtional styles in your style sheet, because we’ve added an image into the featured area we need to make sure that no browser adds a border to it, we also need to style our h2 tag.

01.h2 {
02. color: #FFFFFF; /*H2 FONT COLOR*/
03. text-transform: uppercase; /*TRANSFORMS TEXT TO UPPERCASE*/
04. font-size: 18px; /*H2 FONT SIZE*/
05.}
06.
07..featured-content img {
08. margin-left: 20px; /*ADDS A LEFT MARGIN*/
09. margin-right: 20px; /*ADDS A RIGHT MARGIN*/
10. float: left; /*FLOATS LEFT*/
11.}

Your featured area should now look something like this.

Step22

We’ll add our jquery slider towards the end of the tutorial. The wireframe for our content boxes is really easy, we just create two classes “left-content” and “right-content”.

1.<div class="left-content">
2.div>
3.
4.<div class="right-content">
5.div>

The styles for these classes are as follows.

01./* ----------LEFT CONTENT STYLES---------- */
02.
03..left-content {
04. float: left; /*FLOATS LEFT CONTENT BOX LEFT*/
05. width: 560px; /*ADDS A FIXED WIDTH*/
06. -moz-border-radius: 15px; /*ADDS A BORDER RADIUS (applys to Mozilla/Firefox and Safari 3 users ONLY)*/
07. -webkit-border-radius: 15px; /*ADDS A BORDER RADIUS (applys to Mozilla/Firefox and Safari 3 users ONLY)*/
08. background-color: #0a0a0a; /*LEFT CONTENT BACKGROUND COLOR*/
09. border: 1px solid #181818; /*LEFT CONTENT 1 PX BORDER AND BORDER COLOR*/
10. padding: 20px; /*ADDS PADDING ALL THE WAY AROUND*/
11.}
12.
13./* ----------RIGHT CONTENT STYLES---------- */
14.
15..right-content {
16. float: right; /*FLOATS RIGHT CONTENT BOX RIGHT*/
17. width: 290px; /*ADDS FIXED WIDTH*/
18. -moz-border-radius: 15px; /*ADDS A BORDER RADIUS (applys to Mozilla/Firefox and Safari 3 users ONLY)*/
19. -webkit-border-radius: 15px; /*ADDS A BORDER RADIUS (applys to Mozilla/Firefox and Safari 3 users ONLY)*/
20. background-color: #0a0a0a; /*RIGHT CONTENT BACKGROUND COLOR*/
21. border: 1px solid #181818; /*RIGHT CONTENT 1 PX BORDER AND BORDER COLOR*/
22. padding: 20px; /*ADDS PADDING ALL THE WAY AROUND*/
23.}

Included in the styles above are the css styles for border-radius which makes the corners on your content boxes round, as stated in the comments it only applys to Mozilla/Firefox and Safari 3 users ONLY every other browser will see square corners. Inside our left-content box were just going to add some simple paragraphs with a h2 tag.

1.<div class="left-content">
2.
3.<h2>lorem ipsum dolorh2>
4.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim.p>
5.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim.p>
6.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim.p>
7.
8.div>

Our h2 tag is already styled in the style sheet but our p tags aren’t so add these simple styles in your style sheet.

1.p {
2. font-size: 12px; /*TEXT FONT SIZE*/
3. line-height: 22px; /*TEXT LINE HEIGHT*/
4. text-align: justify; /*JUSTIFYS OUR PARAGRAPHS*/
5. margin: 5px 0 10px; /*ADDS TOP MARGIN OF 5PX AND BOTTOM MARGIN OF 10PX NO MARGIN LEFT OR RIGHT*/
6. padding: 0; /*ADDS NO PADDING*/
7.}

Our right content box looks tricky to really it isnt, for our right-content box we just create a simple list, each list item will have its very own class, the code looks like this.

01.<div class="right-content">
02.
03.<ul class="right-content-list">
04.
05.<li class="lock">
06.<h3>lorem ipsum dolorh3>
07.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante.p>
08.li>
09.
10.<li class="cog">
11.<h3>lorem ipsum dolorh3>
12.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante.p>
13.li>
14.
15.<li class="coins">
16.<h3>lorem ipsum dolorh3>
17.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante.p>
18.li>
19.
20.<li class="mail">
21.<h3>lorem ipsum dolorh3>
22.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante.p>
23.li>
24.
25.ul>
26.
27.div>

We then style out list as normal but with a few extra styles for our list classes.

01..right-content-list li {
02. list-style-type: none; /*REMOVES BULLET POINTS FROM THE LIST*/
03.}
04.
05..right-content-list li p {
06. font-size: 11px; /*LIST P TAG FONT SIZE*/
07. line-height: 18px; /*LIST P TAG FONT LINE HEIGHT*/
08. background-image: url(../images/divider.png); /*OUR DIVIDER IMAGE UNDERNEATH EACH LIST*/
09. background-repeat: repeat-x; /*REPEATS DIVIDER IMAGE HORIZONTALLY*/
10. background-position: bottom; /*PLACES THE DIVIDER AT THE BOTTOM OF THE P TAG*/
11. padding-bottom: 15px; /*ADDS PADDING TO THE BOTTOM OF THE P TAG IN THE LIST*/
12.}
13.
14.li.lock {
15. background-image: url(../images/lock_icon.png); /*OUR LOCK ICON*/
16. background-repeat: no-repeat; /*STOPS ICON REPEATING*/
17. background-position: left top; /*KEEPS THE ICON IN THE TOP LEFT CORNER*/
18. padding-left: 50px; /*ADDS LEFT PADDING*/
19.}
20.
21.li.cog {
22. background-image: url(../images/cog_icon.png); /*OUR COG ICON*/
23. background-repeat: no-repeat; /*STOPS ICON REPEATING*/
24. background-position: left top; /*KEEPS THE ICON IN THE TOP LEFT CORNER*/
25. padding-left: 50px; /*ADDS LEFT PADDING*/
26.}
27.
28.li.coins {
29. background-image: url(../images/coins_icon.png); /*OUR COINS ICON*/
30. background-repeat: no-repeat; /*STOPS ICON REPEATING*/
31. background-position: left top; /*KEEPS THE ICON IN THE TOP LEFT CORNER*/
32. padding-left: 50px; /*ADDS LEFT PADDING*/
33.}
34.
35.li.mail {
36. background-image: url(../images/mail_icon.png); /*OUR MAIL ICON*/
37. background-repeat: no-repeat; /*STOPS ICON REPEATING*/
38. background-position: left top; /*KEEPS THE ICON IN THE TOP LEFT CORNER*/
39. padding-left: 50px; /*ADDS LEFT PADDING*/
40.}

Test your template in your browser and you should have something like this.

Step23

Now for our footer, we want our footer to span across the browser just like our background/navigation does, to do this we need create our footer outside the container div.

01.div>
02.
03.<div id="footer">
04.
05.<div id="footer-content">
06.<P>copyright © yoursite.com | all rights reserved | design & coded by <a href="http://www.richard-carpenter.co.uk">richard carpentera>P>
07.div>
08.
09.div>
10.
11.body>
12.html>

The footer div is the background that will repeat across the browser, the footer-content div will be where our footer content goes. The css looks like this.

01./* ----------FOOTER STYLES---------- */
02.
03.#footer {
04. background-image: url(../images/footer_bg.png); /*ADDS OUR BACKGROUND IMAGE*/
05. background-repeat: repeat-x; /*REPEATS BACKGROUND HORIZONTALLY*/
06. clear: both; /*CLEARS BOTH FLOATS*/
07. height: 82px; /*ADDS A FIXED HEIGHT*/
08. background-position: bottom; /*PLACES BACKGROUND AT THE BOTTOM OF THE DIV*/
09.}
10.
11.#footer-content {
12. background-image: url(../images/footer_bg2.png); /*ADDS OUR BACKGROUND IMAGE*/
13. background-repeat: repeat-x; /*REPEATS BACKGROUND HORIZONTALLY*/
14. height: 82px; /*ADDS A FIXED HEIGHT*/
15. width: 950px; /*ADDS A FIXED WIDTTH*/
16. margin: auto; /*AUTO MARGIN CENTERS OUR FOOTER*/
17. background-position: bottom; /*PLACES BACKGROUND AT THE BOTTOM OF THE DIV*/
18.}
19.
20.#footer-content p {
21. text-transform: capitalize; /*TRANSFORMS THE FIRST LETTER IN EVERY WORD TO A CAPITAL LETTER*/
22. color: #000000; /*COLOR OF FOOTER TEXT*/
23. padding-top: 50px; /*ADDS TOP PADDING*/
24. padding-left: 20px; /*ADDS LEFT PADDING*/
25.}

Your template should now be complete, there’s just some styles id recommend adding to get you started. We need to style our hyper links, h3 and h4 tags just incase you use them.

01.a:link {
02. color: #333333; /*COLOR OF A LINK*/
03. text-decoration: none; /*REMOVES UNDERSCORE*/
04.}
05.a:visited {
06. text-decoration: none; /*REMOVES UNDERSCORE*/
07. color: #333333; /*COLOR OF A VISITED LINK*/
08.}
09.a:hover {
10. text-decoration: underline; /*ADDS UNDERSCORE*/
11. color: #666666; /*COLOR OF A HOVERED LINK*/
12.}
13.a:active {
14. text-decoration: none; /*REMOVES UNDERSCORE*/
15. color: #333333; /*COLOR OF A ACTIVE LINK*/
16.}
17.
18.h3 {
19. color: #FFFFFF; /*H3 FONT COLOR*/
20. text-transform: uppercase; /*TRANSFORMS TEXT TO UPPERCASE*/
21. font-size: 14px; /*H3 FONT SIZE*/
22. font-weight: normal; /*REMOVES BOLD*/
23.}
24.
25.h4 {
26. color: #FFFFFF; /*H4 FONT COLOR*/
27. text-transform: uppercase; /*TRANSFORMS TEXT TO UPPERCASE*/
28. font-size: 11px; /*H4 FONT SIZE*/
29.}

There are also some styles you need to add to the “ie.css” file, the styles listed below are just minor fixes for items that dont quite lineup.

01./* INTERNET EXPLORER HACKS */
02.
03./* ----------HEADER SEARCH STYLES---------- */
04.
05..search-btn {
06. margin-top: 1px; /*ADDS A TOP MARGIN TO SEARCH BUTTON*/
07.}
08.
09./* ----------FOOTER STYLES---------- */
10.
11.#footer-content p {
12. padding-top: 45px; /*ADDS TOP PADDING*/
13.}

Were now going to intergrate the jflow plugin for jquery on our featured area. The featured once done should slide across to any other items you wish to add in there. The first we need to do is download jflow and the jquery libary file, please note im using the jquery libary 1.2.6 NOT the new one as i had trouble with the latest libary. Link the files in the head of your document.

01.<head>
02.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
03.<title>HV-Designs.co.uk - Dark Layout #2 PSD Sitebuildtitle>
04.<link href="styles/style.css" rel="stylesheet" type="text/css" />
05.
08.
09.<script src="js/jquery-1.2.6.pack.js" type="text/javascript">script>
10.<script src="js/jquery.flow.1.1.min.js" type="text/javascript">script>
11.
12.head>

Also inside the head section add this bit of javascript.

01.

The width and height should be set to the dimensions of the featured area, you will also notice the div “slides” you will need to ad this div into your featured area. Above the featured-area div add the jflow controller code.

1.<div id="controller" class="hidden">
2.<span class="jFlowControl">No 1span>
3.<span class="jFlowControl">No 2span>
4.<span class="jFlowControl">No 3span>
5.div>

In your style sheet we need to an additional style which will hide our 2nd and third slides.

1..hidden {
2. display: none; /*hides our 2nd and 3rd featured images*/
3.}

Underneath our featured-area div add a div id of slides then add an empty div.

1.<div id="featured-area">
2.
3.<div id="slides">
4.
5.<div>

Dont forget to close the div at the bottom. Now everything inbetwwen the blank div and the end of the blank div will slide, for the slide to actually work though you need 3 slides in total. Make sure the 2nd and third slides all start and end with a blank div. I find it best just copy everything from the blank div to the closing blank div then edit the content accordingly.

For the buttons to work on the featured area you need to add the jflow classes to the buttons.

1.<div class="featured-control-left">
2.<img src="images/left_arrow.png" class="jFlowPrev" alt="Slide Left" />
3.div>
4.
5.<div class="featured-control-right">
6.<img src="images/right_arrow.png" class="jFlowNext" alt="Slide Right" />
7.div>

You can see a live work demo by clicking the button below.

Inscription à : Articles (Atom)
 

About

Site Info

Text

best tutorial for all Copyright © 2009 Community is Designed by Bie