Dreamweaver testing- Fixed Header/footer for website navigation

These are screenshot of testing out the header and footer, so users can navigate around the site from within each persons portrait.

TESTING Header
To begin I have taken the code from one of the Fullpage master Jquery example pages – Fixed Header-CODE CIRCLED in image below- Within the EXAMPLE PAGE SOURCE CODE I linked it to PAGE 3 (my practice page) and then tested it in Firefox to test whether links would work within the header. the link within the header did work in the browser, i then tried the same by inserting and linking the image (to another page) into the header div, this also worked.


 

testing navigation

^^ I now entered the code into my practice page (3) but the css style did not apply to the page. I had to go back into the example page source code and copy the CSS style back into PAGE 3 so the style would apply. image’s below show steps taken.

testing navigation-2

^^ without the CSS code for the header in the sourcecode, it displayed as two blank boxes above the fullpage video background. image below also shows this.

testing navigation-3

 
Once the codes above was inputted the black fixed header and footer bar worked on my practice page, ‘3’
testing navigation-4


^^header link in Dark purple


 

Now that i had the fixed headers working, i tested putting a table in, with image links. IMAGES BELOW. This worked successfully, but table width, padding etc will need tweaking for final site.
testing navigation-5

testing navigation-6

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s