梁小芳《css+div网页设计与制作》项目二.ppt

项目1 高职高专计算机教学改革新体系规划教材 Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo CSS+DIV 网页设计与制作 主 编 梁小芳 副主编 梁文锋 朱平 项目1 了解网页设计相关知识 目录 1 项目2 CSS+DIV网页设计与制作 2 项目3 创建CSS样式 3 项目4 CSS 盒子在网页中的应用 4 项目5 CSS美化网页元素 5 项目6 CSS盒子的浮动 6 项目7 CSS盒子的定位 7 项目8 首页设计与美化 8 项目9 子页制作 9 项目10 网页特效制作 10 项目11 房产企业网站设计与实现 11 项目12 网站上传与维护 12 项目二 网站建立与网站规划 任务2.1 新建网站与网站文件管理 任务2.2 新建网页与网页测试 任务2.3 HTML页面结构 任务2.4 插入各种网页元素 任务2.5 创建超级链接 任务2.6 网页布局版面 实训2 网站建立与栏目规划 任务2.1 新建网站与网站文件管理 2.1.1 Dreamweave CS6新功能介绍 2.1.2 站点创建 1 创建站点的重要性 2 创建站点 3 建立网站的层次结构 4 网站常用文件夹及常规命名 5站点管理 2 创建站点 操作步骤如下： （1）创建本地网站文件夹，又称站点文件夹。 （2）单击“站点”→“新建站点”命令，如下图： （3）在“站点名称”栏输入“hhbz168”站点名字 （4）选择站点名称路径 2 创建站点 站点效果如下： 3 建立网站的层次结构 4 网站常用文件夹及常规命名 admin：存放后台管理程序。这是动态网站所需要的一个目录。 audio：存放音频文件。 css：存放样式。包括主页与子页样式。 doc：存放Word文档，所有的与网站制作的相关文本素材。 flash：存放动画播放文件，是.swf格式。 images：存放图片文件，主要是.jpg和.gif格式。 js：存放javascript文件。 news：存放新闻信息。 source：存放网站开发过程中的设计源文件，如Flash、Photoshop等源文件。 template：存放模板。 video：存放视频文件。 任务2.2 新建网页与网页测试 2.2.1新建网页 2.2.2 网页测试 任务2.3 编写最简单HTML框架 2.3.1 编写html框架 2.3.2 认识网页标签 2.3.1 编写html框架 3.2 认识网页标签 标签名称 标签表示法 备注 层标签 div/div 成对标签 行标签 span/span 成对标签 段落标签 p/p 成对标签 各种标题标签 h1/h1 h2/h2 h3/h3 h4/h4 h5/h5 h6/h6 成对标签 无序号列表标签 ul li/li li/li /ul 组合标签，不能分开使用； 成对标签 有序号列表标签 ol li/li li/li /ol 组合标签，不能分开使用； 成对标签 超链接标签 a/a 成对标签 多媒体标签 embed/embed 成对标签 图片标签 img 单个标签 换行标签 br 单个标签 表单标签 form/form 成对标签 表格标签 table trtd/td/tr /table 组合标签，不能分开使用； 其中：tr/tr行标签 td/td列标签成对标签 任务4 插入各种网页元素 4.1 插入文字 4.2 插入特殊符号 4.3 插入图像 4.4 插入媒体元素 4.5 插入音频 4.6 插入表单 4.7 插入表格 任务2.5 创建超级链接 2.5.1 超链接定义 2.5.2 创建超链接 1 按对象链接 1）文字超链接 2）图片超链接 3）空链接 2 按类型链接 1）站内链接 2）站外链接 3）锚点链接 谢谢观赏 项目1 高职高专计算机教学改革新体系规划教材 Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo