Dreamweaver

Week 3 - Session 1
Session aims
To introduce Dreamweaver software
To introduce web design techniques using Dreamweaver
To introduce file naming and folder structure for web design Learning Outcomes 2 & 3 Assessment criteria 2.3, 3.1, 3.3, 3.6

Learning outcomes
Describe what they did on week 2, session 2.
Label 12 areas of the Dreamweaver workspace
Set up folder and files for a website
Understand how Dreamweaver writes HTML code to display your web page
Make a moodboard page in Dreamweaver
Define the page properties for a Dreamweaver web site
Upload this page to their Digital Diary

Create a folder structure for your website
a website is a collection of files and folders, you don’t have to be online to look at a website

Use HTML to write a web page HTML page structure The code below shows the basic tags that create the main structure of every web page. <html> <head> <title> Text that appears at the head of the browser window </title> </head> <body> This is where the content of the web page is added .</body> </html> Short for H yper T ext M arkup L anguage, the authoring language used to create document s on the World Wide Web .

Make a web page using HTML & Dreamweaver 1. Getting Started with HTML To begin using html you will need to use the code view in Dreamweaver NOTE: text editors which include formatting information (eg Microsoft Word) should not be used for authoring web pages. In order to preview your HTML page you will need a web browser, such as Internet Explorer, Firefox, Google Chrome, etc. You don’t need to be online. IMPORTANT: Always save an html file with the file extension “ .html ” or “ .htm ”. Use the <html> <head> <title> <body> tags to create a web document. Remember to close the tags.

Create new document
choose page type and layout, docType - none

Switch to split view
Add page title and type in the design pane. Watch the code change as you type

Preview your web document in a browser
right click the document and choose open in safari

Define your site
site > new site

Create new page

Make a new document
file > new

Define the document
html > 2 column fixed

Save the style sheet file
navigate to your website folder

Dreamweaver makes you a document
the layout is fixed 2 column with a header and footer

Split code and design view

Web document edited in Dreamweaver

Web document preview in a web browser

Edit your web document in Dreamweaver
Delete the text you don’t want and add your moodboard image

Add an image to your web document
copy your moodboard image into your image folder (in assets folder of website)

Add image to web document
position cursor, drag image, add alt text, resize holding down shift key

Dreamweaver

by chowders

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

Dreamweaver Presentation Transcript