《个人网站的建设—模板和特效网页的制作课件》由会员分享，可在线阅读，更多相关《个人网站的建设—模板和特效网页的制作课件（43页珍藏版）》请在金锄头文库上搜索。
1、项目项目1个人网站的建设个人网站的建设模板和特效网页的制作模板和特效网页的制作任务任务1.个人网站的设计规划个人网站的设计规划任务任务2.创建本地站点任务创建本地站点任务任务任务3.制作网页模板制作网页模板任务任务4.利用模板制作利用模板制作“我的简历我的简历”页面页面任务任务5.网页添加特效网页添加特效任务任务1.个人网站的设计规划个人网站的设计规划任务任务1.1确定网站主题确定网站主题任务任务1.2确定网站的目录结构确定网站的目录结构任务任务1.3确定网站的整体风格确定网站的整体风格任务任务1.4确定网站主要栏目和布局确定网站主要栏目和布局任务任务1.1确定网站主题确定网站主题对于主题的选
2、择主要按下列对于主题的选择主要按下列3个条件去考虑，本例所讲的是一个个人个条件去考虑，本例所讲的是一个个人介绍性质的网站，主题就是介绍个人的相关信息。介绍性质的网站，主题就是介绍个人的相关信息。如果主题已经确定，就可以围绕主题给该网站起一个名字，网站名如果主题已经确定，就可以围绕主题给该网站起一个名字，网站名称也是网站设计的一部分，而且是很关键的要素。称也是网站设计的一部分，而且是很关键的要素。任务任务1.2确定网站的目录结构确定网站的目录结构网站的目录是指建立网站时创建的目录，目录结构的好坏，对浏览网站的目录是指建立网站时创建的目录，目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对站
3、点本身的上传维护以及以后者来说并没有什么太大的感觉，但是对站点本身的上传维护以及以后内容的扩充和移植有着重要的影响。内容的扩充和移植有着重要的影响。建立目录结构的建议：建立目录结构的建议：a.不要将所有文件都存放在根目录下。不要将所有文件都存放在根目录下。b.按栏目内容建立子目录。按栏目内容建立子目录。c.个主目录下都建立独立的个主目录下都建立独立的images目录。目录。d.目录的层次不要太深目录的层次不要太深任务任务1.3确定网站的整体风格确定网站的整体风格 在动手建立网站之前，对网页进行完整、详尽的整体设计是至关重在动手建立网站之前，对网页进行完整、详尽的整体设计是至关重要的。风格是指站
4、点的整体形象想给浏览者的综合感受，包括站点的要的。风格是指站点的整体形象想给浏览者的综合感受，包括站点的标志、色彩、字体、标语、版面布局、内容价值、存在意义、站点荣标志、色彩、字体、标语、版面布局、内容价值、存在意义、站点荣誉等诸多因素。本例的页面采用绿色为主的色调，绿色具有清爽、理誉等诸多因素。本例的页面采用绿色为主的色调，绿色具有清爽、理想、希望、生长的含义，采用这种大面积明亮的绿色块，营造了一个想、希望、生长的含义，采用这种大面积明亮的绿色块，营造了一个清晰明快、充满无限希望与活力的氛围。清晰明快、充满无限希望与活力的氛围。任务任务1.4确定网站主要栏目和布局确定网站主要栏目和布局通常版
5、面布局是按照如下步骤进行的。通常版面布局是按照如下步骤进行的。步骤步骤1.设计草案。设计草案。新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西，设计者新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西，设计者可以尽可能发挥想象力，用一张白纸和一支铅笔勾画出页面的大致布局，可以尽可能发挥想象力，用一张白纸和一支铅笔勾画出页面的大致布局，当然永续哦图软件当然永续哦图软件photoshopFirewoeks等也可以。等也可以。步骤步骤2.进行粗略布局进行粗略布局在草案的基础上，将确定需要放置的功能模块安排到页面上。必须遵循在草案的基础上，将确定需要放置的功能模块安排到页面上。必须遵循6
6、突突出重点、平衡协调的原则，将网站标志、主出重点、平衡协调的原则，将网站标志、主要栏目等最重要的模块放在最要栏目等最重要的模块放在最显眼，最突出的位置，然后再考虑次要模块的排放。显眼，最突出的位置，然后再考虑次要模块的排放。任务任务2.创建本地站点创建本地站点步骤步骤1.选择选择【站点站点】|【管理站点管理站点】命令，弹出命令，弹出【管理站点管理站点】对话框，在对话框，在【管理管理站点站点】对话框中，单击对话框中，单击【新建新建】按钮，然后从弹出的菜单中选择按钮，然后从弹出的菜单中选择【站点站点】选项。选项。任务任务2.创建本地站点创建本地站点步骤步骤2.弹出弹出【站点定义站点定义】对话框，如
7、果对话框显示的是对话框，如果对话框显示的是【高级高级】选项卡，则切换选项卡，则切换到到【基本基本】选项卡，弹出选项卡，弹出【站点定义向导站点定义向导】的第一个界面，要求为站点输入名的第一个界面，要求为站点输入名称。称。任务任务2.创建本地站点创建本地站点步骤步骤3.单击单击【下一步下一步】按钮，出现向导的下一个界面，询问是否要使用服务器技按钮，出现向导的下一个界面，询问是否要使用服务器技术。选择术。选择【否我不想使用服务器技术否我不想使用服务器技术】选项，指示目前该站点是一个静态站选项，指示目前该站点是一个静态站点没有动态页面。点没有动态页面。步骤步骤4.单击单击【下一步下一步】按钮，打开按钮
8、，打开如图如图4.5所示的对话框，在文本框中输入站点所示的对话框，在文本框中输入站点路经。路经。任务任务2.创建本地站点创建本地站点步骤步骤5.单击单击【下一步下一步】按钮，询问如何连接到远程服务器，这里选择按钮，询问如何连接到远程服务器，这里选择【无无】，因为将整个站点制作完成以后再上传。因为将整个站点制作完成以后再上传。步骤步骤6.单击单击【下一步下一步】按钮，按钮，将显示设置概要。将显示设置概要。任务任务2.创建本地站点创建本地站点步骤步骤7.单击单击【完成完成】按钮，即出现按钮，即出现【管理站点管理站点】对话框，其中显示了新建的对话框，其中显示了新建的站点。站点。步骤步骤8.单击单击【
9、完成完成】按钮，关闭按钮，关闭【管理站点管理站点】对话框，现在，已经为站点对话框，现在，已经为站点定义了一个本地根文件夹，就可以在站点中制作网页了，当制作完成以后，定义了一个本地根文件夹，就可以在站点中制作网页了，当制作完成以后，就可以上传到服务器上供大家浏览了。就可以上传到服务器上供大家浏览了。任务任务3.制作网页模板制作网页模板使用模板创建文档可使站点具有统一的结构和外观。具体操作步骤如下：使用模板创建文档可使站点具有统一的结构和外观。具体操作步骤如下：步骤步骤1.选择选择【文件文件】|【新建新建】命令，弹出命令，弹出【新建文档新建文档】对话框，选择对话框，选择【空白空白页页】选项，在选项
10、，在【页面类型页面类型】选项卡中选择选项卡中选择【模板模板】选择。选择。步骤步骤.单击单击【创建创建】按钮，创建一空白模板网页。选择按钮，创建一空白模板网页。选择【修改修改】【页面元页面元素素】命令，打开命令，打开【页面属性页面属性】对话框，在对话框，在【页面属性页面属性】对话框中将对话框中将【背景颜色背景颜色】设置，设置，【左边距左边距】、【右边距右边距】、【上边距上边距】和和【下边距下边距】分别设置为。分别设置为。步骤步骤.单击单击【确定确定】按钮。按钮。步骤步骤.将光标放置在页面中，选择将光标放置在页面中，选择【窗口窗口】【资源资源】命令，打开命令，打开【资源资源】面板。面板。任务任务3
11、.制作网页模板制作网页模板步骤步骤.在面板中单击新建建按钮，显示以创建的库文件，单击并选择要插入的在面板中单击新建建按钮，显示以创建的库文件，单击并选择要插入的库文件，单击库文件，单击【资源资源】面板底部的面板底部的【插入插入】按钮，即可插入库文件。按钮，即可插入库文件。步骤步骤.将光标放置在库文件的右边，选择将光标放置在库文件的右边，选择【插入记录插入记录】【表格表格】命令，插入命令，插入行列的表格，此表格记为表格。行列的表格，此表格记为表格。步骤步骤.将光标放置在表格的第列，选择将光标放置在表格的第列，选择【插入记录插入记录】【表格表格】命令，插命令，插入行列的表格，此表格记为表格。入行列
12、的表格，此表格记为表格。步骤步骤.将光标放置在表格的第行单元格中，选择将光标放置在表格的第行单元格中，选择【插入记录插入记录】【图像图像】命令，插入图像命令，插入图像images/left_top.jpg。任务任务3.制作网页模板制作网页模板步骤步骤9.将光标放置在表格将光标放置在表格2的第的第2行单元格中，单击属性面板中行单元格中，单击属性面板中【背景背景】文本文本框右边的框右边的【浏览浏览】按钮，插入背景图像按钮，插入背景图像images/left_di.gif。任务任务3.制作网页模板制作网页模板步骤步骤10.将光标放置在背景图像上，选择将光标放置在背景图像上，选择【插入记录插入记录】|
13、【表格表格】命令，插入命令，插入10行行1列的表格，此表格记为表格列的表格，此表格记为表格3，在属性面板中，将，在属性面板中，将【对齐对齐】设置为设置为【居居中对齐中对齐】。任务任务3.制作网页模板制作网页模板步骤步骤11.将光标放置在表格将光标放置在表格3的第的第2行单元格中，选择行单元格中，选择【插入记录插入记录】|【图像图像】命令，插入图像命令，插入图像images/geren.gif。步骤步骤12.在表格在表格3的其他单元格中再插入相应的图像。的其他单元格中再插入相应的图像。步骤步骤13.将光标放置在表格将光标放置在表格2的第的第3行中，选择行中，选择【插入记录插入记录】|【图像图像】
14、命令，命令，插入插入images/left-botton.jpg。任务任务3.制作网页模板制作网页模板步骤步骤14.将表格将表格1的第的第2列列【宽宽】设置我设置我10。步骤步骤15.将光标放置在表格将光标放置在表格1的第的第3列中，选择列中，选择【插入记录插入记录】|【表格表格】命令，命令，插入插入4行行1列的表格，此表格记为表格列的表格，此表格记为表格4。任务任务3.制作网页模板制作网页模板步骤步骤16.将光标放置在表格将光标放置在表格4的第的第1行中，选择行中，选择【插入记录插入记录】|【图像图像】命令，命令，插入图片插入图片hua-1.jpg。步骤步骤17.将光标放置在表格将光标放置在
15、表格4的第的第2行中，选择行中，选择【插入记录插入记录】|【图像图像】命令，命令，插入图像插入图像hua-2.jpg。任务任务3.制作网页模板制作网页模板任务任务3.制作网页模板制作网页模板步骤步骤18.将光标放置在表格将光标放置在表格4的第的第3行中，选择行中，选择【插入记录插入记录】|【表格表格】命令，插入命令，插入1行行1列的表格，此表格记为表格列的表格，此表格记为表格5。任务任务3.制作网页模板制作网页模板步骤步骤19.将光标放置在表格将光标放置在表格5中，单击属性检查器中，单击属性检查器【背景背景】文本框右边的文本框右边的【浏览浏览】按钮，插入背景图像按钮，插入背景图像images/
16、di.gif，将，将【高高】设置为设置为【顶端顶端】。步骤步骤20.将光标放置在表格将光标放置在表格4的第的第4行中，选择行中，选择【插入记录插入记录】|【图像图像】命令，插入命令，插入图像图像imageshua-3.jif。任务任务3.制作网页模板制作网页模板步骤步骤21.将光标放置在表格将光标放置在表格1的右边，选择的右边，选择【插入记录插入记录】|【表格表格】命令，插入命令，插入1行行1列的表格，此表格记为表格列的表格，此表格记为表格6，在属性检查器中将，在属性检查器中将【对齐对齐】设置为设置为【居中对居中对】。步骤步骤22.将光标放置在表格将光标放置在表格6中，单击属性面板中中，单击属
17、性面板中【背景背景】文本框右边的文本框右边的【浏浏览览】按钮，插入背景图像按钮，插入背景图像images/footer.jpg,将将【高高】设置为设置为113。任务任务3 . 制作网页模板制作网页模板步骤步骤23.将光标放置在背景图像上，输入文字将光标放置在背景图像上，输入文字“版权所有盈盈版权所有盈盈”。步骤步骤24.将光标放置在文字间，选择将光标放置在文字间，选择【插入记录插入记录】|【HTML】|【特殊字符特殊字符】|【版权版权】命令，弹出命令，弹出Dreamweaver提示框。提示框。步骤步骤25.单击单击【确定确定】按钮，插入版权符号。按钮，插入版权符号。任务任务3 . 制作网页模板
18、制作网页模板任务任务4.利用模板制作利用模板制作“我的简历我的简历”页面页面步骤步骤1.选择选择【文件文件】|【新建新建】命令，弹出命令，弹出【新建文档新建文档】对话框，选择对话框，选择【模板模板中的页中的页】选项，选择选项，选择【站点站点】下的下的【个人网站个人网站】选项，选择选项，选择【站点站点“个人网站个人网站”的模板的模板】中的中的index选项，勾选选项，勾选【当模板改变时更新页面当模板改变时更新页面】复选框。复选框。步骤步骤2.单击单击【创建创建】按钮，创建一模板。按钮，创建一模板。任务任务4.利用模板制作利用模板制作“我的简历我的简历”页面页面步骤步骤3.将光标置于可编辑区将光标
19、置于可编辑区zhengwen中，选择中，选择【插入记录插入记录】|【表格表格】命令，命令，插入插入5行行1列的表格，此表格记为表格列的表格，此表格记为表格7。任务任务4. 利用模板制作利用模板制作“我的简历我的简历”页面页面步骤步骤4.将光标放置在表格将光标放置在表格7的第的第1行中，将行中，将【高高】设置为设置为50.将光标放将光标放置表格置表格7的第的第2行中，选择行中，选择【插入记录插入记录】|【图像图像】命令，插入图像命令，插入图像images/jiben.jif。任务任务4. 利用模板制作利用模板制作“我的简历我的简历”页面页面步骤步骤5.将光标放置在表格将光标放置在表格7的第的第2
20、行中，选择行中，选择【插入记录插入记录】|【表格表格】命令，插入命令，插入4行行4列的表格，此表格记为表格列的表格，此表格记为表格8，在属性面板中将，在属性面板中将【间距间距】设置为设置为2。任务任务4.利用模板制作利用模板制作“我的简历我的简历”页面页面步骤步骤6.在表格在表格8中输入相应的文字，并把第中输入相应的文字，并把第4行单元格合并。行单元格合并。步骤步骤7.将光标放置在表格将光标放置在表格7的第的第4行中，选择行中，选择【插入记录插入记录】|【表格表格】命令，插命令，插入入3行行1列的表格，此表格记为表格列的表格，此表格记为表格9。任务任务4.利用模板制作利用模板制作“我的简历我的
21、简历”页面页面步骤步骤8.将光标放置在表格将光标放置在表格9的第的第1行中，选择行中，选择【插入记录插入记录】|【图像图像】命令，命令，插入图像插入图像images/jiaoyu.gif。任务任务4.利用模板制作利用模板制作“我的简历我的简历”页面页面步骤步骤9.在表格在表格9的第的第2和第和第3行输入相应的文字。行输入相应的文字。步骤步骤10.将光标放置在表格将光标放置在表格7的第的第5行中，选择行中，选择【插入记录插入记录】|【表格表格】命令，命令，插入插入4行行1列的表格，此表格记为表格列的表格，此表格记为表格10。任务任务4. 利用模板制作利用模板制作“我的简历我的简历”页面页面步骤步
22、骤11.将光标放置在表格将光标放置在表格10的第的第1行中，选择行中，选择【插入记录插入记录】|【图像图像】命命令，插入图像令，插入图像images/gzjl.gif。步骤步骤12.在表格在表格10的其他单元格中输入相应的文字。的其他单元格中输入相应的文字。任务任务5.网页添加特效网页添加特效2.5.1制作弹出窗口页面制作弹出窗口页面4.5.2给网页添加背景音乐给网页添加背景音乐步骤步骤1.从站点打开文件。从站点打开文件。步骤步骤2.将光标置于文档中相应的位置，选择将光标置于文档中相应的位置，选择【窗口窗口】|【行为行为】命令，打开行为命令，打开行为面板，在行为面板中单击添加按钮，在弹出的下拉
23、列表中选择面板，在行为面板中单击添加按钮，在弹出的下拉列表中选择【打开浏览器窗打开浏览器窗口口】命令命令步骤步骤3.弹出弹出【打开浏览器窗口打开浏览器窗口】对话框对话框步骤步骤4.在对话框中，单击在对话框中，单击【要显示的要显示的URL】文本框右边的文本框右边的【浏览浏览】按钮，弹出按钮，弹出【选择文件选择文件】对话框。对话框。任务任务5.1制作弹出窗口页面制作弹出窗口页面任务任务5.1 制作弹出窗口页面制作弹出窗口页面步骤步骤5.在对话框中选择相应的文件，单击在对话框中选择相应的文件，单击【确定确定】按钮，返回到按钮，返回到【打开浏览窗口打开浏览窗口】对话框，将对话框，将【窗口宽度窗口宽度】
24、设置设置450，【窗口宽度窗口宽度】设置为设置为450，【窗口高度窗口高度】设置为设置为280。步骤步骤6.单击单击【确定确定】按钮，在行为面板中就会出现添加按钮，在行为面板中就会出现添加【打开浏览打开浏览器窗口器窗口】行为，行为，【事件事件】为为onClick。在浏览器中预览。在浏览器中预览。任务任务5.2给网页添加背景音乐给网页添加背景音乐步骤步骤1.打开网页。打开网页。步骤步骤2.选择选择【命令命令】|【扩展管理扩展管理】命令，弹出命令，弹出AdobeExtensionManager对话框。对话框。任务任务5.2给网页添加背景音乐给网页添加背景音乐步骤步骤3.在对话框中单击在对话框中单击
25、【安装新扩展安装新扩展】按钮，弹出按钮，弹出【选取要安装的扩展选取要安装的扩展】对话对话框。框。任务任务5.2给网页添加背景音乐给网页添加背景音乐步骤步骤4.在对话框中选择要安装的插件，单击在对话框中选择要安装的插件，单击【安装安装】按钮，按钮，AdobeExtensionManager提示信息框。提示信息框。任务任务5.2给网页添加背景音乐给网页添加背景音乐步骤步骤5.单击单击【接受接受】按钮，弹出成功安装提示框。按钮，弹出成功安装提示框。任务任务5.2给网页添加背景音乐给网页添加背景音乐步骤步骤6.单击单击【确定确定】按钮，插件安装成功。按钮，插件安装成功。任务任务5.2给网页添加背景音乐
26、给网页添加背景音乐步骤步骤7.当插件安装成功，在当插件安装成功，在【常用常用】插入栏中就会显示声音按钮。插入栏中就会显示声音按钮。步骤步骤8.单击单击【常用常用】插入栏中的声音按钮，弹出插入栏中的声音按钮，弹出Sound对话框，在对话框中单击对话框，在对话框中单击Browse按钮，弹出按钮，弹出【选择文件选择文件】对话框。对话框。任务任务5.2给网页添加背景音乐给网页添加背景音乐步骤步骤9.在对话框中选择声音文件在对话框中选择声音文件part.mid,单击单击【确定确定】按钮，添加到按钮，添加到Sound对话框。对话框。步骤步骤10.单击单击【确定确定】按钮，插入背景音乐。按钮，插入背景音乐。步骤步骤11.保存文档，在浏览器中预览效果。保存文档，在浏览器中预览效果。搞笑图片 http:/ 柙毰焁
