网页设计实习指导书Word文档格式.docx
- 文档编号:20729254
- 上传时间:2023-01-25
- 格式:DOCX
- 页数:30
- 大小:153.19KB
网页设计实习指导书Word文档格式.docx
《网页设计实习指导书Word文档格式.docx》由会员分享,可在线阅读,更多相关《网页设计实习指导书Word文档格式.docx(30页珍藏版)》请在冰豆网上搜索。
所有类型→输入文件名为test.html→单击确定按钮;
第四步:
找到刚才建立的文件,双击打开,浏览自己的网页
3.Body属性的使用及特殊字符的显示。
用记事本建立一个网页sec.htm,内容如下:
我的第二个网页<
bodyBGColor=#ccccccText=blueLink=blackALink=redVLink=green>
我的&
lt友情链接&
gt
ahref=””>
搜狐<
/a>
br>
ahref=””>
西北农林科技大学<
ahref=”http:
//127.0.0.1”>
我自己<
4.从网上保存3个自己感兴趣的页面及10张图片到自己的软盘上。
四、思考
如下网页能否正确显示,为什么?
test<
Isong<
BigBigWorld>
foryou.
实习二文字修饰和图像标记
五、实习目的
1.掌握对文字修饰的各种标记及换行和分段标记
2.掌握在网页中插入图像
六、实习要求
1.学会使用标记<
B>
、<
I>
U>
Font>
P>
HR>
Hn>
及<
IMG>
;
2.掌握Font、IMG的基本属性size、color、face和src、width、height及alt
七、实习内容及方法
1.字符式样
建立网页style.htm,代码如下:
字符式样<
正常正文显示<
粗体显示<
/B>
斜体显示<
/I>
文字加下划线<
/U>
我现在是粗体<
粗斜体<
粗斜体并加下划线<
又是粗斜体<
粗体<
2.Font标记的使用
建立网页Font.htm,代码如下:
Font标记的使用<
Fontsize=2color=tealface=”华文行楷,宋体”>
这是Font标记修饰的文字:
字号2、茶色、字体为华文行揩<
/font>
3.网页中的换行和分段
建立网页p.htm,代码如下:
网页中的换行和分段<
在此页中,展示换行和分段。
这是第一段的第一行,<
这是第一段的第二行。
这是第二段的第一行;
下面将用一个红色、一个像素点高、70%宽的水平线分段。
HRsize=1color=redwidth=70%>
这是第三段。
h1align=center>
一级标题<
/h1>
h2align=center>
二级标题<
/h2>
h3align=center>
三级标题<
/h3>
h4align=center>
四级标题<
/h4>
4.在网页中插入图片
建立网页image.htm,首先复制一张扩展名为jpg的图片和网页文件放在同一个文件夹中,并重命名为image.jpg;
代码如下:
在网页中插入图片<
下面的图片按原始大小插入:
imgsrc=image.jpgalt=只是一张图片>
p>
下面是按所在窗口大小的50%缩放后的显示<
imgsrc=image.jpgalt=只是一张图片width=50%>
下面是按320×
200的固定大小显示<
imgsrc=image.jpgalt=只是一张图片width=320height=200>
八、思考题
读下面的代码:
bodyText=red>
这是第一段的内容。
Fontcolor=blue>
这是第二段的内容。
在浏览器中,第一段的内容的颜色和第二段的颜色各是什么色,是否相同,为什么?
实习三表格及用表格进行网页布局
九、实习目的
1.学会在网页中创建表格
2.学会使用表格进行网页布局
一十、实习要求
1.掌握创建表格的必要标记<
table>
tr>
td>
,了解基本的属性;
2.掌握用表格进行网页布局
一十一、实习内容及方法
1.创建简单表格
建立网页table.htm,代码如下:
HTML>
HEAD>
TITLE>
表格示例<
/TITLE>
/HEAD>
BODY>
TABLEBORDER>
TR>
TH>
表头项1<
/TH>
表头项2<
表头项3<
TD>
表项1<
/TD>
表项2<
表项3<
表项4<
表项5<
表项6<
/TABLE>
/BODY>
/HTML>
2.表格的格式
建立网页table_format.htm,创建一个相对页面居中的表,无边框线,宽400个像素,高100个像素,代码如下
TABLEBORDER=0align=centerwidth=400height=100>
THalign=center>
水平居中<
THalign=centervalign=top>
水平居中,垂直顶端对齐<
TDvalign=bottom>
垂直底端对齐<
TDalign=right>
水平右对齐<
3.表格的修饰
建立网页table_style.htm,首先复制一张扩展名为jpg的图片和网页文件放在同一个文件夹中,并重命名为bg.jpg;
TABLEBORDER=2background=bg.jpgwidth=400align=center>
TRbgcolor=teal>
TRbgcolor=#cc66cc>
TDbgcolor=#6666cc>
4.表格的嵌套
建立网页Mit_table.htm,代码如下:
表格嵌套<
TABLEBORDER=1width=700>
TRalign=center>
TD>
这是外部表格<
tableborder=1width=90%bgcolor=#cccccc>
<
这是内部部表格<
内部表项2<
/table>
以上是嵌入的表格
5.网页布局
建立一个网页layout.htm,设计一个主页面,代码如下:
网页布局<
tablewidth="
700"
height="
500"
border="
0"
align="
center"
bgcolor="
#CAE494"
>
tdheight="
84"
#CCFFFF"
Fontface="
华文彩云"
size="
7"
color="
red"
我的主页<
/td>
/tr>
20"
#0099FF"
首页|同学录|我的相册|关于本站<
15"
valign="
top"
#33CCFF"
marqueewidth=680direction="
left"
scrolldelay=60>
欢迎光临我的主页
/marquee>
tdvalign="
100%"
tdwidth="
20%"
#33CCCC"
导航菜单<
80%"
正文<
一十二、作业
自己建立一个主页面。
实习四框架和超级链接
一十三、实习目的
1.学习在网页中创建超级链接
2.学习使用框架进行网页布局
一十四、实习要求
1.掌握超级链接标记A及其基本属性和三种链接方式及区别
2.掌握使用框架进行网页布局
一十五、实习内容及方法
1.指向本地(网站内)的链接——相对地址
建立两个网页a1.htm和a2.htm,并保存在同一个文件夹中
a1.htm
指向本地(网站内)的链接<
ahref=”a2.htm”>
a2.htm——在本窗口显示<
ahref=”a2.htm”target=”_blank”>
a2.htm——在新窗口显示<
a2.htm
ahref=”a1.htm”>
a1.htm——在本窗口显示<
ahref=”a1.htm”target=”_blank”>
a1.htm——在新窗口显示<
2.指向其他网站网页的链接——绝对地址
建立一个网页a3.htm,代码如下:
指向其他网站网页的链接<
搜狐——在本窗口显示<
ahref=””target=”_blank”>
杨凌信息港——在新窗口显示<
ahref=”mailto:
myemail@”>
跟我联系—将启动邮件客户端<
3.指向页面中特定部分的链接——锚点
建立一个网页a4.htm,代码如下:
指向页面中特定部分的链接<
aname=”top”>
ahref=”#first”>
第一部分<
ahref=”#sec”>
第二部分<
ahref=”#third”>
第三部分<
aname=”first”>
palign=right>
1<
2<
3<
4<
5<
6<
ahref=”#top”>
回目录<
aname=”sec”>
3<
ahref=”#top”>
aname=”third”>
4.使用框架建立框架
建立一个框架页面frame.htm,包括3个框架分别是title显示网页标题title.htm、导航框架Nav显示导航菜单Nav.htm、主框架main显示正文。
所有文件同以上三个文件保存在同一个文件夹中。
Frame.htm
框架布局<
framesetrows="
80,*"
frameborder="
NO"
framespacing="
framesrc="
title.htm"
name="
title"
scrolling="
noresize>
*"
cols="
121,*"
nav.htm"
nav"
a1.htm"
main"
/frameset>
title.htm
palign=center>
fontsize=7color=greenface=”华文行楷”>
框架的使用<
Nav.htm
ahref=”a1.htm"
target=”main”>
ahref=”a3.htm"
指指向其他网站网页的链接<
ahref=”a4.htm"
一十六、思考题
做一个框架页面,其中包含一个导航框架,和一个主框架;
思考如何能使导航框架中的超级链接当点击时能直接定位到指定页面的特定位置;
例如当点击导航框架中的链接时,在主框架中显示的内容可以直接定位到a4.htm中的第三部分。
实习五表单
一十七、实习目的
学习网页中如何创建表单以及表单的各种元素
一十八、实习要求
1.掌握创建表单的标记<
form>
及表单的属性和两种提交方式
2.掌握常用的几种表单元素:
文本框、单选按钮、复选按钮、组合框、提交按钮和重置按钮等
一十九、实习方法及内容
1.一个简单的表单——文本框、单选按钮、提交按钮和重置按钮
Form1.htm
一个简单的表单<
一个简单调查表单<
formmethod=postaction=>
姓名:
inputtype=textname=”xm”size=16>
性别:
inputtype=radioname=”sex”value=”男”checked>
男<
inputtype=radioname=”sex”value=”女”>
女<
爱好:
textareaname=”hob”cols=30rows=10>
/textarea>
inputtype=submitvalue=”提交”>
inputtype=resetvalue=”重写”>
/form>
2.系统登录页面——密码框
系统登录页面<
管理员登录<
用户:
inputtype=textname=”user”size=10>
口令:
inputtype=passwordname=”pwd”size=10>
inputtype=submitvalue=”登录”>
3.问卷调查表——复选框、组合框
问卷调查表<
inputtype=textsize=8name=”xm”>
所在省分:
selectname=”sh”>
optionvalue=””selected>
请选择…<
/option>
optionvalue=”北京”>
北京<
optionvalue=”陕西”>
陕西<
optionvalue=”山东”>
山东<
optionvalue=”山西”>
山西<
/select>
1.你从什么地方看到过我公司的产品:
inputtype=checkboxvalue=”报纸”name=”wherefrom”>
报纸
inputtype=checkboxvalue=”互联网”name=”wherefrom”>
互联网
inputtype=checkboxvalue=”电视”name=”wherefrom”>
电视
inputtype=checkboxvalue=”朋友介绍”name=”wherefrom”>
朋友介绍
inputtype=checkboxvalue=”其他”name=”wherefrom”>
其他<
2.你对我公司的产品的满意度:
inputtype=radiovalue=”满意”name=”fell”>
满意
inputtype=radiovalue=”比较满意”name=”fell”>
比较满意
inputtype=radiovalue=”不满意”name=”fell”>
不满意
inputtype=radiovalue=”很不满意”name=”fell”>
很不满意<
inputtype=submitvalue=”提交问卷”>
inputtype=resetvalue=”重填”>
/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
实习七
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 实习 指导书