MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a...
-
Upload
alannah-hines -
Category
Documents
-
view
213 -
download
1
Transcript of MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a...
![Page 1: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/1.jpg)
MIS 201
Web Design
![Page 2: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/2.jpg)
Website PlanningBefore even considering the practical aspects of creating a website, there are some important fundamental questions you need to ask yourself first What are we hoping to achieve? Who's our target audience? What catergory, if any, does our site fall into:
ecommerce, informational, educational, social networking, etc.
How visually exciting does it need to be to be effective?
What tone do we want our content to convey, could it be serious or witty, complex or simple?
![Page 3: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/3.jpg)
Site Content & Information StructureProbably the most important aspect of website
'structural design' is how you breakdown the content into logical sections (Main Areas, Pages, Headers, Sub-Headers, Lists, etc). You need to create a strong hierarchy for the site and breakdown content into small units.
It is a good idea to create a graphical schema/flowchart/sitemap for the site. This can help you visualise a logical hierarchy.
![Page 4: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/4.jpg)
![Page 5: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/5.jpg)
Create a folder on your computer called website1 to hold all web pages and graphics. (example of what your link will look like when you set it up later: map.jpg)
Optional: inside of the website1 folder create a folder called images to hold your graphics.
(
All folders, webpages, and graphic names must be lowercase, no spaces, and no special characters for ease of linking later.
Getting Start
![Page 6: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/6.jpg)
Launch DreamweaverSelect HTML
![Page 7: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/7.jpg)
New Page Appears
![Page 8: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/8.jpg)
Or Select File>New
![Page 9: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/9.jpg)
Select HTML, Create
![Page 10: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/10.jpg)
Window>Insert, Properties, Files Have a Check Mark When Active
![Page 11: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/11.jpg)
Setting Up a New Website
Window>Files Checked You Will See The Files Palette on the Right
![Page 12: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/12.jpg)
From the Pop Up Files Palette Window: Select Manage Sites
![Page 13: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/13.jpg)
Select The New Button>Site
![Page 14: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/14.jpg)
Set the New Site Definitions1. Name Your Webpage
2. Click on the Folder Icon & Locate the website1 folder
3. Click on the Folder Icon & Locate the images folder inside of the website1 folder
12
3
4
![Page 15: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/15.jpg)
The File Structure You Created
![Page 16: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/16.jpg)
Begin Creating the index.html main webpage
![Page 17: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/17.jpg)
Modify>Page Properties
![Page 18: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/18.jpg)
Appearance, SetFont, Text, Background Color
![Page 19: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/19.jpg)
Links, Set Link, Visited Link Colors
![Page 20: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/20.jpg)
Click the Curser on the Page, Select Alignment, Type in Text
Window> Properties
Center Alignment Button
![Page 21: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/21.jpg)
Highlight Text, Select Ariel Font
Window> Properties
Font Pop-up Menu
![Page 22: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/22.jpg)
Highlight Text, & Select the Title Format Size
Window> Properties
Pop-up Format for Title Heading Size: Example 2
![Page 23: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/23.jpg)
Or to Create a Title With a Graphic: Insert>Table or Select Table Icon
Tables control object placement
![Page 24: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/24.jpg)
Set Row, Column, Table Width, Border, OK
Title Example:
1 Row
2 Columns
![Page 25: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/25.jpg)
Adjust Column Widths
Drag Table Column Line Left or Right to Adjust the Width
![Page 26: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/26.jpg)
Before Adding Graphic Images go to File>Save As>name your file
Remember to use all lowercase letters, no spaces or special characters
![Page 27: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/27.jpg)
Click in the Left Cell, Insert>Image, or use the Image Icon, Locate .gif or .jpg File
Window>Insert Menu
To Insert Logo or Graphic in a Header
![Page 28: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/28.jpg)
Click in the Right Cell & Type to Add the Title
![Page 29: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/29.jpg)
Select the Table, Select BG to Add a Background Cell Color
Window> Properties Menu
![Page 30: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/30.jpg)
To Make Border Invisible, Select Table, Set Border to 0
Window> Properties Menu
Select Edge of Table
![Page 31: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/31.jpg)
To Add Navigation Table, Insert>Table or Table Icon
1 Row
7 Columns Maximum
![Page 32: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/32.jpg)
Click Inside of the First Cell to Add a Flash Navigation Button
![Page 33: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/33.jpg)
Insert>Media>Flash Button
![Page 34: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/34.jpg)
Button Settings: Style, Text, Font, Link, Size, Apply, OK
Remember when uploading your website to the server to add your .swf Flash buttons you created
![Page 35: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/35.jpg)
Repeat to Add All Buttons
If you need to edit the button after has been created or to check the links just double click on the button again, change the features, Apply, OK.
![Page 36: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/36.jpg)
Example of Completed Title & Navigation Buttons
You May Have Different Titles For Your Navigation Buttons
![Page 37: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/37.jpg)
External Links: Type Text & Highlight, Type in Link URL & Press Return Key
http://www.google.com
![Page 38: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/38.jpg)
Internal Links: Type Text & Highlight, Type in Link URL & Press Return Key
index.html
![Page 39: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/39.jpg)
E-Mail Links: Type Text & Highlight, Type in Link URL & Press Return Key
![Page 40: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/40.jpg)
Inserting Graphics and Textin Tables
•Control placement of elements in relation to each other•Specify amount of space between each page element•Always plan how your table will look with all the text and graphics in it
•Even a rough sketch will save you time
![Page 41: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/41.jpg)
Click in the Left Cell, Select Insert>Image or Image Icon
Locate Graphic Image:
.gif
.jpg
Choose
![Page 42: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/42.jpg)
Click in the Right Cell & Add Your Text
May Need to Adjust Column Width
Adjust Font to Ariel
![Page 43: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/43.jpg)
Anchors Are Used to Jump Down on a Long Page of Text
![Page 44: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/44.jpg)
Highlight Word, In the Link Box Type in #name
#august
![Page 45: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/45.jpg)
Highlight Text to Link To, Insert>Named Anchor
![Page 46: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/46.jpg)
Type in Exact Name Match, Example: august, OK
![Page 47: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/47.jpg)
Notice the Yellow Anchor,This Will Not Show When Posted
![Page 48: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/48.jpg)
File>Save As, Provide Name & Location
Example
index.html
or
standards.html
![Page 49: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/49.jpg)
Can Duplicate PagesOnce the index.html page is set up as desired
with the logo, header, and navigation buttons it can serve as a template for creating new
pages.
Just be sure to save each new page with new name.
![Page 50: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/50.jpg)
File>Preview in Browser>Select the desired browser
![Page 51: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/51.jpg)
Notice How the Browser Opens in Front To Preview What it Will Look Like When Uploaded to the Server
When Finished Viewing Browser Red Button Close
![Page 52: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/52.jpg)
Optional: File>Preview in Browser>Edit Browser List
![Page 53: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/53.jpg)
For Selecting Primary & Secondary Browser Choices
![Page 54: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/54.jpg)
Viewing Options: HTML Code
![Page 55: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/55.jpg)
Viewing Options: Split Code & Design
You Can Highlight Areas in Design Mode & See It in Code
![Page 56: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/56.jpg)
Viewing Options: DesignFor Creating & Editing Web Pages
![Page 57: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/57.jpg)
File>Save As, Provide Name & Location
Example
index.html
or
standards.html
![Page 58: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/58.jpg)
New Folder: website1 (save webpage files inside of the folder)
website1
website2
website3
website4
website5
Reminder: Lowercase, No Spaces, No Special Characters
![Page 59: MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.](https://reader035.fdocuments.in/reader035/viewer/2022070407/56649e315503460f94b22cae/html5/thumbnails/59.jpg)
Example of Files in Your website1 folder
Must Have a Main Page Named index.html
Your page names may be different from this example & will be an exact name match to your navigation buttons