1) Dreamweaver > Start a new site

cortegesmashInternet and Web Development

Nov 10, 2013 (4 years and 1 month ago)

103 views


1)

Dreamweaver > Start a new site

asks which site to use (choose designer for now)


a)

Choose Create New > Dreamweaver Site…


b)

Choose basic tab & fill out
(don’t need to automatically
use a remote folder
, you
can save locally &
upload

separately)


c)

Link to “duc
ky” folder



2)

Files panel


access all the files in the folder you specified (drag & drop)

a)

View > Code, Code & Design, Design

i)

Switch to code & design


enables you to use the WYSIWYG but edit the code
quickly

ii)

Also access on the document toolbar


b)

Document To
olbar (access views)

i)

Title = titles the page

ii)

Preview link

iii)

Refresh design view

iv)

Visual aids

(1)

Turn off widths


c)

Status Bar

i)

Code selector

ii)

Zoom in & out


d)

Insert Bar

i)

Common

-

most commonly used objects, such as images and tables.

ii)

Layout

-

insert tables, div tags,

layers, and frames.

iii)

Forms

-


creating forms

iv)

Text

-

you to insert a variety of formatting tags, such as b, em, p, h1, and ul.

v)

HTML

-

insert HTML tags for horizontal rules, head content, tables, frames, and
scripts.

vi)

Server
-
code

-

ASP, ASP.NET, CFML Basi
c, CFML Flow, CFML Advanced, JSP, and
PHP.


vii)

Flash

-

insert Flash elements.

viii)

Favorites

-

group and organize the Insert bar buttons you use the most in one
common place.


e)

Coding Toolbar

i)

Collapse & expand code

ii)

Line numbers

iii)

Highlight invalid code

iv)

Add/Remove com
ments

v)

Indent code

vi)

F
ormat


f)

Property inspector

i)

Changes depending on what item you have selected



3)

Preferences

a)

Edit


> preferences (or dreamweaver > preferences for mac)


b)

General

i)

deselect Use <strong> and <em>

ii)

deslect Use CSS instead of HTML tags


c)

Code H
ints


i)

change close tags to Never


d)

Code Format

i)

centering change to use ‘center’ tag



4)

Show page in Photoshop & cut images


5)

Create an HTML document

Code hints (ctrl + spacebar)



Logo

192

83

58 = #fdd401

3

24 = #fda701



Save as ducky.html & p
ress F12 or File > preview in browser to view



6

180px
border

2 px

# fda701

(use an
30


inline style)






6)

Create a CSS document


a)

Delete td & th tags


b)

Clear out the body tag & replace with:

i)

body {

(1)

margin: 0px;

ii)

}


c)

Save as main.css




7)

Go to main.html

a)

Te
xt > CSS > Select a Style Sheet


b)

Select main.css


c)

Refresh





8)

CSS Text

.TextTop {


color:#FFFFFF;


font
-
family:Arial, Helvetica, sans
-
serif;


font
-
size:
:16pt;


font
-
weight:bold;


font
-
style:italic;


text
-
decoration:none;


padding
-
right:10px;

}


a.links {


color:#FFFFFF;


font
-
family:Arial, Helvetica, sans
-
serif;


font
-
size:
14pt;


font
-
weight:bold;


text
-
decoration:none;


padding
-
left:10px;


padding
-
right:10px;

}


a)

Add in links at the top of the page




9)

Left Nav

a)

Insert a table


(6 rows
1

column
s
)


b)

Valign=top

(td holding the table)


c)

Add a
nother column
(right click

> Table
-


insert

column or insert rows & columns for
more control)

or (insert > table objects
)


d)

Merge top row


e)

Add in text




For Sale

3

&#149; Occupations

&#149; Holidays

&#149; Species

&#149; Misc

&#149; About Us




10)


Text Styles


a)

Look at photoshop doc


1. Left nav Title


.leftTitle

{


color:#fda701;


font
-
family:Arial, Helvetica, sans
-
serif;


font
-
size:16px;


font
-
weight:bold;

}



2.

Left nav Links

a.leftLink

{


font
-
family:Arial,
Helvetica, sans
-
serif;


font
-
size:15px;

}






3.

Product Links


a.product

{


font
-
family:Arial, Helvetica, sans
-
serif;


font
-
size:14px;


font
-
weight:bold;

}



4.

Price


.price

{


font
-
family:Arial, Helvetica, sans
-
serif;


font
-
size:13px;


color:#818181;


font
-
w
eight:bold;

}


11)


Main Table


a)

Valign=top
(td holding the table)


b)

90%


30%

<Img>

Duck 1

$19.99


30%

<Img>

Duck 3

$19.99

20px

20px

<Img>

Duck 2

$19.99

<Img>

Duck 4

$19.99





12)


CSS Rollover


a.links:hover

{

color:#663300;

text
-
decoration:underline;

backg
round
-
color:#ffffff;

}


13)


Validate & Clean

a)

Commands > Clean up HTML