那天坐在旧笔记本跟前,第一次琢磨怎么用dreamweaver制作网页,之前只在网上看过别人截的界面图,以为拖拖拽拽就能拼出一个像样页面,点开软件才发现事情远不是想的那样。软件打开之后密密麻麻的面板堆在屏幕上,代码、拆分、设计三个视图摆在上方,一开始直接切到设计视图,想着和做PPT差不多,插文字插图片就完事,光标点来点击,往画布里面敲了几行文字,又找插入菜单加了一张本地图片,看着画布里面东西都摆上了,心里还松了口气,觉得好像也没有多难。
保存文件的时候随便起了个名字,后缀直接写html,存到桌面,双击打开浏览器预览,图片直接裂开一个小叉。反复检查图片路径,一开始根本分不清相对路径和绝对路径,图片放在桌面,网页文件也放在桌面,还是显示不出来,来回挪文件位置,一会把图片放进新建文件夹,一会又挪出来,折腾了快一个小时,浏览器里依旧看不到图,当时火气一下子上来,鼠标狠狠点了几下刷新按钮。
切换到拆分视图,一边看可视化画面,一边看右边冒出来的一堆代码,那些尖括号包裹起来的标签看得脑袋发懵。分不清哪个标签管段落,哪个是图片,随手删掉一行,设计视图里一大块文字直接消失,慌慌张张点撤销,来回试错,不敢再随便删东西。本来想加个背景颜色,在属性面板里面找背景选项,选好颜色之后,预览的时候又没有变化,不知道是样式没生效,还是选到了别的容器上面。
旁边同学说直接写css放在头部里面,会稳定很多。
跟着他随口说的,在head里面敲style标签,胡乱复制一段网上找的样式代码,颜色值随便改了个数字,保存刷新,页面底色终于变了,那一刻还挺开心,可文字排版又乱了,一行字挤在页面左上角,不会调边距,不会居中,想让文字往中间放,在属性面板里面找居中按钮,点完只有选中那一段文字居中,别的地方纹丝不动。
很多操作都是凭感觉乱试,分不清dreamweaver里面那些自动补全功能什么时候好用什么时候添乱,有时候敲一半标签软件自己帮我补齐,有的时候补出来的东西是错的,多出来莫名其妙的引号,代码直接报错,预览页面直接变形。也试过用软件自带的布局模板,点开模板加载出来一大段成型页面,看着很规整,但是一改里面文字,整个布局直接错位,模块挤到一块,根本没法按需修改,才明白模板看着省心,改起来反而更麻烦。
中途关掉软件好几次,盯着桌面那个html文件发呆,怀疑是不是自己哪里基础的设置弄错了,站点一直没有新建,后来才反应过来,没有定义本地站点,路径这块就很容易出问题,网上很多教程第一句就说要先建站点,我上来直接新建空白页面跳过这一步,后面图片、样式各种加载异常,根源差不多都在这。新建站点的时候还要选本地文件夹,把网页素材全部统一放进这个文件夹里面,所有素材都放在站点目录里面,再去插入图片,图片才终于正常显示出来。
慢慢摸索的时候,发现设计视图本身就有局限,很多样式在软件画布里面看着好好的,放到浏览器里面打开就是另外一副样子,两个地方显示不一样,一会字体大小不一样,一会间距变了,没法完全靠拖拽预览最终效果,到后面我干脆很少用纯设计视图,大多停在拆分视图,一边写或者改代码,一边看实时变化,改一小段就保存一次,切浏览器刷新看效果,一点点微调。
那天最后也没有做出什么好看的页面,就一个简简单单的页面,一段文字,一张能正常加载的图,换了个浅灰色背景,连导航栏都没加上,排版歪歪扭扭,算不上成品。关掉浏览器的时候天色已经暗下来,屏幕上面还留着dreamweaver打开的代码,密密麻麻的标签停在那里。
后来很长一段时间,我都很少再打开这个软件,知道它可以辅助写网页,但再也不会觉得拖拽几下就能轻松做出来。