The basic idea behind good web design is to partition your web page into various sections and columns to give it a professional allure and to make it user friendly. Creating a template that you can use on all your web pages to give it a familiar look every time a visitor goes to a different part of your site. › A website should be like your home in that you want visitors to feel welcome and at ease throughout their stay. › You don't want them completely disoriented and wondering where they are the minute they decide move around, i.e. move to another page on your site. Creating a header section that runs across the top of your page in order to designate a prominent place for your website logo, slogan, cool graphic or whatever. The top of your web page is prime real estate in web design terms and has the greatest impact on your visitors. You want to make sure that you use this space wisely. Creating multiple columns that clearly divide your web page into various logical sections such as: › A menu column containing your navigation or a list of links to other pages on your website. This will help your visitors get around regardless of what page they are on. › A main content column (such as that which holds the text you are currently reading). This column renders the main text and graphics which define what your web page is about. This should be kept narrow enough to facilitate easy reading. A computer screen is typically much wider than a page in a book or a column in a newspaper or magazine. Lots of text spanning across the entire screen quickly becomes tiresome to read and comprehend. Creating a footer section to hold copyright information and important links. This helps to create a visual ending to your web page and can help direct visitors to other important sections of your website. A template is a common structure of a web site that most of your web pages use. Usually web sites follow a standard structure › You would have a header, a navigation bar and a footer that is common to all your pages. › Imagine that your site has 25 pages. If you need to make one small change, let's say adding a new link, you would need to go to each of those 25 pages and change it manually. › By using a template you only need to change it in the template and all the pages get updated automatically. Tables are a series of rows (horizontal) and columns (vertical) that allow you to organize your website in a clear and coherent manner. Tables are, in part, an effective way to design web pages, because they mimic the design of a newspaper Rows › A row is a line of horizontal table cells. › A row may have one cell or many. › The widths of cells in each row plus any cell spaces must equal and never exceed the width of the table in which they reside. › Example: if a table is 600 pixels wide, the width of the cells and cell spaces, when added together, must not exceed 600 pixels. › A row will be as tall as the tallest cell in the row Columns › A column is a line of vertical table cells. › A column may have one cell or many. › A column will be as wide as the widest cell in the column Cell Padding › Cell padding is space between the cell wall and the content within the cell Cell Spacing › Cell spacing is the space between cells Table Stacking › That is when tables are stacked one above the other. › For instance, you may have a table for the header of your site, a table for the body, and a table for the footer Nested Tables › Nested tables are tables within tables. › This should be used sparingly. Nesting tables beyond two or three deep generates copious amounts of HTML code, making the web page slow to load and HTML troubleshooting very difficult. What is the best way to set table attributes such as width and height? › Always set table and cell widths in Dreamweaver's Properties Inspector. › Never drag table or cell walls. This can mess up table math. › It is not necessary to set table or cell heights. How do I get my page to fill the whole monitor screen and how do I get my page to shrink and expand with different resolutions? › This is what is commonly referred to as liquid design. › It is achieved by setting table widths with percentages rather than pixels. › A table set 100% wide will fill the monitor screen width regardless of resolution. A table set 90% wide will fill 90% of the width of the space, etc. This applies to any space wherein a table resides, whether it be a web page or another table's cell (nesting). Can I mix pixel widths and percentages for my table's cell widths? › Yes. This is appropriate when static columns are needed for a navigation bar, a gutter between columns of text, or various other applications. Keep in mind that at least one column in the table must have a width set with percentages. The percentage widths in each row must add up to equal 100% even if the table width is set at less than 100%. How wide can I make my site so it is viewable at all resolutions with no side-to-side scroll? › To accommodate 800x600, the design should be approximately 770 pixels wide. Even if you are using liquid design or percentages for your widths, remember that the content, such as images, in each row, cannot exceed combined widths of approximately 770 pixels. If the monitor resolution is set at 800 pixels wide, why design at a width of 760? › We have to allow for the edges of the browser and the scroll bar. Which are better, liquid or static designs? › Neither. There are uses for both. › The first consideration is individual taste. › Many do not like the appearance of static sites that appear narrow with lots of page background showing at small resolutions. › Another consideration is the amount of content to be placed in a website. › If the pages will have a small amount of content, they could look bare and incomplete at small resolutions sitting in tables set at 100%. Why do my tables look different in different browsers? › Different browsers read code differently. › This applies to tables, too. › Be sure to test in at least IE and Firefox, and preferably a third browser as well. There are two different types of hyperlinks that can be in a webpage- absolute and relative. An absolute link is a hyperlink that goes to an outside website or URL (Uniform Resource Locator) in the same manner as if you had typed it into the address bar. A relative link is a hyperlink that links to another page within your website Hyperlinks should be clear and concise The user should know where they are going when they click on the link › Links should not be Click Here or Click Me with no clue as to where they will end up Be careful when using images as links. Again, there should be clarity as to what will happen when the user clicks on it. If something atypical is going to occur, let the user know it is going to happen. There is a third type of link which is the mailto link This type of link is a special case, completely different to those described in the previous slide Instead of linking to a place on the internet, clicking this link causes the user's computer to open it's default email program (e.g. Outlook Express, Eudora, etc) and prepare a blank email to the specified address. › The user then enters their message and sends the email in the normal way.
Pages to are hidden for
"Graphic Web Design"Please download to view full document