网页制作流程：





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

        此效果实现的是，点击“查看详情”，淡入详情介绍小窗口。

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

使用html和CSS进行网页网站设计 -- 简明步骤的更多相关文章

  1. [书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞

    目录 第I篇 手机版专用网站设计和开发入门篇 第1章 准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用M ...

  2. 运用CSS改进网站设计的3个技巧

    CSS是一种分离表述编码和实际内容的一种最有用的方式,也是一种使搜索引擎最优化的方式,通常,网站设计中会建立一整套的css样式标准,这些标准存储在一个扩展名为css的单独文件中.然后利用HTML标签设 ...

  3. 优化网站设计（十）：最小化JAVASCRIPT和CSS

    前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...

  4. 优化网站设计（七）：避免在CSS中使用表达式

    前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...

  5. HTML 5+CSS 3网页设计经典范例 (李俊民,黄盛奎) 随书光盘​

    <html 5+css 3网页设计经典范例(附cd光盘1张)>共分为18章,涵盖了html 5和css3中各方面的技术知识.主要内容包括html 5概述.html 5与html 4的区别. ...

  6. css+div网页设计（一）--基础知识

    css是网页制作不可缺少的部分,我会用三篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一 ...

  7. 关注经典：CSS Awards 获奖网站作品赏析《第一季》

    每天都有很多新的网站推出,其中不乏一些设计极其优秀的作品.这个系列的文章,我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站.这些鼓舞人心的网站作品代表了网页设计的最高水平,相信 ...

  8. JavaScript网站设计实践（一）网站结构以及页面效果设计

    这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了.在这里记录 ...

  9. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

随机推荐

  1. android中传统的创建数据库

    1.在Android工程中建立一个class类,且继承与SQLiteOpenHelper. 2.然后到Mainactivity中去new一个MyOpenHelper来找到它 3.第一次创建数据库的时候 ...

  2. 把默认功能关闭，当做普通IO口使用。

    GPIO_PinRemapConfig(GPIO_Remap_SWJ_JTAGDisable,ENABLE); //禁止 JTAG选择SW模式,从而 PA15 可以做普通 IO 使用,否则 PA15 ...

  3. [LeetCode&Python] Problem 557. Reverse Words in a String III

    Given a string, you need to reverse the order of characters in each word within a sentence while sti ...

  4. Linux操作系统网络配置

  5. （dfs痕迹清理兄弟篇）bfs作用效果的后效性

    dfs通过递归将每种情景分割在不同的时空,但需要对每种情况对后续时空造成的痕迹进行清理(这是对全局变量而言的,对形式变量不需要清理(因为已经被分割在不同时空)) bfs由于不是利用递归则不能分割不同的 ...

  6. 《DSP using MATLAB》Problem 3.6

    逆DTFT定义如下: 需要求积分,

  7. hdu2066 一个人的旅行 最短路

    单源最短路裸题 #include<stdio.h> #include<string.h> #define min(a,b) (a)<(b)?a:b #define INF ...

  8. Tensorflow中的tf.argmax()函数

    转载请注明出处:http://www.cnblogs.com/willnote/p/6758953.html 官方API定义 tf.argmax(input, axis=None, name=None ...

  9. 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第3章 3.2 KIE API解析

    转载至:https://blog.csdn.net/wo541075754/article/details/75004575 3.2.4 KieServices 该接口提供了很多方法,可以通过这些方法 ...

  10. JSONObject JSONArray json字符串 HashMap ArryList 在java开发中用到的数据结构

    1.JSONObject  长成这样的:   { "key1":value1, "key2":value2, "key3":value3} ...