SlideShare a Scribd company logo
1 of 18
Download to read offline
Advanced Web
Design Using
Dreamweaver
Robby Seitz
121 Powers Hall
rseitz@olemiss.edu
662-915-7822
Assumptions
• You already understand HTML tags.
• You can already use Dreamweaver.
• You understand file name and folder
location concepts.
• You want to know more.
Cascading Style Sheets
• CSS is used to change the look or
layout of HTML elements.
The link element:
• Links default to blue.
• Visited links default to purple.
• Active and hover links default to red.
The style for each of these is redefinable!
Cascading Style Sheets
• Adding a style definition for the link
element changes its appearance.
a {
font-weight: bold;
color: green;
border: 1px solid gold;
background-color: #999966;
padding-left: 5px;
padding-right: 5px;
}
Cascading Style Sheets
• CSS can also adjust only a particular
aspect of some elements.
a {
font-weight: bold;
color: green;
border: 1px solid gold;
background-color: #999966;
padding-left: 5px;
padding-right: 5px;
}
a:hover {
color: black;
background-color: red;
}
Cascading Style Sheets
“Cascading” refers to the precedence
of definitions for a given element.
1. Browser default
2. External style sheet
3. Internal style sheet (inside the <head>)
4. Inline style (inside the HTML element)
Cascading Style Sheets
There are four ways to impose a style
on HTML elements:
1. By element tag name
p {margin_top: 20px;}
2. By class attribute
.column {border: 5px;}
3. By ID attribute
#header {background-color: #ff0000;}
4. By style attribute
style=“color:blue;” (within HTML tag)
Dynamic & Reusable Content
• What content is generated automatically?
– Calendar events
– RSS feeds
– System-generated dates
– Anything requiring programming
• Which parts of the page will appear on
other pages? Pull those parts out into
separate files and include them wherever
you want them:
<!--#include virtual=“myfile.htm”-->
Deconstructing the page
• Identify dynamic content
– Random photo
– Calendar events listing
– Date of last modification
• Identify recurring parts
– Header
– Navigation
– Footer
– Stylesheet
– Javascript
www.olemiss.edu/working/maildemo/
Start Your Dreamweavers!
1. Define your site:
– Site / New Site
– Select Advanced Tab
– Local Info…
• Site name: your name
• Local root folder: My Documents/tacit
– Remote Info…
• Access: FTP
• FTP host: cedar.olemiss.edu
• Host directory: working
• Login: maildemo
• Password: tacit08
• Use Secure FTP (SFTP): Checked
Define new page name
2. View Remote Files
3. Download the index.html file and
the images folder from the server
4. View Local Files
5. Change its name to yourname.html
6. Upload new file name to server
7. View in browser at
www.olemiss.edu/working/maildemo/yourname.html
Customize it
8. Change “maintained by” name and
save/upload the page again.
Examine the CSS
9. The left menu mouseover action
CSS
#menu li a:hover,
body#firstpage a#firstlink,
body#secondpage a#secondlink,
body#thirdpage a#thirdlink {
background-color:#cc0000;
color:#FFFFFF;
}
…
HTML
<body id=“firstpage”>
…
<div id="menu">
<ul>
<li><a href="index.html" id="firstlink">First Link</a></li>
<li><a href="index2.html" id="secondlink">Second Link</a></li>
<li><a href="index3.html" id="thirdlink">Third Link</a></li>
</ul>
Customize the menu
10.Change the filenames to use your
own filenames
<ul>
<li><a href=“yourname.html" id="firstlink">First Link</a></li>
<li><a href=“yourname2.html" id="secondlink">Second Link</a></li>
<li><a href=“yourname3.html" id="thirdlink">Third Link</a></li>
</ul>
Disassemble the page
11.Put the Header, Navigation, and
Footer in separate files
• yourname-head.htm
• yourname-menu.htm
• yourname-foot.htm
12.Include them in the original file:
<!--#include virtual=“yourname-head.htm”-->
(Note that this is a Server Side Include which your
browser can only handle when viewing your page on a
server.)
Disassemble the page
13.Put the CSS in its own file so it can
be shared by other pages.
yourname-style.css
<link rel="stylesheet" type="text/css" href=“yourname-style.css" />
14.Do the same with the Javascript.
yourname-javascript.js
<script src="yourname-javascript.js" type="text/javascript"></script>
Reassemble more pages
15.Change the <body> id to “secondpage”
16.Save/upload as yourname2.html
17.Change the <body> id to “thirdpage”
18.Save/upload as yourname3.html
19.View the files on
the server and
note how they
work together.
Tips
• Never put spaces in Web filenames.
Spaces get converted to “%20” text, and
browsers hate them.
• Make sure all random photos are
exactly the same size.
Page layout usually adapts to photo size.
• Keep images in a separate folder.
Just a good housekeeping rule.
• Keep content current.
If people wanted to see old information,
they’d look on a printed piece.

More Related Content

What's hot

HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2Sharon Wasden
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workAlbino Tonnina
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you needDipen Parmar
 
HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)Daniel Friedman
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsSun Technlogies
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!Ana Cidre
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS FilesLearningNerd
 
HTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifitsHTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifitsPro Guide
 
The Ulta-Handy HTML Guide
The Ulta-Handy HTML GuideThe Ulta-Handy HTML Guide
The Ulta-Handy HTML Guidejsved
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 
Css presentation introdution with sample basic projects
Css presentation introdution with sample basic projectsCss presentation introdution with sample basic projects
Css presentation introdution with sample basic projectsDigital Shende
 
Origins and evolution of HTML and XHTML
Origins and evolution of HTML and XHTMLOrigins and evolution of HTML and XHTML
Origins and evolution of HTML and XHTMLHowpk
 

What's hot (20)

Web Information Systems Html and css
Web Information Systems Html and cssWeb Information Systems Html and css
Web Information Systems Html and css
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Css notes
Css notesCss notes
Css notes
 
HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
 
HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2
 
Unit 3 (it workshop).pptx
Unit 3 (it workshop).pptxUnit 3 (it workshop).pptx
Unit 3 (it workshop).pptx
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers work
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you need
 
HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)
 
Web page concept final ppt
Web page concept  final pptWeb page concept  final ppt
Web page concept final ppt
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS Files
 
HTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifitsHTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifits
 
Chapter8
Chapter8Chapter8
Chapter8
 
The Ulta-Handy HTML Guide
The Ulta-Handy HTML GuideThe Ulta-Handy HTML Guide
The Ulta-Handy HTML Guide
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
Css presentation introdution with sample basic projects
Css presentation introdution with sample basic projectsCss presentation introdution with sample basic projects
Css presentation introdution with sample basic projects
 
Origins and evolution of HTML and XHTML
Origins and evolution of HTML and XHTMLOrigins and evolution of HTML and XHTML
Origins and evolution of HTML and XHTML
 

Viewers also liked

Virtualization strategies
Virtualization strategiesVirtualization strategies
Virtualization strategiesSumit Tambe
 
Notes server setup
Notes server setupNotes server setup
Notes server setupSumit Tambe
 
Introduction to oracle
Introduction to oracleIntroduction to oracle
Introduction to oracleSumit Tambe
 
Advanced dreamweaver
Advanced dreamweaverAdvanced dreamweaver
Advanced dreamweaverSumit Tambe
 
Birthday greeting 2009
Birthday greeting 2009Birthday greeting 2009
Birthday greeting 2009Sumit Tambe
 
Sql group functions(2)
Sql group functions(2)Sql group functions(2)
Sql group functions(2)Sumit Tambe
 
12.ibm r50 ibm wireless setup
12.ibm r50 ibm wireless setup12.ibm r50 ibm wireless setup
12.ibm r50 ibm wireless setupSumit Tambe
 
2123.a better waytoprint.universal print
2123.a better waytoprint.universal print2123.a better waytoprint.universal print
2123.a better waytoprint.universal printSumit Tambe
 

Viewers also liked (15)

Virtualization strategies
Virtualization strategiesVirtualization strategies
Virtualization strategies
 
Ms dos
Ms dosMs dos
Ms dos
 
Notes server setup
Notes server setupNotes server setup
Notes server setup
 
Introduction to oracle
Introduction to oracleIntroduction to oracle
Introduction to oracle
 
Advanced dreamweaver
Advanced dreamweaverAdvanced dreamweaver
Advanced dreamweaver
 
Birthday greeting 2009
Birthday greeting 2009Birthday greeting 2009
Birthday greeting 2009
 
Sql group functions(2)
Sql group functions(2)Sql group functions(2)
Sql group functions(2)
 
12.ibm r50 ibm wireless setup
12.ibm r50 ibm wireless setup12.ibm r50 ibm wireless setup
12.ibm r50 ibm wireless setup
 
Cos413day3
Cos413day3Cos413day3
Cos413day3
 
2123.a better waytoprint.universal print
2123.a better waytoprint.universal print2123.a better waytoprint.universal print
2123.a better waytoprint.universal print
 
Ccna2v3 mod07
Ccna2v3 mod07Ccna2v3 mod07
Ccna2v3 mod07
 
Jcc
JccJcc
Jcc
 
Ch1 2
Ch1 2Ch1 2
Ch1 2
 
Ch05
Ch05Ch05
Ch05
 
Java tut1
Java tut1Java tut1
Java tut1
 

Similar to Advanced dreamweaver

BITM3730 9-20.pptx
BITM3730 9-20.pptxBITM3730 9-20.pptx
BITM3730 9-20.pptxMattMarino13
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme KickstartPeter
 
BITM3730 9-19.pptx
BITM3730 9-19.pptxBITM3730 9-19.pptx
BITM3730 9-19.pptxMattMarino13
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyDenise Jacobs
 
Newbies guide to customizing word press themes 25
Newbies guide to customizing word press themes 25Newbies guide to customizing word press themes 25
Newbies guide to customizing word press themes 25New Tricks
 
BITM3730Week4.pptx
BITM3730Week4.pptxBITM3730Week4.pptx
BITM3730Week4.pptxMattMarino13
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSTJ Stalcup
 
basic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdfbasic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdfelayelily
 
BITM3730 9-26.pptx
BITM3730 9-26.pptxBITM3730 9-26.pptx
BITM3730 9-26.pptxMattMarino13
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopShay Howe
 
WebDev Simplified Day 1 ppt.ppt
WebDev Simplified Day 1 ppt.pptWebDev Simplified Day 1 ppt.ppt
WebDev Simplified Day 1 ppt.pptSarikaPurohit1
 
Css week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandourCss week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandourOsama Ghandour Geris
 
Make Css easy : easy tips for css
Make Css easy : easy tips for cssMake Css easy : easy tips for css
Make Css easy : easy tips for cssshabab shihan
 

Similar to Advanced dreamweaver (20)

Advanced dreamweaver
Advanced dreamweaverAdvanced dreamweaver
Advanced dreamweaver
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
BITM3730 9-20.pptx
BITM3730 9-20.pptxBITM3730 9-20.pptx
BITM3730 9-20.pptx
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme Kickstart
 
BITM3730 9-19.pptx
BITM3730 9-19.pptxBITM3730 9-19.pptx
BITM3730 9-19.pptx
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
 
Newbies guide to customizing word press themes 25
Newbies guide to customizing word press themes 25Newbies guide to customizing word press themes 25
Newbies guide to customizing word press themes 25
 
BITM3730Week4.pptx
BITM3730Week4.pptxBITM3730Week4.pptx
BITM3730Week4.pptx
 
Css
CssCss
Css
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
 
basic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdfbasic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdf
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
BITM3730 9-26.pptx
BITM3730 9-26.pptxBITM3730 9-26.pptx
BITM3730 9-26.pptx
 
Css Basics
Css BasicsCss Basics
Css Basics
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
 
WebDev Simplified Day 1 ppt.ppt
WebDev Simplified Day 1 ppt.pptWebDev Simplified Day 1 ppt.ppt
WebDev Simplified Day 1 ppt.ppt
 
Css week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandourCss week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandour
 
Make Css easy : easy tips for css
Make Css easy : easy tips for cssMake Css easy : easy tips for css
Make Css easy : easy tips for css
 
css v1 guru
css v1 gurucss v1 guru
css v1 guru
 

Recently uploaded

AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptxmary850239
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdfJayanti Pande
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsEugene Lysak
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptxraviapr7
 
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxSlides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxCapitolTechU
 
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...M56BOOKSTORE PRODUCT/SERVICE
 
Over the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptxOver the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptxraviapr7
 
How to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeHow to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeCeline George
 
Optical Fibre and It's Applications.pptx
Optical Fibre and It's Applications.pptxOptical Fibre and It's Applications.pptx
Optical Fibre and It's Applications.pptxPurva Nikam
 
A gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceA gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceApostolos Syropoulos
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17Celine George
 
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...Dr. Asif Anas
 
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTDR. SNEHA NAIR
 
Protein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxProtein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxvidhisharma994099
 
Vani Magazine - Quarterly Magazine of Seshadripuram Educational Trust
Vani Magazine - Quarterly Magazine of Seshadripuram Educational TrustVani Magazine - Quarterly Magazine of Seshadripuram Educational Trust
Vani Magazine - Quarterly Magazine of Seshadripuram Educational TrustSavipriya Raghavendra
 
Work Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sashaWork Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sashasashalaycock03
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 

Recently uploaded (20)

AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptx
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George Wells
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
 
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxSlides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
 
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
 
Over the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptxOver the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptx
 
How to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeHow to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using Code
 
Optical Fibre and It's Applications.pptx
Optical Fibre and It's Applications.pptxOptical Fibre and It's Applications.pptx
Optical Fibre and It's Applications.pptx
 
A gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceA gentle introduction to Artificial Intelligence
A gentle introduction to Artificial Intelligence
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17
 
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
 
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
 
Protein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxProtein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptx
 
Vani Magazine - Quarterly Magazine of Seshadripuram Educational Trust
Vani Magazine - Quarterly Magazine of Seshadripuram Educational TrustVani Magazine - Quarterly Magazine of Seshadripuram Educational Trust
Vani Magazine - Quarterly Magazine of Seshadripuram Educational Trust
 
Work Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sashaWork Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sasha
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 

Advanced dreamweaver

  • 1. Advanced Web Design Using Dreamweaver Robby Seitz 121 Powers Hall rseitz@olemiss.edu 662-915-7822
  • 2. Assumptions • You already understand HTML tags. • You can already use Dreamweaver. • You understand file name and folder location concepts. • You want to know more.
  • 3. Cascading Style Sheets • CSS is used to change the look or layout of HTML elements. The link element: • Links default to blue. • Visited links default to purple. • Active and hover links default to red. The style for each of these is redefinable!
  • 4. Cascading Style Sheets • Adding a style definition for the link element changes its appearance. a { font-weight: bold; color: green; border: 1px solid gold; background-color: #999966; padding-left: 5px; padding-right: 5px; }
  • 5. Cascading Style Sheets • CSS can also adjust only a particular aspect of some elements. a { font-weight: bold; color: green; border: 1px solid gold; background-color: #999966; padding-left: 5px; padding-right: 5px; } a:hover { color: black; background-color: red; }
  • 6. Cascading Style Sheets “Cascading” refers to the precedence of definitions for a given element. 1. Browser default 2. External style sheet 3. Internal style sheet (inside the <head>) 4. Inline style (inside the HTML element)
  • 7. Cascading Style Sheets There are four ways to impose a style on HTML elements: 1. By element tag name p {margin_top: 20px;} 2. By class attribute .column {border: 5px;} 3. By ID attribute #header {background-color: #ff0000;} 4. By style attribute style=“color:blue;” (within HTML tag)
  • 8. Dynamic & Reusable Content • What content is generated automatically? – Calendar events – RSS feeds – System-generated dates – Anything requiring programming • Which parts of the page will appear on other pages? Pull those parts out into separate files and include them wherever you want them: <!--#include virtual=“myfile.htm”-->
  • 9. Deconstructing the page • Identify dynamic content – Random photo – Calendar events listing – Date of last modification • Identify recurring parts – Header – Navigation – Footer – Stylesheet – Javascript www.olemiss.edu/working/maildemo/
  • 10. Start Your Dreamweavers! 1. Define your site: – Site / New Site – Select Advanced Tab – Local Info… • Site name: your name • Local root folder: My Documents/tacit – Remote Info… • Access: FTP • FTP host: cedar.olemiss.edu • Host directory: working • Login: maildemo • Password: tacit08 • Use Secure FTP (SFTP): Checked
  • 11. Define new page name 2. View Remote Files 3. Download the index.html file and the images folder from the server 4. View Local Files 5. Change its name to yourname.html 6. Upload new file name to server 7. View in browser at www.olemiss.edu/working/maildemo/yourname.html
  • 12. Customize it 8. Change “maintained by” name and save/upload the page again.
  • 13. Examine the CSS 9. The left menu mouseover action CSS #menu li a:hover, body#firstpage a#firstlink, body#secondpage a#secondlink, body#thirdpage a#thirdlink { background-color:#cc0000; color:#FFFFFF; } … HTML <body id=“firstpage”> … <div id="menu"> <ul> <li><a href="index.html" id="firstlink">First Link</a></li> <li><a href="index2.html" id="secondlink">Second Link</a></li> <li><a href="index3.html" id="thirdlink">Third Link</a></li> </ul>
  • 14. Customize the menu 10.Change the filenames to use your own filenames <ul> <li><a href=“yourname.html" id="firstlink">First Link</a></li> <li><a href=“yourname2.html" id="secondlink">Second Link</a></li> <li><a href=“yourname3.html" id="thirdlink">Third Link</a></li> </ul>
  • 15. Disassemble the page 11.Put the Header, Navigation, and Footer in separate files • yourname-head.htm • yourname-menu.htm • yourname-foot.htm 12.Include them in the original file: <!--#include virtual=“yourname-head.htm”--> (Note that this is a Server Side Include which your browser can only handle when viewing your page on a server.)
  • 16. Disassemble the page 13.Put the CSS in its own file so it can be shared by other pages. yourname-style.css <link rel="stylesheet" type="text/css" href=“yourname-style.css" /> 14.Do the same with the Javascript. yourname-javascript.js <script src="yourname-javascript.js" type="text/javascript"></script>
  • 17. Reassemble more pages 15.Change the <body> id to “secondpage” 16.Save/upload as yourname2.html 17.Change the <body> id to “thirdpage” 18.Save/upload as yourname3.html 19.View the files on the server and note how they work together.
  • 18. Tips • Never put spaces in Web filenames. Spaces get converted to “%20” text, and browsers hate them. • Make sure all random photos are exactly the same size. Page layout usually adapts to photo size. • Keep images in a separate folder. Just a good housekeeping rule. • Keep content current. If people wanted to see old information, they’d look on a printed piece.