《dreamweaver8》由会员分享，可在线阅读，更多相关《dreamweaver8（485页珍藏版）》请在金锄头文库上搜索。
1、本章要点,了解网页的设计理念 了解网页的设计风格 了解网页的创意设计 了解网页的色彩搭配 熟悉Dreamweaver 8的工作环境,第1章 网页设计简介,1.1 网页设计概述 1.2 初识Dreamweaver 8,1.1 网页设计概述,1.1.1 网页设计遵循的理念 1.1.2 网站整体风格的确定 1.1.3 网页创意 1.1.4 网页色彩搭配简介 1.1.5 常用网页设计工具简介,1.1.1 网页设计遵循的理念,（1）考虑访问者的带宽问题。 （2）版面布局合理。 （3）网站标志的设计。 （4）站点内容要精、专，及时更新。,1.1.2 网站整体风格的确定,网站的风格 指网站的整体形象给访问者
2、的综合感受。 包含的因素 网站的标志设计、色彩、版面布局、浏览方式、交互性、文字和价值等。 例如： 儿童网站“WaWaYaYa”是生动活泼的；大多商业网站如IBM，是专业严肃的。,http:/ （2）反应网站精髓的标语并动态显示。 （3）导航放在每一张网页的相同位置。 （4）确定网站的主体颜色并注意颜色。 （5）页面的布局一般采用左边导航右边文字，或者上面导航下面文字的方法，或两者结合使用。 （6）内容结构简单且分类要简而精。,http:/ 网页创意,什么是创意？ （1）创意是传达信息的一种特殊手段。 （2）创意是将现有的要素重新组合。,1.1.4 网页色彩搭配简介,网页色彩搭配应考虑以下因素
3、： （1）色彩的鲜明性。 （2）色彩的独特性。 （3）色度的合适性。 （4）色彩的代表性。,1.1.5 常用网页设计工具简介,1网页设计软件Dreamweaver 2网络动画制作软件Flash 3网络图像处理软件Fireworks,1网页设计软件Dreamweaver,Dreamweaver是一个方便的网页制作工具，支持最新的DHTMLTT和CSS标准。 它能够快速高效地创建极具表现力和动感效果的网页，同时使制作过程简单化。 不仅提供了强大的网页编辑功能，而且拥有完善的站点管理机制，是一个集网页制作和站点管理于一身的网页创作工作。,2网络动画制作软件Flash,Flash是最流行的矢量动画制作
4、软件之一，它只用少量矢量数据就可以描述一个复杂的对象，而且占用的存储空间少，非常适合在网络上使用。 运用它可以制作出栩栩如生、动感十足的动画作品。,3网络图像处理软件Fireworks,Fireworks是专门针对Web而设计的图像处理软件，因此它对图像进行了充分的优化。 利用Fireworks生成的网页图像的色彩也符合Web标准。设计时看到的颜色就是将来网页上显示的颜色，制作起来非常直观。,1.2 初识Dreamweaver 8,1.2.1 工作界面的选择 1.2.2 主窗口简介,1.2.1 工作界面的选择,启动Dreamweaver 8后，首先出现的是初始化界面。 接着弹出【工作区设置】对
5、话框。 如果习惯编写代码的，可以选择【编码器】单选钮。 这里选择【设计者】单选钮，然后单击【确定】按钮。,1.2.2 主窗口简介,启动Dreamweaver 8后，窗口中央会出现起始页窗口。 如果选中左下角的【不再显示此对话框】复选框，下次启动Dreamweaver 8将不再显示该起始页。 单击【创建新项目】中的【HTML】，将打开Dreamweaver的工作界面。,起始页画面,主窗口,第2章 网页设计基础简介,本章要点,网站草图的设计 站点的建立 添加网页基本元素 超级链接基础,2.1 站点概述和网站的整体规划,2.1.1 站点概述 2.1.2 设计草图,2.1.1 站点概述,1站点的定义
6、2本地站点和远端站点 3站点根目录 4Internet服务程序,1站点的定义,站点是存放网站上所有文档和文件的地方，是一系列文档的组合，将各种信息制作成网页，以超级链接的形式组织起来，利用浏览器用户可以从一个文档跳转到另一个文档，并通过这样的操作实现对整个网站的浏览。,2本地站点和远端站点,本地站点 对于浏览网页的用户来说，他们所使用的计算机被称为本地计算机。我们把存放本地计算机上的站点和相关文档称为本地站点。 远端站点 在因特网上浏览的各种网站，实际上是用浏览器打开存放在服务器上的相关站点和文档，我们把这样的站点和相关文档称为远端站点。,3站点根目录,若站点文件较多，通常在站点根目录中创建几
7、个子文件夹，将所有相关文件分门别类存放在子文件夹中。 若站点的文件较少，只用一个站点根目录即可。 网站上所有的资源都保存在站点内。,4Internet服务程序,在本地机上安装Internet服务程序，可以将本地计算机与Internet服务器合二为一，不需要连入Internet就能测试站点。 对于ASP而言，微软公司的IIS是必不可少的Internet服务程序。,2.1.2 设计草图,制作主页前需要总体规划一下网站的结构。 根据原始素材来确定网站需要制作的内容。 在网站草图中的每一个模块下还可以再扩充内容。,例如：小慧的作品很多，需要分类。在制作网站前先画出网站的草图。,2.2 站点的建立,1站
8、点建立的步骤 2文件夹的建立 3网页文件的创建,1站点建立的步骤,2文件夹的建立,3网页文件的创建,2.3 页面的架构,2.3.1 视图概述 2.3.2 表格的简介 2.3.3 图像基本操作简介 2.3.4 文本的概述 2.3.5 水平线和日期 2.3.6 背景图片和背景音乐,2.3.1 视图概述,【代码】 【显示代码视图】 可以直接编辑网页源代码； 【设计】 【显示设计视图】 能方便我们美化网页和合理地布局网页； 【拆分】 【显示代码视图和设计视图】让我们能够更好地理解源代码，提高编程能力。,2.3.2 表格的简介,表格的基本属性如下：,【行数】确定行数； 【列数】确定列数； 【表格宽度】设
9、置表格的宽度，有“像素”和“百分比”两个选项，一般选择【像素】。 【边框粗细】以“像素”为单位设置表格边框的宽度，输入数字0就表示没有边框。 【单元格边距】指单元格内容和单元格边框之间的距离，以“像素”为单位。 【单元格间距】指单元格和单元格之间的距离，以“像素”为单位。 【辅助功能】可以输入表格的标题、选择标题的对齐模式、输入摘要等信息。,例如：将行数和列数都设为2，表格宽度设为600，单元格边距和单元格间距都设为30，其他不变，设置完后单击【确定】按钮。在第一个单元格内输入“文字”二字，就可以看到表格的效果。,2.3.3 图像基本操作简介,向表格中插入图片的方法 方法一：选择“logo.g
10、if”文件，按住鼠标左键不放，将其拖曳到单元格中。 方法二：将光标移到要插入图像的位置，在【常用】工具栏中，单击【图像】按钮。 方法三：执行【插入】|【图像】命令，在弹出【选择图像源文件】对话框中选择 “logo.gif”文件。,例如：将logo.gif插入表格的第1行第1列的单元格中。,2.3.4 文本的概述,1输入网页的标题 2插入特殊文本字符 3文本简单的排版 4设置字体、颜色、大小、对齐方式和样式 5页面属性,1输入网页的标题,首先给网页加上一个标题“小慧的家。,2插入特殊文本字符,切换到【插入】工具栏的【文本】项： 单击【字符】按钮右边的下拉按钮进行选择。 单击 “回车换行符”右侧的
11、下拉按钮，在弹出的菜单中选择【其他字符】命令，在弹出的【插入其他字符】对话框中选择特殊字符。 选择一种中文输入法，右击小键盘图标，选择菜单中的【特殊符号】，在弹出的特殊符号键盘上单击特殊符号即可实现插入。,3文本简单的排版（一）,解决行间距过大的方法： 单击文本工具栏中【字符】按钮右边的小三角按钮，在弹出的菜单中选择的【换行符】命令。 或者将光标移动到要换行的位置，执行【插入】|【HTML】|【特殊字符】|【换行符】命令； 可以使用Shift+Enter快捷键。,3文本简单的排版（二）,解决文章开头空两格的方法： 单击【字符】按钮右边的小三角按钮，在弹出的菜单中选择【不换行空格】命令； 或者执
12、行【插入】|【HTML】|【特殊字符】|【不换行空格】命令； 也可以使用快捷键Ctrl+Shift+Space。 说明：每执行一次该命令，只空半个汉字的位置。 还可以选择一种中文输入法，将半角状态切换到全角状态，按一下空格就可以空出一个汉字的位置。,4设置字体、颜色、大小、对齐方式 和样式,选中网页文件中的文字，通过调整【属性】面板中各个参数可以改变文字的字体、颜色、大小和对齐方式。,例如：设置“小小故事给予”标题的样式,5页面属性,正文的文字可以通过【页面属性】来完成设置。 执行主菜单下【修改】|【页面属性】命令，打开【页面属性】对话框进行设置。 或者单击【属性】面板上的【页面属性】按钮，打
13、开【页面属性】对话框进行设置。,例如：将【页面字体】设定为宋体，【大小】设定为16像素，【文本颜色】设定为蓝色，将【左边距】和【右边距】都设定为20像素，【上边距】和【下边距】都设定为0像素。,2.3.5 水平线和日期,插入水平线 执行【插入】|【HTML】|【水平线】命令，可以在编辑页面中插入一个水平线。 插入日期2011年10月9日星期日 执行【插入】|【日期】命令； 或者单击【常用】工具栏上的日期按钮，在弹出的【插入日期】对话框中进行设置。,2.3.6 背景图片和背景音乐,插入背景图片 在【页面属性】对话框的【外观】分类中，单击【背景图像】后面的【浏览】按钮，选择“images”目录下的
14、“back.gif”文件，单击【确定】按钮即可插入插入背景图片。 插入背景音乐 切换到代码视图，在与之间加入即可。,2.4 超级链接简介,2.4.1 URL概述 2.4.2 超级链接 2.4.3 路径,2.4.1 URL概述,URL是Uniform Resoure Locator的缩写，中文意思是“统一资源定位器”，指WWW网页的地址。 一个完整的URL由以下几个部分组成： 资源类型+主机名+子目录（可选）+文件名（可选）,2.4.2 超级链接,超级链接 是“超文本链接”的缩略语，它提供了通过单击超级链接点将用户从WWW文档某一部分连接到不同文档或同一文档的其他部分，可以迅速从服务器的某一页转
15、到另一页，也可以转到其他服务器页。 Microsoft Internet Explorer 是一个Web浏览器，它可以搜索、查看和下载因特网上的各种信息。,2.4.3 路径,1绝对路径 2相对路径,1绝对路径,绝对路径 是包含服务器协议的完全路径，是一种与源地址文件无关的路径形式。 URL 例如：http:/ 绝对路径的优缺点 优点是能够准确地找到相关文件；缺点是路径太多，容易出错，如果目标文档被移动，则链接无效。,例如： back.gif指定的就是当前文件夹内的图片文档； /back.gif指定的则是当前文件夹上级目录中的图片文档； 而images/back.gif则指定了当前文件夹“ima
16、ges”中的图片文档。,2相对路径,与文档相对的路径 是指和当前文档所在的文件夹相对的路径。 与根目录相对的路径 站点上的所有可公开的文件都存放在站点的根目录下。与根目录相对的路径使用斜杠，以告诉服务器从根目录开始。 例如： /images/back.gif将链接到站点根目录“images”文件夹下的“back.gif”文件。,第3章 表格,本章要点,表格的创建与编辑 格式化表格 插入Flash动画 合理布局制作一个页面,3.1 创建表格与编辑表格,3.1.1 表格的创建 3.1.2 编辑表格与排版 3.1.3 格式化表格,3.1.1 表格的创建,表格的三个基本组成部分 行，表格中的水平间隔。 列，表格
