Dreamweaver网页设计-综合实例
合集下载
Dreamweaver CS3综合实例
感受精彩——Dreamweaver CS3综合实例内容提要：本文主要介绍一个公司网页和一个科技公司网站的创建过程，目的是让读者能够更深入地了解网站的制作过程和方法，使读者进一步巩固使用Dreamweaver CS3 创建网站的基本方法和步骤，并能独立制作出简单的网站。
关键字：公司网页制作、网站制作引言：Dreamweaver CS3 是Adobe 公司推出的网页制作利器之一，其强大的功能和友好的操作界面，受到越来越多的网页设计师的青睐。
随着互联网信息时代的发展，网络已经成为人们生活中不可缺少的一部分。
利用网络，我们可以进行网上学习、网上购物、网上娱乐。
越来越多的公司和企业都拥有自己的网站，作为他们企业形象和产品的宣传平台。
正文：1 公司网页制作本实例通过Fireworks CS3 和Dreamweaver CS3 相结合完成，效果如图1 所示。
图 1其操作步骤如下：（1）用Fireworks CS3 制作一个网页图片，如图2 所示。
（2）使用切片工具，对图片进行切片，如图 3 所示。
图 3（3）单击“→ ”命令，打开“导出”对话框，将切割后的图片导出。
在“文件名”文本框中输入需要导出的 HTML 文件名，如 fwIndex.html ，在“导出”下拉列表中选 择“HTML 和图像”，在“切片”下拉列表中选择“导出切片”，并且选中“包括无切片区域”和“将图像放入子文件夹”复选框，如图 4 所示。
单击按钮，将切割后的图片导出。
（4）用Dreamweaver CS3 打开fwIndex.html，一个网页的基本架构已展现出来，如图 5 所示。
图 5→”命令，打开“ CSS 样式”面板，如（5）为文档设置样式表。
单击“图 6 所示。
（6）单击“CSS 样式”面板中的按钮，弹出如图7 所示的对话框。
图 6 图7 （7）进行相关的设置，单击按钮，弹出“保存样式表文件为”对话框，在“文件名”文本框中输入样式表名称，如“Style”，如图8 所示。
Dreamweaver CS3网页设计案例教程 (11)
2.事件
事件是附加在浏览器中元素上的特殊过程，每个浏览器都提供一组事件。 事件可以与单击“行为”控制面板的“添加行为”按钮后弹出菜单中列出的动 作相关联。实际上，事件是浏览器生成的消息，以通知计算机该网页的访问者 选择了某种操作。当某个事情发生时，系统有一个事件处理机制会自动选择事 件过程中的行为代码。 行为一定要与相应的事件相关联，因此，必须知道每个事件都在哪种情况 下触发选择。
第11章
使用行为
本章简介：
Dreamweaver CS3 的行为 是 将 内 置 的 JavaScript 代 码放置在文档中，以实现 Web 页的动态效果。下面从如何 使用行为并为其应用相应的 事件来讨论如何实现网页动 态、交互的效果。
课堂学习目标
行为的使用 动作的使用
11.1 美丽女人购物网页
4.播放声音
“播放声音”动作的功能是在完全加载网页后播放声音或当鼠标指针对 某个网页元素操作时播放声音。 使用“播放声音”动作的具体操作步骤如下。 （1）选择一个网页元素对象并启用“行为”控制面板。 （2）在“行为”控制面板中单击“添加行为”按钮，并从弹出的菜单 中选择“播放声音”动作，弹出“播放声音”对话框，在对话框的“播放 声音”选项中设置声音文件的路径和文件名，单击“确定”按钮完成设置。 （3）如果不是默认事件，则单击该事件，会出现箭头按钮，单击箭头 按钮，弹出包含全部事件的事件列表，用户可根据需要选择相应的事件。 （4）按<F12>键浏览网页
1.调用JavaScript
“调用 JavaScript”动作的功能是当发生某个事件时选择自定 义函数或 JavaScript代码行。 使用“调用 JavaScript”动作的具体操作步骤如下。 （1）选择一个网页元素对象，如“刷新”按钮。启用“行为”控制面 板。 （2）在“行为”控制面板中，单击“添加行为”按钮 ，从弹出的菜 单中选择“调用 JavaScript”动作，弹出“调用 JavaScript”对话框， 在文本框中输入JavaScript 代码或用户想要触发的函数名，单击“确定” 按钮完成设置。 （3）如果不是默认事件，则单击该事件，会出现箭头按钮，单击箭头 按钮，弹出包含全部事件的事件列表，用户可根据需要选择相应的事件 （4）按<F12>键浏览网页，当单击“关闭”按钮时，用户可以看到效 果。
Dreamweaver CS3网页设计案例教程 (4)
4.1 创业在线网页
案例分析 设计理念 操作步骤 相关工具
4.1.1 案例分析
本例是网络公司制作的创业在线网，该网站汇聚了大量创业项目，
打造专业性创业类互动行业平台。在网页设计布局上要清晰合理，
设计风格上要体现出创业的信息和国际化氛围。
4.1.2 设计理念
在网页设计、制作过程中，通过蓝色地图的效果营造出国际创业
平台的氛围。右上角的导航设计简单清晰，使浏览者一目了然。下
方橙色条的点缀让整个界面充满时代感。整体设计在视觉上相对集 中、醒目，画面清晰雅致。
创业在线网页效果图
4.1.3 操作步骤
1
2
3
4
4.1.4 相关工具
1. 超链接的概念与路径知识
超链接的主要作用是将物理上无序的内容组成一个有机的统一体。超 链接对象上存放某个网页文件的地址，以便用户打开相应的网页文件。在 浏览网页时，当用户将鼠标指针移到文字或图像上时，鼠标指针会改变形 状或颜色，这就是在提示用户：此对象为链接对象。单击这些链接对象， 就可完成打开链接的网页下载文件、打开邮件工具收发邮件等操作。
2.鼠标经过图像链接
“鼠标经过图像”是一种常用的互动技术，当鼠标指针经过图像时，图像 会随之发生变化。一般，“鼠标经过图像”效果由两张大小相等的图像组 成，一张称为主图像，另一张称为次图像。主图像是首次载入网页时显示 的图像，次图像是当鼠标指针经过时更换的另一张图像。“鼠标经过图像” 经常应用于网页中的按钮上。
第4章 超链接
本章简介：
网络中的每个网页都是通过超链接 的形式关联在一起的，超链接是网页 中最重要、最根本的元素之一。浏览 者可以通过鼠标单击网页中的某个元 素，轻松地实现网页之间的转换或下 载文件、收发邮件等。要实现超链接， 还要了解链接路径的知识。
dreamweavercs3第十三周综合实例
综合实例13——用Div+CSS制作茶文化网站首页在学习了“Div+CSS”的基础知识后，本例通过制作一个使用“Div+CSS”技术制作的茶文化网站首页来学习其在实际网页制作中的应用。
制作思路：本例主要用到Div的嵌套、浮动定位和三列式布局等知识。
为便于大家理解，我们将该网页的制作分为4部分来讲，包括上部、中部、下部和<body>样式。
制作步骤：一、制作网页上部1、将目录下“tea”文件夹拷贝至本地磁盘，然后在Dreamweaver中新建站点“tea”，将“tea”文件夹设置为站点根文件夹。
2、在站点“tea”中新建网页文档，并重命名为“index.html”。
3、在“文件”面板中双击打开新建的文档，在文档编辑窗口中定位插入点，然后将“插入”栏切换至“布局”，并单击其中的“插入Div标签”按钮。
4、打开“插入Div标签”对话框，在“ID”编辑框中输入ID名“top”，然后单击“新建CSS样式”按钮。
5、打开“新建CSS规则”对话框，选择器类型默认为“高级”，选择器名为“#top”，在“定义在”列表区选择“新建样式表文件”，然后单击“确定”按钮。
6、打开“保存样式表文件为”对话框，在“保存在”下拉列表中选择网站根文件夹，在文件名编辑框中输入文件名（此处为“s1”），然后单击“保存”按钮。
7、打开“#top的CSS规则定义”对话框，在左侧的“分类”列表中选择“方框”，设置“宽”为“1000”像素，然后单击“确定”按钮。
8、回到“插入Div标签”对话框，单击“确定”按钮插入Div标签。
然后切换至“常用”插入栏，并单击“图像”按钮。
9、打开“选择图像源文件”对话框，在“查找范围”下拉列表中选择图像所在文件夹（此处为网站根文件夹下的“images”文件夹），在文件列表中选择图像文件“main-01.jpg”，然后单击“确定”按钮。
10、插入图像，并将其上方的文本删除。
11、单击图像，然后按向右方向键【→】，将插入点置于图像右侧，接着参照前面的方法插入图像“main-02.jpg”。
网页设计与制作——Dreamweaver 8第9章_综合网站实例-制作时尚购物网站
9.6 制作各栏目页面
课堂小练习：
仿照本节实例中的购物网站制作一个用来 展示旅游线路的旅行社网站，自己动手练习动 态网页的制作方法。
第9章_综合网站实例－制作时尚购物网站 实 训
创建一个新闻发布系统，可以通过该系统对新闻进行浏览、发布、修改和删除。 实训目的 1．学会数据库的创建和连接。 2．掌握动态网页的制作方法。 实训内容与步骤 1. 网站规划。 提示：分析新闻发布系统应该包括哪些内容，如新闻的标题、发布日期、 作者等，以及用何种表单对象进行实现。 2. 建立网站文件夹，搜集相应素材，创建站点。 3. 数据库的创建和连接。 4. 新建动态网页模板 5. 利用模板创建各页面，并对内容进行合理布局。 6. 添加表单和表单对象。 7. 添加行为和服务器行为，如检查表单、插入记录等。 8. 测试当浏览者进行正常输入和错误输入时，动态页面是否能正常工作。
9.5 制作动态模板
【操作步骤】 1、新建一个名为gouwu.asp的ASP VBScript模板。 2、设置页面属性。 3、将光标放置在页面中，插入7行3列的表格。 4、插入图片并设置热点区域。 5、插入记录→模板对象→可编辑区域。 6、输入版权说明文字 。
9.6 制作各栏目页面
【操作步骤】 动态模板设计完成以后，接下来就可以利用模 板来制作网站页面。 （1）制作首页面 （2）制作公司简介页面 （3）制作联系我们页面 （4）制作产品秀场页面 （5）制作商品详细信息页面 （6）制作管理员登录页面 （7）制作商品列表管理页面 （8）制作添加商品信息页面 （9）制作修改商品信息页面 （10）制作删除商品信息页面
9.1设计要求 9.2购物网站规划 9.3建立站点 9.4数据库设计与连接 9.5 制作动态模板 9.6 制作各栏目页面
Dreamweaver网页设计案例教程 第11章 综合设计实训
11.1.2 【项目创意及制作】
1．设计素材 2．设计作品效果图ຫໍສະໝຸດ 11.1.2 【项目创意及制作】
3．步骤提示
1
2
3
4
11.2 游戏娱乐网页——锋七游戏网页
【项目背景及要求】 【项目创意及制作】
11.2.1 【项目背景及要求】
1．客户名称 锋七游戏公司。 2．客户需求 锋七游戏公司是全球领先的游戏互动娱乐平台、游戏玩家的网上乐园，汇集 最新最热门的网络游戏、最好玩的大型游戏、玩家真实交友等服务，现推出几款 新的游戏，要为其前期的宣传做准备，网站内容要求能够表现公司的特点，达到 宣传效果。 3．设计要求 （1）以浅色的背景与深色图像形成对比，突出前方的宣传主体。 （2）以观感强烈的游戏画面瞬间抓住人们的视线，让人印象深刻。 （3）整体设计整洁干净，方便人们的操作。 （4）以沉稳严谨的设计体现出公司的经营特色。 （5）设计规格为1600像素（宽）×1206像素（高）。
11.4.2 【项目创意及制作】
1．设计素材 2．设计作品
效果图
11.4.2 【项目创意及制作】
3．步骤提示
1
2
3
4
11.5 电子商务网页——家政无忧网页
【项目背景及要求】 【项目创意及制作】
11.5.1 【项目背景及要求】
1．客户名称 家政无忧服务有限公司。 2．客户需求 家政无忧服务有限公司是一家以日常保洁、家电清洗、干洗服务、新居开荒 为主要经营项目的专业家政服务公司。公司为扩大服务范围，使服务更便捷，需 要制作网站，网站要突出公司的优势，整体风格简洁大气。 3．设计要求 （1）网页整体风格简洁大气，突出家政服务的专业性。 （2）网页的内容以家居为主，画面和谐，具有特色。 （3）向客户传达真实的服务信息内容。 （4）画面表现出空间感与层次感，图文搭配协调。 （5）设计规格为1400像素（宽）×2082像素（高）。
DW网页设计—第19章综合案例四：使用Dreamweaver制作中文网站剖析
19.3.3 首页头部LOGO和BANNER部分的制 作
• 下面分别讲解详细的制作过程。 • 1．制作logo元素的样式 • 2．定义banner元素的样式
19.3.4 导航列表的制作
• 导航列表由两个部分组成的，分别是用来显示背景的父元 素，用来显示导航内容的列表元素。导航列表的效果如下 图所示。
19.2 制作首页的切图
•
19.3 制作站点首页头部
• 做好准备工作后，就可以开始制作页面了。同前面章节的 实例制作一样，首页头部也要分成几个部分进行制作。
19.3.1 首页头部的信息和基础样式的制作
• 首先建立index.html页面。关于建立文件的方法，前面章 节已经讲解过了，这里就不再讲解了。然后制作链接的样 式文件。 • 1．制作链接的外部样式文件 • 2．设置页面属性
19.2 制作首页的切图
• 在制作切图时，首先要区分出，页面内容和修饰的部分， 然后分析出，哪些修饰部分是可以用CSS代码来实现的， 哪些部分是可以用背景图片来实现的，哪些是需要知道详 细宽度的。在制作切图时，首先要把影响背景的文本内容 去掉，同时要尽量减少图片文件的数量。制作好的首页切 片，如下图所示。
19.4.3 制作主体左侧部分的样式
• 2．制作热点推荐部分 • 热点部分的显示效果如下图所示。
19.4.3 制作主体左侧部分的样式
• 3．制作咨询热线部分 • 咨询热线部分很简单，只需要添加一个div元素，同时定 义好行高，在内容中将标题和联系电话，用换行符号分隔 成两行就可以了。
19.4.4 制作主体右侧内容中“关于我们”的 部分
• 其具体的制作方法如下所示。 • 1．父元素menu的制作 • 2．列表元素的制作
19.4 制作首页的主体部分
Dreamweaver CS3网页设计案例教程 (9)
3.更新库文件
当修改库项目时，会更新使用该项目的所有文档。如果选择不更新，那 么文档将保持与库项目的关联，可以在以后进行更新。 的库项 目、修改库项目和更新库项目。
重命名库项目 删除库项目 重新创建已删除的库项目 修改库项目 更新库项目
9.2.5 实战演练-茶文化网页
制面板。
“资源”控制面板
2.创建模板
在Dreamweaver CS3中创建模板非常容易，如同制作网页一样。当用户创 建模板之后，Dreamweaver CS3自动把模板存储在站点的本地根目录下的 “Templates”子文件夹中，使用文件扩展名为.dwt。如果此文件夹不存在， 当存储一个新模板时，Dreamweaver CS3将自动生成此子文件夹。
对已有的模板进行修改 定义可编辑区域 定义可编辑的重复区域 定义可编辑的重复表格 取消可编辑区域标记
4.创建基于模板的网页 创建基于模板的网页有两种方法，一是使用“新建”命令创建 基于模板的新文档，二是应用“资源”控制面板中的模板来创建基 于模板的网页。 使用新建命令创建基于模板的新文档 应用“资源”控制面板中的模板创建基于模板的网页
基于选定内容创建库项目 创建空白库项目
2.向页面添加库项目
当向页面添加库项目时，将把实际内容以及对该库项目的引用一起插入 到文档中。此时，无需提供原项目就可以正常显示。在页面中插入库项目 的具体操作步骤如下。
（1）将插入点放在文档窗口中的合适位置。
（2）选择“窗口 > 资源”命令，启用“资源”控制面板。单击“库” 按钮，进入“库”面板。将库项目插入到网页中。
健康瑜珈网页效果图
9.2.3 操作步骤
1
2
3
4
9.2.4 相关工具
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
我们经常听说的Access、MySQL 、SQL server、Oracle等 都是数据库的管理系统，它们是用来创建数据库、存储数 据的，其中以Access数据库较为简单。
本例中数据库就用Access来创建，此数据库只 有一个表liuyan，表中含有如下字段： • 姓名（name）：用于存放留言者姓名。 • 地址（address）：用于存放留言者联系地址。 • 邮箱（email）：用于存放留言者电子邮箱地址。 • 内容（content）：用于存放留言者具体留言内容。 • 日期（lydate）：用于存放留言者发言时间和日期。
2.2．设计思路
2.3．动态站点
为了支持动态页面需要先创建一个动态站点， 需要注 意下面两处，其余操作与本地站点相似。
2.4．数据库面板
执行【窗口】/【数据库】命令，调出【数据库】面板 ， 然后链接数据库，具体操作参考范例。ຫໍສະໝຸດ 3、综合实例三：上传发布网站
• 3.1 • 3.2 • 3.3 • 3.4
• 链接检查：检查站点是否有断开的链接，并修复断开的链接。 由于其他站点也在重新设计、重新组织，所以用户所链接的页 面可能已被移动或删除。可运行链接检查报告对链接进行测试， 查找断开的、外部的和孤立的链接和修复断链接。
二、内容与形式统一。
设计网页不能只讲花哨的页面，过于强调独特而脱离 内容，或者只求内容而缺乏艺术的表现。要确保网页上 的每一个元素都有存在的必要性，不要为了炫耀而使用 冗余的技术，那样得到的效果可能会适得其反。
三、结构清晰，方便浏览。
在设计网页时，要强调页面各组成部分的共性因素或 者使各部分共同含有某种形式特征，同时要将各个组成 部分放在合理的位置上，这就是整体布局。一个合理的 布局可使网页内容显得清晰、有条不紊，并有很强的层 次感，方便查看内容。有了整体性强的布局，才能让浏 览者更容易理解和接受网页的主题。
Dreamweaver 8 中文版网页制作基础
第十八讲 综合实例
1、综合实例一：设计个人主页 2、综合实例二：制作留言本 3、综合实例三：上传发布网站
1、综合实例一：设计个人主页
➢ 1．设计分析 ➢ 2．准备工作 ➢ 3．设计制作
1.1. 设计分析
个人主页的设计说简单也简单，说难也难。说简单是指个人主页 的设计可以不受任何规范的约束，设计者可以完全按照自己的想法去 设计，去表现自己的创意和个性，再加上可视化的设计工具 ──Dreamweaver 8，让用户可以不必了解其中原理，不懂复杂的编程， 就可以轻松设计出自己的主页。说难是指要设计一个优秀的页面是需 要付出的努力的，它需要广泛的知识、审美的眼光、精心的投入，还 需要用户慢慢的体会与摸索。
网站检测 申请空间、域名 上传发布 网站宣传
3.1． 网站检测
在将自己的站点上传到互联网服务器供大家浏览之前，建议用户 先在本地对网站进行一次全面的测试，确保页面在目标浏览器中如 预期的那样显示和工作，而且页面中没有断开的链接，下载也不占 用太长时间。
一般测试站点可从如下几个方面入手： • 检查浏览器的兼容性：确保页面在目标浏览器中能够如预期的那样工作，
1.3．设计制作
具体制作参考范例解析18.1.2。
2、综合实例二：制作留言本
• 2.1 • 2.2 • 2.3 • 2.4
数据库 设计思路 动态站点 数据库面板
2.1．数据库
什么是数据库？实际上数据库就是为了实现一定的目的 按某种规则组织起来的数据集合。一个数据库可以包含多 个表，表是一种结构化的文件，可用来存储某种特定类型 的数据。表由多个列组成，一个列就是一个字段，一个字 段代表一种数据类型。表中的数据是按行有序存储的，一 行就是一条记录。
• (1) 文字 文字是页面信息最重要的部分，也是最常用的表达手段。文本内容可以自
己撰写或者从网络转载，转载时要注明出处。 • (2) 图像
如果页面中没有图像，就缺少生机，让读者兴趣减半，有时会没有读下去 的耐心。图像内容可以去借助软件自己制作，如Photoshop，或者从购买的素 材光盘复制，或者从网路上搜索下载一些共享的东西。网络的最大用处之一 就是资源共享，用户可以充分利用网络资源。从网络下载的图片最好自己处 理一下，以符合自己页面的表达要求。
• (3) 动画、音频、视频
为了使自己的页面充满活力，丰富多彩，用户可以在页面中适当的添加动 画、音频和视频等元素，用于表达主题的需要。
• (4) 建立站点
为了存放和管理页面文件和素材，需要先建立一个站点，例如我们创建一 个名为“myweb”的本地站点，同时为了避免文件和素材放置混乱，需要在根 目录myweb下，再建立几个子文件夹用于存放不同类别的素材，如创建 images文件夹用于存放图片，创建media文件夹用于存放多媒体文件等。
并确保这些页面在其他浏览器中要么工作正常，要么“明确地拒绝工作”。 页面在不支持样式、层、插件或 JavaScript 的浏览器中应清晰可读且功能正 常。对于在较早版本的浏览器中根本无法运行的页面，应考虑使用“检查 浏览器”行为，自动将访问者重定向到其他页面。 • 在浏览器中预览和测试页面：应尽可能多地在不同的浏览器和平台上预览 页面。 这样可是使得用户有机会查看布局、颜色、字体大小和默认浏览器 窗口大小等方面的区别，这些区别在目标浏览器检查中是无法预见的。
一般来说设计个人页面要注意以下几个问题 ：
一、定位明确，主题突出。
主题是指网页所言表现的主要思想内涵，它是网页的 灵魂。网站设计表达的是一定的意图和要求，有明确的 主题。设计者可以通过对网页构成元素进行条理性处理， 更好地营造符合设计目的的环境，突出主题，增强浏览 者对网页的注意力，增进对网页内容的理解。比如说可 以把主题定位在自我展示、交友、爱好或者摄影等比较 小的主题上，最好是自己感兴趣的内容。
四、文字与图像的编排适当。
页面中的文字和图片搭配要适当，不要整个页面全是 密密麻麻的文字，让人看了没有耐心读下去。同时还要 设计一下文字的样式，使文字易于阅读，不刺眼。图片 使用之前最好处理一下，以适合自己页面的要求。页面 中文字和图片最好是穿插混排。
1.2．准备工作
主页面的结构被定格以后，可以动手准备网页素材了。
本例中数据库就用Access来创建，此数据库只 有一个表liuyan，表中含有如下字段： • 姓名（name）：用于存放留言者姓名。 • 地址（address）：用于存放留言者联系地址。 • 邮箱（email）：用于存放留言者电子邮箱地址。 • 内容（content）：用于存放留言者具体留言内容。 • 日期（lydate）：用于存放留言者发言时间和日期。
2.2．设计思路
2.3．动态站点
为了支持动态页面需要先创建一个动态站点， 需要注 意下面两处，其余操作与本地站点相似。
2.4．数据库面板
执行【窗口】/【数据库】命令，调出【数据库】面板 ， 然后链接数据库，具体操作参考范例。ຫໍສະໝຸດ 3、综合实例三：上传发布网站
• 3.1 • 3.2 • 3.3 • 3.4
• 链接检查：检查站点是否有断开的链接，并修复断开的链接。 由于其他站点也在重新设计、重新组织，所以用户所链接的页 面可能已被移动或删除。可运行链接检查报告对链接进行测试， 查找断开的、外部的和孤立的链接和修复断链接。
二、内容与形式统一。
设计网页不能只讲花哨的页面，过于强调独特而脱离 内容，或者只求内容而缺乏艺术的表现。要确保网页上 的每一个元素都有存在的必要性，不要为了炫耀而使用 冗余的技术，那样得到的效果可能会适得其反。
三、结构清晰，方便浏览。
在设计网页时，要强调页面各组成部分的共性因素或 者使各部分共同含有某种形式特征，同时要将各个组成 部分放在合理的位置上，这就是整体布局。一个合理的 布局可使网页内容显得清晰、有条不紊，并有很强的层 次感，方便查看内容。有了整体性强的布局，才能让浏 览者更容易理解和接受网页的主题。
Dreamweaver 8 中文版网页制作基础
第十八讲 综合实例
1、综合实例一：设计个人主页 2、综合实例二：制作留言本 3、综合实例三：上传发布网站
1、综合实例一：设计个人主页
➢ 1．设计分析 ➢ 2．准备工作 ➢ 3．设计制作
1.1. 设计分析
个人主页的设计说简单也简单，说难也难。说简单是指个人主页 的设计可以不受任何规范的约束，设计者可以完全按照自己的想法去 设计，去表现自己的创意和个性，再加上可视化的设计工具 ──Dreamweaver 8，让用户可以不必了解其中原理，不懂复杂的编程， 就可以轻松设计出自己的主页。说难是指要设计一个优秀的页面是需 要付出的努力的，它需要广泛的知识、审美的眼光、精心的投入，还 需要用户慢慢的体会与摸索。
网站检测 申请空间、域名 上传发布 网站宣传
3.1． 网站检测
在将自己的站点上传到互联网服务器供大家浏览之前，建议用户 先在本地对网站进行一次全面的测试，确保页面在目标浏览器中如 预期的那样显示和工作，而且页面中没有断开的链接，下载也不占 用太长时间。
一般测试站点可从如下几个方面入手： • 检查浏览器的兼容性：确保页面在目标浏览器中能够如预期的那样工作，
1.3．设计制作
具体制作参考范例解析18.1.2。
2、综合实例二：制作留言本
• 2.1 • 2.2 • 2.3 • 2.4
数据库 设计思路 动态站点 数据库面板
2.1．数据库
什么是数据库？实际上数据库就是为了实现一定的目的 按某种规则组织起来的数据集合。一个数据库可以包含多 个表，表是一种结构化的文件，可用来存储某种特定类型 的数据。表由多个列组成，一个列就是一个字段，一个字 段代表一种数据类型。表中的数据是按行有序存储的，一 行就是一条记录。
• (1) 文字 文字是页面信息最重要的部分，也是最常用的表达手段。文本内容可以自
己撰写或者从网络转载，转载时要注明出处。 • (2) 图像
如果页面中没有图像，就缺少生机，让读者兴趣减半，有时会没有读下去 的耐心。图像内容可以去借助软件自己制作，如Photoshop，或者从购买的素 材光盘复制，或者从网路上搜索下载一些共享的东西。网络的最大用处之一 就是资源共享，用户可以充分利用网络资源。从网络下载的图片最好自己处 理一下，以符合自己页面的表达要求。
• (3) 动画、音频、视频
为了使自己的页面充满活力，丰富多彩，用户可以在页面中适当的添加动 画、音频和视频等元素，用于表达主题的需要。
• (4) 建立站点
为了存放和管理页面文件和素材，需要先建立一个站点，例如我们创建一 个名为“myweb”的本地站点，同时为了避免文件和素材放置混乱，需要在根 目录myweb下，再建立几个子文件夹用于存放不同类别的素材，如创建 images文件夹用于存放图片，创建media文件夹用于存放多媒体文件等。
并确保这些页面在其他浏览器中要么工作正常，要么“明确地拒绝工作”。 页面在不支持样式、层、插件或 JavaScript 的浏览器中应清晰可读且功能正 常。对于在较早版本的浏览器中根本无法运行的页面，应考虑使用“检查 浏览器”行为，自动将访问者重定向到其他页面。 • 在浏览器中预览和测试页面：应尽可能多地在不同的浏览器和平台上预览 页面。 这样可是使得用户有机会查看布局、颜色、字体大小和默认浏览器 窗口大小等方面的区别，这些区别在目标浏览器检查中是无法预见的。
一般来说设计个人页面要注意以下几个问题 ：
一、定位明确，主题突出。
主题是指网页所言表现的主要思想内涵，它是网页的 灵魂。网站设计表达的是一定的意图和要求，有明确的 主题。设计者可以通过对网页构成元素进行条理性处理， 更好地营造符合设计目的的环境，突出主题，增强浏览 者对网页的注意力，增进对网页内容的理解。比如说可 以把主题定位在自我展示、交友、爱好或者摄影等比较 小的主题上，最好是自己感兴趣的内容。
四、文字与图像的编排适当。
页面中的文字和图片搭配要适当，不要整个页面全是 密密麻麻的文字，让人看了没有耐心读下去。同时还要 设计一下文字的样式，使文字易于阅读，不刺眼。图片 使用之前最好处理一下，以适合自己页面的要求。页面 中文字和图片最好是穿插混排。
1.2．准备工作
主页面的结构被定格以后，可以动手准备网页素材了。