Download presentation
Presentation is loading. Please wait.
1
تصميم صفحات الانترنت web design
2
Table Subtitle Main Title title title1 title2 title title title3
3
Steps / webpage Analysis Designing (Photoshop, illustrator …..)
Programming ( Java, C# , PHP , VB.NET , … ) Add Content or add menu , images …. Web Design (theming ,html and css)
4
Intro Html SASS Bootstrap framework JQuery Layout CSS Theming Grid
JavaScript Web design SASS JQuery CSS Grid Foundation framework Less
5
HTML & CSS
6
HTML & CSS HTML5 & CSS3 Tim Berners-Lee ….. 1980 1989/1990/1993
- first manual / some items - SW - CSS 1993 – HTML 1 1994 – HTML 2,3 , W3C 1996 – HTML 3.2 (Supported from Netscape & Explorer ) 1997 – HTML 4 2000 – XHTML (html & xml) HTML5 & CSS3
7
Where? Html alone page. Html with Java ,php …. Html with css and js.
<input type="image" src="image.gif" name="foo" /> Html with Java ,php …. <?php echo '<a href="' . htmlspecialchars("/nextpage.php?stage=23&data=" . urlencode($data)) . '">'."\n"; ?> Html with css and js. <script> function myFunction() { document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; } </script> <button type="button" onclick="myFunction()">Click Me!</button>
8
Tags HTML Attribute CSS Body{ Color:#ffffff; } <html> </html
<head> </head> Body{ Color:#ffffff; } <body> </body> <image/> <a></a>
9
Layouts and width page 1 Colum (Instagram) 2 Colum 3 Colum (Twitter)
4 Colum (Facebook) Header Logo ,menu Body (Content) Footer
10
LESS AND SASS Ex: Variable (color)
Less is a CSS pre-processor meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable. SASS is the most mature, stable, and powerful professional grade CSS extension language in the world.
11
Frameworks and Responsive Page
3 levels Pc – full width Ipads and tablets Mobiles Bootstrap (html ,css ,js) Foundation 1024 px 960 px 644 px > 320
12
SW and Tools Notepad Notepad++ Atom Brackets MS FrontPage
Adobe Dreamweaver. Google Chrome Extension(inspect elements) Mozilla Firefox (FireBug)
13
Website tutorials http://www.w3schools.com/ https://css-tricks.com/
abuyahia.info
Similar presentations
