آموزش طـراحی وب (2)
قسمت سوم – کدهای html
مرحله شانزدهم – ویرایشگر کد :
مرحله هفدهم – ساختن فولدر ها :
برای شروع فولدری با نام “Mywebsite” بسازید . در داخل این فولدر فایلهای مربوط به وب سایت شما جای خواهند گرفت. فولدری با نام “images” در داخل این فولدر بسازید و تمامی تصاویر مربوط به وب سایت را در داخل آن قرار دهید. همچنین فولدرهای دیگری با نام “css” و “js” برای قرار گیری فایلهای css و همچنین JavaScript” ” بسازید . سعی کنید رویه یکسانی را برای انتخاب نام فولدر ها و حتی صفحات خود انتخاب کنید تا هر شخصی با دیدن این نامها متوجه محتویات داخل آنها شود.استفاده یکسان از حروف کوچک و بزرگ نیز در نامگذازی فولدرها و صفحات وب توصیه می شود.به طور مثال در اینجا برای انتخاب نام فولدرها از حروف کوچک استفاده شده است.
صفحات وب خود را نیز در فولدر اصلی و در کنار فولدرهای css , js , images ذخیره نمایید و در آدرس دهی ها بسیار دقت کنید.البته در اینجا از فایلهای js یا javascript خبری نیست و این فولدر به صورت نمونه ساخته شده است و در طرح ما کاربردی ندارد.
مرحله هجدهم – ایجاد صفحه Index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Untitled Document</title>
6 </head>
7 <body>
8 </body>
9 </html>
1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3 <title>MyWebSite</title>
4 </head>
استفاده مناسب از کدهای استاندارد می تواند در حجم ، زیبایی و راحتی کار شما تاثیر بسیاری داشته باشد.در این خود اموز تلاش شده از کدهای استاندارد و از روش tableless ( استفاده از تگهای div ) برای کد نویسی استفاده شود.
در بخش های ابتدایی توضیح داده شد که صفحه وب ما از چند بخش ( header, content , side bar , footer ) تشکیل شده است . در اینجا برای شروع هر یک از این قسمتها را که در بین تگ body قرار دارند به صورت تگ div در نظر میگیریم . همانطور که در کدها ملاحظه می نمایید توضیحاتی در انتهای هر تگ برای راحتی کار قرار گرفته است. div ها مزیت های بسیاری نسبت به table ها دارند از جمله این مزیت ها می توان به پایین آوردن حجم صفحات ، قدرت مانور بیشتر برای طراحان و…. اشاره کرد.
1 <body>
2 <div></div><!--end header -->
3 <div></div><!--end content-->
4 <div></div><!--end sidebar-->
5 <div></div><!--end footer-->
6 </body>
مطابق تصویر صفحه وب را به دو قسمت مجزا با نامهای main و footer تقسیم می کنیم ( کادر بنفش رنگ و آبی رنگ ) در سیستم های طراحی tabelless معمولا از یک تگ div اصلی به عنوان نگه دارنده صفحه (مانند #main) استفاده می شود.
1 <body>
2 <div>
3 <div></div><!--end header -->
<br />
4 <div></div><!--end content-->
5 <div></div><!--end sidebar-->
6 </div><!--end main-->
7 <div id="footer"></div><!--end footer-->
8
9 </body>
01 <div id="main">
02 <div class="container">
03 <div id="header"></div><!--end header -->
04 <div id="content"></div><!--end content-->
05 <div id="sidebar"></div><!--end sidebar-->
06 </div><!--end main container-->
07 </div><!--end main-->
08 <div id="Div1">
09 <div class="container"></div><!--end footer container-->
10 </div><!--end footer-->
مرحله نوزدهم – تکمیل محتوا :
این بخش اولین و یکی از مهمترین اجزاء تشکیل دهنده صفحه وب است که از Logo , Tagline , Navigation تشکیل شده است ( لوگو ، شعار تبلیغاتی و منوها ) . در ابتدا کدها در بخش header به صورت زیر خواهند بود .
1 <div id="Div2">
2 <div id="logo"></div>
3 <div id="tagline"></div>
4 </div><!--end header -->
01 <div id="Div3">
02 <div id="Div4">
03 <h1>Logo</h1>
04 </div>
05 <div id="Div5">
06 <h3>And a little tagline, too.</h3>
07 </div>
08 <ul id="menu">
09 <li><a href="#">Home</a></li>
10 <li><a href="#">About</a></li>
11 <li><a href="#">Portfolio</a></li>
12 <li><a href="#">Contact</a></li>
13 </ul>
14 </div><!--end header -->
برای ساخت منوها از لیست ها و یا تگهای ul و li استفاده شده است که کاربردهای بسیار زیادی در طراحی و ساخت منوهای کار آمد و پیشرفته دارند. تگهای a در داخل تگهای li قرار گرفته اند.
مقدار ادرس تگهای a با # مشخص شده است این به معنی لینک شدن به بالای صفحه است وبرای خالی نبودن مقدار href از ان استفاده می شود و کاربردهای دیگری نیز دارد.( با کلیک کردن بر روی لینکهایی که مقدار href آنها با # مشخص شده به بالای صفحه می روید )
Content
در محتوای content از نوشته های متفاوت با رنگها و اندازه های متفاوتی استفاده می شود و این نکته را در نظر داشته باشید که در طراحی یک وب سایت درجه اهمیت هر نوشته با اندازه یا Size و رنگ یک نوشته تعیین می شود و برای این کار از تگهای h1 , h2 , h3, … , p , small استفاده شده است.
قبل از تکمیل محتوای بخش اصلی تشکیل دهنده صفحه وب ( #content ) کد ها به صورت زیر خواهند بود.
پس از تکمیل محتوای این بخش و با در نظر گرفتن قسمتهای پیش فرض موجود در صفحه وب و درجه اهمیت آنها کدهای این قسمت به شکل زیر خواهند بود. توجه کنید که در طراحی صفحات وب به صورت پیش فرض از متن های بخصوصی برای نمایش بهتر صفحه وب استفاده می شود. این متن ها معنی و مفهوم خاصی ندارند.
01 <div id="Div6">
02 <h2>Lorem ipsum, Dolor sit</h2>
03 <h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>
04 <p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.Vestibulum id nulla eu sapienpellentesque malesuada
05 pharetra ac lacus.Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempu vel. </p>
06 <p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit,gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p>
07 <div id="news">
08 <h3>Latest Updates</h3>
09 <h4>Vestibulum id nulla eu sapien pellentesque</h4>
10 <small>June 1, 2009</small>
11 <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
12 <h4>Vestibulum id nulla eu sapien pellentesque</h4>
13 <small>June 1, 2009</small>
14 <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
15 </div><!–end news–>
16 </div><!–end content–>
بعد از قسمت content به بخش sidebar خواهیم رسد . این بخش طبق پیش فرض از سه قسمت مجزا تشکیل شده است . هر یک از این سه قسمت توسط یک تگ div به وجود می آیند که عنوان آن توسط یک تگ h3 و اجزاء آن توسط لیست ها ( تگهای ul , li ) و در داخل این تگها نیز از تگ a برای پیوند و لینک استفاده شده است.
01 <div id="Div7">
02 <div id="subscribe">
03 <h3>Subscribe!</h3>
04 <ul>
05 <li><a href="#">Subscribe via RSS</a></li>
06 <li><a href="#">Get Email Updates</a></li>
07 <li><a href="#">Follow us on Twitter</a></li>
08 </ul>
09 </div>
10 <div id="popular">
11 <h3>Popular Items</h3>
12 <ul>
13 <li><a href="#">Lorem ipsum dolor site amet</a></li>
14 <li><a href="#">Ulvinar tincidunt, Mauris id</a></li>
15 <li><a href="#">Lorem ipsum dolor site amet</a></li>
16 <li><a href="#">Proin tempor erat sit tene</a></li>
17 </ul>
18 </div>
19 <div id="contributors">
20 <h3>Contributors</h3>
21 <ul>
22 <li><a href="#">John Smith, freelance writer</a></li>
23 <li><a href="#">Jack McCoy, designer</a></li>
24 <li><a href="#">Lenny Briscoe, editor</a></li>
25 <li><a href="#">John Smith, martketing</a></li>
26 </ul>
27 <a href="#">Join Our Team</a>
28 </div>
29 </div><!--end sidebar-->
قبل از اینکه کد هایی را که نوشتیم در داخل یک مرورگر بررسی کنیم آخرین قسمت ( footer ) را نیز تکمیل می نماییم . در قسمت footer معمولا نوشته هایی در مورد قوانین کپی رایت ، لینکها ، سیاست ها ، و یا اطلاعات تماس قرار می گیرند که در وب سایتهایی با طراحی های مدرن کاربردهای بسیاری پیدا کرده است.
1 <div id="Div8">
2 <div class="container">
3 <p>Copyright © ۲۰۰۹ MySite <br />
4 <li>All Rights Reserved</p>
5 </div><!--end footer container-->
6 </div><!--end footer-->
قسمت چهارم – کدهای css
مرحله بیستم– وارد کردن فایل css :
1 <link href="css/MyStyle.css" rel="stylesheet" type="text/css" media="screen" />
مرحله بیست و یکم – CSS Reset :
1 body { font-family: Arial, Helvetica, sans-serif; }
2 .container { width: 800px; margin: 0 auto;}
بسیاری از نمایشگر های صفحات وب ( IE , FireFox ,Opera ,… ) به صورت پیش فرض padding و margin های متفاوتی را مورد استفاده قرار می دهند . به دلیل استاندارد سازی و یکسان سازی نمایش صفحات وب برای تمامی نمایشگرها تمامی این padding و margin ها به صورت یکسان در می آیند.
1 body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
مرحله بیست و دوم – header :
1 #main {
2 background: url(images/header_slice.jpg) repeat-x;
3 }
( البته حداقل عرض این صفحه وب ۸۰۰ px خواهد بود – #container )
مرحله بیست و سوم – logo :
این نکته را در نظر داشته باشید استفاده از تکنیکهای غیر استاندارد در طراحی وب سایت و استفاده از متن های مخفی در صفحه وب برای گول زدن موتورهای جستجو از چشم عنکبوت های موتورهای جستجو نادیده نمی ماند و ممکن است وب سایت شما با تحریم از طرف این موتورهای جستجو مواجه شود . بنابر این فکر استفاده از تکنیکهای غیر استاندارد و زیرکانه را از ذهن خود خارج کنید و به محتوای وب سایت خود بپردازید. برای قرار دادن لوگو در جای پیش فرض از تکنیک ساده زیر استفاده شده است.
1 #logo {
2 background: url(images/logo.png) no-repeat;
3 height: 84px;
4 width: 235px;
5 }
1 #logo h1 {
2 text-indent: -9999px;
3
4 }
1 #header {
2 padding-top: 40px;
3 }
مرحله بیست و چهارم – tagline ( شعار تبلیغاتی ):
1 #logo {
2 background: url(images/logo.png) no-repeat;
3 height: 84px;
4 width: 235px;
5 float: left;
6 }
حال برای #tagline نیز از خاصیت float:left استفاده می نماییم.
1 #tagline {
2 float: left;
3 }
1 <div id="header">
2 <div id="logo">
3 <h1>Logo</h1>
4 </div>
5 <div id="tagline">
6 <h3>And a little tagline, too.</h3>
7 </div>
8 <div style="clear:both"></div>
9 </div>
سر و شکل مناسبی به رنگ و اندازه شعار تبلیغاتی خود بدهید.
1 #tagline h3 {font-size: 30px; color: #e4dfdf; }
1 #tagline {
2 float: left;
3 padding-top: 20px;
4 padding-left: 20px;
5 width: 400px;
6 }
مرحله بیست و پنجم – navigation :
1 ul#menu {
2 list-style: none;
3 }
4 ul#menu li a {
5 font-size: 30px;
6 color: #676666;
7 text-decoration: none;
8 }
1 ul#menu li {
2 float: left;
3 }
01 <div id="header">
02 <div id="logo">
03 <h1>Logo</h1>
04 </div>
05 <div id="tagline">
06 <h3>And a little tagline, too.</h3>
07 </div>
08 <ul id="menu">
09 <li><a href="#">Home</a></li>
10 <li><a href="#">About</a></li>
11 <li><a href="#">Portfolio</a></li>
12 <li><a href="#">Contact</a></li>
13 </ul>
14 <div style="clear:both"></div>
15 </div><!--end header-->
1 ul#menu {
2 list-style: none;
3 padding-top: 50px;
4 }
5 ul#menu li {
6 float: left;
7 padding-left: 30px;
8 padding-right: 75px;
9 width: 95px; }
مرحله بیست و ششم – content :
01 #content h2 {
02 font-size: 36px;
03 color: #015878;
04 }
05 #content h3 {
06 font-size: 24px;
07 color: #444444;
08 }
09 #content h4 {
10 font-size: 18px;
11 color: #373737;
12 font-weight: normal;
13 }
14 #content p {
15 font-size: 14px;
16 color: #595858;
17 }
18 #content small {
19 font-size: 12px;
20 color: #373737;
21 }
22 #content a {
23 color: #0f6c8d;
24 font-weight: bold;
25 text-decoration: none;
26 }
1 body {
2 font-family: Arial, Helvetica, sans-serif;
3 background: #ebe8e8;
4 }
1 #content h2 {
2 font-size: 36px;
3 color: #015878;
4 padding-top: 25px;
5 }
1 #content h3 {
2 font-size: 24px;
3 color: #444444;
4 padding : 20px 0px;
5 }
1 #content p {
2 font-size: 14px;
3 color: #595858;
4 padding-top: 20px;
5 }
01 #news {
02 padding-top: 10px;
03 }
04 #news h3 {
05 padding-bottom: 10px;
06 }
07 #news p {
08 padding-top: 10px;
09 padding-bottom: 14px;
10 }
مرحله بیست و هفتم – Side bar :
1 #content {
2 width: 510px;
3 float: left;
4 }
5 #sidebar {
6 float: left;
7 }
01 <div id="contributors">
02 <h3>Contributors</h3>
03 <ul>
04 <li><a href="#">John Smith, freelance writer</a></li>
05 <li><a href="#">Jack McCoy, designer</a></li>
06 <li><a href="#">Lenny Briscoe, editor</a></li>
07 <li><a href="#">John Smith, martketing</a></li>
08 </ul>
09 <a href="#">Join Our Team</a>
10 </div>
11 </div><!--end sidebar-->
12 <div style="clear:both"></div>
01 #sidebar {
02 float: left;
03 margin-left: 55px;
04 margin-top: 35px;
05 background: #d4d6d3;
06 border: 1px solid #BEBDBD;
07 padding: 15px;
08 }
09 #sidebar h3 {
10 font-size: 24px;
11 color: #044055;
12 font-weight: normal;
13 padding-bottom: 20px;
14 padding-left: 15px;
15 }
16 #sidebar ul {
17 list-style: none;
18 padding-bottom: 25px;
19 }
20 #sidebar ul li a {
21 font-size: 14px;
22 color: #393838;
23 }
24 ul#subscribe li {
25 padding-bottom: 5px;
26 }
27 ul#subscribe li a {
28 font-size: 18px;
29 }
1 ul#subscribe li {
2 padding-bottom: 5px;
3 padding-left: 35px;
4 }
1 <ul id="subscribe">
2 <li id="rss"><a href="#">Subscribe via RSS</a></li>
3 <li id="email"><a href="#">Get Email Updates</a></li>
4 <li id="twitter"><a href="#">Follow us on Twitter</a></li>
5 </ul>
01 li#rss {
02 background: url(/..images/rss_icon.png) no-repeat;
03 }
04
05 li#email {
06 background: url(/..images/email_icon.png) no-repeat;
07 }
08
09 li#twitter {
10 background: url(/..images/twitter_icon.png) no-repeat;
11 }
و در اینجا نگاهی به صفحه وب .
1 <a href="#" class="button">Join Our Team</a>
1 a.button {
2 color: #393838;
3 text-decoration: none;
4 background: url(/..images/button_slice.jpg) repeat-x;
5 margin-left: 14px;
6 padding: 13px 23px;
7 }
1 #sidebar {
2 float: left;
3 margin-left: 55px;
4 margin-top: 35px;
5 background: #d4d6d3;
6 border: 1px solid #BEBDBD;
7 padding: 15px 15px 30px 15px;
8 }
مرحله بیست و هشتم – footer :
1 #footer {
2 background: url/..) images/footer_slice.jpg) repeat-x;
3 padding-top: 20px;
4 padding-bottom:60px;
5 margin-top: 40px;
6 color: #fff;
7 }
با امید موفقیت روز افزون.
منبع:http://www.ittutorial.ir
ارسال توسط کاربر محترم سایت : meysamr
/ج
