San Diego Community College District - Intro To Web Design - Larry Snay – Seadiver.com in Dreamweaver CC

Getting Started in Dreamweaver CC Copy Seadiver-stu Root Folder to desktop Launch Dreamweaver CC Set desktop View to Design Define Website Site / New Site Name as: Seadiver Root Folder location: Desktop

Dreamweaver CC Interface set to Design

Note: When properly defined, seadiver assets will display in the files panel

Create a new HTML Document File new HTML Page Enable Rulers: View / Rulers / Show Title and Save Document Title: Seadiver Home Page Filename: Save as index.html Create a Page layout using a table Insert table, Table Properties: 12Rows, 3 Columns, 800px wide, 3px border, 0 cell padding, 0 cell, and spacing 0 Merge Selected Table Cells In Row 1, merge col 1 through 3 In Row 2, merge columns 2 and 3 In Col 1, merge rows 2 through 12 Align Table to Center Select Table (as a whole) and In Properties Panel set Align to Center, Select all cells and set to Horz Center Save, view in browser

Merge cells by dragging across two cells to select them, then right click over the selected cells and choose Table / Merge Cells

1

ljsnay 21 April 2016

San Diego Community College District - Intro To Web Design - Larry Snay – Seadiver.com in Dreamweaver CC

Create CSS Style Sheet In the CSS Designer Panel, Click on the CSS Designer + Choose Create a New CSS File Browse to navigate to the root folder seadiver-stu with Root Folder Selected Save New Stylesheet as: diver-style.css Create new CSS Rule .header_img

To apply the header-img rule to header First click inside the header area

With seadiver-style.css selected, Select the +Selectors Button to create a new CSS Rule Type in .header_img as the new selector name. With .header_img selected, Deselect Show Set Checkbox (All Properties will appear) Set .header_img properties: image background: header.jpg. Type: Arial, 30 px, Red, Bold, Center

Then, choose header-img from the properties panel Class menu

Apply .header_img rule Click in header cell, Apply class: . header-img Click on image to insert text, type: SEADIVER ADVENTURES Background-Image: header-img.jpg Align: Center Adjust cell height as needed (200px) Insert Animation Click to select after the header text Insert Media Flash SWF: bubbles.swf (From the Animation Folder) Position the animation on the lower part of the header (view animation in browser only) The animation is appears as a flash place holder

Create new CSS Rule: .sidebar_img With diver-style.css selected, Select the +Selectors Button to create a new CSS Rule. Type in .sidebar_img as the new selector name. With .header_img elected, set .sidebar_img properties: background image: sidebar.jpg 2

ljsnay 21 April 2016

San Diego Community College District - Intro To Web Design - Larry Snay – Seadiver.com in Dreamweaver CC

Apply CSS rule to sidebar cell Select inside the sidebar cell Apply class: .sidebar-img adjust cell width as needed (250 px wide)

Choosing the Right Space To insert a paragraph break press Enter. A paragraph break equals TWO vertical lines. To insert a line break press Shift and Enter. A line break equals one vertical line

Adding Icons and Text Links to the Sidebar Enter once to create a paragraph break from the top of the cell Then, insert image: diver dude Type in All Caps: HOME, Link: index.html, Enter GETTING STARTED Link: started.html UNDERWAY, Link: underway.html PHOTOS, Link: photos.html WRECK DIVING, Link: wrecks.html Enter PLANTLIFE, Link: plantlife.html Local Dive Club Link: http://www.seadivers.org/

Syntax Rules must be followed when saving files, rules, images and others 1. Starts w/ lower case letter 2. No Special Characters (@#$%^&*) 3. Underscore _ and hyphen – OK 4. Numbers within name OK 5. Caps within name OK file_Name-1

Insert image: Seahorse Icon.png Insert Body Copy Text From the text folder locate and open the seadiver team text.docx Copy paragraph one and paste it in Row 2 of Column 3 of the table. Copy the five remaining paragraphs (one by one) and paste them into the cells rows 4, 6, 8, 10, 12 of column 3. Insert Subtitles In Row 3 Column 3 Type Subtitle: Getting Started In Row 3 Column 5: Type Subtitle: Underway In Row 3 Column 7: Type Subtitle: Photography In Row 3 Column 9: Type Subtitle: Wreck Diving In Row 3 Column 11: Type Subtitle: Plant Life. Then set cells to Center 3

ljsnay 21 April 2016

San Diego Community College District - Intro To Web Design - Larry Snay – Seadiver.com in Dreamweaver CC

Insert Thumbnail Images Insert Thumbnail images: Each image to be placed in the cell to the left of each subtitle heading as shown. Page Properties Click to open page properties Appearance CSS: Verdana, 12 px, text color: #333 Appearance HTML: Image page_bg.jpg Links: Georgia 20 RED (#F00) Heading1 Georgia 20 RED, OK Heading1 Georgia 18 Black, OK Move All CSS Rules to diver-style.css Apply Heading 2 Format to Subtitles Select Getting Started Subtitle Text, Apply Heading 2. Apply to all subtitles

Apply Heading2 to selected subtitle

Create Additional html pages Create new HTML Document Pre- Linked to diver-style.css. Title: Getting Started Page, Save as: blank.html Insert a Table as a Page Layout tool Insert table, Rows 2, Columns 3, Width 800px. border 3, padding 0px, spacing 0 Select all cells set cell properties to H=Center, V= Middle Save all. Select Table Align to Center Select entire table by clicking on edge of table (ensure table tag is displayed) In Properties set table align: center

4

ljsnay 21 April 2016

San Diego Community College District - Intro To Web Design - Larry Snay – Seadiver.com in Dreamweaver CC

Create new Class CSS Rule: .page2_bg Class, .page2_bg, in diver-style.css Properties: Background image: page2_bg.jpg Apply .page2_bg to table. Select the table from the Class menu select page2_bg to apply image to table ‘s background, Then, scale the table height to 600px

blank.html

Insert Content: Top left cell: Insert Company Logo.png Top center cell: type: Page Title , Top right cell: Insert image: lg1-team Lower Left cell: Copy all internal links from index page and paste into lower left cell of table. Lower center cell: Copy / Paste Paragraph 2 Lower right cell: type: Contact Diver Dan Select the text and Insert / Email Link Type “CONTACT DIVER DAN” in cell insert Email link= mailto:[email protected]

blank.html

Create Class CSS Rule: .red-border With seadiver-style.css selected, choose +Selector and name: .red-border with properties color: #F00 (red) style: solid, 4 px thick Create a Template When you create a template out of an existing page you can use to speed up your page development process and templates alloys you to keep a common theme and “look” throughout your website

5

ljsnay 21 April 2016

San Diego Community College District - Intro To Web Design - Larry Snay – Seadiver.com in Dreamweaver CC

Create Editable regions: Editable regions in a template allow you to choose which cells shall remain editable and other not. Select Title and choose Insert / Template / Editable region Select Image and choose Insert / Template / Editable region Select Text and choose Insert / Template / Editable region Adjust Columns to create an equal column width File / Save as Template: seadiver CLOSE TEMPLATE (Close Template). Save All.

Seadiver.dwt

Create Additional Pages Using the Template Create Started Page File, New, Page from Template: Seadiver Save as: started.html Title as: Getting Started Insert lg1started image (apply red border) Insert Paragraph 2 text (copied from text document)

Create Underway Page File, New, Page from Template: Seadiver Title as: UNDERWAY, Save as underway.html Insert underway image, (Apply red-border) Insert underway text paragraph 3 (copied from text document) Save as underway.html

6

started.html

underway.html

ljsnay 21 April 2016

San Diego Community College District - Intro To Web Design - Larry Snay – Seadiver.com in Dreamweaver CC

File, New, Page from Template: Seadiver Title as: PHOTOGRAPHERS, Save as: photos.html Insert photography image, Apply red-border Insert photography text (copied from text document) Save as photos.html,

photos.html

File, New, Page from Template: Seadiver Title as: WRECK DIVING, Save as: wrecks.html Insert Wreck Diving title Insert Wrecks Image, Apply red-border Insert Wrecks Text (copied from text doc) Save as: wrecks.html, view in browser.

wrecks.html

File New Document from Template: Seadiver Title As: PLANT LIFE, Save as: plantlife.html Insert Plant Life Title, Insert Plant life Image, Apply red-border Insert Plant life body text (copied from text doc) Save as: plantlife.html, view in browser.

plantlife.html

7

ljsnay 21 April 2016