Dreamweaver Instructional exercise.

Uploaded on:
Category: Travel / Places
About the Colors in Tutorial. Dark is for significant instructionsRed shows names of menu things or records Purple is for notes that offer you some assistance with understanding however don't require actionWhen you see directions, for example, File > Open, this implies you tap on the File menu thing and afterward go to Open.. A Couple of Tips First.
Slide 1

Dreamweaver Tutorial Principles of Internet Marketing MKT 380 Copyright Judy Strauss 2003

Slide 2

About the Colors in Tutorial Black is for significant guidelines Red shows names of menu things or records Purple is for notes that help you see however don\'t require activity When you see directions, for example, File > Open , this implies you tap on the File menu thing and afterward go to Open .

Slide 3

A Couple of Tips First Spacebar just makes one space regardless of how often you hit it. To make more in HTML, we utilized &nbsp one time for every space. To make more spaces in Dreamweaver utilize Ctrl+Shift+Spacebar Enter key skirts a line (twofold space). To single space utilize Shift+Enter . Take note of that the arranging will keep on next line when you do this.

Slide 4

Let\'s Go Create another envelope in C:/380/yourname called dreamweaver_exercise Everything will be in that organizer or it won\'t work when you test the pages Open Macromedia > Dreamweaver MX

Slide 5

Dreamweaver Settings Set rulers as pixels: View > Rulers > show and View > Rulers > pixels (both show and pixels are checked) Set relative text style as Verdana 10 pt. Alter > inclinations and highlight Fonts Be certain yours looks like beneath

Slide 6

Exploring Dreamweaver Click on Common tab and search for: Design and code sees (squeeze every one of the 3 catches and see what happens) Note the commonplace HTML code – this is how you can alter it – in code see

Slide 7

Locate Context Sensitive Property Inspector at Bottom This is the place you will enter connections and make content, tables and different things do what you need them to

Slide 8

You\'ll Make This Using Dreamweaver-look well known?  Three HTML pages and one realistic

Slide 9

Page 1: Line Test (Line Break; Nonbreaking Spaces) Note the html charges at base of every slide as a source of perspective. In the event that you need to see them in Dreamweaver, tap on code see catch Type the case to one side in the Untitled Document window, squeezing Shift after the "Line test" line and Shift+Enter after each extra line. Start the indented line with three redundancies of Ctrl+Shift+Spacebar. Tap on code see and recognize the html for break and nonbreaking space HTML: <br> &nbsp

Slide 10

Save and Test Locally Save the record in the dreamweaver_exercise organizer as line.htm Press the F12 key to review the archive in your program. We will connection to this record later. Close the IE window somewhat less demanding in WYSIWYG, eh?

Slide 11

Page 2: Font (face and size) Create another untitled page utilizing File ��  New. In the window, select Basic Page , HTML and hit the Create catch. Sort ACME Video Enterprises on the new page. Highlight the content and note how the Property Inspector is prepared for word processing (go to next slide… ) HTML: <b><font face=Arial size=+3>

Slide 12

Page 2: Font proceeded with… (face and size) With content highlighted, go to Property Inspector, change the textual style to Arial, Helvetica, sans serif by utilizing drop down window. Change the text dimension to Size: +3 . Take note of that +3 is a relative text dimension demonstrating three stages up from the base textual style or roughly 24 point. Tap on the boldface symbol HTML: <b><font face=Arial size=+3>

Slide 13

Save and Test Locally Save the document in the dreamweaver_exercise envelope as font.htm. Press the F12 key to review the archive in IE. Close the IE window

Slide 14

Page 3: index.htm Create a Table Create another page File ��  New. At that point Basic Page , HTML and hit Create. Pick Insert ��  Table and finish the appear shape as beneath Note: you can likewise embed a table from menu bar (search for symbol directly under "regular" tab) HTML: <table width=75% cellpadding=5 cellspacing=1 borders=0>

Slide 15

Page 3: index.htm Note what you simply did: The table has two lines and two sections. The width of the table is 75 percent of the client\'s screen. The table will have no outskirts. Cellpadding and cellspacing are set to 5 and 1, individually, to make a superior outline.

Slide 16

Page 3: index.htm Center the Table With your cursor inside the table, tap the <table> tag at the base of the Untitled Document window. Take note of: This chooses the whole table. At the point when cursor is in the table note how property controller changes to incorporate table charges you might need to change. Set Align: Center in the property reviewer appear shape demonstrated as follows:

Slide 17

Page 3: index.htm Merge Columns in the First Row Click and drag to highlight the whole first line of the table (not segment). At that point pick Modify ��  Table ��  Merge Cells (you can likewise right-snap to raise these alternatives). The two cells ought to converge into one. HTML: <td colspan=2>

Slide 18

Page 3: index.htm Add the content Type the content as underneath. Take note of the spelling mistake and how the text style comes back to default Verdana. Dreamweaver doesn\'t spell check consequently (utilize Text > Check Spelling) I will call the combined cell at the top the page heading . I will call the two sections underneath the page heading the substance segments .

Slide 19

Note: you may Have to hit bolt To grow monitor box Page 3: index.htm Set Cell Alignment, Width, and Background Color Note: 2 Bg boxes. Top is for back-ground picture Align page heading with cell base, and substance with top of the segment for best format outline (like daily papers). Click in Page Heading Cell (Acme… ) to take a shot at cell Complete the property overseer sort shading code #99ccff hit enter (or tap on Bg bolt and find the shading) level arrangement Horz: Left vertical arrangement Vert: Bottom HTML: <td adjust = left valign=bottom bgcolor=#99ccff>

Slide 20

Page 3: index.htm Format two substance cells Click in the furthest left substance cell. Set the even arrangement Horz: Left Set width W: 30% Set the vertical arrangement Vert: Top Set the foundation shading Bg: #ccffff Repeat a similar organizing for the furthest right substance cell however set the width W: 70%

Slide 21

Page 3: index.htm Font Face/Size Highlight ACME Video Enterprises and finish the property monitor appear frame demonstrated as follows. Change text style face to Arial, Helvetica, sans serif Change the text dimension to Size: +3. Highlight message in every substance cell and change the text style face to Arial, Helvetica, sans serif. HTML: <font face=Arial size=+3>

Slide 22

Page 3: index.htm Save and Test locally Save the document as index.htm in the dreamweaver_exercise record where the line.htm and font.htm are. Test by hitting f12

Slide 23

Untitled Pages Suck Open index.htm in Dreamweaver and dispose of "untitled" by writing Home Page in the title window. Open line.htm and font.htm and sort a title for each of them, Save Test with f12 to see the window titles change

Slide 24

Linking the Pages Open index.htm and change the content in the furthest left substance cell to coordinate the content underneath HTML: <a href="line.htm">

Slide 25

Linking the Pages Highlight Line test. In the Property Inspector, tap the little yellow organizer to one side of the Link field to peruse for line.htm. Click OK . Rehash the technique for Font test this time perusing for font.htm (they ought to both be in the same dreamweaver_exercise organizer). This is relative connecting Save the record and test the connections locally in IE HTML: <a href="line.htm">

Slide 26

Finally, Graphics! Make a realistic for Acme as you did in the HTML work out – guidelines rehashed on taking after slides and adjusted to Dreamweaver.

Slide 27

Make an Image Visit http://www.3dtextmaker.com/and make a logo for good old Acme Video Enterprises. Pick a cool textual style, shading, and set the measurements at "size not compelled" In step 4, set it at "Stationary" so it is not enlivened In step 5 enter Acme Click on Make 3D Text Continued…

Slide 28

Save Image Save your new picture by right tapping the mouse, highlighting Save picture as… Save it in the dreamweaver_exercise envelope AND change the name to acme.gif. It is imperative to keep all records in a similar organizer.

Slide 29

Insert Image Delete the word ACME from the heading of your page keeping in mind the end goal to supplant it with the logo. Position the cursor before Video Enterprises and pick Insert ��  Image . Explore to the realistic that you made Before you click OK take note of that you can connect this picture to a html page also in this container just by writing the URL or document name. Click OK The realistic ought to now show up as a feature of the page heading. Utilize the handles to resize it as vital—snap and drag (to move proportionately, hold Shift while dragging).

Slide 30

A Word About Images What you have done is embedded a html hyperlink to the picture record. This advises IE to get picture and show with page. This picture won\'t indicate online unless: You send both html record and picture document to server You take after the parallel structure run (when you embed the document it is in a similar document structure on nearby PC as on server (e.g., all documents in one organizer with no extra envelopes).

Slide 31

Add Metatags Note: watchword meta-labels assist a web index with indexing the page. Pick Insert ��  Head Tags ��  Keywords . At that point enter Video, ACME as the catchphrases . Click OK . Note: Normally you would do at any rate both Keyword and Description labels. Only for the sake of entertainment, tap on code view and investigate the html for this page – it will look compelling well known.

Slide 32

Congratulations! You\'ve recently wrapped up a site with expert components in Dreamweaver. Presently, attempt the Dreamweaver instructional exercise or begin on your Web website

View more...