初级网页制作实训指导书.doc

《初级网页制作实训指导书.doc》由会员分享，可在线阅读，更多相关《初级网页制作实训指导书.doc（7页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实 训 指 导 书（2011 -2012学年度 第 二 学期） 实训类型： 初级网页制作 适用专业： 网络技术 撰写教师： 陈冠星 素材资源： 目 录一、实训目标3二、实训资料、工具设备3三、实训内容及具体项目操作步骤3（一）实训内容3（二）具体项目操作步骤4个人网站的制作4一、实训目标1. 熟练掌握Dreamweaver的基础操作和操作环境;2. 进一步熟悉和掌握网站建设的基本流程和技术规范;3. 熟练掌握站点的管理、文本、图像和链接表格、框架和表单的使用等操作;4. 能独立设计一个内容完整、图文并茂、技术运用得当的网站;5. 培养学生设计网页时在“主题展示”、“页面布局”、“色彩搭配”等方

2、面的综合设计能力;6.具备独立撰写实训报告等科技文件的基本能力;7. 提高独立分析问题和解决问题的能力,为以后从事网站设计和管理工作打下坚实的基础。二、实训资料、工具设备1本学期使用的教材；有关Dreamweaver的参考书。2工具与设备：硬件：PC机，能连接外网。软件：WINDOWS 操作系统；Dreamweaver cs3环境。三、实训内容及具体项目操作步骤（一）实训内容1在Dreamweaver环境中设计网站：u 站点规划，搜集资料。确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。u 进行主页设计。构思主页布局，进行主页标题图片的设计，进行主页其余图片的设计和页面内容

3、的录入，最后进行主页的整体优化设计。u 网页设计。包括版面设计和图形设计、内容录入等。u 综合优化。链接正确、得当，动态效果好。u 网站测试并递交。在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画是否丢失等。2. 该网站需要设计的基本要求主要有：u 从网页的构思、版式、色彩、赋于网页新颖独特的样式，给浏览者以良好的视觉感受。u 良好的浏览导航、让浏览者可以很容易找到要找的东西，网页内容便于阅读。u 与题目特点相符合的创意。u 网页中应出现:美化文字内容、 HTML样式的创建、CSS样式的创建与运用、编辑图、合理的布局。u 导航栏包括多个部分。u 不少于10个页面，

4、包括首页和若干个二级子页面。（二）具体项目操作步骤个人网站的制作(I) 站点规划制作网站时首先应设计规划一个具体的方案，以此作为进一步工作的依据，下面就开始进行实例网站的规划工作。1确定建设网站的目标在考虑网站的内容之前，首先要明确网站的目标。本网站是一个个人网站，所以建设该网站的目标是介绍自己，把自己的兴趣爱好做上去，和别人交流，让朋友们认识自己，同时为朋友们提供常用软件下载的网址。2分析目标用户对站点的需求洌览该网站的群体一般都是一些在校学生，所以在制作网站时可以考虑结合当前学生的兴趣和爱好。所以本网站的内容从以下几个方面来划分：我的简历、给我留言、飞鸽传书、音乐试听、心情日记、软件下载等

5、，整个站点的导航结构如图1所示。个人网站首页软件下载飞鸽传书我的简历给我留言音乐试听文章1文章2文章3文章4. 文章n心情日记图1 站点结构图 3确定网站风格由于该网站属于个人网站，它直接反映人的个性，所以可以根据个人喜好来设计网站的风格。4考虑网络的技术问题l 由于本网站的目标用户极不固定，所以只按照普通目标用户的要求来规划出相关的技术约束。l 使用Windows系统和IE济览器。l 主要采用1024768分辨率。l 需要安装Flash插件。() 网页制作对网站进行基本规划之后，就可以开始页面设计和素材准备的工作。然后就开始网站制作这一流程，包括站点的创建和具体页面的制作。本网站的主题是反映

6、一个大学生的校园生活。1站点的建立新建一个站点的具体步骤如下：（1）使用Windows 资源管理器新建一个文件夹，本例中选择E盘，给新建文件命名为grwz。（2）启动Dreamweaver，选择【站点】【管理站点】【新建站点】菜单命令，在“定义站点”对话框中确定站点名称。单击【下一步】按钮，在“是否打算使用服务器技术”中选择“否”，即不想使用服务器技术。再单击【下一步】按钮，在“您将把文件存储在计算机上的什么位置”中定位到D: glwz，单击【下一步】按钮，在“您如何连接到远程服务器”选项中选择“无”。单击【下一步】按钮再单击【完成】按钮即可。（3）在站点根文件夹指定好之后，就可以根据站点设计

7、方案在根目录中添加一些文件夹，搭建起站点的组织结构。将此网站中用到的图片、音乐文件及Flash动画保存在站点image，sound及swf文件夹中，同时再建一个文件夹other，用来存放三级页面。2制作主页制作主页步骤如下。（1）选择菜单【文件】【新建】命令，在弹出的对话框中选择“HTML”页面类型，在布局中选择一个合适的页面布局，然后单击【创建】按钮。（2）在刚才网页中插入一个预先准备好的Flash影片，并使其在单元格中处于水平居中，垂直置底的位置。然后选择【文件】【保存】菜单命令，并将其取名为index.html。如果想在打开页面的时候播放音乐，则可以插入音乐。由于背景音乐并不是一种标准的

8、网页属性，所以需要通过修改源代码的方式为网页添加背景音乐。方法是：单击“代码”或“拆分”按钮图标将其切换到代码视图或混合视图，在和之间添加代码为。（3）然后选择【文件】【保存】菜单命令，这样首页就做好了。3制作“音乐试听”页面具体步骤如下：（1）选择菜单【文件】【新建】命令，在弹出的对话框中选择“HTML”页面类型，在布局中选择一个合适的页面布局，然后单击【创建】按钮。（2）单击插入选项卡上的“标准”图标按钮，在可编辑区中插入一个10行7列的表格。（3）在表格第一行中输入文字“序”、“类型”、“歌曲名”、“歌曲手”、“星级”、“试听”、“下载”。接下去再输入自已所喜欢的歌曲名，在“星级”、 “

9、试听”、“下载”列中分别插入对应图片。其中星级的五角星图片量根据需要插入。（4）选中在上一步骤中的表格，在表格的【属性】面板“间距”文本框中填入“10”。（5）选中表格中的所有单元格，修改【属性】面板中的字号大小为14，颜色为蓝色，单元格的水平和垂直都为“居中”，单击【文件】【保存】菜单命令，并将文件名保存为yyst.html。4制作“心情日记”页面“心情日记”页面制作步骤如下。（1）选择菜单【文件】【新建】命令，在弹出的对话框中选择“HTML”页面类型，在布局中选择一个合适的页面布局，然后单击【创建】按钮。（2）单击【插入】面板上的“标准”按钮图标，在可编辑区域插入一个10行2列的表格。（3

10、）在单元格中插入图片，根据自己的需要输入文字，在下面的【属性】面板中设置文字的大小为14，颜色为绿色，单元格水平为“左对齐”命令，垂直为“居中”，表格【属性】面板的“间距”文本框中填入10，选择菜单【文件】【保存】菜单命令，并将文件名保存为qrj.html。5制作软件下载页面制作“软件下载”页面步骤如下：（1）选择菜单【文件】【新建】命令，在弹出的对话框中选择“HTML”页面类型，在布局中选择一个合适的页面布局，然后单击【创建】按钮。（2）单击【插入】面板上的“标准”按钮，在可编辑区插入一个9行5列的表格。（3）输入文字及图片，将文字的“大小”设置成14，颜色为绿色，在表格【属性】面板的“间距

11、”文本框中填入10，选择【文件】【保存】菜单命令，并将文档命名为rjxz.html。则软件下载页面基本做完。（4）制作超链接。选中序号1中的详细信息，在下面的【属性】面板的“链接”文本框中填入链接地址，在下载的图片的【属性】面板“链接”文本框中输入链接地址，下面的链接与此相同，这里就不再叙述，详细例子可参看光盘中的案例。（5）若不希望超链接下面出现下划线，或者不喜欢默认的链接颜色，则可修改页面属性。方法是：选择【修改】【页面属性】菜单命令。在出现的“页面属性”对话框中的“分类”一栏中选择“链接”。在“链接颜色”及“已访问链接”中都选择“#”。同理在活动链接中选择自已喜欢的颜色，在“下划线样式”

12、下拉列表中选择“始终无下划线”选项。6制作“我的简历”的页面具体步骤如下：（1）选择菜单【文件】【新建】命令，在弹出的对话框中选择“HTML”页面类型，在布局中选择一个合适的页面布局，然后单击【创建】按钮。（2）单击插入面板上的“标准”图标按钮，在可编辑区域插入一个7行2列的表格。输入文字，将文字的“大小”设置成16，颜色为绿色，在表格【属性】面板的“间距”文本框中填入10，选择【文件】【保存】菜单命令，并将文档命名为wdjl.html，则“我的简历”页面就做完了。7“给我留言”的页面“给我留言”页面是一个正在建设中的页面。具体步骤如下：（1）选择菜单【文件】【新建】命令，在弹出的对话框中选择

13、“HTML”页面类型，在布局中选择一个合适的页面布局，然后单击【创建】按钮。（2）单击布局单元格按钮，在可编辑区域中绘制一个布局单元格（与做主页的方法一样）插入图片，并输入文字“正在建设中”。（3）选择【文件】【保存】菜单命令，并保存文件名为gwly.html，则“给我留言”的页面就制作完成了。到目前为止，首页及二级页面就做完了，然后将各个页面之间互相做好超链接就行，但是各个页面互作超链接的工作量比较大，最为简捷的方法是在模板中做好超链接,这里我们没有使用模板，所以可以在首页中杀之好链接，然后再把链接部分复制到其他页面。在Dreamweaver中打开index.htm，选中“首页”图片，在【属

14、性】面板的“链接”文本框中输入index.htm；选中“音乐试听”图片，在【属性】面板的“链接”文本框中输入./yyst.htm选中“心情日记”图片，在【属性】面板的【链接】中输入./xqrj.htm选中“软件下载”图片，在【属性】面板的“链接”文本框中输入./rjxz.htm。选中“我的简历”图片，在【属性】面板的【链接】文本框中输入./wdjl.htm。选中“给我留言”图片，在【属性】面板的【链接】文本框中输入./gwly.htm选中“飞鸽传书”图片，在【属性】面板的【链接】文本框中输入mailto:a123（假设主人的邮箱地址为：a1），然后单击【保存】按钮。8制作三级页面由于这几个三级

15、页面的布局差不多，所以准备制作一个模板。（1）具体操作步骤如下。在“other”下新建一个页面，在页面属性面板中单击“页面属性”图标按钮。（2）在“背景图像”栏中输入图片文件，单击【确定】按钮。（3）插入一个1行3列的表格，调整列距，在第一列和第三列中分别插入插入图片。选择【文件】【另存为模板】菜单命令，给此模板取名为untitle.dwt，单击【保存】按钮。选中第2列，选择【插入】【模板】【新建可编辑区】菜单命令，在弹出的对话框中单击【确定】按钮，然后再选择【文件】【保存】菜单命令。（4）下面就可以利用此模板做三级页面。选择【文件】【新建】【模板】菜单命令，单击【创建】按钮，将光标放在打开的文档中的可编辑区中，插入一段文字，将此段文字的标题设置成字号为36，其他文字的字号为14，颜色都设置成蓝色，选择【文件】【保存】菜单命令，将文件名保存为1.htm即可。（5）用同样的方法制作2.htm，3.htm，4.htm等。做好了这几个三级页面后，就可以与“心情日记”中的文章一一进行超链接了。若不满意超链接的样式，则可以在“页面属性”对话框中更改链接外观。