前端网页设计杜黎强第1次课幻灯片.ppt

PPT研究院 POWERPOINT ACADEMY * * * * * * * * * * * * * 尚辅网 / 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 Web前端开发 班级名称：XXX 本学期作业目录结构 请同学们回答3个问题 教学导入 教学实施 知识点讲解 任务实施 请大家完成本次课课中页：任务1实施过程.doc 第1次课教学内容及实施环节 项目准备：任务1 使用HTML标记创建网页对象 分发本次课所用文件 项目准备-任务1(任务实施过程).doc 项目准备-任务1(任务实施总结).doc 项目准备-任务2(任务实施准备).doc 网站主题 网站结构 网站风格 版面布局 站点发布 站点结构图 网站设计时间表 经费预算 问题1：网站规划主要包含哪些内容？ 网站主题：定位小内容要精；网站名称：要易记而有特色 两个方面：超链接设计和导航设计(使浏览者在浏览中不致迷路) logo设计、色彩搭配、标准字体(标志、标题、主菜单等) 了解一些关于网站设计的基本知识 对服务器和发布站点的带宽需求进行分析 描述站点不同部分的结构图和流程图 分段显示项目的计划进度 资源需求、发布需求、市场成本和内容版权的经费预算 网 站 设 计 策 划 书 一般包括： 问题2：网站的文件目录结构包括什麽？ 传统网页布局：表格布局 Web标准布局：CSS+DIV布局 问题3：传统网页布局？Web标准布局? 1、围堵标记(举例说明) 它以起始标记及终结标记将文字围住，令其达到预期要显示的效果。 知识点：(一)HTML标记的分类 2、空标记 (举例说明) 空标记是单独出现的，只有起始标记，而没有结束标记。 标记按型态分为：(提问) 围堵标记和空标记 按标记的作用和内容分为： 文档标记 (结构:html…/html、head…/head、 title…/title、meta/、body…/body 排版:段落、文本格式) 链接标记 (a…/a) 图像标记 (img/) 表格标记 (table…/table、tr…/tr、td…/td) 表单标记 (form…/form) 框架标记 (frameset…/frameset /frame…/frame) 知识点：(二)HTML常用标记 1、标题标记 h1~h6 2、段落标记 p,也可以包含其他标记：img/、a…/a 3、换行标记 br/强制换行 4、链接标记(超链接和锚点) a href=“”…/a a name=“锚点名称”…/a a href=“#锚点名称”…/a a href=“链接文件地址#锚点名称”…/a 同一页面 不同页面 知识点：(二)HTML常用标记 5、列表标记(3种) 无序列表，列表项用符号表示: ul li…/li /ul 有序列表，列表项用数字表示: ol li…/li /ol 释义列表是一列事物及相关的解释: dl dt…/dt dd…/dd /dl 知识点：(二)HTML常用标记 6、图像标记 img src=“url” alt=“图片解释说明”/ 7、表格标记 tabletrthtd,都可以设置宽度、高度、背景色等多种 属性，但一般将属性统一设置到CSS样式表文件中，以便于维 护修改 8、块标记(XHTML网页布局中重要标记) div…/div定位标记，设置文字表格图片等对象位置,相当一 个“容器”，来放置其他元素，通过CSS样式来控制“容器”的位置 知识点：(二)HTML常用标记 9、行标记 span与div类似，用于行内，控制一小块需要 特别标示的内容，也通过CSS样式发挥作用 10、框架标记 frameset,在一个浏览器窗口显示多个页面