Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the...
-
Upload
phillip-johns -
Category
Documents
-
view
217 -
download
0
Transcript of Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the...
![Page 1: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/1.jpg)
Chapter 18Web Design
April 16th & 17th
![Page 2: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/2.jpg)
Content
• The most essential element of any Web page is the content
• Before you begin a Web page you want to know exactly what content will be on that page
• On the opening pages keep the text concise; more extensive information should be placed on later pages
![Page 3: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/3.jpg)
Content Cont.
• When creating a Web page you should constantly use the spell checker option.– This will only be found when you are
using a Web Editor such as FrontPage.
• Spelling & grammar is to be considered as important as the information you are delivering
![Page 4: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/4.jpg)
Consistency
• Well-designed pages have simplicity as their basic structure.
• Consistency of design is one way to make it easy for your audience to find what it is seeking on your page
![Page 5: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/5.jpg)
Navigation
• Navigation links are the means of guiding a visitor to a Web site from one page in the site to other pages
![Page 6: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/6.jpg)
Image Maps
• An image map is a graphic divided into two or more parts, each part is assigned a different link.– Example: A pet store Website has
different pictures of dogs, and by clicking on each dog allows you to go to another site that details that specific breed.
• Image maps don’t have to be a picture– They can be a simple graphic with a
variety of words listed.
![Page 7: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/7.jpg)
Creating Lists
• Bulleted List Tags Include:– <ul> </ul>
• defines the start and the end of a bulleted list
– <li></li> • defines the start and end of an item
![Page 8: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/8.jpg)
Design Differences
• Tables– Creating columns is not possible in
HTML code because text spans the width of the screen
– Tables, however, can be used to create the appearance of columns
– They also provide spacing options for images.
![Page 9: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/9.jpg)
Tables
• Table tags include:– <table> </table>
• creates a table
– <th></th> • creates a table header, which is a cell with
bold, centered text in the 1st row of the table
– <tr></tr> • defines the start and end of a table row
– <td></td> • defines the start and end of a table data cell
![Page 10: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/10.jpg)
Design Differences Cont.
• Fonts– Font sizes can be set on a numbering
system from 1-7. The use of numbers allows the computer to enlarge the font proportionally.
– When selecting font color you want to select both font & background colors that offer high contrast, making them easy to read
![Page 11: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/11.jpg)
Hyperlinks
• A hyperlink, also called a link, is text displayed in a browser window that can be clicked to display a different HTML document in the browser window.
• Displayed as blue underlined text in the browser window
• The anchor tag (</a>) is used in an HTML document to mark text that is a link
![Page 12: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/12.jpg)
Color
• When choosing which category will work best, your choice should be 216 Web-safe colors, even though this is limiting, it helps guarantee that all colors will be seen by all users
• Colors are identified with HTML code– The hexadecimal number is generally
provided by most graphic programs
![Page 13: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/13.jpg)
Basic Color Rules
• Blue is relaxing & a popular choice• Red is visible & powerful• Purple gives a sense of importance
to a page• Yellow & green are well received• Brown can be used to simulate
leather or a wood finish, providing a sense of dignity
![Page 14: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/14.jpg)
Images
• Images can include JPEG, GIF graphics, bullets, flash files, & video
• A standard technique when using large images is to create thumbnails– Thumbnails are smaller versions of a
larger image. They can be clicked on to reveal the full-size image.
![Page 15: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/15.jpg)
Scrolling Marquees
• Marquees run text across the page• Even though they are text they are
treated more like graphics because animation is involved
![Page 16: Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.](https://reader035.fdocuments.in/reader035/viewer/2022081809/56649e3f5503460f94b2fa23/html5/thumbnails/16.jpg)
Assignment
• Chapter 18 Review – (#’s 1-15, Q&A) page 209
• Chapter 18 Discussion Questions– (#’s 1 & 5) page 209