《网页设计基础》实验指导书.pdfVIP

邢希 编 《网页设计基础》 课程实验指导书 琼州学院电子信息工程学院 数字媒体技术专业 前 言 本书是《网页设计基础》课程的实验指导书。《网页设计基础》课程是数字媒体技术专 业的一门专业基础课。通过实验学习，学生能掌握网页设计与制作技术、网站的创建技术， 培养网站管理维护的能力。本课程学习结束后，学生应能自行设计制作各种网页、编辑一定 程度的平面图像、网页动态效果，较熟练地掌握网页的基本制作方法和技巧。 本书的主要内容包括：HTML 标签的应用，Table 布局及内嵌CSS 样式的运用，DIV 布 局应用与内部CSS 样式的运用，表单前台设计及其CSS 样式控制，JS 及jQuery 的运用，网 页的综合设计与制作。由浅入深，由局部学习到整体设计，带领同学们更好地了解网页的设 计制作流程，把握设计制作的原则和要点。 在每个实验中，都给出了实验的原理和知识点，简要步骤和实验过程中的思考重点，并 附上相关练习，方便学有余力的同学进一步提升自己的能力。 需要强调的是，网页设计是一个创作的过程，设计的思路和采用的方法多种多样，所以 请大家在阅读本书的实验指导之前，已经独立思考过这些问题的解决方向及方式，并且多学 习优秀的具有良好交互功能的网页作品，这样才有助于设计制作水平的提高。 编者 2012 年9 月 目 录 实验 1 ：HTML 标签的应用 1 实验 2 ：Table 布局及内嵌 CSS 样式的运用 5 实验 3 ：DIV 布局应用与内部 CSS 样式的运用 11 实验 4 ：表单前台设计及其CSS 样式控制 18 实验 5 ：JS 及jQuery 的运用 25 实验 6 ：网页综合设计与制作 34 实验 1 ：HTML 标签的应用 一、实验目的 1、熟悉HTML 的编辑环境。 2 、掌握常见HTML 标签的基本语法和运用。 3、掌握HTML 相关属性的应用。 4 、掌握行级元素和块级元素及两者间的转换 5、掌握盒模型的应用 二、实验类型：验证 三、实验学时 ：8 学时 四、实验原理及知识点 1、HTML 标签的基本语法： （1）html 要求有严谨的结构，所有的标签都必须闭合。 （2 ）所有属性值都要用双引号括起来，某些特殊情况可以加单引号，一般都加双引号。 （3 ）所有元素和属性要小写，XHTML 对大小写很敏感，某些情况下容易出错。 （4 ）标签要合理嵌套，一层一层的嵌套必须是严格对称的。 （5 ）特殊符号要用编码表示，如和 。 2 、常见的HTML 标签 （1）与文本相关的标签 a. 标题标签【h1/h1~~h6/h6 】 b. 段落标签【p/p 】 c. 列表标签【ul 、ol、li、dl、dt、dd 】 d. span 标签和换行符br/ （2 ）图像标签【img/ 】 （3 ）超链接标签【a/a 】 （4 ）表格标签【table 、tr 、td 】 （5 ）分隔标签【div/div 】 3、HTML 相关属性 （1）style 属性：用于规定标签内容的样式 （2 ）列表属性：list-style-type 、list-style-image、list-style-position （3 ）图像相关属性：width 、height 、src、alt、title 、border （4 ）超链接相关属性：herf 、target 、title 、name