网页制作流程：





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. CentOS使用安装光盘建立本地软件源

    本实验的目的是使用CentOS的两张DVD安装光盘作为本地软件源,避免执行yum安装命令时每次都要从网络重新下载. 安装createrepo软件包 createrepo是制作软件源所需要的一个工具,默 ...

  2. 网络编程初探--使用UDP协议的简易聊天室

    UDP是一种无连接的传输层协议,提供快速不可靠的服务. 一.发送端 * 创建UDP发送端 * 步骤: * 1.建立UDP的Socket服务 * 2.将要发送的数据封装到数据包中 * 3.通过UDP的s ...

  3. 谈ObjC对象的两段构造模式

    前言 Objective-c语言在申请对象的时,需要使用两段构造(Two Stage Creation)的模式.一个对象的创建,需要先调用alloc方法或allocWithZone方法,再调用init ...

  4. hdu1114 dp（完全背包）

    题意:已知空钱罐质量和满钱罐质量(也就是知道钱罐里的钱的质量),知道若干种钱币每种的质量以及其价值,钱币都是无限个,问最少钱罐中有多少钱. 这个题在集训的时候学长给我们做过,所以你会做是应该的,由于已 ...

  5. listening for variable changes in javascript

    https://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript

  6. hangfire docker-compose 运行

    hangfire 是一款基于.net 的任务调度系统 docker-compose 文件 version: '3' services: hangfire: image: direktchark/han ...

  7. stenciljs ionic 团队开发的方便web 组件框架

    stenciljs 是ionic 团队开发的方便组件话开发的js 框架,具体以下特点 简单,零配置,简单的api,typescript 支持 性能,压缩之后6Kb,支持ssr,以及强大的原生web c ...

  8. android 学习过程中登陆失效的个人理解

    今天在学习的过程中,要做登陆失效的功能,所以就找了些资料.好好看了一下.研究了一番,慢慢的做出来了! 比方:你在一个手机端登陆了账号,在另外的一个手机端也登陆了账号,此时.前一个手机端的账号会提示登陆 ...

  9. markdown 知识点

    符号 说明 作用 ___ 三个下划线 一条直线 * 或_ 1个星号 或 1个下划线 文字斜体 ** 或__ 2个星号 或 2个下划线 文字加粗 全角2个空格 缩进2个汉字 竖线之间加3个间隔符放在第二 ...

  10. @Resource、@Autowired、@Qualifier 区别（表格显示）

    @Resource.@Autowired.@Qualifier 区别(表格显示) 区别项 @Resource @Autowired @Qualifier 谁提供的 jdk提供,包是javax.anno ...