网页制作流程：





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. Codeforces 617B：Chocolate（思维）

    题目链接http://codeforces.com/problemset/problem/617/B 题意 有一个数组,数组中的元素均为0或1 .要求将这个数组分成一些区间,每个区间中的1的个数均为1 ...

  2. CTF之MD5

    MD5是一种常见的加密方式,但准确来说,它只是一种编码方式,它将任意有限长度的字符串通过哈希函数转换为特定长度的字符串. MD5编码具有单向性,即由明文变密文简单,由密文变明文困难. 破解时只能通过暴 ...

  3. 《DSP using MATLAB》Problem 3.12

  4. Mysql隔离级别 sql示例理解

    前言 事务要解决的是多线程并发修改数据库的问题.Mysql innodb 引擎支持事务.类似 Java 中的各种锁,例如乐观锁(CAS),读写锁,悲观锁.事务也有很多级别. 每个隔离级别要解决的问题都 ...

  5. LG1397 [NOI2013]矩阵游戏

    题意 婷婷是个喜欢矩阵的小朋友,有一天她想用电脑生成一个巨大的n行m列的矩阵(你不用担心她如何存储).她生成的这个矩阵满足一个神奇的性质:若用F[i][j]来表示矩阵中第i行第j列的元素,则F[i][ ...

  6. LG2024 [NOI2001]食物链

    拆点法 用并查集维护每种动物的同类.天敌.食物群 #include<cstdio> int fa[300005]; int n,k,ans; inline int read() { int ...

  7. 关于jdbc的面试题

    什么是JDBC,在什么时候会用到它? JDBC的全称是Java DataBase Connection,也就是Java数据库连接,我们可以用它来操作关系型数据库.JDBC接口及相关类在java.sql ...

  8. Python学习系列（一）(基础入门)

    Python入门 本系列为Python学习相关笔记整理所得,IT人,多学无害,多多探索,激发学习兴趣,开拓思维,不求高大上,只求懂点皮毛,作为知识储备,不至于落后太远.如果兴趣学习者,推荐一个基础视频 ...

  9. 弹性盒子布局（display:flex）知识点

    设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效.

  10. Entity创建一对一关系

    Area类 public virtual User User { get; set; } User类 public virtual Area Area { get; set; } Context类 m ...