Session 1: Configuration, HTML and CSS

fullfattruckΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 7 μήνες)

165 εμφανίσεις


Web Development with
Adobe
Dreamweaver

CS5.5
:
Beyond the Basics

Session 1:
Configuration,
HTML and CSS

Prerequisites

1.

Previous experience using Dreamweaver to create Web pages

2.

A basic knowledge of HTML and CSS

3.

Ability to create, edit and manage images and text files

1.

Site
Access and
Configuration

Add a site in Dreamweaver

1.

Go to Sites > New Site…

2.

Type the site name.

3.

Paste the local folder path or
network address into the
Local
Site Folder.

4.

Click Save.

A
ccess CWIS servers

If you are using
a network drive
such as
one of the CSU CWIS
web
servers

to host your content
, the
L
ocal
S
ite
F
older should look like this:

\
\
wsnet.colostate.edu
\
cwis123
\
wwwroot
\
mysite
\

Map a network drive

Y
ou
may want to map a network
drive to your site or web server for
easier access to it.

1.

Select an unused drive letter.

2.

Type,

paste or browse for the
network address to be mapped.

3.

If needed,
check the box “Connect
using different credentials”
.

4.

Click Finish.

5.

If prompted,
log in with your eID.

6.

A new window will open showing
the address as a drive letter.

7.

Use the drive letter to de
fine a site
in Dreamweaver.


Web Development with Adobe Dreamweaver CS5.5


Page
2

of
7

Beyond the Basics: Session 1: Configuration,

HTML and CSS

© Computer Applications Training, Colorado State University

2.

Web Development in RamCT Blackboard

A
dd
HTML
files to course files

http://bblhelp.ramct.colostate.edu/pdf/training/AddingPresentConten
tRamCTBB.pdf

1.

Open your course
.

2.

Go to Course Content
.

3.

Move the mouse over Build Content and click
New Page >
Content
Folder
.

4.

Give the folder a name, and possibly enter other options
.

5.

Click
Submit
.

6.

Click the folder you just created
.

7.

Move the mouse over Build

Content and click Create >
File
.

8.

Click
Browse My Computer

and select
a file

to upload
.

9.

Give the file a name, and provide other options if needed.

10.

Click
Submit
.

Upload Multiple Files and Folders

1.

Move to
Course Management >
Control Panel >

Files and click the
»

button.

2.

Move to Upload and click
Upload F
iles
. Java
l
oad
s on the Upload Multiple Files and Folders screen
.

3.

Drag and drop your files from Windows Explorer onto the
To begin uploading

window

in RamCT
.


A
dd
a
file to deploy an
HTML
package

http://ondemand.blackboard.com/r91/movies/bb91_course_files_using_add_file_to_deploy_html_package.htm

1.

Access
a content area

where you would like to display the HTML files
.

2.

Create a file
.

3.

Browse course files
.

4.

Select the first HTML file in the package (the index page)
.

Click
Submit
.

5.

Change the link name from mypage.html to a descriptive name
.

6.

Choose whether to open

the file in a new window
, and
possibly enter
other options
.

Click
Submit
.

7.

Check that the link goes to the HTML page
, and that the page displays properly
.

Note that RamCT
Blackboard
displays Web content in an iframe (inline frame). This may affect
JavaScr
ipt that refers to the top level window instead of the document.

S
et up
a
web folder for WebDAV

http://help.blackboard.com/instructor/Cont
ent/_instructor_content/instructor_course_files_files_add.htm

-

“About Web Folders (WebDAV)” and “How to Set Up a Web Folder for Windows”

1.

In Course Files, click

the
Set Up Web Folder

button on the right.

2.

Copy
the
Current Web address
:

https://ramct.blackboard.com/bbcswebdav/courses/
my_course


3.

Paste this URL into a
new
browser
tab
to
view

your course

outside of the RamCT interface
.


Web Development with Adobe Dreamweaver CS5.5


Page
3

of
7

Beyond the Basics: Session 1: Configuration,

HTML and CSS

© Computer Applications Training, Colorado State University

A
dd a network location
to a RamCT cou
rse

in Windows 7

1.

Open

Start

>

Computer.

2.

In the empty area at the bottom of the right
-
hand pane, right
-
click and select

Add a network
location
.

3.

The

Add Network Location Wizard

will open. Click

Next
.

4.

When asked where you want to create the network location,
select

Choose a custom network
location. Click

Next
.

5.

When asked for the location of your website,
paste the URL above
. Click

Next.

6.

T
ype your
CSU eID
username and password. Click

OK.

7.

Enter a name
for the location
and select

Next.

8.

On the

Completing the Add
Network Location Wizard

page, Click

Finish.

9.

The Web Folder will open. It will now be listed in

Computer

under

Network Location.

A
dd a Dreamweaver site

using the
network location to a RamCT course

Use

this

Windows path
or paste the URL above
to create a site or map a network drive.

\
\
ramct.blackboard.com@SSL
\
DavWWWRoot
\
bbcswebdav
\
courses
\
my_course

A
dd
a WebDAV server

to Dreamweaver

1.

Click
Site

>
New Site
.

2.

Click the
Servers

tab and Connect
using: WebDAV.

3.

Paste the URL into the URL: field.

4.

Type

your CSU eID username and
password.

5.

Click the
Test

button to assure
the
URL and login
details
are
correct
.

6.

Click
Save
.

7.

Double
-
click and
edit any file
in
this site. T
he
changes will
appear
in RamCT

without needing to upload
.

For more information about connecting to remote servers in Dreamweaver, see

http://help.adobe.com/en_US/dreamweaver/cs/using/WS753df6af718a350a60097e0f131686fa2b4
-
7ffe.html

U
s
e

the page editor in RamCT Blackboard

1.

Move the mouse over Build Content and click New Page >
Blank P
age
.

2.

Give the page a title.

3.

Enter content in the
C
ontent section.
Mouse over the WYSIWYG controls
for a description of each
.

HTML
-
related
buttons: Clear Formatting, Toggle HTML Source, Preview and Markup Validation.

The bottom
row buttons can insert images
, files and other media.



Web Development with Adobe Dreamweaver CS5.5


Page
4

of
7

Beyond the Basics: Session 1: Configuration,

HTML and CSS

© Computer Applications Training, Colorado State University

4.

Attach files or add other options if desired. Click
Submit
.

F
uture
HTML capabilities
of the page editor

The current
page
editor in
RamCT
B
lackboard

cannot edit
HTML

files
, but a

new editor
that can
edit HTML
will
probably be included in an upgrade
in 2013
.

3
. HTML

HTML
elements

A
tag

is
enclosed in brackets
, e.g. <a>
. It
has either

a closing tag

<a></a> or
slash
<img />
.

An
attribute

is
inside a tag
. Important attributes include
href
, src, class
and

id
.

The
attribute’s

value

is enclosed in double quotes, e.g. "http://www.colostate.edu/".

The element’s
content

is between the opening and closing tag, e.g. Colorado State University.

An HTML
element

is everything from the start tag to the end tag
, e.g. a hyper
link

element
:

<a href=
"
http://www.colostate.edu
/"
>Colorado State University</a>

HTML document structure

The
DOCTYPE

tag determines the version of HTML you are using

(HTML 4,
5 or XHTML)
.

The
html

tag contains the head and body tags.

The
head

tag contains
the document title, scripts, style sheets, and meta tags.

The
body

tag contains the document content.

Code view and Coding toolbar


Code view lets you view
and edit
the HTML source code of the page.


The coding toolbar
appears vertically on the left.
(It
is rotated here to save space.)

It
has buttons to collapse and expand
selected
code, show line numbers, highlight invalid code,
word wrap, apply and remove comments, indent and format source code
, and add code snippets
.


4
. CSS

CSS rules

A rule consists
of a selector, and one or more declarations separated by semicolons.

A declaration is a property and value separated by a colon.



Dimensions

Width and height can be specified by themselves, or
prefixed
with min
-

or max
-
.


Web Development with Adobe Dreamweaver CS5.5


Page
5

of
7

Beyond the Basics: Session 1: Configuration,

HTML and CSS

© Computer Applications Training, Colorado State University

Units include px (pixels, for exact layout) and em or % (for
scalable layout, recommended).

Common
Selectors

A
class

starts with a dot (e.g. .alert) and can select one or more
elements, which can use different tags (
e.g. p.alert, a.alert).

An
id

can select only one element. (e.g. #main
-
heading)

A
nested selector

selects one element within another, e.g. li a
selects a link within a list item.

A
pseudo

class or element can select certain elements by their
visited or ho
ver state, by their siblings (first
-
child), for their content
(first
-
line, first
-
letter), or to add text before or after.

An
attribute selector

can select only elements with certain
attributes, e.g. a[href~=colostate].

CSS Styles
p
anel

Click
Window

>
CSS
Styles
.

V
iew styles for a selected element, or all styles.

V
iew a rule by clicking it, and then add or edit properties for it.

New
CSS
R
ule dialog

A selector can be a tag, class, ID or a
combination of these.


A rule
definition
can be
saved
in this
docum
ent (in the head tag), or an
existing or new .css file

(recommended)
.


Click OK and specify one or more
properties, which Dreamweaver
organizes into categories:

Type

Define f
ont family, size, weight (bold),
style (italic), variant (small caps),
text
transform (case), text decoration
(underline), and color.

Background

Define background c
olor, image, repeat
(x/y), attachment (scrol
l) and position

(x
/
y)
.

Block

Define block w
ord and letter spacing,
vertical and horizontal (text) alignment, text
(hanging) indent, white space (nowrap) and
display (block, inline, inline
-
block, none)
.



Web Development with Adobe Dreamweaver CS5.5


Page
6

of
7

Beyond the Basics: Session 1: Configuration,

HTML and CSS

© Computer Applications Training, Colorado State University

Box

Define box w
idth, height, float, clear, padding
and margin
.

(See the CSS box model at
http://www.w3schools.com/css/css_boxmodel.asp
.)

Border

Define border s
tyle, width and color for top, right, bottom and left margins.

List

Define list s
tyle,
image and position
.

Positioning

Define p
osition (absolute, fixed, relative or static), width, height, visibility, z
-
index, overflow,
placement,
and
clip
.

Extensions (browser
-
specific)

Define p
age break, cursors,
and
filters (Microsoft
-
only extensions simil
ar to CSS3)
.

Page layout templates

Using Dreamweaver’s page layout templates can help you design your own layouts.

1.

Click
File

>
New


2.

Click a layout in the
Layout
: column. Dreamweaver CS5.5 comes with several page templates with
common layouts (1 to 3 colum
ns, liquid or fixed width, left or right sidebar, header and footer).

3.

Use
the
DocType
: menu
to select the document type
for any layout
(HTML 5 for new sites, XHTML
1.0 Transitional for compatibility with old sites).


4.

Use the
Layout CSS
: menu to determine w
here to put the CSS code for the layout (Add to Head,
Create New File, or Link to Existing File).

5.

Click
Create
.

Learn from
the H
TML and CSS code, and the
instructions in the content and comments.



Web Development with Adobe Dreamweaver CS5.5


Page
7

of
7

Beyond the Basics: Session 1: Configuration,

HTML and CSS

© Computer Applications Training, Colorado State University

5. Other Dreamweaver Coding Features

L
ive
V
iew
,
Inspect
, and
Live Code


Click
Live View

to see how the page will look in a
(webkit
-
based)
browser. Split view displays
code and page together.


Click
Inspect

and click any element in the live page to see its CSS in the CSS Styles panel.

Changes t
o the code show in Live View if you click
Refresh
.

Click
Live Code

and click any element in the live page to see its

HTML in the Code window.

Type or paste any URL in the Address: field of the Browser Navigation toolbar to see the HTML
and other code files

(stylesheets and scripts)
of any site on the Internet.


Click a link
to
load a different page

and see its code files
.

6. Dreamweaver Preferences

Click Edit, Preferences. You can customize many Dreamweaver settings, including:

General
: Use <strong> and <em
> tags, history steps, etc.

CSS Styles
: Use shorthand

Code Rewriting
: Automatically
fix code from older pages

File Types/Editors
: Extensions
of files to open in code view

Invisible Elements
: Show
scripts, CSS or comments in
design view

New Document
: Selec
t the
default type for new documents
(e.g. HTML5)

Preview in Browser
: Select
browsers to preview pages (IE,
Firefox, Safari, Chrome, Opera)

Window Sizes
: Preview a page
in common sizes for phones,
tablets and browsers

7.
Adobe CS6 Product Update

Adobe will

be presenting a new Product update

Creative Suite CS6 on April 12.

Two Sessions are being held in the Lory Student Center, room 205
.

The invitation and Registration information can be found at the following links:

Colorado State Invite
:
http://edu.adobeeventsonline.com/NDA/2012/CSU/invite.html


Registration
:
http://edu.adobeeventsonline.com/NDA/2012/CSU/registration.html