电子商务基础实训实训一网页制作23 实训一 网页制作.doc

实训一 网页制作 培训目标与要求：学生通过本单元的学习，要求了解HTML语言的结构、语法，要能掌握HTML文件的建立及浏览、常用的格式化标记符的设置、掌握链接标记的设置；了解动态网页、图象的处理的有关知识，掌握使用Photoshop编辑和处理图像的方法，掌握DHTML的应用。 实训重点：HTML文件的建立及浏览、常用的格式化标记符的设置、掌握链接标记的设置，使用Photoshop编辑和处理图像的方法，DHTML的应用 实训内容及过程: 1.1 1.1 语言HTML 一、页面布局文件的建立及浏览，掌握常用格式化标html通过学习本单元的内容，掌握 记的设置，掌握链接标记的设置。 （一）建立文件HTML 操作步骤：“开始”→“程序”→“附件”→“记事本”→在记事本1.单击桌面按钮： 。）1-1.htm（文件名为）→执行“文件”→“保存”1-1-1中输入语句（见图 图1-1-1 1-1-2 图 1-1-3 图 在浏览器中打开所建的2.HTML文件。，再点击“转到”或点1-1-4打开浏览器，在地址输入正确的路径，如下图 ”键，即可浏览。Enter击“ 1-1-4 图 title与 /title之间内容 /bodybody之间内 1-1-5 图为扩展名保存html一定要以htm或注意：用记事本等编辑器建立HTML文件时， 文件，否则在浏览器中不能正确显示预期的效果。 文件提示：除了记事本之外，可以用写字板或其它文本编辑软件来编辑HTML )常用格式化标记的设置(二 标题标记、1hi文件（可参考课本的示例编写，HTML 在文本文件编辑器中编写操作步骤：HTML1-1-7文件（见图）→在浏览器中观察所编辑的HTML 1-6见图）→保存 。）1-1-8文件的显示效果（见图 1-1-6 图 1-1-7 图 图1-1-8标题标记 或者采用Frantpage编辑器编写。步骤：“开始”→“程序” →“Frantpage” →选择“HTML”语言形式，输入如图1-1-9所示文本→选择“预览”，效果如图 。1-1-10． 1-1-9 图 标题标记1-1-10图 提示：h1~h6标记用于设置段落标题的大小级数，其中h1是最大的标题，然后逐级变小，最小的是h6。此标记后可以加入align属性来控制文字的对齐方式，属性值可以取left（左对齐）、right（右对齐）、center（居中）。 例如h1 align=center欢迎您访问我的花店！尼栯?（见图1-1-11），表示将标记中的文字居中显示，效果见图1-1-12。center是居中标记，用于将标记范围内的文字或图片居中放置。 1-1-11 图 1-1-12居中标记图 是段落标记符。p2、标记，就会将标记后的文字从新的一行开始显示，并p浏览器每遇到一个/pp是成对标记，其中标记所形成的段落之间会自动空一行。且每个用p所示字”下输入如图HTML1-1-13编辑器，在“可省略。例如：打开Frantpage 。1-14“预览”效果见图符， 图1-1-13 段落标记符1-1-14图 3、br是换行标记，属于非成对标记。例如：打开Frantpage编辑器，在“HTML”下输入如图1-1-15所示字符，注意各标记符之间要有空格“预览”效果见图1-1-16。 hr产生一条横线。 1-1-15 图 图1-1-16换行标记 4、标记列表 提示：ul标记称为项目列表标记，是成对标记。在ul标记之间还可以使用li标记来设定项目内容。li标记中使用type属性，可以显示不同形状的项目符号： 不加type属性：项目符号显示为●（默认值）。 祴数尽楣捲敬：项目符号显示为○。 祴数尽煳慵敲：项目符号显示为■。 例如 :在Frantpage中输入如图1-1-17中的HTML语言,预览效果见图1-1-18 图1-1-17 图1-1-18标记列表 （三）链接标记的设置 HTML,中编写Frantpage（或者在文件HTML在文本文件编辑器中编写 步骤一． 。,直接编写网页）Frantpage或者在的普通视图下 )。HTML文件(或者保存网页步骤二 保存) (或者直接打开网页文件的显示效果步骤三 在浏览器中观察所编辑的HTMLHTML 中编写方法一、在Frantpage ，指明链接文件的地Hre语句中 1-1-19 图 图1-1-20链接标记的设置 提示：当我们要在网页中制作“超级链接”时，必须使用成对标记a~/a 来完成链接工作。在