电子商务网页设计与制作精致版.ppt

0000010000100001000000100000000010000000010000000100000000001011110000000000010000100000001000100010000001000000010000000000100001000010001000001001000100001000000001100010000100100001000100001000000100000010000000000100010000100001000100001001000100001000000001100010000100000000100100001000000001000001000000001电子商务网页设计与制作目录项目一 网站鉴赏与网站规划项目二 网页设计基础项目三 网页设计的基本应用项目一 网站鉴赏与网站规划项目二 网页设计基础项目1 网络鉴赏与网站规划一、不同类型网站的设计要求二、网站鉴赏分析三、SEO 网站优化四、网站规划任 务我我 们们 通通 常常 在在 网网 上上 做做 什什 么么？执行操作执行某项操作，如网上支付、网上购物、网上预约、发布博客或发布论坛帖子等。搜索信息是搜索某种信息，如新闻、空调选购信息、健康资讯等。任务1.1 不同类型网站的设计要求资讯门户类网站1 设设计计要要求求统一的平台风格全面的内容频道良好的导航体验电子商务类网站2设计要求清晰的导航结构清晰的图片展示丰富的交易外功能交通旅游类网站3设计要求1导航清晰2网站内容丰富3网页配色亮丽行业企业类网站4设计要求1.网页布局合理2.网页导航清晰3.网页配色专业要求1 整体布局1.LOGO、导航突出2.统一的平台风格3.链接布局合理任务1.2 网站鉴赏分析LOGO导航产品形象展示网站内容网站内容页脚页面头部245度同类色180度互补色135度对比色90度邻近色网页配色技巧3导航设计（1）主导航结构和名称清晰。（2）网站导航采用文本链接。（3）面包屑导航。（4）导航阅读习惯。网站图片设计4使用图片需要考虑与网站的总体设计协调、考虑放置位置，并预计浏览器是否支持该图像的显示、用户能接受其下载速度等。任务任务1.31.3 SEO SEO网站优化网站优化 -网络蜘蛛网页爬行，搜取数据，形成网页索引数据互联网网页搜索引擎网页索引数据库网络蜘蛛网页爬行，搜取数据，形成网页索引数据网络蜘蛛网页爬行，搜取数据，形成网页索引数据搜索引擎工作原理1（1）让设计与制作的网页在搜索引擎结果中有一个较好的排名；（2）网页能够吸引用户的目光，增加被点击几率；（3）用户进入网页后，网页能达到用户期望，从而减少跳失率；（4）网页和网站能提供用户额外价值，最终提高网站转化率，提高用户满意度。搜索引擎优化下网页设计目标网站主题优化网站主题的确定（1）主题内容定位，做到小而精，主题定位小，内容精；（2）主题明确，凸显重点，去除与主题无关的内容；（3）专题内容丰富，展现高品质的产品和服务。2网站布局优化v 1 页面定位的优化（1）网页标题：在Firefox 和IE 浏览器中，网页的标题显示在窗口的顶部或地址栏下方的标签页上。（2）URL：URL 应当对网页的内容有所反映，比如本理财案例对应的URL 路径money 目录。3（3）路径导航：对于用户来说，这些链接能够清楚表明他们正在网站的哪个层级，当前正在浏览什么页面。（5）段落标题：也能帮助用户确定网页位置。（6）标志和标语：人们普遍认为能从网页的左上角得知自己正在访问的网站及位置。（7）分类导航按钮：本案例没有体现，通常体现在左右侧边栏的分类导航按钮。v 2 弹簧高跷浏览行为优化optimizeoptimize（1）增加左侧导航栏，页面跳转时，不会出现明显的网站各层级之间跳转的用户感受；（2）主栏目清晰并且全站统一。v 3 冰山效应网页优化 在图中，有效地避免了网页冰山效应，立即购买和加入购物车在网页的第一屏已醒目地显示出来，用户如需更多的信息可以转向第二屏。用户打开网页后，所见到的信息能反映网页的全貌，加强了用户继续阅读的信心。v 4.Flash 网站优化虽然能从搜索结果中了解梦洁为家纺类上市企业，但进入网站后用户容易无所适从，从图中，我们可以通过点击链接继续访问，但网站内容和主题不直观，营销用户体验以及Flash 动画也对搜索引擎的提取等问题都待改善。v 1.Title 信息优化信息优化（1）首页：网站名称或者网站名称_ 提供服务介绍或产品介绍（2）频道页：频道名称_ 网站名称（3）文章页：文章Title_ 频道名称 _ 网站名称（4）标题主题明确，应包含该网页中最重要的内容核心关键字（5）简明精练，不罗列与网页内容不相关的信息（6）遵循从左到右的阅读习惯，重要的内容应该放到Title 的靠前的位置网页Title&Meta 信息优化4v 我们可以在网页中添加Name 为Keywords 属性的Meta 标签，其中Content 属性值即为关键字内容，多个关键字间用逗号间隔，逗号表示是逻辑“或”，空格表示逻辑“与”。其代码如下：v2.关键字优化Keywords代码：v2.描述标签优化 Description 在网页中添加Name 为Description 属性的Meta标签，其中Content 属性值即为网页描述的内容，代码如下所示：代码：网页内容优化1.原创内容大量的，高质量的，自身独到见解的和主题相关的内容。52.关键词密度网页定位中的LOGO 和标语位置通常不会放置关键字，另外图片ALT 属性和页面导出链接、内部链接和锚文字都能帮助提高关键字的密度，从而加大网页相关性的权重，最终有利于搜索的排名。3.网页内容优化（1）网页标题内容优化（2）内容结构优化（3）文章叙述要简洁（4）提高内容价值1.主题规划在做网站主题规划时，可以参考企业竞争对手的网站，学习他人之长，挖掘自身优势，做出特色。任务1.4 网站规划2.域名设计域名设计域名可以采用企业名称、品牌名称或产品名称的中文或英文字母 3.网站栏目规划关于向日葵关于向日葵课程展示课程展示培训实况培训实况成果展示成果展示搜索活动搜索活动赛事活动赛事活动科技资讯科技资讯科技培训科技培训教育理念小建筑师系列课堂风采课堂成果夏令营科技活动成长历程小牛顿系列课堂发展教师作品野生动物园搜索获得荣誉小工程师系列学生活动作品机器人系列4.首页规划 .1 LOGO、导航首页标题、首页描述、首页关键字2首页版面布局规划3项目2 网页设计基础1、HTML基础2、Dreamweaver任 务超文本标记语言?是用于描述网页文档的一种标记语言。网页的本质就是超级文本标记语言，通过结合使用其他的网络技术，可以创造出功能强大的网页。因而，超级文本标记语言是网页设计编程的基础；下图是一个网页的效果图和程序代码。任务2.1 HTML设计基础1HTML 简介HTML 为超文本标记语言英文简称。HTML 和一般文本的不同是，一个HTML 文件不仅包含文本内容，还包含“标记”，即包含了一对打开和关闭的标记，并有属性和值。HTML 标记分为双标记和单标记，HTML 文件的后缀名是“.htm”或者是“html”。1.HTML 的基本标记 标记 标记 标记 标记 在文档的最外层，文档中的所有文本和html 标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。是HTML 文档的头部标签,出现在文档的起始部分，标明文档的头部信息，一般包括标题和主题信息，其结束标记 指明文档标题部分的结束。双格式标记，用来给出网页的标题，网页标题会显示在浏览器的标题栏中。用来指明文档的主体区域，标签之间的文本是正文，是浏览器要显示的页面内容。其结束标记 指明主体区域的结尾。2.标记的属性 大多数标签都有自己的一些属性,属性要写在始标签内，属性是可选的，属性也可以省略而采用默认值，其格式如下：内容 大多数属性值不用加双引号。但是包括空格、号，号等特殊字符的属性值必须加入双引号。如：字体设置3.HTML 中颜色的表示例：红色例：红色例：红色4.HTML 文件的基本结构 文件开始标记 文件头开始的标记 文件头的内容 文件头结束的标记 文件主体开始的标记 文件主体的内容 文件主体结束的标记 文件结束标记5.记事本手工编写HTML页面编写HTML 文件有两种方法，一种是利用记事本编写，另一种是在可视化网页制作软件中编写，如利用Dreamweaver 中制作网页时，HTML 代码可自动生成。HTML 页面设置2HEAD 是HTML 文档的首要部分标记 开始，标记 结束，可以为网页指定标题栏。TITLE 包含的内容将会被显示在浏览器窗口的标题栏中。网页标题栏的设置12.的属性v（1）页面背景颜色设置bgcolor：v（2）页面背景图像的设置：background 属性用于指定页面的背景图案，语法格式：（3）文字属性：text 设置正文文本颜色；link 设置未被访问的链接文字颜色；alink 设置激活的链接文字颜色；vlink 设置已被访问的链接文字颜色，语法格式：（4）留白属性：leftmargin 页面左侧距离窗口左边框的距离；topmargin 页面顶部距离窗口上边框的距离，语法格式：水平线 为单标记格式，其功能是画一条横跨页面的水平分隔线，使不同功能的文字分隔开，语法格式：3.水平线4.滚动文字设置文字的移动方式，可取值交替来回卷动、scroll 单向滚动(预设)、slide 滑动=n 高度控制文字的移动方向，可选的值有left、right、up、down设置鼠标移入滚动区时，让滚动字幕停止，取值为 this.stop()属性的值可以是top(顶端对齐)、middle(中间对齐)和bottom(底端对齐)=color 背景颜色=n 循环,卷动次数(预设循环)=n 设定卷动距离=milliseconds 设定卷动时间控制鼠标移出滚动区时，让滚动字幕移动，取值为this.start()=n 宽度(可设百分比%)，语句示例如下：电子商务网页设计=milliseconds 设定卷动速度5.meta 标记的使用3.定义语言1.定义相关信息2.控制页面缓存4.刷新页面name 属性值为keywords 时，增加关键字；为description 时，增加页面内容描述。不需要页面缓冲可以这样设置：Transition5.设定页面进入和退出的特效6.强制页面在当前窗口中以独立页面显示HTML 文字编排31.标题文字标签 语句 标题内容 标签用于设置网页中的标题文字，其中n 的取值为16，字体依次变小。标签是双格式标记，标签共分为六级，在 是第一级标题，是最大最粗的标题；最后一级，是最小最细的标题文字。align 属性用于设置标题的对齐方式，其参数为left（左），center（中)，right(右）。标签本身具有换行的作用，标题总是从新的一行开始。2.文字标签 语句 控制文字的字体、大小和颜色，是双标记格式face colorsize 用来设置使用的字体，默认为宋体。设置字体的语法为：hello设置文字的大小(默认为3)，其属性为1 7，1 最小，7 最大。设置文字的颜色(默认为黑色)，其属性值参照HTML 中颜色的表示。例如：字体属性设置 粗体标签下划线标签 斜体标签 放在 与 标签之间的文字将以粗体方式显示。放在 与 标签之间的文字将以斜体方式显示。放在 与 标签之间的文字将以下划线方式显示。sup 上标标签 删除线标签 sub 下标标签例如，122=144,即表示12 的平方。例如，硫酸亚铁的分子式是Fe2SO4。以删除线贯穿 与 之间的文字。字体效果标记语句3.4.段落标记语句 换行标签：换行标签是单标签，常用在一行文字的结尾处，起自动换行的作用段落标签 及属性：由 标签所标识的文字，代表同一个段落的文字语法格式：align 是 标签的属性，属性有三个参数left，center，right，对应段落文字的左、中、右位置的对齐方式5.原样显示文字标签 语句要保留原始文字排版的格式（即空格、换行等），就可以通过 标签来实现，方法是把制作好的文字排版内容前后分别加上始标签 和尾标签。6.居中对齐标签 语句在页面中使用 标签进行居中显示，是成对标签，在需要居中的内容部分开头处加，结尾处加。7.水平分隔线标签 语句 标签是单独使用的标签，效果是显示水平线，用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐，通过设置 标签的属性值，可以控制水平分隔线的样式。size alignwidth 设置水平分隔线的粗细。例如：。设置水平分隔线的颜色，默认为black。设置水平分隔线的宽度,其属性值可以用像素大小表示，也可用屏幕的百分比来表示。例如：。设置水平分隔线的对齐方式(left，center，right)，默认值为center。color 8.HTML 特殊字符HTML 源代码显示结果描述<大于号或显示标记&&可用于显示其他特殊字符"引号®已注册©版权™商标 半个空白位 一个空白位 不断行的空白9.注释标签语句在文档中可以加入相关的注释，便于查找和记忆有关的文件内容和标识，注释内容不会在浏览器中显示出来。格式：HTML 超链接语法格式：超链接的对象href 属性赋予不同的属性值，可以创建出不同的超链接。Target 属性用于指定新文本在浏览器窗口中的打开方式。4超链接的类型：（1）网站链接：新浪网（2）链接到当前目录的不同页面：我的个人主页（3）锚点连接：回到第一条，但是在访问锚点连接前，首先要对锚点进行定义：回到第一条（4）电子邮件链接：作者邮箱（5）ftp 链接：ftp 链接示例 HTML 相对和绝对路径51HTML 相对路径假设：info.html 路径是：c:Inetpubwwwrootsitesliinfo.html index.html 路径是：c:Inetpubwwwrootsitesliindex.htmlindex.html在info.html 加入index.html 超链接的代码：？假设注册了域名，并申请了虚拟主机，虚拟主机提供商会提供一个目录，比如www，那么根目录是 这个www 就是网站的根目录假设在www 根目录下放了一个文件index.html这个文件的绝对路径就是：http:/ 根目录下建了一个目录叫tutorials，然后在该目录下放了一个文件index.html这个文件的绝对路径就是http:/ 绝对路径HTML 表格1.HTML有序表格 表格示例如下：一个简单的表格 新生名单 姓名6 性别 年龄 专业 王强 男19 计算机 张红 女18 网络姓名姓名性性别别年年龄龄专专业业王强男19计算机张红女18网络1.表格标记语句（1）定义表格标签 border 边框 width宽度 height高度 bgcolor背景色 background 背景图 align 对齐方式定义表格行标签tr 元素语法格式：.定义表头标签定义单元格标签td 元素语法格式：.表格标题标记align 属性指明表格标题相对于表格的对齐方式，可选值有：left，center，right。valign 属性的可选值有：top（上方），bottom（底部）。2.复杂的HTML 表格（1）跨行单元格：rowspan=n，.指定单元格跨行的行数，（2）跨列单元格：colspan=n，.指定单元格跨列的列数。（3）跨行跨列的表格：经营范围 办公设备、文具、IT 耗材 商品种类 铅笔 纸张 打印机 光盘 体育用品 文件盒HTML 列表7v1.有序列表有序列表带有序号标志（如数字、字母等）v2.无序列表无序列表就是没有序号标志的列表v3.自定义列表定义列表通常用于术语的定义、描述关键词等场合v4.列表嵌套多媒体的嵌入v1.图片的嵌入基本语法：v2.网页背景音乐嵌入 标记的语法格式为：v3.其他多媒体资源的嵌入8框架v1.框架结构v2.框架标记属性（1）如何划分窗口（2）窗口框架宽度属性：标记的border（3）边框颜色属性：标记的bordercolor（4）框架可见性属性：标记的frameborder（5）设置窗口之间的空白：标记的framespacing（6）scrolling:是否显示滚动条9v3 标记的属性（1）指定子窗口显示的页面（2）name 属性用于设置子窗口的名称（3）窗口滚动条设置（4）固定尺寸标志（5）设置边距属性（6）noresizeHTML 表单v1.较复杂的表单v2.表单的定义与常用属性（1）action 属性：定义一个数据处理程序的 URL（2）method 属性：用于向 action URL 发送数据的 HTTP 方法（3）enctype 属性：对表单内容进行编码的 MIME 类型（4）target 属性：目标显示方式。target 属性用来指定目标窗口的打开方式。（5）为使表单结构更自由，使服务器程序处理更便捷，HTML 5 对表单标签有了更新。10v3.输入多行文本v4.设置下拉选单v5.设定输入组件（1）text：文字输入框（2）password：密码输入框（3）checkbox：复选框（4）radio：单选框（5）button：普通按钮。（6）file：文件浏览按钮。（7）image：图像按钮。（8）hidden：隐含内容（9）提交(submit)与重置(reset)按钮Dreamweaver CS4 简介(一)Dreamweaver CS4 的操作界面任务任务2.2 Dreamweeaver2.2 Dreamweeaver初步初步1（二）Dreamweaver CS4 的基础操作1.文档的基本操作v（1）创建文档。文件新建新建文档空白页HTML布局无创建v（2）保存文档文件保存另存为输入文档名称（不能用中文）保存v（3）打开文档文件打开选择文件打开2.网页页面属性的设置“修改”“页面属性”v（1）设置“外观(CSS)”属性。v（2）设置“外观(HTML)”属性。v（3）设置“链接(CSS)”属性。v（4）设置“标题(CSS)”属性。v（5）设置“标题/编码”属性。v（6）设置“跟踪图像”属性。（三）Dreamweaver CS4 参数的设置在Dreamweaver CS4 中，所有的环境设置都是通过“首选参数”进行设置可以通过“编辑”、“首选参数”进入参数设置的界面Dreamweaver 站点创建与管理（一）相关概念（一）相关概念2本地信息:放置在本地磁盘上的网站被称为本地站点，即本地工作目录。远程信息:位于互联网Web 服务器里的网站被称为远程站点，是远程站点存储文件的位置。测试服务器:用来测试站点的服务器在测试服务器中测试通过了，然后发布到远程站点上。（二）管理站点“站点”“管理站点”（三）新建站点（1）在D:盘（或其他非系统盘）创建一个文件夹“gerenwangzhan”。（2）进入Dreamweaver 软件界面，使用“站点”“新建站点”菜单命令，选择基本选项卡（4）“下一步”，进入站点定义窗口，选择“否，我不想使用服务器技术”选项，“下一步”进入下一个窗口。其中需指定站点文件夹的位置，系统会自动根据以前站点的定义情况给出一个站点文件夹，也可以另外指定，然后选择“编辑我的计算机上的本地副本，完成后再上传到服务器”选项。（5）单击“下一步”按钮，在“共享文件”窗口中设置如何连接到远程服务器，在这里选择“无”，单击“下一步”。（6）在“总结”状态显示窗口中会显示新建站点的总结信息。（7）单击“完成”按钮结束站点新建的工作，进入网页编辑状态，一种是：使用“站点”“管理站点”菜单命令打开“管理站点”对话框，在站点列表中选中编辑的站点，然后单击“完成”按钮，即可切换该站点的编辑窗口；或者在“文件面板”左上角的站点下拉式菜单中直接选择要编辑的站点。一种是：使用“站点”“管理站点”菜单命令打开“管理站点”对话框,在站点列表中选择要编辑的站点，然后单击“编辑”按钮打开站点定义向导或在站点列表中双击要编辑的站点，逐步进行站点信息修改。（四）打开和编辑站点信息（五）设置测试服务器设置测试服务器步骤如下：v（1）在“站点定义”对话框中选择“高级”选项卡，然后从“类别”列表中选择“测试服务器”；v（2）选择服务器模型；v（3）选择访问方式，有“无”、“FTP”和“本地/网络”三种。（六）管理站点选择所需文件进行下载通常在“远程视图”或“测试服务器”视图中选择这些文件，也可以在“本地视图”中选择相应的文件。使用FTP 传输文件请单击“连接”按钮可以打开与远程服务器的连接。如果在以前已链接的“远程”窗格中看到远程文件，则无须单击“连接”；当单击“获取”时，Dreamweaver 会自动连接。（六）管理站点若要下载相关文件，则单击“是”，否则单击“否”按钮。单击“文件”面板工具栏上的“获取”按钮，或者右键菜单选择“获取”。如果文件当前已在文档窗口中打开，则可以从文档窗口中选择“文件管理”“获取”，出现一个对话框，询问是否要获取相应文件。（七）测试站点检查链接验证标记检查目标浏览器兼容性（八）域名与空间的申请1.域名的申请 首页的域名查询一栏的英文域名一项中输入需要注册的英文域名，然后选择域名形式，单击“查询”按钮，将显示注册情况，如果没有被注册，就可以单击“点此立即注册”链接进行注册2.空间的申请首页单击“注册”进行网站用户注册，然后用注册到的用户名和密码进行免费空间的申请，网站空间申请成功后会提供一FTP 地址，也就是申请的空间地址，还会提供用户名和密码用来将做好的网站上传到服务器中。（九）网站的上传与维护1.设置远程主机信息选择“站点”“管理站点”菜单命令，打开“管理站点”对话框，在对话框中选择要管理的站点。单击“编辑”按钮，在打开的对话框中选择“高级”选项卡，在“分类”列表中选择“远程信息”一项，设置访问方式为FTP.v2.网站的上传（1）连接到远端服务器（2）上传文件v3.网站的维护（1）选择特定的文件或文件夹（2）单击“文件”面板工具栏上的“同步”按钮，或者右键菜单选择“同步”。如果文件当前已经在文档窗口中打开，则可以从文档窗口种选择“文件管理”“同步”，出现“同步文件”对话框.（3）选择相应的同步方向，选择“预览”进行文件的比较，然后点“确定”。项目3 网页设计的基本应用1、基本网页设计2、网页布局设计3、网页模板与库4、表单网页制作任 务网站的首页布局有什么特点呢？网站的首页布局有什么特点呢？网页元素怎样在网页中进行布局呢？网页元素怎样在网页中进行布局呢？怎样可以快速进行网页布局并添加网页元素？怎样可以快速进行网页布局并添加网页元素？有哪些布局方法？有哪些布局方法？使用文本属性美化网页1.插入文本（1）打开Dreamweaver CS4 程序，新建HTML 文档；（2）将光标置于要输入文本的地方，输入文本；（3）将当前网页文本保存，文件名为“wy3-1.html”，任务3.1 基本网页设计3.1.12.设置文本属性两种方法：使用HTML 标签格式化文本和使用层叠样式表（CSS）选中“wy3-1.html”文档中“2012 世界末日”文本，在“HTML 标签”属性面板中“格式”选项设置成“标题1”可设置文本的“字体、颜色、大小”等属性，先选定文本“2012 世界末日”，单击属性面板中选择“在“标签检查器”将“algin”属性设置成“center（居中对齐）”也可右击“2012 世界末日”文本弹出快捷菜单，在快捷菜单中选择“居中对齐”命令假设：html”文档中“2012 世界末日”设置成“标题1 并居中对齐”，其操作步骤如下：题1”3.插入列表选中需要设置为列表的文本，单击编号列表按钮将光标移到文本“网页设计软件”之后，按回车键。新建HTML 文档并保存为“wy3-2.html”，输入文本并适当设置文本属性。将光标移到文本“网页设计软件”之后，按回车键。在文本“FL 动画制作”上单击，再单击属性面板中的“列表属性”按钮，将“列表类型”更改为“项目列表”单击“确定”使用图像媒体活跃网页1.插入图像2.设置图像属性3.设置图像效果3.1.2（1）在网页文档中插入鼠标经过图像的操作步骤。新建HTML 文档并保存为“wy3-3.html”，输入如下文本并适当设置文本属性。单击“插入”菜单中“图像对象”下的“鼠标经过图像”命令，弹出“插入鼠标。设置相关参数后，单击“确定”按钮，即在网页中“插入图像”，再次单击“文件”菜单中“保存”命令保存网页，单击“文档”栏上的“在浏览器中预览”按钮（或按F12），即可预览页面效果。（2）在网页文档中插入图像占位符的操作步骤。）在网页文档中插入图像占位符的操作步骤。新建HTML 文档并保存为“wy3-4.html”，输入如下文本并适当设置文本属性单击“插入”菜单中“图像对象”下的“图像占位符”命令，弹出“图像占位符”对话框设置相关参数后，单击“确定”按钮，即在网页中“插入图像占位符”4.插入媒体对象（1）插入Flash 动画、FlashPaper、Flash 视频。（2）插入其他媒体对象。除了SWF 和FLV 文件等Flash 文件格式之外，还可以在 Dreamweaver 文档中插入 QuickTime 或Shockwave 影片、Java applet、ActiveX 控件或其他音频或视频对象。使用链接实现页面跳转1.绝对路径和相对路径3.1.3（1）绝对路径概述。绝对路径就是指明目标端点所在具体位置的完整URL 地址的链接路径（2）相对路径概述。相对路径就是指明目标端点与源端点之间相对位置关系的路径。2.2.创建超链接的方法创建超链接的方法（1）使用“属性”面板创建超级链接。选定文字或图像属性在“链接”文本框中键入链接对象地址 指向文件浏览文件链接参数：参数：_blank：在弹出的新窗口中打开所链接的文档；_parent：在父窗口中打开所链接的文档,常在有框架结构的网页中应用；_self：浏览器默认设置，在当前网页所在的窗口中打开所链接的文档；_top：在整个浏览器窗口中打开所链接的文档,并删除所有框架结构。（2）使用菜单来创建超级链接。v在网页中选定要创建超级链接的文字或图像。v单击“插入”菜单中“超级链接”命令，弹出“超级链接”对话框，在对话框中选择链接目标文件和目标窗口，设置好按“确定”按钮，即可设置好超级链接。3.创建超链接文本链接图像链接图像热点链接锚点链接电子邮件链接脚本链接空链接3.2.1使用表格布局网业使用表格布局网页任务3.2 网页布局设计3.2.1使用框架集布局网业（2）自定义创建框架网页打开Dreamweaver 程序，新建HTML 文档，执行“查看”菜单下的“可视化助理”中“框架边框”命令，此时文档窗口周边显示边框。此时，用鼠标左键按住边框线拉动，即可将窗口水平或垂直拆分，也可用“修改”菜单下的“框架集”中的命令进行拆分。最后根据需要创建并保存框架网页。3.编辑框架网页打开例所建框架网页，输入文本并适当设置属性新建HTML 网页添加文本、图像并适当设置属性 新建链接并链接到对应“RIGHT.HTML”网页2.设置框架和框架集属性鼠标单击边框线即可选择“框架集”属性面板按住“ALT”键不放，再用鼠标左键单击窗口区域即可选择“框架”属性面板，创建框架网页并适当设置相关属性4IFrame 框架（浮动框架）打开Dreamweaver 程序，新建HTML 网页并保存为“wy3-17.html”，输入文本并适当设置属性 将光标定位于文件末尾，执行“插入”菜单下的“HTML”“框架”“IFrame”命令，或执行“插入”面板中的“IFRAME”命令，即可插入一个“IFRAME”框架此时可用代码编写“IFRAME”属性，也可用“标签检查器”设置属性设置完成后，用CSS 规则将其“居中对齐”新建链接网页模板的创建、编辑与应用网页模板的创建、编辑与应用1.网页模板的创建v（1）创建网页模板“新建文档”“空白页”“HTML 模板”在“资源”面板中创建模板从现有文档中创建模板任务任务3.3 3.3 网页模板与库网页模板与库3.3.1 3.3.1 v（2）创建可编辑区域“插入”“模板对象”“可编辑区域”“新建可编辑区域”输入名称确定2.网页模板编辑与应用v（1）利用模板创建网页的操作步骤“新建文档”选“模板中的页”“创建”“模板”创建的页面注意：只能在“可编辑区域”进行编辑，不能在“锁定”区域编辑，将网页内容稍作修改（2）从模板中分离网页的操作步骤打开“FW-1.html”“修改”“模板”“从模板中分离”新建文档”选“模板中的页”“创建”“模板”创建的页面保存（3）删除模板中的标记的操作步骤打开模板“FW.DWT”文档“修改”“模板”“删除模板标记”保存（4）重命名模板文件的操作步骤方法一：打开“资源”面板，切换到“模板”标签，右击“模板”名称，弹出快捷菜单，选择“重命名”命令方法二：选定“模板”名称，单击“资源”面板右上角菜单按钮，弹出快捷菜单，选择“重命名”命令方法三：单击“模板”名称，可直接修改文件名（5）删除模板文件的操作 删除模板文件的操作与重命名模板文件的操作类似，且也有三种方法，在菜单中选择“删除”命令（6）更新模板网页的操作步骤打开模板“FW.DWT”文档，适当修改当前模板的样式及内容修改完成后，单击“文件”菜单中的“保存”命令，打开“更新模板文件”对话框；单击“更新”按钮，打开“更新页面”对话框；最后，单击“关闭”按钮，更新页面。库项目的创建、编辑与应用1.创建库项目3.3.2 3.3.2 在空白文档中创建库项目：“新建文档”“空白页”页面类型为“库项目”“创建”“资源”面板中创建模板：“窗口”“资源”开“资源”面板“库”按“库项目”“新建模板”；或单击“资源”面板右上角，或在“库项目”列表中右击，在弹出的快捷菜单中选择“新建库项目”命令从现有文档中创建库项目：选择文档body 部分中的任意元素，执行“修改”菜单中“库”“增加对象到库”命令2.库项目编辑与应用重命名插入删除分离（3）重命名库项目的操作右击“库项目”“重命名”选定“库项目”“资源”单击“库项目”名称（1）在网页中插入库项目的操作：插入库项目的位置“库”“插入”（2）从库项目中分离的操作：右击“库项目”“从源文件中分离”（4）删除库项目的操作右击“库项目”“删除”选定“库项目”单击“资源”“删除”选择“库项目”单击“删除”表单网页概述表单网页概述表单是实现网页浏览者与服务器之间信息交互的一种页面元素，它被广泛用于各种信息的搜集和反馈。表单在网页中主要用于填写用户信息，表单网页内部包括许多表单对象，所有这些表单对象的组合，称之为表单。任务任务3.4 表单网页制作表单网页制作3.4.1 表单网页制作步骤表单网页制作步骤1.新建表单2.插入表单域3.在表单域中插入定位表格4.插入单行文本域5.插入单选按钮6.插入单选按钮组7.插入列表和菜单8.插入复选框组9.插入多行文本区域10.插入表单按钮11.插入图像域3.4.2 插入表单验证元素3.4.3文本域单选按钮组确认密码复选框文本区域项目4 网站重构之CSS+DIV 布局网站网站建好建好了，可了，可是又想是又想 换个换个风格，风格，怎么怎么办？办？样式的种类与优先权任务4.1 CSS语法结构4.1.1如何将样式表加入网页？v（1）内联样式表HTML 代码为：内联样式表（2）内部样式表HTML 代码为：#test1 font-family:黑体;font-size:16px;color:#F00;内联样式表 内部样式表v（3）外部样式表HTML 代码为：CSS 盒子（框）模型4.1.2margin(外边距)padding(内边距)content(内容)Width(宽度)padding(内边距)border(边框)height高度认识和使用DIVvDIV 是division 的简称，可定义文档中的分区或节，是XHTML 所支持的标签，是XHTML 中指定的专门用于布局设计的容器对象。vDIV 的最终代码只可能拥有以下两种形式：任务4.2 CSS 网页布局4.2.1DIV 的并列与嵌套结构v1.实现步骤4.2.2v2.编辑XHTML 文档l打开DW,新建HTML 文档，在“拆分视图”下，选择“插入”“布局对象”“DIV 标签”，在弹出的“插入DIV 标签”。（2）从模板中分离网页的操作步骤打开“FW-1.html”“修改”“模板”“从模板中分离”新建文档”选“模板中的页”“创建”“模板”创建的页面保存v2.编辑XHTML 文档 打开DW,新建HTML 文档，在“拆分视图”下，选择“插入”“布局对象”“DIV 标签”，在弹出的“插入DIV 标签”。3.应用CSS 样式组建网页（1）Header 层CSS 编码。（2）main 层CSS 编码。（3）Sidebar 层与Container 层CSS 编码。（4）Footer 层CSS 设置。CSS 合适布局合适布局有两层含义：1.一列固定宽度在布局网页时要选择合适的具有语意的元素来制作网页；2.一列自适应宽度指可以根据需要设置元素的宽度和高度。4.2.3横向导航任务任务4.3 CSS4.3 CSS网站元素设计网站元素设计4.3.11.首先做一个“容器”2.添加导航内容3.设置导航内容的背景及格式4.为导航条设置链接具体代码纵向导航4.3.2CSS入门学前准备入门教程提高教程精彩布局学前准备在CSS 规则面板中找到#nav ul li 选择器，双击，在CSS 规则定义面板方框选项板中去掉或设置Float 属性的值为None。同样去掉#nav ul li a选择器的Float 属性。并修改列表的容器ID 为nav 的高度和宽度具体代码下拉及多级弹出式菜单1.网页新建完成后，点击插入SprySpry 菜单栏在打开的Spry 菜单栏中选择水平点击确定后插入，2.修改菜单栏整体样式4.3.2表单设计1.改变输入框及文本域的样式2.改变单选或多选菜单样式4.3.4文字排版任务任务4.4 CSS4.4 CSS内容排版内容排版4.4.1（1）Font-family为样式设置字体系列（2）Font-size定义文本大小（3）Font-style指定“正常”、“斜体”或“偏斜体”作为字体样式（4）Line-height设置文本所在行的高度1.1.CSSCSS 字体字体（5）Text-decoration该属性用来向文本中添加下划线、上画线或删除线，或使文本闪烁。（6）Font-weight。该属性用来对字体应用特定或相对的粗体量，“正常”等于 400，“粗体”等于 700。（8）Text-transform。该属性用来将所选内容中的每个单词的首字母大写或将文本设置为全部大写或小写。（7）Font-variant。该属性用来设置文本的小型大写字母变体CSSCSS 字体字体（9）color。该属性为颜色属性，用来设置文本颜色。（1）单词间距（Word-spacing）用来设置字词的间距。（2）字母间距（Letter-spacing）用来增加或减小字母或字符的间距。（3）垂直对齐（Vertical-align）指定应用此属性的元素的垂直对齐方式。（4）文本对齐(Text-align)用来设置文本在元素内的对齐方式2.CSS 文本属性（7）Display 显示用于指定是否以及如何显示元素。（5）文字缩进（Text-indent）指定第一行文本缩进的程度（6）空格（White-space）会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。图片基础控制1.新建网页并保存为logo.html，在页面中插入一个 标题标签，并在标签内插入一个 超链接标签2.为 标签新建ID 为Logo 的样式，并设置背景图片，不重复，x、y 定位为0；然后根据图片的宽度和高度设置Logo 样式的width 和height3.设置文本“hello world”为隐藏4.4.2表格样式控制（1）Width 表格的宽度（2）Border-collapse 表格的边框是否被合并为一个单一的边框（3）Height 表格的高度（4）Text-align 和Vertical-align 表格中