|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/webdesign-practice/
课程评论：没有评论
**课程名称：** 实践网页编码课程 | 使用HTML5和CSS3制作咖啡馆网站及网页媒体网站 **课程概述：** 本课程面向已掌握HTML和CSS基础知识的学习者，旨在提升其在实际网页编码方面的技能。通过循序渐进地完成三个不同难度的网站项目（初级、中级、高级），学习者将能够构建出专业的网页。本课程由拥有1000多名毕业生、经验丰富的日本网页设计学校提供。 **课程适合人群：** * 具备基础HTML和CSS知识，但对实际网页制作缺乏自信的人。 * 希望掌握更实用编码技能的学习者。 **课程特点：** * 内容充实，超过90个课程单元，总时长超过9小时。 * 由经验丰富的日本网页设计学校提供，拥有良好的教学声誉。 * 包含90多个时长约5分钟的视频课程，内容丰富易于消化。 **课程内容：** **一、 初级：诊所网站的标记 (2部分)** * **第一部分：** 从零开始标记一个介绍虚拟诊所的网站——诊所网站（首页）。设计简洁，标记过程不复杂，适合初学者。 * **第二部分：** 继续完成诊所网站的标记。学习使用图片标签显示主图，并通过`float`等技巧实现盒子横向排列，广泛运用HTML和CSS。这是对第一部分的延续。 **二、 中级：美容院网站的编码 (4部分)** * **第一部分（首页）：** 学习从零开始标记一个介绍虚拟美容院的网站。使用阴影、背景图等较复杂的样式，难度稍高。 * **第二部分（首页）：** 继续学习美容院网站的标记，着重鼠标悬停下划线效果等交互性设计。这是对第一部分的延续。 * **第三部分（首页）：** 学习创建滚动显示新消息窗口等实用标记技巧。这是对第二部分的延续。 * **第四部分（下层页面）：** 通过复制首页文件，修改内容来标记下层页面。学习如何高效地创建具有相同设计和布局但内容不同的页面。这是对第三部分的延续。 * **第五部分（下层页面）：** 学习创建包含输入框的联系表单，并使用CSS进行优化设计，以提升用户体验。这是对第四部分的延续。 **三、 高级：网页媒体网站的标记 (4部分)** * **第一部分：** 从零开始使用HTML和CSS编码一个内容量大的在线媒体网站。由于页面较长，内容丰富，属于高级课程。强调细致的编码，避免拼写错误。 * **第二部分：** 继续使用HTML和CSS编码在线媒体网站。学习运用各种HTML标签和CSS属性，精确还原设计。这是对第一部分的延续。 * **第三部分：** 继续编码在线媒体网站，重点关注如何利用背景图片优化页面加载速度。这是对第二部分的延续。 * **第四部分：** 学习标记提供多样化内容的网页媒体网站。着重处理长页面和大量内容，并创建分页和页脚等重要元素。这是对第三部分的延续。
HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです実際の３つのWebサイトを初級・中級・上級と段階を踏んで作りながら、実践的なWebサイトコーディングのスキルが身につきます。1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。★こんな人におすすめ★基礎的なHTMLとCSSの知識はあるが、実際のWebサイト制作は自信のない方より実践的なコーディングのスキルを身に着けたい方★特徴★９０以上、９時間以上の充実したコース1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供５分程度の動画が９０レッスン以上 充実した内容ですが、無理せず学べる★内容★①【初心者向け】クリニックサイトのマークアップ(1)実践Webデザインの【初心者向け】クリニックのWebサイト〜トップページ編〜の章で作成した、仮想のクリニックを紹介するWebサイトを、１からマークアップしていきます。 シンプルなデザインなので、マークアップもあまり複雑ではないため、初心者向けの章です。 初めてWebサイトをマークアップする方にオススメです。②【初心者向け】クリニックサイトのマークアップ(2)実践Webデザインの【初心者向け】クリニックのWebサイト〜トップページ編〜の章で作成した、仮想のクリニックを紹介するWebサイトを、１からマークアップしていきます。 画像タグを利用してメイン画像を表示させるところから、floatを駆使してボックスを横並びにするなど、幅広くHTMLとCSSを利用していきます。 【初心者向け】クリニックサイトのマークアップ(1) の続きの章になりますので、初めてご覧になる方はまず前の章から取り組んでください。③【中級者向け】美容院のWEBサイト(1)〜トップページ編〜実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、１からマークアップする方法を学びます。 シャドウや背景画像等の少し複雑なスタイルを使用しますので、やや中級者向けの章です。 完成版のファイルを一度見てみて、不安な方はまず「【初心者向け】クリニックサイトのマークアップ」から取り組んでみてください。④【中級者向け】美容院のWEBサイト(2)〜トップページ編〜実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、１からマークアップする方法を学びます。 マウスホバーでリンクに下線をつけるなど、操作性も意識したマークアップ方法を学びます。 【中級者向け】美容院のWEBサイト(1)〜トップページ編〜の続きの章になります。⑤【中級者向け】美容院のWEBサイト(3)〜トップページ編〜実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、１からマークアップする方法を学びます。 要素ないからはみ出た部分をスクロールできる新着窓の作成など、覚えておくと便利なマークアップ方法も学びます。 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜の続きの章になります。⑥【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、１からマークアップする方法を学びます。 作成したトップページのファイルを複製して、下層ページをマークアップします。 同じデザインやレイアウトで、コンテンツのみ違うページをマークアップする際は、ファイルを複製して必要な部分のみを変更した方が作業が楽になります。 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜の続きの章になります。⑦【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、１からマークアップする方法を学びます。 inputタグを利用した、お問い合わせフォームを作成する方法を学びます。CSSを利用して、入力しやすいようにデザインを反映させていきましょう。 【中級者向け】美容院のWEBサイト(4)〜トップページ編〜の続きの章になります。⑧【上級者向け】Webマガジンサイトのマークアップ(1)実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って１からコーディングしていきます。 縦に長いコンテンツ量の多いサイトになりますので、上級者向けの章になっています。 HTMLやCSSは、一文字でも違うと画面が真っ白になったり、エラーになってしまうので、繊細な作業を行う必要があります。 なるべくタイプミス等しないように注意してください。⑨【上級者向け】Webマガジンサイトのマークアップ(2)実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って１からコーディングしていきます。 さまざまなHTMLタグ、CSSプロパティを駆使して、デザインをそのまま反映させるようなマークアップ方法を学びます。 【上級者向け】Webマガジンサイトのマークアップ(1)の続きの章になります。⑩【上級者向け】Webマガジンサイトのマークアップ(3)実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って１からコーディングしていきます。 背景画像を利用して、なるべくページの読み込み速度が早くなるよう心がけてマークアップしていきます。 【上級者向け】Webマガジンサイトのマークアップ(2)の続きの章になります。⑪【上級者向け】Webマガジンサイトのマークアップ(4)様々なコンテンツを提供するWebマガジンサイトをマークアップする方法を学びます。 縦に長い、コンテンツ量の多いサイトのマークアップは、些細なミスが命取りの上級者向けです。 Webメディアに必要なページネーションや、フッターを作成していきます。 10.【上級者向け】Webマガジンサイトのマークアップ(3) の続きの章になっていますので、初めてこの章をご覧になる方はまず前の章から取り組んでください。
