网页设计实习指导书.doc

网页设计 实习指导书信息技术系二11年八月实习一 掌握HTML的格式一、 实习目的1. 掌握网页的基本结构及必须的标记；2. 了解Web页面中特殊字符及颜色的显示，掌握页面整体颜色配比。3. 学会并掌握从网上获取HTML的知识及下载网页元素；二、 实习要求1. 掌握网页的基本结构，熟悉html、head、body、title基本标记2. 了解Body标记的BackColor、BackGround、Text、Link、VLink、ALink属性，特殊字符的显示3. 用记事本完成简单的网页4. 学会从InterNet上获取网页元素三、 实习内容及方法1. 网页基本结构 表示网页的开始 网页头，用来保存对网页的一些注释及规定一些动作网页标题 在浏览器标题栏显示的内容 结束网页头 正文开始 正文 显示在浏览器中的内容 正文结束 网页结束2. 用记事本建立一个简单的网页第一步：从开始菜单栏中启动记事本；第二步：在记事本中输入一下内容我的第一个网页Hollo, World!第三步：在文件菜单中单击保存选择保存类型为：所有类型输入文件名为test.html单击确定按钮；第四步：找到刚才建立的文件，双击打开，浏览自己的网页3. Body属性的使用及特殊字符的显示。用记事本建立一个网页sec.htm，内容如下：我的第二个网页我的<友情链接>搜狐西北农林科技大学我自己4. 从网上保存3个自己感兴趣的页面及10张图片到自己的软盘上。四、 思考如下网页能否正确显示，为什么？testHollo, World! I song for you.实习二 文字修饰和图像标记一、 实习目的1. 掌握对文字修饰的各种标记及换行和分段标记2. 掌握在网页中插入图像二、 实习要求1. 学会使用标记、及;2. 掌握Font、IMG的基本属性size、color、face和src、width、height及alt三、 实习内容及方法1. 字符式样 建立网页style.htm,代码如下：字符式样正常正文显示粗体显示斜体显示文字加下划线我现在是粗体粗斜体粗斜体并加下划线又是粗斜体粗体2. Font标记的使用 建立网页Font.htm，代码如下： Font标记的使用 这是Font标记修饰的文字：字号2、茶色、字体为华文行揩3. 网页中的换行和分段 建立网页p.htm，代码如下：网页中的换行和分段 在此页中，展示换行和分段。这是第一段的第一行，这是第一段的第二行。这是第二段的第一行；下面将用一个红色、一个像素点高、70宽的水平线分段。这是第三段。一级标题二级标题三级标题四级标题4. 在网页中插入图片 建立网页image.htm，首先复制一张扩展名为jpg的图片和网页文件放在同一个文件夹中，并重命名为image.jpg；代码如下：在网页中插入图片下面的图片按原始大小插入：下面是按所在窗口大小的50缩放后的显示下面是按320200的固定大小显示四、 思考题读下面的代码：test这是第一段的内容。这是第二段的内容。在浏览器中，第一段的内容的颜色和第二段的颜色各是什么色，是否相同，为什么？实习三 表格及用表格进行网页布局一、 实习目的1. 学会在网页中创建表格2. 学会使用表格进行网页布局二、 实习要求1. 掌握创建表格的必要标记、，了解基本的属性；2. 掌握用表格进行网页布局三、 实习内容及方法1. 创建简单表格建立网页table.htm，代码如下：表格示例表头项1 表头项2 表头项3 表项1 表项2 表项3 表项4 表项5 表项62. 表格的格式建立网页table_format.htm，创建一个相对页面居中的表，无边框线，宽400个像素，高100个像素，代码如下表格示例水平居中 水平居中，垂直顶端对齐 垂直底端对齐 水平右对齐 表项4 表项5 3. 表格的修饰建立网页table_style.htm，首先复制一张扩展名为jpg的图片和网页文件放在同一个文件夹中，并重命名为bg.jpg；代码如下：表格示例表头项1 表头项2 表头项3 表项1 表项2 表项3 表项4 表项5 表项64. 表格的嵌套建立网页Mit_table.htm，代码如下：表格嵌套 这是外部表格 表项2 这是内部部表格 内部表项2以上是嵌入的表格 表项5 5. 网页布局建立一个网页layout.htm，设计一个主页面，代码如下：网页布局 我 的 主 页 首页 | 同学录 | 我的相册 | 关于本站 欢迎光临我的主页 导航菜单 正文 四、 作业自己建立一个主页面。实习四 框架和超级链接一、 实习目的1. 学习在网页中创建超级链接2. 学习使用框架进行网页布局二、 实习要求1. 掌握超级链接标记A及其基本属性和三种链接方式及区别2. 掌握使用框架进行网页布局三、 实习内容及方法1. 指向本地（网站内）的链接相对地址建立两个网页a1.htm和a2.htm，并保存在同一个文件夹中a1.htm指向本地（网站内）的链接a2.htm在本窗口显示a2.htm在新窗口显示a2.htm指向本地（网站内）的链接a1.htm在本窗口显示a1.htm在新窗口显示2. 指向其他网站网页的链接绝对地址建立一个网页a3.htm，代码如下：指向其他网站网页的链接搜狐在本窗口显示杨凌信息港在新窗口显示跟我联系将启动邮件客户端3. 指向页面中特定部分的链接锚点建立一个网页a4.htm，代码如下：指向页面中特定部分的链接第一部分第二部分第三部分第一部分123 4 5 6 回目录第二部分12 3 4 5 6 回目录第三部分12 3 4 5 6 回目录4. 使用框架建立框架建立一个框架页面frame.htm，包括3个框架分别是title显示网页标题title.htm、导航框架Nav显示导航菜单Nav.htm、主框架main显示正文。所有文件同以上三个文件保存在同一个文件夹中。Frame.htm框架布局 title.htm框架布局框架的使用Nav.htm框架布局指向本地（网站内）的链接指指向其他网站网页的链接指向页面中特定部分的链接四、 思考题做一个框架页面，其中包含一个导航框架，和一个主框架；思考如何能使导航框架中的超级链接当点击时能直接定位到指定页面的特定位置；例如当点击导航框架中的链接时，在主框架中显示的内容可以直接定位到a4.htm中的第三部分。实习五 表单一、 实习目的学习网页中如何创建表单以及表单的各种元素二、 实习要求1. 掌握创建表单的标记及表单的属性和两种提交方式2. 掌握常用的几种表单元素：文本框、单选按钮、复选按钮、组合框、提交按钮和重置按钮等三、 实习方法及内容1. 一个简单的表单 文本框、单选按钮、提交按钮和重置按钮Form1.htm一个简单的表单一个简单调查表单姓名：性别：男 女爱好：2. 系统登录页面密码框 系统登录页面管理员登录用户：口令：3. 问卷调查表复选框、组合框 问卷调查表问卷调查表姓名：所在省分：请选择北京陕西山东山西1你从什么地方看到过我公司的产品：报纸互联网电视朋友介绍其他2你对我公司的产品的满意度：满意比较满意不满意很不满意/html四、 作业设计一个对我校现状和将来发展的一个问卷调查。要求用到单选按钮、复选框、文本框、多行文本框和组合框。实习六 Dreamweaver的使用（1）一、 实习目的学习Dreamweaver的基本使用及建立本地站点二、 实习要求1. 掌握Dreamweaver的基本使用技巧2. 学会使用Dreamweaver进行简单网页的创建3. 用Dreamweaver创建本地站点三、 实习内容和方法1. 创建Dreamweaver本地站点启动Dreamweaver2004 选择创建新项目中的Dreamweaver站点，打开站点定义对话框输入站点名“myweb” 选择“否，我不想使用服务器技术” 选择“编辑我的计算机”，再选择站点文件的存储位置在“你如何链接到远程服务器？”选择“无”查看设置信息，点击完成。2. 站点规划即在站点所在文件夹中建立一系列的子文件夹，将网站中涉及到的文件进行分类；比如将网站中所有的图片集中存放到Images文件夹中。方法：在站点管理器中点击右键建立相应的文件夹。3. 建立网页文件方法方法一：在“文件”菜单中选择“新建.”，打开新建对话框选择“常规”中的“基本页”的“HTML” 点击“创建”。方法二：在站点管理器中点击右键选择“新建文件”输入文件名；然后双击文件进行编辑。4. 创建网页用Dreamweaver创建实习五中的“问卷调查”。用Dreamweaver完成实习四中实习内容的1，2，3实习七 Dreamweaver的使用（2）一、 实习目的学习Dreamweaver的高级使用技巧，并用Dreamweaver 进行网页布局二、 实习要求1. 掌握用表格和框架在Dreamweaver中进行网页布局2. 学会利用Dreamweaver在网页中加入一些特效三、 实习方法和内容1. 用表格建立如下网页布局：（图7-1）2. 用框架建立如下网页布局：（图7-2），并完成实习四中实习内容4。3. 在网页中加入特效在页面中插入导航条：“常用”工具栏图像导航条，打开对话框输入相应的选项；在页面中插入Flash按钮：“常用”工具栏媒体Flash按钮，打开对话框输入相应的选项；在页面中插入Flash文本：常用”工具栏媒体Flash文本，打开对话框输入相应的选项；图7-1图7-2实习八 Css技术一、 实习目的：了解Css技术，掌握Css的基本用法二、 实习要求：1. 掌握Css的基本用法2. 学会在Dreamweaver中编辑Css样式三、 实习内容和方法1. 内嵌式样式1） 应用于当前文档将定义的样式以样式定义形式插入到文档的Head区，此种方法样式将影响整个页面。建立网页Css1.htm，代码如下：Css技术的应用一 H1color:red; Font-family:”华文行揩”,”宋体”; Bodycolor:black;Font-size:9pt; .fntcolor:blue;Font-family:”隶书”; Font-size:14pt;这是标题一这是正文.这是使用Fnt类后的效果2） 应用于当前标记将定义的样式以标记的属性形式插入，如：,此种方法样式只影响当前标记所影响的区域。建立网页Css2.htm，代码如下：Css技术的应用一 H1color:red; Font-family:”华文行揩”,”宋体”; Bodycolor:black;Font-size:9pt; .fntcolor:blue;Font-family:”隶书”; Font-size:14pt;这是标题一这是正文.这是使用Fnt类后的效果这是中效果只使用于此段.2. 外联式样式将所有样式的信息存放在一个单独的文件中（扩展名为Css），然后用把它链接到每个HTML页面中。如果你希望样式能够影响你站点上的所有文件，这是很好的办法。链接格式：3. 使用Dreamweaver创建样式先使用Dreamweave创建如下页面（css3.htm）图8-1：图8-1再建立样式文件style.css格式化上面页面如下（图8-2）：要求：标题：字体为华文彩云, 华文琥珀, 华文行楷；字号40pt；字色红色；背景色：#FFFFCC。导航条：背景色为#33CCFF。导航栏：标题背景色为#FFFFCC，上边框为：实线，2pt宽，色值：#FFCC00；内容背景色：#FFCCFF；导航栏右边框为：点划线，1pt宽，色值：#0033FF。底框：背景色：#99CCFF；上边框：双线，2pt宽。文本框：背景色：#FFFFCC；边框：宽度1pt，实线。正文字号：9pt。（除标题）底框导航栏 导航条图8-2超级链接：正常色：黑色，无修饰；鼠标悬停时：红色，加下划线；激活时：红色，加下划线；访问过的链接：黑色，无修饰。四、 思考题 看如下代码：思考题.fntcolor:blue;font-family:”l隶书”;font-size:20pt看我显示的效果显示的效果最终受谁的影响（Font标记还是fnt类），为什么？实习九 Javascript脚本（1） 一、 实习目的1. 学习脚本的概念，了解脚本的用途；2. 学习网页中脚本的插入方式，及编写格式；二、 实习要求1. 掌握客户端脚本在网页中的三种插入方式；2. 学会编写一些简单的实用脚本；3. 掌握在Dreamweaver中插入脚本；三、 实习方法和内容1. 插入脚本的三种方式：1） 使用标记添加脚本；格式： 创建网页Script1.htm，当点击按钮时，在文本框中显示当系统时间；代码：JavaScript1 function showtime()Tm.value=Date();2） 直接在HTML标记符中添加脚本；格式：创建网页Script2.htm，当点击按钮时，通过信息框显示当系统时间；代码：3） 引用包含脚本的外部文件；格式：在head区插入：建立文本文件date.js：function showdate() var dt=Date() alert(dt)创建网页Script3.htm，当点击按钮时，通过信息框显示当系统时间；代码：JavaScript3在Dreamweaver中创建如下页面：当点击“登录”按钮的时候检查“用户名”、“口令”是否输入，如果没有输入提示请输入相应内容；Javascript代码如下：function chk()if(frm.nm.value=) alert(请输入用户名.)if(frm.pwd.value=) alert(请输入口令.)其中frm是表单的名字，nm是用户名文本框的名字，pwd是密码框的名字。实习十 Javascript脚本（2）一、 实习目的文档对象模型（DOM）中基本对象的属性、方法和事件二、 实习要求1. 了解Window、Document的基本属性、方法和事件；2. 掌握window的open、colse、SetTimeOut、ClearTimeOut、Prompt方法， status属性，onload事件；3. 掌握Document的location属性，write方法，onmousedown、onkeydown事件。三、 实习内容及方法1. 创建网页script4.htm，当网页被显示的时候动态的显示当前的日期；并在窗口的状态栏显示欢迎信息。代码：Javascript今天是： window.status=”欢迎光临本站_” var date=new Date() /创建日期对象 var year=date.getYear() /获取年份 var month=date.getMonth()+1 /获取月份 var day=date.getDate() /获取日 document.write(year+”年”+month+”月”+day+”日”)2. 创建网页script5.htm，在页面的文本框中显示当前的时间(当页面显示的时候时间就开始变化)；代码：Javascriptfunction showtime()var time=new Date()var hour=time.getHours();var minute=time.getMinutes();var second=time.getSeconds();timer.value=hour+:+minute+:+second;setTimeout(showtime(),1000);3. 用Dreamweaver创建两个网页script6.htm和error.htm，当用户浏览网页script6.htm时，弹出一个输入框，然后再弹出一个输入框要求输入口令，如果都正确显示页面内容，否则显示error.htm内容。在Script6.htm中插入如下Javascript片断，然后在body的onload事件中调用login()函数。 function login() var username=mpt(“请输入用户名：”) var pwd=mpt(“请输入口令：”) if(username!=”John” | pwd!=”123456”) document.location=”error.htm” 注：两个页面的内容自己定。4. 建立网页script7.htm，当用户在页面上点击鼠标右键时，弹出一个信息框告诉他页面右键已经被禁止。在网页中插入一下Javascript代码段，然后在body的onmousedown事件中调用noright()函数。function noright() if(window.event.button=2) alert(“右键已经被禁止.”)实习十 服务器架设、空间申请与网页上传一、 实习目的1. 学习Web服务器（IIS）的架设2. 学习如何在Internet中寻找并申请属于自己的网页空间3. 了解文件上传的方法二、 实习要求1. 掌握Web服务器的架设2. 了解如何寻找免费主页空间3. 掌握Ftp的上传方法（Ftp软件的使用）。三、 实习内容与方法1. Web服务器的架设1） 打开“控制面板”打开“管理工具”双击“计算机管理”，打开“计算机管理窗口”双击展开“服务和应用程序”展开“Internet信息服务”“网站”右击“默认网站”“属性”，打开“默认站点属性”对话框，单击“主目录”选项卡，如右图。在“本地路径”文本框中输入（或通过点击“浏览”按钮选择）你的网页所在的目录。然后，再单击“文档”选项卡如图，点击“添加”按钮将你网站的首页的文件名添加到启用默认文档列表中，最后点击“确定”按钮。2. 申请免费主页空间1） 在国内申请：进入百度（）首页，在文本框中输入“免费主页空间”然后查找2） 在国外申请：进入（），在文本框中输入“FREE Web Site ”然后查找注：申请的网站要求支持Ftp上传更新并支持Asp3. 主页上传1） 通过Dreamweaver的站点管理进行上传：在Dreamweaver中建立站点的时候选择“您如何连接到远程服务器？”中选择Ftp并在下面填写你申请网站提供的ftp服务器网站及你的用户名和口令；然后在站点管理器中就可以连接到你申请的主页空间并上传文件。2） 通过FTP软件上传首先在网上下载一个FTP软件（比如：CutFtp），在你的机子上按它的要求安装，然后登录你申请的网站进行文件上传。四、 作业：1. 将前几章做的网页或你找的网页上传到你申请的主页空间并浏览。2. 记录你查过的至少5个提供免费主页空间的网址及其提供的空间大小和上传方式。实习十一 服务器端脚本（1）一、 实习目的1. 学习IIS（PWS）服务器的安装与简单配置2. 学习建立简单的ASP页面3. 了解Response、Request对象的用途4. 学习ASP页面的发布二、 实习要求1. 掌握ASP代码在Html中的插入方式2. 掌握Response对象的Write、End、Redirect方法3. 掌握Request的QueryString和Form方法三、 实习内容与方法1. IIS的安装：打开“控制面板”启动“添加/删除程序” 选择“添加/删除Windows组件” 将“Internet信息服务（IIS）”选项选择，并确保Windows的安装光盘已经装到光驱点击“下一步”，安装即可；配置IIS：打开“控制面板”进入“管理工具”启动“Internet 服务管理器” 在“默认Web站点”上点右键选择“属性”启动站点属性对话框选择“主目录”选项卡，在本地路径中输入你网页所在的目录。2. 建立一个简单的ASP页面test.aspasp页面测试% Response.write “这个页面是由ASP写出来的” For i=1 to 7 Response.write “这是Asp产生的” Next%3. QueryString和end方法的使用 建立网页qry.htm和ASP页面qryrel.asp页面，由qryrel.asp来接受并显示qry.htm传过来的参数qry.htm代码： QueryString方法使用点击此链接传递我的用户名和密码点击此链接传递我的问题qryrel.asp代码： QueryString方法使用%Usrname=trim(request.QueryString(“name”)Pwd= trim(request.QueryString(“pwd”)If usrname” then Response.write “your name is “ & usrname Response.write “your Password is “ & pwd Response.endEnd ifAsk= trim(request.QueryString(“myask”)Reponse.write “Your ask is “ & ask %4. form和Redirect方法的使用建立页面Login.htm、main.asp和error.htm。其中login.htm为登录页面，当用户填入用户名和口令并点击“登录”按钮后，浏览器将用户登录信息提交给main.asp页面处理，如果用户名和口令正确则显示欢迎信息否则跳转到error.htm页面，告诉用户登录信息有错。Login.htm用户登录用户名：口令：Main.asp欢迎进入% User=trim(request.form(“user”) Pwd=trim(request.form(“pwd”) If usr”admin” or pwd”administrator” then Response.redirect(“error.htm”) Else Response.write(“欢迎进入本站”) End if%Error.htm 内容自定。四、 作业：写出form中POST和GET方法的区别。实习十二 服务器端脚本（2）一、 实习目的1. 学习asp中Server对象的使用2. 学习asp对文件的简单操作二、 实习要求1. 掌握对象Server的Creatobject和MapPath方法2. 掌握对文本文件的简单的读写操作三、 实习内容与方法1. MapPath方法的使用 MapPath方法是将指定的网络地址转换为服务器端的实际路径；如下面代码将显示服务器端根目录（/）指向