《3.页面制作培训--第一课.pptVIP

页面制作培训 第一课 课程介绍及DREAMWEAVER简介 课程内容介绍 本课程共5课时，包括5个方面： 一.DREAMWEAVER入门： （1）简单介绍DW各项基本操作（熟悉各种属性面板、常用功能） （2）页面构成部分、如何创建新页面、新建页面中需要注意的问题、浏览器版本问题 （3）代码标签的构成 （4）初级代码介绍 二.代码认识与CSS教学： (1)代码重温，回忆所学代码 (2)学习IFRAME的使用 (3)CSS教学，学习如何创建style属性，学习调用CSS的两种方法 (4)学习常用CSS代码：包括如何修改文字属性、表格属性、超链接属性 三.SEO初级教程与框架构建 （1）继续学习各种CSS代码 （2）通过运用各种代码标签，以table作为主要框架搭建页面 （3）重点讲解table在日常使用中易烦错误 （4）了解SEO的基本知识以及在页面代码中的基本运用 四.页面框架制作软件AXURE5.5教学 （1）AXURE5.5的初步了解 （2）如何搭建页面 （3）如何制作一份标准化的页面框架图 （4）模板搭建技巧 五.构图技巧 （1）制作单线表格 （2）PS的图片简单处理 （3）超链接属性的灵活运用 （4）日常页面制作必备工具 （5）常用模板参考网站 第一课 DREAMWEAVER入门 一.DREAMWEAVER能够做什么？ 答：DREAMWEAVER通常会被简称为DW，是用作制作或者修改页面代码的常用工具之一。 二.如何操作DW 2.创建一个新页面 点击 后就能创建一个新页面，得到以下界面 3.页面的构成部分 3.属性区域 4.新建页面后应当注意的问题 5.页面代码在何处编写 6.如何保存及预览 当页面代码编写好后，可直接使用快捷键CTRL+S进行保存或者在文件---另存为中保存页面 页面保存后可直接按F12键，浏览器会自动打开当前页面进行预览。 代码的基本构成 一个页面之所以能显示，全部是由各种各样的代码标签去实现 1.代码的结构 基本上，大部分代码都有统一的格式，由起始代码和结束代码组成，成对出现，缺一不可，如：table/ table,p/ p,tr/tr。只有极个别的代码标签是单一代码，即起始代码与结束代码重合，如img src=..... / 2.起始代码与结束代码 起始代码：告诉浏览器该代码从哪里开始，其格式为：table,p,tr,td 结束代码：告诉浏览器该代码在哪里结束，其格式为：/ table,/ p,/ tr,/ td 实际上，起始代码与结束代码的区别就是结束代码处多了/。 各种常用代码介绍 p/p:段落代码标签，其意义可理解成自然段，标签之间填写文章内容。如： img：图片标签，表示插入一张图片。如： 同样道理，两行两列的写法为： table中需要注意的问题 table标签是一个写法很严格的标签，一个表格中列的数目是根据第一行里列的数目来决定，比如说，第一行中有3列的话，则第二行，第三行。。。。其余行中，无论列里面有没有内容，都必须把代码填完整，后则日后修改内容时很容易出错且不易更正。如： 三行两列的标准写法： 错误的写法： 缺少内容的列的正确的写法： p、img、table的混合使用 建立一个一行两列的表格，第一列插入图片，第二列插入段落，则代码为： 居中显示： br：软回车代码，表示空半行。需要注意的是，在代码区域里面，任何符号都有其自己的代码，如软回车为br,空格则为nbsp; width：宽度，一般用作调节段落、表格、行、列、图片等的宽度 height：高度，一般用作调节段落、表格、行、列、图片等的高度 超链接的写法 a href=..... target=/a:超链接的写法。超链接中包含几个标签： a.../a:超链接标签,中间省略号的地方填写文字链 href=：双引号之间填写超链接的地址 target=:超链接是当前页面打开还是新窗口打开，双引号内是_blank则为新窗口打开，如果要当前页面打开，则整个target标签不用写。一般超链接均要要求新窗口打开 一条标准的文字链超链接写法： 一条标准的图片文字链写法： 综合运用所学代码 制作一个宽200px，高100px，两行两列的表格，列宽统一为100px，行高统一为50px，背景颜色为黄色（颜色代码为#FFFF00）第一列统一居左，第二列统一居中，第三列统一居右，其代码如下： 作业：制作一个宽600px，高120px，两行三列的表格，列宽统一为200px，行高统一为60px，背景颜色为黄色（颜色代码为#FFFF00）第一列统一居右，第二列统一居中，第三列统一居左，制作完成后应显示为下图：其中，图片地址为：/news/2011_03/03/1299119862641.jpg 超链接地址为