Dreamweaver tutorial
Download
1 / 32

dreamweaver tutorial - PowerPoint PPT Presentation


  • 356 Views
  • Updated On :

Dreamweaver Tutorial. Principles of Internet Marketing MKT 380 Copyright Judy Strauss 2003. About the Colors in Tutorial. Black is for actionable instructions Red indicates names of menu items or files Purple is for notes that help you understand but do not require action

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'dreamweaver tutorial' - niveditha


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Dreamweaver tutorial l.jpg

Dreamweaver Tutorial

Principles of Internet Marketing

MKT 380

Copyright Judy Strauss 2003


About the colors in tutorial l.jpg
About the Colors in Tutorial

  • Black is for actionable instructions

  • Red indicates names of menu items or files

  • Purple is for notes that help you understand but do not require action

  • When you see instructions such as File > Open, this means you click on the File menu item and then go to Open.


A couple of tips first l.jpg
A Couple of Tips First

  • Spacebar only makes one space no matter how many times you hit it.

    • To make more in HTML, we used &nbsp one time for each space.

    • To make more spaces in Dreamweaver use Ctrl+Shift+Spacebar

  • Enter key skips a line (double space). To single space use Shift+Enter. Note that the formatting will continue to next line when you do this.


Let s go l.jpg
Let’s Go

  • Create a new folder in C:/380/yourname called dreamweaver_exercise

  • Everything will be in that folder or it won’t work when you test the pages

  • Open Macromedia > Dreamweaver MX


Dreamweaver settings l.jpg
Dreamweaver Settings

  • Set rulers as pixels: View > Rulers > show and View > Rulers > pixels (both show and pixels are checked)

  • Set proportional font as Verdana 10 pt. Edit > preferences and highlight Fonts

  • Be sure yours looks like below


Exploring dreamweaver l.jpg
Exploring Dreamweaver

  • Click on Common tab and look for:

    • Design and code views (press all 3 buttons and see what happens)

Note the familiar HTML code – this is how you can edit it – in code view


Locate context sensitive property inspector at bottom l.jpg
Locate Context Sensitive Property Inspector at Bottom

  • This is where you will enter links and make text, tables and other things do what you want them to


You ll make this using dreamweaver look familiar l.jpg
You’ll Make This Using Dreamweaver-look familiar?

Three HTML pages and one graphic


Page 1 line test line break nonbreaking spaces l.jpg
Page 1: Line Test(Line Break; Nonbreaking Spaces)

  • Note the html commands at bottom of each slide as a reference. If you want to see them in Dreamweaver, click on code view button

  • Type the example to the right in the Untitled Document window, pressing Shift after the “Line test” line and Shift+Enter after each additional line. Begin the indented line with three repetitions of Ctrl+Shift+Spacebar.

  • Click on code view and identify the html for break and nonbreaking space

HTML: <br> &nbsp


Save and test locally l.jpg
Save and Test Locally

  • Save the file in the dreamweaver_exercise folderas line.htm

  • Press the F12key to preview the document in your browser. We will link to this file later. Close the IE window

  • A little easier in WYSIWYG, eh?


Page 2 font face and size l.jpg
Page 2: Font(face and size)

  • Create a new untitled page using File  New. In the window, select Basic Page, HTML and hit the Create button.

  • TypeACME Video Enterprises on the new page.

  • Highlight the text and note how the Property Inspector is ready for text editing (go to next slide…)

HTML: <b><font face=Arial size=+3>


Page 2 font continued face and size l.jpg
Page 2: Fontcontinued… (face and size)

  • With text highlighted,go to Property Inspector, change the font to Arial, Helvetica, sans serifby using drop down window.

  • Change the font size to Size: +3. Note that +3 is a relative font size indicating three steps up from the base font or approximately 24 point.

  • Click on the boldface icon

HTML: <b><font face=Arial size=+3>


Save and test locally13 l.jpg
Save and Test Locally

  • Save the file in the dreamweaver_exercise folderas font.htm.

  • Press the F12 key

    to preview the document

    in IE.

  • Close the IE window


Page 3 index htm create a table l.jpg
Page 3: index.htmCreate a Table

  • Create a new page File  New. Then Basic Page, HTML and hit Create.

  • Choose Insert  Table and complete the pop-up form as below

Note: you can also insert a

table from menu bar (look for

icon right under “common” tab)

HTML: <table width=75% cellpadding=5 cellspacing=1 borders=0>


Page 3 index htm l.jpg
Page 3: index.htm

  • Note what you just did: The table has two rows and two columns. The width of the table is 75 percent of the user’s monitor. The table will have no borders. Cellpadding and cellspacing are set to 5 and 1, respectively, to create a better design.


Page 3 index htm center the table l.jpg
Page 3: index.htmCenter the Table

  • With your cursor inside the table, click the <table> tag at the bottom of the Untitled Document window.

    Note: This selects the entire table. When cursor is in the table note how property inspector changes to include table commands you might want to change.

  • Set Align: Center in the property inspector pop-up form shown below:


Page 3 index htm merge columns in the first row l.jpg
Page 3: index.htmMerge Columns in the First Row

  • Click and drag to highlight the entire first row of the table (not column).

  • Then choose Modify TableMergeCells(you can also right-click to bring up these options). The two cells should merge into one.

HTML: <td colspan=2>


Page 3 index htm add the text l.jpg
Page 3: index.htmAdd the text

  • Type the text as below. Note the spelling error and how the font returns to default Verdana. Dreamweaver doesn’t spell check automatically (use Text > Check Spelling)

  • I will call the merged cell at the top the page heading. I will call the two columns beneath the page heading the content columns.


Page 3 index htm set cell alignment width and background color l.jpg

Note: you might

Have to hit arrow

To expand inspector

box

Page 3: index.htmSet Cell Alignment, Width, and Background Color

Note: 2 Bg

boxes. Top

is for back-

ground image

  • Align page heading with cell bottom, and contents with top of the column for best layout design (similar to newspapers).

  • Click in Page Heading Cell (Acme…) to work on cell

  • Complete the property inspector

    • type color code #99ccff hit enter (or click on Bg arrow and locate the color)

    • horizontal alignment Horz: Left

    • vertical alignment Vert: Bottom

HTML: <td align = left valign=bottom bgcolor=#99ccff>


Page 3 index htm format two content cells l.jpg
Page 3: index.htmFormat two content cells

  • Click in the leftmost content cell.

  • Set the horizontal alignment Horz: Left

  • Set width W: 30%

  • Set the vertical alignment Vert: Top

  • Set the background color Bg: #ccffff

  • Repeat the same formatting for the rightmost content cell but set the width W: 70%


Page 3 index htm font face size l.jpg
Page 3: index.htmFont Face/Size

  • HighlightACME Video Enterprises and complete the property inspector pop-up form shown below.

  • Change font face to Arial, Helvetica, sans serif

  • Change the font size to Size: +3.

  • Highlight text in each content cell and change the font face to Arial, Helvetica, sans serif.

HTML: <font face=Arial size=+3>


Page 3 index htm save and test locally l.jpg
Page 3: index.htmSave and Test locally

  • Save the file as index.htm in the dreamweaver_exercise file where the line.htm and font.htm are.

  • Test by hitting f12


Untitled pages suck l.jpg
Untitled Pages Suck

  • Open index.htm in Dreamweaver and get rid of “untitled” by typing Home Page in the title window.

  • Open line.htm and

    font.htm and type a title

    for each of them, Save

  • Test with f12 to

    see the window titles

    change


Linking the pages l.jpg
Linking the Pages

  • Open index.htm and change the text in the leftmost content cell to match the text below

HTML: <a href=”line.htm”>


Linking the pages25 l.jpg
Linking the Pages

  • Highlight Line test.

  • In the Property Inspector, click the little yellow folder to the right of the Link field to browse for line.htm. Click OK.

  • Repeat the procedure for Font test this time browsing for font.htm (they should both be in the same dreamweaver_exercise folder).

  • This is relative linking

  • Save the file and test the links locally in IE

HTML: <a href=”line.htm”>


Finally graphics l.jpg
Finally, Graphics!

Create a graphic for Acme as you did in the HTML exercise – instructions repeated on following slides and adapted to Dreamweaver.


Make an image l.jpg
Make an Image

  • Visit http://www.3dtextmaker.com/ and make a logo for good old Acme Video Enterprises.

  • Pick a cool font, color, and set the dimensions at “size not constrained”

  • In step 4, set it at “Stationary” so it is not animated

  • In step 5 enter Acme

  • Click on Make 3D Text

  • Continued…


Save image l.jpg
Save Image

  • Save your new image by right clicking the mouse, highlighting Save picture as…

  • Save it in the dreamweaver_exercise folder AND change the name to acme.gif. It is very important to keep all files in the same folder.


Insert image l.jpg
Insert Image

  • Delete the word ACME from the heading of your page in order to replace it with the logo.

  • Position the cursor in front of Video Enterprises and choose Insert  Image.

  • Navigate to the graphic that you created

  • Before you click OKnote that you can link this image to an html page as well in this box just by typing the URL or file name. Click OK

  • The graphic should now appear as part of the page heading. Use the handles to resize it as necessary—click and drag (to move proportionately, hold Shift while dragging).


A word about images l.jpg
A Word About Images

  • What you have done is inserted an html hyperlink to the image file. This tells IE to bring in image and display with page.

  • This image will not show online unless:

    • You send both html file and image file to server

    • You follow the parallel structure rule (when you insert the file it is in the same file structure on local computer as on server (e.g., all files in one folder without any additional folders).


Add metatags l.jpg
Add Metatags

  • Note: keyword meta-tags help a search engine to index the page.

  • ChooseInsertHead TagsKeywords. Then enter Video, ACME as the keywords. Click OK.

  • Note: Normally you would do at least both Keyword and Description tags.

  • Just for fun, click on code view and look over the html for this page – it will look mighty familiar.


Slide32 l.jpg

Congratulations! You’ve just finished creating a site with professional elements in Dreamweaver.

Now, try the Dreamweaver tutorial or start on your Web site


ad