dreamweaver网页设计项目一

《dreamweaver网页设计项目一》由会员分享，可在线阅读，更多相关《dreamweaver网页设计项目一（41页珍藏版）》请在金锄头文库上搜索。

1、中文版Dreamweaver CS6网页制作案例教 程江苏大学出版社项目一 网页制作基础知识 任务一 了解网页制作基础知识 任务二 创建“石市科干院”站点及欢迎首页任务一 了解网页制作基础知识任务描述随着网络的飞速发展，各类公司、企事业单 位都相继建立了自己的网站。本任务主要了 解网页制作基础知识并欣赏优秀网站，从而 为制作优秀网页打下坚实的基础。一、网站开发基础1InternetInternet，中文译名为因特网，又叫国际互 联网，是由广域网、城域网、局域网及单机 按照一定通讯协议组成的国际计算机网络。 只要你的计算机连接到它的任何一个节点上 ，就意味着你可以通过网络与远在千里之外 同样连入

2、Internet的朋友相互发送邮件、共 同完成一项工作或共同娱乐。2TCP/IP协议TCP/IP（Transmission Control Protocol/Internet Protocol的简写）， 中文译名为传输控制协议/因特网互联协议 ，又叫网络通讯协议，是Internet最基本的 协议，也是国际互联网络的基础。3IP地址所谓IP地址，就是为连接在Internet上的主 机分配的一个网络地址。按照TCP/IP协议 规定，IP地址用32位二进制数（也就是4个 字节）表示。4域名由于IP地址在使用过程中难于记忆和书写，一 种与IP地址对应的字符应运而生，这就是域名 （Domain Name

3、）。每一个网站都有自己 的域名，并且域名是独一无二的。5网址网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符 。它是网络上通用的一种地址格式，用于标 识网页文件在网络中的位置。 一个完整的网址由通信协议名称、域名或IP 地址、网页在服务器中的路径和文件名4部 分组成。6浏览器浏览器是安装在计算机上的一种软件，通过 它可以方便地看到Internet上提供的各种信 息和服务资源，浏览器种类很多，有IE、 360、腾讯、搜狗、火狐等，目前国内常用 的有IE和搜狗。二、认识网站和网页网页就是我们上网时在浏览器中打开的一个 个画面，网站则是一组相关网页的集

4、合。一 个小型网站可能只包含几个网页，而一个大 型网站则可能包含成千上万个网页。1主页打开某个网站时显示的第一个网页被称为网 站的主页（或首页）。一般来说，主页是一 个网站中最重要的网页，也是访问最频繁的 网页。它是一个网站的标志，体现了整个网 站的制作风格和性质，主页上通常会有整个 网站的导航目录，所以主页也是一个网站的 起点或者说主目录。网站的更新内容一般都 会在主页上突出显示。2网站互联网起源于美国国防部高级研究计划管理 局建立的阿帕网。网站（Website）最初是 指在因特网上，根据一定规则，使用HTML 等语言制作的用于展示特定内容的相关网页 的集合。3网页的构成元素我们可以将网页中

5、的元素按功能分为站标、 导航条、广告条、标题栏和按钮等。站标导航条广告条 标题栏（1）站标站标也叫Logo，是网站的标志，也是网站 特色和内涵的集中体现。它一般会出现在网 站的每一个页面上，是网站给人的第一印象 。网站的标志就如同商标一样，其作用是使 人看见它就能够联想到网站和企业。因此， 网站Logo通常采用企业的Logo。（2）网站导航导航栏是一组链接到网站内主要页面的超链 接组合，一般由多个按钮或者多个文本超链 接组成，通过单击这些超链接可以轻松打开 网站中的各个页面。 常见的网站导航有横排导航、竖排导航、下 拉菜单式导航等。（3）广告条广告条又称Banner，其功能是宣传网站或 为其他

6、商品做广告。 在制作Banner时，有以下几点需要注意。Banner可以是静态的，也可以是动态的。 Banner的体积不宜过大，尽量使用GIF格式图 片与动画或Flash动画。 Banner中的文字不要太多，只要达到一定的提 醒效果就可以。 Banner中图片的颜色不要太多，尤其是GIF格 式的图片或动画。（4）标题栏此处的标题栏不是指整个网页的标题栏，而 是网页上各版块的标题栏，是各版块内容的 概括。它使得网页内容的分类更清晰、明了 ，大大地方便了浏览者。4网页的本质一般情况下，网页中除了包含网页文件（扩 展名为.html，.asp等）外，还要用到图像 文件（扩展名为.jpg，.png，.g

7、if等）、 Flash动画文件（扩展名为.swf）、脚本文 件（扩展名为.js）、样式文件（扩展名为 .css）以及视频文件（扩展名为.avi，.flv等 ）等。在浏览器中选择“文件”“另存为 ”菜单，将网页保存到磁盘中，便可看到网 页的组成文件。三、网页配色基础知识1色彩简介人们肉眼所能看到的所有颜色都是由红、黄 、蓝三种基本原色构成的。基本原色也就是 我们通常所说的三原色。 原色，又称为基色，是用于调配其他色彩的 基本色；将原色以不同比例混合，可以产生 其他新颜色。原色的色纯度最高、最纯净、 最鲜艳，可以调配出绝大多数色彩，而其他 颜色不能调配出三原色。2色彩特征从色彩的功能上来看，它具有

8、以下基本特征 。 （1）色彩的冷暖 （2）色彩的轻重 （3）色彩的软硬 （4）色彩的缩扩3网页颜色的搭配设计网页时，可根据以下原则确定网页的背 景色和主色调，并进行颜色搭配。（1）网页背景颜色最好选择白色或黑色。 （2）可根据网站的性质确定网页的主色调，并且 该主色调应贯穿于网站中的全部网页。 （3）设计网页时恰当利用同类色、邻近色和对比 色，可增强网页的层次感、丰富网页的色彩或突 出某些重要内容（如导航条或版块标题）。4网站配色技巧无论是平面设计，还是网页设计，色彩永远 是最重要的一环。在选择网页色彩时，可以 遵循以下原则。（1）首先选择标准颜色。标准颜色是指能够体现 网站形象和延伸内涵的颜

9、色，主要用在网站标志 和主菜单上，给人一种整体统一的感觉。 （2）其他颜色。标准颜色定下来后，其他颜色也 可以使用，但只能作为点缀和衬托，绝不能喧宾 夺主。5网站配色的几点建议（1）尽量使用网页安全色。 （2）网页背景颜色与文字对比度要高。 （3）尽量避免蓝色与红色，蓝色与黄色，绿色/ 蓝色与红色这几类颜色同时出现。 （4）尽量少用细小的字体或蓝色表格。 （5）有些颜色本身是很枯燥的，比如灰色，但配 合一些橙色或亮色就会产生完全不同的感觉，可 以尝试一下。 （6）可以利用留白来平衡网站中的颜色刺激。 （7）要始终保持整个网站颜色的统一性。四、网站开发流程网站开发流程是指从企业计划建设网站到网

10、站建设完成的一套规范化运作过程。 简单来说，可以把网站开发流程归纳为以下 三个阶段： （1）规划和准备阶段； （2）网页设计与制作阶段； （3）网站的发布、推广和维护阶段。五、网站管理与网页制作相关软件当今时代，网络成了最重要的媒体和资源宝 库。制作网页可以选择用HTML代码，也可 以选择用软件编辑，最好是两者兼用。 在制作网页时，除Dreamweaver外还需要 用到Photoshop，Flash，Fireworks等辅 助软件。任务实施欣赏优秀网站欣赏几个网站，并注意观察其颜色搭配和 布局方式。任务二 创建“石市科干院”站点及欢迎首 页 任务描述首先熟悉一下Dreamweaver CS6的

11、工作环 境，掌握利用Dreamweaver CS6创建和管 理网站站点，以及创建、保存、打开和关闭 网页文档的操作，然后创建“石市科干院” 网站站点，并制作网站欢迎首页。一、Dreamweaver CS6简介Dreamweaver CS6是一个可视化网页设计 和网站管理工具，即使没有任何网页制作基 础，也能很轻松地利用它制作出漂亮的网页 ，只要从菜单、面板中选择选项就可以了。 这免除了学习HTML语言的烦恼，也节省了 很多编写源代码的时间。二、启动Dreamweaver CS6启动Dreamweaver CS6的操作很简单，和 其他软件基本一致。三、Dreamweaver CS6工作环境简 介

12、Dreamweaver CS6的工作界面由菜单栏、 文档标签栏、文档工具栏、文档编辑区、标 签选择器、“属性”面板、“文件”面板组 等组成。四、网站站点相关操作1创建本地站点站点一般包括本地站点（本地计算机上的一 组文件）和远程站点（远程Web服务器上 的一组文件）。本节以本地站点为例说明创 建过程。2打开站点打开站点的方法有两种。 方法1：在菜单栏中选择“站点/管理站点 ”菜单命令，弹出“管理站点”对话框，选 择要打开的站点，单击“完成”按钮即可。 方法2：在“文件”面板的“站点”下拉列 表中选择已创建的某个站点。3编辑站点编辑站点的方法也有两种。 方法1：选择“站点/管理站点”菜单命令 ，

13、在“管理站点”对话框中双击要编辑的站 点。 方法2：在“文件”面板中选择站点列表中 的“管理站点”选项，也可打开“管理站点 ”对话框。4复制站点首先在“管理站点”对话框中选择要复制的 站点，单击“复制当前选定的站点”按钮， 在站点列表中即增加了一个新的站点。双击 复制产生的站点，可以对其进行编辑操作， 如改变站名、改变存储位置等。5删除站点在“管理站点”对话框中单击选中要删除的 站点名，单击“删除当前选定的站点”按钮 ，在弹出的对话框中单击“是”按钮确认删 除，单击“否”按钮则取消删除。6导入和导出站点在Dreamweaver CS6中，可以将现有站点 导出为一个站点文件，也可以将站点文件导

14、入为一个站点。导入、导出的作用在于保存 及恢复站点和本地文件的链接关系。五、网页文档基本操作1新建网页文档和文件夹“文件”面板是管理网站的重要工具，通过 它可以直观地看到整个网站的结构，也可以 快速创建网页文档和文件夹。2打开网页文档在Dreamweaver中打开网页文档的方法有多种， 下面分别介绍。 方法1：启动Dreamweaver后，移动鼠标至欢迎 屏幕上的“打开最近项目”文件列表，单击“打 开”选项，然后在“打开”对话框中选择要打开 的文档。 方法2：移动鼠标至菜单栏中的“文件”命令上单 击，然后在弹出的下拉菜单中选择“打开”命令 。 方法3：打开“文件”面板后，移动鼠标至面板中 的文件列表上，双击要打开的文档。3保存网页文档制作网页时，应及时将其保存。 步骤1 在菜单栏中选择“文件/保存”菜 单命令。 步骤2 出现“另存为”对话框后，首先在 “保存在”下拉列表中选择磁盘驱动 器编号和文件夹名称（网页存储位置），然 后在“文件名”编辑框中输入网页文档名， 接着单击“保存”按钮即可保存文档。任务实施一、创建“石市科干院”网站站点在学习了前面的基础知识后，本节通过一个 实例进一步巩固。二、制作“石市科干院”网站欢迎首 页 本节通过制作“石市科干院”网站的欢迎首 页，来初步了解网页的制作方法。