Post on 13-Dec-2015
transcript
Making Websites with Making Websites with DreamweaverDreamweaver
BTTBTT
What is Dreamweaver?What is Dreamweaver?
““What You See Is What You Get” What You See Is What You Get” (WYSIWYG) web design software(WYSIWYG) web design software
Rather than writing code and trying to Rather than writing code and trying to imagine what it will look like, you create a imagine what it will look like, you create a web page like it will actually appearweb page like it will actually appear
Kind of like putting together a PowerPoint Kind of like putting together a PowerPoint slideslide
What about the HTML code?What about the HTML code?
Your Dreamweaver web page will still be Your Dreamweaver web page will still be an HTML filean HTML file
Dreamweaver writes the code for you as Dreamweaver writes the code for you as you go alongyou go along
You can look at the code any time, and You can look at the code any time, and edit it if you wish, by clicking “view” from edit it if you wish, by clicking “view” from the top menu, and selecting “code”the top menu, and selecting “code”
This is useful for adding JavascriptThis is useful for adding Javascript
Some things to rememberSome things to remember
Remember that each website you create Remember that each website you create should be in its own foldershould be in its own folder
All associated files (html files, jpegs, gifs, All associated files (html files, jpegs, gifs, flash objects, etc.) must be in that folderflash objects, etc.) must be in that folder
The first thing you should do is “Save As”The first thing you should do is “Save As”
Working in Working in DreamweaverDreamweaver
This is your main workspace – it’s what your webpage will actually look like
Right clicking on the workspacebrings up a menu
At the bottom, you candefine Page Properties
The Page Properties window lets you define the The Page Properties window lets you define the background, and choose the colours you want background, and choose the colours you want for text, links, etc.for text, links, etc.
The top toolbarThe top toolbar
The “Common” tab on the toolbar is the one you The “Common” tab on the toolbar is the one you will use most of the timewill use most of the time
The main toolsThe main toolsAdd a hyperlink-To an external page (another website)-To an internal page (another page on your site)-To an anchor on the same page
Named Anchor-Provides a placemarker that you can link to-Allows you to “jump” to a spot further down the page
Table-Insert a table-Much easier than writing the code!
Insert an image-Should be .jpg or .gif-Remember it must be in the same folder!
Rollover Image-An image that changes when you move your cursor over top of it-You will need 2 images to do this
The Most Important One!The Most Important One!
Like drawing a textboxLike drawing a textbox Normally if you insert an object (picture, table, Normally if you insert an object (picture, table,
whatever) it will be fixed wherever you put itwhatever) it will be fixed wherever you put it A Layer allows you to move it wherever you A Layer allows you to move it wherever you
wantwant
Draw Layer
Instead of this…
You can move the layers wherever you wantThe lines won’t show up when you view the page in a web browser
The Properties BarThe Properties Bar
At the bottom of the pageAt the bottom of the page When text is selected, the bar looks like the one When text is selected, the bar looks like the one
aboveabove You can change font, and create a linkYou can change font, and create a link
The Properties BarThe Properties Bar
When an image is selected, the bar looks like the one When an image is selected, the bar looks like the one aboveabove
You can turn the image into a link (very cool when you You can turn the image into a link (very cool when you are using a rollover image)are using a rollover image)
You can change the size/shape of an imageYou can change the size/shape of an image The The hotspothotspot tools let you select a part of the image you tools let you select a part of the image you
want to designate as a linkwant to designate as a link Clicking on different parts of the image will take you to different Clicking on different parts of the image will take you to different
linkslinks Some people design entire pages this way!Some people design entire pages this way!