• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Let's build a website with Dreamweaver - III
 

Let's build a website with Dreamweaver - III

on

  • 961 views

Dreamweaver CS5 is used here to construct a fully working website over 5 sessions of a walk-through tutorial

Dreamweaver CS5 is used here to construct a fully working website over 5 sessions of a walk-through tutorial

Statistics

Views

Total Views
961
Views on SlideShare
961
Embed Views
0

Actions

Likes
0
Downloads
30
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />

Let's build a website with Dreamweaver - III Let's build a website with Dreamweaver - III Presentation Transcript

  • images in dreamweaver M E T A L S C H O O L
  • css styling: image put the cursor in the para under ‘the debut album’ just in front of the words M E T A L ‘in 2007...’ S C H O O L
  • css styling: image from the insert menu, click on image. navigate to the metalschool folder and M E T A L choose the 1atsoundclick.png file S C H O O L
  • css styling: image give it the alt tage of ‘chart’ M E T A L S C H O O L
  • css styling: image the image comes in where the cursor was. click on the image to select it (if it isn’t already). in the properties box, choose the M E T A L align option to ‘left’ S C H O O L
  • css styling: image img is the html tag for images. create a new css rule (using the compound tag) for #mainContent img - make margin-right: 15px M E T A L to push the surrounding text from the image away from it S C H O O L
  • css styling: image let’s put in one more graphic by changing the h1 headline on top of the page. because it is looking clunky. select the headline and delete it. choose image from the insert menu and select the file M E T A L ‘alternativerockersgraphic.png’ from the metalschool folder S C H O O L
  • css styling: image the grungy headline graphic is in and fits the page better. check the main content region - text and graphics - in safari view. M E T A L S C H O O L
  • css styling: header filling in the header image M E T A L S C H O O L
  • css styling: header select the place-holder text in the header region and delete it. make sure in code view that the cursor is between the <div id=”header”> and </div> tags. open the css rule for the #header region M E T A L S C H O O L
  • css styling: header increase height to 180px. delete the color choice in the background category. choose the background-image from the metalschool folder: header1.png. click ok M E T A L S C H O O L
  • css styling: header the header graphic is now in place M E T A L S C H O O L
  • styling the sidebar M E T A L S C H O O L
  • css styling: sidebar in the split view select the place-holder text in the sidebar and delete it. make sure the cursor now flashes between the <div id=”sidebar”> and </div> tags M E T A L S C H O O L
  • css styling: sidebar copy the text from sidebar.txt and paste in sidebar. unformatted text crams up as shown above. everything is within a single pair of <p> and </p> tags instead of multiple paras and we have to now structure the text with html tags M E T A L S C H O O L
  • css styling: sidebar make the text into multiple paragraphs by using the enter/return key as shown above. ensure there are no trailing spaces at the end of each para M E T A L S C H O O L
  • css styling: sidebar mark all html tags. h1 is for the ‘discography...’ line. h2 is for ‘the debut album’ half-way down the page. h3 is for album names ‘hover’ and ‘eleven complaints’. h4 is for ‘track list’ which occurs two times. mark them both. select the songs M E T A L under each track list and mark them as an ordered list (ol) in the properties box S C H O O L
  • css styling: sidebar general tweak 1: let’s change the arbitrary, bright green background of the sidebar. select the #sidebar from the css panel and double-click. M E T A L S C H O O L
  • css styling: sidebar select the background-color and delete the value. choose a background image by clicking on the browse button and navigate to the sidebar-gradient-bg.jpg in the metalschool folder. click ok M E T A L S C H O O L
  • css styling: sidebar the gradient background for the sidebar M E T A L S C H O O L
  • css styling: sidebar general tweak #2: to style the general <p> tag within the sidebar which is not yet styled. click within the line that begins ‘launch pics...’ create new css rule M E T A L S C H O O L
  • css styling: sidebar set font-size: 0.7em; line-height: 1.3; left margin: 15px M E T A L S C H O O L
  • css styling: sidebar para tag is now styled with css and aligns with other elements on the page M E T A L S C H O O L
  • css styling: sidebar with cursor inside the h1 headline, create new css rule. compound selector shown above will appear. click ok. M E T A L S C H O O L
  • css styling: sidebar in the box, fill in the values shown in the right column on top. color: #630; font-size: 16px; font-weight: bold; margin: 15px (each for top, right, bottom, left) M E T A L S C H O O L
  • css styling: sidebar with cursor in the h2 headline (‘the debut album’) create a new css rule M E T A L S C H O O L
  • css styling: sidebar the border at the bottom has to be made ‘none’ to cancel the overall h2 tags having a dotted border. set font-size to 14px; color to #630; and margin top M E T A L and bottom to 15px S C H O O L
  • css styling: sidebar with cursor inside a h3 tag (‘hover’ or ‘eleven complaints’), create new css rule. fill in the values as above. font-family: georgia...; font-size: 14px; font-weight: bold; font-variant: small-caps; color: #033 M E T A L S C H O O L
  • css styling: sidebar with cursor inside a h4 tag (either of the 2 ‘track list’ mentions), create new css rule. fill in the values as above. font-family: verdana...; font-size: 0.7em; font-weight: bold; color: #066 M E T A L S C H O O L
  • css styling: sidebar this is the way it looks at this stage. the h1, h2, h3 and h4 tags inside of the sidebar are all done. we have yet to style the ordered list (ol), the M E T A L paragraph (p), the images of the cd albums and the cd descriptions S C H O O L
  • css styling: sidebar let’s get a couple of image place-holders in place. select ‘(cd photo)’ in the design view and delete. check the code view and delete the <p> </p> tags for that line as well. with the cursor in the blank line ahead of the <h3> tag... M E T A L S C H O O L
  • css styling: sidebar click on insert > image objects > image placeholder. M E T A L S C H O O L
  • css styling: sidebar fill in the details as above and click ok M E T A L S C H O O L
  • css styling: sidebar the grey place-holder appears. we will move it away from the left edge of the sidebar with some css M E T A L S C H O O L
  • css styling: sidebar select the place-holder by clicking on it. create new css rule. you will find a compound selector pre-chosen for ‘#wrapper #sidebar img’ - which means an M E T A L image within the sidebar within the wrapper. click ok S C H O O L
  • css styling: sidebar set the left margin to 15px. that will push the image away from the left edge of the sidebar and align with most other text there M E T A L S C H O O L
  • css styling: sidebar now for the other album image. delete similar phrase half-way down the page: (cd photo). with the cursor carefully positioned as before, click on insert > image objects > image placeholder. fill in the same details as before. click ok M E T A L S C H O O L
  • css styling: sidebar the place-holder image already has a left margin of 15px in the css M E T A L S C H O O L
  • css styling: sidebar now onto the ordered list. click somewhere within the list and create new css rule M E T A L S C H O O L
  • css styling: sidebar you’ll get a compound selector like the one shown above. click ok M E T A L S C H O O L
  • css styling: sidebar use the values above - font-size: 0.8em; line-height: 1.5; and left margin: 15px M E T A L S C H O O L
  • css styling: sidebar the sidebar shaping up. all headings, image place-holders, ordered lists are in place. all that remains is the album M E T A L S C H O O L descriptor and some general tweaks
  • css styling: sidebar now for the last part: the descriptor of the album - name and release date. this should be styled in such a way that it appears as a unit to the right of the album image. we first select the lines as above in code view M E T A L S C H O O L
  • css styling: sidebar with the lines selected, click on the ‘wrap tag’ icon in the left column (in red circle). this puts a <div> </div> tag around the chosen lines M E T A L S C H O O L
  • css styling: sidebar in the wrap tag box that appears, write <div class=”descriptionbox”> and press enter M E T A L S C H O O L
  • css styling: sidebar set the font-size: 0.9em; color: #666; width of the box to 140px; float: right; clear: right; and top border: solid, thin and color of #066 M E T A L S C H O O L
  • css styling: sidebar go down the page and do exactly another div tag with the same class of descriptor. shown above: the lines selected for the div tag to wrap around M E T A L S C H O O L
  • css styling: sidebar the .descriptionbox div tag shown in code on the left. and its effect in design view on the right M E T A L S C H O O L
  • css styling: sidebar all in place! as seen on safari M E T A L S C H O O L
  • css styling: sidebar except... when you look closely the ‘release date...’ line is not flush left aligned; it is indented (by 15px that most elements in the sidebar are) M E T A L S C H O O L
  • css styling: sidebar place the cursor anywhere inside the ‘release date...’ line. and make a new css rule M E T A L S C H O O L
  • css styling: sidebar make sure the selector is compound and the name for the selector is as shown above: #wrapper #sidebar .descriptionbox p. click ok M E T A L S C H O O L
  • css styling: sidebar set the left margin to 0px. this will reset the margin for any para inside a description box M E T A L S C H O O L
  • css styling: sidebar now the line is flush with hover and the green line above M E T A L S C H O O L
  • css styling: sidebar now for the real images to replace place-holders. click on the place-holder image M E T A L S C H O O L
  • css styling: sidebar in the dialog box navigate to your metal school folder and click on the hover-cd-cover-85x77.jpg. click on the choose button M E T A L S C H O O L
  • css styling: sidebar the real image is in place now M E T A L S C H O O L
  • css styling: sidebar similarly choose the other place-holder and link it to 11comp-cd-cover.jpt in your metal school folder M E T A L S C H O O L
  • css styling: sidebar as final tweaks to the sidebar, the gap below ‘the debut album’ line should be a little more. and the gap below ‘track list’ should be a little less M E T A L S C H O O L
  • css styling: sidebar to increase the gap below ‘the debut album’ open up the css rule definition by double-clicking on #wrapper #sidebar h2 in the css panel. add a bottom margin: 10px and click ok M E T A L S C H O O L
  • css styling: sidebar to reduce the gap below ‘track list’ open up the css rule definition for #wrapper #sidebar h4 and make the bottom margin -10px and click ok M E T A L S C H O O L
  • css styling: sidebar the space issues are fixed now M E T A L S C H O O L
  • css styling: footer set the #footer region to the above parameters. M E T A L and the page is done. S C H O O L