A Dreamweaver Tutorial Contents Page Page 1-2 Things to do and know before we start Page 3-4 - Setting up the website Page 5 How to save your web pages Page 6 - Opening an existing web page Page 7 - Creating more web pages Page 8-9 - Adding tables Page 10 - Inserting images Page 11 - Inserting text Page 12-13 - Inserting frames Page 14 - Changing background colour and adding title Page 15 - How to preview work Page 16 - Adding hyperlinks
Things to do and know before we start 1. Open Dreamweaver 2. On the first page click HTML in the create new menu: HTML 3. You are now in Dreamweaver design view Standard Menu Bar Page 1 This is where we design our Web Pages
4. Menu Bar Commands we need to know: File: Save As Preview in Browser > iexplore Insert: Image Table Modify: Page Properties Window: Properties 5. Click Window 6. If Properties is not ticked Click it: 7. You should now see a new box in the main window like this: Properties Window This lets you: Format Text Format Tables Add hyperlinks etc Page 2
How to Set up your Website Before we can start adding content we need to set up the site 1. Click Site New Site 2. Name your site then click next Naming Site 3. Choose No I do not want to use a server technology option Then click next Page 3
4. Make sure Edit local copies on my machine option is ticked Click folder icon and browse to your Animal Website folder Click Open Click Select Click next Click Folder icon then browse to your website folder 5. Select None when asked how to connect to remote server Then click next Selecting None 6. Review your final screen then click done Step by step guide to setting up your website is found here Page 4
How to Save your Web Pages This is how you save your file as a Web-Page 1. Click File Save As 2. New window will pop up: Choose where to save your file (Web Design Animal Website HTML folder) File name should be index.htm Click Save Location to Save in Name of Web Page (MUST be.htm at the end) Remember! File Extension for a Web-Page is.htm Page 5
Opening an existing Web Page When you need to open a Web Page to either make changes or complete it use the following steps: 1. Click: File Open 2. Select the Web Page you want to open 3. Click Open Select Web Page Click Open Tabs Your Web Page ready for editing Other Pages you are working on can be accessed using the Tabs Page 6
Creating more Web Pages Your Website is to be made up of more than one page. You need to be able to create these extra pages in Dreamweaver. To create new pages follow these steps: 1. Click: File New 2. In the window that appears click Basic Page HTML HTML 3. Then click Create Basic Page Create Tabs New Blank Page Other Pages you are working on can be accessed using the Tabs Page 7
Adding a Table 1. Click Insert Table 2. You now see this box: Here you can: Set number of columns/rows Set the Width of the table Set border thickness Set padding and spacing All these settings can be changed later in the Properties later 3. Set it up like this then press OK 4. We now have a table with: 4 Columns 5 Rows Page 8
5. Each Column or Row can be resized by clicking on the appropriate line and dragging: Click the Row Lines and Drag to correct size Click the Column Lines and Drag to correct size 6. You can also change table properties by using the properties window (Sizes, Borders, Border Colour etc) 7. Click the outside border of you table and it will become highlighted with a black border: Black Border Set Width and Height Set Width/Height in % or Pixels Align the table (Left, Centre, Right etc) 8. The properties for your table will now be active Add Columns or Rows Set Background and Border Colour Page 9 Choose Border thickness (0 = no border)
Inserting Images 1. Click Insert Image 2. New window will pop up 3. Browse to where your images are stored (Web Design Animal Website Images) 4. Select Image you want then click OK 5. If you see this message just click OK 6. Resize the Image to the correct size by clicking and dragging the handles or by using the Properties Window: Click and Drag Handles Set Size by adding values to W (Width) and H (Height) in Properties Page 10
Inserting Text 1. Inserting Text is very simple (Very similar to using Word) 2. Choose where you want to input your text (I always use a table to keep things neat) Inserting Text into a Table 3. Text can be formatted (Like in Word) by highlighting it and using the Properties Window to make changes: Change Font Change Colour Bold/Italic Change Size Align (Left, Centre or Right) Formatted Text Page 11
Inserting Frames 1. Frames are used to break the screen up into sections. 2. To insert a frame: Click Modify Frameset Choose which way to split the screen (I chose to the left) 3. The screen will now be split in half vertically The centre line can be repositioned to the desired position Each individual half of screen can be given different colours The frame itself can be modified using the properties Screen is now in 3 parts: i. Frame 1, Frame 2, Frameset (Collection of all frames) Frame 1 Frame 2 Position of frame can be changed Click one of the borders of frame to select it Use Properties to change appearance Page 12
4. To save the Frameset: Click File Click Save All o Save frameset (Collection of all frames) o Save right frame o Save left frame Frameset You know it is a frameset when whole screen is highlighted Give the frameset the name that you would have called the web page Right Frame You know it is the right frame when right side of screen is highlighted Give the right frame the name that you would have called the web page with _right on the end Left Frame You know it is the left frame when left side of screen is highlighted Give the left frame the name that you would have called the web page with _left on the end Page 13
Changing Background Colour and Adding Title 1. Very easy to do 2. Click Modify Page Properties: 3. To change Background Colour: Click Appearance option Click Background colour box Select new colour Click Ok Appearance Background Colour Box Choose Colour 4. To change the Title: Click Title/Encoding option Add you Title into the Title box Click Ok Adding a new Title Title/Encoding Page 14
How to Preview your work At times you will need to be able to see what your Web Pages will look like on the actual Internet To do this you need to be able to preview your work in a Web Browser (Internet Explorer for example) 1. Click File Preview in Browser Iexplore (Or F12) 2. Your Web Page will now appear in Internet Explorer and shows you exactly how it will appear online. Homepage as previewed in Internet Explorer Page 15
Adding Hyperlinks All the pages in your Website should be linked together using hyperlinks. Dreamweaver makes creating these links very, very easy. You can use either Images or Text as your Hyperlink. 1. Select the Image or Text which you want to be your Hyperlink: Selecting Text for Hyperlink 2. In the Properties Window: Click the Browse for File button Browse to your HTML folder Find the Web Page you want to open Click OK Browse for File HTML Folder Click OK Select Web Page Page 16