Skip to Main Content or Page Contents

HTML Tutorial using Dreamweaver

How to use the Dreamweaver Web Editor in conjuction with this HTML & CSS Tutorial

Results per page:

Match: any search words all search words

This Page's Contents

1. Initial Setup of Web Editors

BlueGriffon Setup | Komposer Setup | Notepad Setup - Non Required

2 Creating a New Web Page

BlueGriffon New | Dreamweaver New | Komposer New | Notepad New

Initial Setup of Web Editors

BlueGriffon Setup | Dreamweaver Setup | Komposer Setup | Notepad Setup - Non Required

Blue BlueGriffon Web Editor

BlueGriffon New Page |

BlueGriffon Initial Setup

BlueGriffon Create a New Web Page

  1. Open BlueGriffon
  2. On opening a Tool Tip Pops up,
    1. If unfamiliar with BlueGriffon read
    2. additional Tool tips using the Up Down Buttons
    3. Close the Window
  3. Click File > New
  4. In the New

The above creates a document that holds more information than is covered in the first few lessons. So only view the code that is relevent

Dreamweaver Web Editor

Dreamweaver New |

Dreamweaver Initial Setup

Dreamweaver can automatically indent code

  • Setting Up use Edit > Preferences > Code Format >
    • Indent: Tick then Enter 4 Select Spaces (This gives a very visible code indentation.)
    • As you add lines of or amend your code you can lose the formatting. To re-activate formatting: use Commands > Apply Source Formating

Dreamweaver Create a New Web Page

 

Webmatrix

Initial Setup

None required

Webmatrix Create a New Web Page

Open WebMatrix

  1. On the WebMatrix start screen, Click New > Empty Site
  2. Click Create a new file ...
  3. Select HTML
    Click OK
    Note an Empty Site: This template creates a bare-bones website based on ASP.NET Web Pages. Use this template if you want to build your site's functionality from scratch.
  4. Alter size of Code Text if required
  5. Type (or Copy & Paste) in between the <title> tags
    Your Page TITLE goes here
  6. Type (or Copy & Paste) in between the <body> tags
    <p>Your Page CONTENT goes here and is in a Paragraph</p>
  7. Note Line & - Signs
  8. Click -  Sign to compact Section
  9. Click + Sign to re-open section
  10. Click File > Save as
  11. In file ALTER to
    index.html
  12. Note where the file is being saved, alter if required
  13. Click Save button

Video of


MORE ADVANCED

New page wih CSS Header, Side bar, Content, Footer

BlueGriffon

  1. Open BlueGriffon
  2. Click File > New Wizard
  3. In the New Document Wizard
    1. Title In Title Enter Your Page TITLE goes here
    2. Author In Author: If you want your name etc to be available to the WWW enter any/ all / none of the following: Your name, company, organization, Wemmaster name & email
    3. Keywords Enter the pages Keywords. At this stage you can leave blank or Enter web, page
    4. Language: Select English (en)
    5. Character set: Select Unicode(UTF-8)
    6. Text Direction Select Left to right
    7. Click Next
  4. In the Colours and Backgrounds
    1. I Suggest you leave as the default colours
    2. Only if you wish to change the default colours click Use custom colours & change as required.
    3. Click Next
  5. In Document Background
    1. At this stage leave as is
    2. Click Next
  6. In Page layouts
    1. Ensure predefined CSS layout is Ticked.  This tutorial covers CSS layouts in a later lesson.
    2. Width: Select 950px
    3. Sidebar: Select Left 180px
    4. Click New row > Select 1 column 100%
    5. leave the Include ticked. This produces latin text in the main section. You can delete or alter this later.
    6. Click Finish

The above creates a document that holds more information than is covered in the first few lessons. So only view the code that is relevent

 

© tutorials4u.com
HTML Tutorial by John McGuinn.