使用html和CSS进行网页网站设计 -- 简明步骤


网页制作流程:


1. 心中有规划,网站的骨架结构,页面布局layout.


2. 创建一个用于创建模板dwt的html页: main.html


3. 制作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> )


4. main.html制作完成以后,save as a template.命名template.dwt。


5. 打开template.dwt, 设置可编辑区域: Insert -> Template -> ...


6. Create index.html, apply your template: Modify -> Templates -> Apply or Detach


7. 修改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的资源,看起来还不错.


2.  将他们放到../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>


3.  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">


--------------------实际上可以参考如下代码------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
    <div id="wrapper">
        <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>


        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
                <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>
                <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
            </div>
        </div>


    </div>
    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</body>
</html>
--------------------参考如上代码示例-----------------------

        即可完成。
        效果参考: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
        此效果实现的是,点击“查看详情”,淡入详情介绍小窗口。


===============================================================================






你可能感兴趣的:(网站设计)