Web session 3.
To start the session we designed the rest of the navigation buttons in illustrator, creating them at the correct size 218px x 150px and saving them as web files with the correct labels. We added these codes into our stylesheet and called them into the DSS code.
Adding a new button in the top section.
Open arrow bracket typin in <div id call the button and close arrow bracket.
Enter twice to leave a lince space and close the </div>
In the space, go to insert, image object and roll over image.
Select the first button design as your original image, and the roll over image as number 2.
The alternative text is the label of the button.
Above is how the code previews in google chrome.
<a hrefmeans that it is linking to another page.
for the home button, Delete the hash tag and type index.html
Do this for the rest of the buttons.
Each time you change a button and change the # to a html label, change the phrase in the container as a a visual indicator that the page is changing and going to a different webpage after saving.
Each of the pages then has its own tab.
Above is the home page identifier.
Work page identifier.
About us identifier.
Contact us identifier.
We need to create a grid that we want to work with.
We are going to plan out the content area.
We are creating two columns with 50px padding around, and a 50 px gutter between.
Height is 768px - 150px for top bar = 618px - 100px for 2 x padding = 518px
Width is 1024px - 150px for 3x padding = 874px /2 = 437px
Columns will be 518px height x 437px wide.
Box model. When diving a div id you have 4 areas; margin, order, content, padding.
If we were to code this section, the coding would consist of for the left coloumn, the top, left, and bottom padding would be 50px whilst the right 25px. The padding would be opposite for the right column.
Now we need to put the content onto the pages.
position relative means next to and float left is aligned left.
call the div tags in the code. and place the text inside the code.
this will show as indented inside the coloumn.
In dreamweaver you have to format your text with html.
The paragraph break is <p>
Take lorum epsum and put it in the right hand div tag coloumn.
add the paragraph break in the space between the writing and preview this in the web browser.
Creating a header.
Code the header under body.
call the <h1> tag around the text you want as the header.
How the code has changed the text in the browser.
Open an image in photoshop and make sure the width is 437px with image size.
the image by default may shrint smaller than the height of the comment, if this is the case it does not need to be edited any further. if it is taller than the height of the column it needs to be cropped with the fixed height tool.
Save for web. save as jpeg not png.
move the quality down as much as possible with it still looking crisp.
Below about 100kb is the best size.
Save it into the images folder in root - user work. Do not get rid of the file extension, name is less than 8 characters no punctuation etc.
Placing the image in the code.
Delete the text inbetween the right coloumn code.
click insert image.
select the image you want and give it an alternate text.
The the image appears inside the web browser.
With forms you can google the form you need, eg. google email form.
Do not use video and audio hoste don your own website.
for video use a vimeo account. if you upload a video to a vimeo account.
Vimeo applies all the compression and makes it streamable on the internet.
Click on the share button, copy the embed code, show options, put in the size that we want it to be.
For audio use sound cloud.
You do not have to buy web hosting or band width, because it is using vimeo and soundcloud bandwidth.
Vimeo streams the video, you do not have to wait for it to buffer.
you can also work with image galleries a popular one is light box.
Takes you through a 4 step process of how to apply it to your website.
No comments:
Post a Comment