网页制作流程：





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. [LeetCode&Python] Problem 908. Smallest Range I

    Given an array A of integers, for each integer A[i] we may choose any x with -K <= x <= K, and ...

  2. 使用migration创建表时，出错的解决方法

    Laravel 5.4 migrate时报错: Specified key was too long error 解决问题升级MySql版本到5.5.3以上. 手动配置迁移命令migrate生成的默认 ...

  3. 使用blessed 开发丰富的cli 应用

    blessed 是一个不错的npm 包,可以帮助我们开发出带有丰富ui界面的cli 应用,类似的有subzero 测试环境准备 项目结构 ├── README.md ├── app.js ├── my ...

  4. smarty学习——内建函数 部分

    Smarty自带一些内建函数. 内建函数是模板语言的一部分. 用户不能创建名称和内建函数一样的自定义函数,也不能修改内建函数. 一.包含的内建函数 {$var=...}{append}{assign} ...

  5. Cocos2d-x 2.2.3 使用NDK配置编译环境

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/wwj_748/article/details/30072379 Cocos2d-x 2.2.3 使用 ...

  6. POJ3208魔鬼数

    题目:http://poj.org/problem?id=3208 与一般的数位dp有点不同的是,没有给出上界,而是要通过值来判断这一位该填什么. 当然是从高位向低位填. 为了知道这一位填下去对答案有 ...

  7. 【jmeter】jmeter测试手机app的服务器压力

    具体步骤: 1.电脑启动jmeter 2.jmeter在测试计划新建线程组. 3.在工作台新建http代理服务器 4.配置HTTP代理服务器 5.设置IE代理到本地 6.手机wifi设置代理连接到PC ...

  8. 在react-native中使用es7语法中的decorator装饰器

    在react-native中默认使用decorator会红屏报错,需要安装一个babel插件: babel-plugin-transform-decorators-legacy 然后在根目录下的.ba ...

  9. 常用的sql语句（存储过程语法）

    1.存储过程语法 ①package create or replace package PKG_RPT_WAREHOUSE is -- Author : -- Created : 2018/9/28 ...

  10. 学习笔记之Microsoft Azure

    Microsoft Azure - Wikipedia https://en.wikipedia.org/wiki/Microsoft_Azure Microsoft Azure (formerly  ...