Basic Web Design

Tutorials


What is Dreamweaver?, video by Adobe – Go to it now!
Anatomy of a website by Adobe – Go to it now!
HTML tutorial by Adobe – Go to it now!
 Layout web pages with CSS, tutorial by Adobe – Go to it now!
Style web elements with CSS, tutorial by Adobe – Go to it now!
Style web text with CSS, tutorial by Adobe – Go to it now!
How to make hyperlink, tutorial by Adobe – Go to it now!
Learn how to make a responsive web page – Go to it now!
Full list of tutorials for Adobe Dreamweaver CC – Go to it now!

Related Pages
Getting started with HTML
Getting started with CSS
View basic HTML page with no CSS
View HTML page with CSS styling, created with Bootstrap in Adobe Dreamweaver CC

Basic Web Design

Web Design – Before you get started
Take a moment to think about requirement for your website before you start designing.

Here’s a few things to think about:
• What is the purpose of the website?
Is this for promoting your career or finding a job, education, starting a business (product or service), entertainment, news, selling online?
Check out the competition online at Google or use another search engine.  Enter key words and see what looks great and what you might improve one to make your site great!
• Who is the audience?
Is your target prospective employers or clients, men, women, children, seniors, professional or a specific hobby or group of people?
• How do they get here? 
Will your visitors to your site be on mobile devices, tablets, laptops or desktop computers when they are searching for your?  You will make sure you have a great mobile layout as well as a laptop or desktop.  In the past this would be difficult, but now layouts easily convert to mobile to desktop with responsive or fluid layout design.  

It’s good to know what the most popular web browser are being used.  Find out more about browsers, trends in resolutions and color  and web page layout at w3school.com.

Sketching a web design
Working with thumbnails, sketches
Many web designers sketch out pages they will need for their project, starting with the home page and others, such as about, contact, resume and more.

webpagethumbnails

As simple as this seems or you might think it’s not needed, it good to have an idea how many pages will be need for the website.  Don’t be come overwhelmed just yet, as the general method of creating pages usually starts with making one page as a template, and actually copying it, then modifying it for the rest of the site.

Webpagewireframe

Responsive Design

ResponsiveDesigndevices

This is an example of a responsive web design from w3schools.com.

Responsive Design – Responsive web design makes it easy for web browser, like Safari, to view a website on a mobile, tablet and desktop computer.

History of Responsive Design – “The term responsive web design was coined, in a book of the same name (2011), by a Boston-based web developer named Ethan Marcotte; he describes the notion of designing pages that can adapt to multiple screen dimensions automatically.” 
From Adobe Dreamweaver CC, 2015, page 107, by Jim Maivald.

Viewport  – The viewport is simple the space or screen you view a website from mobile device, tablet, laptop or desktop.  HTML5 introduced a method to let web designers take control over the viewport, through the tag using a simple viewport code. The viewport allows devices to view the web page at 100 percent. Lean more about viewports!

The viewport code
This is the amazing code that will make a web page readable from a mobile device, tablet to laptop or desktop:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Responsive design images  – Max Width Code
Images will need special attention and code to make sure they respond to the different viewports or devices. Learn more about responsive images at w3schools.com

Responsive videos – Get Code
Visit my GitHub site for HTML and CSS code for making your YouTube videos responsive.  (Means your embedded video will adjust for all devices.)

Navigation – Responsive
Your navigation needs to be responsive also!
Responsive horizontal navigation
Responsive vertical or sidebar navigation
Drop down navigation

Creating a web page – Essentials

Think about the main area you will need for content on a page.  Look at examples of website that you like.

  1. Header – Banner and logo
  2. Footer – Copyright info, important links, possibly social media, if not in another location or a secondary navigation.
  3. Horizontal or vertical navigation – Menu for visitors finding your important pages, such as home, about, contact and more.
  4. Main Content – This is one column or maybe more.  It’s the main section of the page.

Mobile, tablet and laptop or desktop
Make sure you are working with a modern layout design, Responsive, or you will be creating numerous website layout and making your self crazy!   The view of your mobile device layout will be different than someone viewing on their laptop, but responsive layout help you with this.

Starting from scratch to working with templates
Learning to make a website from scratch it a great opportunity to learn.  There are incredible resources a 3WSchool for learning.

Media Quires  – Media quires are  CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Adobe Dreamweaver  CC has visual media queries built into the interface to help identify mobile, table and laptop or desktop needs.  In other words, you will see what your website will look like as your area creating your site.  You can make adjustment to the media queries as needed.

Get code, make responsive web page, website
Go to my GitHub site for the code to make a simple responsive site and get the details at the original source, w3school.com.

REsponsivewebdesingpage

This is an example of a simple responsive web page responsive web design from w3schools.com. Get the code and make it your own now!

You can build this website, make it your own now!

Dreamweaver Templates

Working with templates – predefined layouts
Adobe Dreamweaver CC has templates to help you get your website started.

Web Design – Templates Starter – There are three basic layouts, four responsive layouts and six Bootstrap templates.  Find them:  New Document dialog, then select Starter Templates, Responsive Starters.  Look at the About, Blog, eCommerce, Email and Portfolio.

Bootstrap
Bootstrap templates are redefined layouts using the Bootstrap framework.  It’s an open-source set of tools for quickly building websites and fully responsive.  It was created by Twitter, and was released to the public in 2011.  It an incredible application for adding slideshows and more.  Find Bootstrap – Select New, them Starter templates, then Bootstrap in the new document dialog. Next, select create new.  Expand the customizer if you want to make changes, then click create.  Last, you will need to save the file.  Select File, Save, and name page, index.html or name you need for your page.  Most  home pages are named index.html.

(Note:  Students in my Introduction to Multimedia class will be using this for their Civil Rights Websites.)

Spell checking

Spell checking web pages in Adobe Dreamweaver CC

I suggest you write headlines and text or stories in Word  to check spelling, then paste into the pages.

You can check spelling in Dreamweaver, but first must be in Design view, toggle on top of the code and visual views.  Insert the cursor on a heading, then go to Commands, then select Check Spelling.  Note:  If you start the spell check at the bottom of the page, you will need to restart again at the beginning  of the page.  It will not check area that are not editable.

Find and Replace text
If you need to search for a word and replace, you can also do that in Dreamweaver.  

First, make sure you are in Design view.  Insert your cursor, the go to Choose Edit, the Find and Replace.  The dialog will open, type in the word you need to replace, and write what needs to be replaced.  You can replace one at a time or all at once.

 

Web design and layout summary

  • Create thumbnails or sketches of the required pages for your website.  Decide on the main elements you will need:  Header, footer, main content and navigation or menu.
  • Make sure you use a responsive design that will create a website that can be easily viewed on a mobile device, table and laptop or desktop.  You can turn some time on or off for mobile devices if you the content is too difficult to read.  Make sure your new website design will work on a variety of web browsers, especially the most used or popular browsers.
  • Adobe Dreamweaver CC currently has basic layouts, responsive design templates, along with Bootstrap designs templates, providing a variety of ways to get a website ready for the Internet, speeding up the design process.
  • The scrubber, found on the side of the Dreamweaver window, helps to view the pages at varies sizes, mobile to desktop.
  • Bootstrap is one of the most popular frameworks for building responsive designs.  There is a set of tools in the Bootstrap panel to help build an outstanding website in the fraction of the time previous required. You can build your own layout or use one of the templates provided for Bootstrap in Dreamweaver.

Links

Adobe Dreamweaver CC tutorials