Download Slides Developing a Web Page

Chapter 2
Developing a Web Page
Creating Head Content and Setting
Page Properties
• A web page is composed of two distinct
sections:
– The head content
– The body
Creating Head Content and Setting
Page Properties
• The head content includes the page title
that appears in the title bar of the browser
and meta tags.
• The body is the part of the page that
appears in a browser window. It contains
all the page content that is visible to users,
such as text, images, and links.
Creating Head Content and Setting
Page Properties
• Meta tags are HTML code that include
information about the page, such as
keywords and descriptions.
• Keywords are words that relate to the
content of the website.
• A description is a short paragraph that
describes the content and features of the
website.
Creating Head Content and Setting
Page Properties
• The background color is the color that
fills the entire page and should
complement the colors used for text, links,
and images on the page.
Creating Head Content and Setting
Page Properties
• A CSS layout block is a section of a web
page that is defined and formatted using a
Cascading Style Sheet, a set of formatting
characteristics you can apply to text, links,
and other page objects.
Creating Head Content and Setting
Page Properties
• The default font and default link colors
are the colors used by the browser to
display text, links, and visited links.
Creating Head Content and Setting
Page Properties
• The default color for unvisited links, or
links that the user has not clicked yet, is
blue. Unvisited links are usually called
links.
• The default color for visited links, or links
that have been previously clicked, is
purple.
Creating Head Content and Setting
Page Properties
• You can choose from three color notation
schemes for your web pages:
– RGBa
– HEX
– HSLa
• You select color choices using the color
picker.
Creating Head Content and Setting
Page Properties
Color picker showing
color modes
Selected color is
#FFFFFF (white)
Available color modes
Creating, Importing, and Formatting
Text
• Most information in web pages is
presented in the form of text.
• You can type text directly on a page in
Dreamweaver, import, or copy and paste it
from another software program.
Creating, Importing, and Formatting
Text
• Dreamweaver will preserve formatting and
generate clean HTML code.
• Clean HTML code is code that does what
it is supposed to do without using
unnecessary instructions, which take up
memory.
Creating, Importing, and Formatting
Text
• To avoid font compatibility and accessibly
issues, you can use TypeKit, a company
acquired by Adobe in 2011, that provides
access to web fonts through the Adobe
Creative Cloud.
• TypeKit offers fonts called Adobe Edge Web
fonts though a subscription-based service
that can be read correctly by all browsers and
devices.
Creating, Importing, and Formatting
Text
• TypeKit is part of your Creative Cloud
subscription and Creative Cloud users
have access to most of the fonts on
TypeKit at no additional charge.
Creating, Importing, and Formatting
Text
• The way fonts are rendered (drawn) on
the screen differs because Windows and
Macintosh computers use different
technologies to render them.
• If you are not using embedded fonts, it is
wise to stick to the standard fonts that
work well with both systems.
Creating, Importing, and Formatting
Text
• Text in your website should be attractive
and easy to read.
• Previously web designers used the
Property inspector to apply formatting
attributes, such as font type, size, color,
alignment, and indents, thus creating
HTML tags.
Creating, Importing, and Formatting
Text
• Tags are the parts of the code that specify
the appearance for all page content when
viewed in a browser.
Creating, Importing, and Formatting
Text
• Creating Cascading Style Sheets (CSS)
is the preferred method to format and
place web elements.
• CSS are sets of formatting attributes that
you use to format web pages to provide a
consistent presentation for content across
the site.
Creating, Importing, and Formatting
Text
• Cascading Style Sheets make it easy to
separate page content from the page
design.
• They are sets of formatting attributes that
you use to format web pages to provide a
consistent presentation for content across
the site.
Creating, Importing, and Formatting
Text
• Separating content from design is
preferable because editing content and
formatting content are two separate tasks.
• When you use CSS styles, you can update
or change the page content without
disturbing the page formatting.
Creating, Importing, and Formatting
Text
• A Font-combination is a set of font
choices that specify which fonts a browser
should use to display the text on your web
page.
• TypeKit has greatly expanded your font
choices with the ability to embed new fonts
into web pages.
Creating, Importing, and Formatting
Text
• There are two ways to change the size of
text using the Property inspector:
1. Select a numerical value for the size from 9
to 36 pixels.
2. Use a size expressed in words from xx-small
to larger.
Creating, Importing, and Formatting
Text
• The HTML Property inspector lets you
format blocks of text as paragraphs or as
different sizes of headings.
• You can format paragraphs as headings or
align paragraphs using the alignment
button.
Adding Links to Web Pages
• When you create links on a web page, it is
important to avoid broken links, or links
that cannot find their intended
destinations.
• You should provide a point of contact, or
a place on a web page that provides users
with a means of contacting the company.
Adding Links to Web Pages
• A common point of contact is a mailto:
link, which is an email address that users
with questions or problems can use to
contact someone at the company’s
headquarters.
Adding Links to Web Pages
mailto: link on the Property inspector
mailto: link
Adding Links to Web Pages
• A menu bar, or navigation bar, is an area
on a web page that contains links to the
main pages of a website.
Adding Links to Web Pages
• A rollover is when a user moves a mouse
pointer over each main link, displaying
additional links.
Adding Links to Web Pages
Additional
links appear
when mouse
pointer rolls
over a main
link
The CIA website
Adding Links to Web Pages
• The WCAG guidelines list ways to ensure
that all users can successfully and easily
navigate a website.
• It states: “Provide ways to help users
navigate, find content, and determine
where they are.”
Adding Links to Web Pages
• Suggestions include:
– limiting the number of links on a page
– using techniques to allow users to quickly
access different sections of a page
– making sure that links are readable and easily
distinguishable
Using the History Panel and Editing
Code
• The History panel records each editing
and formatting task you perform and
displays them in a list in the order in which
you completed them.
Using the History Panel and Editing
Code
• Each task listed in the History panel is
called a step.
• You can drag the slider on the left side of
the History panel to undo or redo steps.
Using the History Panel and Editing
Code
Click in the bar
next to a step to
undo to that step
Drag slider to
undo steps
The History panel
Using the History Panel and Editing
Code
• By default, the History panel records 20
steps, but you can change the number of
steps in the General category of the
Preferences dialog box.
• However, keep in mind that setting this
number too high will require additional
memory and could affect Dreamweaver’s
performance.
Using the History Panel and Editing
Code
• You can view the code in Dreamweaver
using Code view, Code and Design views,
or the Code Inspector.
• The Code Inspector is a separate window
that displays the current page in Code
view.
Using the History Panel and Editing
Code
• The advantage of using the Code
Inspector is that you can see a full-screen
view of your page in Design view while
viewing the underlying code in a floating
window that you can resize and position
wherever you want.
Using the History Panel and Editing
Code
The Code Inspector
Code
displayed in
the Code
Inspector
Page displayed in Design view
behind the Code Inspector
Selected text with corresponding code
Using the History Panel and Editing
Code
• A JavaScript function is a block of code
that adds dynamic content such as
rollovers or interactive forms to a web
page.
• A rollover is a special effect that changes
the appearance of an object when the
mouse moves over it.
Modifying and Testing Web Pages
• As you add and modify pages, test each
page as part of the development process.
• The best way to test a web page is to
preview it in Live view or in a browser to
make sure that all text and image
elements appear the way you expect them
to.
Modifying and Testing Web Pages
• You should also test your links to make
sure they work properly.
Modifying and Testing Web Pages
• It is important to design your pages so that
all browsers and screen sizes can display
them well.
• You should test your pages using different
browsers and a wide variety of screen
sizes to ensure the best view of your page
by the most people possible.
Modifying and Testing Web Pages
• Most websites today are written using
responsive design.
• Responsive design means using style
sheets to control how pages look on
different devices.
Modifying and Testing Web
Pages
Comparing a desktop design to a mobile design
Banners
use
different
images
Desktop design
Mobile device
Modifying and Testing Web Pages
• With the Dreamweaver Fluid Grid Layouts,
you can use percents rather than specific
measurements to control how large or
small page elements appear, depending
on the device it is viewed on.
Modifying and Testing Web Pages
• It is poor design practice not to provide
pages that can be viewed and navigated
easily whatever size screen is used.
Modifying and Testing Web Pages
• Style sheets are used with Media Queries
to identify which device is calling up the
page, then apply the appropriate code for
optimum viewing.
Modifying and Testing Web Pages
• When Fluid Grid Layouts and Media
Queries are used to create pages, the
designer can determine the values to use
for each layout:
– Mobile
– Tablet
– Desktop
Modifying and Testing Web Pages
• One style sheet controls the styles for all
three devices by providing separate sets
of styles for each device.