Topic (Contd.) Adding Video, Audio and Interactivity Building HTML5 Web Forms Dynamics Page with PHP Connecting Web with Database Adding Interactivity with the jQuery UI Library
Creating a page layout
Web design basics Before you begin any web design project for yourself or for a client, you need to answer three important questions: What is the purpose of the website? Who is the audience/customer ? How do they get here?
Responsive web design
Scenario The most website will offer a variety of products and services and require a broad range of webpage types, including dynamic pages using server-based technologies like PHP.
Working with thumbnails and wireframes Creating thumbnails Think of thumbnails as a graphical shopping list of the pages you’ll need to create for the website. Thumbnails can also help you work out the basic website navigation structure. Draw lines between the thumbnails showing how your navigation will connect them.
Working with thumbnails and wireframes Creating a page design
Working with thumbnails and wireframes Creating wireframes
Proof of Concept
How websites work When you type a URL or IP address in the address bar of a web browser, you are connecting to a remote computer (called a server), and downloading the documents, images, and resources necessary to render the pages you will view while on the site. Web pages aren’t delivered as a finished product; your web browser is responsible for reconstructing and formatting the pages based on the HTML code included within the pages.
How websites work
An introduction to HTML
HTML is what makes the Web work; web pages are built using HTML code, which in turn is read and used by your web browser to lay out and format text, images, and video on the page. As you design and lay out web pages in Design view, Dreamweaver writes the code behind the scenes that is necessary to display and format your page in a web browser. HTML is not a programming language, but a simple textbased markup language.
Tag structure and attributes HTML uses tags, or bracketed keywords, that you can use to place or format content. Many tags require a closing tag, which is the keyword preceded by a forward slash (/).
The structure of an HTML document
Colors in HTML The first, middle, and last two digits of the hexadecimal code correspond to values in the RGB spectrum. For instance, white, which is represented in RGB as R:255 G:255 B:255, is represented in HTML as #FFFFFF (255|255|255).
Element hierarchy HTML elements should have a well-formed hierarchy or nesting structure in order to make sure that everything displays as it should. Big bold paragraph and Big bold paragraph
HTML5 HTML5 the ‘next’ version of the HTML specification and while it is not formally ratified at the time of this writing, it is widely supported by all major browsers and is the language of choice for creating new web pages. HTML5 replaces HTML4 and XHTML. HTML5 is designed to make web pages more compatible with newer platforms, such as mobile phones and handheld devices, and to create rich interactive and animated experiences.
Setting Up a New Site Site > New Site.
Setting Up a New Site Adding pages
Defining page properties Modify > Page Properties, or use the keyboard shortcut Ctrl+J