2.744 dreamweaver tutorial
DESCRIPTION
2.744 Dreamweaver Tutorial. Sangmok Han [email protected]. Feb 24, 2010. Overview. We will go over the steps for creating the below page using Dreamweaver: http://web.mit.edu/2.744/www/Results/studentSubmissions/humanUseAnalysis/sangmok/introduction.html. Set up for creating web pages. - PowerPoint PPT PresentationTRANSCRIPT
![Page 2: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/2.jpg)
OverviewWe will go over the steps for creating the below page using Dreamweaver:http://web.mit.edu/2.744/www/Results/studentSubmissions/humanUseAnalysis/sangmok/introduction.html
![Page 3: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/3.jpg)
Set up for creating web pages(1) Create folders for 2.744 web pages(2) Set up Dreamweaver for uploading web pages
![Page 4: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/4.jpg)
Create folders for 2.744 web pages
C:\2.744\humanUseAnalysis\C:\2.744\humanUseAnalysis\images\
*.html*.jpg
C:\2.744\storyboardDesign\ *.htmlC:\2.744\storyboardDesign\images\ *.jpg
Human-use analysis
User-experience storyboards
![Page 5: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/5.jpg)
/afs/athena.mit.edu/course/2/2.744/www/Results/studentSubmissions/humanUseAnalysis/USERNAME
athena.dialup.mit.edu
C:\2.744\humanUseAnalysis
humanUseAnalysis
http://web.mit.edu/2.744/www/Results/studentSubmissions/humanUseAnalysis/USERNAME
Set up Dreamweaver for uploading filesClick Site > New Site… in the menu.
First dialog
Third dialog
Fourth dialog
Below information is useful when you walk through the New Site dialogs.
![Page 6: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/6.jpg)
Create a blank web pageDreamweaver Menu: File > New…
![Page 7: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/7.jpg)
Test the page in a web browser(1) Modify the page and save it as C:\2.744\humanUseAnalysis\introduction.html
(2) Click or press F12 to view the page in a web browser.
![Page 8: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/8.jpg)
Title title.
Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
Title title.
Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
Five steps to create web pages
(1) Layout elements using tables (2) Fill the tables with some random text (3) Decorate (4) Make multiple copies (5) Write contents and put images
Title title. Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
chama inc. when was the last time you took the temperature of communications strategy?
We asked you, "when was the last time you considered your business and communications strategy?" And then we asked ourselves the same question
Title title.
Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
![Page 9: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/9.jpg)
Layout elements using tablesHow many tables do we need to layout this page?
![Page 10: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/10.jpg)
Create the first tableDreamweaver Menu: Insert > Table
![Page 11: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/11.jpg)
Create the first tableDreamweaver Menu: Insert > Table
![Page 12: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/12.jpg)
Create the second tableDreamweaver Menu: Insert > Table(Note: To ensure that the second table is created right after the first one, click on the blank line right below the </table>)
![Page 13: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/13.jpg)
Create the second tableDreamweaver Menu: Insert > Table
![Page 14: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/14.jpg)
Prep for inserting imagesCopy and paste all your image files to:
C:\2.744\humanUseAnalysis\
C:\2.744\humanUseAnalysis\images\
Remind that our HTML files are located at:
This setup allows us to reference image files from a HTML file using a relative path. For example,
C:\2.744\humanUseAnalysis\images\kindle.jpg
images\kindle.jpg
C:\2.744\humanUseAnalysis\introduction.html
Image file
HTML file
Relative path
![Page 15: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/15.jpg)
Insert a logo imageDreamweaver Menu: Insert > Image or use Assets toolbar
![Page 16: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/16.jpg)
Title title.
Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
Title title.
Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
Overview: Creating web pages
(1) Layout elements using tables (2) Fill tables with some random text (3) Decorate (4) Make multiple copies (5) Write contents and put images
Title title. Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
chama inc. when was the last time you took the temperature of communications strategy?
We asked you, "when was the last time you considered your business and communications strategy?" And then we asked ourselves the same question
Title title.
Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
![Page 17: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/17.jpg)
Fill the tables with some text No worry about how it looks (e.g. font-size, color, margin) at this point.
![Page 18: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/18.jpg)
Title title.
Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
Title title.
Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
Overview: Creating web pages
(1) Layout elements using tables (2) Fill tables with some random text (3) Decorate (4) Make multiple copies (5) Write contents and put images
Title title. Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
chama inc. when was the last time you took the temperature of communications strategy?
We asked you, "when was the last time you considered your business and communications strategy?" And then we asked ourselves the same question
Title title.
Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
![Page 19: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/19.jpg)
Decorate the page titleSelect title text “Kindle eBook Reader” and pick Heading 1 in the property toolbar at the bottom.
![Page 20: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/20.jpg)
Decorate the subsection titleSelect title text “subtitle title” and pick Heading 3 in the property toolbar at the bottom.
Click or press F12 to view the page
in a web browser.
![Page 21: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/21.jpg)
Turn menu text into a linkSelect menu text. Modify > Make Link.Select Introduction and link to introduction.html.Select Experience and link to experience.html.
Links (URLs) are case-sensitive. Try keeping all file names in lower-case.
![Page 22: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/22.jpg)
Adjust text alignment in a tableClick on the table cell and use the property toolbar at the bottom.
![Page 23: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/23.jpg)
Click <table> just above the property bar at the bottom. It will reveal a property page about this table. Set Border = 0.
Make table borders invisible
![Page 24: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/24.jpg)
Try adding the following line before </head>.
CSS is useful for decorating multiple pages
<link href="green.css" rel="stylesheet" type="text/css" />
This will make the HTML page is decorated based on “green.css”
<link href=“minimalism.css" rel="stylesheet" type="text/css"/>
Then also try replacing the line with the following.
This will make the HTML page is decorated based on “minimalism.css”
a pageCascade Style Sheet
![Page 25: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/25.jpg)
CSS is useful for decorating multiple pages
<link href=“minimalism.css" rel="stylesheet" type="text/css"/>
Let’s say we have included the below line in all web pages we just created.
Then we can change the look of all web pages by modifying just one CSS file minimalism.css
(Note: Ctrl + Space is the shortcut key for using code completion in Dreamweaver.)
![Page 26: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/26.jpg)
Adding more style rules to a CSS fileWe just learned that text inside the Heading 3 tag
<h3>subsection title</h3>
can be decorated by the following lines (called style rules) in the CSS file:h3 {
font-size: 20px;border-bottom-color: dotted;border-bottom-width: 1px;
}
When we have two Heading 3 tags that need to be styled differently, we can use this technique: First, add class attribute in the h3 tag:
.blueClass { color: #00F; }
.greenClass { color: #0F0; }
In the CSS file, rule names that start without a period (.) is used to decorate tags with the same name (e.g. h3) whereas rule names that start with a period (.) is used to decorate tags with a corresponding class attribute.
Second, add following lines in the CSS file:
<h3 class="blueClass">subsection title in blue</h3> <h3 class="greenClass">subsection title in green</h3>
![Page 27: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/27.jpg)
Title title.
Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
Title title.
Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
Overview: Creating web pages
(1) Layout elements using tables (2) Fill tables with some random text (3) Decorate (4) Make multiple copies (5) Write contents and put images
Title title. Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
chama inc. when was the last time you took the temperature of communications strategy?
We asked you, "when was the last time you considered your business and communications strategy?" And then we asked ourselves the same question
Title title.
Subtitle text here Subtitle text here Subtitle text herebody text here body text here body text here body text here body text here body text here body text here body text here body text here body text here body text here
![Page 28: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/28.jpg)
Debugging TipTop-4 reasons for ...
Have not uploaded the image file yet.
????
Correct:
![Page 29: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/29.jpg)
Add index.html to guide the web browser which page to open.
Most users enter a website by querying a directory name, not a file name.
http://web.mit.edu/2.744/humanUseAnalysis/sangmok
When a directory name is queried, index.html page is automatically served to the web browser (if one exists).
So place index.html in your assignment home directory, which can redirect the browser to a correct web page (e.g. introduction.html).
Note: Save your first landing page as index.html is another good way to achieve the same effect.
![Page 30: 2.744 Dreamweaver Tutorial](https://reader036.vdocuments.us/reader036/viewer/2022062310/568168c6550346895ddfb556/html5/thumbnails/30.jpg)
Resources• Email [email protected] for questions.
• Download this tutorial materials:http://cadlab6.mit.edu/sangmok/2744/ or 2.744 course home page
• CSS demo: http://www.csszengarden.com/
• CSS Tutorial:http://w3schools.com/css/default.asp
• Finding icons or pictures:http://www.istockphoto.com/ (Google or Bing image search also works)
• DIV Positioning tutorial:http://www.barelyfitz.com/screencast/html-training/css/positioning/