۲۶
تیر

ایجاد یک وب سایت ساده در Dreamweaver

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که در طی دوره آموزش کامل Dreamweaver ، با ما همراه هستند. خب تاکنون تقریبا ،تمام مطالب لازم و ضروری برای ایجاد یک قالب وب سایت مبتدی، با استفاده از نرم افزار Dreamweaver را در جلسات قبل، فرا گرفته اید. اکنون قصد داریم. با استفاده از مطالبی که تاکنون ارائه شده از جمله ایجاد فایل جدید وب سایت ، ایجاد فایل css و … همچنین با افزودن کدهای تکمیلی برای وب سایت، یک صفحه وب مبتدی را ، طراحی کنیم. برای این منظور ، با موضوع آموزش این بخش با عنوان ایجاد یک وب سایت ساده در Dreamweaver یا ایجاد قالب وب سایت ، با ما همراه باشید.

ایجاد یک وب سایت ساده در Dreamweaver

همانطور که اشاره شد، با آنچه که تاکنون آموخته اید، می توانید یک سایت ابتدایی ایجاد کنید. با مطالب ارائه شده ی آموزش Dreamweaver، ما موارد زیر را در مثال جلسات قبلی انجام داده ایم:

فونت پیش فرض برای عنوان ها و پاراگراف ها تعریف شده است.
یک نوار navigation اضافه شد. و یک پیوند به صفحه اصلی در آن ایجاد کرد.
جعبه div برای محتوای با دو جعبه بیشتر در داخل اضافه شده است.
یکی از آنها در سمت راست و دیگری در سمت چپ با ویژگی float ، تنظیم شده است.
عرض (width) آنها را به درصد محدود شده است. تا بتوانند به صورت افقی هماهنگ شوند.
دو متن heading دیگر نیز در پایین heading اصلی که قبلا ایجاد کرده ایم. اضافه شده است.
یک فرم (از منوی کشویی در زیر Insert)، شامل دو فیلد متنی و یک دکمه ارسال ،اضافه شد.
فاصله میان عناصر از طریق ویژگی margins و padding در css، اضافه شده است.
رنگ های پس زمینه و مرزهای عناصر اعمال شده است.
Footer و یک پیام کپی رایت نیز ایجاد شده است.

نتیجه تغییرات انجام شده:

ایجاد یک وب سایت ساده در Dreamweaver

برای درک بیشتر اینکه چه تغییراتی در بخش html و css انجام شده است، کدهای این تغییرات را در این بخش ارائه کرده ایم:

۱-کد html:

مثال :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="https://use.edgefonts.net/aguafina-script:n4:default;muli:n3:default;karla:n4:default.js" type="text/javascript"></script>
</head>
<body>
<header id="header">
  <h1>Welcome to My Test Website</h1>
</header>
<nav id="navigation"><a href="index.html" title="Back to homepage">Home</a></nav>
<main class="main">
  <div id="main-left">
    <h2>Sample Heading for Main Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi. In imperdiet auctor leo vitae blandit. </p>
    <ul>
      <li>Etiam tempus urna condimentum libero varius</li>
      <li>Ut commodo risus finibus</li>
      <li>Duis odio lacus, elementum eget sem finibus</li>
      <li>Mollis dignissim enim.</li>
      <li>Quisque molestie suscipit odio vel facilisis</li>
    </ul>
  <p>Curabitur vestibulum, lorem a tincidunt dapibus, erat sem rhoncus nisl, non dapibus quam mi ac ligula. Vestibulum id auctor eros, nec porttitor odio. Nunc efficitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.</p>
  </div>
<div id="main-right">
  <div class="cta">
    <h3>Sample Call to Action!</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi.</p>
</div>
<form method="post" name="form1" class="form">
  <div>
    <label for="textfield2" class="label">Name:</label>
    <input name="textfield" type="text" class="textfield">
  </div>
    <div>
      <label for="textfield3" class="label">Email:</label>
      <input name="textfield" type="text" class="textfield">
</div>
    <input type="button" name="button" id="button" value="Subscribe now!">
</form>
</div>
</main>
<footer class="footer">
  <p>Copyright © 2017 My Imaginary Website</p>
</footer>
</body>
</html>

<!doctype html>

<html>

<head>

<title>index.html</title>

<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/aguafina-script:n4:default;muli:n3:default;karla:n4:default.js" type="text/javascript"></script>

</head>

<body>

<h1>Welcome to My Test Website</h1>

</header>

<h2>Sample Heading for Main Content</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi. In imperdiet auctor leo vitae blandit. </p>

<ul>

<li>Etiam tempus urna condimentum libero varius</li>

<li>Ut commodo risus finibus</li>

<li>Duis odio lacus, elementum eget sem finibus</li>

<li>Mollis dignissim enim.</li>

<li>Quisque molestie suscipit odio vel facilisis</li>

</ul>

<p>Curabitur vestibulum, lorem a tincidunt dapibus, erat sem rhoncus nisl, non dapibus quam mi ac ligula. Vestibulum id auctor eros, nec porttitor odio. Nunc efficitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.</p>

</div>

<h3>Sample Call to Action!</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi.</p>

</div>

<div>

</div>

<div>

<label for="textfield3" class="label">Email:</label>

</div>

</form>

</div>

</main>

</footer>

</body>

</html>

۲- کد css:

مثال :

@charset "utf-8";
body {
  background-color: #F5F5F5;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}
p,
a,
ul,
ol,
li,
label,
input{
  font-family: muli, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 17px;
}
h1, h2, h3, h4, h5 {
  font-family: karla, sans-serif;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
}
#header {
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: #FFFFFF;
  border-bottom: 4px solid #EB232F;
}
#header h1 {
  font-family: aguafina-script;
  font-style: normal;
  font-weight: 400;
  font-size: 42px;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  text-transform: none;
}
#navigation {
  margin-right: auto;
  margin-left: auto;
  max-width: 1140px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#navigation a {
  color: #EB232F;
}
.main {
  display: block;
  margin-top: 15px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 15px;
  clear: both;
  overflow: auto;
  max-width: 1140px;
}
.main #main-right {
  float: right;
  width: 37.5%;
  display: block;
}
.main #main-left {
  float: left;
  width: 57%;
  display: block;
  padding-right: 20px;
}
.main #main-right .cta {
  text-align: center;
}
.main #main-right .form {
  width: 92%;
  margin-right: auto;
  margin-left: auto;
}
#main-right .form div {
  margin-bottom: 10px;
}
#main-right .form .label {
}
#main-right .form .textfield {
  width: 100%;
}
.main #main-right #button {
  text-align: center;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: block;
  padding-right: 36px;
  padding-left: 36px;
  border: none;
  background-color: #EB232F;
  color: #FFFFFF;
  cursor: pointer;
}
.footer {
  display: block;
  padding-top: 25px;
  padding-bottom: 25px;
  text-align: center;
}

100

101

102

103

104

105

106

107

108

109

110

@charset "utf-8";

body {

background-color: #F5F5F5;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px;

}

ul,

ol,

li,

label,

input{

font-family: muli, sans-serif;

font-style: normal;

font-weight: 300;

font-size: 17px;

}

h1, h2, h3, h4, h5 {

font-family: karla, sans-serif;

font-style: normal;

font-weight: 400;

text-transform: uppercase;

}

#header {

padding-top: 25px;

padding-bottom: 25px;

background-color: #FFFFFF;

border-bottom: 4px solid #EB232F;

}

#header h1 {

font-family: aguafina-script;

font-style: normal;

font-weight: 400;

font-size: 42px;

text-align: center;

margin-top: 0px;

margin-bottom: 0px;

text-transform: none;

}

#navigation {

margin-right: auto;

margin-left: auto;

max-width: 1140px;

margin-top: 10px;

margin-bottom: 10px;

}

#navigation a {

color: #EB232F;

}

.main {

display: block;

margin-top: 15px;

margin-right: auto;

margin-left: auto;

margin-bottom: 15px;

clear: both;

overflow: auto;

max-width: 1140px;

}

.main #main-right {

float: right;

width: 37.5%;

display: block;

}

.main #main-left {

float: left;

width: 57%;

display: block;

padding-right: 20px;

}

.main #main-right .cta {

text-align: center;

}

.main #main-right .form {

width: 92%;

margin-right: auto;

margin-left: auto;

}

#main-right .form div {

margin-bottom: 10px;

}

#main-right .form .label {

}

#main-right .form .textfield {

width: 100%;

}

.main #main-right #button {

text-align: center;

padding-top: 7px;

padding-bottom: 7px;

margin-left: auto;

margin-right: auto;

position: relative;

display: block;

padding-right: 36px;

padding-left: 36px;

border: none;

background-color: #EB232F;

color: #FFFFFF;

cursor: pointer;

}

.footer {

display: block;

padding-top: 25px;

padding-bottom: 25px;

text-align: center;

}

سخن پایانی

تاکنون با استفاده از مراحلی که در آموزش Dreamweaver ، بصورت گام به گام ، پیش رفتیم، یک قالب ساده اما پایه وب سایت را در Dreamweaver ، طراحی کردیم.

ما از این مثال بیشتر با هدف استفاده از یک نمونه ساده وب سایت ، در مراحل بعدی استفاده می کنیم. اگر باز هم برای شما، پیچیده به نظر می رسد. می توانید از همان نمونه ابتدایی برای دنبال کردن، مراحل بعدی آموزش، استفاده کنید.

QR: ایجاد یک وب سایت ساده در Dreamweaver

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

ایجاد یک وب سایت ساده در Dreamweaver

مقدمه

ایجاد یک وب سایت ساده در Dreamweaver

سخن پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ