２月２９日　授業内容①　週末課題の確認、サーバーアップロード方法

＊週末課題の内容確認
参照先：http://yachin29.hatenablog.com/entry/2016/02/29/155025


＊サーバーへのアップロード


使用するツール（この他にもありますが授業で紹介した主なものは以下３つ）
　　　↓
①windows用→＊FFFTPのダウンロード先：https://osdn.jp/projects/ffftp/

②mac用→＊サイバーダック

③※dreameaverではどのパソコンでもアップロードできる。

使用方法
　　↓
①ウェブクロウ（ネットサーバー）でＦＴＰアカウントの設定をする。（設定済み）


＊ＦＦＦＴＰ
②ＦＦＦＴＰでログインする。→接続
③左に自分のパソコンのファイル、右にサーバー上にアップしたページが表示されている。
アップしたいフォルダを選んで、青矢印ボタンを押してアップロードする。

＊dreamweaverでの設定
①サイト→新規サイト→適当なサイト名とフォルダがあるローカルフォルダーを選ぶ。

②サイト→サイトの管理→サイト名を選んで編集→左の欄のサーバー→＋を押して適当なサーバー名を
入力する。→レンタルサーバーのＦＴＰアカウント情報の中にある、ホスト名、アカウント名、設定したパスワードを入力し、テストを押す。
f:id:paris1204:20160229230942p:plain
f:id:paris1204:20160229231209p:plain
③テストが正常にできれば、保存→次の画面で保存を押す前にリモートのみにチェックを入れる→保存。
※Dreamweaverのサーバーアップロード時（テスト画面）のＦＴＰＰ　Ｐａｓｓｉｖｅモードは必ずチェック入れておくこと。（入れないとデータがもれてしまう）

④リモートサーバーに切り替えてＦＦＦＴＰと同じ流れでサーバーにアップロードする。
＊データが折りたたまれていて見えないときがあるのでそのときは以下のボタンを押す。
f:id:paris1204:20160229231402p:plain

表示内容：左がサーバー側、右が自身のパソコンデータ
f:id:paris1204:20160229231510p:plain




＊アップロードしたサイト
http://yellow1204.webcrow.jp/pasta/#


<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>週末課題</title>
</head>

<body>

<div id="container">

<header>
<h1>atella</h1>
<p>ちょっと良いパスタを</p>
</header>


<nav>
<ul class="nav1">
<li class="concept"><a href="#">Concept</a></li>
<li class="pasta"><a href="#">Pasta</a></li>
<li class="drink"><a href="#">Drink</a></li>
<li class="side"><a href="#">Side</a></li>
<li class="access"><a href="#">Access</a></li>
</ul>
</nav>


<div id="content">

<ul class="nav2">
<li class="lun"><a href="#"><img src="img/subimage01.jpg" alt="Lunch"></a></li>
<li class="pas"><a href="#"><img src="img/subimage02.jpg" alt="Pasta"></a></li>
<li class="wine"><a href="#"><img src="img/subimage03.jpg" alt="Wine"></a></li>
</ul>

</div><!--#content-->

<section class="gross">
<a href="#">
<h1 class="camp">Campain Infomation 現在実施中のキャンペーンやお得な情報</h1>

</a>

<div id="wrapper">
<div id="content2">


<a href="#">
<section class="gross1">
<div class="article">
<div class="today">

<h1>今日の日替わりパスタ</h1>
<dl>
<dt>ペンネアラビアータ</dt>
<dd>（ピリ辛トマトソースのペンネ）</dd>
</dl>
</div><!--.today-->

</div><!--.article-->
</section><!--.gross1-->
</a>

<section class="gross2">
<div class="aside">
<h1>news</h1>
<dl>
<dt>2015.9.24</dt>
<dd>今年も冷製パスタをお出しし始めました</dd>
<dt class="tomato">2015.9.18</dt>
<dd>トマトソースの作成ビデオを公開しました</dd>
</dl>
</div><!--.aside-->
</section><!--.gross2-->
</div><!--#content2-->

<section class="sidebar">
<a href="#">

<div class="cou">
<h1>CouponTickets</h1>
<p>ランチセットご注文時ドリンク１杯無料</p>
</div><!--.cou-->
</a>

<div class="video">
<p><a href="#"><img src="img/poster.jpg" alt="トマトソース作成ビデオ"></a></p>
</div><!--.video-->
</section><!--.sidebar-->

</section><!--.gross0-->


</div><!--div#wrapper-->


</div><!--#container-->
<footer><p>(c)2015 パスタとワインの店アテラ</p></footer>

@charset "UTF-8";
/* CSS Document */
/*reset*/
html,body,header,footer,section,article,aside,h1,h2,p,ul,li,dl,dt,dd{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;
line-height:1.0;}

ul,li{list-style:none;}

a{text-decoration:none;
color:black;}

img {
  border: none;
  vertical-align: bottom;
}


/*body*/

body{font-size:16px;
background:url(img/back.jpg)}

div#container{width:980px;
margin:0 auto;}

header{background:url(img/mainimage.jpg) no-repeat 0 0 ;
height:500px;
position:relative;
}

header h1{background:url(img/logo.png) no-repeat 0 0;
position:absolute;
top:0;
left:15px;
width:149px;
height:87px;
overflow:hidden;
white-space:nowrap;
text-indent:100%;}

header p{
overflow:hidden;
white-space:nowrap;
text-indent:100%;}

/*ul.nav1*/
ul.nav1{width:980px;}

ul.nav1 li{width:196px;
height:60px;
text-align:center;
float:left;
overflow:hidden;
white-space:nowrap;
text-indent:100%;}

ul.nav1 li a{display:block;
line-height:60px;}



li.concept{background:url(img/menu_concept.png) no-repeat 0 0;}
li.pasta{background:url(img/menu_pasta.png) no-repeat 0 0;}
li.drink{background:url(img/menu_drink.png) no-repeat 0 0;}
li.side{background:url(img/menu_side.png) no-repeat 0 0;}
li.access{background:url(img/menu_access.png) no-repeat 0 0;}


div#content{background:white;
width:870px;
padding:30px 55px;
overflow:hidden;}

/*ul.nav2*/
ul.nav2{width:870px;
heihgt:165px;
margin:0 auto;
overflow:hidden;}

ul.nav2 li{float:left;}
li.pas{margin-left:60px;}
li.wine{margin-left:60px;}

ul.nav2 li a:hover{opacity:0.5;}



h1.camp{background:url(img/campain.png) no-repeat 0 0;
width:870px;
height:60px;
margin:20px auto;
box-shadow:0 0 10px #999999;
overflow:hidden;
white-space:nowrap;
text-indent:100%;}

div#wrapper{width:870px;
overflow:hidden;}

div#content2{width:540px;
float:left;
position:relative;

}

/*article*/
div.article{background:url(img/todaypasta.jpg) no-repeat 0 0;
width:540px;
height:165px;
}

div.today{width:290px;
height:165px;
position:absolute;
top:0;
right:0;}

.article h1{background:url(img/todaypastaText.png) no-repeat 0 0;
width:148px;
height:49px;
margin:25px auto;
text-align:center;
}

.article dl{font-weight:bold;
text-align:center;}

.article dl dt,.article dl dd{text-align:center;
margin-bottom:10px;
text-shadow:0 0 1px #000;}



.article h1{overflow:hidden;
white-space:nowrap;
text-indent:100%;}



/*aside*/
.aside{background:url(img/back.jpg);
height:140px;
margin:30px 0 0 0;
overflow:hidden;}
.aside h1{background:url(img/newsText.png) no-repeat center top;
height:23px;
margin:20px 0;
overflow:hidden;
white-space:nowrap;
text-indent:100%;
}

.aside dl{overflow:hidden;
width:450px;
padding-left:30px;}
.aside dt,.aside dd{float:left;
padding-bottom:20px;
}
.tomato{clear:both;}

/*div.cou*/
div.cou{background:url(img/coupon.png) no-repeat 0 0;
width:270px;
height:140px;
float:right;
overflow:hidden;
white-space:nowrap;
text-indent:100%;}

div.cou{
width:270px;
line-height:140px;}

div.video{width:270px;
height:157px;
float:right;
margin-top:38px;
overflow:hidden;}

footer p{width:980px;
line-height:50px;
margin:0 auto;
text-align:center;
color:#4b7900;}