Transcript Introduction to Web Page Design

Introduction to Web Page
Design
INSTRUCTIONAL SUPPORT SERVICES
(ISS)
SHORT COURSE, FALL 2013
UMSL
An Overview…
 Know Uniform Resource Locator (URL), Web
Browsers/Servers
 Web Design Software
 Designing a Simple Web Page:





Add font and size to enhance text appearance.
Create unnumbered and numbered lists.
How to create tables and its advantages & disadvantages
Placing images in your webpage
Helpful web designing tips
Browsers, HTML, and URL
 Purpose of a Browser:
 It must be able to communicate to the server using the specific
language of that server. Ex: HTTP protocol, FTP
 Hyper Text Markup Language (HTML) – contains
the basic structure of a web page.
 Popular Browsers: Internet Explorer, Firefox, Safari,
Google Chrome, etc.
 Uniform Resource Locator (URL) – a pointer
location to data on a webpage. Ex: http://umsl.edu/
Applications
Applications Available
at UMSL:




Notepad
Microsoft Word
Kompozer
Dreamweaver CS5
Dreamweaver CS5
 The majority of today’s course will cover web
designing using Adobe Dreamweaver CS5.
Steps to Creating Your First Web Page
Creating Folders
2. Location of Dreamweaver
3. Naming a Site & Home Page File
4. Creating the Web Page
1.
Horizontal Rule
Inserting Images
Tables
Internal + External Hyperlinks
Text
1.
2.
3.
4.
5.
1.
2.
Styling with Page Properties
Styling with CSS
Steps to Creating Your First Web Page
 Public_html:

A folder in your K-drive in which your html files and all other files
(such as images) are kept if you choose to use UMSL’s server.
 Creating Folders:
1.
Create a central folder to contain all your files related to this
webpage.
 Where is Dreamweaver located?


Start (task bar)  All Programs  Internet & Web Publishing 
Dream Weaver  Adobe Dreamweaver CS5
…Start (task bar)  just type in “Dreamweaver” in the search box!
Menu
Design
space.
Page
Properties
Side tabs
for CSS &
Internal
Site
Location
Steps to Creating Your First Web Page Cont…
 Naming a Site and Home
Page File
1.
2.
3.
4.
5.
Choose the “HTML” option
under “Create New”.
Under the “Site” menu,
choose “New Site”.
In the site tab, name your site
and choose the local site
folder.
“Advanced Settings” tab 
“Local Info”  Default
Images Folder.
Name your new file as
“index.html”.
Creating the Web Page
 Choose a Background Color:


Click “Page Properties” button on the Properties bar on the bottom of
your screen.
In the appearance category, choose a background color/image of
your choice.
 Make a Heading & Set Size:

Type the text “All About Web Design!” at the top of your workspace.
 Add a Horizontal Rule:




Start this on a new line.
Go to “Insert Menu”  “HTML”  “Horizontal Line”
Double click the horizontal line.
Under the “<hr>” properties, adjust the width, height, and alignment
according to your preference.
Importing Word Document
Open the file “Beginner’s Instructions”
2. In Dreamweaver, go to File  Import  from
Word Document.
1.
Inserting Images
Image:
1. Insert an image after “What Can You Do with
Dreamweaver” text.
2. Insert Menu  Image
3. Browse the assets folder, and choose the image
“Dreamweaver.jpg”.
4. In the “Image Tag Accessibility Attributes”, give a 1-3
word description of the image in the Alternative Text.
5. Click on the image in design view.
6. Under properties, choose “Default” or “Left
Alignment”.
External Hyperlinks
1.
2.
3.
4.
5.
Add this sentence at the very bottom of the page:
"For more information, visit the W3School’s site."
Highlight "W3Schools".
Under the properties bar, ensure that "HTML" is
selected.
Copy and paste the site's url on the link drop down
menu and press ENTER.
Under the target drop down menu, click "_new"
Creating a Table
 Applications for Tables
 Organization of Information
 Layout Design

Nested Tables
 Create a new web page called “tags.html”.
 Insert  Table  choose 5 rows x 2 columns; choose
the “Header” option.
 Add the tags text in the left column and the
description on the right.
Internal Hyperlinks
Links the main home page to another page internally,
within the same site. Go to “index.html”
1. Copy and paste the text: “Click here for some
insightful HTML tag info here” below the external
hyperlink + text.
2. Highlight “here”.
3. In the HTML properties, click on the browse icon
(looks like a folder).
4. Browse for the file “tags.html” and choose Ok.
5. Save and check your work on the browser.
Styling with Page Properties…
Bullet Points/Regular Text
1. Highlight the entire text under "What is a website"
subheading.
2. Make sure that HTML is selected under Page
Properties.
3. Under the “Format” drop down menu, choose
Heading 3.
4. Repeat the same steps for the remaining
body/bullet point text.
Using Cascading Style Sheets
What is CSS?
 Cascading Style Sheets – styles that describe how
HTML elements should be displayed.
 Saves a whole lot of work for web developers.
 External style sheets – edit only one file, which
enables the developer to alter the layout of the web
site.
 Files saved as .css.
Info from Learn CSS with w3schools
Styling with CSS
Main Heading “All About Web Design”
1. Highlight the text "All About Web Design!"
2. Ensure that "<p>" is selected.
3. Under the properties bar, select "CSS".
4. Click "Edit Rule"
5. Name this "Main_heading" and click "Ok".
6. Under the type category, choose any font family,
font size, and style of your choice.
7. Click Ok.
Creating Unordered Lists
 Under “What can you do with Dreamweaver?”, there
are three items which can be converted into bullet
points.
 Select the three points.
 Ensure that HTML is selected under properties.
 Click on the unordered list icon.
Creating Ordered Lists
 Under “Dreamweaver Layouts”, there are three items
that can be converted into an ordered list.
 Ensure that HTML is selected under Properties.
 Highlight “Design”, “Code”, and “Split”.
 Choose the Ordered List icon.
Adding Email Link
After “For more information…”, hit
Enter.
2. Then type in: “For questions or concerns,
contact the webmaster.”
3. Highlight “Webmaster”
4. Insert Menu  Email Link
1.
Type email address here.
5.
Click Ok
Other HTML Characters
 Insert  HTML  Special Characters
 Special Characters: Trademark, Copyright, Registered,
Currency, Left & Right Blocks
 Insert  HTML  Text Objects
 Text Objects: Font, Bold, Italic, Emphasize, Strong, Paragraph,
Block Quote, Unordered/Ordered List, H1/H2/H3, Definition,
Abbreviation, Acronym.
Extras: Advanced Dreamweaver Objects
 Spry
 Spry Navigation:
Offers a creative and interactive way to display navigation links.
 Create sub-links.


Spry Form Objects: Text Area, Text Field, etc.
 Widgets
 Add-ins that must be downloaded from Adobe website.
 Free if you have Dreamweaver.
 Ability to add unique, interactive & multimedia tools such as
Google Maps, YouTube, Facebook Like Button, Adding
Columns, HTML 5 Video Player, and many more!
Other Ways to Create Web Pages through
Dreamweaver…
 Tables – useful for simple webpages.
<Banner Here>
N
a
v
i
g
a
t
i
o
n
Main Body of Site
Copyright & Webmaster Info
Other Ways to Create Web Pages through
Dreamweaver…
 Frames
 Divides the webpage into multiple sections.
 More complex, but allows for better organization and
interactivity.
 Each section is a separate file, all linked to index.html.
 Insert  HTML  Frames
 Types of Frames: Left, Right, Top, Bottom, Bottom Nested
Left, Bottom Nested Right, and many more.
Other Ways to Create Web Pages through
Dreamweaver…
Dreamweaver’s Templates (consists of div tags)


File  New
Choose a predesigned
template.
An Insight into Intermediate Dreamweaver Class
 Creating Form Content
 Importing Files from Word and Excel
 Creative Navigation Bar
 …and more…
Helpful Resources for Web Designing
 http://w3schools.com/
Sources:
 Teach Yourself Web Publishing with HTML 3.0
 Dreamweaver CS4: The Missing Manual
 Learn CSS with w3schools