第2课定义站点与页面设置.ppt

1、什么是html语言,推荐学习网站： ,用html语言写简单的网站, 我是这个网页的标题 这是我的第一个网页。 ,用于段落(段落paragraph) 显示粗体文本(粗体的bold) 标题 子标题 子子标题 这句话应显示为斜体(斜体italic), 我的网站 标题 一些文字。 这句话应显示为斜体 子标题 一些文字。 ,链接标签,1、网页链接： 这是一个指向HTML.net的链接 注：元素a代表“链接（anchor），属性href代表“超文本引用（hypertext reference）,2、电子邮件链接： 给发电子邮件,链接标签,1、网页链接： 布啦布啦首页 2、电子邮件链接： 联系新浪,标题属性

2、： 如我跟HTML的友谊,颜色,十六进制（216）： 白色： #ffffff黑色： #000000红色： #ff0000兰色： #0000ff绿色： #00ff00黄色： #ffff00,HTML字体(Fonts),字体大小 用字体大小属性(size)来设定字体的大小。 这一段的字体大小的值是2 用face属性来设定字体风格 这一段的字体风格是arial ,用颜色属性(color)来设定字体颜色。 这一段的字体颜色是红 这一段的字体大小的值是2的红色字,表格,用于创建表格的3个基本元素是： 首标签和尾标签分别表示一个表格的开始与结束。这是不难理解的。 tr是“table row（表格行）”的缩

3、写，用于表示一行的开始和结束。这也容易理解。 td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。这些都是容易理解的。,无边界的表格（22）, 单元格1 单元格2 单元格3 单元格4 ,有边界的表格, 第一 行 第二 行 ,给表格设置背景颜色, 第一 行 第二 行 ,单元格背景色、背景图片, 第一 行 第二 行 ,Cellspacing属性表示单元格之间的距离,Cellspacing属性值设为0的表格： 第一行 第二 行 ,Cellspacing属性表示单元格之间的距离,Cellspacing属性值设为20的表格： 第一 行 第二行 ,页面布局,这

4、里的文字大小为20 这里的文字字体为黑体 这里是文字大小为20、采用黑体的文字,一个简单的css页面, 我的第一个CSS页面 h1 font-size:30px; font-family:宋体; h2 font-size:15px; font-family:黑体; p font-size:8px; font-family:隶书; 我的第一个CSS页面 欢迎参观我的第一个CSS页面 你可以在这里了解CSS的原理 ,Web标准及验证, 网页标题 一些文字 ,你可以以多种不同的方式来编写HTML；同时，浏览器也可以以多种不同的方式来理解HTML。你可以认为HTML有很多种方言。这就是为什么某些网站会

5、在不同的浏览器上显示出不同效果的原因。 为了解决这一问题，HTML发明人Tim Berners-Lee先生创办了万维网联盟（World Wide Web Consortium，W3C）来致力于制订通用的HTML标准。,只要你遵循W3C标准来编写HTML，你的网页将永远能在所有浏览器上显示出来。幸运的是，你在本教程学到的是XHTML，它是最新的、更严格、更纯正的HTML版本。,第2课 定义站点与页面设置,内容提要 学习Dreamweaver的三大原则 定义一个新站点，向导与高级模式 修改页面设置的各项参数 切换页面设置窗口的两种形式 学习目标 牢记使用Dreamweaver的各项原则，掌握如何去

6、建立和管理站点。掌握如何在地图模式搭建网站结构。学习如何在页面设置的HTML和CSS模式下修改各项参数。,启动与退出Dreamweaver MX 8,启动Dreamweaver MX 8 退出Dreamweaver MX 8,三大原则,建立网页之前要先构建一个新的网站 文件名和各种对象的id名要尽量用英文，避免使用中文 及时存盘（有些效果没有显示等）,Dreamweaver MX 8的工作界面,Dreamweaver MX 8的工作界面,插入栏 “文档”工具栏 标准工具栏 “属性”面板 浮动面板组,1.5.1 插入栏,插入栏可方便用户在制作网页过程中快速插入网页元素。Dreamweaver提供

7、了“常用”、“布局”、“表单”、“文本”、HTML、“应用程序”、“Flash元素”、“收藏”8个插入栏，通常默认的是“常用”插入栏。切换插入栏的方法很简单，单击插入栏的 按钮，在弹出的菜单中选择相应的命令即可。,15.2 “文档”工具栏,“文档”工具栏可用于进行工作布局切换、检查浏览器错误和文档的预览等操作。,1.5.3标准工具栏,标准工具栏可以进行新建文档，打开、保存文件。剪切、複製、粘貼文字。,1.5.3 “属性”面板,“属性”面板用于查看和设置所选对象的各种属性。单击其右下角的 按钮可打开其他的设置项目，此时 按钮变为 按钮再单击该按钮可将其还原。,1.5.4 浮动面板组,浮动面板组位

8、于编辑窗口右侧，是浮动面板的集合。浮动面板组是站点管理、事件添加等操作的场所。在浮动面板组中单击所需面板栏的 图标可展开该面板。展开面板后原来的 图标变为 形状，单击 图标则关闭该面板，只显示其名称。若需显示其他浮动面板，可选择“窗口”菜单中的相应命令。,站点的搭建与管理,规划站点结构 网站是多个网页的集合，其包括一个首页和若干个分页，这种集合不是简单的集合。为了达到最佳效果，在创建任何 Web 站点页面之前，要对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及各页是如何互相连接起来的。 我们可以通过把文件分门别类的放置在各自的文件夹里，使网站的结构清晰明了，

9、便于管理和查找。,定义新站点,方法1： 窗口新建站点 注：默认图像的文件夹images 方法2：文件面板 注：文件面板的应用 1、本地视图下拉的菜单 2、文件面板下可建立网页，文件夹等 3、“展开与显示远端站点”按钮的应用,网站地图的使用方法,文件夹的建立Flash，music, css等。如不需要可右击删除。 首页index.html或default.html(右击设为首页) （注：一般一个网站只有一个首页）,方便创建链接图,Index.html,Index.html,blue.html,red.html,pink.html,black.html,定义远程文件夹,需要设置一个远程文件夹，以便

10、发布您的 Web 页。远程文件夹通常具有与本地文件夹相同的名称，因为远程站点通常完全就是本地站点的副本。也就是说，您发布到远程文件夹的文件和子文件夹是本地创建的文件和子文件夹的副本。,利用模板快速制作一网页,注：若没有出现上面的界面可以用以下 编辑首选参数常规（显示起始页）重启DW 先建站点入门页面以餐饮（日历）为例 做一个生活学习备忘日历 注编码改为UTF8,在您的远程服务器上，在服务器的 Web 根文件夹中创建一个空文件夹。 将新的空文件夹命名为 与本地根文件夹的名称相同,修改网页标题,查看显示网页标题修改网页标题 右击作为根查看,页面属性,必须先修改页面属性（Ctrl+J） 注意：1、必须在英文状态下才能用快捷键 2、页面属性基于CSS样式表（或 HTML） 字体的设置：注中文一般选用宋体，黑体，仿宋体，楷体。（字体不要太花俏，大约90%的网页使用宋体） 字体的添加,页面属性,外观 链接 标题 36 24 18 16 标题/编码 跟踪图像,HTML基础, html语言的开始 文件头部的开始 文件头部的内容 文件头部的结束