top of page

Coding Instruction and Lesson 3 - Navigation/ Link

​

Screen Shot 2021-02-15 at 9.43.34 PM.png

Insert Nav

Screen Shot 2021-02-15 at 9.44.00 PM.png
Screen Shot 2021-02-15 at 9.44.27 PM.png
Screen Shot 2021-02-15 at 9.44.43 PM.png
1.png
2.png

Click TopNav and set the size

Screen Shot 2021-02-16 at 8.52.15 AM.png
Screen Shot 2021-02-16 at 8.52.30 AM.png

Set the Margin Auto

3.png
5.png

Add Selectors

  • Back to Insert 

  • Click UL

4.png

Retype Home Lesson Contact

6a.png

  • Back to CSS 

  • Select TopNav

  • Got o Properties

  • Go to display and  select inline

9.png

After click inline, the TopNav will become horizontal

Screen Shot 2021-02-15 at 10.17.16 PM.pn

  • Go to Padding

  • Set 50px as the space

How to Link the Navigation bar?

​

Screenshot 2023-09-20 at 10.17.09 AM.png
Screen Shot 2021-02-17 at 8.30.40 AM.png

Code example

Screen Shot 2021-02-17 at 8.27.00 AM.png

  • Go to File. choose Properties, Properties window will pop up

  • Highlight the Nav Bar example: Home

  • Type the Link page in the link box in Properties 

  • Click Page Properties

Screen Shot 2021-02-17 at 8.27.08 AM.png

  • Page Properties pop up

  • Choose Links(CSS)

Screen Shot 2021-02-17 at 8.27.15 AM.png

Set the style of your link. Example: Never underline.

Dreamweaver demo 1 : Navigation/Link 

Dreamweaver demo 2 : Text/Image

bottom of page