基礎知識がなくても理解できる！デザイナーにとってフロントエンドの知識はほとんどありません: 全員が自分の職務を遂行する必要があります_html/css_WEB-ITnose

Sunny Xiao Xiao: この記事は、初心者向けの入門レベルの比較的基本的な記事です。今日の章では、デザイナーがよく知っている PS を使用します。フロントエンド関連の用語を分かりやすくユーモアたっぷりに解説しているので、初心者にとっては良いチュートリアルになること間違いなしです！

過去問の復習:

『基礎知識ゼロでもわかる！デザイナーのために書かれたフロントエンドの知識 初級編(1)』
『基礎知識ゼロでもわかる！デザイナーのためのちょっとしたフロントエンド知識：横暴なDIVを攻略する（後編）》
『基礎知識ゼロでもわかる！デザイナーのためのフロントエンド知識：Webページレイアウト（実務経験あり）』
『基礎知識ゼロでもわかる！デザイナーのためのフロントエンド知識のヒント：組版までの3ステップ》

今日は次の3つについてお話します:

ファイルパスの関係
さまざまなテキスト
組版の続き

使わないあなたが理解できない子供用の靴 怠け者なら、フロント部分を作りに行きましょう。

1. パスの関係 - それぞれが独自の役割を実行します

前のセクションでは、画像を呼び出すときに次の文が使用されました:

background:url(imges/01.jpg);

画像、リンク アドレス、スタイルファイル、js ファイルなどは、HTML タグ内のさまざまな URL アドレスを介して 1 つずつ検索し、スタイル ファイルや画像などのアドレスが間違っていると表示できなくなります。ウェブページに表示される内容は想像を超えています。したがって、ほとんどのファイルは参照して選択でき、手動で入力する必要はありませんが、関係を理解することは問題の解決にも役立ちます。

以下に示すように、ホームページのインデックスと必要なスタイル ファイル、画像、js などを含む、比較的完全なフォルダーは紫色です。スタイル ファイルが 1 つしかない場合でも、別のフォルダーを作成する必要があり、通常 html ファイルは他の場所に配置 ファイルの上層ですが、htmlファイルが多い場合やモジュールに分かれている場合はフォルダを作成する必要があります。それは個人の好みによって異なります...

index.html の画像の下に画像 01 を引用する必要がある場合、アドレスは、images/01.jpg です。

通常の状況では、もちろん、すべてが 1 つのページで処理されるわけではありません。スタイルを別の .css ファイルに配置する必要があるだけでなく、すべての画像も別のフォルダーに配置する必要があります。

異なるレベル間で別の場所にあるファイルを参照する場合、パスはどのように書くのでしょうか?ここではいくつかの例を示します。

1) 同じレベル

別の画像を追加する場合 (ここでは例として追加された 02.jpg ファイル)、同じレベルのファイルを引用する必要があります。 own. 他に何も書く必要はなく、直接ファイル名でOKです。例: url (02.jpg);

2) 配下

同様に、index.html を参照点として、その 1 つ下の階層である 01.jpg を参照する必要があります。このフォルダーは、参照ポイントとまったく同じレベルにあります。つまり、01 から 1 レベルだけにわたるため、スラッシュ「/」を使用します (2 レベル下の場合はスラッシュ 2 つ)。インデックスを考える 画像の下のファイルを引用するには、まず画像の同意を取得する必要があるため、パスにはその「署名」も含まれている必要があります: url (images/01.jpg);

index.css を参照点として、02.jpg を引用したい場合は、最初に参照点を参照する必要があり、02.jpg は css フォルダーに属しており、02.jpg は彼のものと「同世代」です。父親ですが、名前で呼ぶことはできないので、代わりに 2 つのドット「..」を使用します。実際、これらの 2 つのドットは、フォルダー全体の代替名としても使用できます。これにはあまり意味がありません。インデックス.css。

さて、パターンは見つかりましたか？ Index.css が Index.js ファイルを探している場合、どのように見つければよいでしょうか?これについては皆さんに考えてもらいましょう、ふふ... (念のために、最初に上を見て、次に下を見てください)

2. あらゆる種類のテキスト

HTML では、画像を表示するだけでなく、テキストも表示されます。ここでいくつかのテキストのタイプを紹介しましょう:

1. 短いテキスト

上の図の青いマークで示されているように、これらのテキストは通常​​ 1 行の長さで、改行がなく、一般的に使用されるタイトルや名前などが含まれます。幅と高さは設定してもしなくても構いませんが、安全のため、一般的に使用されるのは e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3、45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114 などです。テキストをロードし、フォント サイズ (font-size)、色 (color)、太さ (font-weight) などのスタイルを設定します。

2. 長いテキストを改行する

上の図の紫色のマークのように、この種のテキストは本文で使用されるのが一般的です。テキスト バージョンを配置するときに、余分なテキストが不足することは絶対に避けたいので、最後に 076402276aae5dbec7f672f8f4e5cc81 タグを追加して手動でテキストを折り返すのではなく、テキストを固定幅内で自動的に折り返すようにしたいと考えています。文章。 (br はまれな「単一の犬」タグであることに注意してください)。幅が固定されているため、高さも固定である必要があり、そのような改行テキストを含むボックスには幅と高さがなければなりません。

幅が広い場合は、必要に応じて設定します。white-space:normal; この属性は行の折り返し専用であり、normal はデフォルトを表し、nowarp (行の折り返しを強制しない) などの他の属性値もあります。

しかし、Gao Keは注意する必要があります! ！ ！私は長い間、CSS の行の高さとボックスの高さの関係についてあまり知りませんでした。ただ 1 つずつ試して、適切であれば行間を決定していました。もちろん、情報には明確に説明されていませんでしたし、私が注意を払わなかったのかどうかはわかりません。ある日、マスターがボックスの高さを行間で割った値が、表示されるテキストの行数に等しいと教えてくれました。その時は、宝物を拾ったような気分でした、笑〜

つまり、ボックスの高さが 50px、line-height が 25px の場合、50/25=2 ということになります。 。つまり、割り切れない場合や小数の場合、一部の部分が見えにくくなる可能性があります。

最後のポイントは、余分なテキストを削除できるように、忘れずに overflow:hidden; を追加することです。この具体的な使用法は、後で組版で使用されます。

3. 改行のない長いテキスト

改行のない長いテキストとは、改行のない冗長なテキストが省略記号で置き換えられることを意味します。写真の黄色のマークの通りです。このようなテキストアプリケーションはたくさんあります。

まず、空白を使用して改行を強制的に行わないようにします。第 2 ステップ: オーバーフローを非表示にします。第 3 ステップ: テキスト オーバーフローを省略します。text-overflow:ellipsis; 非常に簡単ではないでしょうか。

4. カラフルなテキスト

写真にはないフォーマットですが、ふと思いつきました。実際のアプリケーションでは、テキストの段落内の特定の単語や文をより目立たせるために、色の変更、太字、および拡大などの操作が常に発生します。このとき、いくつかの軽量タグを選択する必要があります。通常、p タグには、次のような独自の行間隔と行折り返し属性があります。 div は少し大きく見えますが、これは少し使用されているだけです (ブロック レベル要素と非ブロック レベル要素については次のセクションで説明するので、自分でプレビューできます)。href リンクがない場合は、a タグが使用されます。基本的にどんなスタイルでもきれいな赤ちゃんというものはありません。レイアウトが混乱するなどの理由は避けられますが、問題が発生する場合は必ず発生するので、そのままにしておきます。これは栗です、ああ、いや、例です〜

例：今日は幸せではありません。

まず、全文を言うふりをしてください:

e388a4556c0f65e1904146cc1a846bee今日は幸せではありません。 94b3e26ee717c64999d7867364b1b4a3

次に、 a を使用して特別な処理が必要なテキストを含めます:

e388a4556c0f65e1904146cc1a846bee今日は 3499910bf9dac5ae3c52d5ede7383485満足ではありません5db79b134e9f6b82c0b36e0489ee08ed。 94b3e26ee717c64999d7867364b1b4a3

最後に、「nohappy」スタイルを自由にスタイルしてください。ただし、スタイルを適切な位置にわざわざ配置しないでください~ (ps: 太字にしたいだけの場合は、 < ;b>0d36329ec37a2cc24d42c7229b69747aタグを使用してください~)

3. 植字

また楽しい時期が来ました。しかし、全員が職務を遂行する必要があると前に述べたので、今日は植字の前にスタイルをあるべき場所に移動する必要があります。 DW で

Ctrl+N を押して、新しい CSS ファイルを作成します:

すると、次のようなファイルが得られます:

UTF-8 は国際的なエンコードです。 utf-8以外のエンコードでファイルを保存すると文字化けが発生する場合があります。他にも GB-2312 などがあります。自分で確認してください。つまり、dw によって自動的に生成されたステートメントをいじらないでください。

ここで余談になりますが、実際、中国語は、おそらく非英語圏の国にとって、この種の外国技術にとって常に厄介なものでした。したがって、世界中で何かを使用するために、この種のコンピューターの仕様は別として、最も単純なキログラム、センチメートル、24 などの多くの仕様を策定する人が常にいます。 -時間タイマーなど…私たちがよく目にする国際規範のいくつかについて話しましょう。中国人以外に、1フィートは何センチ、1時間は何時間か知っている人がどれだけいると思いますか?

はい、これ以上言う必要はありません。続けましょう。

元々ヘッダーに記述されていたスタイルファイルをcssに切り出すと、c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927ボックスを削除できます。このように:

保存するときは、この記事の最初のセクションで紹介したように、スタイル ファイルを専用のフォルダーに配置してください。

突然 HTML ファイルがかなりきれいになりましたね。

でも、パニックにならないでください。きれいになった、きれいになった、スタイルがなくなった、しかし連絡先情報さえ持っていない、それを使用する必要がある場合はどうすればよいですか？

それでは、ファイル内のスタイルを参照してください:

<strong><link href="css/index.css" type="text/css"  rel="stylesheet"></strong>

また、画像のパスを忘れないでください。私が上で言ったことを理解すれば、パスを完全に手で入力するのは素晴らしいことになると思います~

以前に、外側から内側に層ごとに処理する植字の基本的な手順をいくつか紹介しました。しかし、今日は植字の前に、以下に示すように、子供たちが個人的に私に尋ねた質問について説明したいと思います。ブラウザウィンドウを通常のレイアウトに狭めますが、このように問題は解決されません。

1. アウトソーシング

ここでいうアウトソーシングとは、チームのアウトソーシングを指すものではありません。 、ただし、箱の内側から外側へ。前にフローティングの話をしましたが、これはナビゲーションバーを配置した後、右側にまだ十分な距離があるため、画像が上に飛んでしまうためです。

我们从外到里已经做好了，现在得在它们的外包盒子了。外包的盒子的宽若刚刚好只放得下导航的内容，图片那一块不就下来了吗？

步骤还是那样啦，只不过从里往外包缺少了填内容那一步。定大小：定跟导航栏一样宽呀，多的留来也没用。定位置，当然是整个浏览器中间啦。可是你以为我会用margin-left来做吗？当然不，如果有个属性可以自动水平居中该多好。当然有：

<strong>margin: 0 auto;</strong>

遇到margin后面跟两个值各代表什么？不记得？往前翻……auto这个值，就是居中的意思，有了它，你会发现，浏览器窗口怎么放缩，都处在中间，是不是很嗨森？\(^o^)/~

2. 实战

好了，看看俺写好的：

是不是很像了？

以下是html及样式文件的编码，

看没看到新的东西，不仅外包了content，上面讲换行文本我们使用到了的哟。新添img标签和span标签，span这个标签，用在这种小型的，特殊的短文本是很好用的，详询： http://www.w3school.com.cn/tags/tag_span.asp 。

其次，有些属性也是新介绍的，比如：border（描边使用）,值什么意思看下图，是不是很亲切？除开solid这个值，当然还有其他值，乃们慢慢去试试。

再看看图中：

红色标示的部分，其实是可以复用黑色模块的东西的，只要稍作标题的颜色和大小调整即可。还有下面文前带点的文本，这样类似列表形式的文本，ul li标签是可以直接做到的，可以自己当做作业来做，下期就把上图中的东西全部排完了。

TIPS：排版中，我们多次为了让内容对齐，使用了margin-left：24px;即文本与黑框左边的距离。实际使用中，文本通常与装它的有色框是有一定距离的，为了美观，绝不会贴边出现：

但是每一句都加左边距，倒不如直接在black加内边距，单独每一句捏，就不需要加了:

.black{ width:356px; height:160px; background-color:#000000; opacity:0.6; margin-top:408px;padding-left:24px;}

注意了，这里有很重要的一点是：padding所加的左内边距是算在整个盒子宽内的，所以，width由原来的380px变为了356px。同样要是顶部加了padding-top，高也是相应要减掉一些的。

下图是随便网络一搜就能搜到的，但其实在实际使用中，width不仅仅是content里面的宽度，应该是要加上黄色的部分，曾经我有web工程师面试的时候就有这么一道题。或者说把紫色的边也加上，因为这些区域，除了空出来，服务于content，也放不了其他的了。且在没有margin的情况下，别的div要排也是贴着border，so……你懂的……-_-|||

好了，今天到这里，有疑问欢迎留言…

「设计师自学指南系列教程」

1. 平面设计： 《超赞！设计师完全自学指南》
2. 交互设计 ： 《交互设计师修炼指南！教你从零开始成为优秀交互设计师》
3. UI设计： 《超实用新手指南！零基础如何自学UI设计？》
4. 前端开发 ： 《天猫高手来教你！零基础如何系统地学习前端开发？》
5. 抠图技巧： 《从菜鸟到高手！PHOTOSHOP抠图全方位攻略》
6. 配色方案： 《色彩搭配速成！3个实用方法帮你全面搞定配色》
7. DPI指南： 《基础知识学起来！为设计师量身打造的DPI指南》

作者：Sunny萧萧

【优设网 原创文章 投稿邮箱：2650232288@qq.com】