Web Design and Programming Aj.Drusawin Vongpramate Department of Information Technology Faculty of Science

คำอธิบายรายวิชา เทคโนโลยีอินเทอร์เน็ตและเว็บ ศิลปและมโน ทัศน์การออกแบบเว็บ การวิเคราะห์และออกแบบ ข้อมูลสำหรับเว็บ การวางโครงสร้างเนื้อเรื่อง รูปแบบของจอภาพ การจัดวางข้อมูลในเว็บ การ ใช้สี องค์ประกอบพื้นฐานของเว็บ การเคลื่อนไหว และการกำหนดทิศทาง การออกแบบเว็บโดย คำนึงถึงการใช้งาน การใช้โปรแกรมสำเร็จรูปใน การสร้างเว็บเพจ ภาษา HTML กับการสร้างเว็บ เพจ ภาษาสคริปต์ที่ใช้สำหรับการเขียนโปรแกรม บนเว็บ และการสร้างหน้าเว็บแบบพลวัต การใช้ งานคุกกี้ การติดต่อเชื่อมโยงกับฐานข้อมูล การ ปรับแต่งประสิทธิภาพ และความปลอดภัยในการ ใช้งาน รวมถึงการเขียนโปรแกรมในฝั่งของ บราวเซอร์ เช่น การใช้สคริปต์จาวา และเน้นการ เขียนโปรแกรมในฝั่งของเซิร์ฟเวอร์

Tools and Language Text editor – Notepad – Notepad ++ – Sublime – Adobe Dreamweaver HTML, CSS, PHP, JavaScript, MySQL

Topic Jumpstart + HTML Setting Up a New Site Adding Text and Images Styling Your Pages with CSS Creating Page Layouts with CSS Using Web Fonts Working with Tables Using JavaScript

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

Jumpstart

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

Work views

Q & A