网页设计实习指导书

网页设计实习指导书余霞编河南信息工程学校二０一0年九月1实验一站点的规划与建立一、实习目的1.掌握站点的基本概念；2.使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。二、实习要求掌握站点文件夹设计的基本要求；了解常见网站的布局风格；掌握网站建设中的颜色使用掌握网页设计的基本原则、基本风格与基本构图特点；三实习内容及方法1．登录到如下网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）；1）））））．建立下图所示的站点结构四思考根据自己的要求，设计建立对应的站点结构。2实习二网页的基本结构和文字设置一实习目的掌握网页的基本结构及必须的标记；了解Web页面中特殊字符及颜色的显示，掌握页面整体颜色配比。掌握对文字修饰的各种标记及换行和分段标记二实习要求掌握网页的基本结构，熟悉html、head、body、title基本标记了解Body标记的BackColor、BackGround、Text、Link、VLink、ALink属性，特殊字符的显示学会使用标记B、I、U、Font、P、HR、Hn掌握Font基本属性size、color、face用记事本完成简单的网页三实习内容及方法1.网页基本结构html……表示网页的开始head……网页头，用来保存对网页的一些注释及规定一些动作title网页标题/title……在浏览器标题栏显示的内容/head……结束网页头body……正文开始正文……显示在浏览器中的内容/body……正文结束/html……网页结束2.用记事本建立一个简单的网页第一步：从开始菜单栏中启动记事本；第二步：在记事本中输入一下内容htmlheadtitle我的第一个网页/title/headbodyHello,World!!!!/body/html第三步：在文件菜单中单击保存→选择保存类型为：所以类型→输入文件名为3test.html→单击确定按钮；第四步：找到刚才建立的文件，双击打开，浏览自己的网页3.Body属性的使用及特殊字符的显示。用记事本建立一个网页sec.htm，内容如下：htmlheadtitle我的第二个网页/title/headbodyBGColor＝#ccccccText=blueLink=blackALink=redVLink=green我的<友情链接>ahref=””搜狐/abrahref=””新浪/abrahref=””我自己/a/body/html4.字符式样建立网页style.htm,代码如下：htmlheadtitle字符式样/title/headbody正常正文显示brB粗体显示/BbrI斜体显示/IbrU文字加下划线/UB我现在是粗体I粗斜体U粗斜体并加下划线/U又是粗斜体/I粗体/B/body/html5.Font标记的使用建立网页Font.htm，代码如下：htmlheadtitleFont标记的使用/title/headbodyFontsize=2color=tealface=”华文行楷,宋体”这是Font标记修饰的文字：字号2、茶色、字体为华文行揩/font4/body/html6.网页中的换行和分段建立网页p.htm，代码如下：htmlheadtitle网页中的换行和分段/title/headbody在此页中，展示换行和分段。这是第一段的第一行，br这是第一段的第二行。P这是第二段的第一行；下面将用一个红色、一个像素点高、70％宽的水平线分段。HRsize=1color=redwidth=70%这是第三段。h1align=center一级标题/h1h2align=center二级标题/h2h3align=center三级标题/h3h4align=center四级标题/h4/body/html四思考如下网页能否正确显示，为什么？htmlheadtitletest/title/headbodyHello,World!!!!IsongBigBigWorldforyou./body/html5实习二图像、表格及用表格进行网页布局一、实习目的1.学会在网页中创建表格2.学会使用表格进行网页布局3.掌握在网页中插入图像二、实习要求1.掌握创建表格的必要标记table、tr、td，了解基本的属性；2.掌握IMG的基本属性src、width、height及alt3.掌握用表格进行网页布局三、实习内容及方法1.创建简单表格建立网页table.htm，代码如下：HTMLHEADTITLE表格示例/TITLE/HEADBODYTABLEBORDERTRTH表头项1/THTH表头项2/THTH表头项3/THTRTD表项1/TDTD表项2/TDTD表项3/TDTRTD表项4/TDTD表项5/TDTD表项6/TD/TABLE/BODY/HTML2.表格的格式建立网页table_format.htm，创建一个相对页面居中的表，无边框线，宽400个像素，高100个像素，代码如下HTMLHEADTITLE表格示例/TITLE/HEADBODYTABLEBORDER＝0align=centerwidth=400height=100TRTHalign=center水平居中/THTHalign=centervalign=top水平居中，垂直顶端对齐/THTRTDvalign=bottom垂直底端对齐/TDTDalign=right水平右对齐/TD6TRTD表项4/TDTD表项5/TD/TABLE/BODY/HTML3.表格的修饰建立网页table_style.htm，首先复制一张扩展名为jpg的图片和网页文件放在同一个文件夹中，并重命名为bg.jpg；代码如下：HTMLHEADTITLE表格示例/TITLE/HEADBODYTABLEBORDER=2background=bg.jpgwidth=400align=centerTRbgcolor=tealTH表头项1/THTH表头项2/THTH表头项3/THTRbgcolor=#cc66ccTDbgcolor=#6666cc表项1/TDTD表项2/TDTD表项3/TDTRTD表项4/TDTD表项5/TDTD表项6/TD/TABLE/BODY/HTML4.表格的嵌套建立网页Mit_table.htm，代码如下：HTMLHEADTITLE表格嵌套/TITLE/HEADBODYTABLEBORDER=1width=700TRalign=centerTD这是外部表格/TDTD表项2/TDTRalign=centerTDtableborder=1width=90%bgcolor=#ccccccTRTD这是内部部表格/TDTD内部表项2/TD/table以上是嵌入的表格/TDTD表项5/TD/TABLE/BODY/HTML5.网页布局建立一个网页layout.htm，设计一个主页面，代码如下：7HTMLHEADTITLE网页布局/TITLE/HEADBODYtablewidth=700height=500border=0align=centerbgcolor=#CAE494trtdheight=84align=centerbgcolor=#CCFFFFFontface=华文彩云size=7color=red我的主页/font/td/trtrtdheight=20align=centerbgcolor=#0099FF首页|同学录|我的相册|关于本站/td/trtrtdheight=15valign=topbgcolor=#33CCFFmarqueewidth=680direction=leftscrolldelay=60欢迎光临我的主页/marquee/td/trtrtdvalign=toptablewidth=100%height=100%border=0trtdwidth=20%align=centerbgcolor=#33CCCC导航菜单/tdtdwidth=80%align=center正文/td/tr/table/td/tr/table/BODY/HTML6.在网页中插入图片建立网页image.htm，首先复制一张扩展名为jpg的图片和网页文件放在同一个文件夹中，并重命名为image.jpg；代码如下：htmlheadtitle在网页中插入图片/title/headbody下面的图片按原始大小插入：imgsrc=image.jpgalt=只是一张图片p下面是按所在窗口大小的50％缩放后的显示imgsrc=image.jpgalt=只是一张图片8width=50%p下面是按320×200的固定大小显示imgsrc=image.jpgalt=只是一张图片width=320height=200/body/html四、思考题1、如何在表格中插入图像？2、自己建立一个主页面。9实习三框架和超级链接一、实习目的1.学习在网页中创建超级链接2.学习使用框架进行网页布局二、实习要求1.掌握超级链接标记A及其基本属性和三种链接方式及区别2.掌握使用框架进行网页布局三、实习内容及方法1.指向本地（网站内）的链接——相对地址建立两个网页a1.htm和a2.htm，并保存在同一个文件夹中a1.htmhtmlheadtitle指向本地（网站内）的链接/title/headbodyahref=”a2.htm”a2.htm——在本窗口显示/abrahref=”a2.htm”target=”_blank”a2.htm——在新窗口显示/abr/body/htmla2.htmhtmlheadtitle指向本地（网站内）的链接/title/headbodyahref=”a1.htm”a1.htm——在本窗口显示/abrahref=”a1.htm”target=”_blank”a1.htm——在新窗口显示/abr/body/html2.指向其他网站网页的链接——绝对地址建立一个网页a3.htm，代码如下：htmlheadtitle指向其他网站网页的链接/title/headbodyahref=”