62个人网站的建设―模板和特效网页的制作

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