読者です 読者をやめる 読者になる 読者になる

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

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


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


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

mac用→*サイバーダック

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

使用方法
  ↓
①ウェブクロウ(ネットサーバー)でFTPアカウントの設定をする。(設定済み)


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

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

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

④リモートサーバーに切り替えてFFFTPと同じ流れでサーバーにアップロードする。
*データが折りたたまれていて見えないときがあるのでそのときは以下のボタンを押す。
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>ランチセットご注文時ドリンク1杯無料</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;}