使用html和CSS进行网页网站设计 — 简明步骤
网页制作流程：
-
心中有规划，网站的骨架结构，页面布局layout.
-
创建一个用于创建模板dwt的html页： main.html
-
制作main.html:
(1) 在html文件中依次建立
<div id = "outter"> … </div>
<div id = "wraper"> … </div>
<div id = "top"> … </div>
<div id = "banner"> … </div>
<div id = "navigator"> … </div>
<div id = "content"> … </div>
<div id = "footer"> … </div>
等等分区。
(2) 往分区中填入文字图片等内容。
(3) 新建一个css文件，在Dreamweaver下，CSS Designer(Shift+F11) -> "+" -> 新建并附加一个css样式表文件： ../style/style.css
(4) 编辑style.css，通过点击左上角切换html代码和css代码。
(5) 通过margin, width, float, padding, 等等css语句，进行layout
border, background-color, font-family, font-size,
或者使用class的概念，进行细分。
对于h1 html body p标签，亦可使用css, 和class
例( .myclass { } 和 <p class="myclass">…</p> )
-
main.html制作完成以后，save as a template.命名template.dwt。
-
打开template.dwt, 设置可编辑区域： Insert -> Template -> …
-
Create index.html, apply your template: Modify -> Templates -> Apply or Detach
-
修改template.dwt, 另存为template002.dwt可用于其它风格的页面。
===================================================================================
【进阶教程】使网页交互，加入java script:
【准备工作】到jQuery.com, Dojotoolkit.org, Prototypejs.org下载js库文件
放入js/library文件夹。
【目标】 建立slider动画，实现图片淡入淡出切换，一旁淡入说明文字。
1.首先我们要到网上下载支持slider的.js 和 .css的源文件。
>>goole.com -> search "free slider js and css download"
>>我们可以找到很多资源。比如wowslider.com
>>下载了一个叫做Nivo Slider的资源，看起来还不错.
- 将他们放到../js/Nivo Slider文件夹下。
在html页中添加如下代码，for the slider Plug In.
<script type="text/javascript" src="Insert path to jQuery Library Here"></script>
<script type="text/javascript" src="Insert path to jQuery Slider Plug In Here"></script>
- Add the link to the slider CSS file (make sure media is set to "screen")
<link href="Insert Path the Slider CSS file" rel="stylesheet" type="text/css" media="screen">
——————–实际上可以参考如下代码——————
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
3<html lang="en">
4<head>
5 <title>Nivo Slider Demo</title>
6 <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
7 <link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
8 <link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
9 <link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
10 <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
11 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
12</head>
13<body>
14 <div id="wrapper">
15 <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>
16
17
18 <div class="slider-wrapper theme-default">
19 <div id="slider" class="nivoSlider">
20 <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
21 <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
22 <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
23 <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
24 </div>
25 <div id="htmlcaption" class="nivo-html-caption">
26 <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
27 </div>
28 </div>
29
30
31 </div>
32 <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
33 <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
34 <script type="text/javascript">
35 $(window).load(function() {
36 $('#slider').nivoSlider();
37 });
38 </script>
39</body>
40</html>
41
——————–参考如上代码示例———————–
即可完成。
效果参考：http://dev7studios.com/nivo-slider\#/demos
要想简单，我们使用了s3slider这个slider。
下载请见：http://www.serie3.info/s3slider/
改良版：http://pan.baidu.com/s/1mT2GK
==================================================================================================================================
Feature Content Slider效果的添加：
源文件和使用方法，参考：http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/
===================================================================================================================================
进阶教程：Set up a [Lightbox image galary]
Image galary的一个集贴在这里：
http://webdeveloperplus.com/jquery/21-brilliant-jquery-image-galleryslideshow-plugins/
我们要用Lightbox Galary:
介绍网页：http://leandrovieira.com/projects/jquery/lightbox/
作者主页：http://lokeshdhakar.com/projects/lightbox2/
===================================================================================
有个网站的资源很多，主流的特效都可以从这里找到：http://webdeveloperplus.com/
很不错，值得收藏。
==================================================================================================================================
加入Modal Popup jQuery Javascript 效果：
popup名称：reveal popup
http://zurb.com/playground/reveal-modal-plugin
此效果实现的是，点击“查看详情”，淡入详情介绍小窗口。
===============================================================================
posted on
2013-09-30 23:42 sonictl 阅读(
…) 评论(
…) 编辑 收藏
