Dreamweaver网页设计-综合实例
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• (1) 文字 文字是页面信息最重要的部分，也是最常用的表达手段。文本内容可以自
己撰写或者从网络转载，转载时要注明出处。 • (2) 图像
如果页面中没有图像，就缺少生机，让读者兴趣减半，有时会没有读下去 的耐心。图像内容可以去借助软件自己制作，如Photoshop，或者从购买的素 材光盘复制，或者从网路上搜索下载一些共享的东西。网络的最大用处之一 就是资源共享，用户可以充分利用网络资源。从网络下载的图片最好自己处 理一下，以符合自己页面的表达要求。
并确保这些页面在其他浏览器中要么工作正常，要么“明确地拒绝工作”。 页面在不支持样式、层、插件或 JavaScript 的浏览器中应清晰可读且功能正 常。对于在较早版本的浏览器中根本无法运行的页面，应考虑使用“检查 浏览器”行为，自动将访问者重定向到其他页面。 • 在浏览器中预览和测试页面：应尽可能多地在不同的浏览器和平台上预览 页面。 这样可是使得用户有机会查看布局、颜色、字体大小和默认浏览器 窗口大小等方面的区别，这些区别在目标浏览器检查中是无法预见的。
2.2．设计思路
2.3．动态站点
为了支持动态页面需要先创建一个动态站点， 需要注 意下面两处，其余操作与本地站点相似。
2.4．数据库面板
执行【窗口】/【数据库】命令，调出【数据库】面板 ， 然后链wk.baidu.com数据库，具体操作参考范例。
3、综合实例三：上传发布网站
• 3.1 • 3.2 • 3.3 • 3.4
二、内容与形式统一。
设计网页不能只讲花哨的页面，过于强调独特而脱离 内容，或者只求内容而缺乏艺术的表现。要确保网页上 的每一个元素都有存在的必要性，不要为了炫耀而使用 冗余的技术，那样得到的效果可能会适得其反。
三、结构清晰，方便浏览。
在设计网页时，要强调页面各组成部分的共性因素或 者使各部分共同含有某种形式特征，同时要将各个组成 部分放在合理的位置上，这就是整体布局。一个合理的 布局可使网页内容显得清晰、有条不紊，并有很强的层 次感，方便查看内容。有了整体性强的布局，才能让浏 览者更容易理解和接受网页的主题。
Dreamweaver 8 中文版网页制作基础
第十八讲 综合实例
1、综合实例一：设计个人主页 2、综合实例二：制作留言本 3、综合实例三：上传发布网站
1、综合实例一：设计个人主页
➢ 1．设计分析 ➢ 2．准备工作 ➢ 3．设计制作
1.1. 设计分析
个人主页的设计说简单也简单，说难也难。说简单是指个人主页 的设计可以不受任何规范的约束，设计者可以完全按照自己的想法去 设计，去表现自己的创意和个性，再加上可视化的设计工具 ──Dreamweaver 8，让用户可以不必了解其中原理，不懂复杂的编程， 就可以轻松设计出自己的主页。说难是指要设计一个优秀的页面是需 要付出的努力的，它需要广泛的知识、审美的眼光、精心的投入，还 需要用户慢慢的体会与摸索。
• 链接检查：检查站点是否有断开的链接，并修复断开的链接。 由于其他站点也在重新设计、重新组织，所以用户所链接的页 面可能已被移动或删除。可运行链接检查报告对链接进行测试， 查找断开的、外部的和孤立的链接和修复断链接。
四、文字与图像的编排适当。
页面中的文字和图片搭配要适当，不要整个页面全是 密密麻麻的文字，让人看了没有耐心读下去。同时还要 设计一下文字的样式，使文字易于阅读，不刺眼。图片 使用之前最好处理一下，以适合自己页面的要求。页面 中文字和图片最好是穿插混排。
1.2．准备工作
主页面的结构被定格以后，可以动手准备网页素材了。
一般来说设计个人页面要注意以下几个问题 ：
一、定位明确，主题突出。
主题是指网页所言表现的主要思想内涵，它是网页的 灵魂。网站设计表达的是一定的意图和要求，有明确的 主题。设计者可以通过对网页构成元素进行条理性处理， 更好地营造符合设计目的的环境，突出主题，增强浏览 者对网页的注意力，增进对网页内容的理解。比如说可 以把主题定位在自我展示、交友、爱好或者摄影等比较 小的主题上，最好是自己感兴趣的内容。
我们经常听说的Access、MySQL 、SQL server、Oracle等 都是数据库的管理系统，它们是用来创建数据库、存储数 据的，其中以Access数据库较为简单。
本例中数据库就用Access来创建，此数据库只 有一个表liuyan，表中含有如下字段： • 姓名（name）：用于存放留言者姓名。 • 地址（address）：用于存放留言者联系地址。 • 邮箱（email）：用于存放留言者电子邮箱地址。 • 内容（content）：用于存放留言者具体留言内容。 • 日期（lydate）：用于存放留言者发言时间和日期。
• (3) 动画、音频、视频
为了使自己的页面充满活力，丰富多彩，用户可以在页面中适当的添加动 画、音频和视频等元素，用于表达主题的需要。
• (4) 建立站点
为了存放和管理页面文件和素材，需要先建立一个站点，例如我们创建一 个名为“myweb”的本地站点，同时为了避免文件和素材放置混乱，需要在根 目录myweb下，再建立几个子文件夹用于存放不同类别的素材，如创建 images文件夹用于存放图片，创建media文件夹用于存放多媒体文件等。
网站检测 申请空间、域名 上传发布 网站宣传
3.1． 网站检测
在将自己的站点上传到互联网服务器供大家浏览之前，建议用户 先在本地对网站进行一次全面的测试，确保页面在目标浏览器中如 预期的那样显示和工作，而且页面中没有断开的链接，下载也不占 用太长时间。
一般测试站点可从如下几个方面入手： • 检查浏览器的兼容性：确保页面在目标浏览器中能够如预期的那样工作，
1.3．设计制作
具体制作参考范例解析18.1.2。
2、综合实例二：制作留言本
• 2.1 • 2.2 • 2.3 • 2.4
数据库 设计思路 动态站点 数据库面板
2.1．数据库
什么是数据库？实际上数据库就是为了实现一定的目的 按某种规则组织起来的数据集合。一个数据库可以包含多 个表，表是一种结构化的文件，可用来存储某种特定类型 的数据。表由多个列组成，一个列就是一个字段，一个字 段代表一种数据类型。表中的数据是按行有序存储的，一 行就是一条记录。
己撰写或者从网络转载，转载时要注明出处。 • (2) 图像
如果页面中没有图像，就缺少生机，让读者兴趣减半，有时会没有读下去 的耐心。图像内容可以去借助软件自己制作，如Photoshop，或者从购买的素 材光盘复制，或者从网路上搜索下载一些共享的东西。网络的最大用处之一 就是资源共享，用户可以充分利用网络资源。从网络下载的图片最好自己处 理一下，以符合自己页面的表达要求。
并确保这些页面在其他浏览器中要么工作正常，要么“明确地拒绝工作”。 页面在不支持样式、层、插件或 JavaScript 的浏览器中应清晰可读且功能正 常。对于在较早版本的浏览器中根本无法运行的页面，应考虑使用“检查 浏览器”行为，自动将访问者重定向到其他页面。 • 在浏览器中预览和测试页面：应尽可能多地在不同的浏览器和平台上预览 页面。 这样可是使得用户有机会查看布局、颜色、字体大小和默认浏览器 窗口大小等方面的区别，这些区别在目标浏览器检查中是无法预见的。
2.2．设计思路
2.3．动态站点
为了支持动态页面需要先创建一个动态站点， 需要注 意下面两处，其余操作与本地站点相似。
2.4．数据库面板
执行【窗口】/【数据库】命令，调出【数据库】面板 ， 然后链wk.baidu.com数据库，具体操作参考范例。
3、综合实例三：上传发布网站
• 3.1 • 3.2 • 3.3 • 3.4
二、内容与形式统一。
设计网页不能只讲花哨的页面，过于强调独特而脱离 内容，或者只求内容而缺乏艺术的表现。要确保网页上 的每一个元素都有存在的必要性，不要为了炫耀而使用 冗余的技术，那样得到的效果可能会适得其反。
三、结构清晰，方便浏览。
在设计网页时，要强调页面各组成部分的共性因素或 者使各部分共同含有某种形式特征，同时要将各个组成 部分放在合理的位置上，这就是整体布局。一个合理的 布局可使网页内容显得清晰、有条不紊，并有很强的层 次感，方便查看内容。有了整体性强的布局，才能让浏 览者更容易理解和接受网页的主题。
Dreamweaver 8 中文版网页制作基础
第十八讲 综合实例
1、综合实例一：设计个人主页 2、综合实例二：制作留言本 3、综合实例三：上传发布网站
1、综合实例一：设计个人主页
➢ 1．设计分析 ➢ 2．准备工作 ➢ 3．设计制作
1.1. 设计分析
个人主页的设计说简单也简单，说难也难。说简单是指个人主页 的设计可以不受任何规范的约束，设计者可以完全按照自己的想法去 设计，去表现自己的创意和个性，再加上可视化的设计工具 ──Dreamweaver 8，让用户可以不必了解其中原理，不懂复杂的编程， 就可以轻松设计出自己的主页。说难是指要设计一个优秀的页面是需 要付出的努力的，它需要广泛的知识、审美的眼光、精心的投入，还 需要用户慢慢的体会与摸索。
• 链接检查：检查站点是否有断开的链接，并修复断开的链接。 由于其他站点也在重新设计、重新组织，所以用户所链接的页 面可能已被移动或删除。可运行链接检查报告对链接进行测试， 查找断开的、外部的和孤立的链接和修复断链接。
四、文字与图像的编排适当。
页面中的文字和图片搭配要适当，不要整个页面全是 密密麻麻的文字，让人看了没有耐心读下去。同时还要 设计一下文字的样式，使文字易于阅读，不刺眼。图片 使用之前最好处理一下，以适合自己页面的要求。页面 中文字和图片最好是穿插混排。
1.2．准备工作
主页面的结构被定格以后，可以动手准备网页素材了。
一般来说设计个人页面要注意以下几个问题 ：
一、定位明确，主题突出。
主题是指网页所言表现的主要思想内涵，它是网页的 灵魂。网站设计表达的是一定的意图和要求，有明确的 主题。设计者可以通过对网页构成元素进行条理性处理， 更好地营造符合设计目的的环境，突出主题，增强浏览 者对网页的注意力，增进对网页内容的理解。比如说可 以把主题定位在自我展示、交友、爱好或者摄影等比较 小的主题上，最好是自己感兴趣的内容。
我们经常听说的Access、MySQL 、SQL server、Oracle等 都是数据库的管理系统，它们是用来创建数据库、存储数 据的，其中以Access数据库较为简单。
本例中数据库就用Access来创建，此数据库只 有一个表liuyan，表中含有如下字段： • 姓名（name）：用于存放留言者姓名。 • 地址（address）：用于存放留言者联系地址。 • 邮箱（email）：用于存放留言者电子邮箱地址。 • 内容（content）：用于存放留言者具体留言内容。 • 日期（lydate）：用于存放留言者发言时间和日期。
• (3) 动画、音频、视频
为了使自己的页面充满活力，丰富多彩，用户可以在页面中适当的添加动 画、音频和视频等元素，用于表达主题的需要。
• (4) 建立站点
为了存放和管理页面文件和素材，需要先建立一个站点，例如我们创建一 个名为“myweb”的本地站点，同时为了避免文件和素材放置混乱，需要在根 目录myweb下，再建立几个子文件夹用于存放不同类别的素材，如创建 images文件夹用于存放图片，创建media文件夹用于存放多媒体文件等。
网站检测 申请空间、域名 上传发布 网站宣传
3.1． 网站检测
在将自己的站点上传到互联网服务器供大家浏览之前，建议用户 先在本地对网站进行一次全面的测试，确保页面在目标浏览器中如 预期的那样显示和工作，而且页面中没有断开的链接，下载也不占 用太长时间。
一般测试站点可从如下几个方面入手： • 检查浏览器的兼容性：确保页面在目标浏览器中能够如预期的那样工作，
1.3．设计制作
具体制作参考范例解析18.1.2。
2、综合实例二：制作留言本
• 2.1 • 2.2 • 2.3 • 2.4
数据库 设计思路 动态站点 数据库面板
2.1．数据库
什么是数据库？实际上数据库就是为了实现一定的目的 按某种规则组织起来的数据集合。一个数据库可以包含多 个表，表是一种结构化的文件，可用来存储某种特定类型 的数据。表由多个列组成，一个列就是一个字段，一个字 段代表一种数据类型。表中的数据是按行有序存储的，一 行就是一条记录。