网页制作流程：





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. Plotly绘图工具（多用于统计）

    作者:桂. 时间:2017-04-23  23:52:14 链接:http://www.cnblogs.com/xingshansi/p/6754769.html 前言 无意中考到一个小工具,网址为: ...

  2. POJ 2407：Relatives（欧拉函数模板）

    Relatives AC代码 Relatives Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 16186   Accept ...

  3. HDU 2072 单词数 详细解答

    题目 单词数 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  4. （7）random（随机模块）

    import random print(random.random()) #得到一个随机的数,但是随机的数的范围是(0,1),这里用小括号(开曲线)代表取不到0也取不到1,o-1之间只有小数,所以只能 ...

  5. Python编码——常见的编码设置

    1.查看自己电脑的python的编码设置 # -*- coding: utf8 -*- import sys, locale """ locale.getpreferre ...

  6. CentOS升级Python2.6到Python2.7并安装pip

    原文:http://ruter.sundaystart.net/2015/12/03/Update-python/ 貌似CentOS 6.X系统默认安装的Python都是2.6版本的?平时使用以及很多 ...

  7. c++从string类型转换为bool类型

    利用输入字符串流istringstream bool b; string s="true"; istringstream(s)>>boolalpha>>b; ...

  8. Charles ：mac上的手机代理

    能在手机访问电脑上的网页. 配置: 下载 Charles,选中 Proxy => macOS Proxy Proxy => Proxy Setting 配置上端口 手机无线手动代理,配置上 ...

  9. PHP安全相关的配置（1）

    PHP作为一门强大的脚本语言被越来越多的web应用程序采用,不规范的php安全配置可能会带来敏感信息泄漏.SQL注射.远程包含等问题,规范的安全配置可保障最基本的安全环境.下面我们分析几个会引发安全问 ...

  10. Json之语法

    JSON 文本格式在语法上与创建 JavaScript 对象的代码相同. 由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 Ja ...